From 043df0ae5022f112d8af0d0fc43fcb6cb490112b Mon Sep 17 00:00:00 2001
From: waridrox <mohdwarid4@gmail.com>
Date: Mon, 21 Jun 2021 02:09:36 +0530
Subject: [PATCH] Both old and new-capture work along with cross-browser
 support

---
 app/assets/config/manifest.js          |  10 +-
 app/assets/javascripts/application.js  |  15 +-
 app/assets/stylesheets/application.css |   8 +-
 app/views/capture/index.html.erb       |  23 +-
 app/views/capture/index2.html.erb      | 695 ++++++++++++-------------
 5 files changed, 368 insertions(+), 383 deletions(-)

diff --git a/app/assets/config/manifest.js b/app/assets/config/manifest.js
index 453f5b6f4..e7aada2ed 100644
--- a/app/assets/config/manifest.js
+++ b/app/assets/config/manifest.js
@@ -2,6 +2,14 @@
 //= link application.css
 //= link application.js
 //= link capture.css
+//= link new-capture.css
 //= link capture.js
 //= link analyze.js
-//= link upload.js
\ No newline at end of file
+//= link upload.js
+//= link jquery.flot.js
+//= link jquery.flot.crosshair.js
+//= link jquery.flot.threshold.js
+//= link d3.js
+//= link nv.d3.js
+//= link nv.d3.min.css
+//= link api.js
\ No newline at end of file
diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
index 9d0d8156e..d02b27c48 100644
--- a/app/assets/javascripts/application.js
+++ b/app/assets/javascripts/application.js
@@ -12,15 +12,12 @@
 //
 //= require jquery
 //= require jquery_ujs
-//= require bootstrap-css/js/bootstrap.min.js
-//= require getusermedia.js/dist/getUserMedia.min.js
+//= require jquery-steps.js
+//= require bootstrap.min.js
 //= require basics.js
 //= require api.js
 //= require comment.js
-//= require flot/jquery.flot.js
-//= require flot/jquery.flot.crosshair.js
-//= require flot/jquery.flot.threshold.js
-//= require d3/d3.js
-//= require nvd3/build/nv.d3.js
-//= require moment/moment.js
-//= require spectral-workbench/dist/spectral-workbench.js
+//= require moment.js
+//= require d3.js
+//= require nv.d3.js
+//= require spectral-workbench.js
\ No newline at end of file
diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
index 79c3099ec..ecfce45a4 100644
--- a/app/assets/stylesheets/application.css
+++ b/app/assets/stylesheets/application.css
@@ -8,12 +8,14 @@
  * You're free to add application-wide styles to this file and they'll appear at the top of the
  * compiled file, but it's generally better to create a new file per style scope.
  *
- *= require bootstrap-css/css/bootstrap.min.css
- *= require bootstrap-css/css/bootstrap-responsive.min.css
- *= require nvd3/build/nv.d3.css
+ *= require bootstrap.min.css
+ *= require bootstrap-responsive.min.css
+ *= require nv.d3.min.css
  *= require style
  *= require graph
  *= require comment
+ *= require spectral-workbench
+ *= require font-awesome
  *
  *= require_self
  *  require_tree .
diff --git a/app/views/capture/index.html.erb b/app/views/capture/index.html.erb
index b674590a6..1fa97eca3 100644
--- a/app/views/capture/index.html.erb
+++ b/app/views/capture/index.html.erb
@@ -1,3 +1,12 @@
+<%= javascript_include_tag "jquery.flot" %>
+<%= javascript_include_tag "jquery.flot.crosshair" %>
+<%= javascript_include_tag "jquery.flot.threshold" %>
+<%= javascript_include_tag "d3" %>
+<%= javascript_include_tag "nv.d3" %>
+
+
+<script src="https://cdn.temasys.io/adapterjs/0.15.x/adapter.min.js"></script>
+
 <% unless logged_in? %>
 <div class="modal fade hide" id="login-prompt-modal">
   <div class="modal-header">
@@ -7,10 +16,10 @@
   <div class="modal-body">
     <p>You can use this with some limitations without logging in, but once you set up an account, you'll be able to:</p>
     <ul>
-      <li>save and share data</li>
-      <li>calibrate and process your data</li>
-      <li>use this interface offline -- <a href="http://publiclab.org/wiki/spectral-workbench-usage#Offline">without an internet connection</a></li>
-      <li>contribute to a growing open source database</li>
+      <li>Save and share data</li>
+      <li>Calibrate and process your data</li>
+      <li>Use this interface offline - <a href="http://publiclab.org/wiki/spectral-workbench-usage#Offline">without an internet connection</a></li>
+      <li>Contribute to a growing open source database</li>
     </ul>
   </div>
   <div class="modal-footer">
@@ -68,6 +77,7 @@
 
   <script>
     jQuery(document).ready(function() {
+
       $W.setSampleRowClickListener()
 
       <% if ios? || (mobile? && !opera?) %>
@@ -75,8 +85,13 @@
       <% end %>
 
     })
