Camera switching dropdown element addition to /v2 (#698)

* Using adapterjs lib as a package * Updating styles for new interface * Adding a dropdown element in /v2 for switching cameras
publiclab · Aug 17, 2021 · edaaa71 · edaaa71
1 parent 7805e31
commit edaaa71
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 39 deletions.
diff --git a/app/assets/config/manifest.js b/app/assets/config/manifest.js
@@ -10,4 +10,5 @@
 //= link new-interface.js
 //= link spectral-workbench/examples/new-capture/new-capture.css
 //= link spectral-workbench/examples/capture/capture.js
-//= link spectral-workbench/dist/capture.dist.js
+//= link spectral-workbench/dist/capture.dist.js
+//= link adapterjs/publish/adapter.min.js
diff --git a/app/assets/stylesheets/new-interface.css b/app/assets/stylesheets/new-interface.css
@@ -73,6 +73,38 @@ div.full-strecth-flex-vertical.content, div.full-strecth-flex-vertical {
   padding-top: 8rem;
 }
 
+#landing-page-content:before {
+  background-image: url('/images/landing-wallpaper.jpg');
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center;
+  content: ' ';
+  display: block;
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  z-index: -1;
+  opacity: 0.3;
+}
+
+#landing-page-content {
+  max-width: fit-content;
+  justify-content: space-around;
+  text-align: center;
+  align-items: center;
+  margin-left: auto;
+  margin-right: auto;
+  padding-top: 8rem;
+  position: relative;
+  z-index: 100;
+}
+
+#landing-page-content h1 {
+  margin-top: 0px;
+}
+
 div#capture-phase-right {
   background-color: #353535;
   height: fit-content;
@@ -197,7 +229,7 @@ select#calibration_id {
   }
 
   div#capture-settings {
-    height: 100vh;
+    height: auto;
   }
 
   .tooltip {
@@ -459,40 +491,6 @@ select#calibration_id {
   align-items: center;
 }
 
-#landing-page-content:before {
-  background-image: url('/images/landing-wallpaper.jpg');
-  background-repeat: no-repeat;
-  background-size: cover;
-  background-position: center;
-  content: ' ';
-  display: block;
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  z-index: -1;
-  opacity: 0.3;
-}
-
-#landing-page-content {
-  max-width: fit-content;
-  width: 100%;
-  justify-content: space-around;
-  text-align: center;
-  align-items: center;
-  padding: 5rem;
-  margin: 0 auto;
-  margin-top: 7rem;
-  margin-bottom: 2rem;
-  position: absolute;
-  z-index: 100;
-}
-
-#landing-page-content h1 {
-  margin-top: 0px;
-}
-
 #stepper, .bs-stepper-header {
   margin-top: 1rem;
 }

diff --git a/app/views/capture/index2.html.erb b/app/views/capture/index2.html.erb
@@ -139,9 +139,9 @@
                     <a rel="tooltip" title="Rotate video 90 &deg;" class="btn btn-default btn-rotate" onClick="$W.toggle_rotation()"><i class="fa fa-rotate-right" aria-hidden="true"></i><span class="responsive-hide"> Rotate</span></a>
                 </p>
 
-                <p class="responsive-hide" style="padding-top:5px;">
-                Help <a href="http://publiclab.org/wiki/spectral-workbench-usage#Webcam+selection">selecting a camera</a>
-                </p>
+                <div class="select" style="padding-top:5px;">
+                  <label for="videoSource">Camera source: </label><select id="videoSource"></select>
+                </div>
 
                 <button class="btn btn-large btn-primary" data-toggle="tab" id="setting-page-next">Begin capturing &raquo;</button>
             </div>