fix UI functions (#330)

* fix UI functions

Signed-off-by: tech4GT <varun.gupta1798@gmail.com>

* Update package.json

.gitignore

@@ -33,6 +33,8 @@ node_modules/*
 # Optional REPL history
 .node_repl_history
 
+.DS_Store
+
 *.swp
 todo.txt
 test.js

CONTRIBUTING.md

@@ -12,6 +12,7 @@ Most contribution (we imagine) would be in the form of API-compatible modules, w
 * [Info File](#info-file)
 * [Ideas](#ideas)
 
+****
 
 ## Contribution ideas
 
@@ -27,24 +28,25 @@ If you find a bug please list it here, and help us develop Image Sequencer by [o
 
 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
 
+Module names, descriptions, and parameters are set in the `info.json` file -- [see below](#info-file).
+
 Any module must follow this basic format:
 
 ```js
 module.exports = function ModuleName(options,UI) {
-  options = options || {};
-  options.title = "Title of the Module";
-  UI.onSetup(options.step);
+
   var output;
+  // Module requirements have been simplified in version 3, see https://github.com/publiclab/image-sequencer/blob/master/CONTRIBUTING.md#contributing-modules
 
   function draw(input,callback) {
-    UI.onDraw(options.step);
 
-    var output = /*do something with the input*/ ;
+    var output = function(input){
+      /* do something with the input */
+      return input;
+    }
 
-    this.output = output;
-    options.step.output = output.src;
+    this.output = output(input); // run the output and assign it to this.output
     callback();
-    UI.onComplete(options.step);
   }
 
   return {
@@ -56,6 +58,58 @@ module.exports = function ModuleName(options,UI) {
 }
 ```
 
+Image Sequencer modules are designed to be run either in the browser or in a Node.js environment. For dynamically loaded modules, that means that any uses of `require()` to include an external library must be compiled using a system like `browserify` or `webpack` to ensure browser compatibility. An example of this can be found here:
+
+https://github.com/tech4gt/image-sequencer
+
+If you wish to offer a module without browser-compatibility, please indicate this in the returned `info` object as:
+
+module.exports = [
+  ModuleName,
+  { only: ['node'] }
+];
+
+If you believe that full cross-compatibility is possible, but need help, please open an issue on your module's issue tracker requesting assistance (and potentially link to it from an inline comment or the module description).
+
+Any Independent Module Must follow this basic format
+```js
+function ModuleName(options,UI) {
+
+  var output;
+
+  function draw(input,callback) {
+
+    var output = function(input){
+      /* do something with the input */
+      return input;
+    }
+
+    this.output = output(input); // run the output and assign it to this.output
+    callback();
+  }
+
+  return {
+    options: options,
+    draw: draw,
+    output: output,
+    UI: UI
+  };
+}
+
+  module.exports = [ModuleName,{
+      "name": "ModuleName",
+      "description": "",
+      "inputs": {
+        // inputs here
+      }
+      /* Info can be defined here or imported from a json file */
+      // require('./info.json') This only works in node
+      // In a module compiled with browserify or webpack, a require() can be used to
+      // load a standard info.json file.
+      ];
+```
+
+
 ### options
 
 The object `options` stores some important information. This is how you can accept
@@ -67,6 +121,28 @@ whether your module is being run on a browser.
 
 ### draw()
 
+To add a module to Image Sequencer, it must have a `draw` method; you can wrap an existing module to add them:
+
+* `module.draw(input, callback)`
+
+The `draw` method should accept an `input` parameter, which will be an object of the form:
+
+```js
+input = {
+  src: "datauri of an image here",
+  format: "jpeg/png/etc",
+  // utility functions
+  getPixels: "function to get Image pixels. Wrapper around https://npmjs.com/get-pixels",
+  savePixels: "function to save Image pixels. Wrapper around https://npmjs.com/save-pixels",
+  lodash: "wrapper around lodash library, https://github.com/lodash",
+  dataUriToBuffer: "wrapper around https://www.npmjs.com/package/data-uri-to-buffer",
+  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
+
+**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**
+
 The draw method is run every time the step is `run` using `sequencer.run()`.
 So any calculations must go **into** the `draw()` method's definition.
 
@@ -82,17 +158,17 @@ constant definitions must be done **outside** the `draw()` method's definition.
       format: "<png|jpeg|gif>"
     }
     ```
-* `callback` is a function which is responsible to tell the sequencer that the
-step has been "drawn".
+* `callback` is a function which is responsible to tell the sequencer that the step has been "drawn".
 
-When you have done your calculations and produced an image output, you are required
-to set `this.output` to an object similar to what the input object was, call
-`callback()`, and set `options.step.output` equal to the output DataURL
+When you have done your calculations and produced an image output, you are required to set `this.output` to an object similar to what the input object was, call `callback()`, and set `options.step.output` equal to the output DataURL
+
+* `progressObj` is an optional additional Object that can be passed in the format `draw(input, callback, progressObj)`, which handles the progress output; see [Progress reporting](#progress-reporting) below.
 
 ### UI Methods
 
-The module is responsible for emitting various events for the UI to capture. There are
-four events in all:
+The module is responsible for emitting various events for the UI to capture.
+
+There are four events in all:
 
 * `UI.onSetup(options.step)` must be emitted when the module is added. So it must be emitted outside the draw method's definition as shown above.
 * `UI.onDraw(options.step)` must be emitted whenever the `draw()` method is called. So it should ideally be the first line of the definition of the `draw` method.
@@ -100,26 +176,14 @@ four events in all:
 is ready. An argument, that is the DataURL of the output image must be passed in.
 * `UI.onRemove(options.step)` is emitted automatically and the module should not emit it.
 
-To add a module to Image Sequencer, it must have the following method; you can wrap an existing module to add them:
+### Name and description
 
-* `module.draw()`
-
-The `draw(input,callback)` method should accept an `input` parameter, which will be an object of the form:
-
-```js
-input = {
-  src: "datauri here",
-  format: "jpeg/png/etc"
-}
-```
-
-### options.title
-
-For display in the web-based UI, each module may also have a title `options.title`.
+For display in the web-based demo UI, set the `name` and `description` fields in the `info.json` file for the module.
 
 ## Info file
 
 All module folders must have an `info.json` file which looks like the following:
+
 ```json
 {
   "name": "Name of Module to be displayed",
@@ -155,6 +219,45 @@ Similarly, "Select" type inputs should have a `values` array.
 
 Also, A module may have output values. These must be defined as shown above.
 
+### Progress reporting
+
+The default "loading spinner" can be optionally overriden with a custom progress object to draw progress on the CLI, following is a basic module format for the same:
+
+```js
+module.exports = function ModuleName(options,UI) {
+
+  var output;
+
+  function draw(input,callback,progressObj) {
+
+    /* If you wish to supply your own progress bar you need to override progressObj */
+    progressObj.stop() // Stop the current progress spinner
+
+    progressObj.overrideFlag = true; // Tell image sequencer that you will supply your own progressBar
+
+    /* Override the object and give your own progress Bar */
+    progressObj = /* Your own progress Object */
+
+    var output = function(input){
+      /* do something with the input */
+      return input;
+    };
+
+    this.output = output();
+    callback();
+  }
+
+  return {
+    options: options,
+    draw: draw,
+    output: output,
+    UI: UI
+  }
+}
+```
+
+The `progressObj` parameter of `draw()` is not consumed unless a custom progress bar needs to be drawn, for which this default spinner should be stopped with `progressObj.stop()` and image-sequencer is informed about the custom progress bar with `progressObj.overrideFlag = true;` following which this object can be overriden with custom progress object.
+
 ### Module example
 
 See existing module `green-channel` for an example: https://github.com/publiclab/image-sequencer/tree/master/src/modules/GreenChannel/Module.js
@@ -162,3 +265,70 @@ See existing module `green-channel` for an example: https://github.com/publiclab
 The `green-channel` module is included into the core modules here: https://github.com/publiclab/image-sequencer/blob/master/src/Modules.js#L5-L7
 
 For help integrating, please open an issue.
+
+## Meta Module
+
+IMAGE SEQUENCER supports "meta modules" -- modules made of other modules. The syntax and structure of these meta modules is very similar to standard modules. Sequencer can also genarate meta modules dynamically with the function `createMetaModule` which can be called in the following ways
+
+```js
+// stepsString is a stringified sequence
+sequencer.createMetaModule(stepsString,info)
+
+/* stepsArray is the array of objects in this format
+* [
+*   {name: "moduleName",options: {}},
+*   {name: "moduleName",options: {}}
+* ]
+*/
+sequencer.createMetaModule(stepsArray,info)
+```
+
+A Meta module can also be contributed like a normal module with an info and a Module.js. A basic Meta module shall follow the following format
+
+
+```js
+// Module.js
+module.exports = function metaModuleFun(){
+  this.expandSteps([
+    { 'name': 'module-name', 'options': {} },
+    { 'name': 'module-name', options: {} }
+    ]);
+}
+```
+
+```json
+// Info
+{
+  "name": "meta-moduleName",
+  "description": "",
+  "length": //Integer representing number of steps in the metaModule
+}
+```
+
+```js
+//index.js
+module.exports = [
+  require('./Module.js'),
+  require('./info.json')
+]
+```
+
+All of the above can also be combined together to form a single file module.
+
+```js
+// MetaModule.js
+module.export = [
+  function (){
+  this.expandSteps([
+    { 'name': 'module-name', 'options': {} },
+    { 'name': 'module-name', options: {} }
+    ]);
+  },
+  {
+  "name": "meta-moduleName",
+  "description": "",
+  "length": //Integer representing number of steps in the metaModule
+  }
+]
+```
+The length is absolutely required for a meta-module, since sequencer is optimized to re-run minimum number of steps when a step is added in the UI which is 1 in the case of normal modules, if the added step is a meta-module the length of the sequence governs the number of steps to re-run.

Gruntfile.js

@@ -1,50 +1,50 @@
 module.exports = function(grunt) {
+  grunt.loadNpmTasks("grunt-browserify");
+  grunt.loadNpmTasks("grunt-contrib-uglify-es");
+  grunt.loadNpmTasks("grunt-browser-sync");
 
-    grunt.loadNpmTasks('grunt-browserify');
-    grunt.loadNpmTasks('grunt-contrib-uglify');
+  require("matchdep")
+    .filterDev("grunt-*")
+    .forEach(grunt.loadNpmTasks);
 
-    require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);
+  grunt.initConfig({
+    pkg: grunt.file.readJSON("package.json"),
 
-    grunt.initConfig({
-
-      pkg: grunt.file.readJSON('package.json'),
-
-      watch: {
-          options : {
-              livereload: true
-          },
-          source: {
-              files: [
-                  'src/*.js',
-                  'src/*/*.js',
-                  'Gruntfile.js'
-              ],
-              tasks: [ 'build:js' ]
-          }
+    watch: {
+      options: {
+        livereload: true
       },
+      source: {
+        files: ["src/**/*", "Gruntfile.js"],
+        tasks: ["build:js"]
+      }
+    },
 
-      browserify: {
-          dist: {
-            src: ['src/ImageSequencer.js'],
-            dest: 'dist/image-sequencer.js'
-          }
-      },
+    browserify: {
+      dist: {
+        src: ["src/ImageSequencer.js"],
+        dest: "dist/image-sequencer.js"
+      }
+    },
 
-      uglify: {
-        dist: {
-          src: ['./dist/image-sequencer.js'],
-          dest: './dist/image-sequencer.min.js'
+    uglify: {
+      dist: {
+        src: ["./dist/image-sequencer.js"],
+        dest: "./dist/image-sequencer.min.js"
+      }
+    },
+    browserSync: {
+      dev: {
+        options: {
+          watchTask: true,
+          server: "./"
         }
       }
+    }
+  });
 
-    });
-
-    /* Default (development): Watch files and build on change. */
-    grunt.registerTask('default', ['watch']);
-
-    grunt.registerTask('build', [
-        'browserify:dist',
-        'uglify:dist'
-    ]);
-
+  /* Default (development): Watch files and build on change. */
+  grunt.registerTask("default", ["watch"]);
+  grunt.registerTask("build", ["browserify:dist", "uglify:dist"]);
+  grunt.registerTask("serve", ["browserify:dist", "uglify:dist", "browserSync", "watch"]);
 };

README.md

@@ -41,10 +41,11 @@ A diagram of this running 5 steps on a single sample image may help explain how
 * [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)
+* [Get Demo Bookmarklet](https://publiclab.org/w/imagesequencerbookmarklet)
 
 ## Installation
 
-This library works in the browser, in Node, and on the commandline (CLI), which we think is great. 
+This library works in the browser, in Node, and on the commandline (CLI), which we think is great. You can start a local environement to test the UI with `npm start`
 
 ### Browser
 
@@ -65,6 +66,11 @@ $ npm install image-sequencer -g
 
 (You should have Node.JS and NPM for this.)
 
+### To run the debug script
+
+```
+$ npm run debug invert
+```
 
 ## Quick Usage
 
@@ -95,10 +101,13 @@ Image Sequencer also provides a CLI for applying operations to local files. The
 
     -i  | --image [PATH/URL] | Input image URL. (required)
     -s  | --step [step-name] | Name of the step to be added. (required)
+    -b  | --basic            | Basic mode only outputs the final image
     -o  | --output [PATH]    | Directory where output will be stored. (optional)
-    -op | --opions {object}  | Options for the step. (optional)
+    -c  | --config {object} | Options for the step. (optional)
+    --save-sequence [string] | Name space separated with Stringified sequence to save
+    --install-module [string] | Module name space seaprated npm package name
 
-The basic format for using the CLI is as follows: 
+The basic format for using the CLI is as follows:
 
 ```
     $ ./index.js -i [PATH] -s step-name
@@ -114,6 +123,31 @@ The CLI also can take multiple steps at once, like so:
 
 But for this, double quotes must wrap the space-separated steps.
 
+Options for the steps can be passed in one line as json in the details option like
+```
+$ ./index.js -i [PATH] -s "brightness" -c '{"brightness":50}'
+
+```
+Or the values can be given through terminal prompt like
+
+<img width="1436" alt="screen shot 2018-02-14 at 5 18 50 pm" src="https://user-images.githubusercontent.com/25617855/36202790-3c6e8204-11ab-11e8-9e17-7f3387ab0158.png">
+
+`save-sequence` option can be used to save a sequence and the associated options for later usage. You should provide a string which contains a name of the sequence space separated from the sequence of steps which constitute it.
+```shell
+sequencer --save-sequence "invert-colormap invert(),colormap()"
+```
+
+`install-module` option can be used to install new modules from npm. You can register this module in your sequencer with a custom name space sepated with the npm package name. Below is an example for the `image-sequencer-invert` module.
+```shell
+sequencer --install-module "invert image-sequencer-invert"
+```
+
+The CLI is also chainable with other commands using `&&`
+
+```
+sequencer -i <Image Path> -s <steps> && mv <Output Image Path> <New path>
+```
+
 ## Classic Usage
 
 ### Initializing the Sequencer
@@ -181,13 +215,35 @@ modules.
 sequencer.run();
 ```
 
-Additionally, an optional callback can be passed to this method.
+Sequencer can be run with a custom config object
 
 ```js
-sequencer.run(function(out){
+// The config object enables custom progress bars in node environment and
+// ability to run the sequencer from a particular index(of the steps array)
+
+sequencer.run(config);
+
+```
+
+The config object can have the following keys
+
+```js
+config: {
+  progressObj: , //A custom object to handle progress bar
+  index: //Index to run the sequencer from (defaults to 0)
+}
+```
+
+Additionally, an optional callback function can be passed to this method.
+
+```js
+sequencer.run(function callback(out){
   // this gets called back.
   // "out" is the DataURL of the final image.
 });
+sequencer.run(config,function callback(out){
+  // the callback is supported with all types of invocations
+});
 ```
 
 return value: **`sequencer`** (To allow method chaining)
@@ -232,8 +288,18 @@ sequencer.insertSteps(index,module_name,optional_options);
 
 return value: **`sequencer`** (To allow method chaining)
 
+### Importing an independent module
+
+The `loadNewModule` method can be used to import a new module inside sequencer. Modules can be downloaded via npm, yarn or cdn and are imported with a custom name. If you wish to load a new module at runtime, it will need to avoid using `require()` -- unless it is compiled with a system like browserify or webpack.
+
+```js
+const module = require('sequencer-moduleName')
+sequencer.loadNewModule('moduleName',module);
+```
+
 
 ## Method Chaining
+
 Methods can be chained on the Image Sequencer:
 * loadImage()/loadImages() can only terminate a chain.
 * run() can not be in the middle of the chain.
@@ -406,6 +472,47 @@ sequencer.insertSteps({
 ```
 return value: **`sequencer`** (To allow method chaining)
 
+## Saving Sequences
+
+IMAGE SEQUENCER supports saving a sequence of modules and their associated settings in a simple string syntax. These sequences can be saved in the local storage inside the browser and inside a json file in node.js. sequences can be saved in node context using the CLI option
+
+```shell
+--save-sequence "name stringified-sequence"
+```
+
+In Node and the browser the following function can be used
+```js
+sequencer.saveSequence(name,sequenceString)
+```
+
+The function `sequencer.loadModules()` reloads the modules and the saved sequences into `sequencer.modules` and `sequencer.sequences`
+
+
+## String syntax
+
+Image sequencer supports stringifying a sequence which is appended to the url and hence can then be shared. An example below shows the string syntax for `channel` and `invert` module
+```
+channel{channel:green},invert{}
+```
+
+Sequencer also supports use of `()` in place of `{}` for backwards compatibility with older links.(This syntax is deprecated and should be avoided as far as possible)
+```
+channel(channel:green),invert()
+```
+
+Following are the core API functions that can be used to stringify and jsonify steps.
+```js
+sequencer.toString() //returns the stringified sequence of current steps
+sequencer.toJSON(str) // returns the JSON for the current sequence
+sequencer.stringToJSON(str) // returns the JSON for given stringified sequence
+sequencer.importString(str) //Imports the sequence of steps into sequencer
+sequencer.importJSON(obj) //Imports the given sequence of JSON steps into sequencer
+```
+
+Image Sequencer can also generate a string for usage in the CLI for the current sequence of steps:
+```js
+sequencer.toCliString()
+```
 
 ## Creating a User Interface
 

examples/demo.css

@@ -45,7 +45,7 @@ h1 {
 }
 
 #dropzone input {
-  max-width: 100%;  
+  max-width: 100%;
 }
 
 .step {
@@ -76,6 +76,15 @@ h1 {
   margin: 10px 0;
 }
 
+.load {
+  padding: 30px;
+  background: #eee;
+  border-radius: 8px;
+  text-align: center;
+  font-size: 2em;
+  color: #444;
+}
+
 #addStep {
   max-width: 500px;
   margin: 20px auto;
@@ -98,3 +107,7 @@ h1 {
   text-align: center;
   margin: 10px;
 }
+#save-seq {
+  display: block;
+  margin: 0 auto;
+}

examples/demo.js

@@ -1,179 +1,49 @@
 window.onload = function() {
-
   sequencer = ImageSequencer();
 
-  // Load information of all modules (Name, Inputs, Outputs)
-  var modulesInfo = sequencer.modulesInfo();
+  function refreshOptions() {
+    // Load information of all modules (Name, Inputs, Outputs)
+    var modulesInfo = sequencer.modulesInfo();
 
-  // Add modules to the addStep dropdown
-  for(var m in modulesInfo) {
-    $('#addStep select').append(
-      '<option value="'+m+'">'+modulesInfo[m].name+'</option>'
-    );
-  }
+    var addStepSelect = $("#addStep select");
+    addStepSelect.html("");
 
-  // Initial definitions
-  var steps = document.querySelector('#steps');
-  var parser = new DOMParser();
-  var reader = new FileReader();
-
-  // Set the UI in sequencer. This Will generate HTML based on
-  // Image Sequencer events :
-  // onSetup : Called every time a step is added
-  // onDraw : Called every time a step starts draw
-  // onComplete : Called every time a step finishes drawing
-  // onRemove : Called everytime a step is removed
-  // The variable 'step' stores useful data like input and
-  // output values, step information.
-  // See documetation for more details.
-  sequencer.setUI({
-
-    onSetup: function(step) {
-
-      if (step.options && step.options.description) step.description = step.options.description
-
-      step.ui = '\
-      <div class="row step">\
-        <div class="col-md-4 details">\
-          <h3>'+step.name+'</h3>\
-          <p><i>'+(step.description || '')+'</i></p>\
-        </div>\
-        <div class="col-md-8">\
-          <img alt="" class="img-thumbnail"/>\
-        </div>\
-      </div>\
-      ';
-
-      var tools =
-      '<div class="tools btn-group">\
-         <button confirm="Are you sure?" class="remove btn btn-xs btn-default">\
-           <i class="fa fa-trash"></i>\
-         </button>\
-      </div>';
-
-      step.ui = parser.parseFromString(step.ui,'text/html');
-      step.ui = step.ui.querySelector('div.row');
-      step.imgElement = step.ui.querySelector('img');
-
-      if(sequencer.modulesInfo().hasOwnProperty(step.name)) {
-        var inputs = sequencer.modulesInfo(step.name).inputs;
-        var outputs = sequencer.modulesInfo(step.name).outputs;
-        var io = Object.assign(inputs, outputs);
-        for (var i in io) {
-          var div = document.createElement('div');
-          div.className = "row";
-          div.setAttribute('name', i);
-          div.innerHTML = "<div class='det'>\
-                             <label for='" + i + "'>" + i + "</label>\
-                             <input name=" + i + " class='form-control' style='width:50%' type='text' />\
-                           </div>";
-          step.ui.querySelector('div.details').appendChild(div);
-        }
-        $(step.ui.querySelector('div.details')).append("<p><button class='btn btn-default btn-save'>Save</button></p>");
-
-        // on clicking Save in the details pane of the step
-        $(step.ui.querySelector('div.details .btn-save')).click(function saveOptions() {
-          $(step.ui.querySelector('div.details')).find('input').each(function(i, input) {
-            step.options[$(input).attr('name')] = input.value;
-          });
-          sequencer.run();
-        });
-      }
-
-      if(step.name != "load-image")
-        step.ui.querySelector('div.details').appendChild(
-          parser.parseFromString(tools,'text/html')
-                .querySelector('div')
-        );
-
-      steps.appendChild(step.ui);
-    },
-
-    onComplete: function(step) {
-      step.imgElement.src = step.output;
-      if(sequencer.modulesInfo().hasOwnProperty(step.name)) {
-        var inputs = sequencer.modulesInfo(step.name).inputs;
-        var outputs = sequencer.modulesInfo(step.name).outputs;
-        for (var i in inputs) {
-          if (step.options[i] !== undefined) step.ui.querySelector('div[name="'+i+'"] input')
-                                                 .value = step.options[i];
-        }
-        for (var i in outputs) {
-          if (step[i] !== undefined) step.ui.querySelector('div[name="'+i+'"] input')
-                                         .value = step[i];
-        }
-      }
-    },
-
-    onRemove: function(step) {
-      step.ui.remove();
-    }
-
-  });
-
-  sequencer.loadImage('images/tulips.png', function loadImageUI(){
-
-    // look up needed steps from Url Hash:
-    var stepsFromHash = getUrlHashParameter('steps').split(',')
-    stepsFromHash.forEach(function eachStep(step) {
-      sequencer.addSteps(step)
-    });
-    sequencer.run();
-
-  });
-
-
-  // File handling
-
-  $('#addStep select').on('change', selectNewStepUI);
-
-  function selectNewStepUI() {
-    $('#options').html('');
-    var m = $('#addStep select').val();
-    for(var input in modulesInfo[m].inputs) {
-      $('#options').append(
-        '<div class="row">\
-           <div class="col-md-5 labels">\
-             '+input+':\
-           </div>\
-           <div class="col-md-5">\
-             <input class="form-control" type="text" name="'+input+'" value="" placeholder="'+
-             modulesInfo[m].inputs[input].default+'"/>\
-           </div>\
-         </div>'
+    // Add modules to the addStep dropdown
+    for (var m in modulesInfo) {
+      addStepSelect.append(
+        '<option value="' + m + '">' + modulesInfo[m].name + "</option>"
       );
     }
   }
+  refreshOptions();
 
+  // UI for each step:
+  sequencer.setUI(DefaultHtmlStepUi(sequencer));
 
-  function addStepUI() {
-    var options = {};
-    var inputs = $('#options input');
-    $.each(inputs, function() {
-      options[this.name] = $(this).val();
-    });
-    if($('#addStep select').val()=="none") return;
-    // add to URL hash too
-    setUrlHashParameter('steps', getUrlHashParameter('steps') + ',' + $('#addStep select').val())
-    sequencer.addSteps($('#addStep select').val(),options).run();
-  }
+  // UI for the overall demo:
+  var ui = DefaultHtmlSequencerUi(sequencer);
 
-  $('#addStep button').on('click', addStepUI);
-
-
-  function removeStepUI(){
-    var index = $('button.remove').index(this) + 1;
-    sequencer.removeSteps(index).run();
-    // remove from URL hash too
-    var urlHash = getUrlHashParameter('steps').split(',');
-    urlHash.splice(index - 1, 1);
-    setUrlHashParameter("steps", urlHash.join(','));
-  }
-
-  $('body').on('click','button.remove', removeStepUI);
+  sequencer.loadImage("images/tulips.png", ui.onLoad);
 
+  $("#addStep select").on("change", ui.selectNewStepUi);
+  $("#addStep button").on("click", ui.addStepUi);
+  $('body').on('click', 'button.remove', ui.removeStepUi);
+  $('#save-seq').click(() => {
+    sequencer.saveSequence(window.prompt("Please give a name to your sequence..."), sequencer.toString());
+    sequencer.loadModules();
+    refreshOptions();
+  });
 
   // image selection and drag/drop handling from examples/lib/imageSelection.js
-  setupFileHandling(sequencer);
-
-}
+  sequencer.setInputStep({
+    dropZoneSelector: "#dropzone",
+    fileInputSelector: "#fileInput",
+    onLoad: function onFileReaderLoad(progress) {
+      var reader = progress.target;
+      var step = sequencer.images.image1.steps[0];
+      step.output.src = reader.result;
+      sequencer.run({ index: 0 });
+      step.options.step.imgElement.src = reader.result;
+    }
+  });
+};

examples/fisheye.html

@@ -29,6 +29,7 @@
       }
     </style>
 
+    <script src="../node_modules/jquery/dist/jquery.min.js"></script>
     <script src="../dist/image-sequencer.js"></script>
   </head>
 

examples/index.html

@@ -3,68 +3,94 @@
 <html>
 
 
-  <head>
+<head>
 
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="content-type" content="text/html; charset=UTF8">
-
-    <title>Image Sequencer</title>
-
-    <script src="../node_modules/jquery/dist/jquery.min.js"></script>
-    <script src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
-    <script src="../dist/image-sequencer.js" charset="utf-8"></script>
-    <script src="lib/urlHash.js" charset="utf-8"></script>
-    <script src="lib/imageSelection.js" charset="utf-8"></script>
-    <script src="demo.js" charset="utf-8"></script>
-
-  </head>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="content-type" content="text/html; charset=UTF8">
+  <link rel="icon" sizes="192x192" href="../icons/ic_192.png">
 
 
-  <body>
+  <title>Image Sequencer</title>
 
-    <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">
+  <script src="../node_modules/jquery/dist/jquery.min.js"></script>
+  <script src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
+  <script src="../src/ui/prepareDynamic.js"></script>
+  <script src="../dist/image-sequencer.js" charset="utf-8"></script>
+  <script src="lib/urlHash.js" charset="utf-8"></script>
+  <script src="lib/defaultHtmlStepUi.js" charset="utf-8"></script>
+  <script src="lib/defaultHtmlSequencerUi.js" charset="utf-8"></script>
+  <script src="demo.js" charset="utf-8"></script>
+  <!-- for crop module: -->
+  <script src="../node_modules/imgareaselect/jquery.imgareaselect.dev.js"></script>
 
-    <div class="container-fluid">
+</head>
 
-      <header class="text-center">
-        <h1>Image Sequencer</h1>
-        <p>
-          Open Source <a href="https://github.com/publiclab/image-sequencer"><i class="fa fa-github"></i></a> by <a href="https://publiclab.org">Public Lab</a>
-        </p>
-      </header>
 
-      <div id="dropzone">
-        <p><i>Select or drag in an image to start!</i></p>
-        <center><input type="file" id="fileInput" value=""></center>
-      </div>
+<body>
 
-      <section id="steps" class="row"></section>
+  <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 href="../node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
+  <link href="../node_modules/font-awesome/css/font-awesome.min.css" rel="stylesheet">
+  <!-- for crop module: -->
+  <link href="../node_modules/imgareaselect/distfiles/css/imgareaselect-default.css" rel="stylesheet">
+  <link rel="stylesheet" href="demo.css">
 
-      <section id="addStep">
-        <div class="row">
-          <select class="form-control">
-            <option value="none" disabled selected>Select a new step...</option>
-          </select>
-        </div>
-        <hr />
-        <div class="row">
-          <div id="options"></div>
-        </div>
-        <div class="row add">
-          <button class="btn btn-success btn-lg" name="add">Add Step</button>
-        </div>
-      </section>
+  <div class="container-fluid">
 
+    <header class="text-center">
+      <h1>Image Sequencer</h1>
+      <p>
+        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>
+      <p>
+        Open Source
+        <a href="https://github.com/publiclab/image-sequencer">
+          <i class="fa fa-github"></i>
+        </a> by
+        <a href="https://publiclab.org">Public Lab</a>
+      </p>
+    </header>
+
+    <div id="dropzone">
+      <p>
+        <i>Select or drag in an image to start!</i>
+      </p>
+      <center>
+        <input type="file" id="fileInput" value="">
+      </center>
     </div>
 
-    <script type="text/javascript">
+    <section id="steps" class="row"></section>
 
+    <hr />
+
+    <section id="addStep" class="panel panel-primary">
+      <div class="form-inline">
+        <div class="panel-body">
+          <div style="text-align:center;">
+            <select class="form-control input-lg" id="selectStep">
+              <option value="none" disabled selected>Select a new step...</option>
+            </select>
+            <button class="btn btn-success btn-lg" name="add">Add Step</button>
+          </div>
+          <br />
+          <p class="info" style="padding:8px;">Select a new module to add to your sequence.</p>
+        </div>
+      </div>
+    </section>
+    <button class="btn btn-primary btn-lg" name="save-sequence" id="save-seq">Save Sequence</button>
+
+  </div>
+
+  <script type="text/javascript">
+    $(function() {
       var sequencer;
+    })
+  </script>
 
-    </script>
+</body>
 
-  </body>
-
-</html>
+</html>

examples/lib/defaultHtmlSequencerUi.js

@@ -0,0 +1,69 @@
+function DefaultHtmlSequencerUi(_sequencer, options) {
+
+  options = options || {};
+  var addStepSel = options.addStepSel = options.addStepSel || "#addStep";
+  var removeStepSel = options.removeStepSel = options.removeStepSel || "button.remove";
+  var selectStepSel = options.selectStepSel = options.selectStepSel || "#selectStep";
+
+  function onLoad() {
+    importStepsFromUrlHash();
+    if (!$('#selectStep').val())
+      $(addStepSel + " button").prop("disabled", true);
+  }
+
+  // look up needed steps from Url Hash:
+  function importStepsFromUrlHash() {
+    var hash = getUrlHashParameter("steps");
+
+    if (hash) {
+      _sequencer.importString(hash);
+      _sequencer.run({ index: 0 });
+    }
+    setUrlHashParameter("steps", sequencer.toString());
+  }
+
+  function selectNewStepUi() {
+    var m = $(addStepSel + " select").val();
+    $(addStepSel + " .info").html(_sequencer.modulesInfo(m).description);
+    $(addStepSel + " button").prop("disabled", false);
+  }
+
+  function removeStepUi() {
+    var index = $(removeStepSel).index(this) + 1;
+    sequencer.removeSteps(index).run({ index: index - 1 });
+    // remove from URL hash too
+    setUrlHashParameter("steps", sequencer.toString());
+  }
+
+  function addStepUi() {
+    if ($(addStepSel + " select").val() == "none") return;
+
+    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
+    * length - 2 of the drawarray
+    */
+    var sequenceLength = 1;
+    if (sequencer.sequences[newStepName]) {
+      sequenceLength = sequencer.sequences[newStepName].length;
+    } else if (sequencer.modules[newStepName][1]["length"]) {
+      sequenceLength = sequencer.modules[newStepName][1]["length"];
+    }
+    _sequencer
+      .addSteps(newStepName, options)
+      .run({ index: _sequencer.images.image1.steps.length - sequenceLength - 1 });
+
+    // add to URL hash too
+    setUrlHashParameter("steps", _sequencer.toString());
+  }
+
+  return {
+    onLoad: onLoad,
+    importStepsFromUrlHash: importStepsFromUrlHash,
+    selectNewStepUi: selectNewStepUi,
+    removeStepUi: removeStepUi,
+    addStepUi: addStepUi
+  }
+}

examples/lib/defaultHtmlStepUi.js

@@ -0,0 +1,194 @@
+// Set the UI in sequencer. This Will generate HTML based on
+// Image Sequencer events :
+// onSetup : Called every time a step is added
+// onDraw : Called every time a step starts draw
+// onComplete : Called every time a step finishes drawing
+// onRemove : Called everytime a step is removed
+// The variable 'step' stores useful data like input and
+// output values, step information.
+// See documetation for more details.
+function DefaultHtmlStepUi(_sequencer, options) {
+
+  options = options || {};
+  var stepsEl = options.stepsEl || document.querySelector("#steps");
+  var selectStepSel = options.selectStepSel = options.selectStepSel || "#selectStep";
+
+  function onSetup(step) {
+    if (step.options && step.options.description)
+      step.description = step.options.description;
+
+    step.ui =
+      '\
+    <div class="row step">\
+    <div class="col-md-4 details">\
+    <h3>' +
+      step.name +
+      "</h3>\
+    <p><i>" +
+      (step.description || "") +
+      '</i></p>\
+    </div>\
+    <div class="col-md-8">\
+    <div class="load" style="display:none;"><i class="fa fa-circle-o-notch fa-spin"></i></div>\
+    <a><img alt="" style="max-width=100%" class="img-thumbnail" /></a>\
+    </div>\
+    </div>\
+    ';
+
+    var tools =
+      '<div class="tools btn-group">\
+       <button confirm="Are you sure?" class="remove btn btn btn-default">\
+         <i class="fa fa-trash"></i>\
+       </button>\
+    </div>';
+
+    var parser = new DOMParser();
+    step.ui = parser.parseFromString(step.ui, "text/html");
+    step.ui = step.ui.querySelector("div.row");
+    step.linkElement = step.ui.querySelector("a");
+    step.imgElement = step.ui.querySelector("a img");
+
+    if (_sequencer.modulesInfo().hasOwnProperty(step.name)) {
+      var inputs = _sequencer.modulesInfo(step.name).inputs;
+      var outputs = _sequencer.modulesInfo(step.name).outputs;
+      var merged = Object.assign(inputs, outputs); // combine outputs w inputs
+
+      for (var paramName in merged) {
+        var isInput = inputs.hasOwnProperty(paramName);
+        var html = "";
+        var inputDesc = isInput ? inputs[paramName] : {};
+        if (!isInput) {
+          html += '<span class="output"></span>';
+        } else if (inputDesc.type.toLowerCase() == "select") {
+          html += '<select class="form-control target" name="' + paramName + '">';
+          for (var option in inputDesc.values) {
+            html += "<option>" + inputDesc.values[option] + "</option>";
+          }
+          html += "</select>";
+        } else {
+          html =
+            '<input class="form-control target" type="' +
+            inputDesc.type +
+            '" name="' +
+            paramName +
+            '">';
+        }
+
+        var div = document.createElement("div");
+        div.className = "row";
+        div.setAttribute("name", paramName);
+        var description = inputs[paramName].desc || paramName;
+        div.innerHTML =
+          "<div class='det'>\
+                           <label for='" +
+          paramName +
+          "'>" +
+          description +
+          "</label>\
+                           " +
+          html +
+          "\
+                         </div>";
+        step.ui.querySelector("div.details").appendChild(div);
+      }
+
+      function toggleSaveButton(){
+        $(step.ui.querySelector("div.details .btn-save")).prop("disabled",false);
+      }
+
+      $(step.ui.querySelector(".target")).change(toggleSaveButton);
+
+      $(step.ui.querySelector("div.details")).append(
+        "<p><button class='btn btn-default btn-save' disabled = 'true' >Save</button><span> Press save to see changes</span></p>"
+      );
+
+      function saveOptions() {
+        $(step.ui.querySelector("div.details"))
+          .find("input,select")
+          .each(function(i, input) {
+            step.options[$(input).attr("name")] = input.value;
+          });
+        _sequencer.run({ index: step.index - 1 });
+
+        // modify the url hash
+        setUrlHashParameter("steps", _sequencer.toString());
+        // disable the save button
+        $(step.ui.querySelector("div.details .btn-save")).prop("disabled",true);
+      }
+
+      // on clicking Save in the details pane of the step
+      $(step.ui.querySelector("div.details .btn-save")).click(saveOptions);
+    }
+
+    if (step.name != "load-image")
+      step.ui
+        .querySelector("div.details")
+        .appendChild(
+          parser.parseFromString(tools, "text/html").querySelector("div")
+        );
+
+    stepsEl.appendChild(step.ui);
+  }
+
+  function onDraw(step) {
+    $(step.ui.querySelector(".load")).show();
+    $(step.ui.querySelector("img")).hide();
+  }
+
+  function onComplete(step) {
+    $(step.ui.querySelector(".load")).hide();
+    $(step.ui.querySelector("img")).show();
+
+    step.imgElement.src = step.output;
+    step.linkElement.href = step.output;
+
+    // TODO: use a generalized version of this
+    function fileExtension(output) {
+      return output.split("/")[1].split(";")[0];
+    }
+
+    step.linkElement.download = step.name + "." + fileExtension(step.output);
+    step.linkElement.target = "_blank";
+
+    // fill inputs with stored step options
+    if (_sequencer.modulesInfo().hasOwnProperty(step.name)) {
+      var inputs = _sequencer.modulesInfo(step.name).inputs;
+      var outputs = _sequencer.modulesInfo(step.name).outputs;
+      for (var i in inputs) {
+        if (
+          step.options[i] !== undefined &&
+          inputs[i].type.toLowerCase() === "input"
+        )
+          step.ui.querySelector('div[name="' + i + '"] input').value =
+            step.options[i];
+        if (
+          step.options[i] !== undefined &&
+          inputs[i].type.toLowerCase() === "select"
+        )
+          step.ui.querySelector('div[name="' + i + '"] select').value =
+            step.options[i];
+      }
+      for (var i in outputs) {
+        if (step[i] !== undefined)
+          step.ui.querySelector('div[name="' + i + '"] input').value =
+            step[i];
+      }
+    }
+  }
+
+  function onRemove(step) {
+    step.ui.remove();
+  }
+
+  function getPreview() {
+    return step.imgElement;
+  }
+
+  return {
+    getPreview: getPreview,
+    onSetup: onSetup,
+    onComplete: onComplete,
+    onRemove: onRemove,
+    onDraw: onDraw
+  }
+}

examples/lib/imageSelection.js

@@ -1,46 +0,0 @@
-function setupFileHandling(_sequencer, dropzoneId, fileInputId) {
-
-  dropzoneId = dropzoneId || "dropzone";
-  var dropzone = $('#' + dropzoneId);
-
-  fileInputId = fileInputId || "fileInput";
-  var fileInput = $('#' + fileInputId);
-
-  function handleFile(e) {
-
-    e.preventDefault();
-    e.stopPropagation(); // stops the browser from redirecting.
-
-    if (e.target && e.target.files) var file = e.target.files[0];
-    else var file = e.dataTransfer.files[0];
-    if(!file) return;
-
-    reader.onload = function onFileReaderLoad() {
-      var loadStep = _sequencer.images.image1.steps[0];
-      loadStep.output.src = reader.result;
-      _sequencer.run(0);
-      loadStep.options.step.imgElement.src = reader.result;
-    }
-
-    reader.readAsDataURL(file);
-  }
-
-  fileInput.on('change', handleFile);
-
-  dropzone[0].addEventListener('drop', handleFile, false);
-
-  dropzone.on('dragover', function onDragover(e) {
-    e.stopPropagation();
-    e.preventDefault();
-    e.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
-  }, false);
-
-  dropzone.on('dragenter', function onDragEnter(e) {
-    dropzone.addClass('hover');
-  });
-
-  dropzone.on('dragleave', function onDragLeave(e) {
-    dropzone.removeClass('hover');
-  });
-
-}

index.js

@@ -1,10 +1,11 @@
 #!/usr/bin/env node
 
-require('./src/ImageSequencer');
-sequencer = ImageSequencer({ui: false});
+require("./src/ImageSequencer");
+sequencer = ImageSequencer({ ui: false });
+var Spinner = require("ora");
 
-var program = require('commander');
-var readlineSync = require('readline-sync');
+var program = require("commander");
+var readlineSync = require("readline-sync");
 
 function exit(message) {
   console.error(message);
@@ -12,100 +13,193 @@ function exit(message) {
 }
 
 program
-  .version('0.1.0')
-  .option('-i, --image [PATH/URL]', 'Input image URL')
-  .option('-s, --step [step-name]', 'Name of the step to be added.')
-  .option('-o, --output [PATH]', 'Directory where output will be stored.')
-  .option('-op, --opions {object}', 'Options for the step')
+  .version("0.1.0")
+  .option("-i, --image [PATH/URL]", "Input image URL")
+  .option("-s, --step [step-name]", "Name of the step to be added.")
+  .option("-o, --output [PATH]", "Directory where output will be stored.")
+  .option("-b, --basic", "Basic mode outputs only final image")
+  .option("-c, --config [Object]", "Options for the step")
+  .option("--save-sequence [string]", "Name space separated with Stringified sequence")
+  .option('--install-module [string]', "Module name space seaprated npm package name")
   .parse(process.argv);
 
-// Parse step into an array to allow for multiple steps.
-program.step = program.step.split(" ");
+if (program.saveSequence) {
+  var params = program.saveSequence.split(' ');
+  sequencer.saveSequence(params[0], params[1]);
+} else if (program.installModule) {
+  var params = program.installModule.split(' ');
+  var spinner = Spinner("Now Installing...").start();
+  require('child_process').execSync(`npm i ${params[1]}`)
+  sequencer.saveNewModule(params[0], params[1]);
+  sequencer.loadNewModule(params[0], require(params[1]));
+  spinner.stop();
+} else {
+  // Parse step into an array to allow for multiple steps.
+  if (!program.step) exit("No steps passed");
+  program.step = program.step.split(" ");
 
-// User must input an image.
-if(!program.image) exit("Can't read file.")
+  // User must input an image.
+  if (!program.image) exit("Can't read file.");
 
-// User must input an image.
-require('fs').access(program.image, function(err){
-  if(err) exit("Can't read file.")
-});
+  // User must input an image.
+  require("fs").access(program.image, function(err) {
+    if (err) exit("Can't read file.");
+  });
 
-// User must input a step. If steps exist, check that every step is a valid step.
-if(!program.step || !validateSteps(program.step))
-  exit("Please ensure all steps are valid.");
+  // User must input a step. If steps exist, check that every step is a valid step.
+  if (!program.step || !validateSteps(program.step))
+    exit("Please ensure all steps are valid.");
 
-// If there's no user defined output directory, select a default directory.
-program.output = program.output || "./output/";
+  // If there's no user defined output directory, select a default directory.
+  program.output = program.output || "./output/";
 
-// Set sequencer to log module outputs, if any.
-sequencer.setUI({
+  // Set sequencer to log module outputs, if any.
+  sequencer.setUI({
+    onComplete: function(step) {
+      // Get information of outputs.
+      step.info = sequencer.modulesInfo(step.name);
 
-  onComplete: function(step) {
-
-    // Get information of outputs.
-    step.info = sequencer.modulesInfo(step.name);
-
-    for (var output in step.info.outputs) {
-      console.log("["+program.step+"]: "+output+" = "+step[output]);
+      for (var output in step.info.outputs) {
+        console.log("[" + program.step + "]: " + output + " = " + step[output]);
+      }
     }
+  });
 
+  // Finally, if everything is alright, load the image, add the steps and run the sequencer.
+  sequencer.loadImages(program.image, function() {
+    console.warn(
+      "\x1b[33m%s\x1b[0m",
+      "Please wait \n output directory generated will be empty until the execution is complete"
+    );
+
+    //Generate the Output Directory
+    var outputFilename = program.output.split('/').slice(-1)[0];
+    if (outputFilename.includes('.')) {
+      // user did give an output filename we have to remove it from dir
+      program.output = program.output.split('/').slice(0, -1).join('/');
+    }
+    else {
+      outputFilename = null;
+    }
+    require("./src/CliUtils").makedir(program.output, () => {
+      console.log('Files will be exported to "' + program.output + '"');
+
+      if (program.basic)
+        console.log("Basic mode is enabled, outputting only final image");
+
+      // Iterate through the steps and retrieve their inputs.
+      program.step.forEach(function(step) {
+        var options = Object.assign({}, sequencer.modulesInfo(step).inputs);
+
+        // If inputs exists, print to console.
+        if (Object.keys(options).length) {
+          console.log("[" + step + "]: Inputs");
+        }
+
+        // If inputs exists, print them out with descriptions.
+        Object.keys(options).forEach(function(input) {
+          // The array below creates a variable number of spaces. This is done with (length + 1).
+          // The extra 4 that makes it (length + 5) is to account for the []: characters
+          console.log(
+            new Array(step.length + 5).join(" ") +
+            input +
+            ": " +
+            options[input].desc
+          );
+        });
+
+        if (program.config) {
+          try {
+            var config = JSON.parse(program.config);
+            console.log(`The parsed options object: `, config);
+          } catch (e) {
+            console.error(
+              "\x1b[31m%s\x1b[0m",
+              `Options(Config) is not a not valid JSON Fallback activate`
+            );
+            program.config = false;
+            console.log(e);
+          }
+        }
+        if (program.config && validateConfig(config, options)) {
+          console.log("Now using Options object");
+          Object.keys(options).forEach(function(input) {
+            options[input] = config[input];
+          });
+        } else {
+          // If inputs exist, iterate through them and prompt for values.
+          Object.keys(options).forEach(function(input) {
+            var value = readlineSync.question(
+              "[" +
+              step +
+              "]: Enter a value for " +
+              input +
+              " (" +
+              options[input].type +
+              ", default: " +
+              options[input].default +
+              "): "
+            );
+            options[input] = value;
+          });
+        }
+        // Add the step and its inputs to the sequencer.
+        sequencer.addSteps(step, options);
+      });
+
+      var spinnerObj = { succeed: () => { }, stop: () => { } };
+      if (!process.env.TEST)
+        spinnerObj = Spinner("Your Image is being processed..").start();
+
+      // Run the sequencer.
+      sequencer.run({ progressObj: spinnerObj }, function() {
+        // Export all images or final image as binary files.
+        sequencer.exportBin(program.output, program.basic, outputFilename);
+
+        //check if spinner was not overriden stop it
+        if (!spinnerObj.overrideFlag) {
+          spinnerObj.succeed();
+          console.log(`\nDone!!`);
+        }
+      });
+    });
+  });
+
+  // Takes an array of steps and checks if they are valid steps for the sequencer.
+  function validateSteps(steps) {
+    // Assume all are valid in the beginning.
+    var valid = true;
+    steps.forEach(function(step) {
+      // If any step in the array is not valid (not a property of modulesInfo), set valid to false.
+      if (!sequencer.modulesInfo().hasOwnProperty(step)) {
+        valid = false;
+      }
+    });
+
+    // Return valid. (If all of the steps are valid properties, valid will have remained true).
+    return valid;
   }
 
-});
+  //Takes config and options object and checks if all the keys exist in config
+  function validateConfig(config_, options_) {
+    options_ = Object.keys(options_);
+    if (
+      (function() {
+        for (var input in options_) {
+          if (!config_[options_[input]]) {
+            console.error(
+              "\x1b[31m%s\x1b[0m",
+              `Options Object does not have the required details "${
+              options_[input]
+              }" not specified. Fallback case activated`
+            );
+            return false;
+          }
+        }
+      })() == false
+    )
+      return false;
+    else return true;
+  }
+}
 
