From 31d81252dd34c97dc361415715791a724a737850 Mon Sep 17 00:00:00 2001
From: FORCHA <forchapearl1@gmail.com>
Date: Sat, 13 Aug 2022 09:42:39 +0100
Subject: [PATCH 01/11] Canvas Recording and Video resolution change

Canvas Recording and Video resolution change
---
 src/ui/interface.js | 65 +++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 65 insertions(+)

diff --git a/src/ui/interface.js b/src/ui/interface.js
index 985e2c1e..8f12abb3 100644
--- a/src/ui/interface.js
+++ b/src/ui/interface.js
@@ -125,6 +125,8 @@ module.exports = function Interface(options) {
         }
         isVideo  = false;
         isCamera = true; 
+        $('.mediaSelect').toggle();
+        $('.videoControls').toggle();
         $('#preset-modal').offcanvas('show');
         $('#preset-modalMobile').offcanvas('show');               
       }
@@ -228,4 +230,67 @@ module.exports = function Interface(options) {
     $("[rel=popover]").popover()
     return true;
   });
+
+  //Start Handle multiple webcam resolutions
+  function changeResolution(w, h){
+    document.getElementById('image').setAttribute("width",w);
+    document.getElementById('image').setAttribute("height",h);
+  }
+  $('#qvga').click(function(e){
+    changeResolution('100px','100px')
+  });
+  $('#vga').click(function(e){
+    changeResolution('800px','600px')
+  });
+  $('#hd').click(function(e){
+    changeResolution('2400px','1800px')
+  })
+  $('#full-hd').click(function(e){
+    changeResolution('6000px','4000px')
+  });
+  //End Handling of Multiple webcam resolutions
+
+  //Start Canvas Recording and Download
+
+  const canvas = document.getElementById('image');
+  const ctx = canvas.getContext('2d');
+  var x = 0;
+  const stream = canvas.captureStream(); // grab our canvas MediaStream
+  const rec = new MediaRecorder(stream); 
+
+  function exportVid(blob) {
+    const vid = document.createElement('video');
+    vid.src = URL.createObjectURL(blob);
+    vid.controls = true;
+    vid.style.display='none';
+    document.body.appendChild(vid);
+    const a = document.createElement('a');
+    a.style.display = 'none';
+    a.href = vid.src;
+    a.download = 'infragramVideo.mp4';
+    document.body.appendChild(a);
+    a.click();
+    setTimeout(() => {
+      document.body.removeChild(a);
+      URL.revokeObjectURL(vid.src);
+    }, 100);
+  }
+  $('#startRecord').click(function(e){
+    const chunks = [];
+
+    rec.ondataavailable = e => chunks.push(e.data);
+    rec.onstop = e => exportVid(new Blob(chunks, {type: 'video/h264'}));
+    rec.start();
+    document.getElementById('startRecord').style.display='none';
+    document.getElementById('stopRecord').style.display='block';
+  })
+  $('#stopRecord').click(function(e){
+    rec.stop();
+    document.getElementById('stopRecord').style.display='none';
+    document.getElementById('startRecord').style.display='block'; 
+    document.getElementById('downloadButton').style.display='block'; 
+  })
+
+  //End Canvas Recording and Download  
+
 }

From c6689afad8a8f65ef27e29fe9f8273605c416e8a Mon Sep 17 00:00:00 2001
From: FORCHA <forchapearl1@gmail.com>
Date: Sat, 13 Aug 2022 09:44:29 +0100
Subject: [PATCH 02/11] Delete infragram2.js

---
 dist/infragram2.js | 2305 --------------------------------------------
 1 file changed, 2305 deletions(-)
 delete mode 100644 dist/infragram2.js

