tcannonfodder · tcannonfodder · Aug 13, 2016 · Aug 13, 2016 · Aug 13, 2016 · Aug 13, 2016
diff --git a/config/assets.yml b/config/assets.yml
@@ -101,6 +101,9 @@ javascripts:
     - &maneuver_node_editor
       - static/js/maneuver_node_editor.js
 
+    - &camera_feed
+      - static/js/camera_feed.js
+
   3dmap:
     - *app_core
     - *3d_map
@@ -110,6 +113,7 @@ javascripts:
     - *position_map
     - *navball
     - *altitude_tracker
+    - *camera_feed
 
   boost:
     - *app_core
@@ -118,10 +122,15 @@ javascripts:
     - *burn_planner
     - *staging_info_table
 
+  camera:
+    - *app_core
+    - *camera_feed
+
   docking:
     - *app_core
     - *navball
     - *docking_map
+    - *camera_feed
 
   ground-track:
     - *app_core
@@ -132,11 +141,13 @@ javascripts:
     - *ground_track
     - *navball
     - *altitude_tracker
+    - *camera_feed
 
   mission-wall:
     - *app_core
     - *ground_track
     - *3d_map
+    - *camera_feed
 
   navigation:
     - *app_core
@@ -158,6 +169,7 @@ javascripts:
   vessel-overview:
     - *app_core
     - *ground_track
+    - *camera_feed
 
   app:
     - *app_core
@@ -166,6 +178,7 @@ stylesheets:
   app:
     - static/stylesheets/chartist.min.css
     - static/stylesheets/leafletksp.css
+    - static/stylesheets/camera.css
     - static/stylesheets/application.css
   3dmap:
     - static/stylesheets/3dmap.css

diff --git a/content/ascension.html b/content/ascension.html
@@ -24,6 +24,8 @@
     <%= render 'atmospheric_density' %>
   </div>
 
+  <%= render 'camera' %>
+
   <div id="ascension-data-and-button-panel">
     <table id="ascension-data" class="readout-display readout-table"></table>
 
@@ -115,4 +117,12 @@
       formatter: function(value){ return DataFormatters.velocityString(value) }
     },
   ])
+
+  window.cameraFeed = new CameraFeed(window.datalink, {
+    cameraList: $('camera-list'),
+    cameraListContainer: $('camera-selector-container'),
+    showCameraList: $('show-camera-list'),
+    cameraName: $('camera-name'),
+    cameraImage: $('camera-image')
+  })
 <% end %>
diff --git a/content/camera.html b/content/camera.html
@@ -0,0 +1,21 @@
+---
+title: Camera Feed
+---
+
+<% content_for :head do %>
+  <link rel="stylesheet" type="text/css" href="../assets/stylesheets/camera.css" />
+<% end %>
+
+<%= render 'camera' %>
+
+<% content_for :dom_loaded do %>
+  window.datalink.rate = 1000
+
+  window.cameraFeed = new CameraFeed(window.datalink, {
+    cameraList: $('camera-list'),
+    cameraListContainer: $('camera-selector-container'),
+    showCameraList: $('show-camera-list'),
+    cameraName: $('camera-name'),
+    cameraImage: $('camera-image')
+  })
+<% end %>
diff --git a/content/docking.html b/content/docking.html
@@ -10,6 +10,8 @@
   <div id="docking-map-container" class="readout-display">
     <div id="docking-map"></div>
   </div>
+
+  <%= render 'camera' %>
 </div>
 
 <div id="bottom-panel">
@@ -73,4 +75,12 @@ <h2>Docking Info</h2>
   window.sasButtonIndicator = new ButtonIndicator(datalink, 'sas', 'v.sasValue')
   window.throttleGauge = new ThrottleGauge(window.datalink, 'throttle')
 
+  window.cameraFeed = new CameraFeed(window.datalink, {
+    cameraList: $('camera-list'),
+    cameraListContainer: $('camera-selector-container'),
+    showCameraList: $('show-camera-list'),
+    cameraName: $('camera-name'),
+    cameraImage: $('camera-image')
+  })
+
 <% end %>
diff --git a/content/landing.html b/content/landing.html
@@ -42,8 +42,11 @@
   </div>
 </div>
 
-<div class="readout-display">
-  <%= render 'altitude_tracker_chart' %>
+<div id="bottom-panel">
+  <%= render 'camera' %>
+  <div class="readout-display">
+    <%= render 'altitude_tracker_chart' %>
+  </div>
 </div>
 
 <% content_for :dom_loaded do %>