+
+  // <%= javascript_include_tag "application" %>
+  
   </script>
 
+
+
   <p style="padding-top:5px;">
     <a rel="tooltip" title="" class="btn btn-inverse" onclick="$W.auto_detect_sample_row()" data-original-title="Auto select sample row"><i class="fa fa-white fa-arrows-v"></i> Auto-select Sample Row</a>
     <a rel="tooltip" title="Flip video horizontally" class="btn btn-inverse btn-flip" onClick="$W.flip_horizontal()"><i class="fa fa-white fa-arrows-h"></i> Flip image</a>
diff --git a/app/views/capture/index2.html.erb b/app/views/capture/index2.html.erb
index 62a2e766b..5a147d5c2 100644
--- a/app/views/capture/index2.html.erb
+++ b/app/views/capture/index2.html.erb
@@ -1,404 +1,367 @@
-<!DOCTYPE html>
-<html manifest="/not-existing.appcache">
-<head>
-  <meta charset="utf-8">
-  <title>SpectralWorkbench</title>
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta name="description" content="An open source spectral library and DIY spectrometry community developing environmental testing techniques.">
-  <meta name="author" content="Public Lab contributors">
+<%= stylesheet_link_tag "new-capture" %>
+<%= javascript_include_tag "api" %>
+<%= javascript_include_tag "jquery.flot" %>
+<%= javascript_include_tag "jquery.flot.crosshair" %>
+<%= javascript_include_tag "jquery.flot.threshold" %>
+<%= javascript_include_tag "d3" %> 
+<%= javascript_include_tag "nv.d3" %>
+<%= stylesheet_link_tag "nv.d3.min" %>
 
   <link rel="apple-touch-icon" href="//spectralworkbench.org/images/spectral-workbench-256.png">
   <link rel="apple-touch-fa-precomposed" href="//spectralworkbench.org/images/spectral-workbench-256.png">
   <link rel="apple-touch-fa-precomposed apple-touch-icon" href="//spectralworkbench.org/images/spectral-workbench-256.png">
   <link rel="shortcut icon" href="//spectralworkbench.org/images/spectral-workbench-256.png" />
 
-  <link rel="stylesheet" href="../../node_modules/font-awesome/css/font-awesome.min.css"/>
-  <link rel="stylesheet" href="../../node_modules/bootstrap/dist/css/bootstrap.min.css"/>
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bs-stepper/dist/css/bs-stepper.min.css">
-
-  <script src="https://kit.fontawesome.com/a076d05399.js"></script>
   <script src="https://cdn.temasys.io/adapterjs/0.15.x/adapter.min.js"></script>
-  <script src="../../node_modules/jquery/dist/jquery.min.js"></script>
-  <script src="../../node_modules/flot/jquery.flot.js"></script>
-  <script src="../../node_modules/flot/jquery.flot.crosshair.js"></script>
-  <script src="../../node_modules/flot/jquery.flot.threshold.js"></script>
-  <script src="../../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
-  <script src="../../node_modules/jquery.steps/build/jquery.steps.min.js"></script>
-  <script src="../capture/graph.js" type="text/javascript"></script>
   <script src="https://cdn.jsdelivr.net/npm/bs-stepper/dist/js/bs-stepper.min.js"></script>
-
-
-  <script src="../capture/capture.js" type="text/javascript"></script>
-  <script src="../../dist/capture.dist.js" type="text/javascript"></script>
-  <script src="../capture/api.js" type="text/javascript"></script>
-
-
-  <script src="../../node_modules/d3/d3.js" type="text/javascript"></script>                                                                              
-  <script src="../../node_modules/nvd3/build/nv.d3.js" type="text/javascript"></script>                                                                              
-  <script src="../../node_modules/moment/moment.js"></script>
-  <script src="../../dist/spectral-workbench.js" type="text/javascript"></script>
-  <link href="../../node_modules/nvd3/build/nv.d3.css" rel="stylesheet">
-  <link href="../../dist/spectral-workbench.css" rel="stylesheet">
-  
-
-  <link href="new-capture.css" media="all" rel="stylesheet" type="text/css" />
-
-  <!--
-      <link href="/assets/application-5135736be98a3c4fdf136cbc62545fd2.css" media="all" rel="stylesheet" type="text/css" />
-      <meta content="Szbc3vBNsTKwYnmFkjg3L2kCBSe8EYSg9Zu7keJJzPs=" name="csrf-token" />
-      <script src="/assets/application-0add8749179623a04221903b025c601c.js" type="text/javascript"></script>
-  -->
-
-  <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
-  <!--[if lt IE 9]>
-  <script src="https://html5shim.googlecode.com/svn/trunk/html5.js"></script>
-  <![endif]-->
-
-</head>
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">  
 
 <body class="full-strecth-block">