-// Finally, if everything is alright, load the image, add the steps and run the sequencer.
-sequencer.loadImages(program.image,function(){
-
-  // Iterate through the steps and retrieve their inputs.
-  program.step.forEach(function(step){
-    var options = Object.assign({}, sequencer.modulesInfo(step).inputs);
-
-    // If inputs exists, print to console.
-    if (Object.keys(options).length) {
-      console.log("[" + step + "]: Inputs");
-    }
-
-    // If inputs exists, print them out with descriptions.
-    Object.keys(options).forEach(function(input) {
-        // The array below creates a variable number of spaces. This is done with (length + 1). 
-        // The extra 4 that makes it (length + 5) is to account for the []: characters
-        console.log(new Array(step.length + 5).join(' ') + input + ": " + options[input].desc);
-    });
-
-    // If inputs exist, iterate through them and prompt for values.
-    Object.keys(options).forEach(function(input) {
-        var value = readlineSync.question("[" + step + "]: Enter a value for " + input + " (" + options[input].type + ", default: " + options[input].default + "): ");
-        options[input] = value;
-    });
-
-    // Add the step and its inputs to the sequencer.
-    sequencer.addSteps(step, options);
-  });
-
-  // Run the sequencer.
-  sequencer.run(function(){
-
-    // Export all images as binary files.
-    sequencer.exportBin(program.output);
-
-    console.log("Files will be exported to \""+program.output+"\"");
-
-  });
-
-});
-
-// Takes an array of steps and checks if they are valid steps for the sequencer.
-function validateSteps(steps) {
-
-  // Assume all are valid in the beginning. 
-  var valid = true;
-  steps.forEach(function(step) {
-    // If any step in the array is not valid (not a property of modulesInfo), set valid to false.
-    if (!sequencer.modulesInfo().hasOwnProperty(step)) {
-      valid = false;
-    }
-  });
-
-  // Return valid. (If all of the steps are valid properties, valid will have remained true).
-  return valid;
-}

