['--no-sandbox', '--disable-setuid-sandbox']

Bumps [jsdom](https://github.com/jsdom/jsdom) from 14.0.0 to 15.0.0.
- [Release notes](https://github.com/jsdom/jsdom/releases)
- [Changelog](https://github.com/jsdom/jsdom/blob/master/Changelog.md)
- [Commits](https://github.com/jsdom/jsdom/compare/14.0.0...15.0.0)

Signed-off-by: dependabot[bot] <support@dependabot.com>

.codecov.yml

@@ -0,0 +1,11 @@
+comment:
+  layout: "reach, diff, flags, files"
+  behavior: default
+  require_changes: false  # if true: only post the comment if coverage changes
+  require_base: no        # [yes :: must have a base report to post]
+  require_head: yes       # [yes :: must have a head report to post]
+  branches: null          # branch names that can post comment
+coverage:
+  status:
+    project: off
+    patch: off

.github/ISSUE_TEMPLATE.md

@@ -10,7 +10,7 @@
 
 ### Please show us where to look
 
-http://sequencer.publiclab.org...
+https://beta.sequencer.publiclab.org
 
 
 ### What's your PublicLab.org username?

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,4 +1,4 @@
-Fixes #[Add issue number here.]
+Fixes #0000  (<=== Replace `0000` with the Issue Number)
 
 Make sure these boxes are checked before your pull request (PR) is ready to be reviewed and merged. Thanks!
 

.github/config.yml

@@ -17,7 +17,7 @@ newPRWelcomeComment: |
 # Comment to be posted to on pull requests merged by a first time user
 firstPRMergeComment: |
  Congrats on merging your first pull request! 🙌🎉⚡️ 
- Your code will likely be published to https://sequencer.publiclab.org in the next few days. 
+ Your code will be published to https://beta.sequencer.publiclab.org in a day or two. 
  In the meantime, can you tell us your Twitter handle so we can thank you properly?
  Now that you've completed this, you can help someone else take their first step!
  See: [Public Lab's coding community!](https://code.publiclab.org)

.github/first-timers.yml

@@ -0,0 +1,12 @@
+# You can change the labels to suit your needs if "first-timers-only" is not what you are looking for.
+# These are some examples.
+labels:
+  - first-timers-only
+  - help wanted
+  
+#If you would like to add your own template for the issue, add an .md file to your .github folder
+template: .github/fto-template.md
+  
+# You can create the issue in a different repo than where the problem is. Just make sure you installed the bot on the configured repository.
+# The issue will link back to the original repository where the contribution will be made.
+#repository: repo-name 

.github/fto-template.md

@@ -0,0 +1,51 @@
+Hi, this is a [first-timers-only issue](https://code.publiclab.org/#r=all). This means we've worked to make it more legible to folks who either **haven't contributed to our codebase before, or even folks who haven't contributed to open source before**. 
+
+If that's you, we're interested in helping you take the first step and can answer questions and help you out as you do. Note that we're especially interested in contributions from people from groups underrepresented in free and open source software!
+
+We know that the process of creating a pull request is the biggest barrier for new contributors. This issue is for you 💝
+
+If you have contributed before, **consider leaving this one for someone new**, and looking through our general [help wanted](https://github.com/publiclab/image-sequencer/labels/help-wanted) issues. Thanks!
+
+### 🤔 What you will need to know.
+
+Nothing. This issue is meant to welcome you to Open Source :) We are happy to walk you through the process.
+
+### 📋 Step by Step
+
+- [ ] 🙋 **Claim this issue**: Comment below. If someone else has claimed it, ask if they've opened a pull request already and if they're stuck -- maybe you can help them solve a problem or move it along!
+
+- [ ] 📝 **Update** the file [$FILENAME]($BRANCH_URL) in the `$REPO` repository (press the little pen Icon) and edit the line as shown below. 
+
+[See this page](https://code.publiclab.org/#r=all) for some help in taking your first steps!
+
+Below is a "diff" showing in red (and a `-`) which lines to remove, and in green (and a `+`) which lines to add:
+
+```diff
+
+$DIFF
+
+```
+- [ ] 💾 **Commit** your changes
+
+- [ ] 🔀 **Start a Pull Request**. There are two ways how you can start a pull request:
+
+1. If you are familiar with the terminal or would like to learn it, [here is a great tutorial](https://egghead.io/series/how-to-contribute-to-an-open-source-project-on-github) on how to send a pull request using the terminal.
+
+2. You can also [edit files directly in your browser](https://help.github.com/articles/editing-files-in-your-repository/) and open a pull request from there. 
+
+- [ ] 🏁 **Done** Ask in comments for a review :)
+
+### Please keep us updated
+
+💬⏰ - We encourage contributors to be respectful to the community and provide an update **within a week** of claiming a first-timers-only issue. We're happy to keep it assigned to you as long as you need if you update us with a request for more time or help, but if we don't see any activity a week after you claim it we may reassign it to give someone else a chance. Thank you in advance! 
+
+If this happens to you, don't sweat it! Grab another open issue.
+
+### Is someone else already working on this?
+
+🔗- We encourage contributors to link to the original issue in their pull request so all users can easily see if someone's already started on it. 
+
+👥- **If someone seems stuck, offer them some help!** Otherwise, [take a look at some other issues you can help with](https://code.publiclab.org/#r=all). Thanks!
+
+### 🤔❓ Questions?
+Leave a comment below!

.gitignore

@@ -27,6 +27,10 @@ build/Release
 node_modules
 node_modules/*
 
+# Dist Files
+dist/*
+dist
+
 # Optional npm cache directory
 .npm
 
@@ -44,4 +48,5 @@ test/core/modules/test_outputs
 test/core/modules/test_outputs/*
 node_modules/
 node_modules/*
-test_outputs
+test_outputs
+/test_outputs

.npmignore

@@ -37,6 +37,8 @@ test.js
 output.txt
 output/
 
+
+
 examples/
 icons/
 

.travis.yml

@@ -15,6 +15,8 @@ script:
   - npm test
   - npm run test-ui
   - grunt build
+after_success:
+  - bash <(curl -s https://codecov.io/bash)
 after_script:
   - ./cc-test-reporter after-build --exit-code $TRAVIS_TEST_RESULT
 addons:

CONTRIBUTING.md

@@ -11,6 +11,8 @@ 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)
+* [Grunt Tasks](#grunt-tasks)
+* [UI Helper Methods](#ui-helper-methods)
 
 ****
 
@@ -26,7 +28,7 @@ If you find a bug please list it here, and help us develop Image Sequencer by [o
 
 ## Contributing modules
 
-Most contributions can happen in modules, rather than to core library code. Modules and their [corresponding info files](#info-file) are included into the library in this file: https://github.com/publiclab/image-sequencer/blob/master/src/Modules.js#L5-L7
+Most contributions can happen in modules, rather than to core library code. Modules and their [corresponding info files](#info-file) are included into the library in this file: https://github.com/publiclab/image-sequencer/blob/main/src/Modules.js#L5-L7
 
 Module names, descriptions, and parameters are set in the `info.json` file -- [see below](#info-file).
 
@@ -62,6 +64,8 @@ Image Sequencer modules are designed to be run either in the browser or in a Nod
 
 https://github.com/tech4gt/image-sequencer
 
+### Browser/node compatibility
+
 If you wish to offer a module without browser-compatibility, please indicate this in the returned `info` object as:
 
 module.exports = [
@@ -108,7 +112,20 @@ function ModuleName(options,UI) {
       // load a standard info.json file.
       ];
 ```
+### Running a browser-only module in node
+If your module has browser specific code or you are consuming a dependency which does the `gl-context` api. We designed this api especially for webl based modules but since it runs the module in a headless browser, ti supports all browser specific APIs.
 
+The api must be used in the following format
+```js
+var step = this;
+
+    if (!options.inBrowser) {
+      require('../_nomodule/gl-context')(input, callback, step, options);
+    }
+    else {
+      /* Browser specific code */
+    }
+```
 
 ### options
 
@@ -139,7 +156,7 @@ input = {
   pixelManipulation: "general purpose pixel manipulation API, see https://github.com/publiclab/image-sequencer/blob/master/src/modules/_nomodule/PixelManipulation.js"
 }
 ```
-For example usage for pixelManipulation see https://github.com/publiclab/image-sequencer/blob/master/src/modules/Invert/Module.js
+For example usage of pixelManipulation see https://github.com/publiclab/image-sequencer/blob/main/src/modules/Invert/Module.js
 
 **The module is included in the browser inside a script tag and since the code runs directly in the browser if any other module is required apart from the apis available on the input object, it should be either bundled with the module code and imported in es6 format or the module code must be browserified before distribution for browser**
 
@@ -261,9 +278,9 @@ The `progressObj` parameter of `draw()` is not consumed unless a custom progress
 
 ### Module example
 
-See existing module `green-channel` for an example: https://github.com/publiclab/image-sequencer/tree/master/src/modules/GreenChannel/Module.js
+See existing module `channel` for an example: https://github.com/publiclab/image-sequencer/blob/main/src/modules/Channel/Module.js
 
-The `green-channel` module is included into the core modules here: https://github.com/publiclab/image-sequencer/blob/master/src/Modules.js#L5-L7
+The `channel` module is included into the core modules here: https://github.com/publiclab/image-sequencer/blob/main/src/Modules.js#L5-L7
 
 For help integrating, please open an issue.
 
@@ -345,4 +362,70 @@ module.exports =
             }
         }
     });
-```
+```
+
+## Grunt Tasks
+This repository has different grunt tasks for different uses. The source code is in the [Gruntfile](https://github.com/publiclab/image-sequencer/blob/main/Gruntfile.js).
+
+The following command is used for running the tasks: `grunt [task-name]`. Here `[task-name]` should be replaced by the name of the task to be run. To run the default task run `grunt` without any options.
+
+#### Tasks
+1. **compile**: Compiles/Browserifies the dist files in `/dist/image-sequencer.js` and `/dist/image-sequencer-ui.js`.
+2. **build**: Compiles the files as in the **compile** task and minifies/uglifies dist files in `/dist/image-sequencer.min.js` and `/dist/image-sequencer-ui.min.js`.
+3. **watch**: Checks for any changes in the source code and runs the **compile** task if any changes are found.
+4. **serve**: Compiles the dist files as in the **compile** task and starts a local server on `localhost:3000` to host the demo site in `/examples/` directory. Also runs the **watch** task.
+5. **production**: Compiles and minifies dist files in `/dist/image-sequencer.js` and `/dist/image-sequencer-ui.js` without the `.min.js` extension to include minified files in the demo site. This script should only be used in production mode while deploying.
+6. **default**: Runs the **watch** task as default.
+
+## UI Helper Methods
+
+### scopeQuery
+
+###### Path: `/examples/lib/scopeQuery.js`
+
+The method returns a scoped `jQuery` object which only searches for elements inside a given scope (a DOM element).
+
+To use the method, 
+* import the `scopeSelector` and `scopeSelectorAll` methods from `lib/scopeQuery.js`
+* call the methods with scope as a parameter
+	
+```js
+var scopeQuery = require('./scopeQuery');
+
+var $step = scopeQuery.scopeSelector(scope),
+    $stepAll = scopeQuery.scopeSelectorAll(scope);	
+```
+This will return an object with a constructor which returns a `jQuery` object (from inside the scope) but with new `elem` and `elemAll` methods.
+
+#### Methods of the Returned Object
+* `elem()`: Selects an element inside the scope; 
+* `elemAll()`: Selects all the instances of a given element inside the scope;
+
+#### Example
+
+```js
+//The scope is a div element with id=“container“ and there are three divs in it 
+//with ids „1“, „2“, and „3“, and all of them have a „child“ class attribute
+
+var $step = require('./scopeQuery').scopeSelector(document.getElementById('container'));
+
+$step('#1'); // returns the div element with id=“1“
+$step('#1').hide().elemAll('.child').fadeOut(); // abruptly hides the div element with id=“1“ and fades out all other div elements
+```
+
+These two methods are chainable and will always return elements from inside the scope.
+
+#### Usage
+
+Instead of using
+
+```js
+$(step.ui.querySelector('query')).show().hide();
+$(step.ui.querySelectorAll('q2')).show().hide();
+```
+The following code can be used
+
+```js
+$step('query').show().hide();
+$stepAll('q2').show().hide();
+```

Gruntfile.js

@@ -15,30 +15,46 @@ module.exports = function(grunt) {
         livereload: true
       },
       source: {
-        files: ["src/**/*", "Gruntfile.js", "examples/lib/*","examples/demo.js"],
-        tasks: ["build:js"]
+        files: ["src/**/*", "Gruntfile.js", "examples/lib/*", "examples/demo.js"],
+        tasks: ["compile"]
       }
     },
 
     browserify: {
-      dist: {
+      core: {
         src: ["src/ImageSequencer.js"],
         dest: "dist/image-sequencer.js"
-      }, 
-      js: {
+      },
+      ui: {
         src: ["examples/demo.js"],
         dest: "dist/image-sequencer-ui.js"
+      },
+      prodcore: {
+        src: ["src/ImageSequencer.js"],
+        dest: "dist/image-sequencer.brow.js"
+      },
+      produi: {
+        src: ["examples/demo.js"],
+        dest: "dist/image-sequencer-ui.brow.js"
       }
     },
 
     uglify: {
-      dist: {
+      core: {
         src: ["./dist/image-sequencer.js"],
         dest: "./dist/image-sequencer.min.js"
       },
-      js: {
+      ui: {
         src: ['dist/image-sequencer-ui.js'],
         dest: 'dist/image-sequencer-ui.min.js'
+      },
+      prodcore: {
+        src: ["dist/image-sequencer.brow.js"],
+        dest: "dist/image-sequencer.js"
+      },
+      produi: {
+        src: ["dist/image-sequencer-ui.brow.js"],
+        dest: "dist/image-sequencer-ui.js"
       }
     },
     browserSync: {
@@ -53,6 +69,8 @@ module.exports = function(grunt) {
 
   /* Default (development): Watch files and build on change. */
   grunt.registerTask("default", ["watch"]);
-  grunt.registerTask("build", ["browserify:dist","browserify:js","uglify:dist","uglify:js"]);
-  grunt.registerTask("serve", ["browserify:dist","browserify:js","uglify:dist","uglify:js","browserSync", "watch"]);
+  grunt.registerTask("build", ["browserify:core", "browserify:ui", "uglify:core", "uglify:ui"]);
+  grunt.registerTask("serve", ["browserify:core", "browserify:ui", "browserSync", "watch"]);
+  grunt.registerTask("compile", ["browserify:core", "browserify:ui"]);
+  grunt.registerTask("production", ["browserify:prodcore", "browserify:produi", "uglify:prodcore", "uglify:produi"]);
 };

README.md

@@ -1,7 +1,12 @@
 Image Sequencer
 ====
 
-[![Build Status](https://travis-ci.org/publiclab/image-sequencer.svg?branch=master)](https://travis-ci.org/publiclab/image-sequencer)
+
+[![Build Status](https://travis-ci.org/publiclab/image-sequencer.svg?branch=master)](https://travis-ci.org/publiclab/image-sequencer) [![Maintainability](https://api.codeclimate.com/v1/badges/5906996dd2e90aca6398/maintainability)](https://codeclimate.com/github/publiclab/image-sequencer/maintainability) [![Codecov](https://img.shields.io/codecov/c/github/publiclab/image-sequencer.svg?logo=codecov)](https://codecov.io/gh/publiclab/image-sequencer)
+
+- **Latest Stable Demo**: https://sequencer.publiclab.org
+- **Latest Beta Demo**: https://beta.sequencer.publiclab.org
+- **Stable Branch**: https://github.com/publiclab/image-sequencer/tree/stable/
 
 ## Why
 
@@ -14,9 +19,9 @@ Image Sequencer is different from other image processing systems because it's _n
 
 The following diagrams attempt to explain how the applications various components interconnect:
 
-![general diagram](https://i.imgur.com/S3Dou2M.jpg)
+![general diagram](https://publiclab.org/i/30547.png?s=o)
 
-![workflow diagram](https://raw.githubusercontent.com/publiclab/image-sequencer/master/examples/images/diagram-workflows.png)
+![workflow diagram](https://raw.githubusercontent.com/publiclab/image-sequencer/main/examples/images/diagram-workflows.png)
 
 It also for prototypes other related ideas:
 
@@ -24,15 +29,17 @@ It also for prototypes other related ideas:
 * test-based image processing -- the ability to create a sequence of steps that do the same task as other image processing tools, provable with example before/after images to compare with
 * logging each step -- to produce an evidentiary record of modifications to an original image
 * cascading changes -- change an earlier step's settings, and see those changes affect later steps
-* "small modules" -- based extensibility: see [Contributing](https://github.com/publiclab/image-sequencer/blob/master/CONTRIBUTING.md)
+* "small modules" -- based extensibility: see [Contributing](https://github.com/publiclab/image-sequencer/blob/main/CONTRIBUTING.md)
+
 
 ## Examples
 
-* [Simple Demo](https://publiclab.github.io/image-sequencer/)
+* [Simple Demo](https://sequencer.publiclab.org)
+* [Latest Beta Demo](https://beta.sequencer.publiclab.org)
 
 A diagram of this running 5 steps on a single sample image may help explain how it works:
 
-![example workflow](https://raw.githubusercontent.com/publiclab/image-sequencer/master/examples/images/diagram-6-steps.png)
+![example workflow](https://raw.githubusercontent.com/publiclab/image-sequencer/main/examples/images/diagram-6-steps.png)
 
 ## Jump to:
 
@@ -43,8 +50,8 @@ A diagram of this running 5 steps on a single sample image may help explain how
 * [Method Chaining](#method-chaining)
 * [Multiple Images](#multiple-images)
 * [Creating a User Interface](#creating-a-user-interface)
-* [Contributing](https://github.com/publiclab/image-sequencer/blob/master/CONTRIBUTING.md)
-* [Submit a Module](https://github.com/publiclab/image-sequencer/blob/master/CONTRIBUTING.md#contributing-modules)
+* [Contributing](https://github.com/publiclab/image-sequencer/blob/main/CONTRIBUTING.md)
+* [Submit a Module](https://github.com/publiclab/image-sequencer/blob/main/CONTRIBUTING.md#contributing-modules)
 * [Get Demo Bookmarklet](https://publiclab.org/w/imagesequencerbookmarklet)
 
 ## Installation
@@ -52,12 +59,12 @@ A diagram of this running 5 steps on a single sample image may help explain how
 This library conveniently works in the browser, in Node, and on the command line (CLI).
 
 ### Unix based platforms
-You can set up a local environment to test the UI with `sudo npm run setup` followed by `npm start`
+You can set up a local environment to test the UI with `sudo npm run setup` followed by `npm start`.
 
 ### Windows
 Our npm scripts do not support windows shells, please run the following snippet in PowerShell.
 ```powershell
-npm i ; npm i -g grunt grunt-cli ; grunt serve
+npm i ; npm i -g grunt grunt-cli ; grunt build; grunt serve
 ```
 In case of a port conflict please run the following
 ```powershell
@@ -66,12 +73,12 @@ npm i -g http-server ; http-server -p 3000
 
 ### Browser
 
-Just include [image-sequencer.js](https://publiclab.github.io/image-sequencer/dist/image-sequencer.js) in the Head section of your web page. See the [demo here](https://publiclab.github.io/image-sequencer/)!
+Just include [image-sequencer.min.js](https://github.com/publiclab/image-sequencer/blob/stable/dist/image-sequencer.min.js) in the Head section of your web page. See the [demo here](https://sequencer.publiclab.org)!
 
 ### Node (via NPM)
 
 (You must have NPM for this)
-Add `image-sequencer` to your list of dependencies and run `$ npm install`
+Add `image-sequencer` to your list of dependencies and run `npm install`
 
 ### CLI
 
@@ -88,7 +95,7 @@ $ npm install image-sequencer -g
 ```
 $ npm run debug invert
 ```
- 
+
 ## Quick Usage
 
 ### Initializing the Sequencer
@@ -108,7 +115,7 @@ Note: Browser CORS Restrictions apply. Some browsers may not allow local images
 from other folders, and throw a Security Error instead.
 
 ```js
-  sequencer.replaceImage(selector,steps,optional_options);
+sequencer.replaceImage(selector,steps,optional_options);
 ```
 
 `optional_options` allows passing additional arguments to the module itself.
@@ -116,8 +123,8 @@ from other folders, and throw a Security Error instead.
 For example:
 
 ```js
-  sequencer.replaceImage('#photo','invert');
-  sequencer.replaceImage('#photo',['invert','ndvi-red']);
+sequencer.replaceImage('#photo','invert');
+sequencer.replaceImage('#photo',['invert','ndvi-red']);
 ```
 
 ### Data URL usage
@@ -143,7 +150,7 @@ Image Sequencer also provides a CLI for applying operations to local files. The
 The basic format for using the CLI is as follows:
 
 ```
-    $ ./index.js -i [PATH] -s step-name
+$ ./index.js -i [PATH] -s step-name
 ```
 
 *NOTE:* On Windows you'll have to use `node index.js` instead of `./index.js`.
@@ -151,7 +158,7 @@ The basic format for using the CLI is as follows:
 The CLI also can take multiple steps at once, like so:
 
 ```
-    $ ./index.js -i [PATH] -s "step-name-1 step-name-2 ..."
+$ ./index.js -i [PATH] -s "step-name-1 step-name-2 ..."
 ```
 
 But for this, double quotes must wrap the space-separated steps.
@@ -194,15 +201,17 @@ var sequencer = ImageSequencer();
 ### Loading an Image into the Sequencer
 
 The `loadImage` method is used to load an image into the sequencer. It accepts
-a name and an image. The method also accepts an optional callback.
+an image `src`, either a URL or a data-url. The method also accepts an optional callback.
 
 ```js
-sequencer.loadImage(image_src,optional_callback);
+sequencer.loadImage(image_src, optional_callback);
 ```
+
 On `Node.js` the `image_src` may be a DataURI or a local path or a URL.
 
 On browsers, it may be a DatURI, a local image or a URL (Unless this violates
 CORS Restrictions). To sum up, these are accepted:
+
 * Images in the same domain (or directory - for a local implementation)
 * CORS-Proof images in another domain.
 * DataURLs
@@ -212,7 +221,7 @@ The callback is called within the scope of a sequencer. For example:
 (addSteps is defined later)
 
 ```js
-sequencer.loadImage('SRC',function(){
+sequencer.loadImage('SRC', function(){
   this.addSteps('module-name');
 });
 ```
@@ -234,7 +243,39 @@ If multiple images are to be added, `modules` is an array, which holds the names
 to be added, in that particular order.
 
 optional_otions is just an optional parameter, in object form, which you might
-want to provide to the modules. 
+want to provide to the modules.
+
+A variety of syntaxes are supported by Image Sequencer to add multiple steps and configurations quickly for module chaining. The project supports the string syntax, designed to be compact and URL friendly, and JSON, for handling more complex sequences. This can be achieved by passing strings to `sequencer.addStep()`:
+
+
+```js
+sequencer.addSteps('invert,channel');
+sequencer.addSteps(['invert','channel']);
+```
+
+For passing default configurations ({} is optional):
+
+```js
+sequencer.addSteps('brightness{}');
+```
+
+For passing custom configurations:
+
+```js
+sequencer.addSteps('brightness{brightness:80}');
+```
+
+For passing multiple custom configurations:
+
+```js
+sequencer.addSteps('crop{x:120|y:90}')
+```
+
+For passing multiple custom configurable modules:
+
+```js
+sequencer.addSteps('crop{x:130|y:80},brightness{brightness:80}')
+```
 
 return value: **`sequencer`** (To allow method chaining)
 
@@ -391,7 +432,7 @@ Image sequencer supports stringifying a sequence which is appended to the url an
 channel{channel:green},invert{}
 ```
 
-Sequencer also supports the use of `()` in place of `{}` for backward compatibility with older links. (This syntax is deprecated and should be avoided as far as possible)
+The use of `()` in place of `{}` for backward compatibility with older links is now **deprecated**. (There is no longer support for the following syntax, and should be avoided)
 ```
 channel(channel:green),invert()
 ```
@@ -410,6 +451,29 @@ Image Sequencer can also generate a string for usage in the CLI for the current
 sequencer.toCliString()
 ```
 
+
+## Importing steps using JSON array
+
+Image sequencer provides the following core API function to import the given sequence of JSON steps into sequencer.
+
+```js
+sequencer.importJSON(obj)
+```
+It can be implemented the following way for example:
+
+```js
+sequencer.importJSON([
+    { name: 'blur', options: {} }
+  ]);
+  ```
+  where name is the name of step to be added, options object can be the one used to provide various params to the sequencer which can customise the default ones.
+
+To see this in action, please refer to line # 51 of the following:
+
+[test/core/modules/import-export.js](https://github.com/publiclab/image-sequencer/blob/main/test/core/modules/import-export.js)
+
+
+
 ## Creating a User Interface
 
 Image Sequencer provides the following events which can be used to generate a UI:
@@ -484,7 +548,7 @@ sequencer.setUI({
 
 Image Sequencer object supports one imageURL at a time.
 
-Adding a seccond image to same sequencer will result to adding same set of steps added to prior image and flushing out the previous one. 
+Adding a seccond image to same sequencer will result to adding same set of steps added to prior image and flushing out the previous one.
 
 ```js
 s1 = new ImageSequencer(...);

docs/MODULES.md

@@ -37,7 +37,8 @@ List of Module Documentations
 32. [Saturation](#saturation-module)
 33. [Threshold](#threshold)
 34. [Tint](#tint)
-35. [WhiteBalance](#white-balance)
+35. [ColorTemperature](#color-temperature)
+36. [Grid-Overlay](#grid-overlay)
 
 
 ## crop-module
@@ -571,17 +572,32 @@ where `options` is an object with the following property:
 * factor : amount of tint (default 0.5)
 
 
-## White Balance
+## Color Temperature
 
-This Change the colour balance of the image by adjusting the colour temperature.
+This changes the color temperature of the image.
 
 ## Usage
 
 ```js
   sequencer.loadImage('PATH')
-           .addSteps('white-balance',options)
+           .addSteps('color-temperature',options)
            .run()
 ```
 where `options` is an object with the following property:
 * temperature : temperature between 0 - 40,000 kelvin (default 6000)
 
+## Grid Overlay
+
+This adds the grid over an image.
+
+## Usage
+
+```js
+  sequencer.loadImage('PATH')
+           .addSteps('grid-overlay',options)
+           .run()
+```
+where `options` is an object with the following property:
+* options.x : The value at which the grid line should start in x-axis.
+* options.y : The value at which the grid line should start in y-axis.
+* color : Color for the grid on the image.

examples/demo.css

@@ -1,14 +1,14 @@
 /* https://github.com/theleagueof/league-spartan */
 @font-face {
-    font-family: 'League Spartan';
-    src: url('https://raw.githubusercontent.com/theleagueof/league-spartan/master/_webfonts/leaguespartan-bold.eot');
-    src: url('https://raw.githubusercontent.com/theleagueof/league-spartan/master/_webfonts/leaguespartan-bold.eot?#iefix') format('embedded-opentype'),
-         url('https://raw.githubusercontent.com/theleagueof/league-spartan/master/_webfonts/leaguespartan-bold.woff2') format('woff2'),
-         url('https://raw.githubusercontent.com/theleagueof/league-spartan/master/_webfonts/leaguespartan-bold.woff') format('woff'),
-         url('https://raw.githubusercontent.com/theleagueof/league-spartan/master/_webfonts/leaguespartan-bold.ttf') format('truetype'),
-         url('https://raw.githubusercontent.com/theleagueof/league-spartan/master/_webfonts/leaguespartan-bold.svg#league_spartanbold') format('svg');
-    font-weight: bold;
-    font-style: normal;
+  font-family: 'League Spartan';
+  src: url('https://raw.githubusercontent.com/theleagueof/league-spartan/master/_webfonts/leaguespartan-bold.eot');
+  src: url('https://raw.githubusercontent.com/theleagueof/league-spartan/master/_webfonts/leaguespartan-bold.eot?#iefix') format('embedded-opentype'),
+       url('https://raw.githubusercontent.com/theleagueof/league-spartan/master/_webfonts/leaguespartan-bold.woff2') format('woff2'),
+       url('https://raw.githubusercontent.com/theleagueof/league-spartan/master/_webfonts/leaguespartan-bold.woff') format('woff'),
+       url('https://raw.githubusercontent.com/theleagueof/league-spartan/master/_webfonts/leaguespartan-bold.ttf') format('truetype'),
+       url('https://raw.githubusercontent.com/theleagueof/league-spartan/master/_webfonts/leaguespartan-bold.svg#league_spartanbold') format('svg');
+  font-weight: bold;
+  font-style: normal;
 }
 
 body {
@@ -18,11 +18,19 @@ body {
   background: #f8f8fa;
 }
 
+footer {
+  margin-top: 40px;
+}
+
 h1 {
   font-family: 'League Spartan';
   color: #445;
 }
 
+body > .container,
+body > .container-fluid {
+}
+
 .center-align {
   display: flex;
   justify-content: center;
@@ -71,17 +79,6 @@ h1 {
   margin-bottom: 20px;
 }
 
-.details {
-  border-top: 3px solid #444;
-  padding-left: 6px;
-}
-
-.details h3 {
-  font-family: monospace;
-  margin-top: 12px;
-  font-size: 1.3em;
-}
-
 .det {
   padding: 10px 16px;
   text-decoration: italic;
@@ -100,11 +97,6 @@ h1 {
   color: #444;
 }
 
-.load-spin{
-  position: absolute;
-  right: 0px;
-}
-
 #addStep {
   max-width: 500px;
   margin: 20px auto;
@@ -159,19 +151,19 @@ h1 {
 }
 
 #move-up {
-    position: fixed;
-    bottom: 50px;
-    right: 40px;
-    z-index: 550;
-    display: none;
-    background:transparent;
-    border:none;
+  position: fixed;
+  bottom: 50px;
+  right: 40px;
+  z-index: 550;
+  display: none;
+  background:transparent;
+  border:none;
 }
 
 #move-up i {
-    font-size:60px;
-    opacity:0.7;
-    color:#BABABA;
+  font-size:60px;
+  opacity:0.7;
+  color:#BABABA;
 }
 
 .btn-circle{
@@ -208,7 +200,7 @@ h1 {
 .savesequencemsg{
   display: none;
   text-align: center;
-  }
+}
 
 .notification {
   background-color: #808b96;
@@ -251,14 +243,32 @@ a.name-header{
   color: #445;
 }
 
-.step-column{ 
-    display:flex; 
-    flex-direction:row; 
-    align-items:center;
+.step-column{
+  display:flex; 
+  align-content: center;
+  justify-content: center;
 }
-.step-image{
-    width:100%; 
-    display:flex; 
-    flex-direction:column; 
-    align-items:center;
+
+.trash-container button.btn-xs {
+  margin-top: -5px !important;
 }
+
+.toggleIcon {
+  transition: transform 0.2s;
+}
+
+.rotated {
+  transform: rotate(180deg);
+}
+
+#gif{
+  margin-left:0px;
+  margin-top:5px;
+  width:100%;
+}
+.save-button{
+  margin-top:20px; 
+  margin-bottom:0px;
+  align:center; 
+  width:100%;
+}

examples/demo.js

@@ -23,7 +23,10 @@ window.onload = function() {
         );
     }
     // Null option
-    addStepSelect.append('<option value="none" disabled selected>More modules...</option>');
+    addStepSelect.append('<option value="" disabled selected>Select a Module</option>');
+    addStepSelect.selectize({
+      sortField: 'text'
+  });
   }
   refreshOptions();
 
@@ -76,8 +79,8 @@ window.onload = function() {
     newStep = $(this).attr('data-value');
     //$("#addStep option[value=" + newStep + "]").attr('selected', 'selected');
     $("#addStep select").val(newStep);
-    ui.selectNewStepUi();
-    ui.addStepUi();
+    ui.selectNewStepUi(newStep);
+    ui.addStepUi(newStep);
     $(this).removeClass('selected');
   });
 
@@ -115,7 +118,7 @@ window.onload = function() {
 
     var button = event.target;
     button.disabled = true;
-
+    button.innerHTML='<i class="fa fa-circle-o-notch fa-spin"></i>'
 
     try {
       // Select all images from previous steps
@@ -167,6 +170,7 @@ window.onload = function() {
           modal.modal();
 
           button.disabled = false;
+          button.innerHTML = 'View GIF';
           isWorkingOnGifGeneration = false;
         }
       });
@@ -174,6 +178,7 @@ window.onload = function() {
     catch (e) {
       console.error(e);
       button.disabled = false;
+      button.innerHTML = 'View GIF';
       isWorkingOnGifGeneration = false;
 
     }
@@ -194,8 +199,8 @@ window.onload = function() {
         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,'insertStep');
+      insertPreview.updatePreviews(reader.result,'#addStep');
+      insertPreview.updatePreviews(sequencer.steps[0].imgElement.src,'.insertDiv');
     },
     onTakePhoto: function (url) {
       var step = sequencer.steps[0];
@@ -205,16 +210,16 @@ window.onload = function() {
         step.options.step.imgElement.src = url;
       else
         step.imgElement.src = url;
-      insertPreview.updatePreviews(url,'addStep');
-      insertPreview.updatePreviews(sequencer.steps[0].imgElement.src,'insertStep');
+      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');
   }
-};
+};

examples/index.html

@@ -2,7 +2,6 @@
 
 <html>
 
-
 <head>
 
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -11,6 +10,16 @@
   <link rel="icon" sizes="192x192" href="../icons/ic_192.png">
   <link rel="manifest" href="manifest.json">
 
+  <!--Adding meta Tag for search engine optimisation-->
+  <meta property="og:description"
+    content="A pure JavaScript sequential image processing system, inspired by storyboards. Instead of modifying the original image, it creates a new image at each step in a sequence.">
+  <meta property="og:site_name" content="sequencer.publiclab.org">
+  <meta property="og:url" content="https://sequencer.publiclab.org">
+  <meta property="og:title" content="Image Sequencer">
+  <meta name="Description"
+    content="Image Sequencer is an image editing tool that creates a new downloadble image at each step.It works in browser and supports both node and CLI.">
+  <meta name="Keywords" content="image editing downloadable browser node CLI">
+
   <title>Image Sequencer</title>
 
   <script src="../node_modules/jquery/dist/jquery.min.js"></script>
@@ -23,20 +32,23 @@
   <script src="../node_modules/gifshot/dist/gifshot.min.js" type="text/javascript"></script>
 
   <!-- Download.js for large files -->
-  <script src="../node_modules/downloadjs/download.min.js" type="text/javascript"/>
+  <script src="../node_modules/downloadjs/download.min.js" type="text/javascript" />
 
   <script src="lib/scrollToTop.js"></script>
-
+  <script src="../node_modules/selectize/dist/js/standalone/selectize.min.js"></script>
 </head>
 
-
 <body>
 
   <link href="../node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
-  <link href="../node_modules/font-awesome/css/font-awesome.min.css" rel="stylesheet">
 
+  <link rel="stylesheet" href="demo.css">
+  <link href="../node_modules/font-awesome/css/font-awesome.min.css" rel="stylesheet">
+  <link href="../node_modules/selectize/dist/css/selectize.default.css" rel="stylesheet">
+  <!-- for crop module: -->
   <!-- for crop module: -->
   <link href="../node_modules/imgareaselect/distfiles/css/imgareaselect-default.css" rel="stylesheet">
+  <link href="./selectize.default.css" rel="stylesheet">
   <link rel="stylesheet" href="demo.css">
 
   <div class="container-fluid">
@@ -44,7 +56,8 @@
     <header class="text-center">
       <h1><a href="/" target='_blank' class="name-header">Image Sequencer</a></h1>
       <p>
-        A pure JavaScript sequential image processing system, inspired by storyboards. Instead of modifying the original image, it
+        A pure JavaScript sequential image processing system, inspired by storyboards. Instead of modifying the original
+        image, it
         creates a new image at each step in a sequence.
         <a href="https://publiclab.org/image-sequencer">Learn more</a>
       </p>
@@ -53,7 +66,7 @@
         <a href="https://github.com/publiclab/image-sequencer">
           <i class="fa fa-github"></i>
         </a>
-       by <a href= "https://publiclab.org" title = "Publiclab Website"><i class = "fa fa-globe"></i> Publiclab</a>
+        by <a href="https://publiclab.org" title="Publiclab Website"><i class="fa fa-globe"></i> Publiclab</a>
       </p>
     </header>
 
@@ -64,7 +77,7 @@
       <center>
         <input type="file" id="fileInput" value="" accept="image/*"><br />
         <button type="button" id="take-photo" class="btn btn-primary btn-block btn-lg ">Take a Photo</button>
-        <video  id="video" width="400" height="300" style="display:none"></video>
+        <video id="video" width="100%" height="100%" style="display:none"></video>
         <a href="#" id="capture" style="display:none" class="btn btn-primary btn-md">Click Picture</a>
         <a href="#" id="close" style="display:none" class="btn btn-default btn-md">Close</a>
         <canvas id="canvas" width="400" height="300" style="display:none"></canvas>
@@ -76,82 +89,79 @@
     </section>
 
     <hr />
-  <p class = "alert alert-success savesequencemsg">Saved Sequence Success. Sequence can be found among other modules.</p>
-  <div class="row">
-    <div class="col-sm-8">
-    <section id="addStep" class="panel panel-primary">
-      <div class="form-inline">
-        <div class="panel-body">
-          <div style="display:flex; justify-content:center;">
-          </div>
-          <p class="info">Select a new module to add to your sequence.</p>
-          <div class="row center-align radio-group">
-            <div>
-              <div class="radio" data-value="resize">
-                <i class="fa fa-arrows-alt fa-4x i-over"></i>
+    <p class="alert alert-success savesequencemsg">Saved Sequence Success. Sequence can be found among other modules.
+    </p>
+    <div class="row">
+      <div class="col-sm-8">
+        <section id="addStep" class="panel panel-primary">
+          <div class="form-inline">
+            <div class="panel-body">
+              <div style="display:flex; justify-content:center;">
               </div>
-              <p>Resize</p>
-            </div>
-            <div>
-              <div class="radio" data-value="brightness">
-                <i class="fa fa-sun-o fa-4x i-over"></i>
+              <p class="info">Select a new module to add to your sequence.</p>
+              <div class="row center-align radio-group">
+                <div>
+                  <div class="radio" data-value="resize">
+                    <i class="fa fa-arrows-alt fa-4x i-over"></i>
+                  </div>
+                  <p>Resize</p>
+                </div>
+                <div>
+                  <div class="radio" data-value="brightness">
+                    <i class="fa fa-sun-o fa-4x i-over"></i>
+                  </div>
+                  <p>Brightness</p>
+                </div>
+                <div>
+                  <div class="radio" data-value="contrast">
+                    <i class="fa fa-adjust fa-4x i-over"></i>
+                  </div>
+                  <p>Contrast</p>
+                </div>
+                <div>
+                  <div class="radio" data-value="saturation">
+                    <i class="fa fa-tint fa-4x i-over i-small"></i>
+                  </div>
+                  <p>Saturation</p>
+                </div>
+                <div>
+                  <div class="radio" data-value="rotate">
+                    <i class="fa fa-rotate-right fa-4x i-over"></i>
+                  </div>
+                  <p>Rotate</p>
+                </div>
+                <div>
+                  <div class="radio" data-value="crop">
+                    <i class="fa fa-crop fa-4x i-over"></i>
+                  </div>
+                  <p>Crop</p>
+                </div>
               </div>
-              <p>Brightness</p>
-            </div>
-            <div>
-              <div class="radio" data-value="contrast">
-                <i class="fa fa-adjust fa-4x i-over"></i>
-              </div>
-              <p>Contrast</p>
-            </div>
-            <div>
-              <div class="radio" data-value="saturation">
-                <i class="fa fa-tint fa-4x i-over i-small"></i>
-              </div>
-              <p>Saturation</p>
-            </div>
-            <div>
-              <div class="radio" data-value="rotate">
-                <i class="fa fa-rotate-right fa-4x i-over"></i>
-              </div>
-              <p>Rotate</p>
-            </div>
-            <div>
-              <div class="radio" data-value="crop">
-                <i class="fa fa-crop fa-4x i-over"></i>
-              </div>
-              <p>Crop</p>
-            </div>
-          </div>
-          <div class="center-align">
-            <select class="form-control input-lg" id="selectStep">
-              <!-- The default null selection has been appended manually in demo.js
+              <div class="row center-align">
+                <div class="col-md-8">
+
+                  <select id="selectStep">
+                    <!-- The default null selection has been appended manually in demo.js
               This is because the options in select are overritten when options are appended.-->
-            </select>
-            <button class="btn btn-success btn-lg" name="add" id="add-step-btn">Add Step</button>
+                  </select>
+                </div>
+                <div class="col-md-4">
+                  <button class="btn btn-success btn-lg" name="add" id="add-step-btn">Add Step</button></div>
+              </div>
+              <div class="row center-align">
+                <button id="resetButton" class="btn btn-default btn-lg"
+                  style=" margin: 20px 35px 0px 35px; width:100%;">Clear All Steps</button>
+              </div>
+            </div>
           </div>
-          <div class="row center-align">
-          <button id="resetButton" class="btn btn-default btn-lg" style=" margin: 20px 35px 0px 35px; width:100%;">Clear All Steps</button>
-        </div>
-        </div>
-      </div>
-    </section>
-
-    <section id="sequence-actions" class="panel">
-      <div class="panel-body">
-
-        <div class="row center-align">
-          <!--<button class="btn btn-primary btn-block btn-lg" name="save-sequence" id="save-seq">Save Sequence</button> -->
-            <!--<button class="btn btn-primary btn-block btn-lg" id="download-btn" name="download" style="display: block; margin: 0px 10px 0px 0px; width: 250px;">Download PNG</button> -->
-          <button class="btn btn-primary btn-block btn-lg js-view-as-gif" id="gif" style="margin: 0px 35px 0px 35px;width:100%;">View GIF</button>
-        </div>
-
+        </section>
 
         <div class="modal fade" id="js-download-gif-modal" tabindex="-1" role="dialog">
           <div class="modal-dialog" role="document">
             <div class="modal-content">
               <div class="modal-header">
-                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
+                    aria-hidden="true">&times;</span></button>
                 <h4 class="modal-title">Your gif is ready</h4>
               </div>
               <div class="modal-body">
@@ -169,61 +179,57 @@
         </div>
 
       </div>
-    </section>
-
-    </div>
-    <div class="col-sm-4">
-    <section id="dwnld" class="panel panel-primary">
-      <div class="form-inline">
-        <div class="panel-body">
-          <div style="text-align:center;">
-            <h2 style="margin-top:20px">Save</h2>
-            <p>Or click ARROW to save the entire sequence as a workflow for future use.</p>
-              <select class="form-control input-md" id="selectSaveOption" style="margin-top:20px">
-                <option>Save as PNG</option>
-                <option>Save as GIF (all steps)</option>
-                <option>Save sequence</option>
-                <option>Save sequence string</option>
-              </select>
-                <button id="saveButton" class="btn btn-primary btn-lg" style="margin-top:20px; margin-bottom:0px;align:center; width:100%;">Save</button>
+      <div class="col-sm-4">
+        <section id="dwnld" class="panel panel-primary">
+          <div class="form-inline">
+            <div class="panel-body">
+              <div style="text-align:center;">
+                <h2 style="margin-top:20px">Save</h2>
+                <select class="form-control input-md" id="selectSaveOption" style="margin-top:20px">
+                  <option>Save as PNG</option>
+                  <option>Save as GIF (all steps)</option>
+                  <option>Save sequence</option>
+                  <option>Save sequence string</option>
+                </select>
+                <p><button id="saveButton" class="btn btn-primary btn-lg save-button">Save</button></p>
+                <p><button class="btn btn-default btn-lg js-view-as-gif" id="gif">Preview GIF</button></p>
+              </div>
+            </div>
           </div>
+        </section>
+      </div>
+    </div>
+
+    <footer>
+      <hr style="margin:20px;">
+      <center><button class="btn btn-default btn-sm" id="clear-cache">Clear offline cache</button></center>
+      <div class="row">
+        <div class="col-md-6">
+          <h2>Need Help?</h2>
+          <p>
+            <a class="btn btn-default" href="https://github.com/publiclab/image-sequencer/issues">Ask a question</a>
+            <a class="btn btn-default" href="https://publiclab.org/chat">Ask in our chatroom</a>
+          </p>
+        </div>
+        <div class="col-md-6">
+          <h2>Improve this tool</h2>
+          <p>
+            This is an open source toolkit which you can help improve on Github
+          </p>
+          <p>
+            <a class="btn btn-default" href="https://github.com/publiclab/image-sequencer">View the code &raquo;</a>
+          </p>
         </div>
       </div>
-    </section>
-    </div>
-  </div>
+    </footer>
 
-  <footer>
-    <hr style="margin:20px;"><center><a class="color:grey;" id="clear-cache">Clear offline cache</a></center>
-    <div class="row">
-      <div class="col-md-6">
-        <h2>Need Help?</h2>
-        <p>
-          Post a link to this and ask help from other community members on <a href="https://github.com/publiclab/image-sequencer/issues/new">Github Issues</a>
-        </p>
-        <p>
-          <a class="btn btn-primary" href="https://gitter.im/publiclab/publiclab">Ask a question on Gitter</a>
-        </p>
-      </div>
-      <div class="col-md-6">
-        <h2>Improve this tool</h2>
-        <p>
-          This is an open source toolkit which you can help add to and improve on <a href="https://github.com/publiclab/image-sequencer/">Github</a>
-        </p>
-        <p>
-          <a class="btn btn-primary" href="https://github.com/publiclab/image-sequencer">View the code &raquo;</a>
-        </p>
-      </div>
-    </div>
-  </footer>
+    <button id="move-up"><i class="fa fa-arrow-circle-o-up"></i></button>
 
-  <button id="move-up"><i class="fa fa-arrow-circle-o-up"></i></button>
-
-  <script type="text/javascript">
-    $(function() {
-      var sequencer;
-    })
-  </script>
+    <script type="text/javascript">
+      $(function () {
+        var sequencer;
+      })
+    </script>
 
 </body>
 

examples/lib/cache.js

@@ -36,4 +36,4 @@ var setupCache = function() {
   });
 }
 
-module.exports = setupCache;
+module.exports = setupCache;

examples/lib/defaultHtmlSequencerUi.js

@@ -8,8 +8,8 @@ function DefaultHtmlSequencerUi(_sequencer, options) {
 
   function onLoad() {
     importStepsFromUrlHash();
-    if (!$('#selectStep').val())
-      $(addStepSel + " #add-step-btn").prop("disabled", true);
+    if ($('#selectStep').val()==='none')
+        $(addStepSel + " #add-step-btn").prop("disabled", true);
       handleSaveSequence();
   }
 
@@ -26,6 +26,7 @@ function DefaultHtmlSequencerUi(_sequencer, options) {
 
   function selectNewStepUi() {
     var m = $(addStepSel + " select").val();
+    if(!m) m = arguments[0];
     $(addStepSel + " .info").html(_sequencer.modulesInfo(m).description);
     $(addStepSel + " #add-step-btn").prop("disabled", false);
   }
@@ -41,9 +42,12 @@ function DefaultHtmlSequencerUi(_sequencer, options) {
 
   function addStepUi() {
     if ($(addStepSel + " select").val() == "none") return;
+    var newStepName;
+    if(typeof arguments[0] !== "string")
+    newStepName = $(addStepSel + " select option").html().toLowerCase();
+    else newStepName = arguments[0]
 
-    var newStepName = $(addStepSel + " select").val();
-
+    
     /*
     * after adding the step we run the sequencer from defined step
     * and since loadImage is not a part of the drawarray the step lies at current

examples/lib/defaultHtmlStepUi.js

@@ -25,46 +25,50 @@ function DefaultHtmlStepUi(_sequencer, options) {
 
     step.ui =
       '\
-      <div class="container">\
-    <div class="row step" style="display:flex">\
-    <form class="input-form">\
-    <div class="col-md-4 details" style="flex:1">\
-    <h3>\
-    <span class = "toggle">' +step.name + ' <i class="fa fa-caret-up toggleIcon" aria-hidden="true"></i></span>' +
-    '<span class="load-spin" style="display:none;"><i class="fa fa-circle-o-notch fa-spin"></i></span>' +
-    '</h3><div class="cal"><p><i>"'+
-      (step.description || "") +
-      '</i></p></div>\
-    </div>\
-    </form>\
-    <div class="col-md-8 cal step-column">\
-      <div class="load" style="display:none;"><i class="fa fa-circle-o-notch fa-spin"></i></div>\
-      <div class="step-image">\
-        <a><img alt="" class="img-thumbnail step-thumbnail"/></a>\
-      </div>\
-    </div>\
-    </div>\
-    </div>\
-    </div>';
+      <div class="container-fluid step-container">\
+          <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>\
+                 <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>\
+            <form class="input-form">\
+            <div class="panel-body cal collapse in">\
+              <div class="row step">\
+                <div class="col-md-4 details container-fluid">\
+                  <div class="cal collapse in"><p>' +
+                    '<i>' + (step.description || "") + '</i>' +
+                 '</p></div>\
+                </div>\
+                <div class="col-md-8 cal collapse in step-column">\
+                  <div class="load load-spin" style="display:none;"><i class="fa fa-circle-o-notch fa-spin"></i></div>\
+                  <div class="step-image">\
+                    <a class="cal collapse in"><img class="img-thumbnail step-thumbnail"/></a>\
+                  </div>\
+                </div>\
+              </div>\
+            </div>\
+            <div class="panel-footer cal collapse in"></div>\
+            </form>\
+          </div>\
+      </div>';
 
     var tools =
-    '<div class="cal"><div class="tools btn-group">\
-    <button confirm="Are you sure?" class="remove btn btn btn-default">\
-      <i class="fa fa-trash"></i>\
-    </button>\
-    <button class="btn  insert-step" style="margin-left:10px;border-radius:6px;background-color:#fff;border:solid #bababa 1.1px;" >\
-      <i class="fa fa-plus"></i> Add\
-    </button>\
-    </div>\
+    '<div class="trash">\
+      <button confirm="Are you sure?" class="remove btn btn-default btn-xs">\
+        <i class="fa fa-trash"></i>\
+      </button>\
     </div>';
 
     var util = intermediateHtmlStepUi(_sequencer, step);
 
     var parser = new DOMParser();
     step.ui = parser.parseFromString(step.ui, "text/html");
-    step.ui = step.ui.querySelector("div.container");
+    step.ui = step.ui.querySelector("div.container-fluid");
     step.linkElements = step.ui.querySelectorAll("a");
-    step.imgElement = step.ui.querySelector("a img");
+    step.imgElement = step.ui.querySelector("a img.img-thumbnail");
 
     if (_sequencer.modulesInfo().hasOwnProperty(step.name)) {
       var inputs = _sequencer.modulesInfo(step.name).inputs;
@@ -113,7 +117,7 @@ function DefaultHtmlStepUi(_sequencer, options) {
         div.setAttribute("name", paramName);
         var description = inputs[paramName].desc || paramName;
         div.innerHTML =
-          "<div class='det cal'>\
+          "<div class='det cal collapse in'>\
                            <label for='" +
           paramName +
           "'>" +
@@ -125,29 +129,30 @@ function DefaultHtmlStepUi(_sequencer, options) {
                          </div>";
         step.ui.querySelector("div.details").appendChild(div);
       }
-
-      $(step.ui.querySelector("div.details")).append(
-        '<div class="cal"><p><button type="submit" class="btn btn-default btn-save" disabled = "true" >Apply</button><span> Press apply to see changes</span></p></div>'
+      $(step.ui.querySelector("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(
+        '<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>'
+      );  
     }
 
     if (step.name != "load-image") {
       step.ui
-        .querySelector("div.details")
-        .appendChild(
+        .querySelector("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) });
-
+      $(step.ui.querySelectorAll(".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 .container:nth-last-child(1) .insert-step").prop('disabled',true);
-        if($("#steps .container:nth-last-child(2)"))
-        $("#steps .container:nth-last-child(2) .insert-step").prop('disabled',false);
+        $("#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);
       } else {
         stepsEl.insertBefore(step.ui, $(stepsEl).children()[stepOptions.index]);
       }
@@ -156,8 +161,8 @@ function DefaultHtmlStepUi(_sequencer, options) {
       $("#load-image").append(step.ui);
     }
     $(step.ui.querySelector(".toggle")).on("click", () => {
-      $(step.ui.querySelector('.toggleIcon')).toggleClass('fa-caret-up').toggleClass('fa-caret-down');
-      $(step.ui.querySelectorAll(".cal")).toggleClass("collapse");
+      $(step.ui.querySelector('.toggleIcon')).toggleClass('rotated');
+       $(step.ui.querySelectorAll(".cal")).collapse('toggle');
     });
     
     $(step.imgElement).on("mousemove", _.debounce(() => imageHover(step), 150));
@@ -201,7 +206,7 @@ function DefaultHtmlStepUi(_sequencer, options) {
       $(input)
         .data('initValue', $(input).val())
         .data('hasChangedBefore', false)
-        .on('input', function() {
+        .on('input change' , function() {
           $(this)
             .focus()
             .data('hasChangedBefore',
@@ -225,16 +230,13 @@ function DefaultHtmlStepUi(_sequencer, options) {
   function onDraw(step) {
     $(step.ui.querySelector(".load")).show();
     $(step.ui.querySelector("img")).hide();
-    if( $(step.ui.querySelector(".toggleIcon")).hasClass("fa-caret-down") )
-    {
-      $(step.ui.querySelector(".load-spin")).show();
-    }
+    $(step.ui.querySelectorAll(".load-spin")).show();
   }
 
   function onComplete(step) {
-    $(step.ui.querySelector(".load")).hide();
     $(step.ui.querySelector("img")).show();
-    $(step.ui.querySelector(".load-spin")).hide();
+    $(step.ui.querySelectorAll(".load-spin")).hide();
+    $(step.ui.querySelector(".load")).hide();
 
     step.imgElement.src = (step.name == "load-image") ? step.output.src : step.output;
     var imgthumbnail = step.ui.querySelector(".img-thumbnail");
@@ -299,7 +301,7 @@ function DefaultHtmlStepUi(_sequencer, options) {
 
   function onRemove(step) {
     step.ui.remove();
-    $("#steps .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();
   }
 
@@ -319,7 +321,8 @@ function DefaultHtmlStepUi(_sequencer, options) {
   
     $('#'+id).fadeIn(500).delay(200).fadeOut(500);
   }
-
+    
+  
   return {
     getPreview: getPreview,
     onSetup: onSetup,

examples/lib/insertPreview.js

@@ -8,7 +8,7 @@ function generatePreview(previewStepName, customValues, path, selector) {
       img.src = src;
       $(img).css("max-width", "200%");
       $(img).css("transform", "translateX(-20%)");
-      var stepDiv = $('#'+selector+' .row').find('div').each(function() {
+      $(selector + ' .radio-group').find('div').each(function() {
         if ($(this).find('div').attr('data-value') === previewStepName) {
           $(this).find('div').append(img);
         }
@@ -27,7 +27,7 @@ function generatePreview(previewStepName, customValues, path, selector) {
   }
 
   function updatePreviews(src, selector) {
-    $('#'+selector+' img').remove();
+    $(selector+' img').remove();
 
     var previewSequencerSteps = {
       "resize": "125%",

examples/lib/intermediateHtmlStepUi.js

@@ -3,81 +3,109 @@ var urlHash = require('./urlHash.js'),
 
 function IntermediateHtmlStepUi(_sequencer, step, options) {
   function stepUI() {
-    return '<div class="row insertDiv">\
-        <div class="col-md-6 col-md-offset-2" style="margin-top:5%">\
-        <section id="insertStep" class="panel panel-primary">\
-          <div class="form-inline">\
-            <div class="panel-body">\
-              <p class="info">Select a new module to add to your sequence.</p>\
-              <div class="row center-align radio-group">\
-              <div>\
-              <div class="radio" data-value="resize">\
-              <i class="fa fa-arrows-alt fa-4x i-over"></i>\
-            </div>\
-                <p>Resize</p>\
+    return '<div class="row insertDiv collapse">\
+          <section class="panel panel-primary .insert-step">\
+            <button class="btn btn-default close-insert-box"><i class="fa fa-times" aria-hidden="true"></i> Close</button>\
+            <div class="form-inline">\
+              <div class="panel-body">\
+                <p class="info">Select a new module to add to your sequence.</p>\
+                <div class="row center-align radio-group">\
+                  <div>\
+                    <div class="radio" data-value="resize">\
+                      <i class="fa fa-arrows-alt fa-4x i-over"></i>\
+                    </div>\
+                    <p>Resize</p>\
+                  </div>\
+                  <div>\
+                    <div class="radio" data-value="brightness">\
+                      <i class="fa fa-sun-o fa-4x i-over"></i>\
+                    </div>\
+                    <p>Brightness</p>\
+                  </div>\
+                  <div>\
+                    <div class="radio" data-value="contrast">\
+                      <i class="fa fa-adjust fa-4x i-over"></i>\
+                    </div>\
+                    <p>Contrast</p>\
+                  </div>\
+                  <div>\
+                    <div class="radio" data-value="saturation">\
+                      <i class="fa fa-tint fa-4x i-over i-small"></i>\
+                    </div>\
+                    <p>Saturation</p>\
+                  </div>\
+                  <div>\
+                    <div class="radio" data-value="rotate">\
+                      <i class="fa fa-rotate-right fa-4x i-over"></i>\
+                    </div>\
+                    <p>Rotate</p>\
+                  </div>\
+                  <div>\
+                    <div class="radio" data-value="crop">\
+                      <i class="fa fa-crop fa-4x i-over"></i>\
+                    </div>\
+                    <p>Crop</p>\
+                  </div>\
                 </div>\
-                <div>\
-                <div class="radio" data-value="brightness">\
-                <i class="fa fa-sun-o fa-4x i-over"></i>\
-              </div>\
-                  <p>Brightness</p>\
+                <div class="row center-align">\
+                  <div class="col-md-8">\
+                    <select class="insert-step-select">\
+                      <!-- The default null selection has been appended manually in demo.js\
+                      This is because the options in select are overritten when options are appended.-->\
+                    </select>\
+                  <div>\
+                  <div class="col-md-4">\
+                    <button class="btn btn-success btn-lg insert-save-btn add-step-btn" name="add">Add Step</button>\
+                  <div>\
                 </div>\
-                <div>\
-                <div class="radio" data-value="contrast">\
-                <i class="fa fa-adjust fa-4x i-over"></i>\
-              </div>\
-                  <p>Contrast</p>\
-                </div>\
-                <div>\
-                <div class="radio" data-value="saturation">\
-                <i class="fa fa-tint fa-4x i-over i-small"></i>\
-              </div>\
-                  <p>Saturation</p>\
-                </div>\
-                <div>\
-                <div class="radio" data-value="rotate">\
-                <i class="fa fa-rotate-right fa-4x i-over"></i>\
-              </div>\
-                  <p>Rotate</p>\
-                </div>\
-                <div>\
-                <div class="radio" data-value="crop">\
-                <i class="fa fa-crop fa-4x i-over"></i>\
-              </div>\
-                  <p>Crop</p>\
-                </div>\
-              </div>\
-              <div class="center-align">\
-                <select class="form-control input-lg" id="selectStep">\
-                  <!-- The default null selection has been appended manually in demo.js\
-                  This is because the options in select are overritten when options are appended.-->\
-                </select>\
-                <button class="btn btn-success btn-lg" name="add" id="add-step-btn">Add Step</button>\
               </div>\
             </div>\
-          </div>\
-        </section>\
+          </section>\
         </div>';
   }
 
 
   function selectNewStepUi() {
-    var m = $("#insertStep select").val();
-    $("#insertStep .info").html(_sequencer.modulesInfo(m).description);
-    $("#insertStep #add-step-btn").prop("disabled", false);
+    var insertSelect = $(step.ui.querySelector('.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);
   }
+    
+    
+  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)})
+    }
+    else {
+      $(step.ui.querySelector('.no-insert-text')).fadeToggle(200, function(){$(step.ui.querySelector('.insert-text')).fadeToggle(200, callback)})
+    }
+  }
+
   insertStep = function (id) {
     var modulesInfo = _sequencer.modulesInfo();
     var parser = new DOMParser();
     var addStepUI = stepUI();
     addStepUI = parser.parseFromString(addStepUI, "text/html").querySelector("div")
-    step.ui
+
+    if ($(step.ui.querySelector('.insertDiv')).length > 0){
+      toggleDiv();
+    }
+    else {
+      step.ui
       .querySelector("div.step")
       .insertAdjacentElement('afterend',
         addStepUI
       );
-    insertPreview.updatePreviews(step.output,'insertStep');
-    var insertStepSelect = $("#insertStep select");
+      toggleDiv(function(){
+        insertPreview.updatePreviews(step.output, '.insertDiv');
+      });
+    }
+
+    $(step.ui.querySelector('.insertDiv .close-insert-box')).off('click').on('click', function(){toggleDiv(function(){})});
+    
+    var insertStepSelect = $(step.ui.querySelector('.insert-step-select'));
     insertStepSelect.html("");
     // Add modules to the insertStep dropdown
     for (var m in modulesInfo) {
@@ -86,31 +114,33 @@ function IntermediateHtmlStepUi(_sequencer, step, options) {
           '<option value="' + m + '">' + modulesInfo[m].name + "</option>"
         );
     }
-
-    $('#insertStep #add-step-btn').prop('disabled', true);
-
-    insertStepSelect.append('<option value="none" disabled selected>More modules...</option>');
-    $('#insertStep .radio-group .radio').on("click", function () {
+    insertStepSelect.selectize({
+      sortField: 'text'
+    });
+    $(step.ui.querySelector('.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 () {
       $(this).parent().find('.radio').removeClass('selected');
       $(this).addClass('selected');
       newStep = $(this).attr('data-value');
-      insertStepSelect.val(newStep);
+      $(step.ui.querySelector('.insert-step-select')).val(newStep);
       selectNewStepUi();
       insert(id);
       $(this).removeClass('selected');
     });
-    $(step.ui.querySelector("#insertStep select")).on('change', selectNewStepUi);
-    $(step.ui.querySelector("#insertStep #add-step-btn")).on('click', function () { insert(id) });
+    insertStepSelect.on('change', selectNewStepUi);
+    $(step.ui.querySelector('.insertDiv .add-step-btn')).on('click', function () { insert(id) });
   }
 
   function insert(id) {
 
     options = options || {};
-    var insertStepSelect = $("#insertStep select");
+    var insertStepSelect = $(step.ui.querySelector('.insert-step-select'));
     if (insertStepSelect.val() == "none") return;
 
     var newStepName = insertStepSelect.val()
-    $('div .insertDiv').remove();
+    toggleDiv();
     var sequenceLength = 1;
     if (sequencer.sequences[newStepName]) {
       sequenceLength = sequencer.sequences[newStepName].length;

examples/selectize.default.css

@@ -0,0 +1,403 @@
+/**
+ * selectize.default.css (v0.12.6) - Default Theme
+ * Copyright (c) 2013–2015 Brian Reavis & contributors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this
+ * file except in compliance with the License. You may obtain a copy of the License at:
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF
+ * ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ *
+ * @author Brian Reavis <brian@thirdroute.com>
+ */
+.selectize-control.plugin-drag_drop.multi > .selectize-input > div.ui-sortable-placeholder {
+  visibility: visible !important;
+  background: #f2f2f2 !important;
+  background: rgba(0, 0, 0, 0.06) !important;
+  border: 0 none !important;
+  -webkit-box-shadow: inset 0 0 12px 4px #fff;
+  box-shadow: inset 0 0 12px 4px #fff;
+}
+.selectize-control.plugin-drag_drop .ui-sortable-placeholder::after {
+  content: '!';
+  visibility: hidden;
+}
+.selectize-control.plugin-drag_drop .ui-sortable-helper {
+  -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+}
+.selectize-dropdown-header {
+  position: relative;
+  padding: 5px 8px;
+  border-bottom: 1px solid #d0d0d0;
+  background: #f8f8f8;
+  -webkit-border-radius: 3px 3px 0 0;
+  -moz-border-radius: 3px 3px 0 0;
+  border-radius: 3px 3px 0 0;
+}
+.selectize-dropdown-header-close {
+  position: absolute;
+  right: 8px;
+  top: 50%;
+  color: #303030;
+  opacity: 0.4;
+  margin-top: -12px;
+  line-height: 20px;
+  font-size: 20px !important;
+}
+.selectize-dropdown-header-close:hover {
+  color: #000000;
+}
+.selectize-dropdown.plugin-optgroup_columns .optgroup {
+  border-right: 1px solid #f2f2f2;
+  border-top: 0 none;
+  float: left;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+.selectize-dropdown.plugin-optgroup_columns .optgroup:last-child {
+  border-right: 0 none;
+}
+.selectize-dropdown.plugin-optgroup_columns .optgroup:before {
+  display: none;
+}
+.selectize-dropdown.plugin-optgroup_columns .optgroup-header {
+  border-top: 0 none;
+}
+.selectize-control.plugin-remove_button [data-value] {
+  position: relative;
+  padding-right: 24px !important;
+}
+.selectize-control.plugin-remove_button [data-value] .remove {
+  z-index: 1;
+  /* fixes ie bug (see #392) */
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 17px;
+  text-align: center;
+  font-weight: bold;
+  font-size: 12px;
+  color: inherit;
+  text-decoration: none;
+  vertical-align: middle;
+  display: inline-block;
+  padding: 2px 0 0 0;
+  border-left: 1px solid #0073bb;
+  -webkit-border-radius: 0 2px 2px 0;
+  -moz-border-radius: 0 2px 2px 0;
+  border-radius: 0 2px 2px 0;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+.selectize-control.plugin-remove_button [data-value] .remove:hover {
+  background: rgba(0, 0, 0, 0.05);
+}
+.selectize-control.plugin-remove_button [data-value].active .remove {
+  border-left-color: #00578d;
+}
+.selectize-control.plugin-remove_button .disabled [data-value] .remove:hover {
+  background: none;
+}
+.selectize-control.plugin-remove_button .disabled [data-value] .remove {
+  border-left-color: #aaaaaa;
+}
+.selectize-control.plugin-remove_button .remove-single {
+  position: absolute;
+  right: 0;
+  top: 0;
+  font-size: 23px;
+}
+.selectize-control {
+  position: relative;
+}
+.selectize-dropdown,
+.selectize-input,
+.selectize-input input {
+  color: #303030;
+  font-family: inherit;
+  font-size: 18px;
+  line-height: 18px;
+  -webkit-font-smoothing: inherit;
+}
+.selectize-input,
+.selectize-control.single .selectize-input.input-active {
+  background: #fff;
+  cursor: text;
+  display: inline-block;
+}
+.selectize-input {
+  border: 1px solid #d0d0d0;
+  padding: 10px 0px;
+  display: inline-block;
+  width: 24vw;
+  overflow: hidden;
+  position: relative;
+  z-index: 1;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  border-radius: 3px;
+}
+.selectize-control.multi .selectize-input.has-items {
+  padding: 5px 8px 2px;
+}
+.selectize-input.full {
+  background-color: #fff;
+}
+.selectize-input.disabled,
+.selectize-input.disabled * {
+  cursor: default !important;
+}
+.selectize-input.focus {
+  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
+}
+.selectize-input.dropdown-active {
+  -webkit-border-radius: 3px 3px 0 0;
+  -moz-border-radius: 3px 3px 0 0;
+  border-radius: 3px 3px 0 0;
+}
+.selectize-input > * {
+  vertical-align: baseline;
+  display: -moz-inline-stack;
+  display: inline-block;
+  zoom: 1;
+  *display: inline;
+}
+.selectize-control.multi .selectize-input > div {
+  cursor: pointer;
+  margin: 0 3px 3px 0;
+  padding: 2px 6px;
+  background: #1da7ee;
+  color: #fff;
+  border: 1px solid #0073bb;
+}
+.selectize-control.multi .selectize-input > div.active {
+  background: #92c836;
+  color: #fff;
+  border: 1px solid #00578d;
+}
+.selectize-control.multi .selectize-input.disabled > div,
+.selectize-control.multi .selectize-input.disabled > div.active {
+  color: #ffffff;
+  background: #d2d2d2;
+  border: 1px solid #aaaaaa;
+}
+.selectize-input > input {
+  display: inline-block !important;
+  padding: 0 !important;
+  min-height: 0 !important;
+  max-height: none !important;
+  max-width: 100% !important;
+  margin: 0 1px !important;
+  text-indent: 0 !important;
+  border: 0 none !important;
+  background: none !important;
+  line-height: inherit !important;
+  -webkit-user-select: auto !important;
+  -webkit-box-shadow: none !important;
+  box-shadow: none !important;
+}
+.selectize-input > input::-ms-clear {
+  display: none;
+}
+.selectize-input > input:focus {
+  outline: none !important;
+}
+.selectize-input::after {
+  content: ' ';
+  display: block;
+  clear: left;
+}
+.selectize-input.dropdown-active::before {
+  content: ' ';
+  display: block;
+  position: absolute;
+  background: #f0f0f0;
+  height: 1px;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+.selectize-dropdown {
+  position: absolute;
+  z-index: 10;
+  border: 1px solid #d0d0d0;
+  background: #fff;
+  margin: -1px 0 0 0;
+  border-top: 0 none;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  -webkit-border-radius: 0 0 3px 3px;
+  -moz-border-radius: 0 0 3px 3px;
+  border-radius: 0 0 3px 3px;
+}
+.selectize-dropdown [data-selectable] {
+  cursor: pointer;
+  overflow: hidden;
+}
+.selectize-dropdown [data-selectable] .highlight {
+  background: rgba(125, 168, 208, 0.2);
+  -webkit-border-radius: 1px;
+  -moz-border-radius: 1px;
+  border-radius: 1px;
+}
+.selectize-dropdown .option,
+.selectize-dropdown .optgroup-header {
+  padding: 5px 8px;
+}
+.selectize-dropdown .option,
+.selectize-dropdown [data-disabled],
+.selectize-dropdown [data-disabled] [data-selectable].option {
+  cursor: inherit;
+  opacity: 0.5;
+}
+.selectize-dropdown [data-selectable].option {
+  opacity: 1;
+}
+.selectize-dropdown .optgroup:first-child .optgroup-header {
+  border-top: 0 none;
+}
+.selectize-dropdown .optgroup-header {
+  color: #303030;
+  background: #fff;
+  cursor: default;
+}
+.selectize-dropdown .active {
+  background-color: #f5fafd;
+  color: #495c68;
+}
+.selectize-dropdown .active.create {
+  color: #495c68;
+}
+.selectize-dropdown .create {
+  color: rgba(48, 48, 48, 0.5);
+}
+.selectize-dropdown-content {
+  overflow-y: auto;
+  overflow-x: hidden;
+  max-height: 200px;
+  -webkit-overflow-scrolling: touch;
+}
+.selectize-control.single .selectize-input,
+.selectize-control.single .selectize-input input {
+  cursor: pointer;
+}
+.selectize-control.single .selectize-input.input-active,
+.selectize-control.single .selectize-input.input-active input {
+  cursor: text;
+}
+.selectize-control.single .selectize-input:after {
+  content: ' ';
+  display: block;
+  position: absolute;
+  top: 50%;
+  right: 15px;
+  margin-top: -3px;
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 5px 5px 0 5px;
+  border-color: #808080 transparent transparent transparent;
+}
+.selectize-control.single .selectize-input.dropdown-active:after {
+  margin-top: -4px;
+  border-width: 0 5px 5px 5px;
+  border-color: transparent transparent #808080 transparent;
+}
+.selectize-control.rtl.single .selectize-input:after {
+  left: 15px;
+  right: auto;
+}
+.selectize-control.rtl .selectize-input > input {
+  margin: 0 4px 0 -2px !important;
+}
+.selectize-control .selectize-input.disabled {
+  opacity: 0.5;
+  background-color: #fafafa;
+}
+.selectize-control.multi .selectize-input.has-items {
+  padding-left: 5px;
+  padding-right: 5px;
+}
+.selectize-control.multi .selectize-input.disabled [data-value] {
+  color: #999;
+  text-shadow: none;
+  background: none;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+}
+.selectize-control.multi .selectize-input.disabled [data-value],
+.selectize-control.multi .selectize-input.disabled [data-value] .remove {
+  border-color: #e6e6e6;
+}
+.selectize-control.multi .selectize-input.disabled [data-value] .remove {
+  background: none;
+}
+.selectize-control.multi .selectize-input [data-value] {
+  text-shadow: 0 1px 0 rgba(0, 51, 83, 0.3);
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  border-radius: 3px;
+  background-color: #1b9dec;
+  background-image: -moz-linear-gradient(top, #1da7ee, #178ee9);
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#1da7ee), to(#178ee9));
+  background-image: -webkit-linear-gradient(top, #1da7ee, #178ee9);
+  background-image: -o-linear-gradient(top, #1da7ee, #178ee9);
+  background-image: linear-gradient(to bottom, #1da7ee, #178ee9);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff1da7ee', endColorstr='#ff178ee9', GradientType=0);
+  -webkit-box-shadow: 0 1px 0 rgba(0,0,0,0.2),inset 0 1px rgba(255,255,255,0.03);
+  box-shadow: 0 1px 0 rgba(0,0,0,0.2),inset 0 1px rgba(255,255,255,0.03);
+}
+.selectize-control.multi .selectize-input [data-value].active {
+  background-color: #0085d4;
+  background-image: -moz-linear-gradient(top, #008fd8, #0075cf);
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#008fd8), to(#0075cf));
+  background-image: -webkit-linear-gradient(top, #008fd8, #0075cf);
+  background-image: -o-linear-gradient(top, #008fd8, #0075cf);
+  background-image: linear-gradient(to bottom, #008fd8, #0075cf);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff008fd8', endColorstr='#ff0075cf', GradientType=0);
+}
+.selectize-control.single .selectize-input {
+  -webkit-box-shadow: 0 1px 0 rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,0.8);
+  box-shadow: 0 1px 0 rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,0.8);
+  background-color: #f9f9f9;
+  background-image: -moz-linear-gradient(top, #fefefe, #f2f2f2);
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fefefe), to(#f2f2f2));
+  background-image: -webkit-linear-gradient(top, #fefefe, #f2f2f2);
+  background-image: -o-linear-gradient(top, #fefefe, #f2f2f2);
+  background-image: linear-gradient(to bottom, #fefefe, #f2f2f2);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffefefe', endColorstr='#fff2f2f2', GradientType=0);
+}
+/* .selectize-control.single .selectize-input,
+.selectize-dropdown.single {
+  border-color: #b8b8b8;
+} */
+.selectize-dropdown .optgroup-header {
+  padding-top: 7px;
+  font-weight: bold;
+  font-size: 0.85em;
+}
+.selectize-dropdown .optgroup {
+  border-top: 1px solid #f0f0f0;
+}
+.selectize-dropdown .optgroup:first-child {
+  border-top: 0 none;
+}

examples/sw.js

@@ -32,4 +32,4 @@ self.addEventListener('fetch', function(event) {
       });
     })
   );
-});
+});

package.json

@@ -1,13 +1,13 @@
 {
   "name": "image-sequencer",
-  "version": "3.0.0",
+  "version": "3.3.1",
   "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 tape test/core/*.js test/core/ui/user-interface.js test/core/modules/QR.js | tap-spec; browserify test/core/modules/image-sequencer.js test/core/modules/chain.js test/core/modules/meta-modules.js test/core/modules/replace.js test/core/modules/import-export.js test/core/modules/run.js test/core/modules/dynamic-imports.js test/core/util/parse-input.js test/core/modules/benchmark.js| tape-run --render=\"tap-spec\"",
+    "test": "TEST=true istanbul cover tape test/core/*.js test/core/ui/user-interface.js test/core/modules/canvas-resize.js test/core/modules/QR.js test/core/modules/crop.js | tap-spec; browserify test/core/modules/image-sequencer.js test/core/modules/chain.js test/core/modules/meta-modules.js test/core/modules/replace.js test/core/modules/import-export.js test/core/modules/run.js test/core/modules/dynamic-imports.js test/core/util/parse-input.js test/core/modules/benchmark.js| tape-run --render=\"tap-spec\"",
     "test-ui": "jasmine test/spec/*.js",
-    "setup": "npm i && npm i -g grunt grunt-cli",
+    "setup": "npm i && npm i -g grunt grunt-cli && grunt build",
     "start": "grunt serve"
   },
   "repository": {
@@ -31,22 +31,29 @@
     "downloadjs": "^1.4.7",
     "fisheyegl": "^0.1.2",
     "font-awesome": "~4.7.0",
+    "geotiff": "^1.0.0-beta.6",
     "get-pixels": "~3.3.0",
     "gifshot": "^0.4.5",
+    "glfx": "0.0.4",
     "image-sequencer-invert": "^1.0.0",
     "imagejs": "0.0.9",
     "imgareaselect": "git://github.com/jywarren/imgareaselect.git#v1.0.0-rc.2",
+    "istanbul": "^0.4.5",
     "jquery": "^3.3.1",
-    "jsdom": "^13.1.0",
+    "jsdom": "^15.0.0",
     "jsqr": "^1.1.1",
     "lodash": "^4.17.11",
+    "ndarray": "^1.0.18",
     "ndarray-gaussian-filter": "^1.0.0",
     "ora": "^3.0.0",
     "pace": "0.0.4",
+    "puppeteer": "^1.14.0",
     "qrcode": "^1.3.3",
     "readline-sync": "^1.4.7",
     "save-pixels": "~2.3.4",
-    "urify": "^2.1.1"
+    "selectize": "^0.12.6",
+    "urify": "^2.1.1",
+    "webgl-distort": "0.0.2"
   },
   "devDependencies": {
     "base64-img": "^1.0.4",
@@ -69,7 +76,7 @@
     "tape-run": "^5.0.0",
     "uglify-es": "^3.3.7"
   },
-  "homepage": "https://github.com/publiclab/image-sequencer",
+  "homepage": "https://sequencer.publiclab.org",
   "bin": {
     "sequencer": "./index.js"
   }

src/ExportBin.js

@@ -32,11 +32,11 @@ module.exports = function ExportBin(dir = "./output/", ref, basic, filename) {
     if (err) console.error(err)
   });
   if (filename && basic) {
-      var steps = ref.steps;
-      var datauri = steps.slice(-1)[0].output.src;
-      var ext = steps.slice(-1)[0].output.format;
-      var buffer = require('data-uri-to-buffer')(datauri);
-      fs.writeFile(dir + filename, buffer, function() { });
+    var steps = ref.steps;
+    var datauri = steps.slice(-1)[0].output.src;
+    var ext = steps.slice(-1)[0].output.format;
+    var buffer = require('data-uri-to-buffer')(datauri);
+    fs.writeFile(dir + filename, buffer, function() { });
   }
   else {
     getDirectories(dir, function(dirs) {
@@ -48,21 +48,21 @@ module.exports = function ExportBin(dir = "./output/", ref, basic, filename) {
       }
       fs.mkdir(dir + 'sequencer' + num, function() {
         var root = dir + 'sequencer' + num + '/';
-          var steps = ref.steps;
-          if (basic) {
-            var datauri = steps.slice(-1)[0].output.src;
-            var ext = steps.slice(-1)[0].output.format;
+        var steps = ref.steps;
+        if (basic) {
+          var datauri = steps.slice(-1)[0].output.src;
+          var ext = steps.slice(-1)[0].output.format;
+          var buffer = require('data-uri-to-buffer')(datauri);
+          fs.writeFile(root + "image" + "_" + (steps.length - 1) + "." + ext, buffer, function() { });
+        }
+        else {
+          for (var i in steps) {
+            var datauri = steps[i].output.src;
+            var ext = steps[i].output.format;
             var buffer = require('data-uri-to-buffer')(datauri);
-            fs.writeFile(root + image + "_" + (steps.length - 1) + "." + ext, buffer, function() { });
-          }
-          else {
-            for (var i in steps) {
-              var datauri = steps[i].output.src;
-              var ext = steps[i].output.format;
-              var buffer = require('data-uri-to-buffer')(datauri);
-              fs.writeFile(root + image + "_" + i + "." + ext, buffer, function() { });
-            }
+            fs.writeFile(root + "image" + "_" + i + "." + ext, buffer, function() { });
           }
+        }
       });
     });
   }

src/ImageSequencer.js

@@ -24,7 +24,7 @@ ImageSequencer = function ImageSequencer(options) {
     if (!typeof (a) == "object") return a;
     if (objTypeOf(a) == "Array") return a.slice();
     if (objTypeOf(a) == "Object") {
-      var b = {}; 
+      var b = {};
       for (var v in a) {
         b[v] = copy(a[v]);
       }
@@ -87,7 +87,7 @@ ImageSequencer = function ImageSequencer(options) {
     //tell the UI a step has been removed
   }
 
-  function removeSteps(index) {
+  function removeSteps() {
     var   indices;
     var this_ = (this.name == "ImageSequencer") ? this : this.sequencer;
     var args = [];
@@ -102,7 +102,7 @@ ImageSequencer = function ImageSequencer(options) {
     return this;
   }
 
-  function insertSteps(image, index, name, o) {
+  function insertSteps() {
     var this_ = (this.name == "ImageSequencer") ? this : this.sequencer;
     var args = []
     for (var arg in arguments) args.push(arguments[arg]);
@@ -119,7 +119,7 @@ ImageSequencer = function ImageSequencer(options) {
 
   // Config is an object which contains the runtime configuration like progress bar
   // information and index from which the sequencer should run
-  function run(config, t_image, t_from) {
+  function run(config) {
     var progressObj, index = 0;
     config = config || { mode: 'no-arg' };
     if (config.index) index = config.index;
@@ -178,7 +178,7 @@ ImageSequencer = function ImageSequencer(options) {
       loadPrevSteps(sequencer);
       json_q.callback.call(ret);
     });
-    
+
   }
 
   function replaceImage(selector, steps, options) {
@@ -212,7 +212,7 @@ ImageSequencer = function ImageSequencer(options) {
       }
     }
     else {
-      if (modules[name]){ 
+      if (modules[name]){
          modulesdata = modules[name][1];
         }
       else
@@ -221,124 +221,6 @@ ImageSequencer = function ImageSequencer(options) {
     return modulesdata;
   }
 
-  // Genates a CLI string for the current sequence
-  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
-      if (name !== "load-image"){
-        cliStringSteps += `${name} `;
-      }
-      for (var inp in modulesInfo(name).inputs) {
-        cliOptions[inp] = this.steps[step].options[inp];
-      }
-    }
-    cliStringSteps = cliStringSteps.substr(0, cliStringSteps.length - 1) + `"`;
-    return `sequencer -i [PATH] -s ${cliStringSteps} -d '${JSON.stringify(cliOptions)}'`
-  }
-
-  // Strigifies the current sequence
-  function toString(step) {
-    if (step) {
-      return stepToString(step);
-    } else {
-      return copy(this.steps.map(stepToString).slice(1).join(','));
-    }
-  }
-  
-  // Stringifies one step of the sequence
-  function stepToString(step) {
-    var arg = (step.name)?step.name:step.options.name;
-    let inputs = modulesInfo(arg).inputs || {}, op = {};
-
-    for (let input in inputs) {
-
-      if (!!step.options[input] && step.options[input] != inputs[input].default) {
-        op[input] = step.options[input];
-        op[input] = encodeURIComponent(op[input]);
-      }
-
-    }
-
-    var configurations = Object.keys(op).map(key => key + ':' + op[key]).join('|');
-    return `${arg}{${configurations}}`;
-  }
-
-  // exports the current sequence as an array of JSON steps
-  function toJSON() {
-    return this.stringToJSON(this.toString());
-  }
-
-  // Coverts stringified sequence into an array of JSON steps
-  function stringToJSON(str) {
-    let steps;
-    if (str.includes(','))
-      steps = str.split(',');
-    else
-      steps = [str];
-    return steps.map(stringToJSONstep);
-  }
-
-  // Converts one stringified step into JSON
-  function stringToJSONstep(str) {
-    var bracesStrings;
-    if (str.includes('{'))
-      if (str.includes('(') && str.indexOf('(') < str.indexOf('{'))
-        bracesStrings = ['(', ')'];
-      else
-        bracesStrings = ['{', '}'];
-    else
-      bracesStrings = ['(', ')'];
-
-    if (str.indexOf(bracesStrings[0]) === -1) { // if there are no settings specified
-      var moduleName = str.substr(0);
-      stepSettings = "";
-    } else {
-      var moduleName = str.substr(0, str.indexOf(bracesStrings[0]));
-      stepSettings = str.slice(str.indexOf(bracesStrings[0]) + 1, -1);
-    }
-
-    stepSettings = stepSettings.split('|').reduce(function formatSettings(accumulator, current, i) {
-      var settingName = current.substr(0, current.indexOf(':')),
-        settingValue = current.substr(current.indexOf(':') + 1);
-      settingValue = settingValue.replace(/^\(/, '').replace(/\)$/, ''); // strip () at start/end
-      settingValue = settingValue.replace(/^\{/, '').replace(/\}$/, ''); // strip {} at start/end
-      settingValue = decodeURIComponent(settingValue);
-      current = [
-        settingName,
-        settingValue
-      ];
-      if (!!settingName) accumulator[settingName] = settingValue;
-      return accumulator;
-    }, {});
-
-    return {
-      name: moduleName,
-      options: stepSettings
-    }
-  }
-
-  // imports a string into the sequencer steps
-  function importString(str) {
-    let sequencer = this;
-    if (this.name != "ImageSequencer")
-      sequencer = this.sequencer;
-    var stepsFromString = stringToJSON(str);
-    stepsFromString.forEach(function eachStep(stepObj) {
-      sequencer.addSteps(stepObj.name, stepObj.options);
-    });
-  }
-
-  // imports a array of JSON steps into the sequencer steps
-  function importJSON(obj) {
-    let sequencer = this;
-    if (this.name != "ImageSequencer")
-      sequencer = this.sequencer;
-    obj.forEach(function eachStep(stepObj) {
-      sequencer.addSteps(stepObj.name, stepObj.options);
-    });
-  }
-
   function loadNewModule(name, options) {
 
     if (!options) {
@@ -401,6 +283,8 @@ ImageSequencer = function ImageSequencer(options) {
       this.sequences = require('./SavedSequences.json');
   }
 
+  var str = require('./Strings.js')(this.steps, modulesInfo, addSteps, copy)
+
   return {
     //literals and objects
     name: "ImageSequencer",
@@ -423,14 +307,17 @@ ImageSequencer = function ImageSequencer(options) {
     setUI: setUI,
     exportBin: exportBin,
     modulesInfo: modulesInfo,
-    toCliString: toCliString,
-    toString: toString,
-    stepToString: stepToString,
-    toJSON: toJSON,
-    stringToJSON: stringToJSON,
-    stringToJSONstep: stringToJSONstep,
-    importString: importString,
-    importJSON: importJSON,
+    toCliString: str.toCliString,
+    detectStringSyntax: str.detectStringSyntax,
+    parseStringSyntax: str.parseStringSyntax,
+    stringToSteps: str.stringToSteps,
+    toString: str.toString,
+    stepToString: str.stepToString,
+    toJSON: str.toJSON,
+    stringToJSON: str.stringToJSON,
+    stringToJSONstep: str.stringToJSONstep,
+    importString: str.importString,
+    importJSON: str.importJSON,
     loadNewModule: loadNewModule,
     saveNewModule: saveNewModule,
     createMetaModule: require('./util/createMetaModule'),

src/InsertStep.js

@@ -6,6 +6,9 @@ function InsertStep(ref, index, name, o) {
     return ref.importJSON(ref.sequences[name]);
   }
 
+  if (ref.detectStringSyntax(name)) {
+    return ref.stringToSteps(name)
+  }
 
   function insertStep(index, name, o_) {
     if (ref.modules[name]) var moduleInfo = ref.modules[name][1];

src/Modules.js

@@ -7,8 +7,10 @@ module.exports = {
   'blend': require('./modules/Blend'),
   'blur': require('./modules/Blur'),
   'brightness': require('./modules/Brightness'),
+  'canvas-resize': require('./modules/CanvasResize'),
   'channel': require('./modules/Channel'),
   'colorbar': require('./modules/Colorbar'),
+  'color-temperature': require('./modules/ColorTemperature'),
   'colormap': require('./modules/Colormap'),
   'contrast': require('./modules/Contrast'),
   'convolution': require('./modules/Convolution'),
@@ -18,22 +20,26 @@ module.exports = {
   'draw-rectangle': require('./modules/DrawRectangle'),
   'dynamic': require('./modules/Dynamic'),
   'edge-detect': require('./modules/EdgeDetect'),
+  'exposure': require('./modules/Exposure'),
   'flip-image': require('./modules/FlipImage'),
   'fisheye-gl': require('./modules/FisheyeGl'),
   'histogram': require('./modules/Histogram'),
   'gamma-correction': require('./modules/GammaCorrection'),
   'gradient': require('./modules/Gradient'),
+  'grid-overlay': require('./modules/GridOverlay'),
   'import-image': require('./modules/ImportImage'),
   'invert': require('image-sequencer-invert'),
   'ndvi': require('./modules/Ndvi'),
   'ndvi-colormap': require('./modules/NdviColormap'),
   'paint-bucket': require('./modules/PaintBucket'),
   'overlay': require('./modules/Overlay'),
-  'replace-color':require('./modules/ReplaceColor'),
+  'replace-color': require('./modules/ReplaceColor'),
   'resize': require('./modules/Resize'),
   'rotate': require('./modules/Rotate'),
   'saturation': require('./modules/Saturation'),
+  'text-overlay': require('./modules/TextOverlay'),
   'threshold': require('./modules/Threshold'),
   'tint': require('./modules/Tint'),
+  'webgl-distort': require('./modules/WebglDistort'),
   'white-balance': require('./modules/WhiteBalance')
-}
+}

src/ReplaceImage.js

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

src/Strings.js

@@ -0,0 +1,159 @@
+module.exports = function(steps, modulesInfo, addSteps, copy) {
+  // Genates a CLI string for the current sequence
+  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
+      if (name !== "load-image"){
+        cliStringSteps += `${name} `;
+      }
+      for (var inp in modulesInfo(name).inputs) {
+        cliOptions[inp] = this.steps[step].options[inp];
+      }
+    }
+    cliStringSteps = cliStringSteps.substr(0, cliStringSteps.length - 1) + `"`;
+    return `sequencer -i [PATH] -s ${cliStringSteps} -d '${JSON.stringify(cliOptions)}'`
+  }
+
+  // Checks if input is a string of comma separated module names
+  function detectStringSyntax(str) {
+    let result = (str.includes(',') || str.includes('{')) ? true : false
+    return result
+  }
+
+  // Parses input string and returns array of module names
+  function parseStringSyntax(str) {
+    let stringifiedNames = str.replace(/\s/g, '')
+    let moduleNames = stringifiedNames.split(',')
+    return moduleNames
+  }
+
+  // imports string of comma separated module names to sequencer steps
+  function stringToSteps(str) {
+    let sequencer = this;
+    let names = []
+    if (this.name != "ImageSequencer")
+      sequencer = this.sequencer;
+    if (detectStringSyntax(str))
+      names = stringToJSON(str)
+    names.forEach(function eachStep(stepObj) {
+      sequencer.addSteps(stepObj.name, stepObj.options)
+    })
+  }
+
+  // Strigifies the current sequence
+  function toString(step) {
+    if (step) {
+      return stepToString(step);
+    } else {
+      return copy(this.steps.map(stepToString).slice(1).join(','));
+    }
+  }
+
+  // Stringifies one step of the sequence
+  function stepToString(step) {
+    var arg = (step.name)?step.name:step.options.name;
+    let inputs = modulesInfo(arg).inputs || {}, op = {};
+
+    for (let input in inputs) {
+
+      if (!!step.options[input] && step.options[input] != inputs[input].default) {
+        op[input] = step.options[input];
+        op[input] = encodeURIComponent(op[input]);
+      }
+
+    }
+
+    var configurations = Object.keys(op).map(key => key + ':' + op[key]).join('|');
+    return `${arg}{${configurations}}`;
+  }
+
+  // exports the current sequence as an array of JSON steps
+  function toJSON() {
+    return this.stringToJSON(this.toString());
+  }
+
+  // Coverts stringified sequence into an array of JSON steps
+  function stringToJSON(str) {
+    let steps;
+    if (detectStringSyntax(str))
+      steps = parseStringSyntax(str);
+    else
+      steps = [str];
+    return steps.map(stringToJSONstep);
+  }
+
+  // Converts one stringified step into JSON
+  function stringToJSONstep(str) {
+    var bracesStrings;
+    if (str.includes('{'))
+      if (str.includes('(') && str.indexOf('(') < str.indexOf('{'))
+        bracesStrings = ['(', ')'];
+      else
+        bracesStrings = ['{', '}'];
+    else
+      bracesStrings = ['(', ')'];
+
+    if (str.indexOf(bracesStrings[0]) === -1) { // if there are no settings specified
+      var moduleName = str.substr(0);
+      stepSettings = "";
+    } else {
+      var moduleName = str.substr(0, str.indexOf(bracesStrings[0]));
+      stepSettings = str.slice(str.indexOf(bracesStrings[0]) + 1, -1);
+    }
+
+    stepSettings = stepSettings.split('|').reduce(function formatSettings(accumulator, current, i) {
+      var settingName = current.substr(0, current.indexOf(':')),
+        settingValue = current.substr(current.indexOf(':') + 1);
+      settingValue = settingValue.replace(/^\(/, ''); // strip () at start/end
+      settingValue = settingValue.replace(/^\{/, '').replace(/\}$/, ''); // strip {} at start/end
+      settingValue = decodeURIComponent(settingValue);
+      current = [
+        settingName,
+        settingValue
+      ];
+      if (!!settingName) accumulator[settingName] = settingValue;
+      return accumulator;
+    }, {});
+
+    return {
+      name: moduleName,
+      options: stepSettings
+    }
+  }
+
+  // imports a string into the sequencer steps
+  function importString(str) {
+    let sequencer = this;
+    if (this.name != "ImageSequencer")
+      sequencer = this.sequencer;
+    var stepsFromString = stringToJSON(str);
+    stepsFromString.forEach(function eachStep(stepObj) {
+      sequencer.addSteps(stepObj.name, stepObj.options);
+    });
+  }
+
+  // imports a array of JSON steps into the sequencer steps
+  function importJSON(obj) {
+    let sequencer = this;
+    if (this.name != "ImageSequencer")
+      sequencer = this.sequencer;
+    obj.forEach(function eachStep(stepObj) {
+      sequencer.addSteps(stepObj.name, stepObj.options);
+    });
+  }
+
+  return {
+    toCliString: toCliString,
+    detectStringSyntax: detectStringSyntax,
+    parseStringSyntax: parseStringSyntax,
+    stringToSteps: stringToSteps,
+    toString: toString,
+    stepToString: stepToString,
+    toJSON: toJSON,
+    stringToJSON: stringToJSON,
+    stringToJSONstep: stringToJSONstep,
+    importString: importString,
+    importJSON: importJSON
+  }
+}

src/modules/CanvasResize/Module.js

@@ -0,0 +1,63 @@
+/*
+* Changes the Canvas Size
+*/
+module.exports = function canvasResize(options, UI) {
+
+    var defaults = require('./../../util/getDefaults.js')(require('./info.json'));
+    var output;
+
+
+
+    function draw(input, callback, progressObj) {
+
+        options.width = options.width || defaults.width;
+        options.height = options.height || defaults.height;
+        options.x = options.x || defaults.x;
+        options.y = options.y || defaults.y;
+
+        progressObj.stop(true);
+        progressObj.overrideFlag = true;
+
+        var step = this;
+
+        function extraManipulation(pixels) {
+
+            let newPixels = require('ndarray')(new Uint8Array(4 * options.width * options.height).fill(255), [options.width, options.height, 4]);
+            let iMax = options.width - options.x,
+                jMax = options.height - options.y;
+            for (let i = 0; i < iMax && i < pixels.shape[0]; i++) {
+                for (let j = 0; j < jMax && j < pixels.shape[1]; j++) {
+                    let x = i + options.x, y = j + options.y;
+                    newPixels.set(x, y, 0, pixels.get(i, j, 0));
+                    newPixels.set(x, y, 1, pixels.get(i, j, 1));
+                    newPixels.set(x, y, 2, pixels.get(i, j, 2));
+                    newPixels.set(x, y, 3, pixels.get(i, j, 3));
+                }
+            }
+            return newPixels;
+        }
+
+        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,
+            extraManipulation: extraManipulation,
+            format: input.format,
+            image: options.image,
+            inBrowser: options.inBrowser,
+            callback: callback
+        });
+
+    }
+    return {
+        options: options,
+        draw: draw,
+        output: output,
+        UI: UI
+    }
+}

src/modules/CanvasResize/index.js

@@ -0,0 +1,4 @@
+module.exports = [
+    require('./Module'),
+    require('./info.json')
+]

src/modules/CanvasResize/info.json

@@ -0,0 +1,26 @@
+{
+    "name": "Resize Canvas",
+    "description": "This module resizes the canvas and overlays the ouput of the previous step at given location",
+    "inputs": {
+        "width": {
+            "type": "integer",
+            "desc": "Final width of the canvas",
+            "default": 1000
+        },
+        "height": {
+            "type": "integer",
+            "desc": "Final height of the canvas",
+            "default": 1000
+        },
+        "x": {
+            "type": "integer",
+            "desc": "X-cord of the top left corner of the image on the canvas",
+            "default": 500
+        },
+        "y": {
+            "type": "float",
+            "desc": "Y-cord of the top left corner of the image on the canvas",
+            "default": 500
+        }
+    }
+}

src/modules/ColorTemperature/Module.js

@@ -0,0 +1,81 @@
+module.exports = function ColorTemperature(options, UI) {
+
+    var output;
+
+    function draw(input, callback, progressObj) {
+
+        options.temperature = (options.temperature > "40000") ? "40000" : options.temperature
+
+        progressObj.stop(true);
+        progressObj.overrideFlag = true;
+
+        var step = this;
+
+        function extraManipulation(pixels) {
+
+            let temp = parseInt(options.temperature)
+            temp /= 100
+
+            let r, g, b;
+
+            if (temp <= 66) {
+                r = 255;
+                g = Math.min(Math.max(99.4708025861 * Math.log(temp) - 161.1195681661, 0), 255);
+            } else {
+                r = Math.min(Math.max(329.698727446 * Math.pow(temp - 60, -0.1332047592), 0), 255);
+                g = Math.min(Math.max(288.1221695283 * Math.pow(temp - 60, -0.0755148492), 0), 255);
+            }
+
+            if (temp >= 66) {
+                b = 255;
+            } else if (temp <= 19) {
+                b = 0;
+            } else {
+                b = temp - 10;
+                b = Math.min(Math.max(138.5177312231 * Math.log(b) - 305.0447927307, 0), 255);
+            }
+
+            for (let i = 0; i < pixels.shape[0]; i++) {
+                for (let j = 0; j < pixels.shape[1]; j++) {
+
+                    r_data = pixels.get(i, j, 0)
+                    r_new_data = (255 / r) * r_data
+                    pixels.set(i, j, 0, r_new_data)
+
+                    g_data = pixels.get(i, j, 1)
+                    g_new_data = (255 / g) * g_data
+                    pixels.set(i, j, 1, g_new_data)
+
+                    b_data = pixels.get(i, j, 2)
+                    b_new_data = (255 / b) * b_data
+                    pixels.set(i, j, 2, b_new_data)
+                }
+            }
+
+            return pixels
+        }
+
+        function output(image, datauri, mimetype) {
+
+            step.output = { src: datauri, format: mimetype };
+
+        }
+
+        return require('../_nomodule/PixelManipulation.js')(input, {
+            output: output,
+            extraManipulation: extraManipulation,
+            format: input.format,
+            image: options.image,
+            inBrowser: options.inBrowser,
+            callback: callback
+        });
+    }
+
+    return {
+        options: options,
+        draw: draw,
+        output: output,
+        UI: UI
+    }
+
+}

src/modules/ColorTemperature/index.js

@@ -0,0 +1,4 @@
+module.exports = [
+    require('./Module'),
+    require('./info.json')
+]

src/modules/ColorTemperature/info.json

@@ -0,0 +1,12 @@
+{
+    "name": "Color Temperature",
+    "description": "Changes the color temperature of the image.",
+    "inputs": {
+      "temperature": {
+        "type": "integer",
+        "desc": "Temperature between 0 - 40,000 Kelvin",
+        "default": 6000
+      }
+    },
+    "docs-link":"https://github.com/publiclab/image-sequencer/blob/main/docs/MODULES.md#color-temperature"
+}

src/modules/Crop/Crop.js

@@ -21,14 +21,21 @@ module.exports = function Crop(input,options,callback) {
     for(var i = 0; i < w ; i++){
       backgroundArray = backgroundArray.concat([backgroundColor[0],backgroundColor[1],backgroundColor[2],backgroundColor[3]]);
     }
-    var newarray = new Uint8Array(4*w*h);
+    // 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){
-      newarray.set(pixels.data.slice(n*4*iw + ox, n*4*iw + ox + 4*w),4*w*(n-oy));
+        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);
       } else {
-        newarray.set(backgroundArray,4*w*(n-oy));
+        array.push.apply(array,backgroundArray);
       }
     }
+    
+    var newarray = Uint8Array.from(array);
     pixels.data = newarray;
     pixels.shape = [w,h,4];
     pixels.stride[1] = 4*w;

src/modules/Crop/Ui.js

@@ -42,6 +42,7 @@ module.exports = function CropModuleUi(step, ui) {
           converted[2],
           converted[3]
         );
+        $($(imgEl()).parents()[3]).find("input").trigger("change")
       }
     });
   }
@@ -77,7 +78,7 @@ module.exports = function CropModuleUi(step, ui) {
   }
 
   function setOptions(x1, y1, width, height) {
-    let options = $($(imgEl()).parents()[2]).find("input");
+    let options = $($(imgEl()).parents()[3]).find("input");
     options[0].value = x1;
     options[1].value = y1;
     options[2].value = width;

src/modules/Crop/info.json

@@ -4,22 +4,22 @@
   "url": "https://github.com/publiclab/image-sequencer/tree/master/MODULES.md",
   "inputs": {
     "x": {
-      "type": "integer",
+      "type": "string",
       "desc": "X-position (measured from left) from where cropping starts",
       "default": 0
     },
     "y": {
-      "type": "integer",
+      "type": "string",
       "desc": "Y-position (measured from top) from where cropping starts",
       "default": 0
     },
     "w": {
-      "type": "integer",
+      "type": "string",
       "desc": "Width of crop",
       "default": "(50%)"
     },
     "h": {
-      "type": "integer",
+      "type": "string",
       "desc": "Height of crop",
       "default": "(50%)"
     },

src/modules/EdgeDetect/Module.js

@@ -7,7 +7,7 @@ module.exports = function edgeDetect(options, UI) {
   options.blur = options.blur || defaults.blur;
   options.highThresholdRatio = options.highThresholdRatio || defaults.highThresholdRatio;
   options.lowThresholdRatio = options.lowThresholdRatio || defaults.lowThresholdRatio;
-  options.hystereis = options.hysteresis || defaults.hysteresis;
+  options.hysteresis = options.hysteresis || defaults.hysteresis;
 
   var output;
 
@@ -27,7 +27,7 @@ module.exports = function edgeDetect(options, UI) {
 
     function extraManipulation(pixels) {
       pixels = require('ndarray-gaussian-filter')(pixels, options.blur);
-      pixels = require('./EdgeUtils')(pixels, options.highThresholdRatio, options.lowThresholdRatio, options.hystereis);
+      pixels = require('./EdgeUtils')(pixels, options.highThresholdRatio, options.lowThresholdRatio, options.hysteresis);
       return pixels;
     }
 

src/modules/Exposure/Module.js

@@ -0,0 +1,50 @@
+/*
+* Changes the Image Exposure
+*/
+
+module.exports = function Exposure(options,UI){
+
+    var defaults = require('./../../util/getDefaults.js')(require('./info.json'));
+    var output;
+
+    function draw(input,callback,progressObj){
+
+        options.exposure = options.exposure || defaults.exposure
+        var exposure = Math.pow(2, options.exposure);
+        progressObj.stop(true);
+        progressObj.overrideFlag = true;
+
+        var step = this;
+
+        function changePixel(r, g, b, a){
+
+            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){
+
+            // This output is accessible by Image Sequencer
+            step.output = {src:datauri,format:mimetype};
+
+        }
+
+        return require('../_nomodule/PixelManipulation.js')(input, {
+            output: output,
+            changePixel: changePixel,
+            format: input.format,
+            image: options.image,
+            inBrowser: options.inBrowser,
+            callback: callback
+        });
+
+    }
+    return {
+        options: options,
+        draw:  draw,
+        output: output,
+        UI: UI
+    }
+}

src/modules/Exposure/index.js

@@ -0,0 +1,4 @@
+module.exports = [
+    require('./Module'),
+    require('./info.json')
+]

src/modules/Exposure/info.json

@@ -0,0 +1,15 @@
+{
+  "name": "Exposure",
+  "description": "Change the exposure of the image by given exposure value",
+  "inputs": {
+      "exposure": {
+          "type": "float",
+          "desc": "exposure value for the new image",
+          "default": 1,
+          "min": -3,
+          "max": 4,
+          "step": 0.05
+      }
+  },
+  "docs-link":"https://github.com/publiclab/image-sequencer/blob/main/docs/MODULES.md"
+}

src/modules/FisheyeGl/Module.js

@@ -1,26 +1,25 @@
 /*
- * Resolves Fisheye Effect
- */
-module.exports = function DoNothing(options,UI) {
+* Resolves Fisheye Effect
+*/
+module.exports = function DoNothing(options, UI) {
 
   var output;
 
-  require('fisheyegl');
+  var gl = require('fisheyegl');
 
-  function draw(input,callback) {
+  function draw(input, callback) {
 
     var step = this;
 
-    if (!options.inBrowser) { // This module is only for browser
-      this.output = input;
-      callback();
+    if (!options.inBrowser) {
+      require('../_nomodule/gl-context')(input, callback, step, options);
     }
     else {
       // Create a canvas, if it doesn't already exist.
       if (!document.querySelector('#image-sequencer-canvas')) {
         var canvas = document.createElement('canvas');
         canvas.style.display = "none";
-        canvas.setAttribute('id','image-sequencer-canvas');
+        canvas.setAttribute('id', 'image-sequencer-canvas');
         document.body.append(canvas);
       }
       else var canvas = document.querySelector('#image-sequencer-canvas');
@@ -48,10 +47,10 @@ module.exports = function DoNothing(options,UI) {
       distorter.fov.y = options.y;
 
       // generate fisheyegl output
-      distorter.setImage(input.src,function(){
+      distorter.setImage(input.src, function() {
 
         // this output is accessible to Image Sequencer
-        step.output = {src: canvas.toDataURL(), format: input.format};
+        step.output = { src: canvas.toDataURL(), format: input.format };
 
         // Tell Image Sequencer and UI that step has been drawn
         callback();

src/modules/GridOverlay/GridOverlay.js

@@ -0,0 +1,28 @@
+module.exports = exports = function(pixels, options){
+    var defaults = require('./../../util/getDefaults.js')(require('./info.json'));
+
+    options.x = Number(options.x) || defaults.x;
+    options.y = Number(options.y) || defaults.y;
+    color = options.color || defaults.color;
+    color = color.split(" ");
+
+        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]);
+            }
+        }
+    
+        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]);
+            }
+        } 
+
+    return pixels;
+}

src/modules/GridOverlay/Module.js

@@ -0,0 +1,43 @@
+
+module.exports = function GridOverlay(options,UI) {
+  
+  var output;
+
+  function draw(input, callback, progressObj) {
+
+    progressObj.stop(true);
+    progressObj.overrideFlag = true;
+
+    var step = this;
+    
+    function extraManipulation(pixels) {
+     pixels = require('./GridOverlay')(pixels, options);
+     return pixels
+   }
+
+    function output(image, datauri, mimetype) {
+
+      // This output is accesible by Image Sequencer
+      step.output = { src: datauri, format: mimetype };
+
+    }
+
+    return require('../_nomodule/PixelManipulation.js')(input, {
+      output: output,
+      extraManipulation: extraManipulation,
+      format: input.format,
+      image: options.image,
+      inBrowser: options.inBrowser,
+      callback: callback
+    });
+
+  
+ }
+
+  return {
+    options: options,
+    draw: draw,
+    output: output,
+    UI: UI
+  }
+}

src/modules/GridOverlay/index.js

@@ -0,0 +1,4 @@
+module.exports = [
+    require('./Module'),
+    require('./info.json')
+]

src/modules/GridOverlay/info.json

@@ -0,0 +1,22 @@
+{
+    "name": "GridOverlay",
+    "description": "Overlays a grid over an Image",
+    "inputs": {
+        "x": {
+            "type": "integer",
+            "desc": "X-position (measured from left) from where grid starts",
+            "default": 100
+        },
+        "y": {
+            "type": "integer",
+            "desc": "Y-position (measured from top) from where grid starts",
+            "default": 100
+        },
+        "color":{
+            "type": "string",
+            "desc": "RGBA values separated by a space",
+            "default": "0 0 0 255"
+          }
+    },
+    "only": "browser" 
+}

src/modules/ImportImage/Module.js

@@ -9,10 +9,9 @@
 module.exports = function ImportImageModule(options, UI) {
 
   var defaults = require('./../../util/getDefaults.js')(require('./info.json'));
-  options.imageUrl = options.url || defaults.url;
+  options.imageUrl = options.inBrowser ? (options.url || defaults.url) : "./examples/images/monarch.png";
 
-  var output,
-    imgObj = new Image();
+  var output;
 
   // we should get UI to return the image thumbnail so we can attach our own UI extensions
 
@@ -27,32 +26,17 @@ module.exports = function ImportImageModule(options, UI) {
 
     var step = this;
 
-    if (!options.inBrowser) { // This module is only for browser
-      this.output = input;
+    step.metadata = step.metadata || {};
+    // TODO: develop a standard API method for saving each input state,
+    // for reference in future steps (for blending, for example)
+    step.metadata.input = input;
+    // options.format = require('../../util/GetFormat')(options.imageUrl);
+
+    var helper = ImageSequencer({ inBrowser: options.inBrowser, ui: false });
+    helper.loadImages(options.imageUrl, () => {
+      step.output = helper.steps[0].output;
       callback();
-    } else {
-      step.metadata = step.metadata || {};
-      // TODO: develop a standard API method for saving each input state,
-      // for reference in future steps (for blending, for example)
-      step.metadata.input = input;
-
-      function onLoad() {
-
-        // This output is accessible to Image Sequencer
-        step.output = {
-          src: imgObj.src,
-          format: options.format
-        }
-
-        // Tell Image Sequencer that step has been drawn
-        callback();
-      }
-
-      options.format = require('../../util/GetFormat')(options.imageUrl);
-      imgObj.onload = onLoad;
-      imgObj.src = options.imageUrl;
-
-    }
+    });
   }
 
   return {

src/modules/TextOverlay/Module.js

@@ -0,0 +1,51 @@
+
+module.exports = function TextOverlay(options,UI) {
+  
+     var output;
+   
+     function draw(input, callback, progressObj) {
+   
+       progressObj.stop(true);
+       progressObj.overrideFlag = true;
+   
+       var step = this;
+       if (!options.step.inBrowser) { // This module is only for browser
+        this.output = input;
+        callback();
+      }
+      else{
+       var priorStep = this.getStep(-1); // get the previous step to add text onto it.
+
+       function extraManipulation(pixels) {
+        //if (options.step.inBrowser) 
+        pixels = require('./TextOverlay')(pixels, options,priorStep);
+        return pixels
+      }
+
+       function output(image, datauri, mimetype) {
+   
+         // This output is accesible by Image Sequencer
+         step.output = { src: datauri, format: mimetype };
+   
+       }
+   
+       return require('../_nomodule/PixelManipulation.js')(input, {
+         output: output,
+         extraManipulation: extraManipulation,
+         format: input.format,
+         image: options.image,
+         inBrowser: options.inBrowser,
+         callback: callback
+       });
+   
+     }
+    }
+   
+     return {
+       options: options,
+       draw: draw,
+       output: output,
+       UI: UI
+     }
+   }
+   

src/modules/TextOverlay/TextOverlay.js

@@ -0,0 +1,27 @@
+module.exports = exports = function(pixels, options,priorstep){
+    var defaults = require('./../../util/getDefaults.js')(require('./info.json'));
+
+    options.text = options.text || defaults.text;
+    options.x = options.x || defaults.x;
+    options.y = options.y || defaults.y;
+    options.font = options.font || defaults.font;
+    options.color = options.color || defaults.color;
+    options.size = options.size || defaults.size;
+
+        var img = $(priorstep.imgElement);
+        if(Object.keys(img).length === 0){
+            img = $(priorstep.options.step.imgElement);
+        }
+        var canvas = document.createElement("canvas");
+        canvas.width = pixels.shape[0]; //img.width();
+        canvas.height = pixels.shape[1]; //img.height();
+        var ctx = canvas.getContext('2d');
+        ctx.drawImage(img[0], 0, 0);
+        ctx.fillStyle = options.color;
+        ctx.font = options.size +"px " + options.font;
+        ctx.fillText(options.text, options.x, options.y);
+
+        var myImageData = ctx.getImageData(0,0,canvas.width,canvas.height);
+        pixels.data = myImageData.data
+        return pixels;
+}

src/modules/TextOverlay/index.js

@@ -0,0 +1,4 @@
+module.exports = [
+    require('./Module'),
+    require('./info.json')
+]

src/modules/TextOverlay/info.json

@@ -0,0 +1,53 @@
+{
+    "name": "Text-Overlay",
+    "description": "Overlay text on image.",
+    "inputs": {
+        "text": {
+            "type": "string",
+            "desc": "Enter the text to overlay.",
+            "default": "Lorem ipsum"
+        },
+        "x": {
+            "type": "integer",
+            "desc": "Starting text horizontal position.",
+            "default": "20"
+        },
+        "y": {
+            "type": "integer",
+            "desc": "Starting text vertical position.",
+            "default": "20"
+        },
+        "font": {
+            "type": "select",
+            "desc": "Select the font style.",
+            "default": "serif",
+            "values": [
+                "serif",
+                "arial",
+                "times",
+                "courier",
+                "Montserrat"
+            ]
+        },
+        "color": {
+            "type": "select",
+            "desc": "Select the text color.",
+            "default": "black",
+            "values": [
+                "black",
+                "blue",
+                "green",
+                "red",
+                "white",
+                "pink",
+                "orange"
+            ]
+        },
+        "size": {
+            "type" : "integer",
+            "desc": "Enter the font size in pixels.",
+            "default": "12"
+        }
+    },
+    "only": "browser" 
+}

src/modules/WebglDistort/Module.js

@@ -0,0 +1,230 @@
+/*
+* Resolves Fisheye Effect
+*/
+module.exports = function DoNothing(options, UI) {
+
+    var defaults = require('./../../util/getDefaults.js')(require('./info.json'));
+
+    var output;
+    var fx = require('./glfx')
+
+    var dataURItoBlob = function dataURItoBlob(dataURI) {
+        // convert base64/URLEncoded data component to raw binary data held in a string
+        var byteString;
+        if (dataURI.split(',')[0].indexOf('base64') >= 0)
+            byteString = atob(dataURI.split(',')[1]);
+        else
+            byteString = unescape(dataURI.split(',')[1]);
+
+        // separate out the mime component
+        var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
+
+        // write the bytes of the string to a typed array
+        var ia = new Uint8Array(byteString.length);
+        for (var i = 0; i < byteString.length; i++) {
+            ia[i] = byteString.charCodeAt(i);
+        }
+
+        return new Blob([ia], { type: mimeString });
+    }
+
+    var canvasToBlobUrl = function canvasToBlobUrl(canvas) {
+
+        var blob = dataURItoBlob(canvas.toDataURL('image/png'));
+        return window.URL.createObjectURL(blob);
+
+    }
+
+    var warpWebGl = function warpWebGl(id, matrix1, matrix2, download) {
+
+        // try to create a WebGL canvas (will fail if WebGL isn't supported)
+        try {
+            var canvas = fx.canvas(1500, 1500);
+        } catch (e) {
+            alert(e);
+            return;
+        }
+
+        // convert the image to a texture
+        var imageEl = document.getElementById(id);
+
+        var image = new Image();
+
+        image.onload = function() {
+
+            var texture = canvas.texture(image);
+
+            var bbox1 = {
+                nw: {
+                    x: matrix1[0],
+                    y: matrix1[1]
+                },
+                ne: {
+                    x: matrix1[2],
+                    y: matrix1[3]
+                },
+                se: {
+                    x: matrix1[4],
+                    y: matrix1[5]
+                },
+                sw: {
+                    x: matrix1[6],
+                    y: matrix1[7]
+                }
+            },
+                bbox2 = {
+                    nw: {
+                        x: matrix2[0],
+                        y: matrix2[1]
+                    },
+                    ne: {
+                        x: matrix2[2],
+                        y: matrix2[3]
+                    },
+                    se: {
+                        x: matrix2[4],
+                        y: matrix2[5]
+                    },
+                    sw: {
+                        x: matrix2[6],
+                        y: matrix2[7]
+                    }
+                };
+
+            var matrix1Xs = [],
+                matrix1Ys = [];
+
+            for (var i = 0; i < matrix1.length; i += 2) {
+                matrix1Xs.push(matrix1[i])
+            }
+
+            for (var i = 1; i < matrix1.length; i += 2) {
+                matrix1Ys.push(matrix1[i])
+            }
+
+            var matrix1northmost = Math.min.apply(null, matrix1Ys)
+            matrix1southmost = Math.max.apply(null, matrix1Ys)
+            matrix1westmost = Math.min.apply(null, matrix1Xs)
+            matrix1eastmost = Math.max.apply(null, matrix1Xs);
+
+            var matrix2Xs = [],
+                matrix2Ys = [];
+
+            for (var i = 0; i < matrix2.length; i += 2) {
+                matrix2Xs.push(matrix2[i])
+            }
+
+            for (var i = 1; i < matrix2.length; i += 2) {
+                matrix2Ys.push(matrix2[i])
+            }
+
+            var matrix2northmost = Math.min.apply(null, matrix2Ys)
+            matrix2southmost = Math.max.apply(null, matrix2Ys)
+            matrix2westmost = Math.min.apply(null, matrix2Xs)
+            matrix2eastmost = Math.max.apply(null, matrix2Xs);
+
+            var offsetX = matrix2westmost - matrix1westmost;
+            var offsetY = matrix2northmost - matrix1northmost;
+
+            canvas.draw(texture,
+                image.width,//  * ratio,
+                image.height// * ratio
+            );
+
+            var ratioY = (matrix2southmost - matrix2northmost)
+                / (matrix1southmost - matrix1northmost);
+
+            var ratioX = (matrix2eastmost - matrix2westmost)
+                / (matrix1eastmost - matrix1westmost);
+
+            var ratio = Math.max(ratioX, ratioY);
+
+            // stretch output matrix x to fix:
+            for (var i = 0; i < matrix2.length; i += 2) {
+                matrix2[i] -= offsetX;
+                matrix2[i] /= ratio;
+            }
+
+            // stretch output matrix y to fix:
+            for (var i = 1; i < matrix2.length; i += 2) {
+                matrix2[i] -= offsetY;
+                matrix2[i] /= ratio;
+            }
+
+            canvas.perspective(matrix1, matrix2).update();
+
+            // replace the image with the canvas
+            // image.parentNode.insertBefore(canvas, image);
+            // image.parentNode.removeChild(image);
+
+            var burl = canvasToBlobUrl(canvas);
+
+            if (download) {
+
+                window.open(burl);
+
+            } else { // replace the image
+
+                // keep non-blob version in case we have to fall back:
+                // image.src = canvas.toDataURL('image/png');
+                // window.location = canvas.toDataURL('image/png');
+                imageEl.src = burl;
+
+            }
+
+        }
+
+        image.src = imageEl.src;
+
+    }
+
+    function draw(input, callback) {
+
+        var step = this;
+
+        options.nw = options.nw || defaults.nw;
+        options.ne = options.ne || defaults.ne;
+        options.se = options.se || defaults.se;
+        options.sw = options.sw || defaults.sw;
+
+        var parseDistortCoordinates = require('../../util/parseDistortCoordinates.js');
+        var cornerCoordinates = parseDistortCoordinates(options)
+
+        if (!options.inBrowser) {
+            // this.output = input;
+            // callback();
+            require('../_nomodule/gl-context')(input, callback, step, options);
+        }
+        else {
+            var image = document.createElement('img');
+            image.onload = () => {
+                warpWebGl(
+                    'img',
+                    [0, 0, 1023, 0, 1023, 767, 0, 767], // matrix 1 (before) corner coordinates, NW, NE, SE, SW
+                    // [0, 100, 1023, -50, 1223, 867, 100, 767]  // matrix 2 (after) corner coordinates
+                    cornerCoordinates
+                );
+                image.onload = () => {
+                    var canvas = document.createElement('canvas');
+                    canvas.width = image.naturalWidth; // or 'width' if you want a special/scaled size
+                    canvas.height = image.naturalHeight; // or 'height' if you want a special/scaled size
+                    canvas.getContext('2d').drawImage(image, 0, 0);
+
+                    step.output = { src: canvas.toDataURL('image/png'), format: 'png' }
+                    image.remove();
+                    callback();
+                };
+            };
+            image.src = input.src;
+            image.id = "img";
+            document.body.appendChild(image);
+        }
+    }
+
+    return {
+        options: options,
+        draw: draw,
+        output: output,
+        UI: UI
+    }
+}

src/modules/WebglDistort/glfx.js

@@ -0,0 +1,152 @@
+/*
+ * glfx.js
+ * http://evanw.github.com/glfx.js/
+ *
+ * Copyright 2011 Evan Wallace
+ * Released under the MIT license
+ */
+module.exports = function() {
+    function q(a, d, c) { return Math.max(a, Math.min(d, c)) } function w(b) { return { _: b, loadContentsOf: function(b) { a = this._.gl; this._.loadContentsOf(b) }, destroy: function() { a = this._.gl; this._.destroy() } } } function A(a) { return w(r.fromElement(a)) } function B(b, d) {
+        var c = a.UNSIGNED_BYTE; if (a.getExtension("OES_texture_float") && a.getExtension("OES_texture_float_linear")) { var e = new r(100, 100, a.RGBA, a.FLOAT); try { e.drawTo(function() { c = a.FLOAT }) } catch (g) { } e.destroy() } this._.texture && this._.texture.destroy();
+        this._.spareTexture && this._.spareTexture.destroy(); this.width = b; this.height = d; this._.texture = new r(b, d, a.RGBA, c); this._.spareTexture = new r(b, d, a.RGBA, c); this._.extraTexture = this._.extraTexture || new r(0, 0, a.RGBA, c); this._.flippedShader = this._.flippedShader || new h(null, "uniform sampler2D texture;varying vec2 texCoord;void main(){gl_FragColor=texture2D(texture,vec2(texCoord.x,1.0-texCoord.y));}"); this._.isInitialized = !0
+    } function C(a, d, c) {
+        this._.isInitialized &&
+            a._.width == this.width && a._.height == this.height || B.call(this, d ? d : a._.width, c ? c : a._.height); a._.use(); this._.texture.drawTo(function() { h.getDefaultShader().drawRect() }); return this
+    } function D() { this._.texture.use(); this._.flippedShader.drawRect(); return this } function f(a, d, c, e) { (c || this._.texture).use(); this._.spareTexture.drawTo(function() { a.uniforms(d).drawRect() }); this._.spareTexture.swapWith(e || this._.texture) } function E(a) { a.parentNode.insertBefore(this, a); a.parentNode.removeChild(a); return this }
+    function F() { var b = new r(this._.texture.width, this._.texture.height, a.RGBA, a.UNSIGNED_BYTE); this._.texture.use(); b.drawTo(function() { h.getDefaultShader().drawRect() }); return w(b) } function G() { var b = this._.texture.width, d = this._.texture.height, c = new Uint8Array(4 * b * d); this._.texture.drawTo(function() { a.readPixels(0, 0, b, d, a.RGBA, a.UNSIGNED_BYTE, c) }); return c } function k(b) { return function() { a = this._.gl; return b.apply(this, arguments) } } function x(a, d, c, e, g, l, n, p) {
+        var m = c - g, h = e - l, f = n - g, k = p - l; g = a - c + g - n; l =
+            d - e + l - p; var q = m * k - f * h, f = (g * k - f * l) / q, m = (m * l - g * h) / q; return [c - a + f * c, e - d + f * e, f, n - a + m * n, p - d + m * p, m, a, d, 1]
+    } function y(a) { var d = a[0], c = a[1], e = a[2], g = a[3], l = a[4], n = a[5], p = a[6], m = a[7]; a = a[8]; var f = d * l * a - d * n * m - c * g * a + c * n * p + e * g * m - e * l * p; return [(l * a - n * m) / f, (e * m - c * a) / f, (c * n - e * l) / f, (n * p - g * a) / f, (d * a - e * p) / f, (e * g - d * n) / f, (g * m - l * p) / f, (c * p - d * m) / f, (d * l - c * g) / f] } function z(a) {
+        var d = a.length; this.xa = []; this.ya = []; this.u = []; this.y2 = []; a.sort(function(a, b) { return a[0] - b[0] }); for (var c = 0; c < d; c++)this.xa.push(a[c][0]), this.ya.push(a[c][1]);
+        this.u[0] = 0; this.y2[0] = 0; for (c = 1; c < d - 1; ++c) { a = this.xa[c + 1] - this.xa[c - 1]; var e = (this.xa[c] - this.xa[c - 1]) / a, g = e * this.y2[c - 1] + 2; this.y2[c] = (e - 1) / g; this.u[c] = (6 * ((this.ya[c + 1] - this.ya[c]) / (this.xa[c + 1] - this.xa[c]) - (this.ya[c] - this.ya[c - 1]) / (this.xa[c] - this.xa[c - 1])) / a - e * this.u[c - 1]) / g } this.y2[d - 1] = 0; for (c = d - 2; 0 <= c; --c)this.y2[c] = this.y2[c] * this.y2[c + 1] + this.u[c]
+    } function u(a, d) {
+        return new h(null, a + "uniform sampler2D texture;uniform vec2 texSize;varying vec2 texCoord;void main(){vec2 coord=texCoord*texSize;" +
+            d + "gl_FragColor=texture2D(texture,coord/texSize);vec2 clampedCoord=clamp(coord,vec2(0.0),texSize);if(coord!=clampedCoord){gl_FragColor.a*=max(0.0,1.0-length(coord-clampedCoord));}}")
+    } function H(b, d) {
+        a.brightnessContrast = a.brightnessContrast || new h(null, "uniform sampler2D texture;uniform float brightness;uniform float contrast;varying vec2 texCoord;void main(){vec4 color=texture2D(texture,texCoord);color.rgb+=brightness;if(contrast>0.0){color.rgb=(color.rgb-0.5)/(1.0-contrast)+0.5;}else{color.rgb=(color.rgb-0.5)*(1.0+contrast)+0.5;}gl_FragColor=color;}");
+        f.call(this, a.brightnessContrast, { brightness: q(-1, b, 1), contrast: q(-1, d, 1) }); return this
+    } function t(a) { a = new z(a); for (var d = [], c = 0; 256 > c; c++)d.push(q(0, Math.floor(256 * a.interpolate(c / 255)), 255)); return d } function I(b, d, c) {
+        b = t(b); 1 == arguments.length ? d = c = b : (d = t(d), c = t(c)); for (var e = [], g = 0; 256 > g; g++)e.splice(e.length, 0, b[g], d[g], c[g], 255); this._.extraTexture.initFromBytes(256, 1, e); this._.extraTexture.use(1); a.curves = a.curves || new h(null, "uniform sampler2D texture;uniform sampler2D map;varying vec2 texCoord;void main(){vec4 color=texture2D(texture,texCoord);color.r=texture2D(map,vec2(color.r)).r;color.g=texture2D(map,vec2(color.g)).g;color.b=texture2D(map,vec2(color.b)).b;gl_FragColor=color;}");
+        a.curves.textures({ map: 1 }); f.call(this, a.curves, {}); return this
+    } function J(b) {
+        a.denoise = a.denoise || new h(null, "uniform sampler2D texture;uniform float exponent;uniform float strength;uniform vec2 texSize;varying vec2 texCoord;void main(){vec4 center=texture2D(texture,texCoord);vec4 color=vec4(0.0);float total=0.0;for(float x=-4.0;x<=4.0;x+=1.0){for(float y=-4.0;y<=4.0;y+=1.0){vec4 sample=texture2D(texture,texCoord+vec2(x,y)/texSize);float weight=1.0-abs(dot(sample.rgb-center.rgb,vec3(0.25)));weight=pow(weight,exponent);color+=sample*weight;total+=weight;}}gl_FragColor=color/total;}");
+        for (var d = 0; 2 > d; d++)f.call(this, a.denoise, { exponent: Math.max(0, b), texSize: [this.width, this.height] }); return this
+    } function K(b, d) {
+        a.hueSaturation = a.hueSaturation || new h(null, "uniform sampler2D texture;uniform float hue;uniform float saturation;varying vec2 texCoord;void main(){vec4 color=texture2D(texture,texCoord);float angle=hue*3.14159265;float s=sin(angle),c=cos(angle);vec3 weights=(vec3(2.0*c,-sqrt(3.0)*s-c,sqrt(3.0)*s-c)+1.0)/3.0;float len=length(color.rgb);color.rgb=vec3(dot(color.rgb,weights.xyz),dot(color.rgb,weights.zxy),dot(color.rgb,weights.yzx));float average=(color.r+color.g+color.b)/3.0;if(saturation>0.0){color.rgb+=(average-color.rgb)*(1.0-1.0/(1.001-saturation));}else{color.rgb+=(average-color.rgb)*(-saturation);}gl_FragColor=color;}");
+        f.call(this, a.hueSaturation, { hue: q(-1, b, 1), saturation: q(-1, d, 1) }); return this
+    } function L(b) {
+        a.noise = a.noise || new h(null, "uniform sampler2D texture;uniform float amount;varying vec2 texCoord;float rand(vec2 co){return fract(sin(dot(co.xy,vec2(12.9898,78.233)))*43758.5453);}void main(){vec4 color=texture2D(texture,texCoord);float diff=(rand(texCoord)-0.5)*amount;color.r+=diff;color.g+=diff;color.b+=diff;gl_FragColor=color;}");
+        f.call(this, a.noise, { amount: q(0, b, 1) }); return this
+    } function M(b) {
+        a.sepia = a.sepia || new h(null, "uniform sampler2D texture;uniform float amount;varying vec2 texCoord;void main(){vec4 color=texture2D(texture,texCoord);float r=color.r;float g=color.g;float b=color.b;color.r=min(1.0,(r*(1.0-(0.607*amount)))+(g*(0.769*amount))+(b*(0.189*amount)));color.g=min(1.0,(r*0.349*amount)+(g*(1.0-(0.314*amount)))+(b*0.168*amount));color.b=min(1.0,(r*0.272*amount)+(g*0.534*amount)+(b*(1.0-(0.869*amount))));gl_FragColor=color;}");
+        f.call(this, a.sepia, { amount: q(0, b, 1) }); return this
+    } function N(b, d) {
+        a.unsharpMask = a.unsharpMask || new h(null, "uniform sampler2D blurredTexture;uniform sampler2D originalTexture;uniform float strength;uniform float threshold;varying vec2 texCoord;void main(){vec4 blurred=texture2D(blurredTexture,texCoord);vec4 original=texture2D(originalTexture,texCoord);gl_FragColor=mix(blurred,original,1.0+strength);}");
+        this._.extraTexture.ensureFormat(this._.texture); this._.texture.use(); this._.extraTexture.drawTo(function() { h.getDefaultShader().drawRect() }); this._.extraTexture.use(1); this.triangleBlur(b); a.unsharpMask.textures({ originalTexture: 1 }); f.call(this, a.unsharpMask, { strength: d }); this._.extraTexture.unuse(1); return this
+    } function O(b) {
+        a.vibrance = a.vibrance || new h(null, "uniform sampler2D texture;uniform float amount;varying vec2 texCoord;void main(){vec4 color=texture2D(texture,texCoord);float average=(color.r+color.g+color.b)/3.0;float mx=max(color.r,max(color.g,color.b));float amt=(mx-average)*(-amount*3.0);color.rgb=mix(color.rgb,vec3(mx),amt);gl_FragColor=color;}");
+        f.call(this, a.vibrance, { amount: q(-1, b, 1) }); return this
+    } function P(b, d) {
+        a.vignette = a.vignette || new h(null, "uniform sampler2D texture;uniform float size;uniform float amount;varying vec2 texCoord;void main(){vec4 color=texture2D(texture,texCoord);float dist=distance(texCoord,vec2(0.5,0.5));color.rgb*=smoothstep(0.8,size*0.799,dist*(amount+size));gl_FragColor=color;}");
+        f.call(this, a.vignette, { size: q(0, b, 1), amount: q(0, d, 1) }); return this
+    } function Q(b, d, c) {
+        a.lensBlurPrePass = a.lensBlurPrePass || new h(null, "uniform sampler2D texture;uniform float power;varying vec2 texCoord;void main(){vec4 color=texture2D(texture,texCoord);color=pow(color,vec4(power));gl_FragColor=vec4(color);}"); var e = "uniform sampler2D texture0;uniform sampler2D texture1;uniform vec2 delta0;uniform vec2 delta1;uniform float power;varying vec2 texCoord;" +
+            s + "vec4 sample(vec2 delta){float offset=random(vec3(delta,151.7182),0.0);vec4 color=vec4(0.0);float total=0.0;for(float t=0.0;t<=30.0;t++){float percent=(t+offset)/30.0;color+=texture2D(texture0,texCoord+delta*percent);total+=1.0;}return color/total;}";
+        a.lensBlur0 = a.lensBlur0 || new h(null, e + "void main(){gl_FragColor=sample(delta0);}"); a.lensBlur1 = a.lensBlur1 || new h(null, e + "void main(){gl_FragColor=(sample(delta0)+sample(delta1))*0.5;}"); a.lensBlur2 = a.lensBlur2 || (new h(null, e + "void main(){vec4 color=(sample(delta0)+2.0*texture2D(texture1,texCoord))/3.0;gl_FragColor=pow(color,vec4(power));}")).textures({ texture1: 1 }); for (var e =
+            [], g = 0; 3 > g; g++) { var l = c + 2 * g * Math.PI / 3; e.push([b * Math.sin(l) / this.width, b * Math.cos(l) / this.height]) } b = Math.pow(10, q(-1, d, 1)); f.call(this, a.lensBlurPrePass, { power: b }); this._.extraTexture.ensureFormat(this._.texture); f.call(this, a.lensBlur0, { delta0: e[0] }, this._.texture, this._.extraTexture); f.call(this, a.lensBlur1, { delta0: e[1], delta1: e[2] }, this._.extraTexture, this._.extraTexture); f.call(this, a.lensBlur0, { delta0: e[1] }); this._.extraTexture.use(1); f.call(this, a.lensBlur2, { power: 1 / b, delta0: e[2] }); return this
+    }
+    function R(b, d, c, e, g, l) {
+        a.tiltShift = a.tiltShift || new h(null, "uniform sampler2D texture;uniform float blurRadius;uniform float gradientRadius;uniform vec2 start;uniform vec2 end;uniform vec2 delta;uniform vec2 texSize;varying vec2 texCoord;" + s + "void main(){vec4 color=vec4(0.0);float total=0.0;float offset=random(vec3(12.9898,78.233,151.7182),0.0);vec2 normal=normalize(vec2(start.y-end.y,end.x-start.x));float radius=smoothstep(0.0,1.0,abs(dot(texCoord*texSize-start,normal))/gradientRadius)*blurRadius;for(float t=-30.0;t<=30.0;t++){float percent=(t+offset-0.5)/30.0;float weight=1.0-abs(percent);vec4 sample=texture2D(texture,texCoord+delta/texSize*percent*radius);sample.rgb*=sample.a;color+=sample*weight;total+=weight;}gl_FragColor=color/total;gl_FragColor.rgb/=gl_FragColor.a+0.00001;}");
+        var n = c - b, p = e - d, m = Math.sqrt(n * n + p * p); f.call(this, a.tiltShift, { blurRadius: g, gradientRadius: l, start: [b, d], end: [c, e], delta: [n / m, p / m], texSize: [this.width, this.height] }); f.call(this, a.tiltShift, { blurRadius: g, gradientRadius: l, start: [b, d], end: [c, e], delta: [-p / m, n / m], texSize: [this.width, this.height] }); return this
+    } function S(b) {
+        a.triangleBlur = a.triangleBlur || new h(null, "uniform sampler2D texture;uniform vec2 delta;varying vec2 texCoord;" + s + "void main(){vec4 color=vec4(0.0);float total=0.0;float offset=random(vec3(12.9898,78.233,151.7182),0.0);for(float t=-30.0;t<=30.0;t++){float percent=(t+offset-0.5)/30.0;float weight=1.0-abs(percent);vec4 sample=texture2D(texture,texCoord+delta*percent);sample.rgb*=sample.a;color+=sample*weight;total+=weight;}gl_FragColor=color/total;gl_FragColor.rgb/=gl_FragColor.a+0.00001;}");
+        f.call(this, a.triangleBlur, { delta: [b / this.width, 0] }); f.call(this, a.triangleBlur, { delta: [0, b / this.height] }); return this
+    } function T(b, d, c) {
+        a.zoomBlur = a.zoomBlur || new h(null, "uniform sampler2D texture;uniform vec2 center;uniform float strength;uniform vec2 texSize;varying vec2 texCoord;" + s + "void main(){vec4 color=vec4(0.0);float total=0.0;vec2 toCenter=center-texCoord*texSize;float offset=random(vec3(12.9898,78.233,151.7182),0.0);for(float t=0.0;t<=40.0;t++){float percent=(t+offset)/40.0;float weight=4.0*(percent-percent*percent);vec4 sample=texture2D(texture,texCoord+toCenter*percent*strength/texSize);sample.rgb*=sample.a;color+=sample*weight;total+=weight;}gl_FragColor=color/total;gl_FragColor.rgb/=gl_FragColor.a+0.00001;}");
+        f.call(this, a.zoomBlur, { center: [b, d], strength: c, texSize: [this.width, this.height] }); return this
+    } function U(b, d, c, e) {
+        a.colorHalftone = a.colorHalftone || new h(null, "uniform sampler2D texture;uniform vec2 center;uniform float angle;uniform float scale;uniform vec2 texSize;varying vec2 texCoord;float pattern(float angle){float s=sin(angle),c=cos(angle);vec2 tex=texCoord*texSize-center;vec2 point=vec2(c*tex.x-s*tex.y,s*tex.x+c*tex.y)*scale;return(sin(point.x)*sin(point.y))*4.0;}void main(){vec4 color=texture2D(texture,texCoord);vec3 cmy=1.0-color.rgb;float k=min(cmy.x,min(cmy.y,cmy.z));cmy=(cmy-k)/(1.0-k);cmy=clamp(cmy*10.0-3.0+vec3(pattern(angle+0.26179),pattern(angle+1.30899),pattern(angle)),0.0,1.0);k=clamp(k*10.0-5.0+pattern(angle+0.78539),0.0,1.0);gl_FragColor=vec4(1.0-cmy-k,color.a);}");
+        f.call(this, a.colorHalftone, { center: [b, d], angle: c, scale: Math.PI / e, texSize: [this.width, this.height] }); return this
+    } function V(b, d, c, e) {
+        a.dotScreen = a.dotScreen || new h(null, "uniform sampler2D texture;uniform vec2 center;uniform float angle;uniform float scale;uniform vec2 texSize;varying vec2 texCoord;float pattern(){float s=sin(angle),c=cos(angle);vec2 tex=texCoord*texSize-center;vec2 point=vec2(c*tex.x-s*tex.y,s*tex.x+c*tex.y)*scale;return(sin(point.x)*sin(point.y))*4.0;}void main(){vec4 color=texture2D(texture,texCoord);float average=(color.r+color.g+color.b)/3.0;gl_FragColor=vec4(vec3(average*10.0-5.0+pattern()),color.a);}");
+        f.call(this, a.dotScreen, { center: [b, d], angle: c, scale: Math.PI / e, texSize: [this.width, this.height] }); return this
+    } function W(b) {
+        a.edgeWork1 = a.edgeWork1 || new h(null, "uniform sampler2D texture;uniform vec2 delta;varying vec2 texCoord;" + s + "void main(){vec2 color=vec2(0.0);vec2 total=vec2(0.0);float offset=random(vec3(12.9898,78.233,151.7182),0.0);for(float t=-30.0;t<=30.0;t++){float percent=(t+offset-0.5)/30.0;float weight=1.0-abs(percent);vec3 sample=texture2D(texture,texCoord+delta*percent).rgb;float average=(sample.r+sample.g+sample.b)/3.0;color.x+=average*weight;total.x+=weight;if(abs(t)<15.0){weight=weight*2.0-1.0;color.y+=average*weight;total.y+=weight;}}gl_FragColor=vec4(color/total,0.0,1.0);}");
+        a.edgeWork2 = a.edgeWork2 || new h(null, "uniform sampler2D texture;uniform vec2 delta;varying vec2 texCoord;" + s + "void main(){vec2 color=vec2(0.0);vec2 total=vec2(0.0);float offset=random(vec3(12.9898,78.233,151.7182),0.0);for(float t=-30.0;t<=30.0;t++){float percent=(t+offset-0.5)/30.0;float weight=1.0-abs(percent);vec2 sample=texture2D(texture,texCoord+delta*percent).xy;color.x+=sample.x*weight;total.x+=weight;if(abs(t)<15.0){weight=weight*2.0-1.0;color.y+=sample.y*weight;total.y+=weight;}}float c=clamp(10000.0*(color.y/total.y-color.x/total.x)+0.5,0.0,1.0);gl_FragColor=vec4(c,c,c,1.0);}");
+        f.call(this, a.edgeWork1, { delta: [b / this.width, 0] }); f.call(this, a.edgeWork2, { delta: [0, b / this.height] }); return this
+    } function X(b, d, c) {
+        a.hexagonalPixelate = a.hexagonalPixelate || new h(null, "uniform sampler2D texture;uniform vec2 center;uniform float scale;uniform vec2 texSize;varying vec2 texCoord;void main(){vec2 tex=(texCoord*texSize-center)/scale;tex.y/=0.866025404;tex.x-=tex.y*0.5;vec2 a;if(tex.x+tex.y-floor(tex.x)-floor(tex.y)<1.0)a=vec2(floor(tex.x),floor(tex.y));else a=vec2(ceil(tex.x),ceil(tex.y));vec2 b=vec2(ceil(tex.x),floor(tex.y));vec2 c=vec2(floor(tex.x),ceil(tex.y));vec3 TEX=vec3(tex.x,tex.y,1.0-tex.x-tex.y);vec3 A=vec3(a.x,a.y,1.0-a.x-a.y);vec3 B=vec3(b.x,b.y,1.0-b.x-b.y);vec3 C=vec3(c.x,c.y,1.0-c.x-c.y);float alen=length(TEX-A);float blen=length(TEX-B);float clen=length(TEX-C);vec2 choice;if(alen<blen){if(alen<clen)choice=a;else choice=c;}else{if(blen<clen)choice=b;else choice=c;}choice.x+=choice.y*0.5;choice.y*=0.866025404;choice*=scale/texSize;gl_FragColor=texture2D(texture,choice+center/texSize);}");
+        f.call(this, a.hexagonalPixelate, { center: [b, d], scale: c, texSize: [this.width, this.height] }); return this
+    } function Y(b) {
+        a.ink = a.ink || new h(null, "uniform sampler2D texture;uniform float strength;uniform vec2 texSize;varying vec2 texCoord;void main(){vec2 dx=vec2(1.0/texSize.x,0.0);vec2 dy=vec2(0.0,1.0/texSize.y);vec4 color=texture2D(texture,texCoord);float bigTotal=0.0;float smallTotal=0.0;vec3 bigAverage=vec3(0.0);vec3 smallAverage=vec3(0.0);for(float x=-2.0;x<=2.0;x+=1.0){for(float y=-2.0;y<=2.0;y+=1.0){vec3 sample=texture2D(texture,texCoord+dx*x+dy*y).rgb;bigAverage+=sample;bigTotal+=1.0;if(abs(x)+abs(y)<2.0){smallAverage+=sample;smallTotal+=1.0;}}}vec3 edge=max(vec3(0.0),bigAverage/bigTotal-smallAverage/smallTotal);gl_FragColor=vec4(color.rgb-dot(edge,edge)*strength*100000.0,color.a);}");
+        f.call(this, a.ink, { strength: b * b * b * b * b, texSize: [this.width, this.height] }); return this
+    } function Z(b, d, c, e) {
+        a.bulgePinch = a.bulgePinch || u("uniform float radius;uniform float strength;uniform vec2 center;", "coord-=center;float distance=length(coord);if(distance<radius){float percent=distance/radius;if(strength>0.0){coord*=mix(1.0,smoothstep(0.0,radius/distance,percent),strength*0.75);}else{coord*=mix(1.0,pow(percent,1.0+strength*0.75)*radius/distance,1.0-percent);}}coord+=center;");
+        f.call(this, a.bulgePinch, { radius: c, strength: q(-1, e, 1), center: [b, d], texSize: [this.width, this.height] }); return this
+    } function $(b, d, c) {
+        a.matrixWarp = a.matrixWarp || u("uniform mat3 matrix;uniform bool useTextureSpace;", "if(useTextureSpace)coord=coord/texSize*2.0-1.0;vec3 warp=matrix*vec3(coord,1.0);coord=warp.xy/warp.z;if(useTextureSpace)coord=(coord*0.5+0.5)*texSize;"); b = Array.prototype.concat.apply([], b); if (4 == b.length) b =
+            [b[0], b[1], 0, b[2], b[3], 0, 0, 0, 1]; else if (9 != b.length) throw "can only warp with 2x2 or 3x3 matrix"; f.call(this, a.matrixWarp, { matrix: d ? y(b) : b, texSize: [this.width, this.height], useTextureSpace: c | 0 }); return this
+    } function aa(a, d) {
+        var c = x.apply(null, d), e = x.apply(null, a), c = y(c); return this.matrixWarp([c[0] * e[0] + c[1] * e[3] + c[2] * e[6], c[0] * e[1] + c[1] * e[4] + c[2] * e[7], c[0] * e[2] + c[1] * e[5] + c[2] * e[8], c[3] * e[0] + c[4] * e[3] + c[5] * e[6], c[3] * e[1] + c[4] * e[4] + c[5] * e[7], c[3] * e[2] + c[4] * e[5] + c[5] * e[8], c[6] * e[0] + c[7] * e[3] + c[8] * e[6],
+        c[6] * e[1] + c[7] * e[4] + c[8] * e[7], c[6] * e[2] + c[7] * e[5] + c[8] * e[8]])
+    } function ba(b, d, c, e) {
+        a.swirl = a.swirl || u("uniform float radius;uniform float angle;uniform vec2 center;", "coord-=center;float distance=length(coord);if(distance<radius){float percent=(radius-distance)/radius;float theta=percent*percent*angle;float s=sin(theta);float c=cos(theta);coord=vec2(coord.x*c-coord.y*s,coord.x*s+coord.y*c);}coord+=center;");
+        f.call(this, a.swirl, { radius: c, center: [b, d], angle: e, texSize: [this.width, this.height] }); return this
+    } var v = {}; (function() {
+        function a(b) {
+            if (!b.getExtension("OES_texture_float")) return !1; var c = b.createFramebuffer(), e = b.createTexture(); b.bindTexture(b.TEXTURE_2D, e); b.texParameteri(b.TEXTURE_2D, b.TEXTURE_MAG_FILTER, b.NEAREST); b.texParameteri(b.TEXTURE_2D, b.TEXTURE_MIN_FILTER, b.NEAREST); b.texParameteri(b.TEXTURE_2D, b.TEXTURE_WRAP_S, b.CLAMP_TO_EDGE); b.texParameteri(b.TEXTURE_2D, b.TEXTURE_WRAP_T, b.CLAMP_TO_EDGE);
+            b.texImage2D(b.TEXTURE_2D, 0, b.RGBA, 1, 1, 0, b.RGBA, b.UNSIGNED_BYTE, null); b.bindFramebuffer(b.FRAMEBUFFER, c); b.framebufferTexture2D(b.FRAMEBUFFER, b.COLOR_ATTACHMENT0, b.TEXTURE_2D, e, 0); c = b.createTexture(); b.bindTexture(b.TEXTURE_2D, c); b.texParameteri(b.TEXTURE_2D, b.TEXTURE_MAG_FILTER, b.LINEAR); b.texParameteri(b.TEXTURE_2D, b.TEXTURE_MIN_FILTER, b.LINEAR); b.texParameteri(b.TEXTURE_2D, b.TEXTURE_WRAP_S, b.CLAMP_TO_EDGE); b.texParameteri(b.TEXTURE_2D, b.TEXTURE_WRAP_T, b.CLAMP_TO_EDGE); b.texImage2D(b.TEXTURE_2D,
+                0, b.RGBA, 2, 2, 0, b.RGBA, b.FLOAT, new Float32Array([2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0])); var e = b.createProgram(), d = b.createShader(b.VERTEX_SHADER), g = b.createShader(b.FRAGMENT_SHADER); b.shaderSource(d, "attribute vec2 vertex;void main(){gl_Position=vec4(vertex,0.0,1.0);}"); b.shaderSource(g, "uniform sampler2D texture;void main(){gl_FragColor=texture2D(texture,vec2(0.5));}"); b.compileShader(d); b.compileShader(g); b.attachShader(e, d); b.attachShader(e,
+                    g); b.linkProgram(e); d = b.createBuffer(); b.bindBuffer(b.ARRAY_BUFFER, d); b.bufferData(b.ARRAY_BUFFER, new Float32Array([0, 0]), b.STREAM_DRAW); b.enableVertexAttribArray(0); b.vertexAttribPointer(0, 2, b.FLOAT, !1, 0, 0); d = new Uint8Array(4); b.useProgram(e); b.viewport(0, 0, 1, 1); b.bindTexture(b.TEXTURE_2D, c); b.drawArrays(b.POINTS, 0, 1); b.readPixels(0, 0, 1, 1, b.RGBA, b.UNSIGNED_BYTE, d); return 127 === d[0] || 128 === d[0]
+        } function d() { } function c(a) {
+            "OES_texture_float_linear" === a ? (void 0 === this.$OES_texture_float_linear$ && Object.defineProperty(this,
+                "$OES_texture_float_linear$", { enumerable: !1, configurable: !1, writable: !1, value: new d }), a = this.$OES_texture_float_linear$) : a = n.call(this, a); return a
+        } function e() { var a = f.call(this); -1 === a.indexOf("OES_texture_float_linear") && a.push("OES_texture_float_linear"); return a } try { var g = document.createElement("canvas").getContext("experimental-webgl") } catch (l) { } if (g && -1 === g.getSupportedExtensions().indexOf("OES_texture_float_linear") && a(g)) {
+            var n = WebGLRenderingContext.prototype.getExtension, f = WebGLRenderingContext.prototype.getSupportedExtensions;
+            WebGLRenderingContext.prototype.getExtension = c; WebGLRenderingContext.prototype.getSupportedExtensions = e
+        }
+    })(); var a; v.canvas = function() {
+        var b = document.createElement("canvas"); try { a = b.getContext("experimental-webgl", { premultipliedAlpha: !1 }) } catch (d) { a = null } if (!a) throw "This browser does not support WebGL"; b._ = { gl: a, isInitialized: !1, texture: null, spareTexture: null, flippedShader: null }; b.texture = k(A); b.draw = k(C); b.update = k(D); b.replace = k(E); b.contents = k(F); b.getPixelArray = k(G); b.brightnessContrast = k(H);
+        b.hexagonalPixelate = k(X); b.hueSaturation = k(K); b.colorHalftone = k(U); b.triangleBlur = k(S); b.unsharpMask = k(N); b.perspective = k(aa); b.matrixWarp = k($); b.bulgePinch = k(Z); b.tiltShift = k(R); b.dotScreen = k(V); b.edgeWork = k(W); b.lensBlur = k(Q); b.zoomBlur = k(T); b.noise = k(L); b.denoise = k(J); b.curves = k(I); b.swirl = k(ba); b.ink = k(Y); b.vignette = k(P); b.vibrance = k(O); b.sepia = k(M); return b
+    }; v.splineInterpolate = t; var h = function() {
+        function b(b, c) {
+            var e = a.createShader(b); a.shaderSource(e, c); a.compileShader(e); if (!a.getShaderParameter(e,
+                a.COMPILE_STATUS)) throw "compile error: " + a.getShaderInfoLog(e); return e
+        } function d(d, l) { this.texCoordAttribute = this.vertexAttribute = null; this.program = a.createProgram(); d = d || c; l = l || e; l = "precision highp float;" + l; a.attachShader(this.program, b(a.VERTEX_SHADER, d)); a.attachShader(this.program, b(a.FRAGMENT_SHADER, l)); a.linkProgram(this.program); if (!a.getProgramParameter(this.program, a.LINK_STATUS)) throw "link error: " + a.getProgramInfoLog(this.program); } var c = "attribute vec2 vertex;attribute vec2 _texCoord;varying vec2 texCoord;void main(){texCoord=_texCoord;gl_Position=vec4(vertex*2.0-1.0,0.0,1.0);}",
+            e = "uniform sampler2D texture;varying vec2 texCoord;void main(){gl_FragColor=texture2D(texture,texCoord);}"; d.prototype.destroy = function() { a.deleteProgram(this.program); this.program = null }; d.prototype.uniforms = function(b) {
+                a.useProgram(this.program); for (var e in b) if (b.hasOwnProperty(e)) {
+                    var c = a.getUniformLocation(this.program, e); if (null !== c) {
+                        var d = b[e]; if ("[object Array]" == Object.prototype.toString.call(d)) switch (d.length) {
+                            case 1: a.uniform1fv(c, new Float32Array(d)); break;
+                            case 2: a.uniform2fv(c, new Float32Array(d)); break; case 3: a.uniform3fv(c, new Float32Array(d)); break; case 4: a.uniform4fv(c, new Float32Array(d)); break; case 9: a.uniformMatrix3fv(c, !1, new Float32Array(d)); break; case 16: a.uniformMatrix4fv(c, !1, new Float32Array(d)); break; default: throw "dont't know how to load uniform \"" + e + '" of length ' + d.length;
+                        } else if ("[object Number]" == Object.prototype.toString.call(d)) a.uniform1f(c, d); else throw 'attempted to set uniform "' + e + '" to invalid value ' + (d || "undefined").toString();
+                    }
+                } return this
+            }; d.prototype.textures = function(b) { a.useProgram(this.program); for (var c in b) b.hasOwnProperty(c) && a.uniform1i(a.getUniformLocation(this.program, c), b[c]); return this }; d.prototype.drawRect = function(b, c, e, d) {
+                var f = a.getParameter(a.VIEWPORT); c = void 0 !== c ? (c - f[1]) / f[3] : 0; b = void 0 !== b ? (b - f[0]) / f[2] : 0; e = void 0 !== e ? (e - f[0]) / f[2] : 1; d = void 0 !== d ? (d - f[1]) / f[3] : 1; null == a.vertexBuffer && (a.vertexBuffer = a.createBuffer()); a.bindBuffer(a.ARRAY_BUFFER, a.vertexBuffer); a.bufferData(a.ARRAY_BUFFER, new Float32Array([b,
+                    c, b, d, e, c, e, d]), a.STATIC_DRAW); null == a.texCoordBuffer && (a.texCoordBuffer = a.createBuffer(), a.bindBuffer(a.ARRAY_BUFFER, a.texCoordBuffer), a.bufferData(a.ARRAY_BUFFER, new Float32Array([0, 0, 0, 1, 1, 0, 1, 1]), a.STATIC_DRAW)); null == this.vertexAttribute && (this.vertexAttribute = a.getAttribLocation(this.program, "vertex"), a.enableVertexAttribArray(this.vertexAttribute)); null == this.texCoordAttribute && (this.texCoordAttribute = a.getAttribLocation(this.program, "_texCoord"), a.enableVertexAttribArray(this.texCoordAttribute));
+                a.useProgram(this.program); a.bindBuffer(a.ARRAY_BUFFER, a.vertexBuffer); a.vertexAttribPointer(this.vertexAttribute, 2, a.FLOAT, !1, 0, 0); a.bindBuffer(a.ARRAY_BUFFER, a.texCoordBuffer); a.vertexAttribPointer(this.texCoordAttribute, 2, a.FLOAT, !1, 0, 0); a.drawArrays(a.TRIANGLE_STRIP, 0, 4)
+            }; d.getDefaultShader = function() { a.defaultShader = a.defaultShader || new d; return a.defaultShader }; return d
+    }(); z.prototype.interpolate = function(a) {
+        for (var d = 0, c = this.ya.length - 1; 1 < c - d;) { var e = c + d >> 1; this.xa[e] > a ? c = e : d = e } var e = this.xa[c] -
+            this.xa[d], g = (this.xa[c] - a) / e; a = (a - this.xa[d]) / e; return g * this.ya[d] + a * this.ya[c] + ((g * g * g - g) * this.y2[d] + (a * a * a - a) * this.y2[c]) * e * e / 6
+    }; var r = function() {
+        function b(b, c, d, f) {
+            this.gl = a; this.id = a.createTexture(); this.width = b; this.height = c; this.format = d; this.type = f; a.bindTexture(a.TEXTURE_2D, this.id); a.texParameteri(a.TEXTURE_2D, a.TEXTURE_MAG_FILTER, a.LINEAR); a.texParameteri(a.TEXTURE_2D, a.TEXTURE_MIN_FILTER, a.LINEAR); a.texParameteri(a.TEXTURE_2D, a.TEXTURE_WRAP_S, a.CLAMP_TO_EDGE); a.texParameteri(a.TEXTURE_2D,
+                a.TEXTURE_WRAP_T, a.CLAMP_TO_EDGE); b && c && a.texImage2D(a.TEXTURE_2D, 0, this.format, b, c, 0, this.format, this.type, null)
+        } function d(a) { null == c && (c = document.createElement("canvas")); c.width = a.width; c.height = a.height; a = c.getContext("2d"); a.clearRect(0, 0, c.width, c.height); return a } b.fromElement = function(c) { var d = new b(0, 0, a.RGBA, a.UNSIGNED_BYTE); d.loadContentsOf(c); return d }; b.prototype.loadContentsOf = function(b) {
+            this.width = b.width || b.videoWidth; this.height = b.height || b.videoHeight; a.bindTexture(a.TEXTURE_2D,
+                this.id); a.texImage2D(a.TEXTURE_2D, 0, this.format, this.format, this.type, b)
+        }; b.prototype.initFromBytes = function(b, c, d) { this.width = b; this.height = c; this.format = a.RGBA; this.type = a.UNSIGNED_BYTE; a.bindTexture(a.TEXTURE_2D, this.id); a.texImage2D(a.TEXTURE_2D, 0, a.RGBA, b, c, 0, a.RGBA, this.type, new Uint8Array(d)) }; b.prototype.destroy = function() { a.deleteTexture(this.id); this.id = null }; b.prototype.use = function(b) { a.activeTexture(a.TEXTURE0 + (b || 0)); a.bindTexture(a.TEXTURE_2D, this.id) }; b.prototype.unuse = function(b) {
+            a.activeTexture(a.TEXTURE0 +
+                (b || 0)); a.bindTexture(a.TEXTURE_2D, null)
+        }; b.prototype.ensureFormat = function(b, c, d, f) { if (1 == arguments.length) { var h = arguments[0]; b = h.width; c = h.height; d = h.format; f = h.type } if (b != this.width || c != this.height || d != this.format || f != this.type) this.width = b, this.height = c, this.format = d, this.type = f, a.bindTexture(a.TEXTURE_2D, this.id), a.texImage2D(a.TEXTURE_2D, 0, this.format, b, c, 0, this.format, this.type, null) }; b.prototype.drawTo = function(b) {
+            a.framebuffer = a.framebuffer || a.createFramebuffer(); a.bindFramebuffer(a.FRAMEBUFFER,
+                a.framebuffer); a.framebufferTexture2D(a.FRAMEBUFFER, a.COLOR_ATTACHMENT0, a.TEXTURE_2D, this.id, 0); if (a.checkFramebufferStatus(a.FRAMEBUFFER) !== a.FRAMEBUFFER_COMPLETE) throw Error("incomplete framebuffer"); a.viewport(0, 0, this.width, this.height); b(); a.bindFramebuffer(a.FRAMEBUFFER, null)
+        }; var c = null; b.prototype.fillUsingCanvas = function(b) { b(d(this)); this.format = a.RGBA; this.type = a.UNSIGNED_BYTE; a.bindTexture(a.TEXTURE_2D, this.id); a.texImage2D(a.TEXTURE_2D, 0, a.RGBA, a.RGBA, a.UNSIGNED_BYTE, c); return this };
+        b.prototype.toImage = function(b) { this.use(); h.getDefaultShader().drawRect(); var f = 4 * this.width * this.height, k = new Uint8Array(f), n = d(this), p = n.createImageData(this.width, this.height); a.readPixels(0, 0, this.width, this.height, a.RGBA, a.UNSIGNED_BYTE, k); for (var m = 0; m < f; m++)p.data[m] = k[m]; n.putImageData(p, 0, 0); b.src = c.toDataURL() }; b.prototype.swapWith = function(a) {
+            var b; b = a.id; a.id = this.id; this.id = b; b = a.width; a.width = this.width; this.width = b; b = a.height; a.height = this.height; this.height = b; b = a.format; a.format =
+                this.format; this.format = b
+        }; return b
+    }(), s = "float random(vec3 scale,float seed){return fract(sin(dot(gl_FragCoord.xyz+seed,scale))*43758.5453+seed);}"; return v
+}();

src/modules/WebglDistort/index.js

@@ -0,0 +1,4 @@
+module.exports = [
+    require('./Module'),
+    require('./info.json')
+]

src/modules/WebglDistort/info.json

@@ -0,0 +1,30 @@
+{
+    "name": "WebGl Distort",
+    "requires": [
+        "webgl"
+    ],
+    "description": "Transform perspective of an image based on corner coordinates",
+    "inputs": {
+        "nw": {
+            "type": "String",
+            "desc": "Comma separated X and Y coordinates of top-left corner",
+            "default": "0,100"
+        },
+        "ne": {
+            "type": "String",
+            "desc": "Comma separated X and Y coordinates of top-right corner",
+            "default": "1023,-50"
+        },
+        "se": {
+            "type": "String",
+            "desc": "Comma separated X and Y coordinates of bottom-right corner",
+            "default": "1223,867"
+        },
+        "sw": {
+            "type": "String",
+            "desc": "Comma separated X and Y coordinates of bottom-left corner",
+            "default": "100,767"
+        }
+    },
+    "docs-link":"https://github.com/publiclab/image-sequencer/blob/main/docs/MODULES.md#webgl-distort"
+}

src/modules/WhiteBalance/Module.js

@@ -1,11 +1,15 @@
 module.exports = function Balance(options, UI) {
 
+    var defaults = require('./../../util/getDefaults.js')(require('./info.json'));
+
+    options.red = options.red || defaults.red
+    options.green = options.green || defaults.green
+    options.blue = options.blue || defaults.blue
+
     var output;
 
     function draw(input, callback, progressObj) {
 
-        options.temperature = (options.temperature > "40000") ? "40000" : options.temperature
-
         progressObj.stop(true);
         progressObj.overrideFlag = true;
 
@@ -13,43 +17,16 @@ module.exports = function Balance(options, UI) {
 
         function extraManipulation(pixels) {
 
-            let temp = parseInt(options.temperature)
-            temp /= 100
+            var i = 0
+            var red_factor = 255/options.red
+            var green_factor = 255/options.green
+            var blue_factor = 255/options.blue
 
-            let r, g, b;
-
-            if (temp <= 66) {
-                r = 255;
-                g = Math.min(Math.max(99.4708025861 * Math.log(temp) - 161.1195681661, 0), 255);
-            } else {
-                r = Math.min(Math.max(329.698727446 * Math.pow(temp - 60, -0.1332047592), 0), 255);
-                g = Math.min(Math.max(288.1221695283 * Math.pow(temp - 60, -0.0755148492), 0), 255);
-            }
-
-            if (temp >= 66) {
-                b = 255;
-            } else if (temp <= 19) {
-                b = 0;
-            } else {
-                b = temp - 10;
-                b = Math.min(Math.max(138.5177312231 * Math.log(b) - 305.0447927307, 0), 255);
-            }
-
-            for (let i = 0; i < pixels.shape[0]; i++) {
-                for (let j = 0; j < pixels.shape[1]; j++) {
-
-                    r_data = pixels.get(i, j, 0)
-                    r_new_data = (255 / r) * r_data
-                    pixels.set(i, j, 0, r_new_data)
-
-                    g_data = pixels.get(i, j, 1)
-                    g_new_data = (255 / g) * g_data
-                    pixels.set(i, j, 1, g_new_data)
-
-                    b_data = pixels.get(i, j, 2)
-                    b_new_data = (255 / b) * b_data
-                    pixels.set(i, j, 2, b_new_data)
-                }
+            while (i < pixels.data.length) {
+                pixels.data[i] = Math.min(255, pixels.data[i]*red_factor)
+                pixels.data[i+1] = Math.min(255, pixels.data[i+1]*green_factor)
+                pixels.data[i+2] = Math.min(255, pixels.data[i+2]*blue_factor)
+                i+=4
             }
 
             return pixels

src/modules/WhiteBalance/index.js

@@ -1,4 +1,4 @@
 module.exports = [
     require('./Module'),
     require('./info.json')
-]
+]

src/modules/WhiteBalance/info.json

@@ -1,11 +1,21 @@
 {
     "name": "White Balance",
-    "description": "Change the colour balance of the image by adjusting the colour temperature.",
+    "description": "Render neutral colours correctly based on the whitest pixel in the image.",
     "inputs": {
-      "temperature": {
+      "red": {
         "type": "integer",
-        "desc": "Temperature between 0 - 40,000 Kelvin",
-        "default": 6000
+        "desc": "Red component of the whitest pixel ",
+        "default": 255
+      },
+      "green": {
+        "type": "integer",
+        "desc": "Green component of the whitest pixel ",
+        "default": 255
+      },
+      "blue": {
+        "type": "integer",
+        "desc": "Blue component of the whitest pixel ",
+        "default": 255
       }
     },
     "docs-link":"https://github.com/publiclab/image-sequencer/blob/main/docs/MODULES.md#white-balance"

src/modules/_nomodule/PixelManipulation.js

@@ -69,32 +69,32 @@ module.exports = function PixelManipulation(image, options) {
     }
     // perform any extra operations on the entire array:
     var res;
-    if (options.extraManipulation) res = options.extraManipulation(pixels,generateOutput);
+    if (options.extraManipulation) res = options.extraManipulation(pixels, generateOutput);
     // there may be a more efficient means to encode an image object,
     // but node modules and their documentation are essentially arcane on this point
-    function generateOutput(){
+    function generateOutput() {
       var chunks = [];
-    var totalLength = 0;
-    
-    var r = savePixels(pixels, options.format, { quality: 100 });
+      var totalLength = 0;
 
-    r.on("data", function(chunk) {
-      totalLength += chunk.length;
-      chunks.push(chunk);
-    });
+      var r = savePixels(pixels, options.format, { quality: 100 });
 
-    r.on("end", function() {
-      var data = Buffer.concat(chunks, totalLength).toString("base64");
-      var datauri = "data:image/" + options.format + ";base64," + data;
-      if (options.output)
-        options.output(options.image, datauri, options.format);
-      if (options.callback) options.callback();
-    });
+      r.on("data", function(chunk) {
+        totalLength += chunk.length;
+        chunks.push(chunk);
+      });
+
+      r.on("end", function() {
+        var data = Buffer.concat(chunks, totalLength).toString("base64");
+        var datauri = "data:image/" + options.format + ";base64," + data;
+        if (options.output)
+          options.output(options.image, datauri, options.format);
+        if (options.callback) options.callback();
+      });
     }
-    if(res){
-      pixels=res;
+    if (res) {
+      pixels = res;
       generateOutput();
     }
-    else if(!options.extraManipulation) generateOutput();
+    else if (!options.extraManipulation) generateOutput();
   });
 };

src/modules/_nomodule/gl-context.js

@@ -0,0 +1,37 @@
+module.exports = function runInBrowserContext(input, callback, step, options) {
+
+    // to ignore this from getting browserified
+    const puppeteer = eval('require')('puppeteer');
+
+    //Stripped down version of options which is serializable
+    var minOptions = require("lodash").cloneDeep(options);
+    minOptions.step = options.step.name;
+
+    var obj = { input: input, modOptions: minOptions }
+
+    puppeteer.launch({headless: true, args:['--no-sandbox', '--disable-setuid-sandbox']}).then(function(browser) {
+        browser.newPage().then(page => {
+            /* Maybe there is a better way to this, loading the page coz localstorage API
+            is not available otherwise */
+            page.goto("https://google.com").then(() => {
+                page.addScriptTag({ path: require('path').join(__dirname, '../../../dist/image-sequencer.js') }).then(() => {
+                    page.evaluate((options) => {
+                        return new Promise((resolve, reject) => {
+                            var sequencer = ImageSequencer();
+                            sequencer.loadImage(options.input.src);
+                            sequencer.addSteps(options.modOptions.step, options.modOptions);
+                            sequencer.run(function cb(out) {
+                                resolve(sequencer.steps[1].output.src)
+                            });
+                        })
+                    }, obj).then(el => {
+                        browser.close().then(() => {
+                            step.output = { src: el, format: input.format };
+                            callback();
+                        });
+                    });
+                })
+            });
+        });
+    });
+}

src/ui/LoadImage.js

@@ -14,13 +14,13 @@ function LoadImage(ref, name, src, main_callback) {
       callback(datauri, step);
     }
     else if (!ref.options.inBrowser && !!src.match(/^https?:\/\//i)) {
-      require( src.match(/^(https?):\/\//i)[1] ).get(src,function(res){
+      require(src.match(/^(https?):\/\//i)[1]).get(src, function(res) {
         var data = '';
         var contentType = res.headers['content-type'];
         res.setEncoding('base64');
-        res.on('data',function(chunk) {data += chunk;});
-        res.on('end',function() {
-          callback("data:"+contentType+";base64,"+data, step);
+        res.on('data', function(chunk) { data += chunk; });
+        res.on('end', function() {
+          callback("data:" + contentType + ";base64," + data, step);
         });
       });
     }
@@ -32,10 +32,10 @@ function LoadImage(ref, name, src, main_callback) {
       image.onload = function() {
         canvas.width = image.naturalWidth;
         canvas.height = image.naturalHeight;
-        context.drawImage(image,0,0);
-        datauri = canvas.toDataURL(ext);        
+        context.drawImage(image, 0, 0);
+        datauri = canvas.toDataURL(ext);
         callback(datauri, step);
-      }  
+      }
       image.src = src;
     }
     else {
@@ -52,7 +52,7 @@ function LoadImage(ref, name, src, main_callback) {
       inBrowser: ref.options.inBrowser,
       ui: ref.options.ui,
       UI: ref.events,
-      output : ''
+      output: ''
     };
 
 
@@ -69,7 +69,7 @@ function LoadImage(ref, name, src, main_callback) {
     });
   }
 
-  return loadImage(name,src);
+  return loadImage(name, src);
 }
 
 module.exports = LoadImage;

src/util/parseDistortCoordinates.js

@@ -0,0 +1,16 @@
+module.exports = function parseDistortCoordinates(options) {
+
+  let coord = []
+  coord.push(options.nw.split(','))
+  coord.push(options.ne.split(','))
+  coord.push(options.se.split(','))
+  coord.push(options.sw.split(','))
+
+  let parsedCoord = coord.reduce((acc, val) => {
+    acc.push(parseInt(val[0]))
+    acc.push(parseInt(val[1]))
+    return acc
+  }, [])
+
+  return parsedCoord
+}

test/core/modules/benchmark.js

@@ -18,6 +18,8 @@ test('benchmark all modules', function(t) {
   var mods = Object.keys(sequencer.modules);
 
   sequencer.loadImages(image);
+  while ((mods[0] === 'import-image' || (!!sequencer.modulesInfo(mods[0]).requires && sequencer.modulesInfo(mods[0]).requires.includes("webgl"))))
+    mods.splice(0, 1);
   sequencer.addSteps(mods[0]);
   global.start = Date.now()
   global.idx = 0
@@ -30,6 +32,11 @@ test('benchmark all modules', function(t) {
     if (mods.length > 1) { //Last one is test module, we need not benchmark it
       sequencer.steps[global.idx].output.src = image;
       global.idx++;
+      if (mods[0] === 'import-image' || (!!sequencer.modulesInfo(mods[0]).requires && sequencer.modulesInfo(mods[0]).requires.includes("webgl"))) {
+        /* Not currently working */
+        console.log("Bypassing import-image");
+        mods.splice(0, 1);
+      }
       sequencer.addSteps(mods[0]);
       global.start = Date.now();
       sequencer.run({ index: global.idx }, cb);

test/core/modules/blur.js

@@ -6,26 +6,26 @@ require('../../../src/ImageSequencer')
 
 var sequencer = ImageSequencer({ui: false})
 var red = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABlBMVEX+AAD///+KQee0AAAAAWJLR0QB/wIt3gAAAAd0SU1FB+EGHRIVAvrm6EMAAAAMSURBVAjXY2AgDQAAADAAAceqhY4AAAAldEVYdGRhdGU6Y3JlYXRlADIwMTctMDYtMjlUMTg6MjE6MDIrMDI6MDDGD83DAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDE3LTA2LTI5VDE4OjIxOjAyKzAyOjAwt1J1fwAAAABJRU5ErkJggg=="
-var benchmark = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAklEQVR4AewaftIAAACSSURBVKXBMUoDURAA0Dc/w4ZgJdh5AE/urawsBMuIpDBkx4VNESzWH/57gTKgGZSuXvGAPQJh2wkfyHd8onDAhIaw7Yxn5CP2mJFIBMK2whPygAkXq7AK/5uQgR0aCqFfQ1oEAuU+gXQj3KfQDEp/lH6FdFUolD4XfCEtfnDGjNLnhDekxRHfmFH6vFjlzphm0C96GR7JNsLICQAAAABJRU5ErkJggg=="
+var benchmark = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAklEQVR4AewaftIAAAA0SURBVKXBwRGAIBDAwBiu/44ZeWgFZPcBXgKJht/mzmwaiSSSSCKJJJJIIomGS4vPLBqJDh2XAyeCsOZ9AAAAAElFTkSuQmCC"
 var target = 'test_outputs'
 
 var options = {blur: 3.25}
 
 test('Blur module loads correctly', function(t) {
-  sequencer.loadImages('test', red)
+  sequencer.loadImages(red)
   sequencer.addSteps('blur', options)
-  t.equal(sequencer.images.test.steps[1].options.name, 'blur', 'Blur module is getting loaded')
+  t.equal(sequencer.steps[1].options.name, 'blur', 'Blur module is getting loaded')
   t.end()
 })
 
 test('Blur module loads with correct options', function(t) {
-    t.equal(sequencer.images.test.steps[1].options.blur, 3.25, 'Options are correct');
+    t.equal(sequencer.steps[1].options.blur, 3.25, 'Options are correct');
     t.end();
 })
 
 test('Blur module works correctly', function(t) {
   sequencer.run({mode:'test'}, function(out) {
-    var result = sequencer.images.test.steps[1].output.src
+    var result = sequencer.steps[1].output.src
     base64Img.imgSync(result, target, 'result')
     base64Img.imgSync(benchmark, target, 'benchmark')
     result = './test_outputs/result.png'

test/core/modules/canvas-resize.js

@@ -0,0 +1,34 @@
+var test = require('tape');
+
+require('../../../src/ImageSequencer.js');
+
+var sequencer = ImageSequencer({ ui: false });
+var options = { width: 500, height: 500 };
+var red = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABlBMVEX+AAD///+KQee0AAAAAWJLR0QB/wIt3gAAAAd0SU1FB+EGHRIVAvrm6EMAAAAMSURBVAjXY2AgDQAAADAAAceqhY4AAAAldEVYdGRhdGU6Y3JlYXRlADIwMTctMDYtMjlUMTg6MjE6MDIrMDI6MDDGD83DAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDE3LTA2LTI5VDE4OjIxOjAyKzAyOjAwt1J1fwAAAABJRU5ErkJggg==";
+
+// Test 1 to check brightness module is getting loaded
+test('Load canvas-resize module', function(t) {
+    sequencer.loadImages(red);
+    sequencer.addSteps('canvas-resize', options);
+    t.equal(sequencer.steps[1].options.name, 'canvas-resize', 'Canvas resize module is getting loaded');
+    t.end();
+});
+
+// Test 2 to check options are correct
+test('Check Options', function(t) {
+    t.equal(sequencer.steps[1].options.width, 500, 'Options are correct');
+    t.equal(sequencer.steps[1].options.height, 500, 'Options are correct');
+    t.end();
+});
+
+// Test 3 to check brightness module works as expected
+test('canvas-resize module works correctly', function(t) {
+    sequencer.run({ mode: 'test' }, function(out) {
+        var result = sequencer.steps[1].output.src;
+        require('get-pixels')(result, (err, pix) => {
+            t.equal(pix.shape[0], 500);
+            t.equal(pix.shape[1], 500);
+            t.end();
+        });
+    });
+});

test/core/modules/channel.js

@@ -13,20 +13,20 @@ var target = 'test_outputs'
 var options = {channel: 'red'}
 
 test('Channel module loads correctly', function(t) {
-  sequencer.loadImages('test', red)
+  sequencer.loadImages( red)
   sequencer.addSteps('channel', options)
-  t.equal(sequencer.images.test.steps[1].options.name, 'channel', 'Channel module is getting loaded')
+  t.equal(sequencer.steps[1].options.name, 'channel', 'Channel module is getting loaded')
   t.end()
 })
 
 test('Channel module loads with correct options', function(t) {
-    t.equal(sequencer.images.test.steps[1].options.channel, 'red', 'Options are correct');
+    t.equal(sequencer.steps[1].options.channel, 'red', 'Options are correct');
     t.end();
 })
 
 test('Channel module works correctly', function(t) {
   sequencer.run({mode:'test'}, function(out) {
-    var result = sequencer.images.test.steps[1].output.src
+    var result = sequencer.steps[1].output.src
     base64Img.imgSync(result, target, 'result')
     base64Img.imgSync(benchmark, target, 'benchmark')
     result = './test_outputs/result.png'

test/core/modules/colormap.js

@@ -13,20 +13,20 @@ var target = 'test_outputs'
 var options = {colormap: 'blutoredjet'}
 
 test('Colormap module loads correctly', function(t) {
-  sequencer.loadImages('test', red)
+  sequencer.loadImages( red)
   sequencer.addSteps('colormap', options)
-  t.equal(sequencer.images.test.steps[1].options.name, 'colormap', 'Colormap module is getting loaded')
+  t.equal(sequencer.steps[1].options.name, 'colormap', 'Colormap module is getting loaded')
   t.end()
 })
 
 test('Colormap module loads with correct options', function(t) {
-    t.equal(sequencer.images.test.steps[1].options.colormap, 'blutoredjet', 'Options are correct');
+    t.equal(sequencer.steps[1].options.colormap, 'blutoredjet', 'Options are correct');
     t.end();
 })
 
 test('Colormap module works correctly', function(t) {
   sequencer.run({mode:'test'}, function(out) {
-    var result = sequencer.images.test.steps[1].output.src
+    var result = sequencer.steps[1].output.src
     base64Img.imgSync(result, target, 'result')
     base64Img.imgSync(benchmark, target, 'benchmark')
     result = './test_outputs/result.png'

test/core/modules/crop.js

@@ -0,0 +1,40 @@
+var test = require('tape')
+var base64Img = require('base64-img')
+var looksSame = require('looks-same')
+
+require('../../../src/ImageSequencer')
+
+var sequencer = ImageSequencer({ui: false})
+var red = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAIAAAAiOjnJAAAKGGlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxMzcgMS4wMDAwMDAsIDAwMDAvMDAvMDAtMDA6MDA6MDAgICAgICAgICI+CiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPgogIDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiCiAgICB4bWxuczpuczE9Imh0dHA6Ly93d3cuZGF5LmNvbS9kYW0vMS4wIgogICAgeG1sbnM6dGlmZj0iaHR0cDovL25zLmFkb2JlLmNvbS90aWZmLzEuMC8iCiAgICB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iCiAgICB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iCiAgICB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIKICAgIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIgogICBuczE6UGh5c2ljYWxoZWlnaHRpbmluY2hlcz0iLTEuMCIKICAgbnMxOlBoeXNpY2Fsd2lkdGhpbmluY2hlcz0iLTEuMCIKICAgbnMxOkZpbGVmb3JtYXQ9IlBORyIKICAgbnMxOlByb2dyZXNzaXZlPSJubyIKICAgbnMxOmV4dHJhY3RlZD0iMjAxNy0xMS0yNFQwNTo0Nzo1MC45NTktMDU6MDAiCiAgIG5zMTpCaXRzcGVycGl4ZWw9IjI0IgogICBuczE6TUlNRXR5cGU9ImltYWdlL3BuZyIKICAgbnMxOkNvbW1lbnRzPSJTb2Z0d2FyZTogQWRvYmUgSW1hZ2VSZWFkeSYjeEE7WE1MOmNvbS5hZG9iZS54bXA6ICZsdDs/eHBhY2tldCBiZWdpbj0mcXVvdDvvu78mcXVvdDsgaWQ9JnF1b3Q7VzVNME1wQ2VoaUh6cmVTek5UY3prYzlkJnF1b3Q7PyZndDsgJmx0O3g6eG1wbWV0YSB4bWxuczp4PSZxdW90O2Fkb2JlOm5zOm1ldGEvJnF1b3Q7IHg6eG1wdGs9JnF1b3Q7QWRvYmUgWE1QIENvcmUgNS4wLWMwNjEgNjQuMTQwOTQ5LCAyMDEwLzEyLzA3LTEwOjU3OjAxICAgICAgICAmcXVvdDsmZ3Q7ICZsdDtyZGY6UkRGIHhtbG5zOnJkZj0mcXVvdDtodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjJnF1b3Q7Jmd0OyAmbHQ7cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0mcXVvdDsmcXVvdDsgeG1sbnM6eG1wPSZxdW90O2h0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8mcXVvdDsgeG1sbnM6eG1wTU09JnF1b3Q7aHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyZxdW90OyB4bWxuczpzdFJlZj0mcXVvdDtodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjJnF1b3Q7IHhtcDpDcmVhdG9yVG9vbD0mcXVvdDtBZG9iZSBQaG90b3Nob3AgQ1M1LjEgTWFjaW50b3NoJnF1b3Q7IHhtcE1NOkluc3RhbmNlSUQ9JnF1b3Q7eG1wLmlpZDoyREFBQTI3NEMzODUxMUU3OUIyMUMyN0ZDQ0Y2OTRDNCZxdW90OyB4bXBNTTpEb2N1bWVudElEPSZxdW90O3htcC5kaWQ6MkRBQUEyNzVDMzg1MTFFNzlCMjFDMjdGQ0NGNjk0QzQmcXVvdDsmZ3Q7ICZsdDt4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSZxdW90O3htcC5paWQ6MkRBQUEyNzJDMzg1MTFFNzlCMjFDMjdGQ0NGNjk0QzQmcXVvdDsgc3RSZWY6ZG9jdW1lbnRJRD0mcXVvdDt4bXAuZGlkOjJEQUFBMjczQzM4NTExRTc5QjIxQzI3RkNDRjY5NEM0JnF1b3Q7LyZndDsgJmx0Oy9yZGY6RGVzY3JpcHRpb24mZ3Q7ICZsdDsvcmRmOlJERiZndDsgJmx0Oy94OnhtcG1ldGEmZ3Q7ICZsdDs/eHBhY2tldCBlbmQ9JnF1b3Q7ciZxdW90Oz8mZ3Q7JiN4QTsiCiAgIG5zMTpQaHlzaWNhbHdpZHRoaW5kcGk9Ii0xIgogICBuczE6UGh5c2ljYWxoZWlnaHRpbmRwaT0iLTEiCiAgIG5zMTpOdW1iZXJvZmltYWdlcz0iMSIKICAgbnMxOk51bWJlcm9mdGV4dHVhbGNvbW1lbnRzPSIyIgogICBuczE6c2hhMT0iM2UxZjc2MjlkN2Q4MmZkMTA4MjE1NDg2YTUyOTExODlkMTQzZjg5ZiIKICAgbnMxOnNpemU9IjEyODgiCiAgIHRpZmY6SW1hZ2VMZW5ndGg9IjIwMCIKICAgdGlmZjpJbWFnZVdpZHRoPSIyMDAiCiAgIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIE1hY2ludG9zaCIKICAgZGM6Zm9ybWF0PSJpbWFnZS9wbmciCiAgIGRjOm1vZGlmaWVkPSIyMDE3LTExLTMwVDA3OjIwOjAwLjU1MC0wNTowMCIKICAgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDoyREFBQTI3NUMzODUxMUU3OUIyMUMyN0ZDQ0Y2OTRDNCIKICAgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDoyREFBQTI3NEMzODUxMUU3OUIyMUMyN0ZDQ0Y2OTRDNCI+CiAgIDx4bXBNTTpEZXJpdmVkRnJvbQogICAgc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDoyREFBQTI3MkMzODUxMUU3OUIyMUMyN0ZDQ0Y2OTRDNCIKICAgIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MkRBQUEyNzNDMzg1MTFFNzlCMjFDMjdGQ0NGNjk0QzQiLz4KICA8L3JkZjpEZXNjcmlwdGlvbj4KIDwvcmRmOlJERj4KPC94OnhtcG1ldGE+Cgo8P3hwYWNrZXQgZW5kPSJyIj8+Pz8bfgAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAF6SURBVHja7NIxEQAwCACxUhNs+BeDKEwwMCQS/j4668G2LwHGwlgYC4yFsTAWGAtjYSwwFsbCWGAsjIWxwFgYC2OBsTAWxgJjYSyMBcbCWBgLjIWxMBYYC2NhLDAWxsJYYCyMhbHAWBgLY4GxMBbGAmNhLIwFxsJYGAuMhbEwFhgLY2EsMBbGwlhgLIyFscBYGAtjgbEwFsYCY2EsjAXGwlgYC4yFsTAWGAtjYSwwFsbCWGAsjIWxMBYYC2NhLDAWxsJYYCyMhbHAWBgLY4GxMBbGAmNhLIwFxsJYGAuMhbEwFhgLY2EsMBbGwlhgLIyFscBYGAtjgbEwFsYCY2EsjAXGwlgYC4yFsTAWGAtjYSwwFsbCWGAsjIWxwFgYC2OBsTAWxgJjYSyMBcbCWBgLjIWxMBYYC2NhLDAWxsJYYCyMhbHAWBgLY2EsMBbGwlhgLIyFscBYGAtjgbEwFsYCY2EsjAXGwlgYC4yFsTAWGAtjYSwwFteMAAMANTQCkRd9lbYAAAAASUVORK5CYII="
+var benchmark = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAAAklEQVR4AewaftIAAAH0SURBVO3BMRECAQADsNJ7D2yYwL8DTLDhAhBAZ35Icnlcb+8APzXA1ABTA0wNMDXA1ABTA0wNMDXA1ABTA0wNMDXA1ABTA0wNMDXA1ABTA0wNMDXA1ABTA0wNMDXA1ABTA0wNMDXA1ABTA0wNMDXA1ABTA0wNMDXA1ABTA0wNMDXA1ABTA0wNMDXA1ABTA0wNMDXA1ABTA0wNMDXA1ABTA0wNMDXA1ABTA0wNMDXA1ABTA0wNMDXA1ABTA0wNMDXA1ABTA0wNMDXA1ABTA0wNMDXA1ABTA0wNMDXA1ABTA0wNMDXA1ABTA0wNMDXA1ABTA0wNMDXA1ABTA0wNMDXA1ABTA0wNMDXA1ABTA0wNMDXA1ABTA0wNMDXA1ABTA0wNMDXA1ABTA0wNMDXA1ABTA0wNMDXA1ABTA0wNMDXA1ABTA0wNMDXA1ABTA0wNMDXA1ABTA0wNMDXA1ABTA0wNMDXA1ABTA0wNMDXA1ABTA0wNMDXA1ABTA0wNMDXA1ABTA0wNMDXA1ABTA0wNMB2BE7u/nvmn4/56BvitAaYGmBpgaoCpAaYGmBpgaoCpAaYGmBpgaoCpAaYGmBpgaoCpAaYGmBpgaoCpAaYGmBpgaoCpAaYGmBpgaoCpAaYGmBpgaoCpAaYGmBpgaoDpCJzY5St/9AEkRAeSLWe/wwAAAABJRU5ErkJggg==";
+var target = 'test_outputs'
+
+var options = {x: "32", y: "38", width:"100", height: "100", backgroundColor: "255 255 255 255"}
+
+test('Crop module loads correctly', function(t) {
+  sequencer.loadImages(red)
+  sequencer.addSteps('crop')
+  t.equal(sequencer.steps.length, 2, 'Crop module loaded')
+  t.end()
+})
+
+test('Crop module loads with correct options', function(t) {
+  sequencer.addSteps('crop', options)
+  t.equal(sequencer.steps[2].options.width, "100", 'options loaded correctly')
+  t.end()
+})
+
+test('Crop module works correctly', function(t) {
+  sequencer.run({mode:'test'}, function(out) {
+    var result = sequencer.steps[2].output.src
+    base64Img.imgSync(result, target, 'result')
+    base64Img.imgSync(benchmark, target, 'benchmark')
+    result = './test_outputs/result.png'
+    benchmark = './test_outputs/benchmark.png'
+    looksSame(result, benchmark, function(err, res) {
+      if (err) console.log(err)
+      t.equal(res.equal, true)
+      t.end()
+    })
+  })
+})

test/core/modules/dither.js

@@ -13,20 +13,20 @@ var target = 'test_outputs'
 var options = {dither: 'bayer'}
 
 test('Dither module loads correctly', function(t) {
-  sequencer.loadImages('test', red)
+  sequencer.loadImages(red)
   sequencer.addSteps('dither', options)
-  t.equal(sequencer.images.test.steps[1].options.name, 'dither', 'Dither module is getting loaded')
+  t.equal(sequencer.steps[1].options.name, 'dither', 'Dither module is getting loaded')
   t.end()
 })
 
 test('Dither module loads with correct options', function(t) {
-    t.equal(sequencer.images.test.steps[1].options.dither, 'bayer', 'Options are correct');
+    t.equal(sequencer.steps[1].options.dither, 'bayer', 'Options are correct');
     t.end();
 })
 
 test('Dither module works correctly', function(t) {
   sequencer.run({mode:'test'}, function(out) {
-    var result = sequencer.images.test.steps[1].output.src
+    var result = sequencer.steps[1].output.src
     base64Img.imgSync(result, target, 'result')
     base64Img.imgSync(benchmark, target, 'benchmark')
     result = './test_outputs/result.png'

test/core/modules/gridOverlay.js

@@ -0,0 +1,41 @@
+var test = require('tape');
+var base64Img = require('base64-img');
+var looksSame = require('looks-same');
+
+require('../../../src/ImageSequencer.js');
+
+var sequencer = ImageSequencer({ ui: false });
+var options = {x : 1};
+var target = 'test_outputs';
+var red = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABlBMVEX+AAD///+KQee0AAAAAWJLR0QB/wIt3gAAAAd0SU1FB+EGHRIVAvrm6EMAAAAMSURBVAjXY2AgDQAAADAAAceqhY4AAAAldEVYdGRhdGU6Y3JlYXRlADIwMTctMDYtMjlUMTg6MjE6MDIrMDI6MDDGD83DAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDE3LTA2LTI5VDE4OjIxOjAyKzAyOjAwt1J1fwAAAABJRU5ErkJggg==";
+var benchmark = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAklEQVR4AewaftIAAAApSURBVKXBAQEAMAzDIF7/nncRgYcTTDTRRBNNNNFEE0000UQTTTTRRB9NQAEfe+dsMAAAAABJRU5ErkJggg==";
+
+// Test 1 to check GridOverlay module is getting loaded
+test('Load Grid-Overlay module', function(t) {
+  sequencer.loadImages(red);
+  sequencer.addSteps('grid-overlay', options);
+  t.equal(sequencer.steps[1].options.name, 'grid-overlay', 'Grid-Overlay module is getting loaded');
+  t.end();
+});
+
+// Test 2 to check options are correct
+test('Check Options', function(t) {
+  t.equal(sequencer.steps[1].options.x, 1, 'Options are correct');
+  t.end();
+});
+
+// Test 3 to check brightness module works as expected
+test('GridOverlay module works correctly', function(t) {
+  sequencer.run({ mode: 'test' }, function(out) {
+    var result = sequencer.steps[1].output.src
+    base64Img.imgSync(result, target, 'result')
+    base64Img.imgSync(benchmark, target, 'benchmark')
+    result = './test_outputs/result.png'
+    benchmark = './test_outputs/benchmark.png'
+    looksSame(result, benchmark, function(err, res) {
+      if (err) console.log(err)
+      t.equal(res.equal, true)
+      t.end()
+    })
+  })
+})

test/core/modules/image-sequencer.js

@@ -1,3 +1,4 @@
+
 'use strict';
 
 var fs = require('fs');
@@ -103,29 +104,53 @@ test('addSteps("name",o) adds a step', function(t) {
   t.end();
 });
 
+test('addSteps("name,name") adds two steps', function(t) {
+  sequencer.addSteps('channel,invert')
+  t.equal(sequencer.steps.length, 7, 'Length of steps increase')
+  t.equal(sequencer.steps[5].options.name, "channel", "Correct Step Added");
+  t.equal(sequencer.steps[6].options.name, "invert", "Correct Step Added");
+  t.end()
+})
+
+test('addSteps("name{parameter:value},name{parameter:value}") adds two steps', function(t) {
+  sequencer.addSteps('brightness{brightness:80},average{}')
+  t.equal(sequencer.steps.length, 9, 'Length of steps increase')
+  t.equal(sequencer.steps[7].options.name, "brightness", "Correct Step Added");
+  t.equal(sequencer.steps[7].options.brightness, '80', "Correct options loaded")
+  t.equal(sequencer.steps[8].options.name, "average", "Correct Step Added");
+  t.end()
+})
+
+test('addSteps("name{parameter:value}" adds a step', function(t) {
+  sequencer.addSteps('brightness{brightness:1}')
+  t.equal(sequencer.steps.length, 10, 'Length of steps increase')
+  t.equal(sequencer.steps[9].options.name, "brightness", "Correct Step Added");
+  t.equal(sequencer.steps[9].options.brightness, '1', "Correct options loaded")
+  t.end()
+})
 
 test('removeSteps(position) removes a step', function(t) {
-  sequencer.removeSteps( 1);
-  t.equal(sequencer.steps.length, 4, "Length of steps reduced");
+  sequencer.removeSteps(1);
+  t.equal(sequencer.steps.length, 9, "Length of steps reduced");
   t.end();
 });
 
 test('removeSteps([positions]) removes steps', function(t) {
   sequencer.removeSteps([1, 2]);
-  t.equal(sequencer.steps.length, 2, "Length of steps reduced");
+  t.equal(sequencer.steps.length, 7, "Length of steps reduced");
   t.end();
 });
 
 test('insertSteps(position,"module",options) inserts a step', function(t) {
   sequencer.insertSteps( 1, 'channel', {});
-  t.equal(sequencer.steps.length, 3, "Length of Steps increased");
+  t.equal(sequencer.steps.length, 8, "Length of Steps increased");
   t.equal(sequencer.steps[1].options.name, "channel", "Correct Step Inserted");
   t.end();
 });
 
 test('insertSteps(position,"module") inserts a step', function(t) {
   sequencer.insertSteps(1, 'channel');
-  t.equal(sequencer.steps.length, 4, "Length of Steps increased");
+  t.equal(sequencer.steps.length, 9, "Length of Steps increased");
   t.equal(sequencer.steps[1].options.name, "channel", "Correct Step Inserted");
   t.end();
 });
@@ -136,7 +161,7 @@ test('getSteps() returns correct array of steps', function(t){
   var sequencer = ImageSequencer({ ui: false });
   sequencer.loadImages('test', red);
   sequencer.addSteps(['blur','invert']);
-  var stepsArray = sequencer.getSteps('test');  
+  var stepsArray = sequencer.getSteps('test');
   t.equal(stepsArray.length, sequencer.steps.length, "getSteps() returns correct length of steps");
   var flag=0;
   for (var i = 0; i<sequencer.steps.length; i++){
@@ -149,16 +174,14 @@ test('getSteps() returns correct array of steps', function(t){
   t.end();
 })
 
-
 test('run() runs the sequencer and returns output to callback', function(t) {
-  sequencer.run(function(out) {
+  sequencer.run({ mode: 'test' }, function(out) {
     t.equal(typeof (sequencer.steps[sequencer.steps.length - 1].output), "object", "Output is Generated");
     t.equal(out, sequencer.steps[sequencer.steps.length - 1].output.src, "Output callback works");
     t.end();
   });
 });
 
-
 test('getStep(offset) returns the step at offset distance relative to current step', function(t) {
   sequencer.addSteps('invert', {});
   sequencer.addSteps('blend', {});
@@ -169,7 +192,7 @@ test('getStep(offset) returns the step at offset distance relative to current st
 });
 
 test('toCliString() returns the CLI command for the sequence', function(t) {
-  t.deepEqual(sequencer.toCliString(), `sequencer -i [PATH] -s "channel channel channel invert blend" -d '{"channel":"green","offset":-2}'`, "works correctly");
+  t.deepEqual(sequencer.toCliString(), `sequencer -i [PATH] -s "channel channel channel channel invert brightness average brightness invert blend" -d \'{"channel":"green","brightness":"1","offset":-2}'`, "works correctly");
   t.end();
 });
 

test/core/modules/resize.js

@@ -13,20 +13,20 @@ var target = 'test_outputs'
 var options = {resize: '129%'}
 
 test('Resize module loads correctly', function(t) {
-  sequencer.loadImages('test', red)
+  sequencer.loadImages(red)
   sequencer.addSteps('resize', options)
-  t.equal(sequencer.images.test.steps[1].options.name, 'resize', 'Resize module is getting loaded')
+  t.equal(sequencer.steps[1].options.name, 'resize', 'Resize module is getting loaded')
   t.end()
 })
 
 test('Resize module loads with correct options', function(t) {
-    t.equal(sequencer.images.test.steps[1].options.resize, '129%', 'Options are correct');
+    t.equal(sequencer.steps[1].options.resize, '129%', 'Options are correct');
     t.end();
 })
 
 test('Resize module works correctly', function(t) {
   sequencer.run({mode:'test'}, function(out) {
-    var result = sequencer.images.test.steps[1].output.src
+    var result = sequencer.steps[1].output.src
     base64Img.imgSync(result, target, 'result')
     base64Img.imgSync(benchmark, target, 'benchmark')
     result = './test_outputs/result.png'

test/core/modules/rotate.js

@@ -12,20 +12,20 @@ var target = 'test_outputs'
 var options = {rotate: 45}
 
 test('Rotate module loads correctly', function(t) {
-  sequencer.loadImages('test', red)
+  sequencer.loadImages(red)
   sequencer.addSteps('rotate', options)
-  t.equal(sequencer.images.test.steps[1].options.name, 'rotate', 'Rotate module is getting loaded')
+  t.equal(sequencer.steps[1].options.name, 'rotate', 'Rotate module is getting loaded')
   t.end()
 })
 
 test('Rotate module loads with correct options', function(t) {
-    t.equal(sequencer.images.test.steps[1].options.rotate, 45, 'Options are correct');
+    t.equal(sequencer.steps[1].options.rotate, 45, 'Options are correct');
     t.end();
 })
 
 test('Rotate module works correctly', function(t) {
   sequencer.run({mode:'test'}, function(out) {
-    var result = sequencer.images.test.steps[1].output.src
+    var result = sequencer.steps[1].output.src
     base64Img.imgSync(result, target, 'result')
     base64Img.imgSync(benchmark, target, 'benchmark')
     result = './test_outputs/result.png'

test/core/modules/text-overlay.js

@@ -0,0 +1,42 @@
+var test = require('tape');
+var base64Img = require('base64-img');
+var looksSame = require('looks-same');
+
+require('../../../src/ImageSequencer.js');
+
+var sequencer = ImageSequencer({ ui: false });
+var options = {text : "Hello World"};
+var target = 'test_outputs'; 
+var red = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABlBMVEX+AAD///+KQee0AAAAAWJLR0QB/wIt3gAAAAd0SU1FB+EGHRIVAvrm6EMAAAAMSURBVAjXY2AgDQAAADAAAceqhY4AAAAldEVYdGRhdGU6Y3JlYXRlADIwMTctMDYtMjlUMTg6MjE6MDIrMDI6MDDGD83DAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDE3LTA2LTI5VDE4OjIxOjAyKzAyOjAwt1J1fwAAAABJRU5ErkJggg==";
+
+// Test 1 to check text overlay module is getting loaded.
+test('Load Text Overlay module', function(t) {
+  sequencer.loadImages(red);
+  sequencer.addSteps('text-overlay', options);
+  t.equal(sequencer.steps[1].options.name, 'text-overlay', 'Text Overlay module is getting loaded');
+  t.end();
+});
+
+// Test 2 to check options are correct.
+test('Check Options', function(t) {
+  t.equal(sequencer.steps[1].options.text, "Hello World", 'Options are correct');
+  t.end();
+});
+
+// Test 3 to check Text Overlay module works as expected.
+test('Text Overlay module works correctly', function(t) {
+  sequencer.run({ mode: 'test' }, function(out) {
+    // The test runs in node , and the text overlay is a browser only module,
+    // thus it there is no image processing and output is same as input.
+    var result = sequencer.steps[1].output.src
+    base64Img.imgSync(result, target, 'result')
+    base64Img.imgSync(red, target, 'red')
+    result = './test_outputs/result.png'
+    red = './test_outputs/red.png'
+    looksSame(result, red, function(err, res) {
+      if (err) console.log(err)
+      t.equal(res.equal, true)
+      t.end()
+    })
+  })
+})

test/core/modules/webgl-distort.js

@@ -0,0 +1,49 @@
+var test = require('tape');
+var base64Img = require('base64-img');
+var looksSame = require('looks-same');
+
+require('../../../src/ImageSequencer.js');
+
+var sequencer = ImageSequencer({ ui: false });
+var options = {
+        nw: '0,0',
+        ne: '10,4',
+        se: '10,5',
+        sw: '0,4'
+    };
+var target = 'test_outputs';
+var red = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABlBMVEX+AAD///+KQee0AAAAAWJLR0QB/wIt3gAAAAd0SU1FB+EGHRIVAvrm6EMAAAAMSURBVAjXY2AgDQAAADAAAceqhY4AAAAldEVYdGRhdGU6Y3JlYXRlADIwMTctMDYtMjlUMTg6MjE6MDIrMDI6MDDGD83DAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDE3LTA2LTI5VDE4OjIxOjAyKzAyOjAwt1J1fwAAAABJRU5ErkJggg==";
+var benchmark = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAp0lEQVQ4T62SsQ3CMBBF3y/YgDUYAQE9IzACEvS0LAAZgRGoYQZGAXpzKFISWYmxzsCV1v/vnnTWCwy4CRaCO4WjBtDVBFvBwcsZAKJibTUXPHKwHMBl5QL0rGaCZ/tWCoitNoLj14CfDf4HqEkGS4Oz9/ZxTv1SgJNg5YUNAG3RYGpwAUbZj+TZFKASrFPZjwapsMHE4AqMuyt4DFKZAHvBrsggBXoDQmQp9u/Xo6IAAAAASUVORK5CYII=";
+
+// Test 1 to check webgl-distort module is getting loaded
+test('Load distort module', function(t) {
+  sequencer.loadImages(red);
+  sequencer.addSteps('webgl-distort', options);
+  t.equal(sequencer.steps[1].options.name, 'webgl-distort', 'Distort module is getting loaded');
+  t.end();
+});
+
+// Test 2 to check options are correct
+test('Check Options', function(t) {
+  t.equal(sequencer.steps[1].options.nw, '0,0', 'Options are correct');
+  t.equal(sequencer.steps[1].options.ne, '10,4', 'Options are correct');
+  t.equal(sequencer.steps[1].options.se, '10,5', 'Options are correct');
+  t.equal(sequencer.steps[1].options.sw, '0,4', 'Options are correct');
+  t.end();
+});
+
+// Test 3 to check webgl-distort module works as expected
+test('Distort module works correctly', function(t) {
+  sequencer.run({ mode: 'test' }, function(out) {
+    var result = sequencer.steps[1].output.src
+    base64Img.imgSync(result, target, 'result')
+    base64Img.imgSync(benchmark, target, 'benchmark')
+    result = './test_outputs/result.png'
+    benchmark = './test_outputs/benchmark.png'
+    looksSame(result, benchmark, function(err, res) {
+      if (err) console.log(err)
+      t.equal(res.equal, true)
+      t.end()
+    })
+  })
+})

test/core/modules/white-balance.js

@@ -0,0 +1,43 @@
+const test = require('tape')
+const base64Img = require('base64-img')
+const looksSame = require('looks-same')
+
+require('../../../src/ImageSequencer.js');
+
+var sequencer = ImageSequencer({ui: false})
+var options = {red: 240, green: 240, blue: 240}
+var target = 'test_outputs'
+var image = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABlBMVEX+AAD///+KQee0AAAAAWJLR0QB/wIt3gAAAAd0SU1FB+EGHRIVAvrm6EMAAAAMSURBVAjXY2AgDQAAADAAAceqhY4AAAAldEVYdGRhdGU6Y3JlYXRlADIwMTctMDYtMjlUMTg6MjE6MDIrMDI6MDDGD83DAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDE3LTA2LTI5VDE4OjIxOjAyKzAyOjAwt1J1fwAAAABJRU5ErkJggg=='
+var benchmark = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAklEQVR4AewaftIAAAApSURBVKXBAQEAAAiDMKR/5xuC7QYjkEgiiSSSSCKJJJJIIokkkkgiiR5YbQIegx78CAAAAABJRU5ErkJggg=='
+
+// Test for loading module
+test('Load white balance module', function(t){
+  sequencer.loadImages(image)
+  sequencer.addSteps('white-balance', options)
+  t.equal(sequencer.steps[1].options.name, 'white-balance', 'White Balance module loads correctly')
+  t.end()
+})
+
+// Test for checking options
+test('Options are correct', function(t){
+  t.equal(sequencer.steps[1].options.red, 240, 'Red component is correct')
+  t.equal(sequencer.steps[1].options.green, 240, 'Green component is correct')
+  t.equal(sequencer.steps[1].options.blue, 240, 'Blue component is correct')
+  t.end()
+})
+
+// Test for correct output
+test('White Balance module works correctly', function(t){
+  sequencer.run({ mode: 'test' }, function(out) {
+    var result = sequencer.steps[1].output.src
+    base64Img.imgSync(result, target, 'result')
+    base64Img.imgSync(benchmark, target, 'benchmark')
+    result = './test_outputs/result.png'
+    benchmark = './test_outputs/benchmark.png'
+    looksSame(result, benchmark, function(err, res) {
+      if (err) console.log(err)
+      t.equal(res.equal, true)
+      t.end()
+    })
+  })
+})

yarn.lock

@@ -42,6 +42,11 @@ abbrev@1:
   resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.1.tgz#f8f2c887ad10bf67f634f005b6987fed3179aac8"
   integrity sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==
 
+abbrev@1.0.x:
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.0.9.tgz#91b4792588a7738c25f35dd6f63752a2f8776135"
+  integrity sha1-kbR5JYinc4wl813W9jdSovh3YTU=
+
 accepts@~1.3.4:
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/accepts/-/accepts-1.3.5.tgz#eb777df6011723a3b14e8a72c0805c8e86746bd2"
@@ -87,6 +92,13 @@ after@0.8.2:
   resolved "https://registry.yarnpkg.com/after/-/after-0.8.2.tgz#fedb394f9f0e02aa9768e702bda23b505fae7e1f"
   integrity sha1-/ts5T58OAqqXaOcCvaI7UF+ufh8=
 
+agent-base@^4.1.0:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-4.2.1.tgz#d89e5999f797875674c07d87f260fc41e83e8ca9"
+  integrity sha512-JVwXMr9nHYTUXsBFKUqhJwvlcYU/blreOEUkhNR2eXZIvwd+c+o5V4MgDPKWnMS/56awN3TRzIP+KoPn+roQtg==
+  dependencies:
+    es6-promisify "^5.0.0"
+
 ajax-request@^1.2.0:
   version "1.2.3"
   resolved "https://registry.yarnpkg.com/ajax-request/-/ajax-request-1.2.3.tgz#99fcbec1d6d2792f85fa949535332bd14f5f3790"
@@ -129,10 +141,10 @@ ansi-regex@^3.0.0:
   resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-3.0.0.tgz#ed0317c322064f79466c02966bddb605ab37d998"
   integrity sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=
 
-ansi-regex@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-4.0.0.tgz#70de791edf021404c3fd615aa89118ae0432e5a9"
-  integrity sha512-iB5Dda8t/UqpPI/IjsejXu5jOGDrzn41wJyljwPH65VCIbk6+1BzFIMJGFwTNrYXT1CrD+B4l19U7awiQ8rk7w==
+ansi-regex@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-4.1.0.tgz#8b9f8f08cf1acb843756a839ca8c7e3168c51997"
+  integrity sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==
 
 ansi-styles@^2.2.1:
   version "2.2.1"
@@ -146,6 +158,11 @@ ansi-styles@^3.2.1:
   dependencies:
     color-convert "^1.9.0"
 
+ansicolors@~0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/ansicolors/-/ansicolors-0.2.1.tgz#be089599097b74a5c9c4a84a0cdbcdb62bd87aef"
+  integrity sha1-vgiVmQl7dKXJxKhKDNvNtivYeu8=
+
 anymatch@^1.3.0:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-1.3.2.tgz#553dcb8f91e3c889845dfdba34c77721b90b9d7a"
@@ -175,7 +192,7 @@ are-we-there-yet@~1.1.2:
     delegates "^1.0.0"
     readable-stream "^2.0.6"
 
-argparse@^1.0.2:
+argparse@^1.0.7:
   version "1.0.10"
   resolved "https://registry.yarnpkg.com/argparse/-/argparse-1.0.10.tgz#bcd6791ea5ae09725e17e5ad988134cd40b3d911"
   integrity sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==
@@ -302,7 +319,7 @@ async-limiter@~1.0.0:
   resolved "https://registry.yarnpkg.com/async-limiter/-/async-limiter-1.0.0.tgz#78faed8c3d074ab81f22b4e985d79e8738f720f8"
   integrity sha512-jp/uFnooOiO+L211eZOoSyzpOITMXx1rBITauYykG3BRYPu8h0UcxsPNB04RR5vo4Tyz3+ay17tR6JVf9qzYWg==
 
-async@1.5.2, async@^1.5.2, async@~1.5.2:
+async@1.5.2, async@1.x, async@^1.5.2, async@~1.5.2:
   version "1.5.2"
   resolved "https://registry.yarnpkg.com/async/-/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a"
   integrity sha1-7GphrlZIDAw8skHJVhjiCJL5Zyo=
@@ -854,6 +871,14 @@ can-promise@0.0.1:
   dependencies:
     window-or-global "^1.0.1"
 
+cardinal@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/cardinal/-/cardinal-1.0.0.tgz#50e21c1b0aa37729f9377def196b5a9cec932ee9"
+  integrity sha1-UOIcGwqjdyn5N33vGWtanOyTLuk=
+  dependencies:
+    ansicolors "~0.2.1"
+    redeyed "~1.0.0"
+
 caseless@~0.12.0:
   version "0.12.0"
   resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc"
@@ -1069,10 +1094,10 @@ combined-stream@~1.0.6:
   dependencies:
     delayed-stream "~1.0.0"
 
-commander@^2.11.0, commander@^2.2.0:
-  version "2.19.0"
-  resolved "https://registry.yarnpkg.com/commander/-/commander-2.19.0.tgz#f6198aa84e5b83c46054b94ddedbfed5ee9ff12a"
-  integrity sha512-6tvAOO+D6OENvRAh524Dh9jcfKTYDQAqvqezbCW82xj5X0pSrcpxtvRKHLG0yBY6SD7PSDrJaj+0AiOcKVd1Xg==
+commander@^2.11.0, commander@^2.2.0, commander@~2.20.0:
+  version "2.20.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.0.tgz#d58bb2b5c1ee8f87b0d340027e9e94e222c5a422"
+  integrity sha512-7j2y+40w61zy6YC2iRNpUe/NwhNyoXrYpHMrSunaMG64nRnaf96zO/KMQR4OyN/UnE5KLyEBnKHd4aG3rskjpQ==
 
 commander@~2.13.0:
   version "2.13.0"
@@ -1268,6 +1293,11 @@ cssstyle@^1.1.1:
   dependencies:
     cssom "0.3.x"
 
+csv-parse@^2.0.0:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/csv-parse/-/csv-parse-2.5.0.tgz#65748997ecc3719c594622db1b9ea0e2eb7d56bb"
+  integrity sha512-4OcjOJQByI0YDU5COYw9HAqjo8/MOLLmT9EKyMCXUzgvh30vS1SlMK+Ho84IH5exN44cSnrYecw/7Zpu2m4lkA==
+
 currently-unhandled@^0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/currently-unhandled/-/currently-unhandled-0.4.1.tgz#988df33feab191ef799a61369dd76c17adf957ea"
@@ -1320,9 +1350,9 @@ data-uri-to-buffer@0.0.3:
   integrity sha1-GK6XmmoMqZSwYlhTkW0mYruuCxo=
 
 data-uri-to-buffer@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/data-uri-to-buffer/-/data-uri-to-buffer-2.0.0.tgz#0ba23671727349828c32cfafddea411908d13d23"
-  integrity sha512-YbKCNLPPP4inc0E5If4OaalBc7gpaM2MRv77Pv2VThVComLKfbGYtJcdDCViDyp1Wd4SebhHLz94vp91zbK6bw==
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/data-uri-to-buffer/-/data-uri-to-buffer-2.0.1.tgz#ca8f56fe38b1fd329473e9d1b4a9afcd8ce1c045"
+  integrity sha512-OkVVLrerfAKZlW2ZZ3Ve2y65jgiWqBKsTfUIAFbn8nVbPcCZg6l6gikKlEYv0kXcmzqGm6mFq/Jf2vriuEkv8A==
   dependencies:
     "@types/node" "^8.0.7"
 
@@ -1369,6 +1399,13 @@ debug@^3.1.0:
   dependencies:
     ms "^2.1.1"
 
+debug@^4.1.0:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-4.1.1.tgz#3b72260255109c6b589cee050f1d516139664791"
+  integrity sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==
+  dependencies:
+    ms "^2.1.1"
+
 decamelize@^1.0.0, decamelize@^1.1.1, decamelize@^1.1.2, decamelize@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
@@ -1785,11 +1822,23 @@ es6-map@^0.1.5:
     es6-symbol "~3.1.1"
     event-emitter "~0.3.5"
 
+es6-promise@^4.0.3:
+  version "4.2.6"
+  resolved "https://registry.yarnpkg.com/es6-promise/-/es6-promise-4.2.6.tgz#b685edd8258886365ea62b57d30de28fadcd974f"
+  integrity sha512-aRVgGdnmW2OiySVPUC9e6m+plolMAJKjZnQlCwNSuK5yQ0JN61DZSO1X1Ufd1foqWRAlig0rhduTCHe7sVtK5Q==
+
 es6-promise@^4.0.5:
   version "4.2.5"
   resolved "https://registry.yarnpkg.com/es6-promise/-/es6-promise-4.2.5.tgz#da6d0d5692efb461e082c14817fe2427d8f5d054"
   integrity sha512-n6wvpdE43VFtJq+lUDYDBFUwV8TZbuGXLV4D6wKafg13ldznKsyEvatubnmUe31zcvelSzOHF+XbaT+Bl9ObDg==
 
+es6-promisify@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/es6-promisify/-/es6-promisify-5.0.0.tgz#5109d62f3e56ea967c4b63505aef08291c8a5203"
+  integrity sha1-UQnWLz5W6pZ8S2NQWu8IKRyKUgM=
+  dependencies:
+    es6-promise "^4.0.3"
+
 es6-set@^0.1.5, es6-set@~0.1.5:
   version "0.1.5"
   resolved "https://registry.yarnpkg.com/es6-set/-/es6-set-0.1.5.tgz#d2b3ec5d4d800ced818db538d28974db0a73ccb1"
@@ -1819,6 +1868,18 @@ escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.5:
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
   integrity sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=
 
+escodegen@1.8.x:
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/escodegen/-/escodegen-1.8.1.tgz#5a5b53af4693110bebb0867aa3430dd3b70a1018"
+  integrity sha1-WltTr0aTEQvrsIZ6o0MN07cKEBg=
+  dependencies:
+    esprima "^2.7.1"
+    estraverse "^1.9.1"
+    esutils "^2.0.2"
+    optionator "^0.8.1"
+  optionalDependencies:
+    source-map "~0.2.0"
+
 escodegen@^1.11.0, escodegen@^1.8.1:
   version "1.11.0"
   resolved "https://registry.yarnpkg.com/escodegen/-/escodegen-1.11.0.tgz#b27a9389481d5bfd5bec76f7bb1eb3f8f4556589"
@@ -1864,21 +1925,26 @@ escodegen@~1.9.0:
   optionalDependencies:
     source-map "~0.6.1"
 
+esprima@2.7.x, esprima@^2.7.1:
+  version "2.7.3"
+  resolved "https://registry.yarnpkg.com/esprima/-/esprima-2.7.3.tgz#96e3b70d5779f6ad49cd032673d1c312767ba581"
+  integrity sha1-luO3DVd59q1JzQMmc9HDEnZ7pYE=
+
 esprima@^1.0.3:
   version "1.2.5"
   resolved "https://registry.yarnpkg.com/esprima/-/esprima-1.2.5.tgz#0993502feaf668138325756f30f9a51feeec11e9"
   integrity sha1-CZNQL+r2aBODJXVvMPmlH+7sEek=
 
-esprima@^2.6.0:
-  version "2.7.3"
-  resolved "https://registry.yarnpkg.com/esprima/-/esprima-2.7.3.tgz#96e3b70d5779f6ad49cd032673d1c312767ba581"
-  integrity sha1-luO3DVd59q1JzQMmc9HDEnZ7pYE=
-
 esprima@^3.1.3:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/esprima/-/esprima-3.1.3.tgz#fdca51cee6133895e3c88d535ce49dbff62a4633"
   integrity sha1-/cpRzuYTOJXjyI1TXOSdv/YqRjM=
 
+esprima@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.1.tgz#13b04cdb3e6c5d19df91ab6987a8695619b0aa71"
+  integrity sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==
+
 esprima@~1.0.2:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/esprima/-/esprima-1.0.4.tgz#9f557e08fc3b4d26ece9dd34f8fbf476b62585ad"
@@ -1889,6 +1955,16 @@ esprima@~1.1.1:
   resolved "https://registry.yarnpkg.com/esprima/-/esprima-1.1.1.tgz#5b6f1547f4d102e670e140c509be6771d6aeb549"
   integrity sha1-W28VR/TRAuZw4UDFCb5ncdautUk=
 
+esprima@~3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/esprima/-/esprima-3.0.0.tgz#53cf247acda77313e551c3aa2e73342d3fb4f7d9"
+  integrity sha1-U88kes2ncxPlUcOqLnM0LT+099k=
+
+estraverse@^1.9.1:
+  version "1.9.3"
+  resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-1.9.3.tgz#af67f2dc922582415950926091a4005d29c9bb44"
+  integrity sha1-r2fy3JIlgkFZUJJgkaQAXSnJu0Q=
+
 estraverse@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-4.2.0.tgz#0dee3fed31fcd469618ce7342099fc1afa0bdb13"
@@ -2048,7 +2124,7 @@ extglob@^2.0.4:
     snapdragon "^0.8.1"
     to-regex "^3.0.1"
 
-extract-zip@^1.0.3:
+extract-zip@^1.0.3, extract-zip@^1.6.6:
   version "1.6.7"
   resolved "https://registry.yarnpkg.com/extract-zip/-/extract-zip-1.6.7.tgz#a840b4b8af6403264c8db57f4f1a74333ef81fe9"
   integrity sha1-qEC0uK9kAyZMjbV/Txp0Mz74H+k=
@@ -2349,6 +2425,14 @@ gaze@^1.1.0:
   dependencies:
     globule "^1.0.0"
 
+geotiff@^1.0.0-beta.6:
+  version "1.0.0-beta.6"
+  resolved "https://registry.yarnpkg.com/geotiff/-/geotiff-1.0.0-beta.6.tgz#500f256196a2c23517b73ccb36a45dc82a1f7a70"
+  integrity sha512-xdZ/MLcnrv1+6wQlQZQIs11zNJywylnV1pXqDw7Ao7bmLRpM421a39dXP5e6SG+vio0mnDUZkL2XknKbqppFzw==
+  dependencies:
+    pako "^1.0.3"
+    xmldom "0.1.*"
+
 get-assigned-identifiers@^1.1.0, get-assigned-identifiers@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/get-assigned-identifiers/-/get-assigned-identifiers-1.2.0.tgz#6dbf411de648cbaf8d9169ebb0d2d576191e2ff1"
@@ -2417,6 +2501,11 @@ gifshot@^0.4.5:
   resolved "https://registry.yarnpkg.com/gifshot/-/gifshot-0.4.5.tgz#e3cb570203a3b139ff3069d7578098a29c03b0f8"
   integrity sha1-48tXAgOjsTn/MGnXV4CYopwDsPg=
 
+glfx@0.0.4:
+  version "0.0.4"
+  resolved "https://registry.yarnpkg.com/glfx/-/glfx-0.0.4.tgz#1b776dc748c081994624b0af3b5638403de78f4d"
+  integrity sha1-G3dtx0jAgZlGJLCvO1Y4QD3nj00=
+
 glob-base@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/glob-base/-/glob-base-0.3.0.tgz#dbb164f6221b1c0b1ccf82aea328b497df0ea3c4"
@@ -2440,6 +2529,17 @@ glob-parent@^3.1.0:
     is-glob "^3.1.0"
     path-dirname "^1.0.0"
 
+glob@^5.0.15, glob@~5.0.0:
+  version "5.0.15"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-5.0.15.tgz#1bc936b9e02f4a603fcc222ecf7633d30b8b93b1"
+  integrity sha1-G8k2ueAvSmA/zCIuz3Yz0wuLk7E=
+  dependencies:
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "2 || 3"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"
+
 glob@^7.0.5, glob@^7.1.0, glob@^7.1.2, glob@~7.1.1, glob@~7.1.3:
   version "7.1.3"
   resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.3.tgz#3960832d3f1574108342dafd3a67b332c0969df1"
@@ -2452,17 +2552,6 @@ glob@^7.0.5, glob@^7.1.0, glob@^7.1.2, glob@~7.1.1, glob@~7.1.3:
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
-glob@~5.0.0:
-  version "5.0.15"
-  resolved "https://registry.yarnpkg.com/glob/-/glob-5.0.15.tgz#1bc936b9e02f4a603fcc222ecf7633d30b8b93b1"
-  integrity sha1-G8k2ueAvSmA/zCIuz3Yz0wuLk7E=
-  dependencies:
-    inflight "^1.0.4"
-    inherits "2"
-    minimatch "2 || 3"
-    once "^1.3.0"
-    path-is-absolute "^1.0.0"
-
 glob@~7.0.0:
   version "7.0.6"
   resolved "https://registry.yarnpkg.com/glob/-/glob-7.0.6.tgz#211bafaf49e525b8cd93260d14ab136152b3f57a"
@@ -2604,9 +2693,9 @@ grunt-legacy-util@~1.1.1:
     which "~1.3.0"
 
 grunt@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/grunt/-/grunt-1.0.3.tgz#b3c99260c51d1b42835766e796527b60f7bba374"
-  integrity sha512-/JzmZNPfKorlCrrmxWqQO4JVodO+DVd5XX4DkocL/1WlLlKVLE9+SdEIempOAxDhWPysLle6afvn/hg7Ck2k9g==
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/grunt/-/grunt-1.0.4.tgz#c799883945a53a3d07622e0737c8f70bfe19eb38"
+  integrity sha512-PYsMOrOC+MsdGEkFVwMaMyc6Ob7pKmq+deg1Sjr+vvMWp35sztfwKE7qoN51V+UEtHsyNuMcGdgMLFkBHvMxHQ==
   dependencies:
     coffeescript "~1.10.0"
     dateformat "~1.0.12"
@@ -2619,7 +2708,7 @@ grunt@^1.0.3:
     grunt-legacy-log "~2.0.0"
     grunt-legacy-util "~1.1.1"
     iconv-lite "~0.4.13"
-    js-yaml "~3.5.2"
+    js-yaml "~3.13.0"
     minimatch "~3.0.2"
     mkdirp "~0.5.1"
     nopt "~3.0.6"
@@ -2634,6 +2723,17 @@ gzip-size@^1.0.0:
     browserify-zlib "^0.1.4"
     concat-stream "^1.4.1"
 
+handlebars@^4.0.1:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.1.2.tgz#b6b37c1ced0306b221e094fc7aca3ec23b131b67"
+  integrity sha512-nvfrjqvt9xQ8Z/w0ijewdD/vvWDTOweBUm96NTr66Wfvo1mJenBLwcYmPs3TIBP5ruzYGD7Hx/DaM9RmhroGPw==
+  dependencies:
+    neo-async "^2.6.0"
+    optimist "^0.6.1"
+    source-map "^0.6.1"
+  optionalDependencies:
+    uglify-js "^3.1.4"
+
 har-schema@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/har-schema/-/har-schema-2.0.0.tgz#a94c2224ebcac04782a0d9035521f24735b7ec92"
@@ -2666,6 +2766,11 @@ has-cors@1.1.0:
   resolved "https://registry.yarnpkg.com/has-cors/-/has-cors-1.1.0.tgz#5e474793f7ea9843d1bb99c23eef49ff126fff39"
   integrity sha1-XkdHk/fqmEPRu5nCPu9J/xJv/zk=
 
+has-flag@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-1.0.0.tgz#9d9e793165ce017a00f00418c43f942a7b1d11fa"
+  integrity sha1-nZ55MWXOAXoA8AQYxD+UKnsdEfo=
+
 has-flag@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd"
@@ -2856,6 +2961,19 @@ https-browserify@^1.0.0:
   resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-1.0.0.tgz#ec06c10e0a34c0f2faf199f7fd7fc78fffd03c73"
   integrity sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM=
 
+https-proxy-agent@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/https-proxy-agent/-/https-proxy-agent-2.2.1.tgz#51552970fa04d723e04c56d04178c3f92592bbc0"
+  integrity sha512-HPCTS1LW51bcyMYbxUIOO4HEOlQ1/1qRaFWcyxvwaqUS9TY88aoEuHUY33kuAh1YhVVaDQhLZsnPd+XNARWZlQ==
+  dependencies:
+    agent-base "^4.1.0"
+    debug "^3.1.0"
+
+humanize@^0.0.9:
+  version "0.0.9"
+  resolved "https://registry.yarnpkg.com/humanize/-/humanize-0.0.9.tgz#1994ffaecdfe9c441ed2bdac7452b7bb4c9e41a4"
+  integrity sha1-GZT/rs3+nEQe0r2sdFK3u0yeQaQ=
+
 iconv-lite@0.4.23:
   version "0.4.23"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.23.tgz#297871f63be507adcfbfca715d0cd0eed84e9a63"
@@ -3276,10 +3394,30 @@ isstream@~0.1.2:
   resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
   integrity sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=
 
+istanbul@^0.4.5:
+  version "0.4.5"
+  resolved "https://registry.yarnpkg.com/istanbul/-/istanbul-0.4.5.tgz#65c7d73d4c4da84d4f3ac310b918fb0b8033733b"
+  integrity sha1-ZcfXPUxNqE1POsMQuRj7C4Azczs=
+  dependencies:
+    abbrev "1.0.x"
+    async "1.x"
+    escodegen "1.8.x"
+    esprima "2.7.x"
+    glob "^5.0.15"
+    handlebars "^4.0.1"
+    js-yaml "3.x"
+    mkdirp "0.5.x"
+    nopt "3.x"
+    once "1.x"
+    resolve "1.1.x"
+    supports-color "^3.1.0"
+    which "^1.1.1"
+    wordwrap "^1.0.0"
+
 jasmine-core@^3.3.0:
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/jasmine-core/-/jasmine-core-3.3.0.tgz#dea1cdc634bc93c7e0d4ad27185df30fa971b10e"
-  integrity sha512-3/xSmG/d35hf80BEN66Y6g9Ca5l/Isdeg/j6zvbTYlTzeKinzmaTM4p9am5kYqOmE05D7s1t8FGjzdSnbUbceA==
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/jasmine-core/-/jasmine-core-3.4.0.tgz#2a74618e966026530c3518f03e9f845d26473ce3"
+  integrity sha512-HU/YxV4i6GcmiH4duATwAbJQMlE0MsDIR5XmSVxURxKHn3aGAdbY1/ZJFmVRbKtnLwIxxMJD7gYaPsypcbYimg==
 
 jasmine-jquery@^2.1.1:
   version "2.1.1"
@@ -3309,32 +3447,40 @@ jpeg-js@^0.3.2:
   integrity sha512-6IzjQxvnlT8UlklNmDXIJMWxijULjqGrzgqc0OG7YadZdvm7KPQ1j0ehmQQHckgEWOfgpptzcnWgESovxudpTA==
 
 jquery@^3.3.1:
-  version "3.3.1"
-  resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.3.1.tgz#958ce29e81c9790f31be7792df5d4d95fc57fbca"
-  integrity sha512-Ubldcmxp5np52/ENotGxlLe6aGMvmF4R8S6tZjsP6Knsaxd/xp3Zrh50cG93lR6nPXyUFwzN3ZSOQI0wRJNdGg==
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.4.0.tgz#8de513fa0fa4b2c7d2e48a530e26f0596936efdf"
+  integrity sha512-ggRCXln9zEqv6OqAGXFEcshF5dSBvCkzj6Gm2gzuR5fWawaX8t7cxKVkkygKODrDAzKdoYw3l/e3pm3vlT4IbQ==
 
 js-graph-algorithms@1.0.18:
   version "1.0.18"
   resolved "https://registry.yarnpkg.com/js-graph-algorithms/-/js-graph-algorithms-1.0.18.tgz#f96ec87bf194f5c0a31365fa0e1d07b7b962d891"
   integrity sha1-+W7Ie/GU9cCjE2X6Dh0Ht7li2JE=
 
-js-yaml@~3.5.2:
-  version "3.5.5"
-  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.5.5.tgz#0377c38017cabc7322b0d1fbcd25a491641f2fbe"
-  integrity sha1-A3fDgBfKvHMisNH7zSWkkWQfL74=
+js-yaml@3.x:
+  version "3.13.1"
+  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.13.1.tgz#aff151b30bfdfa8e49e05da22e7415e9dfa37847"
+  integrity sha512-YfbcO7jXDdyj0DGxYVSlSeQNHbD7XPWvrVWeVUujrQEoZzWJIRrCPoyk6kL6IAjAG2IolMK4T0hNUe0HOUs5Jw==
   dependencies:
-    argparse "^1.0.2"
-    esprima "^2.6.0"
+    argparse "^1.0.7"
+    esprima "^4.0.0"
+
+js-yaml@~3.13.0:
+  version "3.13.0"
+  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.13.0.tgz#38ee7178ac0eea2c97ff6d96fff4b18c7d8cf98e"
+  integrity sha512-pZZoSxcCYco+DIKBTimr67J6Hy+EYGZDY/HCWC+iAEA9h1ByhMXAIVUXMcMFpOCxQ/xjXmPI2MkDL5HRm5eFrQ==
+  dependencies:
+    argparse "^1.0.7"
+    esprima "^4.0.0"
 
 jsbn@~0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-0.1.1.tgz#a5e654c2e5a2deb5f201d96cefbca80c0ef2f513"
   integrity sha1-peZUwuWi3rXyAdls77yoDA7y9RM=
 
-jsdom@^13.1.0:
-  version "13.2.0"
-  resolved "https://registry.yarnpkg.com/jsdom/-/jsdom-13.2.0.tgz#b1a0dbdadc255435262be8ea3723d2dba0d7eb3a"
-  integrity sha512-cG1NtMWO9hWpqRNRR3dSvEQa8bFI6iLlqU2x4kwX51FQjp0qus8T9aBaAO6iGp3DeBrhdwuKxckknohkmfvsFw==
+jsdom@^15.0.0:
+  version "15.0.0"
+  resolved "https://registry.yarnpkg.com/jsdom/-/jsdom-15.0.0.tgz#60cf177d79c7fa1a498453c9e2534f57e65d151f"
+  integrity sha512-rJnHm7CHyIj4tDyz9VaCt0f0P0nEh/wEmMfwp9mMixy+L/r8OW/BNcgmIlfZuBBnVQS3eRBpvd/qM3R7vr7e3A==
   dependencies:
     abab "^2.0.0"
     acorn "^6.0.4"
@@ -3346,16 +3492,16 @@ jsdom@^13.1.0:
     domexception "^1.0.1"
     escodegen "^1.11.0"
     html-encoding-sniffer "^1.0.2"
-    nwsapi "^2.0.9"
+    nwsapi "^2.1.3"
     parse5 "5.1.0"
     pn "^1.1.0"
     request "^2.88.0"
     request-promise-native "^1.0.5"
-    saxes "^3.1.5"
+    saxes "^3.1.9"
     symbol-tree "^3.2.2"
     tough-cookie "^2.5.0"
     w3c-hr-time "^1.0.1"
-    w3c-xmlserializer "^1.0.1"
+    w3c-xmlserializer "^1.1.2"
     webidl-conversions "^4.0.2"
     whatwg-encoding "^1.0.5"
     whatwg-mimetype "^2.3.0"
@@ -3555,7 +3701,7 @@ lodash.sortby@^4.7.0:
   resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438"
   integrity sha1-7dFMgk4sycHgsKG0K7UhBRakJDg=
 
-lodash@^4.13.1, lodash@^4.17.10, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.17.5, lodash@~4.17.10, lodash@~4.17.5:
+lodash@^4.13.1, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.3, lodash@^4.17.4, lodash@~4.17.10, lodash@~4.17.5:
   version "4.17.11"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.11.tgz#b39ea6229ef607ecd89e2c8df12536891cac9b8d"
   integrity sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==
@@ -3573,9 +3719,9 @@ longest@^1.0.1:
   integrity sha1-MKCy2jj3N3DoKUoNIuZiXtd9AJc=
 
 looks-same@^7.0.0:
-  version "7.1.0"
-  resolved "https://registry.yarnpkg.com/looks-same/-/looks-same-7.1.0.tgz#8ecab8d015c428a3efd13003b9c649f8852f57e4"
-  integrity sha512-nroqc3WnrTLYRGWVx6geMS3kO4ww50AQM0QdGP3Zy8Q5ohma6k7xEq3gUEd8Mf7CiXiJAbrUJpokcN0xLBDCUQ==
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/looks-same/-/looks-same-7.2.0.tgz#54772d2ed088f77691e271c4531d7ba97a5818eb"
+  integrity sha512-LCE5Md8ZQ9Wn5lJbaGW4r6Fs00P8p8+JOjvXKkq9LdI/datYG8JOSRycMes+bp2h/UJ/RYYzJjvP0CXLPeVq1A==
   dependencies:
     color-diff "^1.1.0"
     concat-stream "^1.6.2"
@@ -3727,6 +3873,11 @@ micromatch@^3.0.4, micromatch@^3.1.10, micromatch@^3.1.4:
     snapdragon "^0.8.1"
     to-regex "^3.0.2"
 
+microplugin@0.0.3:
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/microplugin/-/microplugin-0.0.3.tgz#1fc2e1bb7c9e19e82bd84bba9137bbe71250d8cd"
+  integrity sha1-H8Lhu3yeGegr2Eu6kTe75xJQ2M0=
+
 miller-rabin@^4.0.0:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/miller-rabin/-/miller-rabin-4.0.1.tgz#f080351c865b0dc562a8462966daa53543c78a4d"
@@ -3757,6 +3908,11 @@ mime@^1.2.11, mime@^1.3.4, mime@^1.6.0:
   resolved "https://registry.yarnpkg.com/mime/-/mime-1.6.0.tgz#32cd9e5c64553bd58d19a568af452acff04981b1"
   integrity sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==
 
+mime@^2.0.3:
+  version "2.4.2"
+  resolved "https://registry.yarnpkg.com/mime/-/mime-2.4.2.tgz#ce5229a5e99ffc313abac806b482c10e7ba6ac78"
+  integrity sha512-zJBfZDkwRu+j3Pdd2aHsR5GfH2jIWhmL1ZzBoc+X+3JEti2hbArWcyJ+1laC1D2/U/W1a/+Cegj0/OnEU2ybjg==
+
 mimic-fn@^1.0.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-1.2.0.tgz#820c86a39334640e99516928bd03fca88057d022"
@@ -3827,7 +3983,7 @@ mixin-deep@^1.2.0:
     for-in "^1.0.2"
     is-extendable "^1.0.1"
 
-mkdirp@0.5.1, mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.1:
+mkdirp@0.5.1, mkdirp@0.5.x, mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.1:
   version "0.5.1"
   resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.1.tgz#30057438eac6cf7f8c4767f38648d6697d75c903"
   integrity sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=
@@ -3958,6 +4114,11 @@ negotiator@0.6.1:
   resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.1.tgz#2b327184e8992101177b28563fb5e7102acd0ca9"
   integrity sha1-KzJxhOiZIQEXeyhWP7XnECrNDKk=
 
+neo-async@^2.6.0:
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.0.tgz#b9d15e4d71c6762908654b5183ed38b753340835"
+  integrity sha512-MFh0d/Wa7vkKO3Y3LlacqAEeHK0mckVqzDieUKTT+KGxi+zIpeVsFxymkIiRpbpDziHc290Xr9A1O4Om7otoRA==
+
 next-pow-2@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/next-pow-2/-/next-pow-2-1.0.0.tgz#cb5c2f1dae040c56cdd5cda1dc5c6a3a338f4367"
@@ -3999,6 +4160,13 @@ node-pre-gyp@^0.10.0:
     semver "^5.3.0"
     tar "^4"
 
+nopt@3.x, nopt@~3.0.6:
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/nopt/-/nopt-3.0.6.tgz#c6465dbf08abcd4db359317f79ac68a646b28ff9"
+  integrity sha1-xkZdvwirzU2zWTF/eaxopkayj/k=
+  dependencies:
+    abbrev "1"
+
 nopt@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/nopt/-/nopt-4.0.1.tgz#d0d4685afd5415193c8c7505602d0d17cd64474d"
@@ -4007,13 +4175,6 @@ nopt@^4.0.1:
     abbrev "1"
     osenv "^0.1.4"
 
-nopt@~3.0.6:
-  version "3.0.6"
-  resolved "https://registry.yarnpkg.com/nopt/-/nopt-3.0.6.tgz#c6465dbf08abcd4db359317f79ac68a646b28ff9"
-  integrity sha1-xkZdvwirzU2zWTF/eaxopkayj/k=
-  dependencies:
-    abbrev "1"
-
 normalize-package-data@^2.3.2, normalize-package-data@^2.3.4:
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-2.4.0.tgz#12f95a307d58352075a04907b84ac8be98ac012f"
@@ -4079,10 +4240,10 @@ number-is-nan@^1.0.0:
   resolved "https://registry.yarnpkg.com/number-is-nan/-/number-is-nan-1.0.1.tgz#097b602b53422a522c1afb8790318336941a011d"
   integrity sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=
 
-nwsapi@^2.0.9:
-  version "2.0.9"
-  resolved "https://registry.yarnpkg.com/nwsapi/-/nwsapi-2.0.9.tgz#77ac0cdfdcad52b6a1151a84e73254edc33ed016"
-  integrity sha512-nlWFSCTYQcHk/6A9FFnfhKc14c3aFhfdNBXgo8Qgi9QTBu/qg3Ww+Uiz9wMzXd1T8GFxPc2QIHB6Qtf2XFryFQ==
+nwsapi@^2.1.3:
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/nwsapi/-/nwsapi-2.1.3.tgz#25f3a5cec26c654f7376df6659cdf84b99df9558"
+  integrity sha512-RowAaJGEgYXEZfQ7tvvdtAQUKPyTR6T6wNu0fwlNsGQYr/h3yQc6oI8WnVZh3Y/Sylwc+dtAlvPqfFZjhTyk3A==
 
 oauth-sign@~0.9.0:
   version "0.9.0"
@@ -4172,7 +4333,7 @@ on-finished@~2.3.0:
   dependencies:
     ee-first "1.1.1"
 
-once@^1.3.0, once@^1.3.1, once@^1.3.3, once@^1.4.0:
+once@1.x, once@^1.3.0, once@^1.3.1, once@^1.3.3, once@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
   integrity sha1-WDsap3WWHUsROsF9nFC6753Xa9E=
@@ -4219,15 +4380,15 @@ optionator@^0.8.1:
     wordwrap "~1.0.0"
 
 ora@^3.0.0:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/ora/-/ora-3.2.0.tgz#67e98a7e11f7f0ac95deaaaf11bb04de3d09e481"
-  integrity sha512-XHMZA5WieCbtg+tu0uPF8CjvwQdNzKCX6BVh3N6GFsEXH40mTk5dsw/ya1lBTUGJslcEFJFQ8cBhOgkkZXQtMA==
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/ora/-/ora-3.4.0.tgz#bf0752491059a3ef3ed4c85097531de9fdbcd318"
+  integrity sha512-eNwHudNbO1folBP3JsZ19v9azXWtQZjICdr3Q0TDPIaeBQ3mXLrh54wM+er0+hSp+dWKf+Z8KM58CYzEyIYxYg==
   dependencies:
     chalk "^2.4.2"
     cli-cursor "^2.1.0"
     cli-spinners "^2.0.0"
     log-symbols "^2.2.0"
-    strip-ansi "^5.0.0"
+    strip-ansi "^5.2.0"
     wcwidth "^1.0.1"
 
 ordered-emitter@~0.1.0:
@@ -4322,6 +4483,11 @@ pace@0.0.4:
   dependencies:
     charm "~0.1.0"
 
+pako@^1.0.3:
+  version "1.0.10"
+  resolved "https://registry.yarnpkg.com/pako/-/pako-1.0.10.tgz#4328badb5086a426aa90f541977d4955da5c9732"
+  integrity sha512-0DTvPVU3ed8+HNXOu5Bs+o//Mbdj9VNQMUOe9oKCwh8l0GNwpTDMKCWbRjgtD291AWnkAgkqA/LOnQS8AmS1tw==
+
 pako@~0.2.0:
   version "0.2.9"
   resolved "https://registry.yarnpkg.com/pako/-/pako-0.2.9.tgz#f3f7522f4ef782348da8161bad9ecfd51bf83a75"
@@ -4606,6 +4772,16 @@ progress-stream@^1.1.0:
     speedometer "~0.1.2"
     through2 "~0.2.3"
 
+progress@^2.0.1:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/progress/-/progress-2.0.3.tgz#7e8cf8d8f5b8f239c1bc68beb4eb78567d572ef8"
+  integrity sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==
+
+proxy-from-env@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/proxy-from-env/-/proxy-from-env-1.0.0.tgz#33c50398f70ea7eb96d21f7b817630a55791c7ee"
+  integrity sha1-M8UDmPcOp+uW0h97gXYwpVeRx+4=
+
 psl@^1.1.24:
   version "1.1.29"
   resolved "https://registry.yarnpkg.com/psl/-/psl-1.1.29.tgz#60f580d360170bb722a797cc704411e6da850c67"
@@ -4651,7 +4827,21 @@ punycode@^2.1.0, punycode@^2.1.1:
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"
   integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==
 
-qrcode@1.3.3:
+puppeteer@^1.14.0:
+  version "1.15.0"
+  resolved "https://registry.yarnpkg.com/puppeteer/-/puppeteer-1.15.0.tgz#1680fac13e51f609143149a5b7fa99eec392b34f"
+  integrity sha512-D2y5kwA9SsYkNUmcBzu9WZ4V1SGHiQTmgvDZSx6sRYFsgV25IebL4V6FaHjF6MbwLK9C6f3G3pmck9qmwM8H3w==
+  dependencies:
+    debug "^4.1.0"
+    extract-zip "^1.6.6"
+    https-proxy-agent "^2.2.1"
+    mime "^2.0.3"
+    progress "^2.0.1"
+    proxy-from-env "^1.0.0"
+    rimraf "^2.6.1"
+    ws "^6.1.0"
+
+qrcode@^1.3.3:
   version "1.3.3"
   resolved "https://registry.yarnpkg.com/qrcode/-/qrcode-1.3.3.tgz#5ef50c0c890cffa1897f452070f0f094936993de"
   integrity sha512-SH7V13AcJusH3GT8bMNOGz4w0L+LjcpNOU/NiOgtBhT/5DoWeZE6D5ntMJnJ84AMkoaM4kjJJoHoh9g++8lWFg==
@@ -4860,6 +5050,13 @@ redent@^1.0.0:
     indent-string "^2.1.0"
     strip-indent "^1.0.1"
 
+redeyed@~1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/redeyed/-/redeyed-1.0.1.tgz#e96c193b40c0816b00aec842698e61185e55498a"
+  integrity sha1-6WwZO0DAgWsArshCaY5hGF5VSYo=
+  dependencies:
+    esprima "~3.0.0"
+
 regex-cache@^0.4.2:
   version "0.4.4"
   resolved "https://registry.yarnpkg.com/regex-cache/-/regex-cache-0.4.4.tgz#75bdc58a2a1496cec48a12835bc54c8d562336dd"
@@ -4967,7 +5164,7 @@ resolve-url@^0.2.1:
   resolved "https://registry.yarnpkg.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a"
   integrity sha1-LGN/53yJOv0qZj/iGqkIAGjiBSo=
 
-resolve@1.1.7, resolve@~1.1.0:
+resolve@1.1.7, resolve@1.1.x, resolve@~1.1.0:
   version "1.1.7"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.1.7.tgz#203114d82ad2c5ed9e8e0411b3932875e889e97b"
   integrity sha1-IDEU2CrSxe2ejgQRs5ModeiJ6Xs=
@@ -5086,10 +5283,10 @@ sax@^1.2.4:
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
   integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==
 
-saxes@^3.1.5:
-  version "3.1.6"
-  resolved "https://registry.yarnpkg.com/saxes/-/saxes-3.1.6.tgz#2d948a47b54918516c5a64096f08865deb5bd8cd"
-  integrity sha512-LAYs+lChg1v5uKNzPtsgTxSS5hLo8aIhSMCJt1WMpefAxm3D1RTpMwSpb6ebdL31cubiLTnhokVktBW+cv9Y9w==
+saxes@^3.1.9:
+  version "3.1.9"
+  resolved "https://registry.yarnpkg.com/saxes/-/saxes-3.1.9.tgz#c1c197cd54956d88c09f960254b999e192d7058b"
+  integrity sha512-FZeKhJglhJHk7eWG5YM0z46VHmI3KJpMBAQm3xa9meDvd+wevB5GuBB0wc0exPInZiBBHqi00DbS8AcvCGCFMw==
   dependencies:
     xmlchars "^1.3.1"
 
@@ -5105,6 +5302,14 @@ scope-analyzer@^2.0.1:
     estree-is-function "^1.0.0"
     get-assigned-identifiers "^1.1.0"
 
+selectize@^0.12.6:
+  version "0.12.6"
+  resolved "https://registry.yarnpkg.com/selectize/-/selectize-0.12.6.tgz#c2cf08cbaa4cb06c5e99bb452919d71b080690d6"
+  integrity sha512-bWO5A7G+I8+QXyjLfQUgh31VI4WKYagUZQxAXlDyUmDDNrFxrASV0W9hxCOl0XJ/XQ1dZEu3G9HjXV4Wj0yb6w==
+  dependencies:
+    microplugin "0.0.3"
+    sifter "^0.5.1"
+
 "semver@2 || 3 || 4 || 5", semver@^5.3.0, semver@^5.5.0:
   version "5.6.0"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.6.0.tgz#7e74256fbaa49c75aa7c7a205cc22799cac80004"
@@ -5230,6 +5435,17 @@ shell-quote@^1.4.2, shell-quote@^1.6.1:
     array-reduce "~0.0.0"
     jsonify "~0.0.0"
 
+sifter@^0.5.1:
+  version "0.5.3"
+  resolved "https://registry.yarnpkg.com/sifter/-/sifter-0.5.3.tgz#5e6507fe8c114b2b28d90b6bf4e5b636e611e48b"
+  integrity sha1-XmUH/owRSyso2Qtr9OW2NuYR5Is=
+  dependencies:
+    async "^2.6.0"
+    cardinal "^1.0.0"
+    csv-parse "^2.0.0"
+    humanize "^0.0.9"
+    optimist "^0.6.1"
+
 signal-exit@^3.0.0, signal-exit@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d"
@@ -5356,6 +5572,11 @@ source-map@^0.5.3, source-map@^0.5.6, source-map@~0.5.1, source-map@~0.5.3:
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
   integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=
 
+source-map@^0.6.1, source-map@~0.6.1:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
+  integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
+
 source-map@~0.1.33:
   version "0.1.43"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.1.43.tgz#c24bc146ca517c1471f5dacbe2571b2b7f9e3346"
@@ -5363,10 +5584,12 @@ source-map@~0.1.33:
   dependencies:
     amdefine ">=0.0.4"
 
-source-map@~0.6.1:
-  version "0.6.1"
-  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
-  integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
+source-map@~0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.2.0.tgz#dab73fbcfc2ba819b4de03bd6f6eaa48164b3f9d"
+  integrity sha1-2rc/vPwrqBm03gO9b26qSBZLP50=
+  dependencies:
+    amdefine ">=0.0.4"
 
 spdx-correct@^3.0.0:
   version "3.0.2"
@@ -5662,12 +5885,12 @@ strip-ansi@^4.0.0:
   dependencies:
     ansi-regex "^3.0.0"
 
-strip-ansi@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-5.0.0.tgz#f78f68b5d0866c20b2c9b8c61b5298508dc8756f"
-  integrity sha512-Uu7gQyZI7J7gn5qLn1Np3G9vcYGTVqB+lFTytnDJv83dd8T22aGH451P3jueT2/QemInJDfxHB5Tde5OzgG1Ow==
+strip-ansi@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-5.2.0.tgz#8c9a536feb6afc962bdfa5b104a5091c1ad9c0ae"
+  integrity sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==
   dependencies:
-    ansi-regex "^4.0.0"
+    ansi-regex "^4.1.0"
 
 strip-bom@^2.0.0:
   version "2.0.0"
@@ -5713,6 +5936,13 @@ supports-color@^2.0.0:
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
   integrity sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=
 
+supports-color@^3.1.0:
+  version "3.2.3"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-3.2.3.tgz#65ac0504b3954171d8a64946b2ae3cbb8a5f54f6"
+  integrity sha1-ZawFBLOVQXHYpklGsq48u4pfVPY=
+  dependencies:
+    has-flag "^1.0.0"
+
 supports-color@^5.3.0:
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
@@ -6056,6 +6286,14 @@ uglify-js@^2.6.0:
   optionalDependencies:
     uglify-to-browserify "~1.0.0"
 
+uglify-js@^3.1.4:
+  version "3.5.4"
+  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.5.4.tgz#4a64d57f590e20a898ba057f838dcdfb67a939b9"
+  integrity sha512-GpKo28q/7Bm5BcX9vOu4S46FwisbPbAmkkqPnGIpKvKTM96I85N6XHQV+k4I6FA2wxgLhcsSyHoNhzucwCflvA==
+  dependencies:
+    commander "~2.20.0"
+    source-map "~0.6.1"
+
 uglify-to-browserify@~1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/uglify-to-browserify/-/uglify-to-browserify-1.0.2.tgz#6e0924d6bda6b5afe349e39a6d632850a0f882b7"
@@ -6247,10 +6485,10 @@ w3c-hr-time@^1.0.1:
   dependencies:
     browser-process-hrtime "^0.1.2"
 
-w3c-xmlserializer@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/w3c-xmlserializer/-/w3c-xmlserializer-1.0.1.tgz#054cdcd359dc5d1f3ec9be4e272c756af4b21d39"
-  integrity sha512-XZGI1OH/OLQr/NaJhhPmzhngwcAnZDLytsvXnRmlYeRkmbb0I7sqFFA22erq4WQR0sUu17ZSQOAV9mFwCqKRNg==
+w3c-xmlserializer@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/w3c-xmlserializer/-/w3c-xmlserializer-1.1.2.tgz#30485ca7d70a6fd052420a3d12fd90e6339ce794"
+  integrity sha512-p10l/ayESzrBMYWRID6xbuCKh2Fp77+sA0doRuGn4tTIMrrZVeqfpKjXHY+oDh3K4nLdPgNwMTVP6Vp4pvqbNg==
   dependencies:
     domexception "^1.0.1"
     webidl-conversions "^4.0.2"
@@ -6276,6 +6514,11 @@ wcwidth@^1.0.1:
   dependencies:
     defaults "^1.0.3"
 
+webgl-distort@0.0.2:
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/webgl-distort/-/webgl-distort-0.0.2.tgz#80d2f61efc4aece28e7a1ff1375e14aac6d06f36"
+  integrity sha1-gNL2HvxK7OKOeh/xN14UqsbQbzY=
+
 webidl-conversions@^4.0.2:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-4.0.2.tgz#a855980b1f0b6b359ba1d5d9fb39ae941faa63ad"
@@ -6325,7 +6568,7 @@ which-module@^2.0.0:
   resolved "https://registry.yarnpkg.com/which-module/-/which-module-2.0.0.tgz#d9ef07dce77b9902b8a3a8fa4b31c3e3f7e6e87a"
   integrity sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=
 
-which@^1.2.14, which@^1.2.9, which@~1.3.0:
+which@^1.1.1, which@^1.2.14, which@^1.2.9, which@~1.3.0:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/which/-/which-1.3.1.tgz#a45043d54f5805316da8d62f9f50918d3da70b0a"
   integrity sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==
@@ -6359,16 +6602,16 @@ wordwrap@0.0.2:
   resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-0.0.2.tgz#b79669bb42ecb409f83d583cad52ca17eaa1643f"
   integrity sha1-t5Zpu0LstAn4PVg8rVLKF+qhZD8=
 
+wordwrap@^1.0.0, wordwrap@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb"
+  integrity sha1-J1hIEIkUVqQXHI0CJkQa3pDLyus=
+
 wordwrap@~0.0.2:
   version "0.0.3"
   resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-0.0.3.tgz#a3d5da6cd5c0bc0008d37234bbaf1bed63059107"
   integrity sha1-o9XabNXAvAAI03I0u68b7WMFkQc=
 
-wordwrap@~1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb"
-  integrity sha1-J1hIEIkUVqQXHI0CJkQa3pDLyus=
-
 wrap-ansi@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-2.1.0.tgz#d8fc3d284dd05794fe84973caecdd1cf824fdd85"
@@ -6382,10 +6625,10 @@ wrappy@1:
   resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
   integrity sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=
 
-ws@^6.1.2:
-  version "6.1.2"
-  resolved "https://registry.yarnpkg.com/ws/-/ws-6.1.2.tgz#3cc7462e98792f0ac679424148903ded3b9c3ad8"
-  integrity sha512-rfUqzvz0WxmSXtJpPMX2EeASXabOrSMk1ruMOV3JBTBjo4ac2lDjGGsbQSyxj8Odhw5fBib8ZKEjDNvgouNKYw==
+ws@^6.1.0, ws@^6.1.2:
+  version "6.2.1"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-6.2.1.tgz#442fdf0a47ed64f59b6a5d8ff130f4748ed524fb"
+  integrity sha512-GIyAXC2cB7LjvpgMt9EKS2ldqr0MTrORaleiOno6TweZ6r3TKtoFQWay/2PceJ3RuBasOHzXNn5Lrw1X0bEjqA==
   dependencies:
     async-limiter "~1.0.0"
 
@@ -6416,6 +6659,11 @@ xmlchars@^1.3.1:
   resolved "https://registry.yarnpkg.com/xmlchars/-/xmlchars-1.3.1.tgz#1dda035f833dbb4f86a0c28eaa6ca769214793cf"
   integrity sha512-tGkGJkN8XqCod7OT+EvGYK5Z4SfDQGD30zAa58OcnAa0RRWgzUEK72tkXhsX1FZd+rgnhRxFtmO+ihkp8LHSkw==
 
+xmldom@0.1.*:
+  version "0.1.27"
+  resolved "https://registry.yarnpkg.com/xmldom/-/xmldom-0.1.27.tgz#d501f97b3bdb403af8ef9ecc20573187aadac0e9"
+  integrity sha1-1QH5ezvbQDr4757MIFcxh6rawOk=
+
 xmlhttprequest-ssl@~1.5.4:
   version "1.5.5"
   resolved "https://registry.yarnpkg.com/xmlhttprequest-ssl/-/xmlhttprequest-ssl-1.5.5.tgz#c2876b06168aadc40e57d97e81191ac8f4398b3e"