-
-  <div class="full-strecth-block bs-stepper">
-
-  <!-- <header id="stepper">
-    <span>Pre Capture Setup</span>
-    <span class="dotted-line"></span>
-    <span>Capturing Phase</span>
-    <span class="dotted-line"></span>
-    <span>Plot and Calibration</span>
-  </header> -->
-
-    <div class="bs-stepper-header" role="tablist">
-      <!-- your steps here -->
-      <div class="step" data-target="#landing-page">
-        <button type="button" class="step-trigger" role="tab" aria-controls="landing-page" id="landing-page-trigger">
-          <span class="bs-stepper-label">Home Page</span>
-        </button>
-      </div>
-      <div class="line"></div>
-      <div class="step" data-target="#settings">
-        <button type="button" class="step-trigger" role="tab" aria-controls="setting" id="setting-trigger">
-          <span class="bs-stepper-label">Settings</span>
-        </button>
-      </div>
-      <div class="line"></div>
-      <div class="step" data-target="#capture">
-        <button type="button" class="step-trigger" role="tab" aria-controls="capture" id="capture-trigger">
-          <span class="bs-stepper-label">Capture</span>
-        </button>
-      </div>
-      <div class="line"></div>
-      <div class="step" data-target="#plotting">
-        <button type="button" class="step-trigger" role="tab" aria-controls="plotting" id="plot-trigger">
-          <span class="bs-stepper-label">Plotting</span>
-        </button>
-      </div>
-    </div>
-
-
-    <div class="capture full-strecth-block bs-stepper-content" id="main-content">
-
-       <!-- step 0 landing Page   -->
-      <div id="landing-page" class="full-strecth-flex-vertical content" role="tabpanel">
-        
-        <div id="landing-page-content">
-          <h1> 
-            <img src="./asset//logo.png">
-            Spectral WorkBench <small>by Public Lab (DEMO)</small></h1>
-          <br><br>
-          <p>What is Spectral Workbench? SpectralWorkbench.org is a web based application to collect, 
-            archive, share, and analyze spectral data, for Public Lab DIY spectrometers and other spectrometers. 
-            With it, you can: connect your USB Desktop Spectrometry Kit. scan and save samples. Try out the 
-            application with upload or capture image.
-          </p>
-          <br><br><br>
-          <button class="demo-button next" id="landing-page-next">Capture Spectra</button>
-          <br><br><br>
-          <span>
-            <a href="https://spectralworkbench.org/dashboard"><i class="fas fa-home"></i></a>
-            <a href="https://github.com/publiclab/spectral-workbench.js"><i class="fab fa-github"></i></a>
-            <a href="https://twitter.com/intent/follow?original_referer=https%3A%2F%2Fspectralworkbench.org%2Fdashboard&ref_src=twsrc%5Etfw&screen_name=SpectralWB&tw_p=followbutton"><i class="fab fa-twitter"></i></a>
-            <a href="https://publiclab.org/wiki/spectral-workbench-help"><i class="fas fa-info-circle"></i></a>
-          </span>
-
+  
+    <div class="full-strecth-block bs-stepper">
+  
+      <div class="bs-stepper-header" role="tablist">
+        <%# <!-- your steps here --> %>
+        <div class="step" data-target="#landing-page">
+          <button type="button" class="step-trigger" role="tab" aria-controls="landing-page" id="landing-page-trigger">
+            <span class="bs-stepper-label">Home Page</span>
+          </button>
+        </div>
+        <div class="line"></div>
+        <div class="step" data-target="#settings">
+          <button type="button" class="step-trigger" role="tab" aria-controls="setting" id="setting-trigger">
+            <span class="bs-stepper-label">Settings</span>
+          </button>
+        </div>
+        <div class="line"></div>
+        <div class="step" data-target="#capture">
+          <button type="button" class="step-trigger" role="tab" aria-controls="capture" id="capture-trigger">
+            <span class="bs-stepper-label">Capture</span>
+          </button>
+        </div>
+        <div class="line"></div>
+        <div class="step" data-target="#plotting">
+          <button type="button" class="step-trigger" role="tab" aria-controls="plotting" id="plot-trigger">
+            <span class="bs-stepper-label">Plotting</span>
+          </button>
+        </div>
+        <div class="line"></div>
+        <div class="step" data-target="#calibration">
+          <button type="button" class="step-trigger" role="tab" aria-controls="calibration" id="plot-calibration">
+            <span class="bs-stepper-label">Calibrate</span>
+          </button>
         </div>
-
       </div>