diff --git a/dist/infragram2.js b/dist/infragram2.js
deleted file mode 100644
index 0500bf7f..00000000
--- a/dist/infragram2.js
+++ /dev/null
@@ -1,2305 +0,0 @@
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
-
-function _sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
-function _slicedToArray(arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return _sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }
-
-(function () {
-  function r(e, n, t) {
-    function o(i, f) {
-      if (!n[i]) {
-        if (!e[i]) {
-          var c = "function" == typeof require && require;
-          if (!f && c) return c(i, !0);
-          if (u) return u(i, !0);
-          var a = new Error("Cannot find module '" + i + "'");
-          throw a.code = "MODULE_NOT_FOUND", a;
-        }
-
-        var p = n[i] = {
-          exports: {}
-        };
-        e[i][0].call(p.exports, function (r) {
-          var n = e[i][1][r];
-          return o(n || r);
-        }, p, p.exports, r, e, n, t);
-      }
-
-      return n[i].exports;
-    }
-
-    for (var u = "function" == typeof require && require, i = 0; i < t.length; i++) {
-      o(t[i]);
-    }
-
-    return o;
-  }
-
-  return r;
-})()({
-  1: [function (require, module, exports) {
-    function urlHash() {
-      function getUrlHashParameter(param) {
-        var params = getUrlHashParameters();
-        return params[param];
-      }
-
-      function getUrlHashParameters() {
-        var sPageURL = window.location.hash;
-        if (sPageURL) sPageURL = sPageURL.split('#')[1];
-        var pairs = sPageURL.split('&');
-        var object = {};
-        pairs.forEach(function (pair, i) {
-          pair = pair.split('=');
-          if (pair[0] != '') object[pair[0]] = pair[1];
-        });
-        return object;
-      } // accepts an object like { paramName: value, paramName1: value }
-      // and transforms to: url.com#paramName=value&paramName1=value
-
-
-      function setUrlHashParameters(params) {
-        var keys = Object.keys(params);
-        var values = Object.values(params);
-        var pairs = [];
-        keys.forEach(function (key, i) {
-          if (key != '') pairs.push(keys[i] + '=' + values[i]);
-        });
-        var hash = pairs.join('&');
-        window.location.hash = hash;
-      }
-
-      function setUrlHashParameter(param, value) {
-        var params = getUrlHashParameters();
-        params[param] = value;
-        setUrlHashParameters(params);
-      }
-
-      return {
-        getUrlHashParameter: getUrlHashParameter,
-        getUrlHashParameters: getUrlHashParameters,
-        setUrlHashParameter: setUrlHashParameter,
-        setUrlHashParameters: setUrlHashParameters
-      };
-    }
-
-    module.exports = urlHash;
-  }, {}],
-  2: [function (require, module, exports) {
-    window.Infragram = function Infragram(options) {
-      options = options || {};
-      options.version = options.version || 1; // for old instances where it hasn't been explicitly set
-
-      options.uploader = options.uploader || false;
-      options.processor = options.processor || 'javascript';
-      options.camera = require('./io/camera')(options);
-      options.colorized = options.colorized || false;
-      options.mode = options.mode || "raw", options.video_live = options.video_live || false, options.webGlSupported = options.webGlSupported || false; // move into processor
-
-      options.processors = {
-        'webgl': require('./processors/webgl'),
-        'javascript': require('./processors/javascript')
-      };
-      options.processor = options.processors[options.processor](options);
-      options.file = require('./io/file')(options, options.processor);
-      options.logger = require('./logger')(options);
-
-      var Interface = require('./ui/interface')(options); // this can change processor based on URL hash
-      //options.processor.initialize(options); // double initialize after end of processor code?
-
-
-      console.log('processor:', options.processor.type);
-
-      options.colorize = function colorize(map) {
-        options.processor.colorize(map);
-      }; // this should accept an object with parameters r,g,b,h,s,v,m and mode
-
-
-      options.run = function run(mode) {
-        options.logger.save_log();
-        return options.processor.run(mode);
-      }; // split into processor.video() methods
-
-
-      options.video = function video() {
-        options.camera.initialize();
-        var interval;
-        if (options.processor.type == "webgl") interval = 15;else interval = 150;
-        setInterval(function () {
-          if (image) options.run(options.mode);
-          options.camera.getSnapshot(); //if (options.colorized) return options.colorize();
-        }, interval);
-      }; // Procces Uploaded Video File Locally
-
-
-      options.processLocalVideo = function processLocalVideo() {
-        options.camera.unInitialize();
-        var interval;
-        if (options.processor.type == "webgl") interval = 15;else interval = 150;
-        setInterval(function () {
-          if (image) options.run(options.mode);
-          options.camera.getSnapshot(); //if (options.colorized) return options.colorize();
-        }, interval);
-      }; // TODO: this doesn't work; it just downloads the unmodified image. 
-      // probably a timing issue?
-
-
-      function download() {
-        //options.run(options.mode);
-        //if (options.colorized) return options.colorize();
-        options.file.downloadImage();
-      }
-
-      return {
-        Camera: options.camera,
-        Interface: Interface,
-        logger: options.logger,
-        run: options.run,
-        colorize: options.colorize,
-        processors: options.processors,
-        download: download,
-        options: options
-      };
-    };
-
-    module.exports = Infragram;
-  }, {
-    "./io/camera": 7,
-    "./io/file": 8,
-    "./logger": 9,
-    "./processors/javascript": 10,
-    "./processors/webgl": 11,
-    "./ui/interface": 15
-  }],
-  3: [function (require, module, exports) {
-    module.exports = function segmented_colormap(segments) {
-      return function (x) {
-        var i, l, len, m, ref, result, x0, x1, xstart, y0, y1;
-        y0 = 0;
-        y1 = 0;
-        var _ref = [segments[0][0], 1];
-        x0 = _ref[0];
-        x1 = _ref[1];
-
-        if (x < x0) {
-          return y0;
-        }
-
-        for (i = l = 0, len = segments.length; l < len; i = ++l) {
-          var _segments$i = _slicedToArray(segments[i], 3);
-
-          xstart = _segments$i[0];
-          y0 = _segments$i[1];
-          y1 = _segments$i[2];
-          x0 = xstart;
-
-          if (i === segments.length - 1) {
-            x1 = 1;
-            break;
-          }
-
-          x1 = segments[i + 1][0];
-
-          if (xstart <= x && x < x1) {
-            break;
-          }
-        }
-
-        result = [];
-
-        for (i = m = 0, ref = y0.length; 0 <= ref ? m < ref : m > ref; i = 0 <= ref ? ++m : --m) {
-          result[i] = (x - x0) / (x1 - x0) * (y1[i] - y0[i]) + y0[i];
-        }
-
-        return result;
-      };
-    };
-  }, {}],
-  4: [function (require, module, exports) {
-    module.exports = {
-      "greyscale": {
-        "author": "publiclab",
-        "description": "A simple linear greyscale colormap, black to white.",
-        "url": "https://publiclab.org/colormaps#greyscale",
-        "colormapRanges": [[0, [0, 0, 0], [255, 255, 255]], [1, [255, 255, 255], [255, 255, 255]]]
-      },
-      "default": {
-        "author": "publiclab",
-        "description": "A full-colorwheel colormap, covering the colors in the spectrum.",
-        "url": "https://publiclab.org/colormaps#default",
-        "colormapRanges": [[0, [45, 1, 121], [25, 1, 137]], [0.125, [25, 1, 137], [0, 6, 156]], [0.1875, [0, 6, 156], [7, 41, 172]], [0.25, [7, 41, 172], [22, 84, 187]], [0.3125, [22, 84, 187], [25, 125, 194]], [0.375, [25, 125, 194], [26, 177, 197]], [0.4375, [26, 177, 197], [23, 199, 193]], [0.47, [23, 199, 193], [25, 200, 170]], [0.50, [25, 200, 170], [21, 209, 27]], [0.5625, [21, 209, 27], [108, 215, 18]], [0.625, [108, 215, 18], [166, 218, 19]], [0.6875, [166, 218, 19], [206, 221, 20]], [0.75, [206, 221, 20], [222, 213, 19]], [0.7813, [222, 213, 19], [222, 191, 19]], [0.8125, [222, 191, 19], [227, 133, 17]], [0.875, [227, 133, 17], [231, 83, 16]], [0.9375, [231, 83, 16], [220, 61, 48]]]
-      },
-      "stretched": {
-        "author": "publiclab",
-        "description": "A simple colormap from blue to red, with no purple overlap.",
-        "url": "https://publiclab.org/colormaps#stretched",
-        "colormapRanges": [[0, [0, 0, 255], [0, 0, 255]], [0.1, [0, 0, 255], [38, 195, 195]], [0.5, [0, 150, 0], [255, 255, 0]], [0.7, [255, 255, 0], [255, 50, 50]], [0.9, [255, 50, 50], [255, 50, 50]]]
-      },
-      "bluwhtgrngis": {
-        "author": "MaggPi",
-        "description": "A colormap from blue to white to green to....",
-        "url": "https://publiclab.org/colormaps#bluwhtgrngis",
-        "colormapRanges": [[0, [6, 23, 86], [6, 25, 84]], [0.0625, [6, 25, 84], [6, 25, 84]], [0.125, [6, 25, 84], [6, 25, 84]], [0.1875, [6, 25, 84], [6, 25, 84]], [0.25, [6, 25, 84], [6, 25, 84]], [0.3125, [6, 25, 84], [9, 24, 84]], [0.3438, [9, 24, 84], [119, 120, 162]], [0.375, [119, 129, 162], [249, 250, 251]], [0.406, [249, 250, 251], [255, 255, 255]], [0.4375, [255, 255, 255], [255, 255, 255]], [0.50, [255, 255, 255], [214, 205, 191]], [0.52, [214, 205, 191], [178, 175, 96]], [0.5625, [178, 175, 96], [151, 176, 53]], [0.593, [151, 176, 53], [146, 188, 12]], [0.625, [146, 188, 12], [96, 161, 1]], [0.6875, [96, 161, 1], [30, 127, 3]], [0.75, [30, 127, 3], [0, 99, 1]], [0.8125, [0, 99, 1], [0, 74, 1]], [0.875, [0, 74, 1], [0, 52, 0]], [0.9375, [0, 52, 0], [0, 34, 0]], [0.968, [0, 34, 0], [68, 70, 67]]]
-      },
-      "brntogrn": {
-        "author": "MaggPi",
-        "description": "A colormap from brown to green.",
-        "url": "https://publiclab.org/colormaps#brntogrn",
-        "colormapRanges": [[0, [110, 12, 3], [118, 6, 1]], [0.0625, [118, 6, 1], [141, 19, 6]], [0.125, [141, 19, 6], [165, 35, 13]], [0.1875, [165, 35, 13], [177, 59, 25]], [0.2188, [177, 59, 25], [192, 91, 36]], [0.25, [192, 91, 36], [214, 145, 76]], [0.3125, [214, 145, 76], [230, 183, 134]], [0.375, [230, 183, 134], [243, 224, 194]], [0.4375, [243, 224, 194], [250, 252, 229]], [0.50, [250, 252, 229], [217, 235, 185]], [0.5625, [217, 235, 185], [184, 218, 143]], [0.625, [184, 218, 143], [141, 202, 89]], [0.6875, [141, 202, 89], [80, 176, 61]], [0.75, [80, 176, 61], [0, 147, 32]], [0.8125, [0, 147, 32], [1, 122, 22]], [0.875, [1, 122, 22], [0, 114, 19]], [0.90, [0, 114, 19], [0, 105, 18]], [0.9375, [0, 105, 18], [7, 70, 14]]]
-      },
-      "blutoredjet": {
-        "author": "MaggPi",
-        "description": "A colormap from blue to red.",
-        "url": "https://publiclab.org/colormaps#blutoredjet",
-        "colormapRanges": [[0, [0, 0, 140], [1, 1, 186]], [0.0625, [1, 1, 186], [0, 1, 248]], [0.125, [0, 1, 248], [0, 70, 254]], [0.1875, [0, 70, 254], [0, 130, 255]], [0.25, [0, 130, 255], [2, 160, 255]], [0.2813, [2, 160, 255], [0, 187, 255]], [0.3125, [0, 187, 255], [6, 250, 255]], [0.348, [0, 218, 255], [8, 252, 251]], [0.375, [8, 252, 251], [27, 254, 228]], [0.406, [27, 254, 228], [70, 255, 187]], [0.4375, [70, 255, 187], [104, 254, 151]], [0.47, [104, 254, 151], [132, 255, 19]], [0.50, [132, 255, 19], [195, 255, 60]], [0.5625, [195, 255, 60], [231, 254, 25]], [0.5976, [231, 254, 25], [253, 246, 1]], [0.625, [253, 246, 1], [252, 210, 1]], [0.657, [252, 210, 1], [255, 183, 0]], [0.6875, [255, 183, 0], [255, 125, 2]], [0.75, [255, 125, 2], [255, 65, 1]], [0.8125, [255, 65, 1], [247, 1, 1]], [0.875, [247, 1, 1], [200, 1, 3]], [0.9375, [200, 1, 3], [122, 3, 2]]]
-      },
-      "colors16": {
-        "author": "publiclab",
-        "description": "A segmented colormap of the full color spectrum, divided into 16 colors.",
-        "url": "https://publiclab.org/colormaps#colors16",
-        "colormapRanges": [[0, [0, 0, 0], [0, 0, 0]], [0.0625, [3, 1, 172], [3, 1, 172]], [0.125, [3, 1, 222], [3, 1, 222]], [0.1875, [0, 111, 255], [0, 111, 255]], [0.25, [3, 172, 255], [3, 172, 255]], [0.3125, [1, 226, 255], [1, 226, 255]], [0.375, [2, 255, 0], [2, 255, 0]], [0.4375, [198, 254, 0], [190, 254, 0]], [0.50, [252, 255, 0], [252, 255, 0]], [0.5625, [255, 223, 3], [255, 223, 3]], [0.625, [255, 143, 3], [255, 143, 3]], [0.6875, [255, 95, 3], [255, 95, 3]], [0.75, [242, 0, 1], [242, 0, 1]], [0.8125, [245, 0, 170], [245, 0, 170]], [0.875, [223, 180, 225], [223, 180, 225]], [0.9375, [255, 255, 255], [255, 255, 255]]]
-      },
-      "fastie": {
-        "author": "cfastie",
-        "description": "A colormap for highlighting NDVI values over 0 on a scale from -1 to 1; in this scale, values from 0-0.5 are greyscale, while those over 0.5 are color.",
-        "url": "https://publiclab.org/colormaps#fastie",
-        "colormapRanges": [[0, [255, 255, 255], [0, 0, 0]], [0.167, [0, 0, 0], [255, 255, 255]], [0.33, [255, 255, 255], [0, 0, 0]], [0.5, [0, 0, 0], [140, 140, 255]], [0.55, [140, 140, 255], [0, 255, 0]], [0.63, [0, 255, 0], [255, 255, 0]], [0.75, [255, 255, 0], [255, 0, 0]], [0.95, [255, 0, 0], [255, 0, 255]]]
-      }
-    };
-  }, {}],
-  5: [function (require, module, exports) {
-    // This file was adapted from infragram-js:
-    // http://github.com/p-v-o-s/infragram-js.
-    module.exports = function Colormaps(options) {
-      // see https://github.com/publiclab/image-sequencer/tree/main/src/modules/Colormap/
-      var colormapFunctionGenerator = require('./colormapFunctionGenerator.js');
-
-      var colormaps = require('./colormaps.json');
-
-      Object.keys(colormaps).forEach(function (key) {
-        // make a function from the colormap, which we can't easily do in JSON
-        colormaps[key].fn = colormapFunctionGenerator(colormaps[key].colormapRanges);
-      });
-
-      var JsImage = require('../util/JsImage.js');
-
-      function colorify(jsImage, colormap) {
-        var b, data, g, i, j, l, n, r, ref;
-        $('#btn-colorize').addClass('active');
-        n = jsImage.width * jsImage.height;
-        data = new Uint8ClampedArray(4 * n);
-        j = 0;
-
-        for (i = l = 0, ref = n; 0 <= ref ? l < ref : l > ref; i = 0 <= ref ? ++l : --l) {
-          var _colormap = colormap(jsImage.data[i]);
-
-          var _colormap2 = _slicedToArray(_colormap, 3);
-
-          r = _colormap2[0];
-          g = _colormap2[1];
-          b = _colormap2[2];
-          data[j++] = r;
-          data[j++] = g;
-          data[j++] = b;
-          data[j++] = 255;
-        }
-
-        return new JsImage(data, jsImage.width, jsImage.height, 4);
-      }
-
-      return {
-        colorify: colorify,
-        colormap1: colormaps['default'].fn,
-        colormap2: colormaps['stretched'].fn,
-        greyscale_colormap: colormaps['greyscale'].fn,
-        segmented_colormap: colormapFunctionGenerator
-      };
-    };
-  }, {
-    "../util/JsImage.js": 17,
-    "./colormapFunctionGenerator.js": 3,
-    "./colormaps.json": 4
-  }],
-  6: [function (require, module, exports) {
-    // This file was adapted from infragram-js:
-    // http://github.com/p-v-o-s/infragram-js.
-    module.exports = window.Converters = {
-      // modified from:
-      // http://axonflux.com/handy-rgb-to-hsl-and-rgb-to-hsv-color-model-c
-      hsv2rgb: function hsv2rgb(h, s, v) {
-        var data, f, i, p, q, rgb, t;
-        data = [];
-
-        if (s === 0) {
-          rgb = [v, v, v];
-        } else {
-          i = Math.floor(h * 6);
-          f = h * 6 - i;
-          p = v * (1 - s);
-          q = v * (1 - f * s);
-          t = v * (1 - (1 - f) * s);
-          data = [v * (1 - s), v * (1 - s * (h - i)), v * (1 - s * (1 - (h - i)))];
-
-          switch (i) {
-            case 0:
-              rgb = [v, t, p];
-              break;
-
-            case 1:
-              rgb = [q, v, p];
-              break;
-
-            case 2:
-              rgb = [p, v, t];
-              break;
-
-            case 3:
-              rgb = [p, q, v];
-              break;
-
-            case 4:
-              rgb = [t, p, v];
-              break;
-
-            default:
-              rgb = [v, p, q];
-          }
-        }
-
-        return rgb;
-      },
-      rgb2hsv: function rgb2hsv(r, g, b) {
-        var d, h, max, min, s, v;
-        max = Math.max(r, g, b);
-        min = Math.min(r, g, b);
-        h = s = v = max;
-        d = max - min;
-        s = max === 0 ? 0 : d / max;
-
-        if (max === min) {
-          h = 0; // achromatic
-        } else {
-          switch (max) {
-            case r:
-              h = (g - b) / d + (g < b ? 6 : 0);
-              break;
-
-            case g:
-              h = (b - r) / d + 2;
-              break;
-
-            case b:
-              h = (r - g) / d + 4;
-          }
-
-          h /= 6;
-        }
-
-        return [h, s, v];
-      }
-    };
-  }, {}],
-  7: [function (require, module, exports) {
-    // This file was adapted from infragram-js:
-    // http://github.com/p-v-o-s/infragram-js.
-    module.exports = function Camera(options) {
-      var canvas, ctx;
-      options.webcamVideoSelector = options.webcamVideoSelector || 'webcamVideoEl';
-      options.webcamVideoEl = document.getElementById(options.webcamVideoSelector); // Initialize getUserMedia with options
-
-      function initialize() {
-        if (options.version == 1) {
-          getUserMedia(webRtcOptions, success, deviceError); // iOS Safari 11 compatibility: https://github.com/webrtc/adapter/issues/685
-
-          webRtcOptions.videoEl.setAttribute('autoplay', 'autoplay');
-          webRtcOptions.videoEl.setAttribute('playsinline', 'playsinline');
-        } else {
-          navigator.mediaDevices.getUserMedia(webRtcOptions).then(success).catch(deviceError);
-        }
-
-        window.webcam = webRtcOptions; // this is weird but maybe used for flash fallback?
-
-        canvas = options.canvas || document.getElementById("image");
-        ctx = canvas.getContext("2d"); // Trigger a snapshot w/ button
-        // -- move this to interface.js?
-
-        $("#snapshot").show();
-        $("#live-video").show();
-        $("#webcam").show();
-      }
-
-      function unInitialize() {
-        //Initialize stream without webcam
-        navigator.mediaDevices.getUserMedia(webRtcOptions).then(falseSuccess).catch(deviceError);
-      } // webRtcOptions contains the configuration information for the shim
-      // it allows us to specify the width and height of the video
-      // output we"re working with, the location of the fallback swf,
-      // events that are triggered onCapture and onSave (for the fallback)
-      // and so on.
-
-
-      var webRtcOptions = options.webRtcOptions || {
-        "audio": false,
-        "video": true,
-        // the element (by id) you wish to use for 
-        // displaying the stream from a camera
-        el: "webcam",
-        extern: null,
-        append: true,
-        // height and width of the output stream
-        // container
-        width: 640,
-        height: 480,
-        // the recommended mode to be used is 
-        // "callback " where a callback is executed 
-        // once data is available
-        mode: "callback",
-        // a debugger callback is available if needed
-        debug: function debug() {},
-        // callback for capturing the fallback stream
-        onCapture: function onWebRtcCapture() {
-          return window.webcam.save();
-        },
-        // callback for saving the stream, useful for
-        // relaying data further.
-        onSave: onSaveGetUserMedia,
-        onLoad: function onLoadGetUserMedia() {}
-      };
-
-      function onSaveGetUserMedia(data) {
-        var col,
-            h,
-            i,
-            img,
-            j,
-            ref,
-            tmp,
-            w,
-            pos = 0;
-        col = data.split("");
-        img = camera.image;
-        tmp = null;
-        w = webRtcOptions.width;
-        h = webRtcOptions.height;
-
-        for (i = j = 0, ref = w - 1; 0 <= ref ? j <= ref : j >= ref; i = 0 <= ref ? ++j : --j) {
-          tmp = parseInt(col[i], 10);
-          img.data[pos + 0] = tmp >> 16 & 0xff;
-          img.data[pos + 1] = tmp >> 8 & 0xff;
-          img.data[pos + 2] = tmp & 0xff;
-          img.data[pos + 3] = 0xff;
-          pos += 4;
-        }
-
-        if (pos >= 4 * w * h) {
-          ctx.putImageData(img, 0, 0);
-          return pos = 0;
-        }
-      }
-
-      function success(stream) {
-        if (options.version == 1) {
-          var video;
-
-          if (webRtcOptions.context === "webrtc") {
-            video = webRtcOptions.videoEl;
-
-            if (navigator.mozGetUserMedia) {
-              video.mozSrcObject = stream;
-            } else {
-              video.srcObject = stream;
-            }
-
-            return video.onerror = function (e) {
-              return stream.stop();
-            };
-          } else {}
-        } else {
-          window.localStream = stream;
-          isOnCam = stream;
-          isCamera = true;
-          track = stream.getTracks()[0];
-          webCamVideoEl.srcObject = stream;
-          return webCamVideoEl.onerror = function (e) {
-            return stream.stop();
-          };
-        }
-      }
-
-      function deviceError(error) {
-        alert("No camera available.");
-        console.log(error);
-        return console.error("An error occurred: [CODE " + error.code + "]");
-      }
-
-      function falseSuccess(stream) {
-        //Stream for video processing
-        stream.getVideoTracks()[0].stop();
-      } // not doing anything now... for copying to a 2nd canvas
-
-
-      function getSnapshot() {
-        if (options.version == 1) {
-          var video; // If the current context is WebRTC/getUserMedia (something
-          // passed back from the shim to avoid doing further feature
-          // detection), we handle getting video/images for our canvas 
-          // from our HTML5 <video> element.
-
-          if (webRtcOptions.context === "webrtc") {
-            video = document.getElementsByTagName("video")[0];
-            options.processor.updateImage(video);
-            return $("#webcam").hide(); // Otherwise, if the context is Flash, we ask the shim to
-            // directly call window.webcam, where our shim is located
-            // and ask it to capture for us.
-          } else if (webRtcOptions.context === "flash") {
-            return window.webcam.capture();
-          } else {
-            console.log("No context was supplied to getSnapshot()");
-          }
-        } else {
-          var video;
-          video = document.getElementsByTagName("video")[0];
-          options.processor.updateImage(video);
-          return $("#webcam").hide();
-        }
-      }
-
-      return {
-        getSnapshot: getSnapshot,
-        initialize: initialize,
-        onSaveGetUserMedia: onSaveGetUserMedia,
-        webRtcOptions: webRtcOptions,
-        unInitialize: unInitialize
-      };
-    };
-  }, {}],
-  8: [function (require, module, exports) {
-    // This file was adapted from infragram-js:
-    // http://github.com/p-v-o-s/infragram-js.
-    module.exports = function File(options, processor) {
-      var _getMouseEvent = function getMouseEvent() {
-        var getParams = function getParams() {
-          return {
-            bubbles: false,
-            cancelable: false,
-            screenX: 0,
-            screenY: 0,
-            clientX: 0,
-            clientY: 0
-          };
-        };
-
-        try {
-          // eslint-disable-next-line no-new
-          new MouseEvent("t");
-
-          _getMouseEvent = function getMouseEvent() {
-            return function (eventType) {
-              var params = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : getParams();
-              return new MouseEvent(eventType, params);
-            };
-          };
-        } catch (e) {
-          // Polyfills DOM4 MouseEvent
-          _getMouseEvent = function getMouseEvent() {
-            return function (eventType) {
-              var params = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : getParams();
-              var mouseEvent = document.createEvent("MouseEvent"); // https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/initMouseEvent
-
-              mouseEvent.initMouseEvent(eventType, params.bubbles, params.cancelable, window, 0, // the event's mouse click count
-              params.screenX, params.screenY, params.clientX, params.clientY, false, false, false, false, 0, null);
-              return mouseEvent;
-            };
-          };
-        }
-
-        return _getMouseEvent();
-      };
-
-      function downloadImage() {
-        var event, format, lnk; // create an "off-screen" anchor tag
-
-        lnk = document.createElement("a"); // the key here is to set the download attribute of the a tag
-
-        lnk.href = processor.getCurrentImage();
-
-        if (lnk.href.match('image/jpeg')) {
-          format = "jpg";
-        } else {
-          format = "png";
-        }
-
-        lnk.download = new Date().toISOString().replace(/:/g, "_") + "." + format; // create a "fake" click-event to trigger the download
-
-        if (document.createEvent) {
-          var mouseEvent = _getMouseEvent();
-
-          lnk.dispatchEvent(mouseEvent("click", {
-            screenX: 0,
-            screenY: 0,
-            clientX: 0,
-            clientY: 0
-          }));
-        } else if (lnk.fireEvent) {
-          lnk.fireEvent("onclick");
-        }
-
-        return true;
-      } // from a local URL (remote may be against js security rules)
-
-
-      function fetchImage(src, mode) {
-        var img;
-        $("#save-modal-btn").show();
-        $("#save-zone").show();
-        img = new Image();
-
-        if (options.uploader) {
-          img.onload = function () {
-            var filename;
-            filename = src.split('/');
-            filename = filename[filename.length - 1];
-            FileUpload.setFilename(filename);
-
-            if (mode) {
-              if (mode.substring(0, 5) === "infra") {
-                $("#modeSwitcher").val(mode).change();
-              } else {
-                $("button#" + mode).button("toggle");
-                $("button#" + mode).click(); // this should be via a direct call, not a click; the show.jade page should not require buttons!
-              }
-            }
-
-            options.save_infragrammar_expressions(params);
-
-            if (mode === "ndvi") {
-              options.save_infragrammar_expressions({
-                'm': '(R-B)/(R+B)'
-              });
-              mode = "infragrammar_mono";
-            } else if (mode === "nir") {
-              options.save_infragrammar_expressions({
-                'm': 'R'
-              });
-              mode = "infragrammar_mono";
-            } else if (mode === "raw") {
-              options.save_infragrammar_expressions({
-                'r': 'R',
-                'g': 'G',
-                'b': 'B'
-              });
-              mode = "infragrammar";
-            }
-
-            processor.updateImage(this);
-
-            if (params['color'] === "true" || params['c'] === "true") {
-              options.colorized = true; // before run_infrag, so it gets logged
-            }
-
-            run_infragrammar(mode); // this sets colorized to false!
-
-            if (params['color'] === "true" || params['c'] === "true") {
-              options.colorized = true; // again, so it gets run 
-            }
-
-            if (options.colorized) {
-              $("button#color").button("toggle");
-              return run_colorize();
-            }
-          };
-        }
-
-        return img.src = src;
-      }
-
-      return {
-        fetchImage: fetchImage,
-        downloadImage: downloadImage
-      };
-    };
-  }, {}],
-  9: [function (require, module, exports) {
-    // refactor to access state, not dom
-    module.exports = function Logger(options) {
-      var log = []; // a record of previous commands run
-
-      function log_mono() {
-        var logEntry;
-        logEntry = "mode=infragrammar_mono";
-        logEntry += $("#m_exp").val() ? "&m=" + $("#m_exp").val() : "";
-        logEntry += options.colorized ? "&c=true" : ""; // no way to succinctly store the colormap... just offer range of colorizations at view-time?
-
-        return log.push(logEntry);
-      }
-
-      function log_hsv() {
-        var logEntry;
-        logEntry = "mode=infragrammar_hsv";
-        logEntry += $("#h_exp").val() ? "&h=" + $("#h_exp").val() : "";
-        logEntry += $("#s_exp").val() ? "&s=" + $("#s_exp").val() : "";
-        logEntry += $("#v_exp").val() ? "&v=" + $("#v_exp").val() : "";
-        return log.push(logEntry);
-      }
-
-      function log_rgb() {
-        var logEntry;
-        logEntry = "mode=infragrammar";
-        logEntry += $("#r_exp").val() ? "&r=" + $("#r_exp").val() : "";
-        logEntry += $("#g_exp").val() ? "&g=" + $("#g_exp").val() : "";
-        logEntry += $("#b_exp").val() ? "&b=" + $("#b_exp").val() : "";
-        return log.push(logEntry);
-      }
-
-      function save_log() {
-        if (options.mode === "infragrammar_mono") {
-          return log_mono();
-        } else if (options.mode === "infragrammar_hsv") {
-          return log_hsv();
-        } else if (options.mode === "infragrammar") {
-          return log_rgb();
-        }
-      }
-
-      return {
-        log: log,
-        log_hsv: log_hsv,
-        log_mono: log_mono,
-        log_rgb: log_rgb,
-        save_log: save_log
-      };
-    };
-  }, {}],
-  10: [function (require, module, exports) {
-    // This file was adapted from infragram-js:
-    // http://github.com/p-v-o-s/infragram-js.
-    // not currently being used -- will replace with Image Sequencer perhaps?
-    // https://github.com/publiclab/image-sequencer
-    module.exports = function javascriptProcessor() {
-      var b_exp = "",
-          g_exp = "",
-          get_channels,
-          Colormaps = require('../color/colormaps')(JsImage),
-          colormap = Colormaps.colormap1,
-          converters = require('../color/converters'),
-          image = null,
-          mode = "raw",
-          ndvi,
-          r_exp = "",
-          set_mode,
-          update_colorbar;
-
-      var JsImage = require('../util/JsImage.js');
-
-      function get_channels(jsImage) {
-        var b, g, i, l, mkImage, n, r, ref;
-        n = jsImage.width * jsImage.height;
-        r = new Float32Array(n);
-        g = new Float32Array(n);
-        b = new Float32Array(n);
-
-        for (i = l = 0, ref = n; 0 <= ref ? l < ref : l > ref; i = 0 <= ref ? ++l : --l) {
-          r[i] = jsImage.data[4 * i + 0];
-          g[i] = jsImage.data[4 * i + 1];
-          b[i] = jsImage.data[4 * i + 2];
-        }
-
-        function mkImage(d) {
-          return new JsImage(d, jsImage.width, jsImage.height, 1);
-        }
-
-        return [mkImage(r), mkImage(g), mkImage(b)];
-      } // replace with infragrammar expression
-
-
-      function ndvi(nirJsImg, visJsImg) {
-        var d, i, l, n, ref;
-        n = nirJsImg.width * nirJsImg.height;
-        d = new Float64Array(n);
-
-        for (i = l = 0, ref = n; 0 <= ref ? l < ref : l > ref; i = 0 <= ref ? ++l : --l) {
-          d[i] = (nirJsImg.data[i] - visJsImg.data[i]) / (nirJsImg.data[i] + visJsImg.data[i]);
-        }
-
-        return new JsImage(d, nirJsImg.width, nirJsImg.height, 1);
-      }
-
-      function infragrammar(jsImage) {
-        var b, g, i, l, n, o, r, ref;
-        $('#btn-colorize').removeClass('active');
-        n = jsImage.width * jsImage.height;
-        r = new Float32Array(n);
-        g = new Float32Array(n);
-        b = new Float32Array(n);
-        o = new Float32Array(4 * n);
-
-        for (i = l = 0, ref = n; 0 <= ref ? l < ref : l > ref; i = 0 <= ref ? ++l : --l) {
-          r[i] = jsImage.data[4 * i + 0] / 255;
-          g[i] = jsImage.data[4 * i + 1] / 255;
-          b[i] = jsImage.data[4 * i + 2] / 255;
-          o[4 * i + 0] = 255 * r_exp(r[i], g[i], b[i]);
-          o[4 * i + 1] = 255 * g_exp(r[i], g[i], b[i]);
-          o[4 * i + 2] = 255 * b_exp(r[i], g[i], b[i]);
-          o[4 * i + 3] = 255;
-        }
-
-        return new JsImage(o, jsImage.width, jsImage.height, 4);
-      }
-
-      function infragrammar_mono(jsImage) {
-        var b, g, i, l, n, o, r, ref;
-        n = jsImage.width * jsImage.height;
-        r = new Float32Array(n);
-        g = new Float32Array(n);
-        b = new Float32Array(n);
-        o = new Float32Array(n);
-
-        for (i = l = 0, ref = n; 0 <= ref ? l < ref : l > ref; i = 0 <= ref ? ++l : --l) {
-          r[i] = jsImage.data[4 * i + 0] / 255.0;
-          g[i] = jsImage.data[4 * i + 1] / 255.0;
-          b[i] = jsImage.data[4 * i + 2] / 255.0;
-          o[i] = r_exp(r[i], g[i], b[i]);
-        }
-
-        return new JsImage(o, jsImage.width, jsImage.height, 1);
-      }
-
-      function render(jsImage) {
-        var ctx, d, e;
-        e = $("#image")[0];
-        e.width = jsImage.width;
-        e.height = jsImage.height;
-        ctx = e.getContext("2d");
-        d = ctx.getImageData(0, 0, jsImage.width, jsImage.height);
-        jsImage.copyToImageData(d);
-        return ctx.putImageData(d, 0, 0);
-      }
-
-      function colorize() {
-        var imageData = getImageData();
-        render(Colormaps.colorify(infragrammar_mono(imageData), function (x) {
-          return colormap((x + 1) / 2);
-        }));
-        return true;
-      }
-
-      update_colorbar = function update_colorbar(min, max) {
-        var b, ctx, d, e, g, i, j, k, l, m, r, ref, ref1;
-        $('#colorbar-container')[0].style.display = 'inline-block';
-        e = $('#colorbar')[0];
-        ctx = e.getContext("2d");
-        d = ctx.getImageData(0, 0, e.width, e.height);
-
-        for (i = l = 0, ref = e.width; 0 <= ref ? l < ref : l > ref; i = 0 <= ref ? ++l : --l) {
-          for (j = m = 0, ref1 = e.height; 0 <= ref1 ? m < ref1 : m > ref1; j = 0 <= ref1 ? ++m : --m) {
-            var _colormap3 = colormap(i / e.width);
-
-            var _colormap4 = _slicedToArray(_colormap3, 3);
-
-            r = _colormap4[0];
-            g = _colormap4[1];
-            b = _colormap4[2];
-            k = 4 * (i + j * e.width);
-            d.data[k + 0] = r;
-            d.data[k + 1] = g;
-            d.data[k + 2] = b;
-            d.data[k + 3] = 255;
-          }
-        }
-
-        ctx.putImageData(d, 0, 0);
-        $("#colorbar-min")[0].textContent = min.toFixed(2);
-        return $("#colorbar-max")[0].textContent = max.toFixed(2);
-      };
-
-      function update(image) {
-        var b, g, max, min, ndvi_jsImg, normalize, r, resultJsImage;
-        $('#colorbar-container')[0].style.display = 'none';
-
-        if (mode === "ndvi") {
-          var _normalize = function _normalize(x) {
-            return (x - min) / (max - min);
-          };
-
-          var _get_channels = get_channels(image);
-
-          var _get_channels2 = _slicedToArray(_get_channels, 3);
-
-          r = _get_channels2[0];
-          g = _get_channels2[1];
-          b = _get_channels2[2];
-          ndvi_jsImg = ndvi(r, b); // this isn't correct for NDVI; we want values from -1 to 1:
-          // [[min],[max]] = ndvi_img.extrema()
-
-          min = -1;
-          max = 1;
-          ;
-          resultJsImage = Colormaps.colorify(ndvi_jsImg, function (x) {
-            return colormap(_normalize(x));
-          });
-          update_colorbar(min, max);
-        } else if (mode === "raw") {
-          resultJsImage = new JsImage(image.data, image.width, image.height, 4);
-        } else if (mode === "nir") {
-          var _get_channels3 = get_channels(image);
-
-          var _get_channels4 = _slicedToArray(_get_channels3, 3);
-
-          r = _get_channels4[0];
-          g = _get_channels4[1];
-          b = _get_channels4[2];
-          resultJsImage = Colormaps.colorify(r, function (x) {
-            return [x, x, x];
-          });
-        } else {
-          resultJsImage = infragrammar(image);
-        }
-
-        return render(resultJsImage);
-      }
-
-      function save_expressions(r, g, b) {
-        if (r === "") {
-          r = "R";
-        }
-
-        if (g === "") {
-          g = "G";
-        }
-
-        if (b === "") {
-          b = "B";
-        }
-
-        eval("r_exp = function(R,G,B){var r=R,g=G,b=B;return " + r + ";}");
-        eval("g_exp = function(R,G,B){var r=R,g=G,b=B;return " + g + ";}");
-        return eval("b_exp = function(R,G,B){var r=R,g=G,b=B;return " + b + ";}");
-      }
-
-      ;
-
-      function save_expressions_hsv(h, s, v) {
-        if (h === "") {
-          h = "H";
-        }
-
-        if (s === "") {
-          s = "S";
-        }
-
-        if (v === "") {
-          v = "V";
-        }
-
-        eval("r_exp = function(R,G,B){var h=H,s=S,v=V,hsv = converters.rgb2hsv(R, G, B), H = hsv[0], S = hsv[1], V = hsv[2]; return converters.hsv2rgb(" + h + "," + s + "," + v + ")[0];}");
-        eval("g_exp = function(R,G,B){var h=H,s=S,v=V,hsv = converters.rgb2hsv(R, G, B), H = hsv[0], S = hsv[1], V = hsv[2]; return converters.hsv2rgb(" + h + "," + s + "," + v + ")[1];}");
-        return eval("b_exp = function(R,G,B){var h=H,s=S,v=V,hsv = converters.rgb2hsv(R, G, B), H = hsv[0], S = hsv[1], V = hsv[2]; return converters.hsv2rgb(" + h + "," + s + "," + v + ")[2];}");
-      }
-
-      function getImageData() {
-        var ctx = $('#image')[0].getContext("2d"); // risks being circular def of width/height
-
-        var width = $('#image').width();
-        var height = $('#image').height(); // this now just defaults to file-scoped 'image' which we want to avoid
-
-        return image || ctx.getImageData(0, 0, width, height);
-      }
-
-      function getJsImage() {
-        var imageData = getImageData();
-        return new JsImage(imageData.data, imageData.width, imageData.height, 1);
-      }
-
-      function set_mode(new_mode) {
-        mode = new_mode;
-        update(getImageData());
-
-        if (mode === "ndvi") {
-          // TODO: move this into interface code:
-          return $("#colormaps-group")[0].style.display = "inline-block";
-        } else {
-          if ($("#colormaps-group").length > 0) {
-            return $("#colormaps-group")[0].style.display = "none";
-          }
-        }
-      } // img should be a native JavaScript image obj
-
-
-      function updateImage(img) {
-        var ctx, height, imgCanvas, width;
-        imgCanvas = document.getElementById("image");
-        ctx = imgCanvas.getContext("2d");
-        width = img.videoWidth || img.width;
-        height = img.videoHeight || img.height;
-        ctx.drawImage(img, 0, 0, width, height, 0, 0, imgCanvas.width, imgCanvas.height);
-        image = ctx.getImageData(0, 0, imgCanvas.width, imgCanvas.height);
-        return set_mode(mode);
-      }
-
-      function run(mode) {
-        return set_mode(mode);
-      }
-
-      function getCurrentImage() {
-        var ctx, e;
-        e = $("#image")[0];
-        ctx = e.getContext("2d");
-        return ctx.canvas.toDataURL("image/jpeg");
-      }
-
-      return {
-        type: 'javascript',
-        colormap: colormap,
-        getCurrentImage: getCurrentImage,
-        getImageData: getImageData,
-        getJsImage: getJsImage,
-        infragrammar_mono: infragrammar_mono,
-        infragrammar: infragrammar,
-        render: render,
-        run: run,
-        save_expressions: save_expressions,
-        save_expressions_hsv: save_expressions_hsv,
-        update: update,
-        updateImage: updateImage,
-        colorize: colorize,
-        initialize: function initialize() {}
-      };
-    };
-  }, {
-    "../color/colormaps": 5,
-    "../color/converters": 6,
-    "../util/JsImage.js": 17
-  }],
-  11: [function (require, module, exports) {
-    // Generated by CoffeeScript 2.1.0
-    // This file was adapted from infragram-js:
-    // http://github.com/p-v-o-s/infragram-js.
-    module.exports = function webglProcessor(options) {
-      var imgContext = null,
-          mapContext = null,
-          inputImage,
-          // the pre-processed image
-      vertices = [-1.0, -1.0, -1.0, 1.0, 1.0, -1.0, 1.0, 1.0],
-          waitForShadersToLoad = 0,
-          webglUtils = require('../util/webgl-utils')(),
-          colorized = false,
-          // TODO: we should refactor this to use colormaps in /src/color/;
-      // we could build the dist/shader.frag file automatically around these
-      // using the function now at /src/color/colormapFunctionGenerator.js
-      // ... we need to either use integer indices for colormap, 
-      // OR switch the system to strings and use the colormap names
-      colormaps = {
-        default: 0,
-        stretched: 2,
-        grey: 1
-      },
-          colormap = colormaps.default;
-
-      vertices.itemSize = 2;
-
-      function initialize(options) {
-        console.log(options, 'webgl');
-        options = options || {};
-        options.shaderVertPath = options.shaderVertPath || "dist/shader.vert";
-        options.shaderFragPath = options.shaderFragPath || "dist/shader.frag";
-
-        options.shadersLoadedCallback = options.shadersLoadedCallback || function () {
-          console.log('shaders loaded');
-        };
-
-        imgContext = createContext("raw", 1, 0, 1.0, "image");
-        mapContext = createContext("raw", 1, 1, 1.0, "colorbar");
-        decolorize();
-        waitForShadersToLoad = 2;
-        $("#shader-vs").load(options.shaderVertPath, glShaderLoaded);
-        $("#shader-fs-template").load(options.shaderFragPath, glShaderLoaded);
-
-        if (imgContext && mapContext) {
-          return true;
-        } else {
-          return false;
-        }
-      }
-
-      ;
-
-      function colorize(val) {
-        if (val === "hsv") run('hsv');else {
-          val = val || colormap;
-          colormap = val;
-          console.log('colorize:' + val);
-          if (typeof val === 'string') val = colormaps[val];
-          imgContext.selColormap = mapContext.selColormap = val;
-          colorized = true;
-        }
-      }
-
-      function decolorize() {
-        colorized = false;
-      }
-
-      function createBuffer(ctx, data) {
-        var buffer, gl;
-        gl = ctx.gl;
-        buffer = gl.createBuffer();
-        gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
-        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(data), gl.STATIC_DRAW);
-        buffer.itemSize = data.itemSize;
-        return buffer;
-      }
-
-      ;
-
-      function createTexture(ctx, textureUnit) {
-        var gl, texture;
-        gl = ctx.gl;
-        texture = gl.createTexture();
-        gl.activeTexture(textureUnit);
-        gl.bindTexture(gl.TEXTURE_2D, texture);
-        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
-        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, ctx.canvas.width, ctx.canvas.height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
-        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
-        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
-        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
-        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
-        return texture;
-      }
-
-      ;
-
-      function createContext(mode, selColormap, colormap, slider, canvasName) {
-        var ctx;
-        ctx = new Object();
-        ctx.mode = mode;
-        ctx.expression = ["", "", ""];
-        ctx.selColormap = selColormap;
-        ctx.colormap = colormap;
-        ctx.slider = slider;
-        ctx.updateShader = true;
-        ctx.canvas = document.getElementById(canvasName);
-        ctx.canvas.addEventListener("webglcontextlost", function (event) {
-          return event.preventDefault();
-        }, false);
-        ctx.canvas.addEventListener("webglcontextrestored", glRestoreContext, false);
-        ctx.gl = webglUtils.getWebGLContext(ctx.canvas);
-
-        if (ctx.gl) {
-          ctx.gl.getExtension("OES_texture_float");
-          ctx.vertexBuffer = createBuffer(ctx, vertices);
-          ctx.framebuffer = ctx.gl.createFramebuffer();
-          ctx.imageTexture = createTexture(ctx, ctx.gl.TEXTURE0);
-          return ctx;
-        } else {
-          return null;
-        }
-      }
-
-      ;
-
-      function drawScene(ctx, returnImage) {
-        var gl, pColormap, pHsvUniform, pColorizedUniform, pSampler, pSelColormapUniform, pSliderUniform, pVertexPosition;
-
-        if (!returnImage) {
-          window.requestAnimationFrame(function () {
-            return drawScene(ctx, false);
-          });
-        }
-
-        if (ctx.updateShader) {
-          ctx.updateShader = false;
-          ctx.shaderProgram = generateShader(ctx);
-        }
-
-        gl = ctx.gl;
-        gl.viewport(0, 0, ctx.canvas.width, ctx.canvas.height);
-        gl.useProgram(ctx.shaderProgram);
-        gl.bindBuffer(gl.ARRAY_BUFFER, ctx.vertexBuffer);
-        pVertexPosition = gl.getAttribLocation(ctx.shaderProgram, "aVertexPosition");
-        gl.enableVertexAttribArray(pVertexPosition);
-        gl.vertexAttribPointer(pVertexPosition, ctx.vertexBuffer.itemSize, gl.FLOAT, false, 0, 0);
-        pSampler = gl.getUniformLocation(ctx.shaderProgram, "uSampler");
-        gl.uniform1i(pSampler, 0);
-        pSliderUniform = gl.getUniformLocation(ctx.shaderProgram, "uSlider");
-        gl.uniform1f(pSliderUniform, ctx.slider);
-        pColorizedUniform = gl.getUniformLocation(ctx.shaderProgram, "uColorized");
-        gl.uniform1i(pColorizedUniform, colorized || ctx.colormap ? 1 : 0);
-        pSelColormapUniform = gl.getUniformLocation(ctx.shaderProgram, "uSelectColormap");
-        gl.uniform1i(pSelColormapUniform, ctx.selColormap);
-        pHsvUniform = gl.getUniformLocation(ctx.shaderProgram, "uHsv");
-        gl.uniform1i(pHsvUniform, ctx.mode === "hsv" ? 1 : 0);
-        pColormap = gl.getUniformLocation(ctx.shaderProgram, "uColormap");
-        gl.uniform1i(pColormap, ctx.colormap ? 1 : 0);
-        gl.drawArrays(gl.TRIANGLE_STRIP, 0, vertices.length / vertices.itemSize);
-        if (returnImage) return ctx.canvas.toDataURL("image/jpeg");
-      }
-
-      ;
-
-      function generateShader(ctx) {
-        var b, code, g, r;
-
-        var _ctx$expression = _slicedToArray(ctx.expression, 3);
-
-        r = _ctx$expression[0];
-        g = _ctx$expression[1];
-        b = _ctx$expression[2];
-        // Map HSV to shader variable names
-        r = r.toLowerCase().replace(/h/g, "r").replace(/s/g, "g").replace(/v/g, "b");
-        g = g.toLowerCase().replace(/h/g, "r").replace(/s/g, "g").replace(/v/g, "b");
-        b = b.toLowerCase().replace(/h/g, "r").replace(/s/g, "g").replace(/v/g, "b"); // Sanitize strings
-
-        r = r.replace(/[^xrgb\/\-\+\*\(\)\.0-9]*/g, "");
-        g = g.replace(/[^xrgb\/\-\+\*\(\)\.0-9]*/g, "");
-        b = b.replace(/[^xrgb\/\-\+\*\(\)\.0-9]*/g, ""); // Convert int to float if no decimals are present
-
-        if (!r.includes('.')) r = r.replace(/([0-9])([^\.])?/g, "$1.0$2");
-        if (!g.includes('.')) g = g.replace(/([0-9])([^\.])?/g, "$1.0$2");
-        if (!b.includes('.')) b = b.replace(/([0-9])([^\.])?/g, "$1.0$2"); // adjust NDVI range
-
-        if (ctx.mode === "ndvi") {
-          if (r !== "") {
-            r = "((" + r + ") + 1.0) / 2.0";
-          }
-
-          if (g !== "") {
-            g = "((" + g + ") + 1.0) / 2.0";
-          }
-
-          if (b !== "") {
-            b = "((" + b + ") + 1.0) / 2.0";
-          }
-        }
-
-        if (r === "") {
-          r = "r";
-        }
-
-        if (g === "") {
-          g = "g";
-        }
-
-        if (b === "") {
-          b = "b";
-        }
-
-        code = $("#shader-fs-template").html();
-        code = code.replace(/@1@/g, r);
-        code = code.replace(/@2@/g, g);
-        code = code.replace(/@3@/g, b);
-        $("#shader-fs").html(code);
-        return webglUtils.createProgramFromScripts(ctx.gl, ["shader-vs", "shader-fs"]);
-      }
-
-      ;
-
-      function setMode(ctx, newMode) {
-        if (ctx.mode != newMode) ctx.updateShader = true;
-        ctx.mode = newMode;
-      }
-
-      ;
-
-      function glShaderLoaded() {
-        waitForShadersToLoad -= 1;
-
-        if (!waitForShadersToLoad) {
-          options.shadersLoadedCallback();
-          drawScene(imgContext);
-          return drawScene(mapContext);
-        }
-      }
-
-      ;
-
-      function glRestoreContext() {
-        var imageData;
-        imageData = imgContext.imageData;
-        imgContext = createContext(imgContext.mode, imgContext.selColormap, imgContext.colormap, imgContext.slider, "image");
-        mapContext = createContext(mapContext.mode, mapContext.selColormap, mapContext.colormap, mapContext.slider, "colorbar");
-
-        if (imgContext && mapContext) {
-          return updateImage(imageData);
-        }
-      }
-
-      ;
-
-      function updateImage(img) {
-        var gl;
-        gl = imgContext.gl;
-        inputImage = img;
-        imgContext.imageData = img;
-        gl.activeTexture(gl.TEXTURE0);
-        return gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img);
-      }
-
-      ;
-
-      function getInputImage() {
-        function imageToBase64(img) {
-          var canvas = document.createElement('CANVAS');
-          var ctx = canvas.getContext('2d');
-          canvas.height = img.height;
-          canvas.width = img.width;
-          ctx.drawImage(img, 0, 0);
-          var dataURL = canvas.toDataURL('image/png|gif|jpg');
-          canvas = null;
-          return dataURL;
-        }
-
-        return imageToBase64(inputImage);
-      }
-
-      ;
-
-      function getCurrentImage() {
-        return drawScene(imgContext, true);
-      }
-
-      ;
-
-      function getImageData() {
-        return imgContext.imageData;
-      }
-
-      ;
-
-      function saveExpression(a, b, c) {
-        return imgContext.expression = [a, b, c];
-      }
-
-      ;
-
-      function run(mode) {
-        return setMode(imgContext, mode);
-      }
-
-      ;
-      initialize(options);
-      return {
-        type: 'webgl',
-        initialize: initialize,
-        getInputImage: getInputImage,
-        getCurrentImage: getCurrentImage,
-        getImageData: getImageData,
-        run: run,
-        save_expressions: saveExpression,
-        setMode: setMode,
-        updateImage: updateImage,
-        decolorize: decolorize,
-        colorize: colorize,
-        context: imgContext
-      };
-    };
-  }, {
-    "../util/webgl-utils": 18
-  }],
-  12: [function (require, module, exports) {
-    module.exports = function Analysis(options, save_infragrammar_inputs) {
-      // buttons to run Analysis steps
-      $("#infragrammar_hsv").submit(function () {
-        console.log('hsv mode');
-        options.mode = "infragrammar_hsv";
-        options.logger.log_hsv();
-        save_infragrammar_inputs();
-        options.run(options.mode);
-        options.run();
-        return true;
-      });
-      $("#infragrammar").submit(function () {
-        console.log('infragrammar mode');
-        options.mode = "infragrammar";
-        options.logger.log_rgb();
-        save_infragrammar_inputs();
-        options.run(options.mode);
-        options.run();
-        return true;
-      });
-      $("#infragrammar_mono").submit(function () {
-        console.log('infragrammar mono mode');
-        options.mode = "infragrammar_mono";
-        options.logger.log_mono();
-        save_infragrammar_inputs();
-        options.run(options.mode);
-        options.run();
-        return true;
-      });
-    };
-  }, {}],
-  13: [function (require, module, exports) {
-    module.exports = function Colorize(options) {
-      $(".btn-colorize").click(function () {
-        if (options.colorized) {
-          decolorize();
-          options.run(options.mode);
-          return options.processor.decolorize();
-        } else {
-          colorize();
-          options.run(options.mode);
-          return options.colorize();
-        }
-      });
-      $("#default_colormap").click(function () {
-        console.log('default colormap');
-        colorize();
-        options.colorize('default');
-        options.run(options.mode);
-        return $("#btn-colorize").addClass("active");
-      });
-      $("#stretched_colormap").click(function () {
-        console.log('stretched colormap');
-        colorize();
-        options.colorize('stretched');
-        options.run(options.mode);
-        return $("#btn-colorize").addClass("active");
-      }); // duplicated in presets.js
-
-      function colorize() {
-        console.log('colorized on');
-        options.colorized = true;
-        $("#btn-colorize").addClass("active");
-        $("#colorbar-container").css('display', 'inline-block');
-        $("#colormaps-group").css('display', 'inline-block');
-      }
-
-      function decolorize() {
-        console.log('colorized off');
-        options.colorized = false;
-        $("#btn-colorize").removeClass("active");
-        $("#colorbar-container").css('display', 'none');
-        $("#colormaps-group").css('display', 'none');
-      }
-    };
-  }, {}],
-  14: [function (require, module, exports) {
-    module.exports = function Fullscreen(options) {
-      var fullscreen = false;
-      $(".fullscreen").click(function () {
-        if (fullscreen) {
-          $("#image").css("display", "inline");
-          $("#image").css("position", "relative");
-          $("#image").css("height", "auto");
-          $("#image").css("left", 0);
-          $("#backdrop").hide();
-          $(".btn.fullscreen").show();
-          fullscreen = false;
-        } else {
-          $("#image").css("display", "block");
-          $("#image").css("height", "100%");
-          $("#image").css("width", "auto");
-          $("#image").css("position", "absolute");
-          $("#image").css("top", "0px");
-          $("#image").css("left", parseInt((window.innerWidth - $("#image").width()) / 2) + "px");
-          $("#image").css("z-index", "2");
-          $("#backdrop").show();
-          $(".btn.fullscreen").hide();
-          fullscreen = true;
-        }
-
-        return fullscreen;
-      });
-    };
-  }, {}],
-  15: [function (require, module, exports) {
-    module.exports = function Interface(options) {
-      var isVideo = false,
-          isCamera = false;
-      options.imageSelector = options.imageSelector || "#image-container";
-      options.fileSelector = options.fileSelector || "#file-sel";
-
-      var urlHash = require('urlhash')();
-
-      var logger = options.logger;
-
-      var Colormaps = require('../color/colormaps');
-
-      var Fullscreen, Presets, Analysis, Colorize, Saving; // saving inputs/expressions:
-
-      function save_infragrammar_inputs() {
-        options.mode = $('#modeSwitcher').val();
-        return save_infragrammar_expressions({
-          'r': $('#r_exp').val(),
-          'g': $('#g_exp').val(),
-          'b': $('#b_exp').val(),
-          'm': $('#m_exp').val(),
-          'h': $('#h_exp').val(),
-          's': $('#s_exp').val(),
-          'v': $('#v_exp').val()
-        });
-      }
-
-      function save_infragrammar_expressions(args) {
-        console.log(args);
-
-        if (options.mode === "infragrammar") {
-          options.processor.save_expressions(args['r'], args['g'], args['b']);
-        } else if (options.mode === "infragrammar_mono") {
-          options.processor.save_expressions(args['m'], args['m'], args['m']);
-        } else if (options.mode === "infragrammar_hsv") {
-          return options.processor.save_expressions_hsv(args['h'], args['s'], args['v']);
-        }
-      }
-
-      $(document).ready(function () {
-        Fullscreen = require('./fullscreen')(options);
-        Presets = require('../ui/presets')(options, save_infragrammar_inputs);
-        Analysis = require('../ui/analysis')(options, save_infragrammar_inputs);
-        Colorize = require('../ui/colorize')(options);
-        $(options.imageSelector).ready(function () {
-          var src,
-              idNameMap = {
-            "#m_exp": "m",
-            "#r_exp": "r",
-            "#g_exp": "g",
-            "#b_exp": "b",
-            "#h_exp": "h",
-            "#s_exp": "s",
-            "#v_exp": "v"
-          };
-          $("#overlay-slider").val(localStorage.getItem("overlaySize"));
-          console.log('grid ' + localStorage.getItem("overlaySize"));
-          setGrid($("#overlay-slider").val()); // TODO: broken:  
-          //urlHash.setUrlHashParameter(JSON.stringify(idNameMap));
-
-          src = urlHash.getUrlHashParameter('src');
-
-          if (src) {
-            params = parametersObject(location.search.split('?')[1]);
-            options.mode = params['mode'];
-            fetch_image(src);
-          }
-
-          return true;
-        });
-        $(options.fileSelector).change(function () {
-          $('.choose-prompt').hide();
-          $("#save-modal-btn").show();
-          $("#save-zone").show();
-
-          if (options.version == 1) {
-            var reader = new FileReader();
-
-            reader.onload = function onReaderLoad(event) {
-              var img;
-              img = new Image();
-
-              img.onload = function onImageLoad() {
-                options.processor.updateImage(this);
-              };
-
-              return img.src = event.target.result;
-            };
-
-            reader.readAsDataURL(this.files[0]);
-            $('#preset-modal').modal('show');
-          } else {
-            $('.mediaSelect').toggle();
-            $('.videoControls').toggle();
-
-            if (this.files[0].type == 'image/jpeg' || this.files[0].type == 'image/png') {
-              var _reader = new FileReader();
-
-              _reader.onload = function onReaderLoad(event) {
-                var img;
-                img = new Image();
-
-                img.onload = function onImageLoad() {
-                  options.processor.updateImage(this);
-                };
-
-                return img.src = event.target.result;
-              };
-
-              _reader.readAsDataURL(this.files[0]);
-            } else {
-              videoURL = URL.createObjectURL(this.files[0]);
-              activateVideo(videoURL);
-            }
-
-            $('#preset-modal').offcanvas('show');
-            $('#preset-modalMobile').offcanvas('show');
-          }
-
-          return true;
-        });
-        $("#webcam-activate").click(function () {
-          $('.choose-prompt').hide();
-          $("#save-modal-btn").show();
-          $("#save-zone").show();
-          save_infragrammar_inputs();
-          options.video();
-
-          if (options.version == 1) {
-            $('#preset-modal').modal('show');
-          } else {
-            if (isVideo) {
-              $("#localVideo").remove();
-            }
-
-            isVideo = false;
-            isCamera = true;
-            $('#preset-modal').offcanvas('show');
-            $('#preset-modalMobile').offcanvas('show');
-          }
-
-          return true;
-        }); // Procces Uploaded Video File Locally
-
-        function activateVideo(videoURL) {
-          options.processLocalVideo();
-
-          if (isCamera) {
-            localStream.getVideoTracks()[0].stop();
-          }
-
-          isCamera = false;
-          $("#localVideo").remove();
-          localVideo = document.createElement('video');
-          localVideo.setAttribute("id", "localVideo");
-          localVideo.setAttribute("src", videoURL);
-          localVideo.load();
-          localVideo.style.display = "none";
-          localVideo.style.width = "50px";
-          localVideo.style.height = "50px";
-          document.getElementById("video-container").appendChild(localVideo);
-          localVideo.play();
-          localVideo.muted = true;
-          localVideo.loop = true;
-          document.getElementById("localVideoControls").style.display = "block"; //Attach video Element tocustom Sleek Bar
-
-          localVideo.ontimeupdate = function () {
-            var percentage = localVideo.currentTime / localVideo.duration * 100;
-            $("#custom-seekbar span").css("width", percentage + "%");
-          };
-
-          isVideo = true;
-          $('.choose-prompt').hide();
-          $("#save-modal-btn").show();
-          $("#save-zone").show();
-          save_infragrammar_inputs();
-          $('#preset-modal').offcanvas('show');
-          $('#preset-modalMobile').offcanvas('show');
-          return true;
-        } //Start video controls
-
-
-        $("#custom-seekbar").on("click", function (e) {
-          localVideo = document.getElementById('localVideo');
-          var offset = $(this).offset();
-          var left = e.pageX - offset.left;
-          var totalWidth = $("#custom-seekbar").width();
-          var percentage = left / totalWidth;
-          var vidTime = localVideo.duration * percentage;
-          localVideo.currentTime = vidTime;
-        });
-        $("#localVideoPlayPause").on("click", function (e) {
-          localVideo = document.getElementById('localVideo');
-
-          if (localVideo.paused) {
-            localVideo.play();
-            document.getElementById("localVideoPlayPause").innerHTML = '<i class="fa fa-pause"></i>';
-          } else {
-            localVideo.pause();
-            document.getElementById("localVideoPlayPause").innerHTML = '<i class="fa fa-play"></i>';
-          }
-        }); //End video controls
-
-        $("#snapshot").click(function () {
-          options.camera.getSnapshot();
-          return true;
-        });
-        $("#modeSwitcher").change(function () {
-          $("#infragrammar, #infragrammar_mono, #infragrammar_hsv").hide();
-          $("#" + $("#modeSwitcher").val()).css("display", "inline");
-          return true;
-        });
-        $("#overlay-btn").click(function () {
-          $("#overlay-container").toggle();
-          $("#overlay-controls-container").toggle();
-          $("#overlay-btn").toggleClass("btn-success");
-        });
-        $("#overlay-slider").on("input", function () {
-          setGrid($("#overlay-slider").val());
-        });
-
-        function setGrid(size) {
-          var scale = 80,
-              // roughly, not smaller than the viewport
-          ratio = 1250 / 2000; // size of svg
-
-          $("#overlay-img").width(size * scale);
-          $("#overlay-img").height(size * scale * ratio);
-          $("#overlay-size").html(size);
-          console.log('saved grid ' + size);
-        }
-
-        $("#overlay-save-btn").click(function () {
-          localStorage.setItem("overlaySize", $("#overlay-slider").val());
-          $("#overlay-save-info").show().delay(2000).fadeOut();
-        });
-        $("[rel=tooltip]").tooltip();
-        $("[rel=popover]").popover();
-        return true;
-      });
-    };
-  }, {
-    "../color/colormaps": 5,
-    "../ui/analysis": 12,
-    "../ui/colorize": 13,
-    "../ui/presets": 16,
-    "./fullscreen": 14,
-    "urlhash": 1
-  }],
-  16: [function (require, module, exports) {
-    module.exports = function Presets(options, save_infragrammar_inputs) {
-      // preset button
-      $("#preset_raw").click(function () {
-        $('#modeSwitcher').val("infragrammar").change();
-        $('#r_exp').val("R");
-        $('#g_exp').val("G");
-        $('#b_exp').val("B");
-        $('#preset-modal').modal('hide');
-        options.colorized = false;
-        options.processor.decolorize();
-        save_infragrammar_inputs();
-        decolorize();
-        return options.run(options.mode);
-      }); // preset button
-
-      $("#preset_ndvi_blue").click(function () {
-        $('#modeSwitcher').val("infragrammar_mono").change();
-        $('#m_exp').val("(R-B)/(R+B)");
-        $('#preset-modal').modal('hide');
-        options.colorized = false;
-        options.processor.decolorize();
-        save_infragrammar_inputs();
-        decolorize();
-        return options.run(options.mode);
-      }); // preset button
-
-      $("#preset_ndvi_blue_color").click(function () {
-        $('#modeSwitcher').val("infragrammar_mono").change();
-        $('#m_exp').val("(R-B)/(R+B)");
-        $('#preset-modal').modal('hide');
-        save_infragrammar_inputs();
-        options.colorized = true;
-        options.run(options.mode);
-        options.colorize();
-        colorize();
-        return options.run();
-      }); // preset button
-
-      $("#preset_ndvi_red").click(function () {
-        $('#modeSwitcher').val("infragrammar_mono").change();
-        $('#m_exp').val("(B-R)/(B+R)");
-        $('#preset-modal').modal('hide');
-        options.colorized = false;
-        options.processor.decolorize();
-        save_infragrammar_inputs();
-        decolorize();
-        return options.run(options.mode);
-      }); // preset button
-
-      $("#preset_ndvi_red_color").click(function () {
-        $('#modeSwitcher').val("infragrammar_mono").change();
-        $('#m_exp').val("(B-R)/(B+R)");
-        $('#preset-modal').modal('hide');
-        save_infragrammar_inputs();
-        colorize();
-        options.run(options.mode);
-        options.colorize();
-        return options.run();
-      });
-
-      function colorize() {
-        console.log('colorized on');
-        options.colorized = true;
-        $("#btn-colorize").addClass("active");
-        $("#colorbar-container").css('display', 'inline-block');
-        $("#colormaps-group").css('display', 'inline-block');
-      }
-
-      function decolorize() {
-        console.log('colorized off');
-        options.colorized = false;
-        $("#btn-colorize").removeClass("active");
-        $("#colorbar-container").css('display', 'none');
-        $("#colormaps-group").css('display', 'none');
-      }
-    };
-  }, {}],
-  17: [function (require, module, exports) {
-    module.exports =
-    /*#__PURE__*/
-    function () {
-      function JsImage(data1, width1, height1, channels) {
-        _classCallCheck(this, JsImage);
-
-        this.data = data1;
-        this.width = width1;
-        this.height = height1;
-        this.channels = channels;
-      }
-
-      _createClass(JsImage, [{
-        key: "copyToImageData",
-        value: function copyToImageData(imgData) {
-          return imgData.data.set(this.data);
-        }
-      }, {
-        key: "extrema",
-        value: function extrema() {
-          var c, i, j, l, m, maxs, mins, n, ref, ref1;
-          n = this.width * this.height;
-
-          mins = function () {
-            var l, ref, results;
-            results = [];
-
-            for (i = l = 0, ref = this.channels; 0 <= ref ? l < ref : l > ref; i = 0 <= ref ? ++l : --l) {
-              results.push(this.data[i]);
-            }
-
-            return results;
-          }.call(this);
-
-          maxs = function () {
-            var l, ref, results;
-            results = [];
-
-            for (i = l = 0, ref = this.channels; 0 <= ref ? l < ref : l > ref; i = 0 <= ref ? ++l : --l) {
-              results.push(this.data[i]);
-            }
-
-            return results;
-          }.call(this);
-
-          j = 0;
-
-          for (i = l = 0, ref = n; 0 <= ref ? l < ref : l > ref; i = 0 <= ref ? ++l : --l) {
-            for (c = m = 0, ref1 = this.channels; 0 <= ref1 ? m < ref1 : m > ref1; c = 0 <= ref1 ? ++m : --m) {
-              if (this.data[j] > maxs[c]) {
-                maxs[c] = this.data[j];
-              }
-
-              if (this.data[j] < mins[c]) {
-                mins[c] = this.data[j];
-              }
-
-              j++;
-            }
-          }
-
-          return [mins, maxs];
-        }
-      }]);
-
-      return JsImage;
-    }();
-  }, {}],
-  18: [function (require, module, exports) {
-    /*
-     * Copyright 2012, Gregg Tavares.
-     * All rights reserved.
-     *
-     * Redistribution and use in source and binary forms, with or without
-     * modification, are permitted provided that the following conditions are
-     * met:
-     *
-     *     * Redistributions of source code must retain the above copyright
-     * notice, this list of conditions and the following disclaimer.
-     *     * Redistributions in binary form must reproduce the above
-     * copyright notice, this list of conditions and the following disclaimer
-     * in the documentation and/or other materials provided with the
-     * distribution.
-     *     * Neither the name of Gregg Tavares. nor the names of his
-     * contributors may be used to endorse or promote products derived from
-     * this software without specific prior written permission.
-     *
-     * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
-     * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
-     * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
-     * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
-     * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
-     * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
-     * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
-     * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
-     * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
-     * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-     * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
-     */
-    // These funcitions are meant solely to help unclutter the tutorials.
-    // They are not meant as production type functions.
-    // This file was adapted from the above author for Node.js use.
-    module.exports = function webglUtils() {
-      var lastError;
-      /**
-       * Wrapped logging function.
-       * @param {string} msg The message to log.
-       */
-
-      var log = function log(msg) {
-        if (window.console && window.console.log) {
-          window.console.log(msg);
-        }
-      };
-      /**
-       * Wrapped logging function.
-       * @param {string} msg The message to log.
-       */
-
-
-      var error = function error(msg) {
-        if (window.console) {
-          if (window.console.error) {
-            window.console.error(msg);
-          } else if (window.console.log) {
-            window.console.log(msg);
-          }
-        }
-      };
-      /**
-       * Turn off all logging.
-       */
-
-
-      var loggingOff = function loggingOff() {
-        log = function log() {};
-
-        error = function error() {};
-      };
-      /**
-       * Check if the page is embedded.
-       * @return {boolean} True of we are in an iframe
-       */
-
-
-      var isInIFrame = function isInIFrame() {
-        return window != window.top;
-      };
-      /**
-       * Converts a WebGL enum to a string
-       * @param {!WebGLContext} gl The WebGLContext to use.
-       * @param {number} value The enum value.
-       * @return {string} The enum as a string.
-       */
-
-
-      var glEnumToString = function glEnumToString(gl, value) {
-        for (var p in gl) {
-          if (gl[p] == value) {
-            return p;
-          }
-        }
-
-        return "0x" + value.toString(16);
-      };
-      /**
-       * Creates the HTLM for a failure message
-       * @param {string} canvasContainerId id of container of th
-       *        canvas.
-       * @return {string} The html.
-       */
-
-
-      var makeFailHTML = function makeFailHTML(msg) {
-        return '' + '<table style="background-color: #8CE; width: 100%; height: 100%;"><tr>' + '<td align="center">' + '<div style="display: table-cell; vertical-align: middle;">' + '<div style="">' + msg + '</div>' + '</div>' + '</td></tr></table>';
-      };
-      /**
-       * Mesasge for getting a webgl browser
-       * @type {string}
-       */
-
-
-      var GET_A_WEBGL_BROWSER = '' + 'This page requires a browser that supports WebGL.<br/>' + '<a href="http://get.webgl.org">Click here to upgrade your browser.</a>';
-      /**
-       * Mesasge for need better hardware
-       * @type {string}
-       */
-
-      var OTHER_PROBLEM = '' + "It doesn't appear your computer can support WebGL.<br/>" + '<a href="http://get.webgl.org/troubleshooting/">Click here for more information.</a>';
-      /**
-       * Creates a webgl context. If creation fails it will
-       * change the contents of the container of the <canvas>
-       * tag to an error message with the correct links for WebGL.
-       * @param {Element} canvas. The canvas element to create a
-       *     context from.
-       * @param {WebGLContextCreationAttirbutes} opt_attribs Any
-       *     creation attributes you want to pass in.
-       * @return {WebGLRenderingContext} The created context.
-       */
-
-      var setupWebGL = function setupWebGL(canvas, opt_attribs) {
-        function showLink(str) {
-          var container = canvas.parentNode;
-
-          if (container) {
-            container.innerHTML = makeFailHTML(str);
-          }
-        }
-
-        ;
-
-        if (!window.WebGLRenderingContext) {
-          //showLink(GET_A_WEBGL_BROWSER);
-          return null;
-        }
-
-        var context = create3DContext(canvas, opt_attribs);
-
-        if (!context) {//showLink(OTHER_PROBLEM);
-        }
-
-        return context;
-      };
-      /**
-       * Creates a webgl context.
-       * @param {!Canvas} canvas The canvas tag to get context
-       *     from. If one is not passed in one will be created.
-       * @return {!WebGLContext} The created context.
-       */
-
-
-      var create3DContext = function create3DContext(canvas, opt_attribs) {
-        var names = ["webgl", "experimental-webgl"];
-        var context = null;
-
-        for (var ii = 0; ii < names.length; ++ii) {
-          try {
-            context = canvas.getContext(names[ii], opt_attribs);
-          } catch (e) {}
-
-          if (context) {
-            break;
-          }
-        }
-
-        return context;
-      };
-
-      var updateCSSIfInIFrame = function updateCSSIfInIFrame() {
-        if (isInIFrame()) {
-          document.body.className = "iframe";
-        }
-      };
-      /**
-       * Gets a WebGL context.
-       * makes its backing store the size it is displayed.
-       */
-
-
-      var getWebGLContext = function getWebGLContext(canvas, opt_attribs) {
-        if (isInIFrame()) {
-          updateCSSIfInIFrame(); // make the canvas backing store the size it's displayed.
-
-          canvas.width = canvas.clientWidth;
-          canvas.height = canvas.clientHeight;
-        }
-
-        var gl = setupWebGL(canvas, opt_attribs);
-        return gl;
-      };
-      /**
-       * Loads a shader.
-       * @param {!WebGLContext} gl The WebGLContext to use.
-       * @param {string} shaderSource The shader source.
-       * @param {number} shaderType The type of shader.
-       * @param {function(string): void) opt_errorCallback callback for errors.
-       * @return {!WebGLShader} The created shader.
-       */
-
-
-      var loadShader = function loadShader(gl, shaderSource, shaderType, opt_errorCallback) {
-        var errFn = opt_errorCallback || error; // Create the shader object
-
-        var shader = gl.createShader(shaderType); // Load the shader source
-
-        gl.shaderSource(shader, shaderSource); // Compile the shader
-
-        gl.compileShader(shader); // Check the compile status
-
-        var compiled = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
-
-        if (!compiled) {
-          // Something went wrong during compilation; get the error
-          lastError = gl.getShaderInfoLog(shader);
-          errFn("*** Error compiling shader '" + shader + "':" + lastError);
-          gl.deleteShader(shader);
-          return null;
-        }
-
-        return shader;
-      };
-      /**
-       * Creates a program, attaches shaders, binds attrib locations, links the
-       * program and calls useProgram.
-       * @param {!Array.<!WebGLShader>} shaders The shaders to attach
-       * @param {!Array.<string>} opt_attribs The attribs names.
-       * @param {!Array.<number>} opt_locations The locations for the attribs.
-       * @param {function(string): void) opt_errorCallback callback for errors.
-       */
-
-
-      var loadProgram = function loadProgram(gl, shaders, opt_attribs, opt_locations, opt_errorCallback) {
-        var errFn = opt_errorCallback || error;
-        var program = gl.createProgram();
-
-        for (var ii = 0; ii < shaders.length; ++ii) {
-          gl.attachShader(program, shaders[ii]);
-        }
-
-        if (opt_attribs) {
-          for (var ii = 0; ii < opt_attribs.length; ++ii) {
-            gl.bindAttribLocation(program, opt_locations ? opt_locations[ii] : ii, opt_attribs[ii]);
-          }
-        }
-
-        gl.linkProgram(program); // Check the link status
-
-        var linked = gl.getProgramParameter(program, gl.LINK_STATUS);
-
-        if (!linked) {
-          // something went wrong with the link
-          lastError = gl.getProgramInfoLog(program);
-          errFn("Error in program linking:" + lastError);
-          gl.deleteProgram(program);
-          return null;
-        }
-
-        return program;
-      };
-      /**
-       * Loads a shader from a script tag.
-       * @param {!WebGLContext} gl The WebGLContext to use.
-       * @param {string} scriptId The id of the script tag.
-       * @param {number} opt_shaderType The type of shader. If not passed in it will
-       *     be derived from the type of the script tag.
-       * @param {function(string): void) opt_errorCallback callback for errors.
-       * @return {!WebGLShader} The created shader.
-       */
-
-
-      var createShaderFromScript = function createShaderFromScript(gl, scriptId, opt_shaderType, opt_errorCallback) {
-        var shaderSource = "";
-        var shaderType;
-        var shaderScript = document.getElementById(scriptId);
-
-        if (!shaderScript) {
-          throw "*** Error: unknown script element" + scriptId;
-        }
-
-        shaderSource = shaderScript.text;
-
-        if (!opt_shaderType) {
-          if (shaderScript.type == "x-shader/x-vertex") {
-            shaderType = gl.VERTEX_SHADER;
-          } else if (shaderScript.type == "x-shader/x-fragment") {
-            shaderType = gl.FRAGMENT_SHADER;
-          } else if (shaderType != gl.VERTEX_SHADER && shaderType != gl.FRAGMENT_SHADER) {
-            throw "*** Error: unknown shader type";
-            return null;
-          }
-        }
-
-        return loadShader(gl, shaderSource, opt_shaderType ? opt_shaderType : shaderType, opt_errorCallback);
-      };
-
-      var defaultShaderType = ["VERTEX_SHADER", "FRAGMENT_SHADER"];
-      /**
-       * Creates a program from 2 script tags.
-       *
-       * @param {!WebGLContext} gl The WebGLContext to use.
-       * @param {!Array.<string>} shaderScriptIds Array of ids of the
-       *        script tags for the shaders. The first is assumed to
-       *        be the vertex shader, the second the fragment shader.
-       * @param {!Array.<string>} opt_attribs The attribs names.
-       * @param {!Array.<number>} opt_locations The locations for the attribs.
-       * @param {function(string): void) opt_errorCallback callback for errors.
-       * @return {!WebGLProgram} The created program.
-       */
-
-      var createProgramFromScripts = function createProgramFromScripts(gl, shaderScriptIds, opt_attribs, opt_locations, opt_errorCallback) {
-        var shaders = [];
-
-        for (var ii = 0; ii < shaderScriptIds.length; ++ii) {
-          shaders.push(createShaderFromScript(gl, shaderScriptIds[ii], gl[defaultShaderType[ii]], opt_errorCallback));
-        }
-
-        return loadProgram(gl, shaders, opt_attribs, opt_locations, opt_errorCallback);
-      }; // Add your prefix here.
-
-
-      var browserPrefixes = ["", "MOZ_", "OP_", "WEBKIT_"];
-      /**
-       * Given an extension name like WEBGL_compressed_texture_s3tc
-       * returns the supported version extension, like
-       * WEBKIT_WEBGL_compressed_teture_s3tc
-       * @param {string} name Name of extension to look for
-       * @return {WebGLExtension} The extension or undefined if not
-       *     found.
-       */
-
-      var getExtensionWithKnownPrefixes = function getExtensionWithKnownPrefixes(gl, name) {
-        for (var ii = 0; ii < browserPrefixes.length; ++ii) {
-          var prefixedName = browserPrefixes[ii] + name;
-          var ext = gl.getExtension(prefixedName);
-
-          if (ext) {
-            return ext;
-          }
-        }
-      };
-      /**
-       * Resize a canvas to match the size it's displayed.
-       * @param {!Canvas} canvas The canvas to resize.
-       */
-
-
-      var resizeCanvasToDisplaySize = function resizeCanvasToDisplaySize(canvas) {
-        if (canvas.width != canvas.clientWidth || canvas.height != canvas.clientHeight) {
-          canvas.width = canvas.clientWidth;
-          canvas.height = canvas.clientHeight;
-        }
-      };
-      /**
-       * Provides requestAnimationFrame in a cross browser way.
-       */
-
-
-      var requestAnimFrame = function () {
-        return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (
-        /* function FrameRequestCallback */
-        callback,
-        /* DOMElement Element */
-        element) {
-          return window.setTimeout(callback, 1000 / 60);
-        };
-      }();
-      /**
-       * Provides cancelRequestAnimationFrame in a cross browser way.
-       */
-
-
-      var cancelRequestAnimFrame = function () {
-        return window.cancelCancelRequestAnimationFrame || window.webkitCancelRequestAnimationFrame || window.mozCancelRequestAnimationFrame || window.oCancelRequestAnimationFrame || window.msCancelRequestAnimationFrame || window.clearTimeout;
-      }();
-
-      return {
-        createProgram: loadProgram,
-        createProgramFromScripts: createProgramFromScripts,
-        createShaderFromScriptElement: createShaderFromScript,
-        getWebGLContext: getWebGLContext,
-        updateCSSIfInIFrame: updateCSSIfInIFrame,
-        getExtensionWithKnownPrefixes: getExtensionWithKnownPrefixes,
-        resizeCanvasToDisplaySize: resizeCanvasToDisplaySize,
-        requestAnimFrame: requestAnimFrame,
-        cancelRequestAnimFrame: cancelRequestAnimFrame
-      };
-    };
-  }, {}]
-}, {}, [2]);
-//# sourceMappingURL=infragram.js.map