package.json

@@ -1,10 +1,12 @@
 {
   "name": "image-sequencer",
-  "version": "0.1.1",
+  "version": "2.2.3",
   "description": "A modular JavaScript image manipulation library modeled on a storyboard.",
   "main": "src/ImageSequencer.js",
   "scripts": {
-    "test": "tape test/*.js | tap-spec; browserify test/image-sequencer.js test/chain.js | tape-run --render=\"tap-spec\""
+    "debug": "TEST=true node ./index.js -i ./examples/images/monarch.png -s invert",
+    "test": "TEST=true tape test/**/*.js test/*.js | tap-spec; browserify test/modules/image-sequencer.js test/modules/chain.js test/modules/meta-modules.js test/modules/replace.js test/modules/import-export.js test/modules/run.js test/modules/dynamic-imports.js | tape-run --render=\"tap-spec\"",
+    "start": "grunt serve"
   },
   "repository": {
     "type": "git",
@@ -25,21 +27,27 @@
     "commander": "^2.11.0",
     "data-uri-to-buffer": "^2.0.0",
     "fisheyegl": "^0.1.2",
-    "get-pixels": "~3.3.0",
     "font-awesome": "~4.5.0",
+    "get-pixels": "~3.3.0",
+    "image-sequencer-invert": "^1.0.0",
+    "imgareaselect": "git://github.com/jywarren/imgareaselect.git#v1.0.0-rc.2",
     "jquery": "~2",
     "jsqr": "^0.2.2",
+    "lodash": "^4.17.5",
+    "ndarray-gaussian-filter": "^1.0.0",
+    "ora": "^2.0.0",
+    "pace": "0.0.4",
     "readline-sync": "^1.4.7",
     "save-pixels": "~2.3.4",
     "urify": "^2.1.0"
   },
   "devDependencies": {
     "browserify": "13.0.0",
-    "data-uri-to-buffer": "^2.0.0",
     "grunt": "^0.4.5",
+    "grunt-browser-sync": "^2.2.0",
     "grunt-browserify": "^5.0.0",
     "grunt-contrib-concat": "^0.5.0",
-    "grunt-contrib-uglify": "git://github.com/gruntjs/grunt-contrib-uglify.git#harmony",
+    "grunt-contrib-uglify-es": "^3.3.0",
     "grunt-contrib-watch": "^0.6.1",
     "image-filter-core": "~1.0.0",
     "image-filter-threshold": "~1.0.0",
@@ -47,7 +55,8 @@
     "matchdep": "^0.3.0",
     "tap-spec": "^4.1.1",
     "tape": ">=4.7.0",
-    "tape-run": "^3.0.0"
+    "tape-run": "^3.0.0",
+    "uglify-es": "^3.3.7"
   },
   "homepage": "https://github.com/publiclab/image-sequencer",
   "bin": {

src/AddStep.js

@@ -1,29 +1,5 @@
-function AddStep(ref, image, name, o) {
-
-  function addStep(image, name, o_) {
-    var o = ref.copy(o_);
-    o.number = ref.options.sequencerCounter++; //Gives a Unique ID to each step
-    o.name = o_.name || name;
-    o.selector = o_.selector || 'ismod-' + name;
-    o.container = o_.container || ref.options.selector;
-    o.image = image;
-    o.inBrowser = ref.options.inBrowser;
-
-    o.step = {
-      name: o.name,
-      ID: o.number,
-      imageName: o.image,
-      inBrowser: ref.options.inBrowser,
-      ui: ref.options.ui,
-      options: o
-    };
-    var UI = ref.events;
-    var module = ref.modules[name][0](o,UI);
-    ref.images[image].steps.push(module);
-
-    return true;
-  }
-
-  addStep(image, name, o);
+// add steps to the sequencer
+function AddStep(_sequencer, image, name, o) {
+  return require('./InsertStep')(_sequencer,image,-1,name,o);
 }
 module.exports = AddStep;

src/CliUtils.js

@@ -0,0 +1,21 @@
+const fs = require('fs')
+
+
+
+/*
+* This function checks if the directory exists, if not it creates one on the given path
+* Callback is called with argument error if an error is encountered
+*/
+function makedir(path,callback){
+    fs.access(path,function(err){
+        if(err) fs.mkdir(path,function(err){
+            if(err) callback(err);
+            callback();
+        });
+        else callback()
+    });
+};
+
+module.exports = exports = {
+    makedir: makedir
+}

src/ExportBin.js

@@ -1,54 +1,73 @@
 var fs = require('fs');
 var getDirectories = function(rootDir, cb) {
   fs.readdir(rootDir, function(err, files) {
-      var dirs = [];
-      if(typeof(files)=="undefined") {
-        cb(dirs);
-        return [];
-      }
-      for (var index = 0; index < files.length; ++index) {
-          var file = files[index];
-          if (file[0] !== '.') {
-              var filePath = rootDir + '/' + file;
-              fs.stat(filePath, function(err, stat) {
-                  if (stat.isDirectory()) {
-                      dirs.push(this.file);
-                  }
-                  if (files.length === (this.index + 1)) {
-                      return cb(dirs);
-                  }
-              }.bind({index: index, file: file}));
-          }
-      }
-  });
-}
-
-module.exports = function ExportBin(dir = "./output/",ref) {
-  dir = (dir[dir.length-1]=="/") ? dir : dir + "/";
-  if(ref.options.inBrowser) return false;
-  fs.access(dir, function(err){
-    if(err) fs.mkdir(dir, function() {});
-  });
-  getDirectories(dir,function(dirs){
-    var num = 1;
-    for(var d in dirs){
-      if(dirs[d].match(/^sequencer(.*)$/)==null) continue;
-      var n = parseInt(dirs[d].match(/^sequencer(.*)$/)[1]);
-      num = (n>=num)?(n+1):num;
+    var dirs = [];
+    if (typeof (files) == "undefined" || files.length == 0) {
+      cb(dirs);
+      return [];
     }
-    fs.mkdir(dir+'sequencer'+num,function(){
-      var root = dir+'sequencer'+num+'/';
-      for(var image in ref.images) {
-        var steps = ref.images[image].steps;
-        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(){
-
-          });
-        }
+    for (var index = 0; index < files.length; ++index) {
+      var file = files[index];
+      if (file[0] !== '.') {
+        var filePath = rootDir + '/' + file;
+        fs.stat(filePath, function(err, stat) {
+          if (stat.isDirectory()) {
+            dirs.push(this.file);
+          }
+          if (files.length === (this.index + 1)) {
+            return cb(dirs);
+          }
+        }.bind({ index: index, file: file }));
       }
-    })
+    }
   });
 }
+
+module.exports = function ExportBin(dir = "./output/", ref, basic, filename) {
+
+  // If user did not give an output filename so we can continue without doing anything
+  dir = (dir[dir.length - 1] == "/") ? dir : dir + "/";
+  if (ref.options.inBrowser) return false;
+  fs.access(dir, function(err) {
+    if (err) console.error(err)
+  });
+  if (filename && basic) {
+    for (var image in ref.images) {
+      var steps = ref.images[image].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) {
+      var num = 1;
+      for (var d in dirs) {
+        if (dirs[d].match(/^sequencer(.*)$/) == null) continue;
+        var n = parseInt(dirs[d].match(/^sequencer(.*)$/)[1]);
+        num = (n >= num) ? (n + 1) : num;
+      }
+      fs.mkdir(dir + 'sequencer' + num, function() {
+        var root = dir + 'sequencer' + num + '/';
+        for (var image in ref.images) {
+          var steps = ref.images[image].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 + "_" + i + "." + ext, buffer, function() { });
+            }
+          }
+        }
+      });
+    });
+  }
+}