-
-
-
-
-
-
-
-      <!--  step 2 setup   -->
-      <div id="settings" class="content" role="tabpanel">
-
-
-        <div class="full-strecth-flex-vertical center-content">
-          <!-- <h3>Setup</h3> -->
-
-          <div id="webcam-msg"><p><b>Requesting camera access... <br />(<a href="https://play.google.com/store/apps/details?id=org.mozilla.firefox">Firefox</a>, <a href="https://play.google.com/store/apps/details?id=com.opera.browser">Opera</a> or Chrome on Android, or <a href="https://itunes.apple.com/us/app/bowser/id560478358">Bowser</a> on iOS). Please click "Allow" when prompted, or try the <a href="/upload">Upload interface</a>.</b></p></div>
-          <div id="webcam">
-
-            <div id="heightIndicator" style="display:none;position:absolute;margin:0;z-index:999;border-right:0px solid #ff4;border-bottom:2px solid #ff4;height:1px;margin-top:120px;width:320px;font-weight:bold;">
-              <div class="vertical"   style="margin-top:3px;padding:2px;background:black;float:right;display:none; color: white;">BLUE</div>
-              <div class="horizontal" style="margin-top:3px;padding:2px;background:black;float:right;color: white;">RED</div>
-              <div class="horizontal" style="margin-top:3px;padding:2px;background:black;float:left;color: white;">BLUE</div>
-              <div class="vertical"   style="margin-top:3px;padding:2px;background:black;float:right;margin-top:200px;display:none;color: white;">RED</div>
-            </div>
-          </div>
-
-          <div style="padding-bottom:10px;padding-top:2rem;">
-            <div class="spectrum-example-vertical" style="display:none;">
-              <p style="margin-top:4px;">Point your spectrometer at a light and click on the video above to choose a cross-section to sample. (<a href="http://publiclab.org/wiki/spectral-workbench-usage">Learn more &raquo;</a>)</p>
-              <img src="example-cfl-vertical.png" style="height:200px" />
-            </div>
-            <div class="spectrum-example-horizontal">
-              <p style="margin-top:4px;">Point your spectrometer at a light and click on the video above to choose a cross-section as shown below. (<a href="http://publiclab.org/wiki/spectral-workbench-usage">Learn more &raquo;</a>)</p>
-              <img width="480px" src="calibration-example.png" />
-            </div>
+  
+  
+      <div class="capture full-strecth-block bs-stepper-content" id="main-content">
+  
+         <%# <!-- step 0 landing Page   --> %>
+        <div id="landing-page" class="full-strecth-flex-vertical content" role="tabpanel">
+          
+          <div id="landing-page-content">
+            <h1> 
+              <img src="/images/logo.png">
+              Spectral WorkBench <small>by Public Lab</small></h1>
+            <br><br>
+            <p>What is Spectral Workbench? SpectralWorkbench.org is a web based application to collect, 
+              archive, share, and analyze spectral data, for Public Lab DIY spectrometers and other spectrometers. 
+              With it, you can: connect your USB Desktop Spectrometry Kit. scan and save samples. Try out the 
+              application with upload or capture image.
+            </p>
+            <br><br><br>
+            <button class="demo-button next" id="landing-page-next">Capture Spectra</button>
+            <br><br><br>
+            <span>
+              <a href="https://spectralworkbench.org/dashboard"><i class="fas fa-home"></i></a>
+              <a href="https://github.com/publiclab/spectral-workbench.js"><i class="fab fa-github"></i></a>
+              <a href="https://twitter.com/intent/follow?original_referer=https%3A%2F%2Fspectralworkbench.org%2Fdashboard&ref_src=twsrc%5Etfw&screen_name=SpectralWB&tw_p=followbutton"><i class="fab fa-twitter"></i></a>
+              <a href="https://publiclab.org/wiki/spectral-workbench-help"><i class="fas fa-info-circle"></i></a>
+            </span>
+  
           </div>
-
-          <script>
-            jQuery(document).ready(function() {
-              $W.setSampleRowClickListener()
-            })
-          </script>
-
-          <p style="padding-top:5px;">
-            <a rel="tooltip" title="" class="btn btn-default" onclick="$W.auto_detect_sample_row()" data-original-title="Auto select sample row"><i class="fa fa-white fa-arrows-v"></i> Auto-select Sample Row</a>
-            <a rel="tooltip" title="Flip video horizontally" class="btn btn-default btn-flip" onClick="$W.flip_horizontal()"><i class="fa fa-white fa-arrows-h"></i> Flip image</a>
-            <a rel="tooltip" title="Rotate video 90 &deg;" class="btn btn-default btn-rotate" onClick="$W.toggle_rotation()"><i class="fa fa-white fa-rotate-right"></i> Rotate</a>
-
-          </p>
-          <p style="padding-top:5px;">
-            Help <a href="http://publiclab.org/wiki/spectral-workbench-usage#Webcam+selection">selecting a camera</a>
-          </p>
-
-
-          <a class="btn btn-large btn-primary" href="#capture" onClick="$('#capture-btn').addClass('active');$('#settings-btn').removeClass('active');" data-toggle="tab" id="setting-page-next">Begin capturing &raquo;</a>
-
-          <hr />
+  
         </div>