From c7a9b77366e1d40fad88ecfabfb3d20d9d2fc0de Mon Sep 17 00:00:00 2001
From: FORCHA <forchapearl1@gmail.com>
Date: Sat, 13 Aug 2022 09:46:34 +0100
Subject: [PATCH 03/11] Canvas recording and Resolution Change

---
 dist/infragram.js | 70 +++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 70 insertions(+)

diff --git a/dist/infragram.js b/dist/infragram.js
index f6823d13..96724f0c 100644
--- a/dist/infragram.js
+++ b/dist/infragram.js
@@ -1646,6 +1646,8 @@ function _slicedToArray(arr, i) { if (Array.isArray(arr)) { return arr; } else i
 
             isVideo = false;
             isCamera = true;
+            $('.mediaSelect').toggle();
+            $('.videoControls').toggle();
             $('#preset-modal').offcanvas('show');
             $('#preset-modalMobile').offcanvas('show');
           }
@@ -1748,7 +1750,75 @@ function _slicedToArray(arr, i) { if (Array.isArray(arr)) { return arr; } else i
         $("[rel=tooltip]").tooltip();
         $("[rel=popover]").popover();
         return true;
+      }); //Start Handle multiple webcam resolutions
+
+      function changeResolution(w, h) {
+        document.getElementById('image').setAttribute("width", w);
+        document.getElementById('image').setAttribute("height", h);
+      }
+
+      $('#qvga').click(function (e) {
+        changeResolution('100px', '100px');
+      });
+      $('#vga').click(function (e) {
+        changeResolution('800px', '600px');
+      });
+      $('#hd').click(function (e) {
+        changeResolution('2400px', '1800px');
+      });
+      $('#full-hd').click(function (e) {
+        changeResolution('6000px', '4000px');
+      }); //End Handling of Multiple webcam resolutions
+      //Start Canvas Recording and Download
+
+      var canvas = document.getElementById('image');
+      var ctx = canvas.getContext('2d');
+      var x = 0;
+      var stream = canvas.captureStream(); // grab our canvas MediaStream
+
+      var rec = new MediaRecorder(stream);
+
+      function exportVid(blob) {
+        var vid = document.createElement('video');
+        vid.src = URL.createObjectURL(blob);
+        vid.controls = true;
+        vid.style.display = 'none';
+        document.body.appendChild(vid);
+        var a = document.createElement('a');
+        a.style.display = 'none';
+        a.href = vid.src;
+        a.download = 'infragramVideo.mp4';
+        document.body.appendChild(a);
+        a.click();
+        setTimeout(function () {
+          document.body.removeChild(a);
+          URL.revokeObjectURL(vid.src);
+        }, 100);
+      }
+
+      $('#startRecord').click(function (e) {
+        var chunks = [];
+
+        rec.ondataavailable = function (e) {
+          return chunks.push(e.data);
+        };
+
+        rec.onstop = function (e) {
+          return exportVid(new Blob(chunks, {
+            type: 'video/h264'
+          }));
+        };
+
+        rec.start();
+        document.getElementById('startRecord').style.display = 'none';
+        document.getElementById('stopRecord').style.display = 'block';
       });