src/ImageSequencer.js

@@ -1,26 +1,27 @@
-if (typeof window !== 'undefined') {window.$ = window.jQuery = require('jquery'); isBrowser = true}
-else {var isBrowser = false}
+if (typeof window !== 'undefined') { isBrowser = true }
+else { var isBrowser = false }
+require('./util/getStep.js');
 
 ImageSequencer = function ImageSequencer(options) {
 
+  var sequencer = (this.name == "ImageSequencer") ? this : this.sequencer;
   options = options || {};
   options.inBrowser = options.inBrowser || isBrowser;
-  // if (options.inBrowser) options.ui = options.ui || require('./UserInterface');
   options.sequencerCounter = 0;
 
-  function objTypeOf(object){
-    return Object.prototype.toString.call(object).split(" ")[1].slice(0,-1)
+  function objTypeOf(object) {
+    return Object.prototype.toString.call(object).split(" ")[1].slice(0, -1)
   }
 
-  function log(color,msg) {
-    if(options.ui!="none") {
-      if(arguments.length==1) console.log(arguments[0]);
-      else if(arguments.length==2) console.log(color,msg);
+  function log(color, msg) {
+    if (options.ui != "none") {
+      if (arguments.length == 1) console.log(arguments[0]);
+      else if (arguments.length == 2) console.log(color, msg);
     }
   }
 
   function copy(a) {
-    if (!typeof(a) == "object") return a;
+    if (!typeof (a) == "object") return a;
     if (objTypeOf(a) == "Array") return a.slice();
     if (objTypeOf(a) == "Object") {
       var b = {};
@@ -33,62 +34,76 @@ ImageSequencer = function ImageSequencer(options) {
   }
 
   function makeArray(input) {
-    return (objTypeOf(input)=="Array")?input:[input];
+    return (objTypeOf(input) == "Array") ? input : [input];
   }
 
   var image,
-      steps = [],
-      modules = require('./Modules'),
-      formatInput = require('./FormatInput'),
-      images = {},
-      inputlog = [],
-      events = require('./UserInterface')(),
-      fs = require('fs');
+    steps = [],
+    modules = require('./Modules'),
+    sequences = require('./SavedSequences.json'),
+    formatInput = require('./FormatInput'),
+    images = {},
+    inputlog = [],
+    events = require('./ui/UserInterface')(),
+    fs = require('fs');
+
+
+
+  if (options.inBrowser) {
+    for (o in sequencer) {
+      modules[o] = sequencer[o];
+    }
+    sequences = JSON.parse(window.localStorage.getItem('sequences'));
+    if (!sequences) {
+      sequences = {};
+      window.localStorage.setItem('sequences', JSON.stringify(sequences));
+    }
+  }
 
   // if in browser, prompt for an image
   // if (options.imageSelect || options.inBrowser) addStep('image-select');
   // else if (options.imageUrl) loadImage(imageUrl);
 
-  function addSteps(){
-    var this_ = (this.name == "ImageSequencer")?this:this.sequencer;
-    var args = (this.name == "ImageSequencer")?[]:[this.images];
+  function addSteps() {
+    var this_ = (this.name == "ImageSequencer") ? this : this.sequencer;
+    var args = (this.name == "ImageSequencer") ? [] : [this.images];
     var json_q = {};
-    for(var arg in arguments){args.push(copy(arguments[arg]));}
-    json_q = formatInput.call(this_,args,"+");
+    for (var arg in arguments) { args.push(copy(arguments[arg])); }
+    json_q = formatInput.call(this_, args, "+");
 
-    inputlog.push({method:"addSteps", json_q:copy(json_q)});
+    inputlog.push({ method: "addSteps", json_q: copy(json_q) });
 
     for (var i in json_q)
       for (var j in json_q[i])
-        require("./AddStep")(this_,i,json_q[i][j].name,json_q[i][j].o);
+        require("./AddStep")(this_, i, json_q[i][j].name, json_q[i][j].o);
 
     return this;
   }
 
-  function removeStep(image,index) {
+  function removeStep(image, index) {
     //remove the step from images[image].steps and redraw remaining images
-    if(index>0) {
+    if (index > 0) {
       thisStep = images[image].steps[index];
       thisStep.UI.onRemove(thisStep.options.step);
-      images[image].steps.splice(index,1);
+      images[image].steps.splice(index, 1);
     }
     //tell the UI a step has been removed
   }
 
-  function removeSteps(image,index) {
+  function removeSteps(image, index) {
     var run = {}, indices;
-    var this_ = (this.name == "ImageSequencer")?this:this.sequencer;
-    var args = (this.name == "ImageSequencer")?[]:[this.images];
-    for(var arg in arguments) args.push(copy(arguments[arg]));
+    var this_ = (this.name == "ImageSequencer") ? this : this.sequencer;
+    var args = (this.name == "ImageSequencer") ? [] : [this.images];
+    for (var arg in arguments) args.push(copy(arguments[arg]));
 
-    var json_q = formatInput.call(this_,args,"-");
-    inputlog.push({method:"removeSteps", json_q:copy(json_q)});
+    var json_q = formatInput.call(this_, args, "-");
+    inputlog.push({ method: "removeSteps", json_q: copy(json_q) });
 
     for (var img in json_q) {
-      indices = json_q[img].sort(function(a,b){return b-a});
-      run[img] = indices[indices.length-1];
+      indices = json_q[img].sort(function(a, b) { return b - a });
+      run[img] = indices[indices.length - 1];
       for (var i in indices)
-        removeStep(img,indices[i]);
+        removeStep(img, indices[i]);
     }
     // this.run(run); // This is creating problems
     return this;
@@ -96,37 +111,53 @@ ImageSequencer = function ImageSequencer(options) {
 
   function insertSteps(image, index, name, o) {
     var run = {};
-    var this_ = (this.name == "ImageSequencer")?this:this.sequencer;
-    var args = (this.name == "ImageSequencer")?[]:[this.images];
+    var this_ = (this.name == "ImageSequencer") ? this : this.sequencer;
+    var args = (this.name == "ImageSequencer") ? [] : [this.images];
     for (var arg in arguments) args.push(arguments[arg]);
 
-    var json_q = formatInput.call(this_,args,"^");
-    inputlog.push({method:"insertSteps", json_q:copy(json_q)});
+    var json_q = formatInput.call(this_, args, "^");
+    inputlog.push({ method: "insertSteps", json_q: copy(json_q) });
 
     for (var img in json_q) {
       var details = json_q[img];
-      details = details.sort(function(a,b){return b.index-a.index});
+      details = details.sort(function(a, b) { return b.index - a.index });
       for (var i in details)
-        require("./InsertStep")(this_,img,details[i].index,details[i].name,details[i].o);
-      run[img] = details[details.length-1].index;
+        require("./InsertStep")(this_, img, details[i].index, details[i].name, details[i].o);
+      run[img] = details[details.length - 1].index;
     }
     // this.run(run); // This is Creating issues
     return this;
   }
 
-  function run(t_image,t_from) {
-    var this_ = (this.name == "ImageSequencer")?this:this.sequencer;
-    var args = (this.name == "ImageSequencer")?[]:[this.images];
+  // 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) {
+    let progressObj, index = 0;
+    config = config || { mode: 'no-arg' };
+    if (config.index) index = config.index;
+
+    if (config.mode != 'test') {
+      if (config.mode != "no-arg" && typeof config != 'function') {
+        if (config.progressObj) progressObj = config.progressObj;
+        delete arguments['0'];
+      }
+    }
+    else {
+      arguments['0'] = config.mode;
+    }
+
+    var this_ = (this.name == "ImageSequencer") ? this : this.sequencer;
+    var args = (this.name == "ImageSequencer") ? [] : [this.images];
     for (var arg in arguments) args.push(copy(arguments[arg]));
 
-    var callback = function() {};
+    var callback = function() { };
     for (var arg in args)
-      if(objTypeOf(args[arg]) == "Function")
-        callback = args.splice(arg,1)[0];
+      if (objTypeOf(args[arg]) == "Function")
+        callback = args.splice(arg, 1)[0];
 
-    var json_q = formatInput.call(this_,args,"r");
+    var json_q = formatInput.call(this_, args, "r");
 
-    require('./Run')(this_, json_q, callback);
+    require('./Run')(this_, json_q, callback, index, progressObj);
 
     return true;
   }
@@ -135,11 +166,10 @@ ImageSequencer = function ImageSequencer(options) {
     var args = [];
     var sequencer = this;
     for (var arg in arguments) args.push(copy(arguments[arg]));
-    var json_q = formatInput.call(this,args,"l");
+    var json_q = formatInput.call(this, args, "l");
 
-    inputlog.push({method:"loadImages", json_q:copy(json_q)});
+    inputlog.push({ method: "loadImages", json_q: copy(json_q) });
     var loadedimages = this.copy(json_q.loadedimages);
-// require('./LoadImage')(this,i,json_q.images[i]);
 
     var ret = {
       name: "ImageSequencer Wrapper",
@@ -154,12 +184,12 @@ ImageSequencer = function ImageSequencer(options) {
     };
 
     function load(i) {
-      if(i==loadedimages.length) {
+      if (i == loadedimages.length) {
         json_q.callback.call(ret);
         return;
       }
       var img = loadedimages[i];
-      require('./LoadImage')(sequencer,img,json_q.images[img],function(){
+      require('./ui/LoadImage')(sequencer, img, json_q.images[img], function() {
         load(++i);
       });
     }
@@ -167,36 +197,234 @@ ImageSequencer = function ImageSequencer(options) {
     load(0);
   }
 
-  function replaceImage(selector,steps,options) {
+  function replaceImage(selector, steps, options) {
     options = options || {};
-    return require('./ReplaceImage')(this,selector,steps);
+    options.callback = options.callback || function() { };
+    return require('./ReplaceImage')(this, selector, steps, options);
   }
 
   function setUI(UI) {
-    this.events = require('./UserInterface')(UI);
+    this.events = require('./ui/UserInterface')(UI);
   }
 
-  var exportBin = function(dir) {
-    return require('./ExportBin')(dir,this);
+  var exportBin = function(dir, basic, filename) {
+    return require('./ExportBin')(dir, this, basic, filename);
   }
 
   function modulesInfo(name) {
     var modulesdata = {}
-    if(name == "load-image") return {};
-    if(arguments.length==0)
-      for (var modulename in modules) {
+    if (name == "load-image") return {};
+    if (arguments.length == 0) {
+      for (var modulename in this.modules) {
         modulesdata[modulename] = modules[modulename][1];
       }
-    else modulesdata = modules[name][1];
+      for (var sequencename in this.sequences) {
+        modulesdata[sequencename] = { name: sequencename, steps: sequences[sequencename] };
+      }
+    }
+    else {
+      if (modules[name])
+        modulesdata = modules[name][1];
+      else
+        modulesdata = { 'inputs': sequences[name]['options'] };
+    }
     return modulesdata;
   }
 
+  // Genates a CLI string for the current sequence
+  function toCliString() {
+    var cliStringSteps = `"`, cliOptions = {};
+    for (var step in this.steps) {
+      if (this.steps[step].options.name !== "load-image")
+        cliStringSteps += `${this.steps[step].options.name} `;
+      for (var inp in modulesInfo(this.steps[step].options.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.images.image1.steps).map(stepToString).slice(1).join(',');
+    }
+  }
+
+  // Stringifies one step of the sequence
+  function stepToString(step) {
+    let inputs = copy(modulesInfo(step.options.name).inputs);
+    inputs = inputs || {};
+
+    for (let input in inputs) {
+      inputs[input] = step.options[input] || inputs[input].default;
+      inputs[input] = encodeURIComponent(inputs[input]);
+    }
+
+    var configurations = Object.keys(inputs).map(key => key + ':' + inputs[key]).join('|');
+    return `${step.options.name}{${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) {
+      return this;
+
+    } else if (Array.isArray(options)) {
+      // contains the array of module and info
+      this.modules[name] = options;
+
+    } else if (options.func && options.info) {
+      // passed in options object
+      this.modules[name] = [
+        options.func, options.info
+      ];
+
+    } else if (options.path && !this.inBrowser) {
+      // load from path(only in node)
+      const module = [
+        require(`${options.path}/Module.js`),
+        require(`${options.path}/info.json`)
+      ];
+      this.modules[name] = module;
+    }
+    return this;
+  }
+
+  function saveNewModule(name, path) {
+    if (options.inBrowser) {
+      // Not for browser context
+      return;
+    }
+    var mods = fs.readFileSync('./src/Modules.js').toString();
+    mods = mods.substr(0, mods.length - 1) + "  '" + name + "': require('" + path + "'),\n}";
+    fs.writeFileSync('./src/Modules.js', mods);
+  }
+
+  function createMetaModule(stepsCollection, info) {
+    var stepsArr = stepsCollection;
+    if (typeof stepsCollection === 'string')
+      stepsArr = stringToJSON(stepsCollection);
+    var metaMod = function() {
+      this.expandSteps(stepsArr);
+      return {
+        isMeta: true
+      }
+    }
+    return [metaMod, info];
+  }
+
+  function saveSequence(name, sequenceString) {
+    const sequence = stringToJSON(sequenceString);
+    // Save the given sequence string as a module
+    if (options.inBrowser) {
+      // Inside the browser we save the meta-modules using the Web Storage API
+      var sequences = JSON.parse(window.localStorage.getItem('sequences'));
+      sequences[name] = sequence;
+      window.localStorage.setItem('sequences', JSON.stringify(sequences));
+    }
+    else {
+      // In node we save the sequences in the json file SavedSequences.json
+      var sequences = require('./SavedSequences.json');
+      sequences[name] = sequence;
+      fs.writeFileSync('./src/SavedSequences.json', JSON.stringify(sequences));
+    }
+  }
+
+  function loadModules() {
+    // This function loads the modules and saved sequences
+    this.modules = require('./Modules');
+    if (options.inBrowser)
+      this.sequences = JSON.parse(window.localStorage.getItem('sequences'));
+    else
+      this.sequences = require('./SavedSequences.json');
+  }
+
   return {
     //literals and objects
     name: "ImageSequencer",
     options: options,
     inputlog: inputlog,
     modules: modules,
+    sequences: sequences,
     images: images,
     events: events,
 
@@ -211,11 +439,26 @@ 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,
+    loadNewModule: loadNewModule,
+    saveNewModule: saveNewModule,
+    createMetaModule: createMetaModule,
+    saveSequence: saveSequence,
+    loadModules: loadModules,
 
     //other functions
     log: log,
     objTypeOf: objTypeOf,
-    copy: copy
+    copy: copy,
+
+    setInputStep: require('./ui/SetInputStep')(sequencer)
   }
 
 }

src/InsertStep.js

@@ -1,19 +1,31 @@
+const getStepUtils = require('./util/getStep.js');
+
+// insert one or more steps at a given index in the sequencer
 function InsertStep(ref, image, index, name, o) {
+  if (ref.sequences[name]) {
+    return ref.importJSON(ref.sequences[name]);
+  }
 
   function insertStep(image, index, name, o_) {
+    if (ref.modules[name]) var moduleInfo = ref.modules[name][1];
+    else {
+      console.log('Module ' + name + ' not found.');
+    }
+
     var o = ref.copy(o_);
     o.number = ref.options.sequencerCounter++; //Gives a Unique ID to each step
-    o.name = o_.name || name;
+    o.name = o_.name || name || moduleInfo.name;
+    o.description = o_.description || moduleInfo.description;
     o.selector = o_.selector || 'ismod-' + name;
     o.container = o_.container || ref.options.selector;
     o.image = image;
+    o.inBrowser = ref.options.inBrowser;
 
-    if(index==-1) index = ref.images[image].steps.length;
+    if (index == -1) index = ref.images[image].steps.length;
 
     o.step = {
       name: o.name,
       description: o.description,
-      url: o.url,
       ID: o.number,
       imageName: o.image,
       inBrowser: ref.options.inBrowser,
@@ -21,12 +33,26 @@ function InsertStep(ref, image, index, name, o) {
       options: o
     };
     var UI = ref.events;
-    var module = ref.modules[name][0](o,UI);
-    ref.images[image].steps.splice(index,0,module);
+
+    // Tell UI that a step has been set up.
+    o = o || {};
+    ref.modules[name].expandSteps = function expandSteps(stepsArray) {
+      for (var step of stepsArray) {
+        ref.addSteps(step['name'], step['options']);
+      }
+    }
+    if (!ref.modules[name][1].length) {
+      UI.onSetup(o.step);
+      ref.images[image].steps.splice(index, 0, ref.modules[name][0](o, UI));
+    } else {
+      ref.modules[name][0](o, UI);
+    }
 
     return true;
   }
 
   insertStep(image, index, name, o);
+  ref.steps = ref.images[image].steps;
+
 }
 module.exports = InsertStep;

src/Modules.js

@@ -1,29 +1,24 @@
 /*
- * Core modules and their info files
- */
+* Core modules and their info files
+*/
 module.exports = {
-  'green-channel': [
-    require('./modules/GreenChannel/Module'),require('./modules/GreenChannel/info')
-  ],
-  'ndvi-red': [
-    require('./modules/NdviRed/Module'),require('./modules/NdviRed/info')
-  ],
-  'invert': [
-    require('./modules/Invert/Module'),require('./modules/Invert/info')
-  ],
-  'crop': [
-    require('./modules/Crop/Module'),require('./modules/Crop/info')
-  ],
-  'segmented-colormap': [
-    require('./modules/SegmentedColormap/Module'),require('./modules/SegmentedColormap/info')
-  ],
-  'decode-qr': [
-    require('./modules/DecodeQr/Module'),require('./modules/DecodeQr/info')
-  ],
-  'fisheye-gl': [
-    require('./modules/FisheyeGl/Module'),require('./modules/FisheyeGl/info')
-  ],
-  'dynamic': [
-    require('./modules/Dynamic/Module'),require('./modules/Dynamic/info')
-  ]
-}
+  'channel': require('./modules/Channel'),
+  'brightness': require('./modules/Brightness'),
+  'edge-detect': require('./modules/EdgeDetect'),
+  'ndvi': require('./modules/Ndvi'),
+  'crop': require('./modules/Crop'),
+  'colormap': require('./modules/Colormap'),
+  'decode-qr': require('./modules/DecodeQr'),
+  'fisheye-gl': require('./modules/FisheyeGl'),
+  'dynamic': require('./modules/Dynamic'),
+  'blur': require('./modules/Blur'),
+  'saturation': require('./modules/Saturation'),
+  'average': require('./modules/Average'),
+  'blend': require('./modules/Blend'),
+  'import-image': require('./modules/ImportImage'),
+  'overlay': require('./modules/Overlay'),
+  'gradient': require('./modules/Gradient'),
+  'invert': require('image-sequencer-invert'),
+  'ndvi-colormap': require('./modules/NdviColormap'),
+  'colorbar': require('./modules/Colorbar'),
+}

src/ReplaceImage.js

@@ -1,21 +1,37 @@
+// Uses a given image as input and replaces it with the output.
+// Works only in the browser.
 function ReplaceImage(ref,selector,steps,options) {
   if(!ref.options.inBrowser) return false; // This isn't for Node.js
+  var tempSequencer = ImageSequencer({ui: false});
   var this_ = ref;
-  var input = document.querySelectorAll(selector);
+  if (window.hasOwnProperty('$')) var input = $(selector);
+  else var input = document.querySelectorAll(selector);
   var images = [];
-  for (var i = 0; i < input.length; i++)
+  for (var i = 0; i < input.length; i++) {
     if (input[i] instanceof HTMLImageElement) images.push(input[i]);
-  for (var i in images) {
-    var the_image = images[i];
-    var url = images[i].src;
-    var ext = url.split('.').pop();
+  }
+
+  function replaceImage (img, steps) {
+    var url = img.src;
+    // refactor to filetypeFromUrl()
+    var ext = url.split('?')[0].split('.').pop();
 
     var xmlHTTP = new XMLHttpRequest();
     xmlHTTP.open('GET', url, true);
     xmlHTTP.responseType = 'arraybuffer';
     xmlHTTP.onload = function(e) {
       var arr = new Uint8Array(this.response);
-      var raw = String.fromCharCode.apply(null,arr);
+
+      // in chunks to avoid "RangeError: Maximum call stack exceeded"
+      // https://github.com/publiclab/image-sequencer/issues/241
+      // https://stackoverflow.com/a/20048852/1116657
+      var raw = '';
+      var i,j,subArray,chunk = 5000;
+      for (i=0,j=arr.length; i<j; i+=chunk) {
+        subArray = arr.subarray(i,i+chunk);
+        raw += String.fromCharCode.apply(null, subArray);
+      }
+
       var base64 = btoa(raw);
       var dataURL="data:image/"+ext+";base64," + base64;
       make(dataURL);
@@ -25,11 +41,19 @@ function ReplaceImage(ref,selector,steps,options) {
     else make(url);
 
     function make(url) {
-      this_.loadImage('default',url).addSteps('default',steps).run(function(out){
-        the_image.src = out;
+      tempSequencer.loadImage(url, function(){
+        this.addSteps(steps).run({stop:function(){}},function(out){
+          img.src = out;
+        });
       });
     }
   }
+
+  for (var i = 0; i < images.length; i++) {
+    replaceImage(images[i],steps);
+    if (i == images.length-1)
+      options.callback();
+  }
 }
 
 module.exports = ReplaceImage;

src/Run.js

@@ -1,23 +1,59 @@
-function Run(ref, json_q, callback) {
+const getStepUtils = require('./util/getStep.js');
+
+function Run(ref, json_q, callback, ind, progressObj) {
+  if (!progressObj) progressObj = { stop: function() { } };
 
   function drawStep(drawarray, pos) {
     if (pos == drawarray.length && drawarray[pos - 1] !== undefined) {
-      var image = drawarray[pos-1].image;
-      if(ref.objTypeOf(callback) == 'Function') {
+      var image = drawarray[pos - 1].image;
+      if (ref.objTypeOf(callback) == "Function" && ref.images[image].steps.slice(-1)[0].output) {
         var steps = ref.images[image].steps;
-        var out = steps[steps.length-1].output.src;
+        var out = steps[steps.length - 1].output.src;
         callback(out);
         return true;
       }
     }
+
     // so we don't run on the loadImage module:
     if (drawarray[pos] !== undefined) {
       var image = drawarray[pos].image;
       var i = drawarray[pos].i;
       var input = ref.images[image].steps[i - 1].output;
-      ref.images[image].steps[i].draw(ref.copy(input), function onEachStep() {
-        drawStep(drawarray, ++pos);
-      });
+
+      ref.images[image].steps[i].getStep = function getStep(offset) {
+        if (i + offset >= ref.images[image].steps.length) return { options: { name: undefined } };
+        else return ref.images[image].steps.slice(i + offset)[0];
+      };
+      ref.images[image].steps[i].getIndex = function getIndex() {
+        return i;
+      }
+
+      for (var util in getStepUtils) {
+        if (getStepUtils.hasOwnProperty(util)) {
+          ref.images[image].steps[i][util] = getStepUtils[util];
+        }
+      }
+
+      // Tell UI that a step is being drawn.
+      ref.images[image].steps[i].UI.onDraw(ref.images[image].steps[i].options.step);
+
+      // provides a set of standard tools for each step
+      var inputForNextStep = require('./RunToolkit')(ref.copy(input));
+
+      ref.images[image].steps[i].draw(
+        inputForNextStep,
+        function onEachStep() {
+
+          // This output is accessible by UI
+          ref.images[image].steps[i].options.step.output = ref.images[image].steps[i].output.src;
+
+          // Tell UI that step has been drawn.
+          ref.images[image].steps[i].UI.onComplete(ref.images[image].steps[i].options.step);
+
+          drawStep(drawarray, ++pos);
+        },
+        progressObj
+      );
     }
   }
 
@@ -26,14 +62,14 @@ function Run(ref, json_q, callback) {
     for (var image in json_q) {
       var no_steps = ref.images[image].steps.length;
       var init = json_q[image];
-      for(var i = 0; i < no_steps - init; i++) {
+      for (var i = 0; i < no_steps - init; i++) {
         drawarray.push({ image: image, i: init + i });
       }
     }
-    drawStep(drawarray,0);
+    drawStep(drawarray, ind);
   }
 
-  function filter(json_q){
+  function filter(json_q) {
     for (var image in json_q) {
       if (json_q[image] == 0 && ref.images[image].steps.length == 1)
         delete json_q[image];
@@ -41,8 +77,11 @@ function Run(ref, json_q, callback) {
     }
     for (var image in json_q) {
       var prevstep = ref.images[image].steps[json_q[image] - 1];
-      while (typeof(prevstep) == "undefined" || typeof(prevstep.output) == "undefined") {
-        prevstep = ref.images[image].steps[(--json_q[image]) - 1];
+      while (
+        typeof prevstep == "undefined" ||
+        typeof prevstep.output == "undefined"
+      ) {
+        prevstep = ref.images[image].steps[--json_q[image] - 1];
       }
     }
     return json_q;
@@ -50,6 +89,5 @@ function Run(ref, json_q, callback) {
 
   var json_q = filter(json_q);
   return drawSteps(json_q);
-
 }
 module.exports = Run;

src/RunToolkit.js

@@ -0,0 +1,14 @@
+const getPixels = require('get-pixels');
+const pixelManipulation = require('./modules/_nomodule/PixelManipulation');
+const lodash = require('lodash');
+const dataUriToBuffer = require('data-uri-to-buffer');
+const savePixels = require('save-pixels');
+
+module.exports = function(input) {
+    input.getPixels = getPixels;
+    input.pixelManipulation = pixelManipulation;
+    input.lodash = lodash;
+    input.dataUriToBuffer = dataUriToBuffer;
+    input.savePixels = savePixels;
+    return input;
+}

src/SavedSequences.json

@@ -0,0 +1 @@
+{"sample":[{"name":"invert","options":{}},{"name":"channel","options":{"channel":"red"}},{"name":"blur","options":{"blur":"5"}}]}

src/modules/Average/Module.js

@@ -0,0 +1,76 @@
+/*
+* Average all pixel colors
+*/
+module.exports = function Average(options, UI){
+
+    options.blur = options.blur || 2
+    var output;
+
+    options.step.metadata = options.step.metadata || {};
+
+    function draw(input,callback,progressObj){
+
+        progressObj.stop(true);
+        progressObj.overrideFlag = true;
+
+        var step = this;
+
+        function changePixel(r, g, b, a){
+            return [r,g,b,a]
+        }
+
+        // do the averaging
+        function extraManipulation(pixels){
+            var sum = [0,0,0,0];
+            for (var i = 0; i < pixels.data.length; i += 4) {
+              sum[0] += pixels.data[i + 0];
+              sum[1] += pixels.data[i + 1];
+              sum[2] += pixels.data[i + 2];
+              sum[3] += pixels.data[i + 3];
+            }
+
+            sum[0] = parseInt(sum[0] / (pixels.data.length / 4));
+            sum[1] = parseInt(sum[1] / (pixels.data.length / 4));
+            sum[2] = parseInt(sum[2] / (pixels.data.length / 4));
+            sum[3] = parseInt(sum[3] / (pixels.data.length / 4));
+
+            for (var i = 0; i < pixels.data.length; i += 4) {
+              pixels.data[i + 0] = sum[0];
+              pixels.data[i + 1] = sum[1];
+              pixels.data[i + 2] = sum[2];
+              pixels.data[i + 3] = sum[3];
+            }
+            // report back and store average in metadata:
+            options.step.metadata.averages = sum;
+            console.log("average: ", sum);
+            // TODO: refactor into a new "display()" method as per https://github.com/publiclab/image-sequencer/issues/242
+            if (options.step.inBrowser && options.step.ui) $(options.step.ui).find('.details').append("<p><b>Averages</b> (r, g, b, a): " + sum.join(', ') + "</p>");
+            return pixels;
+        }
+
+        function output(image, datauri, mimetype){
+
+            // This output is accessible by Image Sequencer
+            step.output = {
+              src: datauri,
+              format: mimetype
+            };
+        }
+
+        return require('../_nomodule/PixelManipulation.js')(input, {
+            output: output,
+            changePixel: changePixel,
+            extraManipulation: extraManipulation,
+            format: input.format,
+            image: options.image,
+            callback: callback
+        });
+
+    }
+    return {
+        options: options,
+        draw:  draw,
+        output: output,
+        UI: UI
+    }
+}

src/modules/Average/index.js

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

src/modules/Average/info.json

@@ -0,0 +1,6 @@
+{
+    "name": "Average",
+    "description": "Average all pixel color",
+    "inputs": {
+    }
+}

src/modules/Blend/Module.js

@@ -0,0 +1,63 @@
+module.exports = function Dynamic(options, UI, util) {
+
+  options.func = options.func || "function(r1, g1, b1, a1, r2, g2, b2, a2) { return [ r1, g2, b2, a2 ] }";
+
+  var output;
+
+  // This function is called on every draw.
+  function draw(input, callback, progressObj) {
+
+    progressObj.stop(true);
+    progressObj.overrideFlag = true;
+
+    var step = this;
+
+    // convert to runnable code:
+    if (typeof options.func === "string") eval('options.func = ' + options.func);
+
+    var getPixels = require('get-pixels');
+
+    // save first image's pixels
+    var priorStep = this.getStep(-2);
+
+    getPixels(priorStep.output.src, function(err, pixels) {
+      options.firstImagePixels = pixels;
+
+      function changePixel(r2, g2, b2, a2, x, y) {
+        // blend!
+        var p = options.firstImagePixels;
+        return options.func(
+          r2, g2, b2, a2,
+          p.get(x, y, 0),
+          p.get(x, y, 1),
+          p.get(x, y, 2),
+          p.get(x, y, 3)
+        )
+      }
+
+      function output(image, datauri, mimetype) {
+
+        // This output is accessible by Image Sequencer
+        step.output = { src: datauri, format: mimetype };
+
+      }
+
+      // run PixelManipulatin on second image's pixels
+      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/Blend/index.js

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

src/modules/Blend/info.json

@@ -0,0 +1,11 @@
+{
+  "name": "Blend",
+  "description": "Blend the past two image steps with the given function. Defaults to using the red channel from image 1 and the green and blue and alpha channels of image 2. Easier to use interfaces coming soon!",
+  "inputs": {
+    "blend": {
+      "type": "input",
+      "desc": "Function to use to blend the two images.",
+      "default": "function(r1, g1, b1, a1, r2, g2, b2, a2) { return [ r1, g2, b2, a2 ] }"
+    }
+  }
+}

src/modules/Blur/Blur.js

@@ -0,0 +1,84 @@
+module.exports = exports = function(pixels, blur) {
+    let kernel = kernelGenerator(blur, 1), oldpix = pixels;
+    kernel = flipKernel(kernel);
+
+    for (let i = 0; i < pixels.shape[0]; i++) {
+        for (let j = 0; j < pixels.shape[1]; j++) {
+            let neighboutPos = getNeighbouringPixelPositions([i, j]);
+            let acc = [0.0, 0.0, 0.0, 0.0];
+            for (let a = 0; a < kernel.length; a++) {
+                for (let b = 0; b < kernel.length; b++) {
+                    acc[0] += (oldpix.get(neighboutPos[a][b][0], neighboutPos[a][b][1], 0) * kernel[a][b]);
+                    acc[1] += (oldpix.get(neighboutPos[a][b][0], neighboutPos[a][b][1], 1) * kernel[a][b]);
+                    acc[2] += (oldpix.get(neighboutPos[a][b][0], neighboutPos[a][b][1], 2) * kernel[a][b]);
+                    acc[3] += (oldpix.get(neighboutPos[a][b][0], neighboutPos[a][b][1], 3) * kernel[a][b]);
+                }
+            }
+            pixels.set(i, j, 0, acc[0]);
+            pixels.set(i, j, 1, acc[1]);
+            pixels.set(i, j, 2, acc[2]);
+        }
+    }
+    return pixels;
+
+
+
+    //Generates a 3x3 Gaussian kernel
+    function kernelGenerator(sigma, size) {
+
+        /*
+        Trying out a variable radius kernel not working as of now
+        */
+        // const coeff = (1.0/(2.0*Math.PI*sigma*sigma))
+        // const expCoeff = -1 * (1.0/2.0 * sigma * sigma)
+        // let e = Math.E
+        // let result = []
+        // for(let i = -1 * size;i<=size;i++){
+        //     let arr = []
+        //     for(let j= -1 * size;j<=size;j++){
+        //         arr.push(coeff * Math.pow(e,expCoeff * ((i * i) + (j*j))))
+        //     }
+        //     result.push(arr)
+        // }
+        // let sum = result.reduce((sum,val)=>{
+        //     return val.reduce((sumInner,valInner)=>{
+        //         return sumInner+valInner
+        //     })
+        // })
+        // result = result.map(arr=>arr.map(val=>(val + 0.0)/(sum + 0.0)))
+
+        // return result
+
+        return [
+            [2.0 / 159.0, 4.0 / 159.0, 5.0 / 159.0, 4.0 / 159.0, 2.0 / 159.0],
+            [4.0 / 159.0, 9.0 / 159.0, 12.0 / 159.0, 9.0 / 159.0, 4.0 / 159.0],
+            [5.0 / 159.0, 12.0 / 159.0, 15.0 / 159.0, 12.0 / 159.0, 5.0 / 159.0],
+            [4.0 / 159.0, 9.0 / 159.0, 12.0 / 159.0, 9.0 / 159.0, 4.0 / 159.0],
+            [2.0 / 159.0, 4.0 / 159.0, 5.0 / 159.0, 4.0 / 159.0, 2.0 / 159.0]
+        ];
+    }
+    function getNeighbouringPixelPositions(pixelPosition) {
+        let x = pixelPosition[0], y = pixelPosition[1], result = [];
+
+        for (let i = -2; i <= 2; i++) {
+            let arr = [];
+            for (let j = -2; j <= 2; j++)
+                arr.push([x + i, y + j]);
+
+            result.push(arr);
+        }
+        return result;
+    }
+
+    function flipKernel(kernel) {
+        let result = [];
+        for (let i = kernel.length - 1; i >= 0; i--) {
+            let arr = [];
+            for (let j = kernel[i].length - 1; j >= 0; j--) {
+                arr.push(kernel[i][j]);
+            }
+            result.push(arr);
+        }
+        return result;
+    }
+}

src/modules/Blur/Module.js

@@ -0,0 +1,48 @@
+/*
+* Blur an Image
+*/
+module.exports = function Blur(options, UI) {
+
+    options.blur = options.blur || 2
+    var output;
+
+    function draw(input, callback, progressObj) {
+
+        progressObj.stop(true);
+        progressObj.overrideFlag = true;
+
+        var step = this;
+
+        function changePixel(r, g, b, a) {
+            return [r, g, b, a]
+        }
+
+        function extraManipulation(pixels) {
+            pixels = require('./Blur')(pixels, options.blur)
+            return pixels
+        }
+
+        function output(image, datauri, mimetype) {
+
+            // This output is accessible by Image Sequencer
+            step.output = { src: datauri, format: mimetype };
+
+        }
+
+        return require('../_nomodule/PixelManipulation.js')(input, {
+            output: output,
+            changePixel: changePixel,
+            extraManipulation: extraManipulation,
+            format: input.format,
+            image: options.image,
+            callback: callback
+        });
+
+    }
+    return {
+        options: options,
+        draw: draw,
+        output: output,
+        UI: UI
+    }
+}

src/modules/Blur/index.js

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

src/modules/Blur/info.json

@@ -0,0 +1,11 @@
+{
+    "name": "Blur",
+    "description": "Gaussian blur an image by a given value, typically 0-5",
+    "inputs": {
+        "blur": {
+            "type": "integer",
+            "desc": "amount of gaussian blur(Less blur gives more detail, typically 0-5)",
+            "default": 2
+        }
+    }
+}

src/modules/Brightness/Module.js

@@ -0,0 +1,54 @@
+/*
+* Changes the Image Brightness
+*/
+
+module.exports = function Brightness(options,UI){
+
+    var output;
+
+    function draw(input,callback,progressObj){
+
+        progressObj.stop(true);
+        progressObj.overrideFlag = true;
+
+        /*
+        In this case progress is handled by changepixel internally otherwise progressObj
+        needs to be overriden and used
+        For eg. progressObj = new SomeProgressModule()
+        */
+
+        var step = this;
+
+        function changePixel(r, g, b, a){
+            var val = (options.brightness)/100.0
+
+            r = val*r<255?val*r:255
+            g = val*g<255?val*g:255
+            b = val*b<255?val*b:255
+            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/Brightness/index.js

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

src/modules/Brightness/info.json

@@ -0,0 +1,11 @@
+{
+    "name": "Brightness",
+    "description": "Change the brightness of the image by given percent value",
+    "inputs": {
+        "brightness": {
+            "type": "integer",
+            "desc": "% brightness for the new image",
+            "default": 0 
+        }
+    } 
+}

src/modules/Channel/Module.js

@@ -0,0 +1,48 @@
+/*
+ * Display only one color channel
+ */
+module.exports = function Channel(options, UI) {
+
+  options.channel = options.channel || "green";
+
+  var output;
+
+  function draw(input, callback, progressObj) {
+
+    progressObj.stop(true);
+    progressObj.overrideFlag = true;
+
+    var step = this;
+
+    function changePixel(r, g, b, a) {
+      if (options.channel == "red") return [r, 0, 0, a];
+      if (options.channel == "green") return [0, g, 0, a];
+      if (options.channel == "blue") return [0, 0, b, a];
+    }
+
+    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,
+      changePixel: changePixel,
+      format: input.format,
+      image: options.image,
+      inBrowser: options.inBrowser,
+      callback: callback
+    });
+
+  }
+
+  return {
+    options: options,
+    //setup: setup, // optional
+    draw: draw,
+    output: output,
+    UI: UI
+  }
+}

src/modules/Channel/index.js

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

src/modules/Channel/info.json

@@ -0,0 +1,12 @@
+{
+  "name": "Channel",
+  "description": "Displays only one color channel of an image -- default is green",
+  "inputs": {
+    "channel": {
+      "type": "select",
+      "desc": "Color channel",
+      "default": "green",
+      "values": ["red", "green", "blue"]
+    }
+  }
+}

src/modules/Colorbar/Module.js

@@ -0,0 +1,16 @@
+module.exports = function NdviColormapfunction(options, UI) {
+
+    options.x = options.x || 0;
+    options.y = options.y || 0;
+    options.colormap = options.colormap || "default";
+    options.h = options.h || 10;
+    this.expandSteps([
+        { 'name': 'gradient', 'options': {} },
+        { 'name': 'colormap', 'options': { colormap: options.colormap } },
+        { 'name': 'crop', 'options': { 'y': 0, 'h': options.h } },
+        { 'name': 'overlay', 'options': { 'x': options.x, 'y': options.y, 'offset': -4 } }
+    ]);
+    return {
+        isMeta: true
+    }
+}

src/modules/Colorbar/index.js

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

src/modules/Colorbar/info.json

@@ -0,0 +1,33 @@
+{
+    "name": "Colorbar",
+    "description": "Generates a colorbar to lay over the image",
+    "inputs": {
+        "colormap": {
+            "type": "select",
+            "desc": "Name of the Colormap",
+            "default": "default",
+            "values": [
+                "default",
+                "greyscale",
+                "stretched",
+                "fastie"
+            ]
+        },
+        "x": {
+            "type": "integer",
+            "desc": "X-position of the image on which the new image is overlayed",
+            "default": 0
+        },
+        "y": {
+            "type": "integer",
+            "desc": "Y-position of the image on which the new image is overlayed",
+            "default": 0
+        },
+        "h": {
+            "type": "iinteger",
+            "desc": "height of the colorbar",
+            "default": 10
+        }
+    },
+    "length": 4
+}

src/modules/Colormap/Colormap.js

@@ -11,11 +11,11 @@
  * Adapted from bgamari's work in Infragram: https://github.com/p-v-o-s/infragram-js/commit/346c97576a07b71a55671d17e0153b7df74e803b
  */
 
-module.exports = function SegmentedColormap(value, options) {
+module.exports = function Colormap(value, options) {
   options.colormap = options.colormap || colormaps.default;
   // if a lookup table is provided as an array:
   if(typeof(options.colormap) == "object")
-    colormapFunction = segmented_colormap(options.colormap);
+    colormapFunction = colormap(options.colormap);
   // if a stored colormap is named with a string like "fastie":
   else if(colormaps.hasOwnProperty(options.colormap))
     colormapFunction = colormaps[options.colormap];
@@ -23,7 +23,7 @@ module.exports = function SegmentedColormap(value, options) {
   return colormapFunction(value / 255.00);
 }
 
-function segmented_colormap(segments) {
+function colormap(segments) {
   return function(x) {
     var i, result, x0, x1, xstart, y0, y1, _i, _j, _len, _ref, _ref1, _ref2, _ref3;
     _ref = [0, 0], y0 = _ref[0], y1 = _ref[1];
@@ -52,29 +52,29 @@ function segmented_colormap(segments) {
 };
 
 var colormaps = {
-  greyscale: segmented_colormap([
+  greyscale: colormap([
                [0,     [0,   0,   0],   [255, 255, 255] ],
                [1,     [255, 255, 255], [255, 255, 255] ]
              ]),
-  default:   segmented_colormap([
+  default:   colormap([
                [0,     [0,   0,   255], [0,   255, 0]   ],
                [0.25,  [0,   255, 0],   [255, 255, 0]   ],
                [0.50,  [0,   255, 255], [255, 255, 0]   ],
                [0.75,  [255, 255, 0],   [255, 0,   0]   ]
              ]),
-  ndvi:      segmented_colormap([
+  ndvi:      colormap([
                [0,     [0,   0,   255], [38,  195, 195] ],
                [0.5,   [0,   150, 0],   [255, 255, 0]   ],
                [0.75,  [255, 255, 0],   [255, 50,  50]  ]
              ]),
-  stretched: segmented_colormap([
+  stretched: colormap([
                [0,     [0,   0,   255], [0,   0,   255] ],
                [0.1,   [0,   0,   255], [38,  195, 195] ],
                [0.5,   [0,   150, 0],   [255, 255, 0]   ],
                [0.7,   [255, 255, 0],   [255, 50,  50]  ],
                [0.9,   [255, 50,  50],  [255, 50,  50]  ]
              ]),
-  fastie:    segmented_colormap([
+  fastie:    colormap([
                [0,     [255, 255, 255], [0,   0,   0]   ],
                [0.167, [0,   0,   0],   [255, 255, 255] ],
                [0.33,  [255, 255, 255], [0,   0,   0]   ],

src/modules/Colormap/Module.js

@@ -1,22 +1,18 @@
-module.exports = function SegmentedColormap(options,UI) {
+module.exports = function Colormap(options,UI) {
 
-  options = options || {};
-  options.title = "Segmented Colormap";
-
-  // Tell the UI that a step has been set up.
-  UI.onSetup(options.step);
   var output;
 
   // This function is called on every draw.
-  function draw(input,callback) {
+  function draw(input,callback,progressObj) {
+
+    progressObj.stop(true);
+    progressObj.overrideFlag = true;
 
-    // Tell the UI that the step is being drawn
-    UI.onDraw(options.step);
     var step = this;
 
     function changePixel(r, g, b, a) {
       var combined = (r + g + b) / 3.000;
-      var res = require('./SegmentedColormap')(combined, options);
+      var res = require('./Colormap')(combined, options);
       return [res[0], res[1], res[2], 255];
     }
 
@@ -25,18 +21,13 @@ module.exports = function SegmentedColormap(options,UI) {
       // This output is accessible by Image Sequencer
       step.output = { src: datauri, format: mimetype };
 
-      // This output is accessible by the UI
-      options.step.output = datauri;
-
-      // Tell the UI that the draw is complete
-      UI.onComplete(options.step);
-
     }
     return require('../_nomodule/PixelManipulation.js')(input, {
       output: output,
       changePixel: changePixel,
       format: input.format,
       image: options.image,
+      inBrowser: options.inBrowser,
       callback: callback
     });
 

src/modules/Colormap/index.js

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

src/modules/Colormap/info.json

@@ -0,0 +1,12 @@
+{
+  "name": "Colormap",
+  "description": "Maps brightness values (average of red, green & blue) to a given color lookup table, made up of a set of one more color gradients.\n\nFor example, 'cooler' colors like blue could represent low values, while 'hot' colors like red could represent high values.",
+  "inputs": {
+    "colormap": {
+      "type": "select",
+      "desc": "Name of the Colormap",
+      "default": "default",
+      "values": ["default","greyscale","stretched","fastie"]
+    }
+  }
+}

src/modules/Crop/Crop.js

@@ -7,8 +7,8 @@ module.exports = function Crop(input,options,callback) {
   options.y = parseInt(options.y) || 0;
 
   getPixels(input.src,function(err,pixels){
-    options.w = parseInt(options.w) || Math.floor(0.5*pixels.shape[0]);
-    options.h = parseInt(options.h) || Math.floor(0.5*pixels.shape[1]);
+    options.w = parseInt(options.w) || Math.floor(pixels.shape[0]);
+    options.h = parseInt(options.h) || Math.floor(pixels.shape[1]);
     var ox = options.x;
     var oy = options.y;
     var w = options.w;

src/modules/Crop/Module.js

@@ -13,47 +13,58 @@
  *          y = options.y
  *          y = options.y + options.h
  */
- module.exports = function CropModule(options,UI) {
+module.exports = function CropModule(options, UI) {
 
-   options = options || {};
-   options.title = "Crop Image";
+  // we should get UI to return the image thumbnail so we can attach our own UI extensions
+  // add our custom in-module html ui:
+  if (options.step.inBrowser) var ui = require('./Ui.js')(options.step, UI);
+  var output,
+      setupComplete = false;
 
-   // Tell the UI that a step has been added
-   UI.onSetup(options.step);
-   var output;
+  // This function is caled everytime the step has to be redrawn
+  function draw(input,callback) {
 
-   // This function is caled everytime the step has to be redrawn
-   function draw(input,callback) {
+    var step = this;
 
-     // Tell the UI that the step has been triggered
-     UI.onDraw(options.step);
-     var step = this;
+    // save the input image;
+    // TODO: this should be moved to module API to persist the input image
+    options.step.input = input.src;
 
-     require('./Crop')(input,options,function(out,format){
+    require('./Crop')(input, options, function(out, format){
 
-       // This output is accessible to Image Sequencer
-       step.output = {
-         src: out,
-         format: format
-       }
+      // This output is accessible to Image Sequencer
+      step.output = {
+        src: out,
+        format: format
+      }
 
-       // This output is accessible to the UI
-       options.step.output = out;
+      // This output is accessible to the UI
+      options.step.output = out;
 
-       // Tell the UI that the step has been drawn
-       UI.onComplete(options.step);
+      // Tell the UI that the step has been drawn
+      UI.onComplete(options.step);
 
-       // Tell Image Sequencer that step has been drawn
-       callback();
+      // we should do this via event/listener:
+      if (ui && ui.hide) ui.hide();
 
-     });
+      // start custom UI setup (draggable UI)
+      // only once we have an input image
+      if (setupComplete === false && options.step.inBrowser) {
+        setupComplete = true;
+        ui.setup();
+      }
 
-   }
+      // Tell Image Sequencer that step has been drawn
+      callback();
 
-   return {
-     options: options,
-     draw: draw,
-     output: output,
-     UI: UI
-   }
- }
+    });
+
+  }
+
+  return {
+    options: options,
+    draw: draw,
+    output: output,
+    UI: UI
+  }
+}

src/modules/Crop/Ui.js

@@ -0,0 +1,97 @@
+// hide on save
+module.exports = function CropModuleUi(step, ui) {
+
+  let inputWidth = 0,
+      inputHeight = 0;
+
+  // We don't have input image dimensions at the
+  // time of setting up the UI; that comes when draw() is triggered.
+  // So we trigger setup only on first run of draw()
+  // TODO: link this to an event rather than an explicit call in Module.js
+  function setup() {
+    let x = 0,
+        y = 0;
+
+    // display original uncropped input image on initial setup
+    showOriginal();
+
+    inputWidth = Math.floor(imgEl().naturalWidth);
+    inputHeight = Math.floor(imgEl().naturalHeight);
+
+    // display with 50%/50% default crop:
+    setOptions(x, y, inputWidth, inputHeight);
+
+    $(imgEl()).imgAreaSelect({
+      handles: true,
+      x1: x,
+      y1: y,
+      x2: x + inputWidth / 2,
+      y2: y + inputHeight / 2,
+      // when selection is complete
+      onSelectEnd: function onSelectEnd(img, selection) {
+        // assign crop values to module UI form inputs:
+        let converted = convertToNatural(
+          selection.x1,
+          selection.y1,
+          selection.width,
+          selection.height
+        );
+        setOptions(
+          converted[0],
+          converted[1],
+          converted[2],
+          converted[3]
+        );
+      }
+    });
+  }
+
+  function convertToNatural(_x, _y, _width, _height) {
+    let displayWidth = $(imgEl()).width(),
+        displayHeight = $(imgEl()).height();
+    // return in same order [ x, y, width, height ]:
+    return [
+      Math.floor(( _x / displayWidth ) * inputWidth),
+      Math.floor(( _y / displayHeight ) * inputHeight),
+      Math.floor(( _width / displayWidth ) * inputWidth),
+      Math.floor(( _height / displayHeight ) * inputHeight)
+    ]
+  }
+
+  function remove() {
+    $(imgEl()).imgAreaSelect({
+      remove: true
+    });
+  }
+
+  function hide() {
+    // then hide the draggable UI
+    $(imgEl()).imgAreaSelect({
+      hide: true
+    });
+  }
+
+  // step.imgSelector is not defined, imgElement is:
+  function imgEl() {
+    return step.imgElement;
+  }
+
+  function setOptions(x1, y1, width, height) {
+    let options = $($(imgEl()).parents()[2]).find("input");
+    options[0].value = x1;
+    options[1].value = y1;
+    options[2].value = width;
+    options[3].value = height;
+  }
+
+  // replaces currently displayed output thumbnail with the input image, for ui dragging purposes
+  function showOriginal() {
+    step.imgElement.src = step.input;
+  }
+
+  return {
+    setup: setup,
+    remove: remove,
+    hide: hide
+  }
+}

src/modules/Crop/index.js

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

src/modules/Crop/info.json

@@ -1,6 +1,6 @@
 {
   "name": "Crop",
-  "description": "Crop image to given x, y, w, h",
+  "description": "Crop image to given x, y, w, h in pixels, measured from top left",
   "url": "https://github.com/publiclab/image-sequencer/tree/master/MODULES.md",
   "inputs": {
     "x": {
@@ -16,12 +16,12 @@
     "w": {
       "type": "integer",
       "desc": "Width of crop",
-      "default": "(50%)"
+      "default": "(100%)"
     },
     "h": {
       "type": "integer",
       "desc": "Height of crop",
-      "default": "(50%)"
+      "default": "(100%)"
     }
   }
-}
+}

src/modules/DecodeQr/Module.js

@@ -3,12 +3,6 @@
  */
 module.exports = function DoNothing(options,UI) {
 
-  options = options || {};
-  options.title = "Decode QR Code";
-
-  // Tell the UI that a step has been added
-  UI.onSetup(options.step);
-
   var output;
   var jsQR = require('jsqr');
   var getPixels = require('get-pixels');
@@ -16,8 +10,6 @@ module.exports = function DoNothing(options,UI) {
   // This function is called everytime a step has to be redrawn
   function draw(input,callback) {
 
-    UI.onDraw(options.step);
-
     var step = this;
 
     getPixels(input.src,function(err,pixels){
@@ -34,13 +26,8 @@ module.exports = function DoNothing(options,UI) {
 
       // Tell Image Sequencer that this step is complete
       callback();
-
-      // These values are accessible to the UI
-      options.step.output = input.src;
       options.step.qrval = decoded;
 
-      // Tell the UI that the step is complete and output is set
-      UI.onComplete(options.step);
     });
 
   }

src/modules/DecodeQr/index.js

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

src/modules/DecodeQr/info.json

@@ -1,5 +1,6 @@
 {
   "name": "Decode QR",
+  "description": "Search for and decode a QR code in the image",
   "inputs": {
   },
   "outputs": {

src/modules/Dynamic/Module.js

@@ -1,17 +1,13 @@
 module.exports = function Dynamic(options,UI) {
 
-  options = options || {};
-  options.title = "Dynamic";
-
-  // Tell the UI that a step has been set up.
-  UI.onSetup(options.step);
   var output;
 
   // This function is called on every draw.
-  function draw(input,callback) {
+  function draw(input,callback,progressObj) {
+
+    progressObj.stop(true);
+    progressObj.overrideFlag = true;
 
-    // Tell the UI that the step is being drawn
-    UI.onDraw(options.step);
     var step = this;
 
     // start with monochrome, but if options.red, options.green, and options.blue are set, accept them too
@@ -35,32 +31,44 @@ module.exports = function Dynamic(options,UI) {
     });
 
     function changePixel(r, g, b, a) {
+
+      /* neighbourpixels can be calculated by
+       this.getNeighbourPixel.fun(x,y)  or this.getNeighborPixel.fun(x,y)
+       */
       var combined = (r + g + b) / 3.000;
       return [
-        options.red_function(  r, g, b, a),
+        options.red_function(r, g, b, a),
         options.green_function(r, g, b, a),
-        options.blue_function( r, g, b, a),
+        options.blue_function(r, g, b, a),
         options.alpha_function(r, g, b, a),
       ];
     }
 
+    /* Functions to get the neighbouring pixel by position (x,y) */
+    function getNeighbourPixel(pixels,curX,curY,distX,distY){
+      return [
+         pixels.get(curX+distX,curY+distY,0)
+        ,pixels.get(curX+distX,curY+distY,1)
+        ,pixels.get(curX+distX,curY+distY,2)
+        ,pixels.get(curX+distX,curY+distY,3)
+      ]
+    }
+
+
     function output(image,datauri,mimetype){
 
       // This output is accessible by Image Sequencer
       step.output = { src: datauri, format: mimetype };
 
-      // This output is accessible by the UI
-      options.step.output = datauri;
-
-      // Tell the UI that the draw is complete
-      UI.onComplete(options.step);
-
     }
     return require('../_nomodule/PixelManipulation.js')(input, {
       output: output,
       changePixel: changePixel,
+      getNeighbourPixel: getNeighbourPixel,
+      getNeighborPixel: getNeighbourPixel,
       format: input.format,
       image: options.image,
+      inBrowser: options.inBrowser,
       callback: callback
     });
 

src/modules/Dynamic/index.js

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

src/modules/Dynamic/info.json

@@ -1,5 +1,6 @@
 {
   "name": "Dynamic",
+  "description": "A module which accepts JavaScript math expressions to produce each color channel based on the original image's color. See <a href='https://publiclab.org/wiki/infragram-sandbox'>Infragrammar</a>.",
   "inputs": {
     "red": {
       "type": "input",

src/modules/EdgeDetect/EdgeUtils.js

@@ -0,0 +1,177 @@
+const _ = require('lodash')
+
+//define kernels for the sobel filter
+const kernelx = [[-1, 0, 1], [-2, 0, 2], [-1, 0, 1]],
+    kernely = [[-1, -2, -1], [0, 0, 0], [1, 2, 1]];
+
+let angles = [], mags = [], strongEdgePixels = [], weakEdgePixels = [], notInUI;
+module.exports = function(pixels, highThresholdRatio, lowThresholdRatio, inBrowser) {
+    notInUI = !inBrowser;
+    for (var x = 0; x < pixels.shape[0]; x++) {
+        angles.push([]);
+        mags.push([]);
+        for (var y = 0; y < pixels.shape[1]; y++) {
+            var result = changePixel(
+                pixels,
+                pixels.get(x, y, 0),
+                pixels.get(x, y, 3),
+                x,
+                y
+            );
+            let pixel = result.pixel;
+
+            pixels.set(x, y, 0, pixel[0]);
+            pixels.set(x, y, 1, pixel[1]);
+            pixels.set(x, y, 2, pixel[2]);
+            pixels.set(x, y, 3, pixel[3]);
+
+            mags.slice(-1)[0].push(pixel[3]);
+            angles.slice(-1)[0].push(result.angle);
+        }
+    }
+
+    return doubleThreshold(nonMaxSupress(pixels), highThresholdRatio, lowThresholdRatio);
+}
+
+//changepixel function that convolutes every pixel (sobel filter)
+function changePixel(pixels, val, a, x, y) {
+    let magX = 0.0;
+    for (let a = 0; a < 3; a++) {
+        for (let b = 0; b < 3; b++) {
+
+            let xn = x + a - 1;
+            let yn = y + b - 1;
+
+            magX += pixels.get(xn, yn, 0) * kernelx[a][b];
+        }
+    }
+    let magY = 0.0;
+    for (let a = 0; a < 3; a++) {
+        for (let b = 0; b < 3; b++) {
+
+            let xn = x + a - 1;
+            let yn = y + b - 1;
+
+            magY += pixels.get(xn, yn, 0) * kernely[a][b];
+        }
+    }
+    let mag = Math.sqrt(Math.pow(magX, 2) + Math.pow(magY, 2));
+    let angle = Math.atan2(magY, magX);
+    return {
+        pixel:
+            [val, val, val, mag],
+        angle: angle
+    };
+}
+
+//Non Maximum Supression without interpolation
+function nonMaxSupress(pixels) {
+
+    angles = angles.map((arr) => arr.map(convertToDegrees));
+
+    for (let i = 1; i < pixels.shape[0] - 1; i++) {
+        for (let j = 1; j < pixels.shape[1] - 1; j++) {
+
+            let angle = angles[i][j];
+            let pixel = pixels.get(i, j);
+
+            if ((angle >= -22.5 && angle <= 22.5) ||
+                (angle < -157.5 && angle >= -180))
+
+                if ((mags[i][j] >= mags[i][j + 1]) &&
+                    (mags[i][j] >= mags[i][j - 1]))
+                    pixels.set(i, j, 3, mags[i][j]);
+                else
+                    pixels.set(i, j, 3, 0);
+
+            else if ((angle >= 22.5 && angle <= 67.5) ||
+                (angle < -112.5 && angle >= -157.5))
+
+                if ((mags[i][j] >= mags[i + 1][j + 1]) &&
+                    (mags[i][j] >= mags[i - 1][j - 1]))
+                    pixels.set(i, j, 3, mags[i][j]);
+                else
+                    pixels.set(i, j, 3, 0);
+
+            else if ((angle >= 67.5 && angle <= 112.5) ||
+                (angle < -67.5 && angle >= -112.5))
+
+                if ((mags[i][i] >= mags[i + 1][j]) &&
+                    (mags[i][j] >= mags[i][j]))
+                    pixels.set(i, j, 3, mags[i][j]);
+                else
+                    pixels.set(i, j, 3, 0);
+
+            else if ((angle >= 112.5 && angle <= 157.5) ||
+                (angle < -22.5 && angle >= -67.5))
+
+                if ((mags[i][j] >= mags[i + 1][j - 1]) &&
+                    (mags[i][j] >= mags[i - 1][j + 1]))
+                    pixels.set(i, j, 3, mags[i][j]);
+                else
+                    pixels.set(i, j, 3, 0);
+
+        }
+    }
+    return pixels;
+}
+//Converts radians to degrees
+var convertToDegrees = radians => (radians * 180) / Math.PI;
+
+//Finds the max value in a 2d array like mags
+var findMaxInMatrix = arr => Math.max(...arr.map(el => el.map(val => !!val ? val : 0)).map(el => Math.max(...el)));
+
+//Applies the double threshold to the image
+function doubleThreshold(pixels, highThresholdRatio, lowThresholdRatio) {
+
+    const highThreshold = findMaxInMatrix(mags) * 0.2;
+    const lowThreshold = highThreshold * lowThresholdRatio;
+
+    for (let i = 0; i < pixels.shape[0]; i++) {
+        for (let j = 0; j < pixels.shape[1]; j++) {
+            let pixelPos = [i, j];
+
+            mags[i][j] > lowThreshold
+                ? mags[i][j] > highThreshold
+                    ? strongEdgePixels.push(pixelPos)
+                    : weakEdgePixels.push(pixelPos)
+                : pixels.set(i, j, 3, 0);
+        }
+    }
+
+    strongEdgePixels.forEach(pix => pixels.set(pix[0], pix[1], 3, 255));
+
+    return pixels;
+}
+
+//  hysteresis edge tracking algorithm -- not working as of now
+/* function hysteresis(pixels) {
+    function getNeighbouringPixelPositions(pixelPosition) {
+        let x = pixelPosition[0], y = pixelPosition[1]
+        return [[x + 1, y + 1],
+        [x + 1, y],
+        [x + 1, y - 1],
+        [x, y + 1],
+        [x, y - 1],
+        [x - 1, y + 1],
+        [x - 1, y],
+        [x - 1, y - 1]]
+    }
+
+    //This can potentially be improved see  https://en.wikipedia.org/wiki/Connected-component_labeling
+     for (weakPixel in weakEdgePixels) {
+         let neighbourPixels = getNeighbouringPixelPositions(weakEdgePixels[weakPixel])
+         for (pixel in neighbourPixels) {
+             if (strongEdgePixels.find(el => _.isEqual(el, neighbourPixels[pixel]))) {
+                 pixels.set(weakPixel[0], weakPixel[1], 3, 255)
+                 weakEdgePixels.splice(weakPixel, weakPixel)
+                 break
+             }
+         }
+     }
+     weakEdgePixels.forEach(pix => pixels.set(pix[0], pix[1], 3, 0))
+     return pixels
+} */
+
+
+

src/modules/EdgeDetect/Module.js

@@ -0,0 +1,56 @@
+/*
+* Detect Edges in an Image
+*/
+module.exports = function edgeDetect(options,UI) {
+
+  options.blur = options.blur || 2;
+  options.highThresholdRatio = options.highThresholdRatio||0.2;
+  options.lowThresholdRatio = options.lowThresholdRatio||0.15;
+
+  var output;
+
+  // The function which is called on every draw.
+  function draw(input,callback,progressObj) {
+
+    progressObj.stop(true);
+    progressObj.overrideFlag = true;
+
+    var step = this;
+
+
+    //   Extra Manipulation function used as an enveloper for applying gaussian blur and Convolution
+    function extraManipulation(pixels){
+      pixels = require('ndarray-gaussian-filter')(pixels,options.blur);
+      return require('./EdgeUtils')(pixels,options.highThresholdRatio,options.lowThresholdRatio,options.inBrowser);
+    }
+
+    function changePixel(r, g, b, a) {
+      return [(r+g+b)/3, (r+g+b)/3, (r+g+b)/3, 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,
+      extraManipulation: extraManipulation,
+      format: input.format,
+      image: options.image,
+      inBrowser: options.inBrowser,
+      callback: callback
+    });
+
+  }
+
+  return {
+    options: options,
+    draw:  draw,
+    output: output,
+    UI: UI
+  }
+}

src/modules/EdgeDetect/index.js

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

src/modules/EdgeDetect/info.json

@@ -0,0 +1,21 @@
+{
+    "name": "Detect Edges",
+    "description": "this module detects edges using the Canny method, which first Gaussian blurs the image to reduce noise (amount of blur configurable in settings as `options.blur`), then applies a number of steps to highlight edges, resulting in a greyscale image where the brighter the pixel, the stronger the detected edge. Read more at: https://en.wikipedia.org/wiki/Canny_edge_detector",
+    "inputs": {
+        "blur": {
+            "type": "integer",
+            "desc": "amount of gaussian blur(Less blur gives more detail, typically 0-5)",
+            "default": 2
+        },
+        "highThresholdRatio":{
+            "type": "float",
+            "desc": "The high threshold ratio for the image",
+            "default": 0.2
+        },
+        "lowThresholdRatio": {
+            "type": "float",
+            "desc": "The low threshold value for the image",
+            "default": 0.15
+        }
+    }
+}

src/modules/FisheyeGl/Module.js

@@ -3,20 +3,12 @@
  */
 module.exports = function DoNothing(options,UI) {
 
-  options = options || {};
-  options.title = "Fisheye GL";
-
   var output;
 
-  // Tell the UI that a step has been set up.
-  UI.onSetup(options.step);
   require('fisheyegl');
 
   function draw(input,callback) {
 
-    // Tell the UI that the step is being drawn
-    UI.onDraw(options.step);
-
     var step = this;
 
     if (!options.inBrowser) { // This module is only for browser
@@ -61,13 +53,9 @@ module.exports = function DoNothing(options,UI) {
         // this output is accessible to Image Sequencer
         step.output = {src: canvas.toDataURL(), format: input.format};
 
-        // This output is accessible to the UI
-        options.step.output = step.output.src;
-
         // Tell Image Sequencer and UI that step has been drawn
         callback();
-        UI.onComplete(options.step);
-        
+
       });
 
     }

src/modules/FisheyeGl/index.js

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

src/modules/FisheyeGl/info.json

@@ -1,5 +1,7 @@
 {
   "name": "Fisheye GL",
+  "description": "Correct fisheye, or barrel distortion, in images (with WebGL -- adapted from fisheye-correction-webgl by @bluemir).",
+  "requires": [ "webgl" ],
   "inputs": {
     "a": {
       "type": "float",

src/modules/Gradient/Module.js

@@ -0,0 +1,62 @@
+module.exports = function Invert(options, UI) {
+
+    var output;
+
+    // The function which is called on every draw.
+    function draw(input, callback, progressObj) {
+        var getPixels = require('get-pixels');
+        var savePixels = require('save-pixels');
+
+        var step = this;
+
+        getPixels(input.src, function(err, pixels) {
+
+            if (err) {
+                console.log("Bad Image path");
+                return;
+            }
+            var width = 0;
+
+            for (var i = 0; i < pixels.shape[0]; i++) width++;
+
+            for (var i = 0; i < pixels.shape[0]; i++) {
+                for (var j = 0; j < pixels.shape[1]; j++) {
+                    let val = (i / width) * 255;
+                    pixels.set(i, j, 0, val);
+                    pixels.set(i, j, 1, val);
+                    pixels.set(i, j, 2, val);
+                    pixels.set(i, j, 3, 255);
+                }
+            }
+            var chunks = [];
+            var totalLength = 0;
+            var r = savePixels(pixels, input.format, { quality: 100 });
+
+            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/" + input.format + ";base64," + data;
+                output(input.image, datauri, input.format);
+                callback();
+            });
+        });
+
+        function output(image, datauri, mimetype) {
+
+            // This output is accessible by Image Sequencer
+            step.output = { src: datauri, format: mimetype };
+
+        }
+    }
+
+    return {
+        options: options,
+        draw: draw,
+        output: output,
+        UI: UI
+    }
+}

src/modules/Gradient/index.js

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

src/modules/Gradient/info.json

@@ -0,0 +1,5 @@
+{
+    "name": "Gradient",
+    "description": "Gives a gradient of the image",
+    "inputs": {}
+}

src/modules/GreenChannel/info.json

@@ -1,5 +0,0 @@
-{
-  "name": "Green Channel",
-  "inputs": {
-  }
-}

src/modules/ImportImage/Module.js

@@ -0,0 +1,58 @@
+/*
+ * Import Image module; this fetches a given remote or local image via URL
+ * or data-url, and overwrites the current one. It saves the original as
+ * step.metadata.input for use in future modules such as blending.
+ * TODO: we could accept an operation for blending like "screen" or "overlay",
+ * or a function with blend(r1,g1,b1,a1,r2,g2,b2,a2), OR we could simply allow
+ * subsequent modules to do this blending and keep this one simple.
+ */
+module.exports = function ImportImageModule(options, UI) {
+
+  options.imageUrl = options.url || "./images/monarch.png";
+
+  var output,
+      imgObj = new Image();
+
+  // we should get UI to return the image thumbnail so we can attach our own UI extensions
+
+  // add our custom in-module html ui:
+  if (options.step.inBrowser) {
+    var ui = require('./Ui.js')(options.step, UI);
+    ui.setup();
+  }
+
+  // This function is caled everytime the step has to be redrawn
+  function draw(input,callback) {
+
+    var step = this;
+
+    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 {
+    options: options,
+    draw: draw,
+    output: output,
+    UI: UI
+  }
+}

src/modules/ImportImage/Ui.js

@@ -0,0 +1,54 @@
+// hide on save
+module.exports = function ImportImageModuleUi(step, ui) {
+
+  function setup(setImage, onLoad) {
+
+    // generate a unique timestamp based id for the dropzone
+    var dropzoneId = 'dropzone-import-image-' + step.ID;
+
+    // add a file input listener
+    var dropZone ='\
+    <div style="padding: 30px;margin: 10px 20% 30px;border: 4px dashed #ccc;border-radius: 8px;text-align: center;color: #444;" id="' + dropzoneId + '">\
+      <p>\
+        <i>Select or drag in an image to overlay.</i>\
+      </p>\
+      <center>\
+        <input type="file" class="file-input" value="">\
+      </center>\
+    </div>';
+
+    // insert into .details area
+    // TODO: develop API-based consistent way to add UI elements
+    $(step.ui)
+      .find('.details')
+      .prepend(dropZone);
+
+    // setup file input listener
+    sequencer.setInputStep({
+      dropZoneSelector: "#" + dropzoneId,
+      fileInputSelector: "#" + dropzoneId + " .file-input",
+      onLoad: function onLoadFromInput(progress) {
+        var reader = progress.target;
+        step.options.imageUrl = reader.result;
+        step.options.url = reader.result;
+        sequencer.run();
+        setUrlHashParameter("steps", sequencer.toString());
+      }
+    });
+
+    $(step.ui)
+      .find('.btn-save').on('click', function onClickSave() {
+
+        var src = $(step.ui)
+          .find('.det input').val();
+        step.options.imageUrl = src;
+        sequencer.run();
+
+    });
+
+  }
+
+  return {
+    setup: setup
+  }
+}

src/modules/ImportImage/index.js

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

src/modules/ImportImage/info.json

@@ -0,0 +1,12 @@
+{
+  "name": "Import Image",
+  "description": "Import a new image and replace the original with it. Future versions may enable a blend mode. Specify an image by URL or by file selector.",
+  "url": "https://github.com/publiclab/image-sequencer/tree/master/MODULES.md",
+  "inputs": {
+    "url": {
+      "type": "string",
+      "desc": "URL of image to import",
+      "default": "./images/monarch.png"
+    }
+  }
+}

src/modules/Invert/Module.js

@@ -1,45 +1,35 @@
 /*
  * Invert the image
  */
-module.exports = function Invert(options,UI) {
+function Invert(options, UI) {
 
-  options = options || {};
-  options.title = "Invert Colors";
-  options.description = "Inverts the colors of the image";
-
-  // Tell UI that a step has been set up.
-  UI.onSetup(options.step);
   var output;
 
   // The function which is called on every draw.
-  function draw(input,callback) {
+  function draw(input, callback, progressObj) {
 
-    // Tell UI that a step is being drawn.
-    UI.onDraw(options.step);
+    progressObj.stop(true);
+    progressObj.overrideFlag = true;
 
     var step = this;
 
     function changePixel(r, g, b, a) {
-      return [255-r, 255-g, 255-b, a];
+      return [255 - r, 255 - g, 255 - b, a];
     }
 
-    function output(image,datauri,mimetype){
+    function output(image, datauri, mimetype) {
 
       // This output is accessible by Image Sequencer
-      step.output = {src:datauri,format:mimetype};
+      step.output = { src: datauri, format: mimetype };
 
-      // This output is accessible by UI
-      options.step.output = datauri;
-
-      // Tell UI that step has been drawn.
-      UI.onComplete(options.step);
     }
 
-    return require('../_nomodule/PixelManipulation.js')(input, {
+    return input.pixelManipulation({
       output: output,
       changePixel: changePixel,
       format: input.format,
       image: options.image,
+      inBrowser: options.inBrowser,
       callback: callback
     });
 
@@ -47,8 +37,15 @@ module.exports = function Invert(options,UI) {
 
   return {
     options: options,
-    draw:  draw,
+    draw: draw,
     output: output,
     UI: UI
   }
 }
+var info = {
+  "name": "Invert",
+  "description": "Inverts the image.",
+  "inputs": {
+  }
+}
+module.exports = [Invert, info];

src/modules/Ndvi/Module.js

@@ -0,0 +1,58 @@
+/*
+ * NDVI with red filter (blue channel is infrared)
+ */
+module.exports = function Ndvi(options, UI) {
+
+  if (options.step.inBrowser) var ui = require('./Ui.js')(options.step, UI);
+
+  options.filter = options.filter || "red";
+
+  var output;
+
+  // The function which is called on every draw.
+  function draw(input, callback, progressObj) {
+
+    progressObj.stop(true);
+    progressObj.overrideFlag = true;
+
+    var step = this;
+
+    function changePixel(r, g, b, a) {
+      if (options.filter == "red") var ndvi = (b - r) / (1.00 * b + r);
+      if (options.filter == "blue") var ndvi = (r - b) / (1.00 * b + r);
+      var x = 255 * (ndvi + 1) / 2;
+      return [x, x, x, a];
+    }
+
+    function output(image, datauri, mimetype) {
+
+      // This output is accessible by Image Sequencer
+      step.output = { src: datauri, format: mimetype };
+
+    }
+
+    function modifiedCallback() {
+      if (options.step.inBrowser) {
+        ui.setup();
+      }
+      callback();
+    }
+
+    return require('../_nomodule/PixelManipulation.js')(input, {
+      output: output,
+      changePixel: changePixel,
+      format: input.format,
+      image: options.image,
+      inBrowser: options.inBrowser,
+      callback: modifiedCallback
+    });
+
+  }
+
+  return {
+    options: options,
+    draw: draw,
+    output: output,
+    UI: UI
+  }
+}

src/modules/Ndvi/Ui.js

@@ -0,0 +1,31 @@
+// hide on save
+module.exports = function CropModuleUi(step, ui) {
+
+    /* sets the pixel value under the mouse pointer
+     * on the title attribute of the image element.
+    */
+    function setup() {
+        var ndviImage = $(imgEl());
+
+        ndviImage.mousemove(function ndviMousemove(e) {
+
+            var canvas = document.createElement("canvas");
+            canvas.width = ndviImage.width();
+            canvas.height = ndviImage.height();
+            canvas.getContext('2d').drawImage(this, 0, 0);
+
+            var offset = $(this).offset();
+            var xPos = e.pageX - offset.left;
+            var yPos = e.pageY - offset.top;
+            ndviImage[0].title = "NDVI: " + canvas.getContext('2d').getImageData(xPos, yPos, 1, 1).data[0];
+        });
+    }
+    // step.imgSelector is not defined, imgElement is:
+    function imgEl() {
+        return step.imgElement;
+    }
+
+    return {
+        setup: setup
+    }
+}

src/modules/Ndvi/index.js

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

src/modules/Ndvi/info.json

@@ -0,0 +1,12 @@
+{
+  "name": "NDVI",
+  "description": "Normalized Difference Vegetation Index, or NDVI, is an image analysis technique used with aerial photography. It's a way to visualize the amounts of infrared and other wavelengths of light reflected from vegetation by comparing ratios of blue and red light absorbed versus green and IR light reflected. NDVI is used to evaluate the health of vegetation in satellite imagery, where it correlates with how much photosynthesis is happening. This is helpful in assessing vegetative health or stress. <a href='https://publiclab.org/ndvi'>Read more</a>.<br /><br/>This is designed for use with red-filtered single camera <a href='http://publiclab.org/infragram'>DIY Infragram cameras</a>; change to 'blue' for blue filters",
+  "inputs": {
+    "filter": {
+      "type": "select",
+      "desc": "Filter color",
+      "default": "red",
+      "values": ["red", "blue"]
+    }
+  }
+}

src/modules/NdviColormap/Module.js

@@ -0,0 +1,9 @@
+/*
+ * Sample Meta Module for demonstration purpose only
+ */
+module.exports = function NdviColormapfunction() {
+    this.expandSteps([{ 'name': 'ndvi', 'options': {} }, { 'name': 'colormap', options: {} }]);
+    return {
+        isMeta: true
+    }
+}

src/modules/NdviColormap/index.js

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

src/modules/NdviColormap/info.json

@@ -0,0 +1,6 @@
+{
+    "name": "NDVI-Colormap",
+    "description": "Sequentially Applies NDVI and Colormap steps",
+    "inputs": {},
+    "length": 2
+}

src/modules/NdviRed/Module.js

@@ -1,54 +0,0 @@
-/*
- * NDVI with red filter (blue channel is infrared)
- */
-module.exports = function NdviRed(options,UI) {
-
-  options = options || {};
-  options.title = "NDVI for red-filtered cameras (blue is infrared)";
-
-  // Tell the UI that a step has been set up.
-  UI.onSetup(options.step);
-  var output;
-
-  // The function which is called on every draw.
-  function draw(input,callback) {
-
-    // Tell the UI that a step is being drawn.
-    UI.onDraw(options.step);
-    var step = this;
-
-    function changePixel(r, g, b, a) {
-      var ndvi = (b - r) / (1.00 * b + r);
-      var x = 255 * (ndvi + 1) / 2;
-      return [x, x, x, a];
-    }
-
-    function output(image,datauri,mimetype){
-
-      // This output is accessible by Image Sequencer
-      step.output = {src:datauri,format:mimetype};
-
-      // This output is accessible by the UI.
-      options.step.output = datauri;
-
-      // Tell the UI that step has been drawn succesfully.
-      UI.onComplete(options.step);
-    }
-    
-    return require('../_nomodule/PixelManipulation.js')(input, {
-      output: output,
-      changePixel: changePixel,
-      format: input.format,
-      image: options.image,
-      callback: callback
-    });
-
-  }
-
-  return {
-    options: options,
-    draw: draw,
-    output: output,
-    UI:UI
-  }
-}

src/modules/NdviRed/info.json

@@ -1,5 +0,0 @@
-{
-  "name": "NDVI Red",
-  "inputs": {
-  }
-}

src/modules/Overlay/Module.js

@@ -0,0 +1,70 @@
+module.exports = function Dynamic(options, UI, util) {
+
+    options.x = options.x || 0;
+    options.y = options.y || 0;
+
+    var output;
+
+    // This function is called on every draw.
+    function draw(input, callback, progressObj) {
+
+        options.offset = options.offset || -2;
+
+        progressObj.stop(true);
+        progressObj.overrideFlag = true;
+
+        var step = this;
+
+        // save the pixels of the base image
+        var baseStepImage = this.getStep(options.offset).image;
+        var baseStepOutput = this.getOutput(options.offset);
+
+        var getPixels = require('get-pixels');
+
+        getPixels(input.src, function(err, pixels) {
+            options.secondImagePixels = pixels;
+
+            function changePixel(r1, g1, b1, a1, x, y) {
+
+                // overlay
+                var p = options.secondImagePixels;
+                if (x >= options.x
+                    && x < p.shape[0]
+                    && y >= options.y
+                    && y < p.shape[1])
+                    return [
+                        p.get(x, y, 0),
+                        p.get(x, y, 1),
+                        p.get(x, y, 2),
+                        p.get(x, y, 3)
+                    ];
+                else
+                    return [r1, g1, b1, a1];
+            }
+
+            function output(image, datauri, mimetype) {
+
+                // This output is accessible by Image Sequencer
+                step.output = { src: datauri, format: mimetype };
+
+            }
+
+            // run PixelManipulation on first Image pixels
+            return require('../_nomodule/PixelManipulation.js')(baseStepOutput, {
+                output: output,
+                changePixel: changePixel,
+                format: baseStepOutput.format,
+                image: baseStepImage,
+                inBrowser: options.inBrowser,
+                callback: callback
+            });
+        });
+    }
+
+    return {
+        options: options,
+        draw: draw,
+        output: output,
+        UI: UI
+    }
+}

src/modules/Overlay/index.js

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

src/modules/Overlay/info.json

@@ -0,0 +1,21 @@
+{
+    "name": "Overlay",
+    "description": "Overlays an Image over another at a given position(x,y)",
+    "inputs": {
+        "x": {
+            "type": "integer",
+            "desc": "X-position of the image on which the new image is overlayed",
+            "default": 0
+        },
+        "y": {
+            "type": "integer",
+            "desc": "Y-position of the image on which the new image is overlayed",
+            "default": 0
+        },
+        "offset": {
+            "type": "integer",
+            "desc": "offset to the output of the step on which the output of the last step is overlayed",
+            "default": -2
+        }
+    }
+}

src/modules/Saturation/Module.js

@@ -1,24 +1,31 @@
 /*
- * Display only the green channel
+ * Saturate an image with a value from 0 to 1
  */
-module.exports = function GreenChannel(options,UI) {
+module.exports = function Saturation(options,UI) {
 
-  options = options || {};
-  options.title = "Green channel only";
-  options.description = "Displays only the green channel of an image";
-
-  // Tell UI that a step has been set up
-  UI.onSetup(options.step);
   var output;
 
-  function draw(input,callback) {
+  function draw(input,callback,progressObj) {
+
+    progressObj.stop(true);
+    progressObj.overrideFlag = true;
 
-    // Tell UI that a step is being drawn
-    UI.onDraw(options.step);
     var step = this;
 
     function changePixel(r, g, b, a) {
-      return [0, g, 0, a];
+
+      var cR = 0.299;
+      var cG = 0.587;
+      var cB = 0.114;
+
+      var p = Math.sqrt((cR * (r*r)) + (cG * (g*g)) + (cB * (g*g)));
+
+      r = p+(r-p)*(options.saturation);
+      g = p+(g-p)*(options.saturation);
+      b = p+(b-p)*(options.saturation);
+
+
+      return [Math.round(r), Math.round(g), Math.round(b), a];
     }
 
     function output(image,datauri,mimetype){
@@ -26,11 +33,6 @@ module.exports = function GreenChannel(options,UI) {
       // This output is accesible by Image Sequencer
       step.output = {src:datauri,format:mimetype};
 
-      // This output is accessible by UI
-      options.step.output = datauri;
-
-      // Tell UI that step ahs been drawn
-      UI.onComplete(options.step);
     }
 
     return require('../_nomodule/PixelManipulation.js')(input, {
@@ -38,6 +40,7 @@ module.exports = function GreenChannel(options,UI) {
       changePixel: changePixel,
       format: input.format,
       image: options.image,
+      inBrowser: options.inBrowser,
       callback: callback
     });
 

src/modules/Saturation/index.js

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

src/modules/Saturation/info.json

@@ -0,0 +1,11 @@
+{
+    "name": "Saturation",
+    "description": "Change the saturation of the image by given value, from 0-1, with 1 being 100% saturated.",
+    "inputs": {
+        "saturation": {
+            "type": "integer",
+            "desc": "saturation for the new image between 0 and 2, 0 being black and white and 2 being highly saturated",
+            "default": 0
+        }
+    }
+}

src/modules/SegmentedColormap/info.json

@@ -1,11 +0,0 @@
-{
-  "name": "Segmented Colormap",
-  "inputs": {
-    "colormap": {
-      "type": "select",
-      "desc": "Name of the Colormap",
-      "default": "default",
-      "values": ["default","greyscale","stretched","fastie"]
-    }
-  }
-}

src/modules/Threshold/ImageThreshold.js

@@ -3,7 +3,6 @@
  */
 module.exports = function ImageThreshold(options) {
   options = options || {};
-  options.title = "Threshold image";
   options.threshold = options.threshold || 30;
 
   var image;

src/modules/Threshold/info.json

@@ -0,0 +1,6 @@
+{
+  "name": "Threshold image",
+  "description": "...",
+  "inputs": {
+  }
+}

src/modules/_nomodule/PixelManipulation.js

@@ -1,34 +1,66 @@
 /*
- * General purpose per-pixel manipulation
- * accepting a changePixel() method to remix a pixel's channels
- */
+* General purpose per-pixel manipulation
+* accepting a changePixel() method to remix a pixel's channels
+*/
 module.exports = function PixelManipulation(image, options) {
 
+  // To handle the case where pixelmanipulation is called on the input object itself
+  // like input.pixelManipulation(options)
+  if(arguments.length <= 1){
+    options = image;
+    image = this;
+  }
+
   options = options || {};
-  options.changePixel = options.changePixel || function changePixel(r, g, b, a) {
-    return [r, g, b, a];
-  };
-  var getPixels = require('get-pixels'),
-      savePixels = require('save-pixels');
+  options.changePixel =
+    options.changePixel ||
+    function changePixel(r, g, b, a) {
+      return [r, g, b, a];
+    };
 
-  getPixels(image.src, function(err, pixels) {
+  //
+  options.extraManipulation =
+    options.extraManipulation ||
+    function extraManipulation(pixels) {
+      return pixels;
+    };
 
-    if(err) {
-      console.log('Bad image path');
+  var getPixels = require("get-pixels"),
+    savePixels = require("save-pixels");
+
+  getPixels(image.src, function (err, pixels) {
+    if (err) {
+      console.log("Bad image path", image);
       return;
     }
 
-    // iterate through pixels;
-    // this could possibly be more efficient; see
-    // https://github.com/p-v-o-s/infragram-js/blob/master/public/infragram.js#L173-L181
-    for(var x = 0; x < pixels.shape[0]; x++) {
-      for(var y = 0; y < pixels.shape[1]; y++) {
+    if (options.getNeighbourPixel) {
+      options.getNeighbourPixel.fun = function getNeighborPixel(distX, distY) {
+        return options.getNeighbourPixel(pixels, x, y, distX, distY);
+      };
+    }
 
+    // iterate through pixels;
+    // TODO: this could possibly be more efficient; see
+    // https://github.com/p-v-o-s/infragram-js/blob/master/public/infragram.js#L173-L181
+
+    if (!options.inBrowser && !process.env.TEST) {
+      try {
+        var pace = require("pace")(pixels.shape[0] * pixels.shape[1]);
+      } catch (e) {
+        options.inBrowser = true;
+      }
+    }
+
+    for (var x = 0; x < pixels.shape[0]; x++) {
+      for (var y = 0; y < pixels.shape[1]; y++) {
         var pixel = options.changePixel(
           pixels.get(x, y, 0),
           pixels.get(x, y, 1),
           pixels.get(x, y, 2),
-          pixels.get(x, y, 3)
+          pixels.get(x, y, 3),
+          x,
+          y
         );
 
         pixels.set(x, y, 0, pixel[0]);
@@ -36,24 +68,29 @@ module.exports = function PixelManipulation(image, options) {
         pixels.set(x, y, 2, pixel[2]);
         pixels.set(x, y, 3, pixel[3]);
 
+        if (!options.inBrowser && !process.env.TEST) pace.op();
       }
     }
 
+    // perform any extra operations on the entire array:
+    if (options.extraManipulation) pixels = options.extraManipulation(pixels);
+
     // there may be a more efficient means to encode an image object,
     // but node modules and their documentation are essentially arcane on this point
     var chunks = [];
     var totalLength = 0;
-    var r = savePixels(pixels, options.format, {quality: 100});
+    var r = savePixels(pixels, options.format, { quality: 100 });
 
-    r.on('data', function(chunk){
+    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);
+    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();
     });
   });