-
-
-        <!-- <p><b>Offline use:</b> To use this interface offline, load the offline capture tool <a href="/capture/offline">by clicking here</a>. Once the page loads, you'll be able to access that page even without internet access; it will be stored in your browser.</p> -->
-
-      </div>
-
-
-
-
-
-
-
-
-
-      <!--     step 3 capturing phasing-->
-      <div id="capture" class="content center-content" role="tabpanel">
-
-        <div class="full-strecth-flex-horizontal center-content">
-          <!-- <h3>Capturing Phase</h3> -->
-          <div style="width: 28em; margin-right: 1em">
-            <div id="sidebar" style="width: 26em; margin: 2em auto 2em auto">
-              <div class="hidden-phone" >
-                <div id="heightIndicatorPrev" style="position:absolute;z-index:999;border-right:0px solid #ff4;border-bottom:2px solid #ff4;height:1px;margin: 50px 0 0;width:100%;"></div>
-                <canvas style="width:100%;height:100px;" id="preview"></canvas>
+  
+  
+        <%# <!--  step 2 setup   --> %>
+        <div id="settings" class="content" role="tabpanel">
+  
+  
+          <div class="full-strecth-flex-vertical center-content">
+            <%# <!-- <h3>Setup</h3> --> %>
+  
+            <div id="webcam-msg"><p><b>Requesting camera access... <br />(<a href="https://play.google.com/store/apps/details?id=org.mozilla.firefox">Firefox</a>, <a href="https://play.google.com/store/apps/details?id=com.opera.browser">Opera</a> or Chrome on Android, or <a href="https://itunes.apple.com/us/app/bowser/id560478358">Bowser</a> on iOS). Please click "Allow" when prompted, or try the <a href="/upload">Upload interface</a>.</b></p></div>
+            <div id="webcam">
+  
+              <div id="heightIndicator" style="display:none;position:absolute;margin:0;z-index:999;border-right:0px solid #ff4;border-bottom:2px solid #ff4;height:1px;margin-top:120px;width:320px;font-weight:bold;">
+                <div class="vertical"   style="margin-top:3px;padding:2px;background:black;float:right;display:none; color: #1AA7EC;">BLUE</div>
+                <div class="horizontal" style="margin-top:3px;padding:2px;background:black;float:right;color: red;">RED</div>
+                <div class="horizontal" style="margin-top:3px;padding:2px;background:black;float:left;color: #1AA7EC;">BLUE</div>
+                <div class="vertical"   style="margin-top:3px;padding:2px;background:black;float:right;margin-top:200px;display:none;color: red;">RED</div>
               </div>
-              <div class="btn-group toolbar" data-toggle="buttons-checkbox" style="margin-bottom:2em; margin-left: 9em; margin-top: 2em">
-                <a rel="tooltip" title="Rotate video" class="btn btn-default btn-rotate" onClick="$W.toggle_rotation()"><i class="fa fa-white fa-repeat"></i></a>
-                <a rel="tooltip" title="Flip video horizontally" class="btn btn-default btn-flip" onClick="$W.flip_horizontal()"><i class="fa fa-white fa-arrows-h"></i></a>
-                <a rel="tooltip" title="Scale video" class="btn btn-default" onClick="$W.scale_h = parseFloat(prompt('Enter a horizontal scaling factor (default is 1):'))"><i class="fa fa-white fa-expand"></i></a>
+            </div>
+  
+            <div style="padding-bottom:10px;padding-top:2rem;">
+              <div class="spectrum-example-vertical" style="display:none;">
+                <p style="margin-top:4px;">Point your spectrometer at a light and click on the video above to choose a cross-section to sample. (<a href="http://publiclab.org/wiki/spectral-workbench-usage">Learn more &raquo;</a>)</p>
+                <img src="/images/example-cfl-vertical.png" style="height:200px" />
               </div>
-              <p>Note: Use the tools above to make adjustment of the capturing. To adjust the sampling yellow bar location, go back to the previous step.</p>
+              <div class="spectrum-example-horizontal">
+                <p style="margin-top:4px;">Point your spectrometer at a light and click on the video above to choose a cross-section as shown below. (<a href="http://publiclab.org/wiki/spectral-workbench-usage">Learn more &raquo;</a>)</p>
+                <img width="480px" src="/images/calibration-example.png" />
+              </div>
+            </div>
+  
               <script>
-                jQuery(document).ready(function() {
-                  $W.observe_contrast(
-                          false,
-                          function() {
-                            $('#cfl-detect i').css('color','red');
-                          },
-                          function() {
-                            $('#cfl-detect i').css('color','white');
-                          }
-                  )
-                })
+              jQuery(document).ready(function() {
+               $W.setSampleRowClickListener()
   
+               <% if ios? || (mobile? && !opera?) %>
+                 $W.toggle_rotation();
+               <% end %>
+  
+               })
               </script>