@@ -100,4 +103,12 @@
       formatter: function(value){ return DataFormatters.velocityString(value) }
     },
   ])
+
+  window.cameraFeed = new CameraFeed(window.datalink, {
+    cameraList: $('camera-list'),
+    cameraListContainer: $('camera-selector-container'),
+    showCameraList: $('show-camera-list'),
+    cameraName: $('camera-name'),
+    cameraImage: $('camera-image')
+  })
 <% end %>
diff --git a/content/mission-wall.html b/content/mission-wall.html
@@ -14,8 +14,12 @@ <h2>Altitude Estimate</h2>
   </div>
 </div>
 
-<div id="orbital-map-container" class="readout-display">
-  <div id="orbital-map"></div>
+<div id="orbital-map-and-camera-container-test">
+  <div id="orbital-map-container" class="readout-display">
+    <div id="orbital-map"></div>
+  </div>
+
+  <%= render 'camera' %>
 </div>
 
 <%= render 'orbital_map_shader' %>
@@ -29,4 +33,12 @@ <h2>Altitude Estimate</h2>
   window.positionDataFormatter = new PositionDataFormatter(orbitalPositionData, window.datalink)
 
   window.OrbitalMap = new OrbitalMap(positionDataFormatter, window.datalink, "orbital-map")
+
+  window.cameraFeed = new CameraFeed(window.datalink, {
+    cameraList: $('camera-list'),
+    cameraListContainer: $('camera-selector-container'),
+    showCameraList: $('show-camera-list'),
+    cameraName: $('camera-name'),
+    cameraImage: $('camera-image')
+  })
 <% end %>
diff --git a/content/vessel-overview.html b/content/vessel-overview.html
@@ -23,12 +23,15 @@
     </div>
   </div>
 
-  <div id="button-panel">
-    <%= render 'button', :button_id => "rcs", :button_label => "RCS" %>
-    <%= render 'button', :button_id => "sas", :button_label => "SAS" %>
-  </div>
+  <%= render 'camera' %>
 
-  <table id="orbital-data" class="readout-display readout-table"></table>
+  <div id='orbital-data-and-buttons'>
+    <table id="orbital-data" class="readout-display readout-table"></table>
+    <div id="button-panel">
+      <%= render 'button', :button_id => "rcs", :button_label => "RCS" %>
+      <%= render 'button', :button_id => "sas", :button_label => "SAS" %>
+    </div>
+  </div>
 </div>
 
 <div id="ground-track-wrapper">
@@ -119,4 +122,12 @@ <h2>Altitude Estimate</h2>
       formatter: function(value){ return DataFormatters.velocityString(value) }
     },
   ])
+
+  window.cameraFeed = new CameraFeed(window.datalink, {
+    cameraList: $('camera-list'),
+    cameraListContainer: $('camera-selector-container'),
+    showCameraList: $('show-camera-list'),
+    cameraName: $('camera-name'),
+    cameraImage: $('camera-image')
+  })
 <% end %>
diff --git a/icons.sketch b/icons.sketch
diff --git a/layouts/camera.html b/layouts/camera.html
@@ -0,0 +1,18 @@
+<div id="camera" class="camera gauge">
+  <div class="readout-display">
+    <div id="camera-selector-container" class="camera-selector hidden">
+      <h2>Cameras</h2>
+      <ul id="camera-list" class="camera-list">
+      </ul>
+    </div>
+    <div class="camera-display">
+      <h2 id="camera-name"></h2>
+      <div class='camera-image-wrapper scanlines'>
+        <img id="camera-image"/>
+      </div>
+    </div>
+  </div>
+  <div class="camera-list-button-wrapper">
+    <button id='show-camera-list'>Choose Camera</button>
+  </div>
+</div>
diff --git a/layouts/default.html b/layouts/default.html
@@ -13,6 +13,7 @@
 
   <link rel="stylesheet" type="text/css" href="../assets/stylesheets/chartist.min.css" />
   <link rel="stylesheet" type="text/css" href="../assets/stylesheets/leafletksp.css" />
+  <link rel="stylesheet" type="text/css" href="../assets/stylesheets/camera_module.css" />
   <link rel="stylesheet" type="text/css" href="../assets/stylesheets/application.css" />
 
   <link rel="apple-touch-icon-precomposed" sizes="57x57" href="../assets/icons/<%= @item.identifier %>/apple-touch-icon-57x57.png" />
