From acbe4ca1331527b0a602767230a6e54544fb0c38 Mon Sep 17 00:00:00 2001
From: sidntrivedi012 <sidntrivedi012@gmail.com>
Date: Fri, 23 Aug 2019 18:04:27 +0530
Subject: [PATCH] somewhat in working state

---
 examples/capture/capture.js | 122 +++++++++++++++++++-----------------
 1 file changed, 63 insertions(+), 59 deletions(-)

diff --git a/examples/capture/capture.js b/examples/capture/capture.js
index 8480f3cc..665be1e9 100644
--- a/examples/capture/capture.js
+++ b/examples/capture/capture.js
@@ -52,7 +52,7 @@ $W = {
   // height: 720,
   frame: 0,
 
-  initialize: function(args) {
+  initialize: function (args) {
     this.mobile = args["mobile"] || false;
     this.flipped = args["flipped"] == true || false;
     this.interface = args["interface"] || false;
@@ -97,15 +97,15 @@ $W = {
     }
 
     setInterval($W.alert_overexposure, 500); // every 0.5 seconds
-    setInterval(function() {
+    setInterval(function () {
       $W.getRecentCalibrations(".select-calibration");
     }, 10000); // every 10 seconds
-    $(".btn-switch-calibration-configure").click(function() {
+    $(".btn-switch-calibration-configure").click(function () {
       window.location =
         "/capture?calibration_id=" + $(".select-calibration-configure").val();
     });
 
-    $(".btn-switch-calibration-capture").click(function() {
+    $(".btn-switch-calibration-capture").click(function () {
       window.location =
         "/capture?calibration_id=" + $(".select-calibration-capture").val();
     });
@@ -120,7 +120,7 @@ $W = {
     }
   },
 
-  success: function(stream) {
+  success: function (stream) {
     //console.log('success')
     if ($W.options.context === "webrtc") {
       $("#heightIndicator").show();
@@ -135,7 +135,7 @@ $W = {
       //}
       if (navigator.mozGetUserMedia) video.mozSrcObject = stream;
       else video.srcObject = stream;
-      video.onerror = function(e) {
+      video.onerror = function (e) {
         stream.stop();
       };
       //video.play()
@@ -149,7 +149,7 @@ $W = {
       console.log("flash or something else");
     }
   },
-  deviceError: function(error) {
+  deviceError: function (error) {
     //console.log(error)
   },
   // options contains the configuration information for the shim
@@ -179,17 +179,17 @@ $W = {
     quality: 100,
     context: "",
 
-    debug: function() {},
+    debug: function () { },
 
     // callback for capturing the fallback stream
-    onCapture: function() {
+    onCapture: function () {
       window.webcam.save();
     },
-    onTick: function() {},
+    onTick: function () { },
 
     // callback for saving the stream, useful for
     // relaying data further.
-    onSave: function(data) {
+    onSave: function (data) {
       // in progress for Flash now
       // seems to execute 240 times... once for each column?
       if ($W.loadingfromPi == false) {
@@ -215,13 +215,13 @@ $W = {
         }
       }
     },
-    onLoad: function() {}
+    onLoad: function () { }
   },
 
   // Draws the appropriate pixels onto the top row of the waterfall.
   // Override this if you want a non-linear cross section or somethine
   // else special! <video> is the video element
-  getCrossSection: function(video) {
+  getCrossSection: function (video) {
     // draw the new data on the top row of pixels of the canvas, overwriting what's there now
     if ($W.mobile) {
       // this is only for the deprecated mobile version
@@ -259,7 +259,7 @@ $W = {
     }
   },
 
-  getRow: function(y) {
+  getRow: function (y) {
     $W.frame += 1;
     if ($W.options.context === "webrtc") {
       var video = $("video")[0];
@@ -399,15 +399,15 @@ $W = {
       }
     }
     $W.plot = $.plot($("#graph"), $W.data, flotoptions);
-    $.each($W.markers, function(i, m) {
+    $.each($W.markers, function (i, m) {
       $("#graph").append(
         '<div style="position:absolute;left:' +
-          (m[2] + 4) +
-          'px;top:10px;color:#aaa;font-size:smaller">' +
-          m[0] +
-          ": " +
-          parseInt($W.getIntensity($W.data[0].data, m[1])) +
-          "%</div>"
+        (m[2] + 4) +
+        'px;top:10px;color:#aaa;font-size:smaller">' +
+        m[0] +
+        ": " +
+        parseInt($W.getIntensity($W.data[0].data, m[1])) +
+        "%</div>"
       );
     });
     $W.unflipped_data = $W.full_data;
@@ -421,13 +421,13 @@ $W = {
     }
   },
 
-  geolocate: function() {
+  geolocate: function () {
     if (navigator.geolocation) {
       navigator.geolocation.getCurrentPosition($W.setGeolocation);
       return true;
     }
   },
-  setGeolocation: function(loc) {
+  setGeolocation: function (loc) {
     if (loc.coords) {
       $("#lat").val(loc.coords.latitude);
       $("#lon").val(loc.coords.longitude);
@@ -436,7 +436,7 @@ $W = {
       $("#lon").val(loc.longitude);
     }
   },
-  saveSpectrum: function() {
+  saveSpectrum: function () {
     var this_ = this;
     $("#dataurl").val($W.canvas.toDataURL());
     if ($("#spectrum-preview")) {
@@ -446,21 +446,21 @@ $W = {
     $("#video_row").val($W.sample_start_row);
     if ($("#geotag-toggle").length > 0)
       $("#geotag").val($("#geotag-toggle")[0].checked);
-    setTimeout(function() {
+    setTimeout(function () {
       if ($("#geotag").val() == "true") $W.geolocate();
     }, 500);
     this_.getRecentCalibrations("#calibration_id");
   },
 
-  getRecentCalibrations: function(selector) {
+  getRecentCalibrations: function (selector) {
     $.ajax({
       url:
         "/capture/recent_calibrations.json?calibration_id=" + $W.calibration_id,
       type: "GET",
-      success: function(data) {
+      success: function (data) {
         var html =
           "<option value='calibration'>[+] New calibration/uncalibrated</option>";
-        $.each(data, function(index, spectrum) {
+        $.each(data, function (index, spectrum) {
           html += "<option ";
           if ($W.calibration_id == spectrum.id) html += "selected ";
           html +=
@@ -479,13 +479,13 @@ $W = {
     });
   },
 
-  cancelSave: function() {
+  cancelSave: function () {
     $("#geotag").val("false");
     $("#lon").val("");
     $("#lat").val("");
   },
 
-  auto_detect_sample_row: function() {
+  auto_detect_sample_row: function () {
     // We need a separate canvas to draw the snapshot, whenever we try to auto detect the sample row.
     if ($("#autoDetectCanvas").length == 0) {
       $("body").append(
@@ -525,7 +525,7 @@ $W = {
 
         var bands = [red, green, blue, intensity];
 
-        $.each(vals, function(index, val) {
+        $.each(vals, function (index, val) {
           if (val["low"] > bands[index]) val["low"] = bands[index];
           if (val["high"] < bands[index]) val["high"] = bands[index];
         });
@@ -565,10 +565,10 @@ $W = {
   },
 
   // deprecate in favor of setSampleRows, or wrap it with a +1
-  setSampleRow: function(row) {
+  setSampleRow: function (row) {
     $W.setSampleRows(parseInt(row), parseInt(row) + 1, false);
   },
-  setSampleRows: function(start, end, legacy) {
+  setSampleRows: function (start, end, legacy) {
     $W.sample_start_row = start;
     $W.sample_end_row = end;
     localStorage.setItem("sw:samplestartrow", $W.sample_start_row);
@@ -578,7 +578,7 @@ $W = {
     $W.resetHeightIndicators(legacy);
     $("#video_row").val($W.sample_start_row);
   },
-  resetHeightIndicators: function(legacy) {
+  resetHeightIndicators: function (legacy) {
     if ($W.rotated) {
       if (legacy != true)
         $("#heightIndicator")[0].style.marginLeft =
@@ -596,8 +596,8 @@ $W = {
     }
   },
 
-  setSampleRowClickListener: function() {
-    $("#webcam").click(function(e) {
+  setSampleRowClickListener: function () {
+    $("#webcam").click(function (e) {
       var offX, offY;
       if (!(e.offsetX || e.offsetY)) {
         offX = e.pageX - $(e.target).offset().left;
@@ -622,30 +622,30 @@ $W = {
     });
   },
 
-  getWavelength: function(col) {
+  getWavelength: function (col) {
     return (
       $W.start_wavelength +
       (col / $W.width) * ($W.end_wavelength - $W.start_wavelength)
     );
   },
 
-  show_rgb: function() {
+  show_rgb: function () {
     this.mode = "rgb";
     $W.oldflotoptionscolors = flotoptions.colors;
     flotoptions.colors = ["#ff0000", "#00ff00", "#0000ff"];
     $W.plot = $.plot($("#graph"), $W.data, flotoptions);
   },
-  show_average: function() {
+  show_average: function () {
     this.mode = "average";
     $W.data = [{ label: "webcam", data: [] }];
     flotoptions.colors = $W.oldflotoptionscolors;
     $W.plot = $.plot($("#graph"), $W.data, flotoptions);
   },
-  toggle_mode: function() {
+  toggle_mode: function () {
     if (this.mode == "rgb") $W.show_average();
     else $W.show_rgb();
   },
-  show_combined: function() {
+  show_combined: function () {
     this.mode = "combined";
     flotoptions.colors = [
       "#ffffff",
@@ -656,7 +656,7 @@ $W = {
     ];
   },
 
-  flip_horizontal: function() {
+  flip_horizontal: function () {
     $W.flipped = !$W.flipped;
     if ($W.flipped == true) $(".btn-flip").addClass("active");
     else $(".btn-flip").removeClass("active");
@@ -679,7 +679,7 @@ $W = {
     }
   },
 
-  toggle_rotation: function() {
+  toggle_rotation: function () {
     $W.rotated = !$W.rotated;
     if ($W.rotated == true) $(".btn-rotate").addClass("active");
     else $(".btn-rotate").removeClass("active");
@@ -720,13 +720,13 @@ $W = {
     $W.setSampleRows($W.sample_start_row, $W.sample_start_row);
   },
 
-  is_data_ascending_in_nm: function() {
+  is_data_ascending_in_nm: function () {
     var left_redness = 0,
       right_redness = 0;
     // sum redness and unblueness for each half
     // REFACTOR to read from live video
     if ($W.unflipped_data.length > 0) {
-      $.each($W.unflipped_data, function(index, col) {
+      $.each($W.unflipped_data, function (index, col) {
         if (index > $W.unflipped_data.length / 2) {
           left_redness += col[0];
           left_redness -= col[2];
@@ -742,7 +742,7 @@ $W = {
   },
 
   markers: [],
-  mark: function() {
+  mark: function () {
     var nm = prompt("Enter a wavelength in nanometers", "532");
     var label = prompt("Enter a label", "Green laser");
     var o = $W.plot.pointOffset({ x: nm, y: 90 });
@@ -757,18 +757,18 @@ $W = {
     $W.markers.push([label, nm, o.left]);
   },
 
-  add_spectrum: function(id) {
+  add_spectrum: function (id) {
     $.ajax({
       url: "/spectra/show/" + id + ".json",
       type: "GET",
       //context: document.body
-      success: function(result) {
+      success: function (result) {
         var spectrum = JSON.parse(result.data); // probably need to convert from JSON
         if ($("#baseline-toggle")[0].checked) {
           // use for subtracting baseline
           //$('#spectrum_tags').val($('#spectrum_tags').val()+",absorption")
           $W.baseline = [];
-          $.each(spectrum.lines, function(index, line) {
+          $.each(spectrum.lines, function (index, line) {
             if (line.wavelength == null) line.wavelength = index;
             // quite imprecise...
             $W.baseline[parseInt(line.wavelength)] = line.average / 2.55;
@@ -776,7 +776,7 @@ $W = {
         } else {
           var label = result.spectrum.title;
           $W.data.push({ label: label, data: [] });
-          $.each(spectrum.lines, function(index, line) {
+          $.each(spectrum.lines, function (index, line) {
             if (line.wavelength == null) line.wavelength = index;
             $W.data[$W.data.length - 1].data.push([
               line.wavelength,
@@ -801,7 +801,7 @@ $W = {
    * pixels of 100%, which would indicate overexposure. Returns
    * whether it passed the threshold and the last inspected index.
    */
-  overexposure_recurse: function(data, i, count, color) {
+  overexposure_recurse: function (data, i, count, color) {
     if (count > $W.overexposure_threshold) return [true, i];
     else {
       if (data[i][{ r: 0, g: 1, b: 2 }[color]] >= 250) {
@@ -809,11 +809,11 @@ $W = {
       } else return [false, i];
     }
   },
-  detect_overexposure: function() {
+  detect_overexposure: function () {
     var overexposed = { r: false, g: false, b: false };
     var colors = ["r", "g", "b"];
     // check each channel for plateaus at 100%:
-    $.each(colors, function(index, color) {
+    $.each(colors, function (index, color) {
       var i = 0;
       while (i < $W.full_data.length) {
         var line = $W.full_data[i];
@@ -827,7 +827,7 @@ $W = {
     return overexposed;
   },
   // checks overexposure and displays an alert if it is so, and what channel
-  alert_overexposure: function() {
+  alert_overexposure: function () {
     console.log("Checking for overexposure");
     var oe = $W.detect_overexposure();
     if (oe.r || oe.g || oe.b) {
@@ -847,7 +847,7 @@ $W = {
   },
 
   //setTimeout($W.alert_overexposure,3000)
-  notify: function(msg, type, expire) {
+  notify: function (msg, type, expire) {
     if (expire == null) expire = true;
     var id = parseInt(Math.random() * 100000);
     $("#notify").html(
@@ -862,13 +862,13 @@ $W = {
         .html("<b>Error:</b> " + msg)
         .addClass("error");
     if (expire) {
-      setTimeout(function() {
+      setTimeout(function () {
         $("#notify_" + id).remove();
       }, 2000);
-    }
+    } i
   },
 
-  getIntensity: function(data, x) {
+  getIntensity: function (data, x) {
     var i, j;
 
     // find the nearest points, x-wise
@@ -888,7 +888,7 @@ $W = {
   /**
    * Returns a canvas object of any rect from the offered canvas
    */
-  excerptCanvas: function(x1, y1, x2, y2, source) {
+  excerptCanvas: function (x1, y1, x2, y2, source) {
     source = source || $W.canvas;
     var width = x2 - x1,
       height = y2 - y1;
@@ -906,3 +906,7 @@ $W = {
     return excerptCanvasContext;
   }
 };
+function getVideoEl() {
+  if ($W.loadingfromPi) return $W.piImage;
+  else return $("video")[0];
+}