-            </div>
+  
+            <p style="padding-top:5px;">
+              <a rel="tooltip" title="" class="btn btn-default" onclick="$W.auto_detect_sample_row()" data-original-title="Auto select sample row"><i class="fa fa-arrows-v" aria-hidden="true"></i> Auto-select Sample Row</a>
+              <a rel="tooltip" title="Flip video horizontally" class="btn btn-default btn-flip" onClick="$W.flip_horizontal()"><i class="fa fa-arrows-h" aria-hidden="true"></i> Flip image</a>
+              <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> Rotate</a>
+            </p>
+            <p style="padding-top:5px;">
+              Help <a href="http://publiclab.org/wiki/spectral-workbench-usage#Webcam+selection">selecting a camera</a>
+            </p>
+  
+  
+            <a class="btn btn-large btn-primary" href="#capture" onClick="$('#capture-btn').addClass('active');$('#settings-btn').removeClass('active');" data-toggle="tab" id="setting-page-next">Begin capturing &raquo;</a>
+            <hr />
           </div>
-          <div id="capture-phase-right" style="width: 50em;">
-            <div style="width: 48em;">
-              <div class="btn-group toolbar" data-toggle="buttons-radio">
-                <a rel="tooltip" title="Default mode" class="btn btn-default btn-sm" onClick="$W.toggle_mode()"><i class="fa fa-white fa-circle-o"></i></a>
-                <a rel="tooltip" title="RGB mode" class="btn btn-default btn-sm" onClick="$W.toggle_mode()"><i class="fa fa-white fa fa-adjust"></i></a>
-                <a rel="tooltip" title="Combined readout" class="btn btn-default btn-sm" onClick="$W.show_combined()"><i class="fa fa-white fa fa-list-ul"></i></a>
+  
+  
+          <!-- <p><b>Offline use:</b> To use this interface offline, load the offline capture tool <a href="/capture/offline">by clicking here</a>. Once the page loads, you'll be able to access that page even without internet access; it will be stored in your browser.</p> -->
+  
+        </div>
+  
+  
+  
+  
+  
+  
+  
+  
+  
+        <!--     step 3 capturing phasing-->
+        <div id="capture" class="content center-content" role="tabpanel">
+  
+          <div class="full-strecth-flex-horizontal center-content">
+            <!-- <h3>Capturing Phase</h3> -->
+            <div style="width: 28em; margin-right: 1em">
+              <div id="sidebar" style="width: 26em; margin: 2em auto 2em auto">
+                <div class="hidden-phone" >
+                  <div id="heightIndicatorPrev" style="position:absolute;z-index:999;border-right:0px solid #ff4;border-bottom:2px solid #ff4;height:1px;margin: 50px 0 0;width:100%;"></div>
+                  <canvas style="width:100%;height:273px;" id="preview"></canvas>
+                </div>
+                <div class="btn-group toolbar" data-toggle="buttons-checkbox" style="margin-bottom:2em; margin-left: 9em; margin-top: 2em">
+                  <a rel="tooltip" title="Rotate video" class="btn btn-default btn-rotate" onClick="$W.toggle_rotation()"><i class="fa fa-repeat"></i></a>
+                  <a rel="tooltip" title="Flip video horizontally" class="btn btn-default btn-flip" onClick="$W.flip_horizontal()"><i class="fa fa-arrows-h"></i></a>
+                  <a rel="tooltip" title="Scale video" class="btn btn-default" onClick="$W.scale_h = parseFloat(prompt('Enter a horizontal scaling factor (default is 1):'))"><i class="fa fa-expand"></i></a>
+                </div>
+                <p style="padding-top: 1rem">Note: Use the tools above to make adjustment of the capturing. To adjust the sampling yellow bar location, go back to the previous step.</p>
+                <script>
+                  jQuery(document).ready(function() {
+
+                    $W.observe_contrast(
+                            false,
+                            function() {
+                              $('#cfl-detect i').css('color','red');
+                            },
+                            function() {
+                              $('#cfl-detect i').css('color','white');
+                            })
+                      })
+    
+                </script>
+              </div>
+            </div>
+            <div id="capture-phase-right" style="width: 50em;">
+              <div style="width: 48em;">
+                <div class="btn-group toolbar" data-toggle="buttons-radio">
+                  <a rel="tooltip" title="Default mode" class="btn btn-default btn-sm" onClick="$W.toggle_mode()"><i class="fa fa-circle-o"></i></a>
+                  <a rel="tooltip" title="RGB mode" class="btn btn-default btn-sm" onClick="$W.toggle_mode()"><i class="fa fa-adjust"></i></a>
+                  <a rel="tooltip" title="Combined readout" class="btn btn-default btn-sm" onClick="$W.show_combined()"><i class="fa fa-list-ul"></i></a>
+                </div>
+                <div id="graph" style="width: 100%; margin-bottom:2em"></div>
+                <canvas style="background:#333;width:100%;height:100px;width: 96%;margin-left: 1.8em;" id="canvas"></canvas>
+                <p style="margin-left: 1.8em;margin-top:0rem;width: 96%;">This display shows the last few seconds of data, descending. The top, newest row of pixels is used by default to generate the graph. This can be changed later.</p>
               </div>
