Merge branch 'main' into user-prefs

Shorten UI code with new $step method (#710 )
* update dist Signed-off-by: tech4GT <varun.gupta1798@gmail.com> dist update Revert "dist update" This reverts commit 9ee2a987e8f978961656ae8f71f6e6702bbbd30d. * Merge remote-tracking branch 'upstream/main' into main * add dist * add new func * update itermediate * changes * fix gitignore * use scopeQuery * add mapHtmlTypes test * scopeQuery tests added * try something * change * fix stepui test * Remove double quotes * update new code * refactor to spec
2025-12-07 00:40:00 +01:00 · 2019-06-23 15:05:12 +05:30 · 2019-06-21 15:11:10 -04:00 · 2019-06-21 12:15:51 -04:00 · 2019-06-21 10:54:56 -04:00 · 2019-06-18 08:03:01 -04:00
155 changed files with 1508 additions and 1133 deletions
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -17,7 +17,7 @@ module.exports = {
        'indent': ['error',2],
        'linebreak-style': ['error','unix'],
        'quotes': ['error','single'],
-        'semi': ['error','always'],
+        'semi': ['error','always'], //
        'no-undef': 0,
        'no-console': 'off',
        'no-unused-vars': 'off',
@@ -27,6 +27,10 @@ module.exports = {
        'no-mixed-spaces-and-tabs':'off',
        'no-self-assign':'off',
        'no-constant-condition':'off',
-        'no-dupe-keys':'off'
+        'no-dupe-keys':'off',
+        'space-infix-ops': ['error', {'int32Hint': false}], // Enforce spaces around operators 
+        'comma-spacing': ['error', { "before": false, "after": true }], // require spacing after a comma
+        'comma-style': ['error', 'last'], // requires comma after and on the same line
+        'no-trailing-spaces': ['error', { 'skipBlankLines': true }], // Disallows trailing whitespace on end of lines and empty lines
    }
 };
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -15,6 +15,7 @@ Most contribution (we imagine) would be in the form of API-compatible modules, w
 * [Contributing Modules](#contributing-modules)
 * [Info File](#info-file)
 * [Ideas](#Contribution-ideas)
+* [User Preferences](#user-preferences)
 * [Grunt Tasks](#grunt-tasks)
 * [UI Helper Methods](#ui-helper-methods)

@@ -280,6 +281,7 @@ module.exports = function ModuleName(options,UI) {

 The `progressObj` parameter of `draw()` is not consumed unless a custom progress bar needs to be drawn, for which this default spinner should be stopped with `progressObj.stop()` and image-sequencer is informed about the custom progress bar with `progressObj.overrideFlag = true;` following which this object can be overriden with custom progress object.

+
 ### Module example

 See existing module `channel` for an example: https://github.com/publiclab/image-sequencer/blob/main/src/modules/Channel/Module.js
@@ -367,6 +369,45 @@ module.exports =
        }
    });
 ```
+## User Preferences
+The user preferences API can be used for adding, reading, updating and deleting user preferences in the browser using **indexedDB** API.
+* File Path: [/src/ui/userPrefs.js](https://github.com/publiclab/image-sequencer/blob/main/src/ui/userPrefs.js)
+### Usage
+```js
+var userPrefs = require('/path/to/userPrefs')(options);
+if (userPrefs.error) {
+  console.log(error);
+  return;
+}
+
+userPrefs.addPref('user-name', {name: 'user'}, () => {
+  userPrefs.new().getPref('user-name', (pref) => {
+    console.log(pref.name); // user
+    userPrefs.new().deletePref('user-name', () => {console.log('deleted')}) // preference deleted
+    
+  })
+})
+```
+### Return Value
+A new `userPreferenceManager` object is returned by the function.
+###### note: If an error occured or if **indexedDB** is not supported by he browser, the return value will be an object with a string `error` property.
+#### Properties
+The `userPreferenceManager` object has the following properties.
+- `dbName`: Name of the database the user preferences are stored in.
+- `storeName`: The object store in the database where the user preferences are stored.
+#### Options
+The function accepts a single object called `options` as an argument which has the following properties.
+* `dbName`: Name of a custom database. Default is `user-prefs`.
+* `storeName`: Name of a custom objectStore. Default is `user-prefs`.
+#### Methods
+The following methods are available on the returned object.
+* `addPref(prefName, preference, callback)`: Adds a preference with the name `prefName` and value `preference`. `preference` is an object containing any key but `preference`. `callback` is a function executed once a preference as been added.
+* `deletePref(prefName, callback)`: Deletes he preference with the name `prefName` if it exists. `callback` is executed once the preference is deleted.
+* `updatePref(prefName, preference, callback)`: Updates the value of the preference with the name `prefName` to `preference`.
+* `getPref(prefName, callback)`: Gets the preference with the name `prefName`. The value is passed to `callback` which is executed once the preference is fetched. If the requested preference doesn't exist then the value passed to `callback` will be `undefined`.
+* `new()`: Returns a new `userPreferenceManager` object with the same options as before. This function can be used if the original object is to be reused as the `userPreferenceManager` object can only be used once.
+
+

 ## Linting

--- a/README.md
+++ b/README.md
@@ -578,3 +578,24 @@ sequencer2.run();
 This method returns an object which defines the name and inputs of the modules. If a module name (hyphenated) is passed in the method, then only the details of that module are returned.

 The `notify` function takes two parameters `msg` and `id`, former being the message to be displayed on console (in case of CLI and node ) and a HTML component(in browser). The id is optional and is useful for HTML interface to give appropriate IDs.
+
+## Using WebAssembly for heavy pixel processing
+
+Any module which uses the `changePixel` function gets WebAssembly acceleration (`wasm`). Both node and browser code use WebAssembly and the only code which falls back to non-`wasm` code is the [browserified unit tests](https://github.com/publiclab/image-sequencer/blob/main/test/core/sequencer/benchmark.js).
+
+The main advantage we get using `wasm` is blazing fast speed attained in processing pixels for many modules that is very clear from [checking module benchmarks](https://travis-ci.org/publiclab/image-sequencer/jobs/544415673#L1931).
+
+
+The only limitation is that browser and node code for `wasm` had to be written separately, and switched between. This is because in browser we use `fetch` to retrieve the compiled `wasm` program while in node we use the `fs` module, each of which cannot be used in the other's environment.
+
+
+`wasm` mode is enabled by default. If you need to force this mode to be on or off, you can use the `useWasm` option when initializing ImageSequencer:
+
+```js
+let sequencer = ImageSequencer({useWasm:true}) // for wasm mode or simply
+
+let sequencer = ImageSequencer() // also for wasm mode i.e. default mode
+
+let sequencer = ImageSequencer({useWasm:false}) //for non-wasm mode 
+
+```
--- a/dist/manipulation.wasm
+++ b/dist/manipulation.wasm
--- a/examples/demo.js
+++ b/examples/demo.js
@@ -46,7 +46,7 @@ window.onload = function() {
    $(':root').animate({scrollTop: 0});
  }

-  $('#move-up').on('click',topFunction);
+  $('#move-up').on('click', topFunction);


  // UI for each step:
@@ -63,14 +63,14 @@ window.onload = function() {
  }

  var resetSequence = function(){
-    var r=confirm('Do you want to reset the sequence?');
+    var r = confirm('Do you want to reset the sequence?');
    if (r)
      window.location = '/';
  };

  $('#addStep select').on('change', ui.selectNewStepUi);
  $('#addStep #add-step-btn').on('click', ui.addStepUi);
-  $('#resetButton').on('click',resetSequence);
+  $('#resetButton').on('click', resetSequence);

  //Module button radio selection
  $('.radio-group .radio').on('click', function() {
@@ -113,7 +113,7 @@ window.onload = function() {

    var button = event.target;
    button.disabled = true;
-    button.innerHTML='<i class="fa fa-circle-o-notch fa-spin"></i>';
+    button.innerHTML = '<i class="fa fa-circle-o-notch fa-spin"></i>';

    try {
      // Select all images from previous steps
@@ -187,34 +187,34 @@ window.onload = function() {
    onLoad: function onFileReaderLoad(progress) {
      var reader = progress.target;
      var step = sequencer.steps[0];
-      var util= intermediateHtmlStepUi(sequencer);
+      var util = intermediateHtmlStepUi(sequencer);
      step.output.src = reader.result;
      sequencer.run({ index: 0 });
-      if(typeof step.options !=='undefined')
+      if(typeof step.options !== 'undefined')
        step.options.step.imgElement.src = reader.result;
      else
        step.imgElement.src = reader.result;
-      insertPreview.updatePreviews(reader.result,'#addStep');
-      insertPreview.updatePreviews(sequencer.steps[0].imgElement.src,'.insertDiv');
+      insertPreview.updatePreviews(reader.result, '#addStep');
+      insertPreview.updatePreviews(sequencer.steps[0].imgElement.src, '.insertDiv');
    },
    onTakePhoto: function (url) {
      var step = sequencer.steps[0];
      step.output.src = url;
      sequencer.run({ index: 0 });
-      if(typeof step.options !=='undefined')
+      if(typeof step.options !== 'undefined')
        step.options.step.imgElement.src = url;
      else
        step.imgElement.src = url;
-      insertPreview.updatePreviews(url,'#addStep');
-      insertPreview.updatePreviews(sequencer.steps[0].imgElement.src,'.insertDiv');
+      insertPreview.updatePreviews(url, '#addStep');
+      insertPreview.updatePreviews(sequencer.steps[0].imgElement.src, '.insertDiv');
    }
  });

  setupCache();

  if (urlHash.getUrlHashParameter('src')) {
-    insertPreview.updatePreviews(urlHash.getUrlHashParameter('src'),'#addStep');
+    insertPreview.updatePreviews(urlHash.getUrlHashParameter('src'), '#addStep');
  } else {
-    insertPreview.updatePreviews('images/tulips.png','#addStep');
+    insertPreview.updatePreviews('images/tulips.png', '#addStep');
  }
 };
--- a/examples/index.html
+++ b/examples/index.html
@@ -27,6 +27,7 @@
  <script src="../src/ui/prepareDynamic.js"></script>
  <script src="../dist/image-sequencer.js" charset="utf-8"></script>
  <script src="../dist/image-sequencer-ui.js" charset="utf-8"></script>
+  <script src="../node_modules/bootstrap-colorpicker/dist/js/bootstrap-colorpicker.js"></script>
  <!-- for crop module: -->
  <script src="../node_modules/imgareaselect/jquery.imgareaselect.dev.js"></script>
  <script src="../node_modules/gifshot/dist/gifshot.min.js" type="text/javascript"></script>
@@ -41,6 +42,7 @@
 <body>

  <link href="../node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
+  <link href="../node_modules/bootstrap-colorpicker/dist/css/bootstrap-colorpicker.css" rel="stylesheet">

  <link rel="stylesheet" href="demo.css">
  <link href="../node_modules/font-awesome/css/font-awesome.min.css" rel="stylesheet">
--- a/examples/lib/defaultHtmlSequencerUi.js
+++ b/examples/lib/defaultHtmlSequencerUi.js
@@ -8,7 +8,7 @@ function DefaultHtmlSequencerUi(_sequencer, options) {

  function onLoad() {
    importStepsFromUrlHash();
-    if ($('#selectStep').val()==='none')
+    if ($('#selectStep').val() === 'none')
      $(addStepSel + ' #add-step-btn').prop('disabled', true);
    handleSaveSequence();
  }
@@ -73,8 +73,8 @@ function DefaultHtmlSequencerUi(_sequencer, options) {
  }

  function handleSaveSequence(){
-    var stepCount=sequencer.steps.length;
-    if(stepCount<2)
+    var stepCount = sequencer.steps.length;
+    if(stepCount < 2)
      $(' #save-seq').prop('disabled', true);
    else
      $(' #save-seq').prop('disabled', false);
--- a/examples/lib/defaultHtmlStepUi.js
+++ b/examples/lib/defaultHtmlStepUi.js
@@ -8,18 +8,22 @@
 // output values, step information.
 // See documetation for more details.

-var intermediateHtmlStepUi = require('./intermediateHtmlStepUi.js');
-var urlHash = require('./urlHash.js');
-var _ = require('lodash');
-var mapHtmlTypes = require('./mapHtmltypes');
+var intermediateHtmlStepUi = require('./intermediateHtmlStepUi.js'),
+  urlHash = require('./urlHash.js'),
+  _ = require('lodash'),
+  mapHtmlTypes = require('./mapHtmltypes'),
+  scopeQuery = require('./scopeQuery'),
+  $stepAll,
+  $step;

 function DefaultHtmlStepUi(_sequencer, options) {
-  
+
  options = options || {};
  var stepsEl = options.stepsEl || document.querySelector('#steps');
  var selectStepSel = options.selectStepSel = options.selectStepSel || '#selectStep';

  function onSetup(step, stepOptions) {
+
    if (step.options && step.options.description)
      step.description = step.options.description;

@@ -29,8 +33,8 @@ function DefaultHtmlStepUi(_sequencer, options) {
          <div class="panel panel-default">\
            <div class="panel-heading">\
              <div class="trash-container pull-right"></div>\
-              <h3 class="panel-title">' +  
-                '<span class="toggle">' +step.name + ' <span class="caret toggleIcon rotated"></span>\
+              <h3 class="panel-title">' +
+                '<span class="toggle">' + step.name + ' <span class="caret toggleIcon rotated"></span>\
                 <span class="load-spin pull-right" style="display:none;padding:1px 8px;"><i class="fa fa-circle-o-notch fa-spin"></i></span>\
              </h3>\
            </div>\
@@ -67,8 +71,12 @@ function DefaultHtmlStepUi(_sequencer, options) {
    var parser = new DOMParser();
    step.ui = parser.parseFromString(step.ui, 'text/html');
    step.ui = step.ui.querySelector('div.container-fluid');
-    step.linkElements = step.ui.querySelectorAll('a');
-    step.imgElement = step.ui.querySelector('a img.img-thumbnail');
+
+    $step = scopeQuery.scopeSelector(step.ui);
+    $stepAll = scopeQuery.scopeSelectorAll(step.ui);
+
+    step.linkElements = $stepAll('a');
+    step.imgElement = $step('a img.img-thumbnail')[0];

    if (_sequencer.modulesInfo().hasOwnProperty(step.name)) {
      var inputs = _sequencer.modulesInfo(step.name).inputs;
@@ -81,35 +89,52 @@ function DefaultHtmlStepUi(_sequencer, options) {
        var inputDesc = isInput ? mapHtmlTypes(inputs[paramName]) : {};
        if (!isInput) {
          html += '<span class="output"></span>';
-        } else if (inputDesc.type.toLowerCase() == 'select') {
+        }
+        else if (inputDesc.type.toLowerCase() == 'select') {
+
          html += '<select class="form-control target" name="' + paramName + '">';
          for (var option in inputDesc.values) {
            html += '<option>' + inputDesc.values[option] + '</option>';
          }
          html += '</select>';
-        } else {
+        }
+        else {
          let paramVal = step.options[paramName] || inputDesc.default;
-          html =
-            '<input class="form-control target" type="' +
-            inputDesc.type +
-            '" name="' +
-            paramName +
-            '" value="' +
-            paramVal +
-            '" placeholder ="' +
-            (inputDesc.placeholder || '');

-          if (inputDesc.type.toLowerCase() == 'range') {
+          if (inputDesc.id == 'color-picker') { // separate input field for color-picker
            html +=
-              '"min="' +
-              inputDesc.min +
-              '"max="' +
-              inputDesc.max +
-              '"step="' +
-              (inputDesc.step ? inputDesc.step : 1)+ '">' + '<span>' + paramVal + '</span>';
-
+              '<div id="color-picker" class="input-group colorpicker-component">' +
+              '<input class="form-control target" type="' +
+              inputDesc.type +
+              '" name="' +
+              paramName +
+              '" value="' +
+              paramVal + '">' + '<span class="input-group-addon"><i></i></span>' +
+              '</div>';
+          }
+          else { // use this if the the field isn't color-picker
+            html =
+              '<input class="form-control target" type="' +
+              inputDesc.type +
+              '" name="' +
+              paramName +
+              '" value="' +
+              paramVal +
+              '" placeholder ="' +
+              (inputDesc.placeholder || '');
+              
+            if (inputDesc.type.toLowerCase() == 'range') {
+              html +=
+                '"min="' +
+                inputDesc.min +
+                '"max="' +
+                inputDesc.max +
+                '"step="' +
+                (inputDesc.step ? inputDesc.step : 1) + '">' + '<span>' + paramVal + '</span>';
+
+            }
+            else html += '">';
          }
-          else html += '">';
        }

        var div = document.createElement('div');
@@ -127,34 +152,34 @@ function DefaultHtmlStepUi(_sequencer, options) {
          html +
          '\
                         </div>';
-        step.ui.querySelector('div.details').appendChild(div);
+        $step('div.details').append(div);
      }
-      $(step.ui.querySelector('div.panel-footer')).append(
+      $step('div.panel-footer').append(
        '<div class="cal collapse in"><button type="submit" class="btn btn-sm btn-default btn-save" disabled = "true" >Apply</button> <small style="padding-top:2px;">Press apply to see changes</small></div>'
      );
-      $(step.ui.querySelector('div.panel-footer')).prepend(
+      $step('div.panel-footer').prepend(
        '<button class="pull-right btn btn-default btn-sm insert-step" >\
        <span class="insert-text"><i class="fa fa-plus"></i> Insert Step</span><span class="no-insert-text" style="display:none">Close</span></button>\
        <button class="pull-right btn btn-default btn-sm download-btn" style="margin-right:2px" >\
        <i class="fa fa-download"></i>\
        </button>'
-      );  
+      );
    }

    if (step.name != 'load-image') {
-      step.ui
-        .querySelector('div.trash-container')
+      $step('div.trash-container')
        .prepend(
          parser.parseFromString(tools, 'text/html').querySelector('div')
        );
-      $(step.ui.querySelectorAll('.remove')).on('click', function() {notify('Step Removed','remove-notification');});  
-      $(step.ui.querySelectorAll('.insert-step')).on('click', function() { util.insertStep(step.ID); });    
+
+      $stepAll('.remove').on('click', function() {notify('Step Removed', 'remove-notification');});
+      $stepAll('.insert-step').on('click', function() { util.insertStep(step.ID); });
      // Insert the step's UI in the right place
      if (stepOptions.index == _sequencer.steps.length) {
        stepsEl.appendChild(step.ui);
-        $('#steps .step-container:nth-last-child(1) .insert-step').prop('disabled',true);
+        $('#steps .step-container:nth-last-child(1) .insert-step').prop('disabled', true);
        if($('#steps .step-container:nth-last-child(2)'))
-          $('#steps .step-container:nth-last-child(2) .insert-step').prop('disabled',false);
+          $('#steps .step-container:nth-last-child(2) .insert-step').prop('disabled', false);
      } else {
        stepsEl.insertBefore(step.ui, $(stepsEl).children()[stepOptions.index]);
      }
@@ -162,18 +187,19 @@ function DefaultHtmlStepUi(_sequencer, options) {
    else {
      $('#load-image').append(step.ui);
    }
-    $(step.ui.querySelector('.toggle')).on('click', () => {
-      $(step.ui.querySelector('.toggleIcon')).toggleClass('rotated');
-      $(step.ui.querySelectorAll('.cal')).collapse('toggle');
+    $step('.toggle').on('click', () => {
+      $step('.toggleIcon').toggleClass('rotated');
+      $stepAll('.cal').collapse('toggle');
    });
    
    $(step.imgElement).on('mousemove', _.debounce(() => imageHover(step), 150));
    $(step.imgElement).on('click', (e) => {e.preventDefault(); });
+    $stepAll('#color-picker').colorpicker();

    function saveOptions(e) {
      e.preventDefault();
      if (optionsChanged){
-        $(step.ui.querySelector('div.details'))
+        $step('div.details')
          .find('input,select')
          .each(function(i, input) {
            $(input)
@@ -186,7 +212,7 @@ function DefaultHtmlStepUi(_sequencer, options) {
        // modify the url hash
        urlHash.setUrlHashParameter('steps', _sequencer.toString());
        // disable the save button
-        $(step.ui.querySelector('.btn-save')).prop('disabled', true);
+        $step('.btn-save').prop('disabled', true);
        optionsChanged = false;
        changedInputs = 0;
      }
@@ -197,19 +223,19 @@ function DefaultHtmlStepUi(_sequencer, options) {
      changedInputs += hasChangedBefore ? inputChanged ? 0 : -1 : inputChanged ? 1 : 0;
      optionsChanged = changedInputs > 0;

-      $(step.ui.querySelector('.btn-save')).prop('disabled', !optionsChanged);
+      $step('.btn-save').prop('disabled', !optionsChanged);
      return inputChanged;
    }

-    var 
+    var
      changedInputs = 0,
      optionsChanged = false;
-    $(step.ui.querySelector('.input-form')).on('submit', saveOptions);
-    $(step.ui.querySelectorAll('.target')).each(function(i, input) {
+    $step('.input-form').on('submit', saveOptions);
+    $stepAll('.target').each(function(i, input) {
      $(input)
        .data('initValue', $(input).val())
        .data('hasChangedBefore', false)
-        .on('input change' , function() {
+        .on('input change', function() {
          $(this)
            .focus()
            .data('hasChangedBefore',
@@ -230,19 +256,19 @@ function DefaultHtmlStepUi(_sequencer, options) {
  }


-  function onDraw(step) {
-    $(step.ui.querySelector('.load')).show();
-    $(step.ui.querySelector('img')).hide();
-    $(step.ui.querySelectorAll('.load-spin')).show();
+  function onDraw() {
+    $step('.load').show();
+    $step('img').hide();
+    $stepAll('.load-spin').show();
  }

  function onComplete(step) {
-    $(step.ui.querySelector('img')).show();
-    $(step.ui.querySelectorAll('.load-spin')).hide();
-    $(step.ui.querySelector('.load')).hide();
+    $step('img').show();
+    $stepAll('.load-spin').hide();
+    $step('.load').hide();

    step.imgElement.src = (step.name == 'load-image') ? step.output.src : step.output;
-    var imgthumbnail = step.ui.querySelector('.img-thumbnail');
+    var imgthumbnail = $step('.img-thumbnail');
    for (let index = 0; index < step.linkElements.length; index++) {
      if (step.linkElements[index].contains(imgthumbnail))
        step.linkElements[index].href = step.imgElement.src;
@@ -253,7 +279,7 @@ function DefaultHtmlStepUi(_sequencer, options) {
      return output.split('/')[1].split(';')[0];
    }

-    $(step.ui.querySelectorAll('.download-btn')).on('click', () => { 
+    $stepAll('.download-btn').on('click', () => {

      for (let index = 0; index < step.linkElements.length; index++){
        
@@ -276,18 +302,18 @@ function DefaultHtmlStepUi(_sequencer, options) {
      for (var i in inputs) {
        if (step.options[i] !== undefined) {
          if (inputs[i].type.toLowerCase() === 'input')
-            $(step.ui.querySelector('div[name="' + i + '"] input'))
+            $step('div[name="' + i + '"] input')
              .val(step.options[i])
              .data('initValue', step.options[i]);
          if (inputs[i].type.toLowerCase() === 'select')
-            $(step.ui.querySelector('div[name="' + i + '"] select'))
+            $step('div[name="' + i + '"] select')
              .val(step.options[i])
              .data('initValue', step.options[i]);
        }
      }
      for (var i in outputs) {
        if (step[i] !== undefined)
-          $(step.ui.querySelector('div[name="' + i + '"] input'))
+          $step('div[name="' + i + '"] input')
            .val(step[i]);
      }
    }
@@ -297,24 +323,24 @@ function DefaultHtmlStepUi(_sequencer, options) {

    var img = $(step.imgElement);

-    img.mousemove(function(e) { 
+    img.mousemove(function(e) {
      var canvas = document.createElement('canvas');
      canvas.width = img.width();
      canvas.height = img.height();
      var context = canvas.getContext('2d');
-      context.drawImage(this,0,0);
+      context.drawImage(this, 0, 0);

      var offset = $(this).offset();
      var xPos = e.pageX - offset.left;
      var yPos = e.pageY - offset.top;
      var myData = context.getImageData(xPos, yPos, 1, 1);
-      img[0].title = 'rgb: ' +myData.data[0]+','+ myData.data[1]+','+myData.data[2];//+ rgbdata;
-    }); 
+      img[0].title = 'rgb: ' + myData.data[0] + ',' + myData.data[1] + ',' + myData.data[2];//+ rgbdata;
+    });
  }

  function onRemove(step) {
    step.ui.remove();
-    $('#steps .step-container:nth-last-child(1) .insert-step').prop('disabled',true);
+    $('#steps .step-container:nth-last-child(1) .insert-step').prop('disabled', true);
    $('div[class*=imgareaselect-]').remove();
  }

@@ -322,8 +348,8 @@ function DefaultHtmlStepUi(_sequencer, options) {
    return step.imgElement;
  }

-  function notify(msg,id){
-    if ($('#'+id).length == 0) {
+  function notify(msg, id){
+    if ($('#' + id).length == 0) {
      var notification = document.createElement('span');
      notification.innerHTML = ' <i class="fa fa-info-circle" aria-hidden="true"></i> ' + msg ;
      notification.id = id;
@@ -332,7 +358,7 @@ function DefaultHtmlStepUi(_sequencer, options) {
      $('body').append(notification);
    }
  
-    $('#'+id).fadeIn(500).delay(200).fadeOut(500);
+    $('#' + id).fadeIn(500).delay(200).fadeOut(500);
  }
    
  
@@ -341,17 +367,16 @@ function DefaultHtmlStepUi(_sequencer, options) {
    onSetup: onSetup,
    onComplete: onComplete,
    onRemove: onRemove,
-    onDraw: onDraw, 
+    onDraw: onDraw,
    notify: notify,
    imageHover: imageHover
  };
 }

 if(typeof window === 'undefined'){
-  module.exports={
+  module.exports = {
    DefaultHtmlStepUi: DefaultHtmlStepUi
  };
 }

 module.exports = DefaultHtmlStepUi;
-
--- a/examples/lib/insertPreview.js
+++ b/examples/lib/insertPreview.js
@@ -27,7 +27,7 @@ function generatePreview(previewStepName, customValues, path, selector) {
 }

 function updatePreviews(src, selector) {
-  $(selector+' img').remove();
+  $(selector + ' img').remove();

  var previewSequencerSteps = {
    'resize': '125%',
--- a/examples/lib/intermediateHtmlStepUi.js
+++ b/examples/lib/intermediateHtmlStepUi.js
@@ -66,20 +66,20 @@ function IntermediateHtmlStepUi(_sequencer, step, options) {


  function selectNewStepUi() {
-    var insertSelect = $(step.ui.querySelector('.insert-step-select'));
+    var insertSelect = $step('.insert-step-select');
    var m = insertSelect.val();
-    $(step.ui.querySelector('.insertDiv .info')).html(_sequencer.modulesInfo(m).description);
-    $(step.ui.querySelector('.insertDiv .add-step-btn')).prop('disabled', false);
+    $step('.insertDiv .info').html(_sequencer.modulesInfo(m).description);
+    $step('.insertDiv .add-step-btn').prop('disabled', false);
  }
    
    
  var toggleDiv = function(callback = function(){}){
-    $(step.ui.querySelector('.insertDiv')).collapse('toggle');
-    if ($(step.ui.querySelector('.insert-text')).css('display') != 'none'){
-      $(step.ui.querySelector('.insert-text')).fadeToggle(200, function(){$(step.ui.querySelector('.no-insert-text')).fadeToggle(200, callback);});
+    $step('.insertDiv').collapse('toggle');
+    if ($step('.insert-text').css('display') != 'none'){
+      $step('.insert-text').fadeToggle(200, function(){$step('.no-insert-text').fadeToggle(200, callback)});
    }
    else {
-      $(step.ui.querySelector('.no-insert-text')).fadeToggle(200, function(){$(step.ui.querySelector('.insert-text')).fadeToggle(200, callback);});
+      $step('.no-insert-text').fadeToggle(200, function(){$step('.insert-text').fadeToggle(200, callback)});
    }
  };

@@ -89,7 +89,7 @@ function IntermediateHtmlStepUi(_sequencer, step, options) {
    var addStepUI = stepUI();
    addStepUI = parser.parseFromString(addStepUI, 'text/html').querySelector('div');

-    if ($(step.ui.querySelector('.insertDiv')).length > 0){
+    if ($step('.insertDiv').length > 0){
      toggleDiv();
    }
    else {
@@ -103,9 +103,9 @@ function IntermediateHtmlStepUi(_sequencer, step, options) {
      });
    }

-    $(step.ui.querySelector('.insertDiv .close-insert-box')).off('click').on('click', function(){toggleDiv(function(){});});
+    $step('.insertDiv .close-insert-box').off('click').on('click', function(){toggleDiv(function(){})});
    
-    var insertStepSelect = $(step.ui.querySelector('.insert-step-select'));
+    var insertStepSelect = $step('.insert-step-select');
    insertStepSelect.html('');
    // Add modules to the insertStep dropdown
    for (var m in modulesInfo) {
@@ -117,26 +117,26 @@ function IntermediateHtmlStepUi(_sequencer, step, options) {
    insertStepSelect.selectize({
      sortField: 'text'
    });
-    $(step.ui.querySelector('.inserDiv .add-step-btn')).prop('disabled', true);
+    $step('.inserDiv .add-step-btn').prop('disabled', true);
    
    insertStepSelect.append('<option value="" disabled selected>Select a Module</option>');
-    $(step.ui.querySelector('.insertDiv .radio-group .radio')).on('click', function () {
+    $step('.insertDiv .radio-group .radio').on('click', function () {
      $(this).parent().find('.radio').removeClass('selected');
      $(this).addClass('selected');
      newStep = $(this).attr('data-value');
-      $(step.ui.querySelector('.insert-step-select')).val(newStep);
+      $step('.insert-step-select').val(newStep);
      selectNewStepUi();
      insert(id);
      $(this).removeClass('selected');
    });
    insertStepSelect.on('change', selectNewStepUi);
-    $(step.ui.querySelector('.insertDiv .add-step-btn')).on('click', function () { insert(id); });
-  };
+    $step('.insertDiv .add-step-btn').on('click', function () { insert(id) });
+  }

  function insert(id) {

    options = options || {};
-    var insertStepSelect = $(step.ui.querySelector('.insert-step-select'));
+    var insertStepSelect = $step('.insert-step-select');
    if (insertStepSelect.val() == 'none') return;

    var newStepName = insertStepSelect.val();
--- a/examples/lib/scopeQuery.js
+++ b/examples/lib/scopeQuery.js
@@ -0,0 +1,60 @@
+/**
+ * @method $scope
+ * @param {"DOMNode"} scope A DOM Node as the scope 
+ */
+function $scope(scope) {
+  return function(queryString){
+    var element = $(scope.querySelector(queryString));
+
+    element.elem = function(queryString){
+      return new $scope(scope)(queryString);
+    }
+    element.elemAll = function(queryString){
+      return new $scopeAll(scope)(queryString);
+    }
+
+    return element;
+  }
+}
+
+/**
+ * @method $scopeAll
+ * @param {"DOMNode"} scope A DOM Node as the scope 
+ */
+function $scopeAll(scope){
+  return function(queryString){
+    var element = $(scope.querySelectorAll(queryString));
+
+    element.elem = function(queryString){
+      return new $scope(scope)(queryString);
+    }
+    element.elemAll = function(queryString){
+      return new $scopeAll(scope)(queryString);
+    }
+
+    return element;
+  }
+}
+
+/**
+ * @method scopeSelector
+ * @description A scoped jQuery selector
+ * @param {"DOMNode"} scope DOM Node as the scope 
+ */
+function scopeSelector(scope){
+  return $scope(scope);
+}
+
+/**
+ * @method scopeSelectorAll
+ * @description A scoped jQuery multiple selector
+ * @param {"DOMNode} scope DOM Node as the scope 
+ */
+function scopeSelectorAll(scope){
+  return $scopeAll(scope);
+}
+
+module.exports = {
+  scopeSelector,
+  scopeSelectorAll
+}
--- a/examples/sw.js
+++ b/examples/sw.js
@@ -17,7 +17,7 @@ self.addEventListener('activate', function(e) {
        })
      );
    })
-  );      
+  );
 });

 self.addEventListener('fetch', function(event) {
--- a/index.js
+++ b/index.js
@@ -1,7 +1,7 @@
 #!/usr/bin/env node

 require('./src/ImageSequencer');
-sequencer = ImageSequencer({ ui: false });
+sequencer = ImageSequencer({ ui: true });
 var fs = require('fs');
 var program = require('commander');
 var utils = require('./src/CliUtils');
@@ -61,7 +61,7 @@ else {
      }
    },
    notify: function(msg) {
-      console.log('\x1b[36m%s\x1b[0m','🌟  '+msg);
+      console.log('\x1b[36m%s\x1b[0m', '🌟  ' + msg);
    }
  });

--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
  "name": "image-sequencer",
-  "version": "3.3.5",
+  "version": "3.4.5",
  "lockfileVersion": 1,
  "requires": true,
  "dependencies": {
@@ -13,18 +13,18 @@
      }
    },
    "@babel/core": {
-      "version": "7.4.5",
-      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.4.5.tgz",
-      "integrity": "sha512-OvjIh6aqXtlsA8ujtGKfC7LYWksYSX8yQcM8Ay3LuvVeQ63lcOKgoZWVqcpFwkd29aYU9rVx7jxhfhiEDV9MZA==",
+      "version": "7.4.3",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.4.3.tgz",
+      "integrity": "sha512-oDpASqKFlbspQfzAE7yaeTmdljSH2ADIvBlb0RwbStltTuWa0+7CCI1fYVINNv9saHPa1W7oaKeuNuKj+RQCvA==",
      "dev": true,
      "requires": {
        "@babel/code-frame": "^7.0.0",
-        "@babel/generator": "^7.4.4",
-        "@babel/helpers": "^7.4.4",
-        "@babel/parser": "^7.4.5",
-        "@babel/template": "^7.4.4",
-        "@babel/traverse": "^7.4.5",
-        "@babel/types": "^7.4.4",
+        "@babel/generator": "^7.4.0",
+        "@babel/helpers": "^7.4.3",
+        "@babel/parser": "^7.4.3",
+        "@babel/template": "^7.4.0",
+        "@babel/traverse": "^7.4.3",
+        "@babel/types": "^7.4.0",
        "convert-source-map": "^1.1.0",
        "debug": "^4.1.0",
        "json5": "^2.1.0",
@@ -52,12 +52,12 @@
      }
    },
    "@babel/generator": {
-      "version": "7.4.4",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.4.4.tgz",
-      "integrity": "sha512-53UOLK6TVNqKxf7RUh8NE851EHRxOOeVXKbK2bivdb+iziMyk03Sr4eaE9OELCbyZAAafAKPDwF2TPUES5QbxQ==",
+      "version": "7.4.0",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.4.0.tgz",
+      "integrity": "sha512-/v5I+a1jhGSKLgZDcmAUZ4K/VePi43eRkUs3yePW1HB1iANOD5tqJXwGSG4BZhSksP8J9ejSlwGeTiiOFZOrXQ==",
      "dev": true,
      "requires": {
-        "@babel/types": "^7.4.4",
+        "@babel/types": "^7.4.0",
        "jsesc": "^2.5.1",
        "lodash": "^4.17.11",
        "source-map": "^0.5.0",
@@ -91,23 +91,23 @@
      "dev": true
    },
    "@babel/helper-split-export-declaration": {
-      "version": "7.4.4",
-      "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.4.4.tgz",
-      "integrity": "sha512-Ro/XkzLf3JFITkW6b+hNxzZ1n5OQ80NvIUdmHspih1XAhtN3vPTuUFT4eQnela+2MaZ5ulH+iyP513KJrxbN7Q==",
+      "version": "7.4.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.4.0.tgz",
+      "integrity": "sha512-7Cuc6JZiYShaZnybDmfwhY4UYHzI6rlqhWjaIqbsJGsIqPimEYy5uh3akSRLMg65LSdSEnJ8a8/bWQN6u2oMGw==",
      "dev": true,
      "requires": {
-        "@babel/types": "^7.4.4"
+        "@babel/types": "^7.4.0"
      }
    },
    "@babel/helpers": {
-      "version": "7.4.4",
-      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.4.4.tgz",
-      "integrity": "sha512-igczbR/0SeuPR8RFfC7tGrbdTbFL3QTvH6D+Z6zNxnTe//GyqmtHmDkzrqDmyZ3eSwPqB/LhyKoU5DXsp+Vp2A==",
+      "version": "7.4.3",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.4.3.tgz",
+      "integrity": "sha512-BMh7X0oZqb36CfyhvtbSmcWc3GXocfxv3yNsAEuM0l+fAqSO22rQrUpijr3oE/10jCTrB6/0b9kzmG4VetCj8Q==",
      "dev": true,
      "requires": {
-        "@babel/template": "^7.4.4",
-        "@babel/traverse": "^7.4.4",
-        "@babel/types": "^7.4.4"
+        "@babel/template": "^7.4.0",
+        "@babel/traverse": "^7.4.3",
+        "@babel/types": "^7.4.0"
      }
    },
    "@babel/highlight": {
@@ -121,15 +121,15 @@
      }
    },
    "@babel/parser": {
-      "version": "7.4.5",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.4.5.tgz",
-      "integrity": "sha512-9mUqkL1FF5T7f0WDFfAoDdiMVPWsdD1gZYzSnaXsxUCUqzuch/8of9G3VUSNiZmMBoRxT3neyVsqeiL/ZPcjew==",
+      "version": "7.4.3",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.4.3.tgz",
+      "integrity": "sha512-gxpEUhTS1sGA63EGQGuA+WESPR/6tz6ng7tSHFCmaTJK/cGK8y37cBTspX+U2xCAue2IQVvF6Z0oigmjwD8YGQ==",
      "dev": true
    },
    "@babel/plugin-proposal-object-rest-spread": {
-      "version": "7.4.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.4.4.tgz",
-      "integrity": "sha512-dMBG6cSPBbHeEBdFXeQ2QLc5gUpg4Vkaz8octD4aoW/ISO+jBOcsuxYL7bsb5WSu8RLP6boxrBIALEHgoHtO9g==",
+      "version": "7.4.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.4.3.tgz",
+      "integrity": "sha512-xC//6DNSSHVjq8O2ge0dyYlhshsH4T7XdCVoxbi5HzLYWfsC5ooFlJjrXk8RcAT+hjHAK9UjBXdylzSoDK3t4g==",
      "dev": true,
      "requires": {
        "@babel/helper-plugin-utils": "^7.0.0",
@@ -155,28 +155,28 @@
      }
    },
    "@babel/template": {
-      "version": "7.4.4",
-      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.4.4.tgz",
-      "integrity": "sha512-CiGzLN9KgAvgZsnivND7rkA+AeJ9JB0ciPOD4U59GKbQP2iQl+olF1l76kJOupqidozfZ32ghwBEJDhnk9MEcw==",
+      "version": "7.4.0",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.4.0.tgz",
+      "integrity": "sha512-SOWwxxClTTh5NdbbYZ0BmaBVzxzTh2tO/TeLTbF6MO6EzVhHTnff8CdBXx3mEtazFBoysmEM6GU/wF+SuSx4Fw==",
      "dev": true,
      "requires": {
        "@babel/code-frame": "^7.0.0",
-        "@babel/parser": "^7.4.4",
-        "@babel/types": "^7.4.4"
+        "@babel/parser": "^7.4.0",
+        "@babel/types": "^7.4.0"
      }
    },
    "@babel/traverse": {
-      "version": "7.4.5",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.4.5.tgz",
-      "integrity": "sha512-Vc+qjynwkjRmIFGxy0KYoPj4FdVDxLej89kMHFsWScq999uX+pwcX4v9mWRjW0KcAYTPAuVQl2LKP1wEVLsp+A==",
+      "version": "7.4.3",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.4.3.tgz",
+      "integrity": "sha512-HmA01qrtaCwwJWpSKpA948cBvU5BrmviAief/b3AVw936DtcdsTexlbyzNuDnthwhOQ37xshn7hvQaEQk7ISYQ==",
      "dev": true,
      "requires": {
        "@babel/code-frame": "^7.0.0",
-        "@babel/generator": "^7.4.4",
+        "@babel/generator": "^7.4.0",
        "@babel/helper-function-name": "^7.1.0",
-        "@babel/helper-split-export-declaration": "^7.4.4",
-        "@babel/parser": "^7.4.5",
-        "@babel/types": "^7.4.4",
+        "@babel/helper-split-export-declaration": "^7.4.0",
+        "@babel/parser": "^7.4.3",
+        "@babel/types": "^7.4.0",
        "debug": "^4.1.0",
        "globals": "^11.1.0",
        "lodash": "^4.17.11"
@@ -200,9 +200,9 @@
      }
    },
    "@babel/types": {
-      "version": "7.4.4",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.4.4.tgz",
-      "integrity": "sha512-dOllgYdnEFOebhkKCjzSVFqw/PmmB8pH6RGOWkY4GsboQNd47b1fBThBSwlHAq9alF9vc1M3+6oqR47R50L0tQ==",
+      "version": "7.4.0",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.4.0.tgz",
+      "integrity": "sha512-aPvkXyU2SPOnztlgo8n9cEiXW755mgyvueUPcpStqdzoSPm0fjO0vQBjLkt3JKJW7ufikfcnMTTPsN1xaTsBPA==",
      "dev": true,
      "requires": {
        "esutils": "^2.0.2",
@@ -822,6 +822,14 @@
      "integrity": "sha512-gaqbzQPqOoamawKg0LGVd7SzLgXS+JH61oWprSLH+P+abTczqJbhTR8CmJ2u9/bUYNmHTGJx/UEmn6doAvvuig==",
      "dev": true
    },
+    "block-stream": {
+      "version": "0.0.9",
+      "resolved": "https://registry.npmjs.org/block-stream/-/block-stream-0.0.9.tgz",
+      "integrity": "sha1-E+v+d4oDIFz+A3UUgeu0szAMEmo=",
+      "requires": {
+        "inherits": "~2.0.0"
+      }
+    },
    "bluebird": {
      "version": "3.5.3",
      "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.5.3.tgz",
@@ -868,6 +876,14 @@
      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-3.4.0.tgz",
      "integrity": "sha512-F1yTDO9OHKH0xjl03DsOe8Nu1OWBIeAugGMhy3UTIYDdbbIPesQIhCEbj+HEr6wqlwweGAlP8F3OBC6kEuhFuw=="
    },
+    "bootstrap-colorpicker": {
+      "version": "2.5.3",
+      "resolved": "https://registry.npmjs.org/bootstrap-colorpicker/-/bootstrap-colorpicker-2.5.3.tgz",
+      "integrity": "sha512-xdllX8LSMvKULs3b8JrgRXTvyvjkSMHHHVuHjjN5FNMqr6kRe5NPiMHFmeAFjlgDF73MspikudLuEwR28LbzLw==",
+      "requires": {
+        "jquery": ">=1.10"
+      }
+    },
    "brace-expansion": {
      "version": "1.1.11",
      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -925,14 +941,9 @@
        "xtend": "^4.0.0"
      },
      "dependencies": {
-        "headless": {
-          "version": "0.1.3",
-          "bundled": true,
-          "dev": true
-        },
        "minimist": {
          "version": "0.0.5",
-          "resolved": "http://registry.npmjs.org/minimist/-/minimist-0.0.5.tgz",
+          "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.5.tgz",
          "integrity": "sha1-16oye87PUY+RBqxrjwA/o7zqhWY=",
          "dev": true
        },
@@ -3337,6 +3348,12 @@
        }
      }
    },
+    "find-parent-dir": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/find-parent-dir/-/find-parent-dir-0.3.0.tgz",
+      "integrity": "sha1-M8RLQpqysvBkYpnF+fcY83b/jVQ=",
+      "dev": true
+    },
    "find-up": {
      "version": "1.1.2",
      "resolved": "https://registry.npmjs.org/find-up/-/find-up-1.1.2.tgz",
@@ -3539,28 +3556,20 @@
        "universalify": "^0.1.0"
      }
    },
-    "fs-minipass": {
-      "version": "1.2.6",
-      "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-1.2.6.tgz",
-      "integrity": "sha512-crhvyXcMejjv3Z5d2Fa9sf5xLYVCF5O1c71QxbVnbLsmYMBEvDAftewesN/HhY03YRoA7zOMxjNGrF5svGaaeQ==",
-      "requires": {
-        "minipass": "^2.2.1"
-      }
-    },
    "fs.realpath": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
      "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8="
    },
    "fsevents": {
-      "version": "1.2.7",
-      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.7.tgz",
-      "integrity": "sha512-Pxm6sI2MeBD7RdD12RYsqaP0nMiwx8eZBXCa6z2L+mRHm2DYrOYwihmhjpkdjUHwQhslWQjRpEgNq4XvBmaAuw==",
+      "version": "1.2.9",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.9.tgz",
+      "integrity": "sha512-oeyj2H3EjjonWcFjD5NvZNE9Rqe4UW+nQBU2HNeKw0koVLEFIhtyETyAakeAM3de7Z/SW5kcA+fZUait9EApnw==",
      "dev": true,
      "optional": true,
      "requires": {
-        "nan": "^2.9.2",
-        "node-pre-gyp": "^0.10.0"
+        "nan": "^2.12.1",
+        "node-pre-gyp": "^0.12.0"
      },
      "dependencies": {
        "abbrev": {
@@ -3572,8 +3581,7 @@
        "ansi-regex": {
          "version": "2.1.1",
          "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
        },
        "aproba": {
          "version": "1.2.0",
@@ -3616,8 +3624,7 @@
        "code-point-at": {
          "version": "1.1.0",
          "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
        },
        "concat-map": {
          "version": "0.0.1",
@@ -3628,8 +3635,7 @@
        "console-control-strings": {
          "version": "1.1.0",
          "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
        },
        "core-util-is": {
          "version": "1.0.2",
@@ -3638,17 +3644,19 @@
          "optional": true
        },
        "debug": {
-          "version": "2.6.9",
+          "version": "4.1.1",
          "bundled": true,
          "dev": true,
          "optional": true,
          "requires": {
-            "ms": "2.0.0"
+            "ms": "^2.1.1"
          }
        },
        "deep-extend": {
          "version": "0.6.0",
-          "bundled": true
+          "bundled": true,
+          "dev": true,
+          "optional": true
        },
        "delegates": {
          "version": "1.0.0",
@@ -3744,8 +3752,7 @@
        "inherits": {
          "version": "2.0.3",
          "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
        },
        "ini": {
          "version": "1.3.5",
@@ -3757,7 +3764,6 @@
          "version": "1.0.0",
          "bundled": true,
          "dev": true,
-          "optional": true,
          "requires": {
            "number-is-nan": "^1.0.0"
          }
@@ -3780,14 +3786,12 @@
        "minimist": {
          "version": "0.0.8",
          "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
        },
        "minipass": {
          "version": "2.3.5",
          "bundled": true,
          "dev": true,
-          "optional": true,
          "requires": {
            "safe-buffer": "^5.1.2",
            "yallist": "^3.0.0"
@@ -3806,30 +3810,29 @@
          "version": "0.5.1",
          "bundled": true,
          "dev": true,
-          "optional": true,
          "requires": {
            "minimist": "0.0.8"
          }
        },
        "ms": {
-          "version": "2.0.0",
+          "version": "2.1.1",
          "bundled": true,
          "dev": true,
          "optional": true
        },
        "needle": {
-          "version": "2.2.4",
+          "version": "2.3.0",
          "bundled": true,
          "dev": true,
          "optional": true,
          "requires": {
-            "debug": "^2.1.2",
+            "debug": "^4.1.0",
            "iconv-lite": "^0.4.4",
            "sax": "^1.2.4"
          }
        },
        "node-pre-gyp": {
-          "version": "0.10.3",
+          "version": "0.12.0",
          "bundled": true,
          "dev": true,
          "optional": true,
@@ -3857,13 +3860,13 @@
          }
        },
        "npm-bundled": {
-          "version": "1.0.5",
+          "version": "1.0.6",
          "bundled": true,
          "dev": true,
          "optional": true
        },
        "npm-packlist": {
-          "version": "1.2.0",
+          "version": "1.4.1",
          "bundled": true,
          "dev": true,
          "optional": true,
@@ -3887,8 +3890,7 @@
        "number-is-nan": {
          "version": "1.0.1",
          "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
        },
        "object-assign": {
          "version": "4.1.1",
@@ -3900,7 +3902,6 @@
          "version": "1.4.0",
          "bundled": true,
          "dev": true,
-          "optional": true,
          "requires": {
            "wrappy": "1"
          }
@@ -3945,16 +3946,12 @@
          "dev": true,
          "optional": true,
          "requires": {
+            "deep-extend": "^0.6.0",
            "ini": "~1.3.0",
            "minimist": "^1.2.0",
            "strip-json-comments": "~2.0.1"
          },
          "dependencies": {
-            "deep-extend": {
-              "version": "0.5.1",
-              "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.5.1.tgz",
-              "integrity": "sha512-N8vBdOa+DF7zkRrDCsaOXoCs/E2fJfx9B9MrKnnSiHNh4ws7eSys6YQE4KvT1cecKmOASYQBhbKjeuDD9lT81w=="
-            },
            "minimist": {
              "version": "1.2.0",
              "bundled": true,
@@ -3990,8 +3987,7 @@
        "safe-buffer": {
          "version": "5.1.2",
          "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
        },
        "safer-buffer": {
          "version": "2.1.2",
@@ -4006,7 +4002,7 @@
          "optional": true
        },
        "semver": {
-          "version": "5.6.0",
+          "version": "5.7.0",
          "bundled": true,
          "dev": true,
          "optional": true
@@ -4027,7 +4023,6 @@
          "version": "1.0.2",
          "bundled": true,
          "dev": true,
-          "optional": true,
          "requires": {
            "code-point-at": "^1.0.0",
            "is-fullwidth-code-point": "^1.0.0",
@@ -4047,7 +4042,6 @@
          "version": "3.0.1",
          "bundled": true,
          "dev": true,
-          "optional": true,
          "requires": {
            "ansi-regex": "^2.0.0"
          }
@@ -4060,8 +4054,7 @@
        },
        "tar": {
          "version": "4.4.8",
-          "resolved": "https://registry.npmjs.org/tar/-/tar-4.4.8.tgz",
-          "integrity": "sha512-LzHF64s5chPQQS0IYBn9IN5h3i98c12bo4NCO7e0sGM2llXQ3p2FGC5sdENN4cTW48O915Sh+x+EXx7XW96xYQ==",
+          "bundled": true,
          "dev": true,
          "optional": true,
          "requires": {
@@ -4092,17 +4085,26 @@
        "wrappy": {
          "version": "1.0.2",
          "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
        },
        "yallist": {
          "version": "3.0.3",
          "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
        }
      }
    },
+    "fstream": {
+      "version": "1.0.12",
+      "resolved": "https://registry.npmjs.org/fstream/-/fstream-1.0.12.tgz",
+      "integrity": "sha512-WvJ193OHa0GHPEL+AycEJgxvBEwyfRkN1vhjca23OaPVMCaLCXTd5qAu82AjTcgP1UJmytkOKb63Ypde7raDIg==",
+      "requires": {
+        "graceful-fs": "^4.1.2",
+        "inherits": "~2.0.0",
+        "mkdirp": ">=0.5 0",
+        "rimraf": "2"
+      }
+    },
    "function-bind": {
      "version": "1.1.1",
      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
@@ -4241,7 +4243,7 @@
    },
    "gif-encoder": {
      "version": "0.4.3",
-      "resolved": "http://registry.npmjs.org/gif-encoder/-/gif-encoder-0.4.3.tgz",
+      "resolved": "https://registry.npmjs.org/gif-encoder/-/gif-encoder-0.4.3.tgz",
      "integrity": "sha1-iitP6MqJWkjjoLbLs0CgpqNXGJk=",
      "requires": {
        "readable-stream": "~1.1.9"
@@ -4271,30 +4273,18 @@
      "integrity": "sha1-l/tdlr/eiXMxPyDoKI75oWf6ZM4="
    },
    "gl": {
-      "version": "4.3.3",
-      "resolved": "https://registry.npmjs.org/gl/-/gl-4.3.3.tgz",
-      "integrity": "sha512-a16acSGmSLoyX4s6QjzIWI4LYsxztvr7aR8vt8anZpA4RboTrQ21ZQCQ8WcKWnQp/dn+nSYnw1fn5rHH9D85jQ==",
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/gl/-/gl-4.2.2.tgz",
+      "integrity": "sha512-RiFX+eUrMiVXyYaO1/tsHE8ex+a/52GY2mTE5MjUWE6gJvRFqGYwE6psPtEeiucBlX7DDmHe2QjJ4qyT/ubrYA==",
      "requires": {
-        "bindings": "^1.5.0",
+        "bindings": "^1.2.1",
        "bit-twiddle": "^1.0.2",
        "glsl-tokenizer": "^2.0.2",
-        "nan": "^2.14.0",
-        "node-gyp": "^4.0.0",
+        "nan": "^2.6.2",
+        "node-gyp": "^3.6.2",
        "prebuild-install": "^5.1.0"
-      },
-      "dependencies": {
-        "nan": {
-          "version": "2.14.0",
-          "resolved": "https://registry.npmjs.org/nan/-/nan-2.14.0.tgz",
-          "integrity": "sha512-INOFj37C7k3AfaNTtX8RhsTw7qRy7eLET14cROi9+5HAVbbHuIWUHEauBv5qT4Av2tWasiTY1Jw6puUNqRJXQg=="
-        }
      }
    },
-    "gl-wiretap": {
-      "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/gl-wiretap/-/gl-wiretap-0.6.0.tgz",
-      "integrity": "sha512-QmkkieSYcPy3vTAP6faQp6TkgrtC+fIF/L85HEH+kajIr5zbgx2dr9wkk4PMzea3kBsgB1pZ0MuGHaDn76qHdA=="
-    },
    "glfx": {
      "version": "0.0.4",
      "resolved": "https://registry.npmjs.org/glfx/-/glfx-0.0.4.tgz",
@@ -4439,13 +4429,12 @@
      "integrity": "sha1-gecUajfu47bWJ/H+qnSibVExSKI="
    },
    "gpu.js": {
-      "version": "2.0.0-rc.14",
-      "resolved": "https://registry.npmjs.org/gpu.js/-/gpu.js-2.0.0-rc.14.tgz",
-      "integrity": "sha512-8SmrWsEJvI/SY2cluqEYZfv1guVJJ0BNowlJtE1uRLOvj4alB79GxmMelXRJY3XoJUe1akEs39/2+zdJaE/xFg==",
+      "version": "2.0.0-rc.13",
+      "resolved": "https://registry.npmjs.org/gpu.js/-/gpu.js-2.0.0-rc.13.tgz",
+      "integrity": "sha512-9WyBThe30fVgnsDxgZkAopYBlo8FlqQmwPFmYUnHfTVibiu1ObkvdlYtP6yJscWkwllskeYNWlfrKKR6G83u0w==",
      "requires": {
        "acorn": "^5.1.1",
-        "gl": "^4.3.3",
-        "gl-wiretap": "^0.6.0",
+        "gl": "^4.2.2",
        "gpu-mock.js": "^1.0.1"
      }
    },
@@ -5097,6 +5086,12 @@
      "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
      "dev": true
    },
+    "headless": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/headless/-/headless-0.1.3.tgz",
+      "integrity": "sha1-xZVzTupV7SJ2EbndhKY7UY4RFVM=",
+      "dev": true
+    },
    "hmac-drbg": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
@@ -5173,7 +5168,7 @@
        },
        "minimist": {
          "version": "0.0.10",
-          "resolved": "http://registry.npmjs.org/minimist/-/minimist-0.0.10.tgz",
+          "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.10.tgz",
          "integrity": "sha1-3j+YVD2/lggr5IrRoMfNqDYwHc8=",
          "dev": true
        },
@@ -5238,7 +5233,7 @@
      "dependencies": {
        "minimist": {
          "version": "0.0.10",
-          "resolved": "http://registry.npmjs.org/minimist/-/minimist-0.0.10.tgz",
+          "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.10.tgz",
          "integrity": "sha1-3j+YVD2/lggr5IrRoMfNqDYwHc8=",
          "dev": true
        },
@@ -5355,9 +5350,9 @@
      "integrity": "sha1-GZT/rs3+nEQe0r2sdFK3u0yeQaQ="
    },
    "husky": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/husky/-/husky-2.4.1.tgz",
-      "integrity": "sha512-ZRwMWHr7QruR22dQ5l3rEGXQ7rAQYsJYqaeCd+NyOsIFczAtqaApZQP3P4HwLZjCtFbm3SUNYoKuoBXX3AYYfw==",
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/husky/-/husky-2.3.0.tgz",
+      "integrity": "sha512-A/ZQSEILoq+mQM3yC3RIBSaw1bYXdkKnyyKVSUiJl+iBjVZc5LQEXdGY1ZjrDxC4IzfRPiJ0IqzEQGCN5TQa/A==",
      "dev": true,
      "requires": {
        "cosmiconfig": "^5.2.0",
@@ -5690,11 +5685,6 @@
      "resolved": "https://registry.npmjs.org/iota-array/-/iota-array-1.0.0.tgz",
      "integrity": "sha1-ge9X/l0FgUzVjCSDYyqZwwoOgIc="
    },
-    "ip-regex": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/ip-regex/-/ip-regex-2.1.0.tgz",
-      "integrity": "sha1-+ni/XS5pE8kRzp+BnuUUa7bYROk="
-    },
    "is-accessor-descriptor": {
      "version": "0.1.6",
      "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz",
@@ -6159,35 +6149,35 @@
      "integrity": "sha1-peZUwuWi3rXyAdls77yoDA7y9RM="
    },
    "jsdom": {
-      "version": "15.1.1",
-      "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-15.1.1.tgz",
-      "integrity": "sha512-cQZRBB33arrDAeCrAEWn1U3SvrvC8XysBua9Oqg1yWrsY/gYcusloJC3RZJXuY5eehSCmws8f2YeliCqGSkrtQ==",
+      "version": "15.0.0",
+      "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-15.0.0.tgz",
+      "integrity": "sha512-rJnHm7CHyIj4tDyz9VaCt0f0P0nEh/wEmMfwp9mMixy+L/r8OW/BNcgmIlfZuBBnVQS3eRBpvd/qM3R7vr7e3A==",
      "requires": {
        "abab": "^2.0.0",
-        "acorn": "^6.1.1",
-        "acorn-globals": "^4.3.2",
+        "acorn": "^6.0.4",
+        "acorn-globals": "^4.3.0",
        "array-equal": "^1.0.0",
-        "cssom": "^0.3.6",
-        "cssstyle": "^1.2.2",
+        "cssom": "^0.3.4",
+        "cssstyle": "^1.1.1",
        "data-urls": "^1.1.0",
        "domexception": "^1.0.1",
-        "escodegen": "^1.11.1",
+        "escodegen": "^1.11.0",
        "html-encoding-sniffer": "^1.0.2",
-        "nwsapi": "^2.1.4",
+        "nwsapi": "^2.1.3",
        "parse5": "5.1.0",
        "pn": "^1.1.0",
        "request": "^2.88.0",
-        "request-promise-native": "^1.0.7",
+        "request-promise-native": "^1.0.5",
        "saxes": "^3.1.9",
        "symbol-tree": "^3.2.2",
-        "tough-cookie": "^3.0.1",
+        "tough-cookie": "^2.5.0",
        "w3c-hr-time": "^1.0.1",
        "w3c-xmlserializer": "^1.1.2",
        "webidl-conversions": "^4.0.2",
        "whatwg-encoding": "^1.0.5",
        "whatwg-mimetype": "^2.3.0",
        "whatwg-url": "^7.0.0",
-        "ws": "^7.0.0",
+        "ws": "^6.1.2",
        "xml-name-validator": "^3.0.0"
      },
      "dependencies": {
@@ -6202,21 +6192,20 @@
          "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A=="
        },
        "tough-cookie": {
-          "version": "3.0.1",
-          "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-3.0.1.tgz",
-          "integrity": "sha512-yQyJ0u4pZsv9D4clxO69OEjLWYw+jbgspjTue4lTQZLfV0c5l1VmK2y1JK8E9ahdpltPOaAThPcp5nKPUgSnsg==",
+          "version": "2.5.0",
+          "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.5.0.tgz",
+          "integrity": "sha512-nlLsUzgm1kfLXSXfRZMc1KLAugd4hqJHDTvc2hDIwS3mZAfMEuMbc03SujMF+GEcpaX/qboeycw6iO8JwVv2+g==",
          "requires": {
-            "ip-regex": "^2.1.0",
            "psl": "^1.1.28",
            "punycode": "^2.1.1"
          }
        },
        "ws": {
-          "version": "7.0.0",
-          "resolved": "https://registry.npmjs.org/ws/-/ws-7.0.0.tgz",
-          "integrity": "sha512-cknCal4k0EAOrh1SHHPPWWh4qm93g1IuGGGwBjWkXmCG7LsDtL8w9w+YVfaF+KSVwiHQKDIMsSLBVftKf9d1pg==",
+          "version": "6.2.1",
+          "resolved": "https://registry.npmjs.org/ws/-/ws-6.2.1.tgz",
+          "integrity": "sha512-GIyAXC2cB7LjvpgMt9EKS2ldqr0MTrORaleiOno6TweZ6r3TKtoFQWay/2PceJ3RuBasOHzXNn5Lrw1X0bEjqA==",
          "requires": {
-            "async-limiter": "^1.0.0"
+            "async-limiter": "~1.0.0"
          }
        }
      }
@@ -6361,9 +6350,9 @@
      "dev": true
    },
    "lint-staged": {
-      "version": "8.2.0",
-      "resolved": "https://registry.npmjs.org/lint-staged/-/lint-staged-8.2.0.tgz",
-      "integrity": "sha512-DxguyxGOIfb67wZ6EOrqzjAbw6ZH9XK3YS74HO+erJf6+SAQeJJPN//GBOG5xhdt2THeuXjVPaHcCYOWGZwRbA==",
+      "version": "8.1.7",
+      "resolved": "https://registry.npmjs.org/lint-staged/-/lint-staged-8.1.7.tgz",
+      "integrity": "sha512-egT0goFhIFoOGk6rasPngTFh2qDqxZddM0PwI58oi66RxCDcn5uDwxmiasWIF0qGnchHSYVJ8HPRD5LrFo7TKA==",
      "dev": true,
      "requires": {
        "chalk": "^2.3.1",
@@ -6373,6 +6362,7 @@
        "dedent": "^0.7.0",
        "del": "^3.0.0",
        "execa": "^1.0.0",
+        "find-parent-dir": "^0.3.0",
        "g-status": "^2.0.2",
        "is-glob": "^4.0.0",
        "is-windows": "^1.0.2",
@@ -6722,7 +6712,7 @@
    },
    "magic-string": {
      "version": "0.22.5",
-      "resolved": "http://registry.npmjs.org/magic-string/-/magic-string-0.22.5.tgz",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.22.5.tgz",
      "integrity": "sha512-oreip9rJZkzvA8Qzk9HFs8fZGF/u7H/gtrE8EN6RjKJ9kh2HlC+yQ2QezifqTZfGyiuAV0dRv5a+y/8gBb1m9w==",
      "requires": {
        "vlq": "^0.2.2"
@@ -7015,26 +7005,9 @@
    },
    "minimist": {
      "version": "1.2.0",
-      "resolved": "http://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
      "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ="
    },
-    "minipass": {
-      "version": "2.3.5",
-      "resolved": "https://registry.npmjs.org/minipass/-/minipass-2.3.5.tgz",
-      "integrity": "sha512-Gi1W4k059gyRbyVUZQ4mEqLm0YIUiGYfvxhF6SIlk3ui1WVxMTGfGdQ2SInh3PDrRTVvPKgULkpJtT4RH10+VA==",
-      "requires": {
-        "safe-buffer": "^5.1.2",
-        "yallist": "^3.0.0"
-      }
-    },
-    "minizlib": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-1.2.1.tgz",
-      "integrity": "sha512-7+4oTUOWKg7AuL3vloEWekXY2/D20cevzsrNT2kGWm+39J9hGTCBv8VI5Pm5lXZ/o3/mdR4f8rflAPhnQb8mPA==",
-      "requires": {
-        "minipass": "^2.2.1"
-      }
-    },
    "mitt": {
      "version": "1.1.3",
      "resolved": "https://registry.npmjs.org/mitt/-/mitt-1.1.3.tgz",
@@ -7072,7 +7045,7 @@
      "dependencies": {
        "minimist": {
          "version": "0.0.8",
-          "resolved": "http://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
+          "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
          "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0="
        }
      }
@@ -7127,9 +7100,7 @@
    "nan": {
      "version": "2.13.2",
      "resolved": "https://registry.npmjs.org/nan/-/nan-2.13.2.tgz",
-      "integrity": "sha512-TghvYc72wlMGMVMluVo9WRJc0mB8KxxF/gZ4YYFy7V2ZQX9l7rgbPg7vjS9mt6U5HXODVFVI2bOduCzwOMv/lw==",
-      "dev": true,
-      "optional": true
+      "integrity": "sha512-TghvYc72wlMGMVMluVo9WRJc0mB8KxxF/gZ4YYFy7V2ZQX9l7rgbPg7vjS9mt6U5HXODVFVI2bOduCzwOMv/lw=="
    },
    "nanomatch": {
      "version": "1.2.13",
@@ -7229,10 +7200,11 @@
      "integrity": "sha1-GA6scAPgxwdhjvMTaPYvhLKmkJE="
    },
    "node-gyp": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/node-gyp/-/node-gyp-4.0.0.tgz",
-      "integrity": "sha512-2XiryJ8sICNo6ej8d0idXDEMKfVfFK7kekGCtJAuelGsYHQxhj13KTf95swTCN2dZ/4lTfZ84Fu31jqJEEgjWA==",
+      "version": "3.8.0",
+      "resolved": "https://registry.npmjs.org/node-gyp/-/node-gyp-3.8.0.tgz",
+      "integrity": "sha512-3g8lYefrRRzvGeSowdJKAKyks8oUpLEd/DyPV4eMhVlhJ0aNaZqIrNUIPuEWWTAoPqyFkfGrM67MC69baqn6vA==",
      "requires": {
+        "fstream": "^1.0.0",
        "glob": "^7.0.3",
        "graceful-fs": "^4.1.2",
        "mkdirp": "^0.5.0",
@@ -7242,7 +7214,7 @@
        "request": "^2.87.0",
        "rimraf": "2",
        "semver": "~5.3.0",
-        "tar": "^4.4.8",
+        "tar": "^2.0.0",
        "which": "1"
      },
      "dependencies": {
@@ -7363,9 +7335,9 @@
      "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0="
    },
    "nwsapi": {
-      "version": "2.1.4",
-      "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.1.4.tgz",
-      "integrity": "sha512-iGfd9Y6SFdTNldEy2L0GUhcarIutFmk+MPWIn9dmj8NMIup03G08uUF2KGbbmv/Ux4RT0VZJoP/sVbWA6d/VIw=="
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.1.3.tgz",
+      "integrity": "sha512-RowAaJGEgYXEZfQ7tvvdtAQUKPyTR6T6wNu0fwlNsGQYr/h3yQc6oI8WnVZh3Y/Sylwc+dtAlvPqfFZjhTyk3A=="
    },
    "oauth-sign": {
      "version": "0.9.0",
@@ -7497,7 +7469,7 @@
      "dependencies": {
        "minimist": {
          "version": "0.0.10",
-          "resolved": "http://registry.npmjs.org/minimist/-/minimist-0.0.10.tgz",
+          "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.10.tgz",
          "integrity": "sha1-3j+YVD2/lggr5IrRoMfNqDYwHc8="
        }
      }
@@ -8154,9 +8126,9 @@
      "integrity": "sha1-wNWmOycYgArY4esPpSachN1BhF4="
    },
    "puppeteer": {
-      "version": "1.17.0",
-      "resolved": "https://registry.npmjs.org/puppeteer/-/puppeteer-1.17.0.tgz",
-      "integrity": "sha512-3EXZSximCzxuVKpIHtyec8Wm2dWZn1fc5tQi34qWfiUgubEVYHjUvr0GOJojqf3mifI6oyKnCdrGxaOI+lWReA==",
+      "version": "1.15.0",
+      "resolved": "https://registry.npmjs.org/puppeteer/-/puppeteer-1.15.0.tgz",
+      "integrity": "sha512-D2y5kwA9SsYkNUmcBzu9WZ4V1SGHiQTmgvDZSx6sRYFsgV25IebL4V6FaHjF6MbwLK9C6f3G3pmck9qmwM8H3w==",
      "requires": {
        "debug": "^4.1.0",
        "extract-zip": "^1.6.6",
@@ -8177,14 +8149,22 @@
          }
        },
        "mime": {
-          "version": "2.4.3",
-          "resolved": "https://registry.npmjs.org/mime/-/mime-2.4.3.tgz",
-          "integrity": "sha512-QgrPRJfE+riq5TPZMcHZOtm8c6K/yYrMbKIoRfapfiGLxS8OTeIfRhUGW5LU7MlRa52KOAGCfUNruqLrIBvWZw=="
+          "version": "2.4.2",
+          "resolved": "https://registry.npmjs.org/mime/-/mime-2.4.2.tgz",
+          "integrity": "sha512-zJBfZDkwRu+j3Pdd2aHsR5GfH2jIWhmL1ZzBoc+X+3JEti2hbArWcyJ+1laC1D2/U/W1a/+Cegj0/OnEU2ybjg=="
        },
        "ms": {
          "version": "2.1.1",
          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz",
          "integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg=="
+        },
+        "ws": {
+          "version": "6.2.1",
+          "resolved": "https://registry.npmjs.org/ws/-/ws-6.2.1.tgz",
+          "integrity": "sha512-GIyAXC2cB7LjvpgMt9EKS2ldqr0MTrORaleiOno6TweZ6r3TKtoFQWay/2PceJ3RuBasOHzXNn5Lrw1X0bEjqA==",
+          "requires": {
+            "async-limiter": "~1.0.0"
+          }
        }
      }
    },
@@ -8845,7 +8825,7 @@
    },
    "sax": {
      "version": "0.1.5",
-      "resolved": "http://registry.npmjs.org/sax/-/sax-0.1.5.tgz",
+      "resolved": "https://registry.npmjs.org/sax/-/sax-0.1.5.tgz",
      "integrity": "sha1-0YKaYSD6AWZetNv/bEPyn9bWFHE=",
      "dev": true
    },
@@ -9165,9 +9145,9 @@
          }
        },
        "ms": {
-          "version": "2.1.2",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-          "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz",
+          "integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg==",
          "dev": true
        }
      }
@@ -9798,9 +9778,9 @@
      "integrity": "sha1-rifbOPZgp64uHDt9G8KQgZuFGeY="
    },
    "synchronous-promise": {
-      "version": "2.0.9",
-      "resolved": "https://registry.npmjs.org/synchronous-promise/-/synchronous-promise-2.0.9.tgz",
-      "integrity": "sha512-LO95GIW16x69LuND1nuuwM4pjgFGupg7pZ/4lU86AmchPKrhk0o2tpMU2unXRrqo81iAFe1YJ0nAGEVwsrZAgg==",
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/synchronous-promise/-/synchronous-promise-2.0.8.tgz",
+      "integrity": "sha512-xYavZtFC1vKgJu0AOSYdrLeikNCsNwmUeZaV1XF9cMqEhBVVxLq6rEbYzOGrF1MV2MNPkhsJqqiXuQ4a76CEUg==",
      "dev": true
    },
    "syntax-error": {
@@ -10047,17 +10027,26 @@
      }
    },
    "tar": {
-      "version": "4.4.9",
-      "resolved": "https://registry.npmjs.org/tar/-/tar-4.4.9.tgz",
-      "integrity": "sha512-xisFa7Q2i3HOgfn+nmnWLGHD6Tm23hxjkx6wwGmgxkJFr6wxwXnJOdJYcZjL453PSdF0+bemO03+flAzkIdLBQ==",
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/tar/-/tar-2.2.2.tgz",
+      "integrity": "sha512-FCEhQ/4rE1zYv9rYXJw/msRqsnmlje5jHP6huWeBZ704jUTy02c5AZyWujpMR1ax6mVw9NyJMfuK2CMDWVIfgA==",
      "requires": {
-        "chownr": "^1.1.1",
-        "fs-minipass": "^1.2.5",
-        "minipass": "^2.3.5",
-        "minizlib": "^1.2.1",
-        "mkdirp": "^0.5.0",
-        "safe-buffer": "^5.1.2",
-        "yallist": "^3.0.3"
+        "block-stream": "*",
+        "fstream": "^1.0.12",
+        "inherits": "2"
+      },
+      "dependencies": {
+        "fstream": {
+          "version": "1.0.12",
+          "resolved": "https://registry.npmjs.org/fstream/-/fstream-1.0.12.tgz",
+          "integrity": "sha512-WvJ193OHa0GHPEL+AycEJgxvBEwyfRkN1vhjca23OaPVMCaLCXTd5qAu82AjTcgP1UJmytkOKb63Ypde7raDIg==",
+          "requires": {
+            "graceful-fs": "^4.1.2",
+            "inherits": "~2.0.0",
+            "mkdirp": ">=0.5 0",
+            "rimraf": "2"
+          }
+        }
      }
    },
    "tar-fs": {
@@ -10939,14 +10928,6 @@
        "mkdirp": "^0.5.1"
      }
    },
-    "ws": {
-      "version": "6.2.1",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-6.2.1.tgz",
-      "integrity": "sha512-GIyAXC2cB7LjvpgMt9EKS2ldqr0MTrORaleiOno6TweZ6r3TKtoFQWay/2PceJ3RuBasOHzXNn5Lrw1X0bEjqA==",
-      "requires": {
-        "async-limiter": "~1.0.0"
-      }
-    },
    "xhr-write-stream": {
      "version": "0.1.2",
      "resolved": "https://registry.npmjs.org/xhr-write-stream/-/xhr-write-stream-0.1.2.tgz",
@@ -10996,11 +10977,6 @@
      "resolved": "https://registry.npmjs.org/y18n/-/y18n-3.2.1.tgz",
      "integrity": "sha1-bRX7qITAhnnA136I53WegR4H+kE="
    },
-    "yallist": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.0.3.tgz",
-      "integrity": "sha512-S+Zk8DEWE6oKpV+vI3qWkaK+jSbIK86pCwe2IF/xwIpQ8jEuxpw9NyaGjmp9+BoJv5FV2piqCDcoCtStppiq2A=="
-    },
    "yargs": {
      "version": "6.4.0",
      "resolved": "https://registry.npmjs.org/yargs/-/yargs-6.4.0.tgz",
--- a/package.json
+++ b/package.json
@@ -1,12 +1,12 @@
 {
  "name": "image-sequencer",
-  "version": "3.3.5",
+  "version": "3.5.0",
  "description": "A modular JavaScript image manipulation library modeled on a storyboard.",
  "main": "src/ImageSequencer.js",
  "scripts": {
    "debug": "TEST=true node ./index.js -i ./examples/images/monarch.png -s invert",
-    "test": "TEST=true istanbul cover tape test/core/*.js test/core/ui/user-interface.js test/core/modules/*.js | tap-spec; browserify test/core/sequencer/image-sequencer.js test/core/sequencer/chain.js test/core/sequencer/meta-modules.js test/core/sequencer/replace.js test/core/sequencer/import-export.js test/core/sequencer/run.js test/core/sequencer/dynamic-imports.js test/core/util/*.js test/core/sequencer/benchmark.js | tape-run --render=\"tap-spec\"",
-    "test-ui": "node node_modules/jasmine/bin/jasmine test/spec/*.js",
+    "test": "TEST=true istanbul cover tape test/core/*.js test/core/ui/user-interface.js test/core/modules/*.js | tap-spec; node test/core/sequencer/benchmark.js;  browserify test/core/sequencer/meta-modules.js test/core/sequencer/image-sequencer.js test/core/sequencer/chain.js  test/core/sequencer/replace.js test/core/sequencer/import-export.js test/core/sequencer/run.js test/core/sequencer/dynamic-imports.js test/core/util/*.js | tape-run --render=\"tap-spec\"",
+    "test-ui": "node node_modules/jasmine/bin/jasmine test/ui/spec/*.js",
    "setup": "npm i && npm i -g grunt grunt-cli && grunt build",
    "start": "grunt serve"
  },
@@ -32,6 +32,7 @@
  "dependencies": {
    "base64-img": "^1.0.4",
    "bootstrap": "~3.4.0",
+    "bootstrap-colorpicker": "^2.5.3",
    "buffer": "~5.2.1",
    "commander": "^2.11.0",
    "data-uri-to-buffer": "^2.0.0",
--- a/spec/insertPreview.spec.js
+++ b/spec/insertPreview.spec.js
@@ -1,26 +0,0 @@
-describe('Preview UI HTML', function() {
-
-  var InsertPreview = require('../examples/lib/insertPreview');
-  var sequencer = require('../src/ImageSequencer')();
-  var insertPreview;
-  var options = { brightness: 50 };
-
-  beforeEach(()=>{
-    insertPreview = InsertPreview;
-
-    spyOn(insertPreview,'generatePreview');
-    spyOn(insertPreview,'updatePreviews');
-
-    insertPreview.generatePreview('brightness',options,'src','selector');
-    insertPreview.updatePreviews('src','selector');
-  });
-
-  it('generate preview ui', function() {
-    expect(insertPreview.generatePreview).toHaveBeenCalledWith('brightness',options,'src','selector');
-  });
-
-  it('update preview ui', function() {
-    expect(insertPreview.updatePreviews).toHaveBeenCalledWith('src','selector');
-  });
-
-});
--- a/spec/intermediateHtmlStepUi.spec.js
+++ b/spec/intermediateHtmlStepUi.spec.js
@@ -1,19 +0,0 @@
-describe('Intermediate step HTML', function() {
-
-  var IntermediateHtmlStepUi = require('../examples/lib/intermediateHtmlStepUi');
-  var sequencer = require('../src/ImageSequencer')();
-  var intermediateHtmlStepUi;
-
-  beforeEach(()=>{
-    intermediateHtmlStepUi = new IntermediateHtmlStepUi(sequencer);
-
-    spyOn(intermediateHtmlStepUi,'insertStep');
-
-    intermediateHtmlStepUi.insertStep();
-  });
-
-  it('insert step ui', function() {
-    expect(intermediateHtmlStepUi.insertStep).toHaveBeenCalled();
-  });
-
-});
--- a/spec/support/jasmine.json
+++ b/spec/support/jasmine.json
@@ -1,11 +0,0 @@
-{
-  "spec_dir": "spec",
-  "spec_files": [
-    "**/*[sS]pec.js"
-  ],
-  "helpers": [
-    "helpers/**/*.js"
-  ],
-  "stopSpecOnExpectationFailure": false,
-  "random": true
-}
--- a/spec/urlHash.spec.js
+++ b/spec/urlHash.spec.js
@@ -1,40 +0,0 @@
-describe('URL manipulation methods', function() {
-
-  var UrlHash = require('../examples/lib/urlHash');
-  var urlHash;
-  var params = {
-    module: 'brightness',
-    brightness: 50
-  };
-
-  beforeEach(()=>{
-    urlHash = UrlHash;
-
-    spyOn(urlHash,'getUrlHashParameters');
-    spyOn(urlHash,'getUrlHashParameter');
-    spyOn(urlHash,'setUrlHashParameters');
-    spyOn(urlHash,'setUrlHashParameter');
-
-    urlHash.getUrlHashParameters();
-    urlHash.getUrlHashParameter('module');
-    urlHash.setUrlHashParameters(params);
-    urlHash.setUrlHashParameter('module','brightness');
-  });
-
-  it('gets url hash params from window hash', function() {
-    expect(urlHash.getUrlHashParameters).toHaveBeenCalled();
-  });
-
-  it('gets url hash param from params object', function() {
-    expect(urlHash.getUrlHashParameter).toHaveBeenCalledWith('module');
-  });
-
-  it('accepts param object and sets url hash params', function() {
-    expect(urlHash.setUrlHashParameters).toHaveBeenCalledWith(params);
-  });
-
-  it('accepts param key-value pair and sets url hash params', function() {
-    expect(urlHash.setUrlHashParameter).toHaveBeenCalledWith('module','brightness');
-  });
-
-});
--- a/src/AddStep.js
+++ b/src/AddStep.js
@@ -1,5 +1,5 @@
 // add steps to the sequencer
 function AddStep(_sequencer, name, o) {
-  return require('./InsertStep')(_sequencer,-1,name,o);
+  return require('./InsertStep')(_sequencer, -1, name, o);
 }
 module.exports = AddStep;
--- a/src/CliUtils.js
+++ b/src/CliUtils.js
@@ -4,9 +4,9 @@ var fs = require('fs');
 * This function checks if the directory exists, if not it creates one on the given path
 * Callback is called with argument error if an error is encountered
 */
-function makedir(path,callback){
-  fs.access(path,function(err){
-    if(err) fs.mkdir(path,function(err){
+function makedir(path, callback){
+  fs.access(path, function(err){
+    if(err) fs.mkdir(path, function(err){
      if(err) callback(err);
      callback();
    });
--- a/src/FormatInput.js
+++ b/src/FormatInput.js
@@ -1,13 +1,13 @@
 function objTypeOf(object){
-  return Object.prototype.toString.call(object).split(' ')[1].slice(0,-1);
+  return Object.prototype.toString.call(object).split(' ')[1].slice(0, -1);
 }

 function getPrimitive(object){
-  return (objTypeOf(object)=='Array')?object[0]:object;
+  return (objTypeOf(object) == 'Array') ? object[0] : object;
 }

 function makeArray(input) {
-  return (objTypeOf(input)=='Array')?input:[input];
+  return (objTypeOf(input) == 'Array') ? input : [input];
 }

 function copy(a) {
@@ -23,7 +23,7 @@ function copy(a) {
  return a;
 }

-function formatInput(args,format,images) {
+function formatInput(args, format, images) {
  var json_q = {};
  var format_i = format;
  if (format == '+')
@@ -35,26 +35,26 @@ function formatInput(args,format,images) {
  else if (format == 'r')
    format = ['o_number'];
  else if (format == 'l')
-    format = ['string','o_function'];
+    format = ['string', 'o_function'];
    

-  if(format[format.length-1] == 'o_object') {
-    if(objTypeOf(args[args.length-1]) != 'Object')
+  if(format[format.length - 1] == 'o_object') {
+    if(objTypeOf(args[args.length - 1]) != 'Object')
      args.push({});
  }
-  else if (format[format.length-1] == 'o_number') {
-    if(typeof(args[args.length-1]) != 'number' && objTypeOf(args[0])!='Object')
+  else if (format[format.length - 1] == 'o_number') {
+    if(typeof(args[args.length - 1]) != 'number' && objTypeOf(args[0]) != 'Object')
      args.push(1);
  }
-  else if (format[format.length-1] == 'o_function') {
-    if(objTypeOf(args[args.length-1]) != 'Function' && objTypeOf(args[0])!='Object')
+  else if (format[format.length - 1] == 'o_function') {
+    if(objTypeOf(args[args.length - 1]) != 'Function' && objTypeOf(args[0]) != 'Object')
      args.push(function(){});
  }


  if(args.length == format.length) {//making of arrays
    for (var i in format) {
-      if (format[i].substr(format[i].length-2,2)=='_a')
+      if (format[i].substr(format[i].length - 2, 2) == '_a')
        args[i] = makeArray(args[i]);
    }
  }
@@ -62,8 +62,8 @@ function formatInput(args,format,images) {
  if (args.length == 1 ) {
    if(format_i == 'r') json_q = {0:copy(args[0])};
    else if(format_i == '-') {
-      json_q=[];
-      json_q= copy(args[0]);
+      json_q = [];
+      json_q = copy(args[0]);
    }
  }
  else if (format_i == 'r' ) {
@@ -90,8 +90,8 @@ function formatInput(args,format,images) {
    if(format_i == '^') {
      var size = this.steps.length;
      var index = args[0];
-      index = (index==size)?index:index%size;
-      if (index<0) index += size+1;
+      index = (index == size) ? index : index % size;
+      if (index < 0) index += size + 1;
      json_q.push({
        index: index,
        name: args[1],
--- a/src/ImageSequencer.js
+++ b/src/ImageSequencer.js
@@ -8,7 +8,6 @@ ImageSequencer = function ImageSequencer(options) {
  options = options || {};
  options.inBrowser = options.inBrowser === undefined ? isBrowser : options.inBrowser;
  options.sequencerCounter = 0;
-
  function objTypeOf(object) {
    return Object.prototype.toString.call(object).split(' ')[1].slice(0, -1);
  }
@@ -152,7 +151,7 @@ ImageSequencer = function ImageSequencer(options) {
    sequencer.image = arguments[0];
    for (var arg in arguments) args.push(copy(arguments[arg]));
    var json_q = formatInput.call(this, args, 'l');
-    if(this.getSteps().length!=0){
+    if(this.getSteps().length != 0){
      this.options.sequencerCounter = 0;
      inputlog = [];
      this.steps = [];
@@ -169,9 +168,9 @@ ImageSequencer = function ImageSequencer(options) {
      setUI: this.setUI
    };
    function loadPrevSteps(ref){
-      if(prevSteps.length!=0){
+      if(prevSteps.length != 0){
        ref.addSteps(prevSteps);
-        prevSteps=[];
+        prevSteps = [];
      }
    }
    require('./ui/LoadImage')(sequencer, 'image', json_q.image, function() {
--- a/src/InsertStep.js
+++ b/src/InsertStep.js
@@ -21,15 +21,17 @@ function InsertStep(ref, index, name, o) {
    o.number = ref.options.sequencerCounter++; //Gives a Unique ID to each step
    o.name = o_.name || name || moduleInfo.name;
    o.description = o_.description || moduleInfo.description;
+    o.moduleInfo = o_.moduleInfo || moduleInfo;
    o.selector = o_.selector || 'ismod-' + name;
    o.container = o_.container || ref.options.selector;
    o.inBrowser = ref.options.inBrowser;
-
+    o.useWasm = (ref.options.useWasm === false) ? false : true;
    if (index == -1) index = ref.steps.length;

    o.step = {
      name: o.name,
      description: o.description,
+      moduleInfo: o.moduleInfo,
      ID: o.number,
      inBrowser: ref.options.inBrowser,
      ui: ref.options.ui,
--- a/src/Modules.js
+++ b/src/Modules.js
@@ -31,8 +31,9 @@ module.exports = {
  'invert': require('image-sequencer-invert'),
  'ndvi': require('./modules/Ndvi'),
  'ndvi-colormap': require('./modules/NdviColormap'),
-  'paint-bucket': require('./modules/PaintBucket'),
+  'noise-reduction': require('./modules/NoiseReduction'),
  'overlay': require('./modules/Overlay'),
+  'paint-bucket': require('./modules/PaintBucket'),
  'replace-color': require('./modules/ReplaceColor'),
  'resize': require('./modules/Resize'),
  'rotate': require('./modules/Rotate'),
--- a/src/ReplaceImage.js
+++ b/src/ReplaceImage.js
@@ -1,6 +1,6 @@
 // Uses a given image as input and replaces it with the output.
 // Works only in the browser.
-function ReplaceImage(ref,selector,steps,options) {
+function ReplaceImage(ref, selector, steps, options) {
  if(!ref.options.inBrowser) return false; // This isn't for Node.js
  var tempSequencer = ImageSequencer({ui: false});
  var this_ = ref;
@@ -26,18 +26,18 @@ function ReplaceImage(ref,selector,steps,options) {
      // https://github.com/publiclab/image-sequencer/issues/241
      // https://stackoverflow.com/a/20048852/1116657
      var raw = '';
-      var i,j,subArray,chunk = 5000;
-      for (i=0,j=arr.length; i<j; i+=chunk) {
-        subArray = arr.subarray(i,i+chunk);
+      var i, j, subArray, chunk = 5000;
+      for (i = 0, j = arr.length; i < j; i += chunk) {
+        subArray = arr.subarray(i, i + chunk);
        raw += String.fromCharCode.apply(null, subArray);
      }

      var base64 = btoa(raw);
-      var dataURL='data:image/'+ext+';base64,' + base64;
+      var dataURL = 'data:image/' + ext + ';base64,' + base64;
      make(dataURL);
    };

-    if(url.substr(0,11).toLowerCase()!='data:image/') xmlHTTP.send();
+    if(url.substr(0, 11).toLowerCase() != 'data:image/') xmlHTTP.send();
    else make(url);

    function make(url) {
@@ -46,7 +46,7 @@ function ReplaceImage(ref,selector,steps,options) {
        var sequence = this.addSteps(steps);
        if (ref.detectStringSyntax(steps))
          sequence = this.stringToSteps(steps);
-        sequence.run({stop:function(){}},function(out){
+        sequence.run({stop:function(){}}, function(out){
          img.src = out;
        });
      });
@@ -54,8 +54,8 @@ function ReplaceImage(ref,selector,steps,options) {
  }

  for (var i = 0; i < images.length; i++) {
-    replaceImage(images[i],steps);
-    if (i == images.length-1)
+    replaceImage(images[i], steps);
+    if (i == images.length - 1)
      options.callback();
  }
 }
--- a/src/Run.js
+++ b/src/Run.js
@@ -43,7 +43,7 @@ function Run(ref, json_q, callback, ind, progressObj) {
        inputForNextStep,
        function onEachStep() {

-          // This output is accessible by UI        
+          // This output is accessible by UI
          ref.steps[i].options.step.output = ref.steps[i].output.src;

          // Tell UI that step has been drawn.
@@ -75,7 +75,7 @@ function Run(ref, json_q, callback, ind, progressObj) {
    while (
      typeof prevstep == 'undefined' ||
        typeof prevstep.output == 'undefined'
-    ) {        
+    ) {
      prevstep = ref.steps[--json_q[0] - 1];
    }
    
--- a/src/Strings.js
+++ b/src/Strings.js
@@ -3,7 +3,7 @@ module.exports = function(steps, modulesInfo, addSteps, copy) {
  function toCliString() {
    var cliStringSteps = '"', cliOptions = {};
    for (var step in this.steps) {
-      var name = (typeof this.steps[step].options !== 'undefined')? this.steps[step].options.name : this.steps[step].name;
+      var name = (typeof this.steps[step].options !== 'undefined') ? this.steps[step].options.name : this.steps[step].name;
      if (name !== 'load-image'){
        cliStringSteps += `${name} `;
      }
@@ -52,7 +52,7 @@ module.exports = function(steps, modulesInfo, addSteps, copy) {

  // Stringifies one step of the sequence
  function stepToString(step) {
-    var arg = (step.name)?step.name:step.options.name;
+    var arg = (step.name) ? step.name : step.options.name;
    let inputs = modulesInfo(arg).inputs || {}, op = {};

    for (let input in inputs) {
--- a/src/modules/AddQR/Module.js
+++ b/src/modules/AddQR/Module.js
@@ -13,12 +13,12 @@ module.exports = function AddQR(options, UI) {

    var step = this;

-    return getPixels(input.src, function (err, oldPixels) {
+    return getPixels(input.src, function(err, oldPixels) {
      function changePixel(r, g, b, a) {
        return [r, g, b, a];
      }
-           
-      function extraManipulation(pixels,generateOutput) {
+
+      function extraManipulation(pixels, generateOutput) {
        if (err) {
          console.log(err);
          return;
@@ -28,15 +28,16 @@ module.exports = function AddQR(options, UI) {
      function output(image, datauri, mimetype) {
        step.output = { src: datauri, format: mimetype };
      }
-
      return require('../_nomodule/PixelManipulation.js')(input, {
        output: output,
+        ui: options.step.ui,
        changePixel: changePixel,
        extraManipulation: extraManipulation,
        format: input.format,
        image: options.image,
        inBrowser: options.inBrowser,
-        callback: callback
+        callback: callback,
+        useWasm:options.useWasm
      });
    });

--- a/src/modules/AddQR/info.json
+++ b/src/modules/AddQR/info.json
@@ -1,5 +1,5 @@
 {
-    "name": "Add QR",
+    "name": "add-qr",
    "description": "Adds QR corresponding to the given string",
    "url": "https://github.com/publiclab/image-sequencer/tree/master/MODULES.md",
    "inputs": {
--- a/src/modules/Average/Module.js
+++ b/src/modules/Average/Module.js
@@ -58,10 +58,12 @@ module.exports = function Average(options, UI) {

    return require('../_nomodule/PixelManipulation.js')(input, {
      output: output,
+      ui: options.step.ui,
      extraManipulation: extraManipulation,
      format: input.format,
      image: options.image,
-      callback: callback
+      callback: callback,
+      useWasm:options.useWasm
    });

  }
--- a/src/modules/Average/info.json
+++ b/src/modules/Average/info.json
@@ -1,5 +1,5 @@
 {
-    "name": "Average",
+    "name": "average",
    "description": "Average all pixel color",
    "inputs": {
    },
--- a/src/modules/Blend/Module.js
+++ b/src/modules/Blend/Module.js
@@ -30,7 +30,7 @@ module.exports = function Dynamic(options, UI, util) {
      this.output = input;
      UI.notify('Offset Unavailable', 'offset-notification');
      callback();
-    } 
+    }

    getPixels(priorStep.output.src, function(err, pixels) {
      options.firstImagePixels = pixels;
@@ -57,11 +57,13 @@ module.exports = function Dynamic(options, UI, util) {
      // run PixelManipulatin on second image's pixels
      return require('../_nomodule/PixelManipulation.js')(input, {
        output: output,
+        ui: options.step.ui,
        changePixel: changePixel,
        format: input.format,
        image: options.image,
        inBrowser: options.inBrowser,
-        callback: callback
+        callback: callback,
+        useWasm:options.useWasm
      });
    });
  }
--- a/src/modules/Blend/info.json
+++ b/src/modules/Blend/info.json
@@ -1,5 +1,5 @@
 {
-  "name": "Blend",
+  "name": "blend",
  "description": "Blend two chosen image steps with the given function. Defaults to using the red channel from image 1 and the green and blue and alpha channels of image 2. Easier to use interfaces coming soon!",
  "inputs": {
    "offset": {
--- a/src/modules/Blur/Blur.js
+++ b/src/modules/Blur/Blur.js
@@ -44,11 +44,11 @@ module.exports = exports = function(pixels, blur) {

    for (let y = -2; y <= 2; y++) {
      kernel.push([]);
-      for (let x = -2; x <= 2; x++) { 
+      for (let x = -2; x <= 2; x++) {
        let r = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));
        kernel[y + 2].push(Math.exp(-(r / s)));
        sum += kernel[y + 2][x + 2];
-      } 
+      }
    }

    for (let x = 0; x < 5; x++){
--- a/src/modules/Blur/Module.js
+++ b/src/modules/Blur/Module.js
@@ -29,10 +29,12 @@ module.exports = function Blur(options, UI) {

    return require('../_nomodule/PixelManipulation.js')(input, {
      output: output,
+      ui: options.step.ui,
      extraManipulation: extraManipulation,
      format: input.format,
      image: options.image,
-      callback: callback
+      callback: callback,
+      useWasm:options.useWasm
    });

  }
--- a/src/modules/Blur/info.json
+++ b/src/modules/Blur/info.json
@@ -1,5 +1,5 @@
 {
-    "name": "Blur",
+    "name": "blur",
    "description": "Applies a Gaussian blur given by the intensity value",
    "inputs": {
        "blur": {
--- a/src/modules/Brightness/Module.js
+++ b/src/modules/Brightness/Module.js
@@ -40,11 +40,13 @@ module.exports = function Brightness(options, UI) {

    return require('../_nomodule/PixelManipulation.js')(input, {
      output: output,
+      ui: options.step.ui, //don't pass this in if you don't want your module to support progress bars
      changePixel: changePixel,
      format: input.format,
      image: options.image,
      inBrowser: options.inBrowser,
-      callback: callback
+      callback: callback,
+      useWasm:options.useWasm
    });

  }
--- a/src/modules/Brightness/info.json
+++ b/src/modules/Brightness/info.json
@@ -1,5 +1,5 @@
 {
-  "name": "Brightness",
+  "name": "brightness",
  "description": "Change the brightness of the image by given percent value",
  "inputs": {
      "brightness": {
--- a/src/modules/CanvasResize/Module.js
+++ b/src/modules/CanvasResize/Module.js
@@ -45,11 +45,13 @@ module.exports = function canvasResize(options, UI) {

    return require('../_nomodule/PixelManipulation.js')(input, {
      output: output,
+      ui: options.step.ui,
      extraManipulation: extraManipulation,
      format: input.format,
      image: options.image,
      inBrowser: options.inBrowser,
-      callback: callback
+      callback: callback,
+      useWasm:options.useWasm
    });

  }
--- a/src/modules/CanvasResize/info.json
+++ b/src/modules/CanvasResize/info.json
@@ -1,5 +1,5 @@
 {
-    "name": "Resize Canvas",
+    "name": "canvas-resize",
    "description": "This module resizes the canvas and overlays the ouput of the previous step at given location",
    "inputs": {
        "width": {
--- a/src/modules/Channel/Module.js
+++ b/src/modules/Channel/Module.js
@@ -31,11 +31,13 @@ module.exports = function Channel(options, UI) {

    return require('../_nomodule/PixelManipulation.js')(input, {
      output: output,
+      ui: options.step.ui,
      changePixel: changePixel,
      format: input.format,
      image: options.image,
      inBrowser: options.inBrowser,
-      callback: callback
+      callback: callback,
+      useWasm:options.useWasm
    });

  }
--- a/src/modules/Channel/info.json
+++ b/src/modules/Channel/info.json
@@ -1,5 +1,5 @@
 {
-  "name": "Channel",
+  "name": "channel",
  "description": "Displays only one color channel of an image -- default is green",
  "inputs": {
    "channel": {
--- a/src/modules/ColorTemperature/Module.js
+++ b/src/modules/ColorTemperature/Module.js
@@ -63,11 +63,13 @@ module.exports = function ColorTemperature(options, UI) {

    return require('../_nomodule/PixelManipulation.js')(input, {
      output: output,
+      ui: options.step.ui,
      extraManipulation: extraManipulation,
      format: input.format,
      image: options.image,
      inBrowser: options.inBrowser,
-      callback: callback
+      callback: callback,
+      useWasm:options.useWasm
    });
  }

--- a/src/modules/ColorTemperature/info.json
+++ b/src/modules/ColorTemperature/info.json
@@ -1,5 +1,5 @@
 {
-    "name": "Color Temperature",
+    "name": "color-temperature",
    "description": "Changes the color temperature of the image.",
    "inputs": {
      "temperature": {
--- a/src/modules/Colorbar/info.json
+++ b/src/modules/Colorbar/info.json
@@ -1,5 +1,5 @@
 {
-    "name": "Colorbar",
+    "name": "colorbar",
    "description": "Generates a colorbar to lay over the image",
    "inputs": {
        "colormap": {
--- a/src/modules/Colormap/Colormap.js
+++ b/src/modules/Colormap/Colormap.js
@@ -1,13 +1,13 @@
 /*
- * Accepts a value from 0-255 and returns the new color-mapped pixel 
- * from a lookup table, which can be specified as an array of [begin, end] 
- * gradients, where begin and end are represented as [r, g, b] colors. In 
+ * Accepts a value from 0-255 and returns the new color-mapped pixel
+ * from a lookup table, which can be specified as an array of [begin, end]
+ * gradients, where begin and end are represented as [r, g, b] colors. In
 * combination, a lookup table which maps values from 0 - 255 smoothly from black to white looks like:
 * [
 *   [0, [0, 0, 0], [255, 255, 255]],
 *   [1, [255, 255, 255], [255, 255, 255]]
 * ]
- * 
+ *
 * Adapted from bgamari's work in Infragram: https://github.com/p-v-o-s/infragram-js/commit/346c97576a07b71a55671d17e0153b7df74e803b
 */

@@ -58,118 +58,118 @@ var colormaps = {
  ]),

  bluwhtgrngis:   colormap([
-    [0,     	[6,23,86],    [6,25, 84]    ],
-    [0.0625, [6,25,84],    [6,25, 84]    ],//1
-    [0.125,  [6,25,84],    [6,25, 84]    ],//2
-    [0.1875, [6,25,84],    [6,25, 84]    ],
-    [0.25,   [6,25,84],    [6,25,84]     ],
-    [0.3125, [6,25,84],    [9,24, 84]    ],//5
-    [0.3438, [9,24, 84],   [119,120,162] ],//5
-    [0.375,  [119,129,162],[249,250,251] ], //6
-    [0.406,  [249,250,251],[255,255,255] ], //6.5
-    [0.4375, [255,255,255],[255,255,255] ], //7 white
-    [0.50,   [255,255,255],[214,205,191] ],//8
-    [0.52,   [214,205,191],[178,175,96]  ],//8.2
-    [0.5625, [178,175,96], [151,176,53]  ],//9
-    [0.593,  [151,176,53], [146,188,12]  ],//9.5
-    [0.625,  [146,188,12], [96,161,1]    ], //10
-    [0.6875, [96,161,1],   [30,127,3]    ],//11
-    [0.75,   [30,127,3],   [0,99,1]      ],//12
-    [0.8125, [0,99,1],     [0,74,1]      ],//13
-    [0.875,  [0,74,1],     [0,52, 0]     ],//14
-    [0.9375, [0,52, 0],    [0,34,0]      ], //15
-    [0.968,  [0,34,0],     [68,70,67]    ] //16
+    [0,     	[6, 23, 86],    [6, 25, 84]    ],
+    [0.0625, [6, 25, 84],    [6, 25, 84]    ], //1
+    [0.125,  [6, 25, 84],    [6, 25, 84]    ], //2
+    [0.1875, [6, 25, 84],    [6, 25, 84]    ],
+    [0.25,   [6, 25, 84],    [6, 25, 84]     ],
+    [0.3125, [6, 25, 84],    [9, 24, 84]    ], //5
+    [0.3438, [9, 24, 84],   [119, 120, 162] ], //5
+    [0.375,  [119, 129, 162], [249, 250, 251] ], //6
+    [0.406,  [249, 250, 251], [255, 255, 255] ], //6.5
+    [0.4375, [255, 255, 255], [255, 255, 255] ], //7 white
+    [0.50,   [255, 255, 255], [214, 205, 191] ], //8
+    [0.52,   [214, 205, 191], [178, 175, 96]  ], //8.2
+    [0.5625, [178, 175, 96], [151, 176, 53]  ], //9
+    [0.593,  [151, 176, 53], [146, 188, 12]  ], //9.5
+    [0.625,  [146, 188, 12], [96, 161, 1]    ], //10
+    [0.6875, [96, 161, 1],   [30, 127, 3]    ], //11
+    [0.75,   [30, 127, 3],   [0, 99, 1]      ], //12
+    [0.8125, [0, 99, 1],     [0, 74, 1]      ], //13
+    [0.875,  [0, 74, 1],     [0, 52, 0]     ], //14
+    [0.9375, [0, 52, 0],    [0, 34, 0]      ], //15
+    [0.968,  [0, 34, 0],     [68, 70, 67]    ] //16
  ]),


  brntogrn:   colormap([
-    [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]      ] 
+    [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:     colormap([
-    [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]  ],	//inset
-    [0.3125,  [0,187,255],  [6,250,255]  ],
+    [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]  ],	//inset
+    [0.3125,  [0, 187, 255],  [6, 250, 255]  ],
    //            [0.348,   [0,218,255],  [8,252,251]  ],//inset
-    [0.375,   [8,252,251],  [27,254,228] ], 
-    [0.406,   [27,254,228], [70,255,187] ], //insert
-    [0.4375,  [70,255,187], [104,254,151]],
-    [0.47, 	 [104,254,151],[132,255,19] ],//insert
-    [0.50,    [132,255,19], [195,255,60] ],
-    [0.5625,  [195,255,60], [231,254,25] ],
-    [0.5976,  [231,254,25], [253,246,1]  ],//insert
-    [0.625,   [253,246,1],  [252,210,1]  ], //yellow
-    [0.657,   [252,210,1],  [255,183,0]  ],//insert
-    [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] ] 
+    [0.375,   [8, 252, 251],  [27, 254, 228] ],
+    [0.406,   [27, 254, 228], [70, 255, 187] ], //insert
+    [0.4375,  [70, 255, 187], [104, 254, 151]],
+    [0.47, 	 [104, 254, 151], [132, 255, 19] ], //insert
+    [0.50,    [132, 255, 19], [195, 255, 60] ],
+    [0.5625,  [195, 255, 60], [231, 254, 25] ],
+    [0.5976,  [231, 254, 25], [253, 246, 1]  ], //insert
+    [0.625,   [253, 246, 1],  [252, 210, 1]  ], //yellow
+    [0.657,   [252, 210, 1],  [255, 183, 0]  ], //insert
+    [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:   colormap([
-    [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]] 
+    [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]]

  ]),

  default:      colormap([
-    [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]   ] 
+    [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]   ]

  ]),

--- a/src/modules/Colormap/Module.js
+++ b/src/modules/Colormap/Module.js
@@ -24,11 +24,13 @@ module.exports = function Colormap(options, UI) {
    }
    return require('../_nomodule/PixelManipulation.js')(input, {
      output: output,
+      ui: options.step.ui,
      changePixel: changePixel,
      format: input.format,
      image: options.image,
      inBrowser: options.inBrowser,
-      callback: callback
+      callback: callback,
+      useWasm:options.useWasm
    });

  }
--- a/src/modules/Colormap/info.json
+++ b/src/modules/Colormap/info.json
@@ -1,5 +1,5 @@
 {
-  "name": "Colormap",
+  "name": "colormap",
  "description": "Maps brightness values (average of red, green & blue) to a given color lookup table, made up of a set of one more color gradients.\n\nFor example, 'cooler' colors like blue could represent low values, while 'hot' colors like red could represent high values.",
  "inputs": {
    "colormap": {
--- a/src/modules/Contrast/Module.js
+++ b/src/modules/Contrast/Module.js
@@ -29,10 +29,12 @@ module.exports = function Contrast(options, UI) {

    return require('../_nomodule/PixelManipulation.js')(input, {
      output: output,
+      ui: options.step.ui,
      extraManipulation: extraManipulation,
      format: input.format,
      image: options.image,
-      callback: callback
+      callback: callback,
+      useWasm:options.useWasm
    });

  }
--- a/src/modules/Contrast/info.json
+++ b/src/modules/Contrast/info.json
@@ -1,5 +1,5 @@
 {
-    "name": "Contrast",
+    "name": "contrast",
    "description": "Change the contrast of the image by given value",
    "inputs": {
        "contrast": {
--- a/src/modules/Convolution/Module.js
+++ b/src/modules/Convolution/Module.js
@@ -27,10 +27,12 @@ module.exports = function Convolution(options, UI) {

    return require('../_nomodule/PixelManipulation.js')(input, {
      output: output,
+      ui: options.step.ui,
      extraManipulation: extraManipulation,
      format: input.format,
      image: options.image,
-      callback: callback
+      callback: callback,
+      useWasm:options.useWasm
    });

  }
--- a/src/modules/Convolution/info.json
+++ b/src/modules/Convolution/info.json
@@ -1,5 +1,5 @@
 {
-    "name": "Convolution",
+    "name": "convolution",
    "description": "Image Convolution using a given 3x3 kernel matrix <a href='https://en.wikipedia.org/wiki/Kernel_(image_processing)'>Read more</a>",
    "inputs": {
  		"constantFactor":{
--- a/src/modules/Crop/Crop.js
+++ b/src/modules/Crop/Crop.js
@@ -1,4 +1,4 @@
-module.exports = function Crop(input,options,callback) {
+module.exports = function Crop(input, options, callback) {
  var defaults = require('./../../util/getDefaults.js')(require('./info.json'));
  var getPixels = require('get-pixels'),
    savePixels = require('save-pixels');
@@ -6,7 +6,7 @@ module.exports = function Crop(input,options,callback) {
  options.x = parseInt(options.x) || defaults.x;
  options.y = parseInt(options.y) || defaults.y;

-  getPixels(input.src,function(err,pixels){
+  getPixels(input.src, function(err, pixels){
    options.w = parseInt(options.w) || Math.floor(pixels.shape[0]);
    options.h = parseInt(options.h) || Math.floor(pixels.shape[1]);
    options.backgroundColor = options.backgroundColor || defaults.backgroundColor;
@@ -17,28 +17,29 @@ module.exports = function Crop(input,options,callback) {
    var iw = pixels.shape[0]; //Width of Original Image
    var ih = pixels.shape[1]; //Height of Original Image
    var backgroundArray = [];
-    backgroundColor = options.backgroundColor.split(' ');
+    backgroundColor = options.backgroundColor.substring(options.backgroundColor.indexOf('(') + 1, options.backgroundColor.length - 1); // extract only the values from rgba(_,_,_,_)
+    backgroundColor = backgroundColor.split(',');
    for(var i = 0; i < w ; i++){
-      backgroundArray = backgroundArray.concat([backgroundColor[0],backgroundColor[1],backgroundColor[2],backgroundColor[3]]);
+      backgroundArray = backgroundArray.concat([backgroundColor[0], backgroundColor[1], backgroundColor[2], backgroundColor[3]]);
    }
    // var newarray = new Uint8Array(4*w*h);
    var array = [];
    for (var n = oy; n < oy + h; n++) {
-      var offsetValue = 4*w*n;
-      if(n<ih){
-        var start = n*4*iw + ox*4;
-        var end = n*4*iw + ox*4 + 4*w;
+      var offsetValue = 4 * w * n;
+      if(n < ih){
+        var start = n * 4 * iw + ox * 4;
+        var end = n * 4 * iw + ox * 4 + 4 * w;
        var pushArray = Array.from(pixels.data.slice(start, end ));
-        array.push.apply(array,pushArray);
+        array.push.apply(array, pushArray);
      } else {
-        array.push.apply(array,backgroundArray);
+        array.push.apply(array, backgroundArray);
      }
    }
    
    var newarray = Uint8Array.from(array);
    pixels.data = newarray;
-    pixels.shape = [w,h,4];
-    pixels.stride[1] = 4*w;
+    pixels.shape = [w, h, 4];
+    pixels.stride[1] = 4 * w;

    options.format = input.format;

@@ -54,7 +55,7 @@ module.exports = function Crop(input,options,callback) {
    r.on('end', function(){
      var data = Buffer.concat(chunks, totalLength).toString('base64');
      var datauri = 'data:image/' + options.format + ';base64,' + data;
-      callback(datauri,options.format);
+      callback(datauri, options.format);
    });
  });
 };
--- a/src/modules/Crop/Module.js
+++ b/src/modules/Crop/Module.js
@@ -22,7 +22,7 @@ module.exports = function CropModule(options, UI) {
    setupComplete = false;

  // This function is caled everytime the step has to be redrawn
-  function draw(input,callback) {
+  function draw(input, callback) {

    var step = this;

@@ -32,7 +32,7 @@ module.exports = function CropModule(options, UI) {
    var parseCornerCoordinateInputs = require('../../util/ParseInputCoordinates');

    //parse the inputs
-    parseCornerCoordinateInputs(options,{
+    parseCornerCoordinateInputs(options, {
      src: input.src,
      x: { valInp: options.x, type: 'horizontal' },
      y: { valInp: options.y, type: 'vertical' },
--- a/src/modules/Crop/info.json
+++ b/src/modules/Crop/info.json
@@ -1,5 +1,5 @@
 {
-  "name": "Crop",
+  "name": "crop",
  "description": "Crop image to given x, y, w, h in pixels or % , measured from top left",
  "url": "https://github.com/publiclab/image-sequencer/tree/master/MODULES.md",
  "inputs": {
@@ -24,10 +24,10 @@
      "default": "(50%)"
    },
    "backgroundColor": {
-      "type": "string",
-      "desc": "Background Color (Four space separated RGBA values)",
-      "default": "255 255 255 255",
-      "placeholder": "255 255 255 255"
+      "type": "text",
+      "desc": "Background Color",
+      "default": "rgba(255,255,255,255)",
+      "id": "color-picker"
    }
  },
  "docs-link":"https://github.com/publiclab/image-sequencer/blob/main/docs/MODULES.md#crop-module"
--- a/src/modules/DecodeQr/Module.js
+++ b/src/modules/DecodeQr/Module.js
@@ -1,34 +1,34 @@
 /*
 * Decodes QR from a given image.
 */
-module.exports = function DoNothing(options,UI) {
+module.exports = function DoNothing(options, UI) {

  var output;
  var jsQR = require('jsqr');
  var getPixels = require('get-pixels');

  // This function is called everytime a step has to be redrawn
-  function draw(input,callback,progressObj) {
+  function draw(input, callback, progressObj) {

    progressObj.stop(true);
    progressObj.overrideFlag = true;

    var step = this;

-    getPixels(input.src,function(err,pixels){
+    getPixels(input.src, function(err, pixels) {

-      if(err) throw err;
+      if (err) throw err;

      var w = pixels.shape[0];
      var h = pixels.shape[1];
-      var decoded = jsQR(pixels.data,w,h);
+      var decoded = jsQR(pixels.data, w, h);


      // Tell Image Sequencer that this step is complete
-      options.step.qrval = (decoded)?decoded.data:'undefined';
+      options.step.qrval = (decoded) ? decoded.data : 'undefined';
    });

-    function output(image, datauri, mimetype){
+    function output(image, datauri, mimetype) {
      // This output is accessible by Image Sequencer
      step.output = {
        src: datauri,
@@ -37,9 +37,11 @@ module.exports = function DoNothing(options,UI) {
    }
    return require('../_nomodule/PixelManipulation.js')(input, {
      output: output,
+      ui: options.step.ui,
      format: input.format,
      image: options.image,
-      callback: callback
+      callback: callback,
+      useWasm:options.useWasm
    });

  }
--- a/src/modules/DecodeQr/info.json
+++ b/src/modules/DecodeQr/info.json
@@ -1,5 +1,5 @@
 {
-  "name": "Decode QR",
+  "name": "decode-qr",
  "description": "Search for and decode a QR code in the image",
  "inputs": {
  },
--- a/src/modules/Dither/Module.js
+++ b/src/modules/Dither/Module.js
@@ -1,8 +1,8 @@
-module.exports = function Dither(options, UI){
+module.exports = function Dither(options, UI) {
  var defaults = require('./../../util/getDefaults.js')(require('./info.json'));
  var output;

-  function draw(input,callback,progressObj){
+  function draw(input, callback, progressObj) {

    progressObj.stop(true);
    progressObj.overrideFlag = true;
@@ -15,7 +15,7 @@ module.exports = function Dither(options, UI){
      return pixels;
    }

-    function output(image,  datauri, mimetype){
+    function output(image, datauri, mimetype) {
      // This output is accessible by Image Sequencer
      step.output = { src: datauri, format: mimetype };

@@ -23,10 +23,12 @@ module.exports = function Dither(options, UI){

    return require('../_nomodule/PixelManipulation.js')(input, {
      output: output,
+      ui: options.step.ui,
      extraManipulation: extraManipulation,
      format: input.format,
      image: options.image,
-      callback: callback
+      callback: callback,
+      useWasm:options.useWasm
    });
  }
  return {
--- a/src/modules/Dither/info.json
+++ b/src/modules/Dither/info.json
@@ -1,5 +1,5 @@
 {
-    "name": "Dither",
+    "name": "dither",
    "description": "Approximates a color from a mixture of other colors when the required color is not available, creating illusions of the color that is not present actually.<a href='https://en.wikipedia.org/wiki/Dither'>Read more</a>",
    "inputs": {
      "dither": {
--- a/src/modules/DrawRectangle/DrawRectangle.js
+++ b/src/modules/DrawRectangle/DrawRectangle.js
@@ -9,17 +9,18 @@ module.exports = exports = function(pixels, options){
 	  ih = pixels.shape[1],
    thickness = Number(options.thickness) || defaults.thickness,
 	  ex =  options.endX = Number(options.endX) - thickness || iw - 1,
-	  ey = options.endY = Number(options.endY) -thickness || ih - 1,
+	  ey = options.endY = Number(options.endY) - thickness || ih - 1,
    color = options.color || defaults.color;
-  color = color.split(' ');
+  color = color.substring(color.indexOf('(') + 1, color.length - 1); // extract only the values from rgba(_,_,_,_)
+  color = color.split(',');

  var drawSide = function(startX, startY, endX, endY){
-    for (var n=startX; n <= endX+thickness; n++){
-      for (var k=startY; k <= endY+thickness; k++){
+    for (var n = startX; n <= endX + thickness; n++){
+      for (var k = startY; k <= endY + thickness; k++){
        pixels.set(n, k, 0, color[0]);
        pixels.set(n, k, 1, color[1]);
        pixels.set(n, k, 2, color[2]);
-        pixels.set(n, k, 3, color[3]);
+        //pixels.set(n, k, 3, color[3]);
      }
    }
  };
--- a/src/modules/DrawRectangle/Module.js
+++ b/src/modules/DrawRectangle/Module.js
@@ -1,6 +1,6 @@
 module.exports = function DrawRectangle(options, UI) {

-    
+
  var output;

  function draw(input, callback, progressObj) {
@@ -27,11 +27,13 @@ module.exports = function DrawRectangle(options, UI) {

    return require('../_nomodule/PixelManipulation.js')(input, {
      output: output,
+      ui: options.step.ui,
      changePixel: changePixel,
      extraManipulation: extraManipulation,
      format: input.format,
      image: options.image,
-      callback: callback
+      callback: callback,
+      useWasm:options.useWasm
    });

  }
--- a/src/modules/DrawRectangle/info.json
+++ b/src/modules/DrawRectangle/info.json
@@ -1,5 +1,5 @@
 {
-    "name": "Draw Rectangle",
+    "name": "draw-rectangle",
    "description": "It draws a rectangle on the image",
    "inputs": {
  		"startingX":{
@@ -33,9 +33,10 @@
      },

      "color":{
-        "type": "string",
-        "desc": "RGBA values separated by a space",
-        "default": "0 0 0 255"
+        "type": "text",
+        "desc": "Select color",
+        "default": "rgba(20,20,20,1)",
+        "id": "color-picker"
      }
    },
 "docs-link":"https://github.com/publiclab/image-sequencer/blob/main/docs/MODULES.md#draw-rectangle-module"
--- a/src/modules/Dynamic/Module.js
+++ b/src/modules/Dynamic/Module.js
@@ -1,9 +1,9 @@
-module.exports = function Dynamic(options,UI) {
+module.exports = function Dynamic(options, UI) {

  var output;

  // This function is called on every draw.
-  function draw(input,callback,progressObj) {
+  function draw(input, callback, progressObj) {

    progressObj.stop(true);
    progressObj.overrideFlag = true;
@@ -26,8 +26,8 @@ module.exports = function Dynamic(options,UI) {

    channels.forEach(function(channel) {
      if (options.hasOwnProperty(channel)) options[channel + '_function'] = generator(options[channel]);
-      else if (channel === 'alpha')        options['alpha_function'] = function() { return 255; };
-      else                                 options[channel + '_function'] = generator(options.monochrome);
+      else if (channel === 'alpha') options['alpha_function'] = function() { return 255; };
+      else options[channel + '_function'] = generator(options.monochrome);
    });

    function changePixel(r, g, b, a) {
@@ -45,12 +45,12 @@ module.exports = function Dynamic(options,UI) {
    }

    /* Functions to get the neighbouring pixel by position (x,y) */
-    function getNeighbourPixel(pixels,curX,curY,distX,distY){
+    function getNeighbourPixel(pixels, curX, curY, distX, distY) {
      return [
-        pixels.get(curX+distX,curY+distY,0)
-        ,pixels.get(curX+distX,curY+distY,1)
-        ,pixels.get(curX+distX,curY+distY,2)
-        ,pixels.get(curX+distX,curY+distY,3)
+        pixels.get(curX + distX, curY + distY, 0),
+        pixels.get(curX + distX, curY + distY, 1),
+        pixels.get(curX + distX, curY + distY, 2),
+        pixels.get(curX + distX, curY + distY, 3)
      ];
    }

@@ -71,7 +71,7 @@ module.exports = function Dynamic(options,UI) {
      }
    }

-    function output(image,datauri,mimetype){
+    function output(image, datauri, mimetype) {

      // This output is accessible by Image Sequencer
      step.output = { src: datauri, format: mimetype };
@@ -79,13 +79,15 @@ module.exports = function Dynamic(options,UI) {
    }
    return require('../_nomodule/PixelManipulation.js')(input, {
      output: output,
+      ui: options.step.ui,
      changePixel: changePixel,
      getNeighbourPixel: getNeighbourPixel,
      getNeighborPixel: getNeighbourPixel,
      format: input.format,
      image: options.image,
      inBrowser: options.inBrowser,
-      callback: callback
+      callback: callback,
+      useWasm:options.useWasm
    });

  }
--- a/src/modules/Dynamic/info.json
+++ b/src/modules/Dynamic/info.json
@@ -1,5 +1,5 @@
 {
-  "name": "Dynamic",
+  "name": "dynamic",
  "description": "A module which accepts JavaScript math expressions to produce each color channel based on the original image's color. See <a href='https://publiclab.org/wiki/infragram-sandbox'>Infragrammar</a>.",
  "inputs": {
    "red": {
--- a/src/modules/EdgeDetect/EdgeUtils.js
+++ b/src/modules/EdgeDetect/EdgeUtils.js
@@ -5,7 +5,7 @@ const kernelx = [
    [-1, 0, 1]
  ],
  kernely = [
-    [-1,-2,-1],
+    [-1, -2, -1],
    [ 0, 0, 0],
    [ 1, 2, 1]
  ];
@@ -69,8 +69,8 @@ function sobelFilter(pixels, x, y) {
        yn = y + b - 1;

      if (isOutOfBounds(pixels, xn, yn)) {
-        gradX += pixels.get(xn+1, yn+1, 0) * kernelx[a][b];
-        gradY += pixels.get(xn+1, yn+1, 0) * kernely[a][b];
+        gradX += pixels.get(xn + 1, yn + 1, 0) * kernelx[a][b];
+        gradY += pixels.get(xn + 1, yn + 1, 0) * kernely[a][b];
      }
      else {
        gradX += pixels.get(xn, yn, 0) * kernelx[a][b];
@@ -98,7 +98,7 @@ function categorizeAngle(angle){
  * 2 => NE-SW
  * 3 => N-S
  * 4 => NW-SE
-  */  
+  */
 }

 function isOutOfBounds(pixels, x, y){
@@ -107,7 +107,7 @@ function isOutOfBounds(pixels, x, y){

 const removeElem = (arr = [], elem) => {
  return arr = arr.filter((arrelem) => {
-    return arrelem !== elem; 
+    return arrelem !== elem;
  });
 };

@@ -120,7 +120,7 @@ function nonMaxSupress(pixels, grads, angles) {

      let angleCategory = categorizeAngle(angles[x][y]);

-      if (!isOutOfBounds(pixels, x - 1, y - 1) && !isOutOfBounds(pixels, x+1, y+1)){
+      if (!isOutOfBounds(pixels, x - 1, y - 1) && !isOutOfBounds(pixels, x + 1, y + 1)){
        switch (angleCategory){
        case 1:
          if (!((grads[x][y] >= grads[x][y + 1]) && (grads[x][y] >= grads[x][y - 1]))) {
@@ -186,17 +186,17 @@ function hysteresis(strongEdgePixels, weakEdgePixels){
    let x = pixel[0],
      y = pixel[1];

-    if (weakEdgePixels.includes([x+1, y])) {
-      removeElem(weakEdgePixels, [x+1, y]);
-    } 
-    else if (weakEdgePixels.includes([x-1, y])) {
-      removeElem(weakEdgePixels, [x-1, y]);
+    if (weakEdgePixels.includes([x + 1, y])) {
+      removeElem(weakEdgePixels, [x + 1, y]);
    }
-    else if (weakEdgePixels.includes([x, y+1])) {
-      removeElem(weakEdgePixels, [x, y+1]);
-    } 
-    else if(weakEdgePixels.includes([x, y-1])) {
-      removeElem(weakEdgePixels, [x, y-1]);
+    else if (weakEdgePixels.includes([x - 1, y])) {
+      removeElem(weakEdgePixels, [x - 1, y]);
+    }
+    else if (weakEdgePixels.includes([x, y + 1])) {
+      removeElem(weakEdgePixels, [x, y + 1]);
+    }
+    else if(weakEdgePixels.includes([x, y - 1])) {
+      removeElem(weakEdgePixels, [x, y - 1]);
    }
  });
 }
--- a/src/modules/EdgeDetect/Module.js
+++ b/src/modules/EdgeDetect/Module.js
@@ -21,11 +21,11 @@ module.exports = function edgeDetect(options, UI) {

    // Blur the image
    const internalSequencer = ImageSequencer({ inBrowser: false, ui: false });
-    return internalSequencer.loadImage(input.src, function () {
-      internalSequencer.importJSON([{ 'name': 'blur', 'options': {blur: options.blur} }]);
+    return internalSequencer.loadImage(input.src, function() {
+      internalSequencer.importJSON([{ 'name': 'blur', 'options': { blur: options.blur } }]);
      return internalSequencer.run(function onCallback(internalOutput) {
-        require('get-pixels')(internalOutput, function(err, blurPixels){
-          if (err){
+        require('get-pixels')(internalOutput, function(err, blurPixels) {
+          if (err) {
            return;
          }

@@ -34,22 +34,24 @@ module.exports = function edgeDetect(options, UI) {
            return [(r + g + b) / 3, (r + g + b) / 3, (r + g + b) / 3, a];
          }

-          function extraManipulation(){
+          function extraManipulation() {
            return require('./EdgeUtils')(blurPixels, options.highThresholdRatio, options.lowThresholdRatio, options.hysteresis);
          }

          function output(image, datauri, mimetype) {
            step.output = { src: datauri, format: mimetype };
          }
-      
+
          return require('../_nomodule/PixelManipulation.js')(input, {
            output: output,
+            ui: options.step.ui,
            changePixel: changePixel,
            extraManipulation: extraManipulation,
            format: input.format,
            image: options.image,
            inBrowser: options.inBrowser,
-            callback: callback
+            callback: callback,
+            useWasm: options.useWasm
          });
        });
      });
--- a/src/modules/EdgeDetect/info.json
+++ b/src/modules/EdgeDetect/info.json
@@ -1,5 +1,5 @@
 {
-    "name": "Detect Edges",
+    "name": "edge-detect",
    "description": "This module detects edges using the Canny method, which first Gaussian blurs the image to reduce noise (amount of blur configurable in settings as `options.blur`), then applies a number of steps to highlight edges, resulting in a greyscale image where the brighter the pixel, the stronger the detected edge.<a href='https://en.wikipedia.org/wiki/Canny_edge_detector'> Read more. </a>",
    "inputs": {
        "blur": {
--- a/src/modules/Exposure/Module.js
+++ b/src/modules/Exposure/Module.js
@@ -2,12 +2,12 @@
 * Changes the Image Exposure
 */

-module.exports = function Exposure(options,UI){
+module.exports = function Exposure(options, UI) {

  var defaults = require('./../../util/getDefaults.js')(require('./info.json'));
  var output;

-  function draw(input,callback,progressObj){
+  function draw(input, callback, progressObj) {

    options.exposure = options.exposure || defaults.exposure;
    var exposure = Math.pow(2, options.exposure);
@@ -16,34 +16,36 @@ module.exports = function Exposure(options,UI){

    var step = this;

-    function changePixel(r, g, b, a){
+    function changePixel(r, g, b, a) {

-      r = Math.min(255, r*exposure);
-      g = Math.min(255, g*exposure);
-      b = Math.min(255, b*exposure);
+      r = Math.min(255, r * exposure);
+      g = Math.min(255, g * exposure);
+      b = Math.min(255, b * exposure);
      return [r, g, b, a];
    }

-    function output(image,datauri,mimetype){
+    function output(image, datauri, mimetype) {

      // This output is accessible by Image Sequencer
-      step.output = {src:datauri,format:mimetype};
+      step.output = { src: datauri, format: mimetype };

    }

    return require('../_nomodule/PixelManipulation.js')(input, {
      output: output,
+      ui: options.step.ui,
      changePixel: changePixel,
      format: input.format,
      image: options.image,
      inBrowser: options.inBrowser,
-      callback: callback
+      callback: callback,
+      useWasm:options.useWasm
    });

  }
  return {
    options: options,
-    draw:  draw,
+    draw: draw,
    output: output,
    UI: UI
  };
--- a/src/modules/Exposure/info.json
+++ b/src/modules/Exposure/info.json
@@ -1,5 +1,5 @@
 {
-  "name": "Exposure",
+  "name": "exposure",
  "description": "Change the exposure of the image by given exposure value",
  "inputs": {
      "exposure": {
--- a/src/modules/FisheyeGl/info.json
+++ b/src/modules/FisheyeGl/info.json
@@ -1,5 +1,5 @@
 {
-  "name": "Fisheye GL",
+  "name": "fisheye-gl",
  "description": "Correct fisheye, or barrel distortion, in images (with WebGL -- adapted from fisheye-correction-webgl by @bluemir).",
  "requires": [ "webgl" ],
  "inputs": {
--- a/src/modules/FlipImage/Module.js
+++ b/src/modules/FlipImage/Module.js
@@ -14,12 +14,12 @@ module.exports = function FlipImage(options, UI) {

    var step = this;

-    return getPixels(input.src, function(err, oldPixels){
+    return getPixels(input.src, function(err, oldPixels) {
      function changePixel(r, g, b, a) {
        return [r, g, b, a];
      }
      function extraManipulation(pixels) {
-        if (err){
+        if (err) {
          console.log(err);
          return;
        }
@@ -28,15 +28,17 @@ module.exports = function FlipImage(options, UI) {
      function output(image, datauri, mimetype) {
        step.output = { src: datauri, format: mimetype };
      }
-      
+
      return require('../_nomodule/PixelManipulation.js')(input, {
        output: output,
+        ui: options.step.ui,
        changePixel: changePixel,
        extraManipulation: extraManipulation,
        format: input.format,
        image: options.image,
        inBrowser: options.inBrowser,
-        callback: callback
+        callback: callback,
+        useWasm:options.useWasm
      });
    });

--- a/src/modules/FlipImage/flipImage.js
+++ b/src/modules/FlipImage/flipImage.js
@@ -11,15 +11,15 @@ module.exports = function flipImage(oldPixels, pixels, axis) {

  function flip(){
    if(axis.toLowerCase() == 'vertical'){
-      for (var n=0; n < width; n++){
-        for (var m=0; m < height; m++){
+      for (var n = 0; n < width; n++){
+        for (var m = 0; m < height; m++){
          copyPixel(n, m, n, height - m - 1);
        }
      }
    }
    else {
-      for (var n=0; n < width; n++){
-        for (var m=0; m < height; m++){
+      for (var n = 0; n < width; n++){
+        for (var m = 0; m < height; m++){
          copyPixel(n, m, width - n - 1, m);
        }
      }
--- a/src/modules/FlipImage/info.json
+++ b/src/modules/FlipImage/info.json
@@ -1,5 +1,5 @@
 {
-  "name": "Flip Image",
+  "name": "flip-image",
  "description": "Flip The Image On The Specified Axis.",
  "inputs": {
    "Axis": {
--- a/src/modules/GammaCorrection/Module.js
+++ b/src/modules/GammaCorrection/Module.js
@@ -30,11 +30,13 @@ module.exports = function Gamma(options, UI) {

    return require('../_nomodule/PixelManipulation.js')(input, {
      output: output,
+      ui: options.step.ui,
      changePixel: changePixel,
      format: input.format,
      image: options.image,
      inBrowser: options.inBrowser,
-      callback: callback
+      callback: callback,
+      useWasm:options.useWasm
    });

  }
--- a/src/modules/GammaCorrection/info.json
+++ b/src/modules/GammaCorrection/info.json
@@ -1,5 +1,5 @@
 {
-    "name": "Gamma Correction",
+    "name": "gamma-correction",
    "description": "Apply gamma correction on the image <a href='https://en.wikipedia.org/wiki/Gamma_correction'>Read more</a>",
    "inputs": {
        "adjustment": {
--- a/src/modules/Gradient/info.json
+++ b/src/modules/Gradient/info.json
@@ -1,5 +1,5 @@
 {
-    "name": "Gradient",
+    "name": "gradient",
    "description": "Gives a gradient of the image",
    "inputs": {},
    "docs-link":"https://github.com/publiclab/image-sequencer/blob/main/docs/MODULES.md#gradient-module"
--- a/src/modules/GridOverlay/GridOverlay.js
+++ b/src/modules/GridOverlay/GridOverlay.js
@@ -4,25 +4,26 @@ module.exports = exports = function(pixels, options){
  options.x = Number(options.x) || defaults.x;
  options.y = Number(options.y) || defaults.y;
  color = options.color || defaults.color;
-  color = color.split(' ');
+  color = color.substring(color.indexOf('(') + 1, color.length - 1); // extract only the values from rgba(_,_,_,_)
+  color = color.split(',');

-  for(var x = 0; x < pixels.shape[0]; x+=options.x){
+  for(var x = 0; x < pixels.shape[0]; x += options.x){
    for(var y = 0 ; y < pixels.shape[1]; y++){
      pixels.set(x, y, 0, color[0]);
      pixels.set(x, y, 1, color[1]);
      pixels.set(x, y, 2, color[2]);
-      pixels.set(x, y, 3, color[3]);
+      //pixels.set(x, y, 3, color[3]);
    }
  }
    
-  for(var y = 0; y < pixels.shape[1]; y+=options.y){
+  for(var y = 0; y < pixels.shape[1]; y += options.y){
    for(var x = 0 ; x < pixels.shape[0]; x++){
      pixels.set(x, y, 0, color[0]);
      pixels.set(x, y, 1, color[1]);
      pixels.set(x, y, 2, color[2]);
-      pixels.set(x, y, 3, color[3]);
+      //pixels.set(x, y, 3, color[3]);
    }
-  } 
+  }

  return pixels;
 };
--- a/src/modules/GridOverlay/Module.js
+++ b/src/modules/GridOverlay/Module.js
@@ -1,6 +1,6 @@

-module.exports = function GridOverlay(options,UI) {
-  
+module.exports = function GridOverlay(options, UI) {
+
  var output;

  function draw(input, callback, progressObj) {
@@ -9,7 +9,7 @@ module.exports = function GridOverlay(options,UI) {
    progressObj.overrideFlag = true;

    var step = this;
-    
+
    function extraManipulation(pixels) {
      pixels = require('./GridOverlay')(pixels, options);
      return pixels;
@@ -24,14 +24,16 @@ module.exports = function GridOverlay(options,UI) {

    return require('../_nomodule/PixelManipulation.js')(input, {
      output: output,
+      ui: options.step.ui,
      extraManipulation: extraManipulation,
      format: input.format,
      image: options.image,
      inBrowser: options.inBrowser,
-      callback: callback
+      callback: callback,
+      useWasm: options.useWasm
    });

-  
+
  }

  return {
--- a/src/modules/GridOverlay/info.json
+++ b/src/modules/GridOverlay/info.json
@@ -1,5 +1,5 @@
 {
-    "name": "GridOverlay",
+    "name": "grid-overlay",
    "description": "Overlays a grid over an Image",
    "inputs": {
        "x": {
@@ -14,8 +14,10 @@
        },
        "color":{
            "type": "string",
-            "desc": "RGBA values separated by a space",
-            "default": "0 0 0 255"
+            "desc": "Pick color",
+            "default": "rgba(0,0,0,1)",
+            "id": "color-picker"
+
          }
    },
    "only": "browser" 
--- a/src/modules/Histogram/Module.js
+++ b/src/modules/Histogram/Module.js
@@ -74,12 +74,14 @@ module.exports = function Channel(options, UI) {

    return require('../_nomodule/PixelManipulation.js')(input, {
      output: output,
+      ui: options.step.ui,
      changePixel: changePixel,
      extraManipulation: extraManipulation,
      format: input.format,
      image: options.image,
      inBrowser: options.inBrowser,
-      callback: callback
+      callback: callback,
+      useWasm:options.useWasm
    });

  }
--- a/src/modules/Histogram/info.json
+++ b/src/modules/Histogram/info.json
@@ -1,5 +1,5 @@
 {
-    "name": "Histogram",
+    "name": "histogram",
    "description": "Calculates the histogram for the image",
    "inputs": {
        "gradient": {
--- a/src/modules/ImportImage/Module.js
+++ b/src/modules/ImportImage/Module.js
@@ -32,7 +32,7 @@ module.exports = function ImportImageModule(options, UI) {
    step.metadata.input = input;
    // options.format = require('../../util/GetFormat')(options.imageUrl);

-    var helper = ImageSequencer({ inBrowser: options.inBrowser, ui: false });
+    var helper = ImageSequencer({ inBrowser: options.inBrowser, ui: false, useWasm: options.useWasm });
    helper.loadImages(options.imageUrl, () => {
      step.output = helper.steps[0].output;
      callback();
--- a/src/modules/ImportImage/Ui.js
+++ b/src/modules/ImportImage/Ui.js
@@ -7,7 +7,7 @@ module.exports = function ImportImageModuleUi(step, ui) {
    var dropzoneId = 'dropzone-import-image-' + step.ID;

    // add a file input listener
-    var dropZone ='\
+    var dropZone = '\
    <div class="dropzone" style="padding: 30px;margin: 10px 20% 30px;border: 4px dashed #ccc;border-radius: 8px;text-align: center;color: #444;" id="' + dropzoneId + '">\
          <p>\
        <i>Select or drag in an image to overlay.</i>\
--- a/src/modules/ImportImage/info.json
+++ b/src/modules/ImportImage/info.json
@@ -1,5 +1,5 @@
 {
-  "name": "Import Image",
+  "name": "import-image",
  "description": "Import a new image and replace the original with it. Future versions may enable a blend mode. Specify an image by URL or by file selector.",
  "url": "https://github.com/publiclab/image-sequencer/tree/master/MODULES.md",
  "inputs": {
--- a/src/modules/Invert/Module.js
+++ b/src/modules/Invert/Module.js
@@ -30,7 +30,8 @@ function Invert(options, UI) {
      format: input.format,
      image: options.image,
      inBrowser: options.inBrowser,
-      callback: callback
+      callback: callback,
+      useWasm:options.useWasm
    });

  }
@@ -43,7 +44,7 @@ function Invert(options, UI) {
  };
 }
 var info = {
-  'name': 'Invert',
+  'name': 'invert',
  'description': 'Inverts the image.',
  'inputs': {
  }
--- a/src/modules/Invert/info.json
+++ b/src/modules/Invert/info.json
@@ -1,5 +1,5 @@
 {
-  "name": "Invert",
+  "name": "invert",
  "description": "Inverts the image.",
  "inputs": {
  },
--- a/src/modules/Ndvi/Module.js
+++ b/src/modules/Ndvi/Module.js
@@ -41,11 +41,13 @@ module.exports = function Ndvi(options, UI) {

    return require('../_nomodule/PixelManipulation.js')(input, {
      output: output,
+      ui: options.step.ui,
      changePixel: changePixel,
      format: input.format,
      image: options.image,
      inBrowser: options.inBrowser,
-      callback: modifiedCallback
+      callback: modifiedCallback,
+      useWasm:options.useWasm
    });

  }
--- a/src/modules/Ndvi/Ui.js
+++ b/src/modules/Ndvi/Ui.js
@@ -18,7 +18,7 @@ module.exports = function CropModuleUi(step, ui) {
      var xPos = e.pageX - offset.left;
      var yPos = e.pageY - offset.top;
      var ndvi = canvas.getContext('2d').getImageData(xPos, yPos, 1, 1).data[0];
-      ndvi = ndvi/127.5 - 1 ;
+      ndvi = ndvi / 127.5 - 1 ;
      ndvi = ndvi.toFixed(2);
      ndviImage[0].title = 'NDVI: ' + ndvi;
    });
--- a/src/modules/Ndvi/info.json
+++ b/src/modules/Ndvi/info.json
@@ -1,5 +1,5 @@
 {
-  "name": "NDVI",
+  "name": "ndvi",
  "description": "Normalized Difference Vegetation Index, or NDVI, is an image analysis technique used with aerial photography. It's a way to visualize the amounts of infrared and other wavelengths of light reflected from vegetation by comparing ratios of blue and red light absorbed versus green and IR light reflected. NDVI is used to evaluate the health of vegetation in satellite imagery, where it correlates with how much photosynthesis is happening. This is helpful in assessing vegetative health or stress. <a href='https://publiclab.org/ndvi'>Read more</a>.<br /><br/>This is designed for use with red-filtered single camera <a href='http://publiclab.org/infragram'>DIY Infragram cameras</a>; change to 'blue' for blue filters",
  "inputs": {
    "filter": {
--- a/src/modules/NdviColormap/info.json
+++ b/src/modules/NdviColormap/info.json
@@ -1,5 +1,5 @@
 {
-    "name": "NDVI-Colormap",
+    "name": "ndvi-colormap",
    "description": "Sequentially Applies NDVI and Colormap steps",
    "inputs": {},
    "docs-link": "https://github.com/publiclab/image-sequencer/blob/main/docs/MODULES.md#ndvi-colormap-module"
--- a/src/modules/NoiseReduction/Module.js
+++ b/src/modules/NoiseReduction/Module.js
@@ -0,0 +1,40 @@
+module.exports = function NoiseReduction(options, UI) {
+  var defaults = require('./../../util/getDefaults.js')(require('./info.json'));
+  var output;
+
+  function draw(input, callback, progressObj) {
+
+    progressObj.stop(true);
+    progressObj.overrideFlag = true;
+
+    var step = this;
+    options.method = options.method || defaults.method;
+
+    function extraManipulation(pixels) {
+      pixels = require('./NoiseReduction.js')(pixels, options.method);
+      return pixels;
+    }
+
+    function output(image, datauri, mimetype) {
+      // This output is accessible by Image Sequencer
+      step.output = { src: datauri, format: mimetype };
+
+    }
+
+    return require('../_nomodule/PixelManipulation.js')(input, {
+      output: output,
+      ui: options.step.ui,
+      extraManipulation: extraManipulation,
+      format: input.format,
+      image: options.image,
+      callback: callback,
+      useWasm:options.useWasm
+    });
+  }
+  return {
+    options: options,
+    draw: draw,
+    output: output,
+    UI: UI
+  };
+};
--- a/src/modules/NoiseReduction/NoiseReduction.js
+++ b/src/modules/NoiseReduction/NoiseReduction.js
@@ -0,0 +1,81 @@
+module.exports = function Noise(pixels, method) {
+  let neighbourX = [-1, -1, -1, 0, 0, 0, 1, 1, 1];
+  let neighbourY = [-1, 0, 1, -1, 0, 1, -1, 0, 1];
+
+  if(method == 'Median Filtering'){
+
+    for(let y = 0; y < pixels.shape[1]; y++){
+      for(let x = 0; x < pixels.shape[0]; x++){
+        let i = 0, k = 0, windowr = [], windowg = [], windowb = [];
+
+        while( k <= 8){
+          let newX = x + neighbourX[k], newY = y + neighbourY[k];
+  
+          if( newX >= 0 && newX < pixels.shape[0])
+          {
+            if( newY >= 0 && newY < pixels.shape[1]){
+              windowr[i] = pixels.get((newX), (newY), 0);
+              windowg[i] = pixels.get((newX), (newY), 1);
+              windowb[i] = pixels.get((newX), (newY), 2);
+              i++;
+            }
+          }
+          k++;
+        }
+
+        windowr.sort();
+        windowg.sort();
+        windowb.sort();
+        
+        if(i % 2 == 0)
+        {
+          let value = windowr[i / 2] + windowr[(i / 2) - 1];
+          pixels.set(x, y, 0, value);
+
+          value = windowg[i / 2] + windowg[(i / 2) - 1];
+          pixels.set(x, y, 1, value);
+
+          value = windowb[i / 2] + windowb[(i / 2) - 1];
+          pixels.set(x, y, 2, value);
+
+        }
+        else {
+          pixels.set(x, y, 0, windowr[Math.floor(i / 2)]);
+          pixels.set(x, y, 1, windowg[Math.floor(i / 2)]);
+          pixels.set(x, y, 2, windowb[Math.floor(i / 2)]);
+
+        }
+      }
+    }
+  }
+  else if(method == 'Mean Filtering'){
+    
+    for(let y = 0; y < pixels.shape[1]; y++){
+      for(let x = 0; x < pixels.shape[0]; x++){
+        let i = 0, k = 0, sumR = 0, sumG = 0, sumB = 0;
+
+        while( k <= 8){
+          let newX = x + neighbourX[k], newY = y + neighbourY[k];
+
+          if( newX >= 0 && newX < pixels.shape[0])
+          {
+            if( newY >= 0 && newY < pixels.shape[1]){
+              sumR += pixels.get(newX, newY, 0);
+              sumG += pixels.get(newX, newY, 1);
+              sumB += pixels.get(newX, newY, 2);
+              i++;
+            }
+          }
+          k++;
+        }
+
+        pixels.set(x, y, 0, sumR / i);
+        pixels.set(x, y, 1, sumG / i);
+        pixels.set(x, y, 2, sumB / i);
+
+      }
+    }
+  }
+  
+  return pixels;
+};
--- a/src/modules/NoiseReduction/index.js
+++ b/src/modules/NoiseReduction/index.js
@@ -0,0 +1,4 @@
+module.exports = [
+  require('./Module'),
+  require('./info.json')
+];
--- a/src/modules/NoiseReduction/info.json
+++ b/src/modules/NoiseReduction/info.json
@@ -0,0 +1,13 @@
+{
+    "name": "Noise Reduction",
+    "description": "Reduces noise from Image",
+    "inputs": {
+        "method": {
+            "type": "select",
+            "desc": "Select the noise filtering method",
+            "default": "Median Filtering",
+            "values": ["Mean Filtering","Median Filtering"]
+        }
+    },
+    "docs-link":""
+}
--- a/src/modules/Overlay/Module.js
+++ b/src/modules/Overlay/Module.js
@@ -65,11 +65,13 @@ module.exports = function Dynamic(options, UI, util) {
      // run PixelManipulation on first Image pixels
      return require('../_nomodule/PixelManipulation.js')(baseStepOutput, {
        output: output,
+        ui: options.step.ui,
        changePixel: changePixel,
        format: baseStepOutput.format,
        image: baseStepImage,
        inBrowser: options.inBrowser,
-        callback: callback
+        callback: callback,
+        useWasm:options.useWasm
      });
    });
  }
--- a/src/modules/Overlay/info.json
+++ b/src/modules/Overlay/info.json
@@ -1,5 +1,5 @@
 {
-    "name": "Overlay",
+    "name": "overlay",
    "description": "Overlays an Image over another at a given position(x,y) in pixels or in %",
    "inputs": {
        "x": {
--- a/src/modules/PaintBucket/Module.js
+++ b/src/modules/PaintBucket/Module.js
@@ -23,11 +23,13 @@ module.exports = function PaintBucket(options, UI) {

    return require('../_nomodule/PixelManipulation.js')(input, {
      output: output,
+      ui: options.step.ui,
      extraManipulation: extraManipulation,
      format: input.format,
      image: options.image,
      inBrowser: options.inBrowser,
-      callback: callback
+      callback: callback,
+      useWasm:options.useWasm
    });
  }

--- a/src/modules/PaintBucket/PaintBucket.js
+++ b/src/modules/PaintBucket/PaintBucket.js
@@ -21,8 +21,9 @@ module.exports = exports = function(pixels, options) {
    tolerance = options.tolerance || defaults.tolerance,
    maxFactor = (1 + tolerance / 100),
    minFactor = (1 - tolerance / 100);
-
-  fillColor = fillColor.split(' ');
+  fillColor = fillColor.substring(fillColor.indexOf('(') + 1, fillColor.length - 1); // extract only the values from rgba(_,_,_,_)
+  fillColor = fillColor.split(',');
+    
  function isSimilar(currx, curry) {
    return (pixels.get(currx, curry, 0) >= r * minFactor && pixels.get(currx, curry, 0) <= r * maxFactor &&
      pixels.get(currx, curry, 1) >= g * minFactor && pixels.get(currx, curry, 1) <= g * maxFactor &&
--- a/src/modules/PaintBucket/info.json
+++ b/src/modules/PaintBucket/info.json
@@ -1,5 +1,5 @@
 {
-  "name": "PaintBucket",
+  "name": "paint-bucket",
  "description": "Fill color in pixels",
  "inputs": {
      "startingX": {
@@ -14,9 +14,9 @@
      },
      "fillColor": {
        "type": "String",
-        "desc": "four space separated numbers representing the RGBA values of fill-color",
-        "default": "100 100 100 255",
-        "placeholder": "100 100 100 255"
+        "desc": "Pick color to fill",
+        "default": "rgba(100,100,100,1)",
+        "id": "color-picker"
      },
      "tolerance": {
        "type": "range",
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Harsh Khandeparkar	a091bd9ab8	Merge branch 'main' into user-prefs	2019-06-23 15:05:12 +05:30
Harsh Khandeparkar	257113a948	Shorten UI code with new `$step` method (#710 ) * update dist Signed-off-by: tech4GT <varun.gupta1798@gmail.com> dist update Revert "dist update" This reverts commit 9ee2a987e8f978961656ae8f71f6e6702bbbd30d. * Merge remote-tracking branch 'upstream/main' into main * add dist * add new func * update itermediate * changes * fix gitignore * use scopeQuery * add mapHtmlTypes test * scopeQuery tests added * try something * change * fix stepui test * Remove double quotes * update new code * refactor to spec	2019-06-21 15:11:10 -04:00
jywarren	0eb3f263f9	version bump to v3.5.0 with WebAssembly acceleration	2019-06-21 12:15:51 -04:00
Slytherin	30659d4656	Using wasm to accelerate PixelManipulation.js (#1093 ) * Add wasm code * First working model * Add PixelManipulation web assembly code to browser and node * Tests corrected for modules * Corrected test script * Add wasm bechmarks * Update Readme * Applies toggling functionality and refactored PixelManipulation code * Added documentation and corrected wasm toggling * change noise reduction module to use wasm code * Corrected formatting and removed extra comments * Add default wasm option and made README changes * Fixed negative test timings * combined benchmarks file * Update benchmark.js * Removed copies of wasm file and corrected test format * Update package.json Co-Authored-By: Jeffrey Warren <jeff@unterbahn.com> * Added wasm file and removed redundant code * Removed earlier benchmarks * move test/core/sequencer/benchmark.js to its own test command, not passing to tape-spec * Solves memory leaks and blank lines * Solves memory leaks and blank lines * Added handler for node code * Modify test script * Modify test script * Correct doc and removed pace fuctionality	2019-06-21 10:54:56 -04:00
dependabot-preview[bot]	c3af98ea93	Bump gpu.js from 2.0.0-rc.14 to 2.0.0-rc.15 (#1116 ) Bumps [gpu.js](https://github.com/gpujs/gpu.js) from 2.0.0-rc.14 to 2.0.0-rc.15. - [Release notes](https://github.com/gpujs/gpu.js/releases) - [Commits](https://github.com/gpujs/gpu.js/compare/2.0.0-rc.14...2.0.0-rc.15) Signed-off-by: dependabot-preview[bot] <support@dependabot.com>	2019-06-18 08:03:01 -04:00
aashna27	b34ec00efd	Added Color Picker for selecting RGBA values in modules (#1095 ) * Added Color Picker for selecting RGBA values in modules * added scripts from node_modules * selector-all added and alpha removed for some modules * Modified description	2019-06-16 13:38:51 -04:00
jywarren	e1e9d57d7a	bump to v3.4.5	2019-06-15 14:30:56 -04:00
aashna27	ec6ce155f5	Solved Module undefined error (#1104 ) * Resolve Module undefined error * Lower-case-hyphen module names	2019-06-15 14:25:53 -04:00
dependabot-preview[bot]	70e7876230	Bump lint-staged from 8.2.0 to 8.2.1 (#1111 ) Bumps [lint-staged](https://github.com/okonet/lint-staged) from 8.2.0 to 8.2.1. - [Release notes](https://github.com/okonet/lint-staged/releases) - [Commits](https://github.com/okonet/lint-staged/compare/v8.2.0...v8.2.1) Signed-off-by: dependabot-preview[bot] <support@dependabot.com>	2019-06-15 12:18:50 -04:00
Varun Gupta	80cb5b1194	Make progress bars on UI true (#1112 ) * Make progress bars on UI true Signed-off-by: tech4GT <varun.gupta1798@gmail.com> * update docs Signed-off-by: tech4GT <varun.gupta1798@gmail.com> * fix typo Signed-off-by: tech4GT <varun.gupta1798@gmail.com>	2019-06-15 10:51:02 -04:00
freerangeandy	f5d7b0ae09	add moduleInfo to step construction (#1107 ) (#1110 )	2019-06-14 12:32:58 -04:00
aashna27	440c3e0ad0	Eslint operator spacing config (#1109 ) * Eslint operator spacing config * consistent spacing after comma * comma styling config * Trailing spaces config	2019-06-13 16:59:43 -04:00
aashna27	9eac21897a	Added noise reduction module (#1105 ) * Added Noise Removal Module * Remove ChangePixel Function	2019-06-13 13:09:13 -04:00
Harsh Khandeparkar	3e645f9f7d	error handling	2019-03-29 14:47:46 +00:00
Harsh Khandeparkar	4b9d67ca4a	docs	2019-03-28 21:04:27 +00:00
Harsh Khandeparkar	a2cd5bafd6	create API	2019-03-28 20:27:55 +00:00
Harsh Khandeparkar	e505ef6c25	Create userPrefs.js	2019-03-28 19:36:18 +00:00