+      $('#stopRecord').click(function (e) {
+        rec.stop();
+        document.getElementById('stopRecord').style.display = 'none';
+        document.getElementById('startRecord').style.display = 'block';
+        document.getElementById('downloadButton').style.display = 'block';
+      }); //End Canvas Recording and Download
     };
   }, {
     "../color/colormaps": 5,

From 48f3780418d135ae38e95f0df20d17e828d63adc Mon Sep 17 00:00:00 2001
From: FORCHA <forchapearl1@gmail.com>
Date: Wed, 17 Aug 2022 01:43:42 +0100
Subject: [PATCH 04/11] used standard definition of HD

used standard definition of HD
---
 src/ui/interface.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/ui/interface.js b/src/ui/interface.js
index 8f12abb3..82ef0b30 100644
--- a/src/ui/interface.js
+++ b/src/ui/interface.js
@@ -243,10 +243,10 @@ module.exports = function Interface(options) {
     changeResolution('800px','600px')
   });
   $('#hd').click(function(e){
-    changeResolution('2400px','1800px')
+    changeResolution('1920px','1080px')
   })
   $('#full-hd').click(function(e){
-    changeResolution('6000px','4000px')
+    changeResolution('7680px','4320px')
   });
   //End Handling of Multiple webcam resolutions
 