-              <div id="graph" style="width: 100%; margin-bottom:2em"></div>
-              <canvas style="background:#333;width:100%;height:100px;width: 96%;margin-left: 1.8em;" id="canvas"></canvas>
-              <p style="margin-left: 1.8em;margin-top:2em;width: 96%;">This display shows the last few seconds of data, descending. The top, newest row of pixels is used by default to generate the graph. This can be changed later.</p>
             </div>
           </div>
-        </div>
-
-        <button class="demo-button next" id="capture-page-next">Save Capture</button>
-        <p style="margin-top: 0.5em">Once you save the capture, you cannot go back here.</p>
-        <img style="display:none;background:#333;" id="spectrum-preview" />
-      </div>
-
 
 
+          <button type="button" class="demo-button next" id="capture-page-next">Save Capture</button>
+          <p style="margin-top: 0.5em;text-align: center;">Once you save the capture, you cannot go back here.</p>
+  
+  
 
-      <!--  step 4 Plotting phasing-->
-      <div id="plotting" class="content center-content" role="tabpanel">
-        Here Is the result plot
-        <div class="swb-graphing center-content">
-          <div id="graph1"></div>
+          <img style="display:none;background:#333;" id="spectrum-preview" />
         </div>
-
-        <div id="plotting-note">
-          Use the bottom graph as the navigator to zoom into any section of the plot by dragging
-          to select the target region span. User could also move the span in the navigator
+  
+  
+  
+  
+        <!--  step 4 Plotting phasing-->
+        <div id="plotting" class="content center-content" role="tabpanel">
+          Here Is the result plot
+          <div class="swb-graphing center-content">
+            <div id="graph1"></div>
+          </div>
+  
+          <div id="plotting-note">
+            Use the bottom graph as the navigator to zoom into any section of the plot by dragging
+            to select the target region span. User could also move the span in the navigator
+          </div>
+  
+          <button class="demo-button" id="restart" style="margin-top: 1em">Restart</button>
+  
+          <script>
+            jQuery(document).ready(function() {
+              $("#restart").on('click', function (params) {
+                location.reload();
+              });
+            })
+          </script>
         </div>
 
-        <button class="demo-button" id="restart" style="margin-top: 1em">Restart</button>
-
-        <script>
-          jQuery(document).ready(function() {
-            $("#restart").on('click', function (params) {
-              location.reload();
-            });
-          })
-
-        </script>
-      </div>
-
-
 
+        <!-- step 5 Recent Calibrations / Where will the login prompt occur--->
+        <div id="calibration" class="content center-content" role="tabpanel">
+          Calibrate acording the calibration spectrum given below.
+          <div class="swb-calibration center-content">
+            <div id="calibration1"></div>
+          </div>
+  
+          <div id="calibration-note">
+            Use the calibration from the drop-down list below and apply on the live capture graph to better align the RGB peaks of the spectrum. 
+            If you happen to have a recent calibration saved in our open-sourced database then that should show up in the dropdown. simply applying the selected calibration will scale the RGB peaks. You can also fork other people's calibration to obtain the best result.
+          </div>
+  
+          <button class="demo-button" id="restart" style="margin-top: 1em">Save and Calibrate Later</button>
+  
+          <script>
+           
+          </script>
+        </div>
 
 
+      </div>
     </div>
-
-
-
-
-
-
-
-
-
-  </div>
-
-  <script>
-    (function() {
-
-      $W.initialize({
-        calibrated: false,
-        interface:"capture",
-        mode:"combined",
-        flipped: false,
-        width: 640
-      })
-
-
-      setInterval($W.getRow,100)
-      $W.calibrated = false
-
-      if ($('body').width() > 768) $('#tool-toggle').hide()
-      else $('#tool-pane').hide()
-
-    })();
+  
+    <script>
+      (function() {
+  
+        $W.initialize({
+          calibrated: false,
+          interface:"capture",
+          mode:"combined",
+          flipped: false,
+          width: 640
+        })
+  
+        setInterval($W.getRow,100)
+        $W.calibrated = false
+  
+        if ($('body').width() > 768) $('#tool-toggle').hide()
+        else $('#tool-pane').hide()
+  
+      })();
   </script>
 </body>