@@ -84,6 +85,9 @@
             <%= render 'nav_item', :nav_item => 'ground-track', :nav_title => "Ground Track", :nav_url => '../ground-track/index.html' %>
             <%= render 'nav_item', :nav_item => 'map', :nav_title => "Orbital Map", :nav_url => '../3dmap/index.html' %>
             <%= render 'nav_item', :nav_item => 'mission-wall', :nav_title => "Mission Wall", :nav_url => '../mission-wall/index.html' %>
+
+            <%= render 'nav_item', :nav_item => 'camera', :nav_title => "Camera Feed", :nav_url => '../camera/index.html' %>
+
             <%= render 'nav_item', :nav_item => 'staging-analysis', :nav_title => "Staging Analysis", :nav_url => '../staging-analysis/index.html' %>
             <%= render 'nav_item', :nav_title => "Telemachus Console", :nav_url => '/telemachus/console.html', :id => 'telemachus-console', :nav_item => "telemachus", :image_name => "telemachus-preview.png" %>
 

diff --git a/public/3dmap/index.html b/public/3dmap/index.html
@@ -11,6 +11,7 @@
 
   <link rel="stylesheet" type="text/css" href="../assets/stylesheets/chartist.min.css" />
   <link rel="stylesheet" type="text/css" href="../assets/stylesheets/leafletksp.css" />
+  <link rel="stylesheet" type="text/css" href="../assets/stylesheets/camera_module.css" />
   <link rel="stylesheet" type="text/css" href="../assets/stylesheets/application.css" />
 
   <link rel="apple-touch-icon-precomposed" sizes="57x57" href="../assets/icons//3dmap//apple-touch-icon-57x57.png" />
@@ -156,6 +157,15 @@
     Mission Wall
   </a>
 </li>
+
+
+<li id="" class="">
+  <a href="../camera/index.html">
+    <img src="../assets/images/camera-preview.svg"/>
+    Camera Feed
+  </a>
+</li>
+
 
 <li id="" class="">
   <a href="../staging-analysis/index.html">

diff --git a/public/ascension/index.html b/public/ascension/index.html
@@ -11,6 +11,7 @@
 
   <link rel="stylesheet" type="text/css" href="../assets/stylesheets/chartist.min.css" />
   <link rel="stylesheet" type="text/css" href="../assets/stylesheets/leafletksp.css" />
+  <link rel="stylesheet" type="text/css" href="../assets/stylesheets/camera_module.css" />
   <link rel="stylesheet" type="text/css" href="../assets/stylesheets/application.css" />
 
   <link rel="apple-touch-icon-precomposed" sizes="57x57" href="../assets/icons//ascension//apple-touch-icon-57x57.png" />
@@ -156,6 +157,15 @@
     Mission Wall
   </a>
 </li>
+
+
+<li id="" class="">
+  <a href="../camera/index.html">
+    <img src="../assets/images/camera-preview.svg"/>
+    Camera Feed
+  </a>
+</li>
+
 
 <li id="" class="">
   <a href="../staging-analysis/index.html">
@@ -293,6 +303,25 @@ <h1>Ascension Module</h1>
 </div>
   </div>
 
+  <div id="camera" class="camera gauge">
+  <div class="readout-display">
+    <div id="camera-selector-container" class="camera-selector hidden">
+      <h2>Cameras</h2>
+      <ul id="camera-list" class="camera-list">
+      </ul>
+    </div>
+    <div class="camera-display">
+      <h2 id="camera-name"></h2>
+      <div class='camera-image-wrapper scanlines'>
+        <img id="camera-image"/>
+      </div>
+    </div>
+  </div>
+  <div class="camera-list-button-wrapper">
+    <button id='show-camera-list'>Choose Camera</button>
+  </div>
+</div>
+
   <div id="ascension-data-and-button-panel">
     <table id="ascension-data" class="readout-display readout-table"></table>
 
@@ -444,6 +473,14 @@ <h1>Ascension Module</h1>
     },
   ])
 
+  window.cameraFeed = new CameraFeed(window.datalink, {
+    cameraList: $('camera-list'),
+    cameraListContainer: $('camera-selector-container'),
+    showCameraList: $('show-camera-list'),
+    cameraName: $('camera-name'),
+    cameraImage: $('camera-image')
+  })
+
   })
 
   </script>

diff --git a/public/assets/3dmap.js b/public/assets/3dmap.js
diff --git a/public/assets/app.js b/public/assets/app.js
diff --git a/public/assets/ascension.js b/public/assets/ascension.js
diff --git a/public/assets/boost.js b/public/assets/boost.js