From 8bb68dd67c6128cb75e773fc438d40c50b37ce4b Mon Sep 17 00:00:00 2001
From: FORCHA <forchapearl1@gmail.com>
Date: Wed, 17 Aug 2022 01:45:52 +0100
Subject: [PATCH 05/11] used standard definition of HD

used standard definition of HD
---
 dist/infragram.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/dist/infragram.js b/dist/infragram.js
index 96724f0c..c2c8b0c7 100644
--- a/dist/infragram.js
+++ b/dist/infragram.js
@@ -1764,10 +1764,10 @@ function _slicedToArray(arr, i) { if (Array.isArray(arr)) { return arr; } else i
         changeResolution('800px', '600px');
       });
       $('#hd').click(function (e) {
-        changeResolution('2400px', '1800px');
+        changeResolution('1920px', '1080px');
       });
       $('#full-hd').click(function (e) {
-        changeResolution('6000px', '4000px');
+        changeResolution('7680px', '4320px');
       }); //End Handling of Multiple webcam resolutions
       //Start Canvas Recording and Download
 

From e750bc06c253d5858156c66f2d4f28d7c343f073 Mon Sep 17 00:00:00 2001
From: FORCHA <forchapearl1@gmail.com>
Date: Wed, 17 Aug 2022 13:15:01 +0100
Subject: [PATCH 06/11] Included boolean variables