-
-<script>
-  // As a jQuery Plugin for the stepper
-  $(document).ready(function () {
-    var stepper = new Stepper($('.bs-stepper')[0], {
-      linear: false,
-      animation: true,
-      selectors: {
-        steps: '.step',
-        trigger: '.step-trigger',
-        stepper: '.bs-stepper'
-      }
-    });
-    $("#landing-page-trigger").on('click', function (params) {
-      stepper.to(1);
-    });
-    $("#landing-page-next").on('click', function (params) {
-      stepper.to(2);
-    });
-
-    
-    $("#setting-trigger").on('click', function (params) {
-      stepper.to(2);
-    });
-    $("#setting-page-next").on('click', function (params) {
-      stepper.to(3);
-    });
-
-
-    $("#capture-trigger").on('click', function (params) {
-      stepper.to(3);
-    });
-
-    var imageData;
-    $("#plot-trigger").on('click', function (params) {
-      stepper.to(4);stepper.to(4);
-      $("#capture-trigger").prop('disabled', true);
-      $("#setting-trigger").prop('disabled', true);
-      $("#landing-page-trigger").prop('disabled', true);
-
-      $W.saveSpectrum();
-      imageData = $W.full_data;
-      console.log('what is my image data like', JSON.stringify($W.full_data));
-
-      graph = new SpectralWorkbench.Graph({
-        selector: '#graph1' // defaults to "#graph" using jQuery selector syntax
+  
+  <script>
+    $(document).ready(function () {
+      var stepper = new Stepper($('.bs-stepper')[0], {
+        linear: false,
+        animation: true,
+        selectors: {
+          steps: '.step',
+          trigger: '.step-trigger',
+          stepper: '.bs-stepper'
+        }
       });
-
-      var imageDataFormatted = [];
-      imageData.forEach((item, index) => {
-        var formattedItem = [index, item[item.length-1]]
-        imageDataFormatted.push(formattedItem)
-      })
-
-      var spectrum = new SpectralWorkbench.Spectrum(imageDataFormatted, graph);
-      // console.log('spectrum', spectrum.getJSON())
-      graph.load(spectrum);
-    });
-
-
-    $("#capture-page-next").on('click', function (params) {
-      stepper.to(4);
-      $("#capture-trigger").prop('disabled', true);
-      $("#setting-trigger").prop('disabled', true);
-      $("#landing-page-trigger").prop('disabled', true);
-
-      $W.saveSpectrum();
-      imageData = $W.full_data;
-      console.log('what is my image data like', JSON.stringify($W.full_data));
-
-      graph = new SpectralWorkbench.Graph({
-        selector: '#graph1' // defaults to "#graph" using jQuery selector syntax
+      $("#landing-page-trigger").on('click', function (params) {
+        stepper.to(1);
       });
-
-      var imageDataFormatted = [];
-      imageData.forEach((item, index) => {
-        var formattedItem = [index, item[item.length-1]]
-        imageDataFormatted.push(formattedItem)
-      })
-
-      var spectrum = new SpectralWorkbench.Spectrum(imageDataFormatted, graph); 
-      // console.log('spectrum', spectrum.getJSON())
-      graph.load(spectrum);
-
-
-    });
-
-
-  })
-</script>
-</html>
+      $("#landing-page-next").on('click', function (params) {
+        stepper.to(2);
+      });
+  
+      
+      $("#setting-trigger").on('click', function (params) {
+        stepper.to(2);
+      });
+      $("#setting-page-next").on('click', function (params) {
+        stepper.to(3);
+      });
+  
+  
+      $("#capture-trigger").on('click', function (params) {
+        stepper.to(3);
+      });
+  
+      var imageData;
+      $("#plot-trigger").on('click', function (params) {
+        stepper.to(4);
+        stepper.to(4);  //is this even needed here!!!
+        $("#capture-trigger").prop('disabled', true);
+        $("#setting-trigger").prop('disabled', true);
+        $("#landing-page-trigger").prop('disabled', true);
+  
+        $W.saveSpectrum();
+        imageData = $W.full_data;
+        console.log('what is my image data like', JSON.stringify($W.full_data));
+  
+        graph = new SpectralWorkbench.Graph({
+          selector: '#graph1' // defaults to "#graph" using jQuery selector syntax
+        });
+  
+        var imageDataFormatted = [];
+        imageData.forEach((item, index) => {
+          var formattedItem = [index, item[item.length-1]]
+          imageDataFormatted.push(formattedItem)
+        })
+  
+        var spectrum = new SpectralWorkbench.Spectrum(imageDataFormatted, graph);
+        // console.log('spectrum', spectrum.getJSON())
+        graph.load(spectrum);
+      });
+  
+  
+      $("#capture-page-next").on('click', function (params) {
+        stepper.to(4);
+        $("#capture-trigger").prop('disabled', true);
+        $("#setting-trigger").prop('disabled', true);
+        $("#landing-page-trigger").prop('disabled', true);
+  
+        $W.saveSpectrum();
+        imageData = $W.full_data;
+        console.log('what is my image data like', JSON.stringify($W.full_data));
+  
+        graph = new SpectralWorkbench.Graph({
+          selector: '#graph1' // defaults to "#graph" using jQuery selector syntax
+        });
+  
+        var imageDataFormatted = [];
+        imageData.forEach((item, index) => {
+          var formattedItem = [index, item[item.length-1]]
+          imageDataFormatted.push(formattedItem)
+        })
+  
+        var spectrum = new SpectralWorkbench.Spectrum(imageDataFormatted, graph); 
+        // console.log('spectrum', spectrum.getJSON())
+        graph.load(spectrum);
+      });
+    })
+  </script>
+  
\ No newline at end of file