Included boolean variables
---
 src/ui/interface.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/ui/interface.js b/src/ui/interface.js
index 82ef0b30..75565951 100644
--- a/src/ui/interface.js
+++ b/src/ui/interface.js
@@ -1,5 +1,7 @@
 module.exports = function Interface(options) {
 
+  var isVideo = false, isCamera=false; var isOnCam;
+  
   options.imageSelector = options.imageSelector || "#image-container";
   options.fileSelector = options.fileSelector || "#file-sel";
 

From 4628b59b1f715ebfc697e610b61802bd370e21b8 Mon Sep 17 00:00:00 2001
From: FORCHA <forchapearl1@gmail.com>
Date: Wed, 17 Aug 2022 13:17:35 +0100
Subject: [PATCH 07/11] Added comment on Resolution handle

---
 src/ui/interface.js | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/ui/interface.js b/src/ui/interface.js
index 75565951..52077e8f 100644
--- a/src/ui/interface.js
+++ b/src/ui/interface.js
@@ -252,7 +252,7 @@ module.exports = function Interface(options) {
   });
   //End Handling of Multiple webcam resolutions
 
-  //Start Canvas Recording and Download
+  //Start Handle multiple Canvas Texure(Video/Image/Webcam) resolutions and Downloads
 
   const canvas = document.getElementById('image');
   const ctx = canvas.getContext('2d');
@@ -293,6 +293,5 @@ module.exports = function Interface(options) {
     document.getElementById('downloadButton').style.display='block'; 
   })
 
-  //End Canvas Recording and Download  
-
+  //Start Handle multiple Canvas Texure(Video/Image/Webcam) resolutions and Downloads
 }

From f656b1f3a7114a30ffef208bf6204bd11c815a89 Mon Sep 17 00:00:00 2001
From: FORCHA <forchapearl1@gmail.com>
Date: Wed, 17 Aug 2022 13:19:49 +0100
Subject: [PATCH 08/11] Changed Icon color while recording

Changed Icon color while recording
---
 dist/infragram2.css | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/dist/infragram2.css b/dist/infragram2.css
index c70a88fb..a37ed6fa 100644
--- a/dist/infragram2.css
+++ b/dist/infragram2.css
@@ -525,3 +525,5 @@
       margin-bottom: 1.5rem;
     }
   }
+
+*.fa-circle {color: red}

From 6112ffd0e901aaa0edc6f64d773cea7090b6a286 Mon Sep 17 00:00:00 2001
From: FORCHA <forchapearl1@gmail.com>
Date: Wed, 17 Aug 2022 13:22:59 +0100
Subject: [PATCH 09/11] Changed icons for recording control

Changed icons for recording control
---
 index2.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/index2.html b/index2.html
index f3a096c6..dc74e322 100644
--- a/index2.html
+++ b/index2.html
@@ -98,10 +98,10 @@ <h1 style="font-size:1.5rem;line-height:3.1rem;letter-spacing:0.09rem;margin-bot
             </div>
           </div>
           <div class="btn-group" role="group" aria-label="Third group" id="startRecord" style="display:block">
-            <a role="button" type="button" class="btn btn-dark" ><i class="fa fa-circle" data-bs-toggle="tooltip" data-placement="bottom"></i></a>
+            <a role="button" type="button" class="btn btn-dark" ><i class="fa fa-dot-circle-o" data-bs-toggle="tooltip" data-placement="bottom"></i></a>
           </div>
           <div class="btn-group" role="group" aria-label="Third group" id="stopRecord" id="startRecord" style="display:none">
-            <a role="button" type="button" class="btn btn-dark"><i class="fa fa-pause" data-bs-toggle="tooltip" data-placement="bottom"></i></a>
+            <a role="button" type="button" class="btn btn-dark"><i class="fa fa-circle" data-bs-toggle="tooltip" data-placement="bottom"></i></a>
           </div>
           <div class="btn-group" role="group">
             <a onClick="toggleToolbar()" role="button" type="button" class="btn btn-dark"><i class="fa fa-window-close" data-bs-toggle="tooltip" data-placement="bottom"></i></a>

From 5d8b7d86afb3886a5008e74c95d62bee53d3c3ac Mon Sep 17 00:00:00 2001
From: FORCHA <forchapearl1@gmail.com>
Date: Wed, 17 Aug 2022 14:48:14 +0100
Subject: [PATCH 10/11] used requested indentation on boolean variables

used requested indentation on boolean variables
---
 src/ui/interface.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/ui/interface.js b/src/ui/interface.js
index 52077e8f..571e859d 100644
--- a/src/ui/interface.js
+++ b/src/ui/interface.js
@@ -1,6 +1,7 @@
 module.exports = function Interface(options) {
 
-  var isVideo = false, isCamera=false; var isOnCam;
+  var isVideo = false,
+      isCamera=false;
   
   options.imageSelector = options.imageSelector || "#image-container";
   options.fileSelector = options.fileSelector || "#file-sel";

From a922019e320b61a1ab30fb21e7a68c0d6a7245a7 Mon Sep 17 00:00:00 2001
From: FORCHA <forchapearl1@gmail.com>
Date: Wed, 17 Aug 2022 17:57:49 +0100
Subject: [PATCH 11/11] re-commit

re-commit
---
 src/ui/interface.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/ui/interface.js b/src/ui/interface.js
index 571e859d..e222ce47 100644
--- a/src/ui/interface.js
+++ b/src/ui/interface.js
@@ -1,5 +1,4 @@
 module.exports = function Interface(options) {
-
   var isVideo = false,
       isCamera=false;