Drag to crop rebase step (#244 )

* 1.1.0 * 1.2.0 * added plugin Signed-off-by: tech4GT <varun.gupta1798@gmail.com> * drag to crop enabled Signed-off-by: tech4GT <varun.gupta1798@gmail.com> * fix Signed-off-by: tech4GT <varun.gupta1798@gmail.com> * improvement Signed-off-by: tech4GT <varun.gupta1798@gmail.com> * done dragToCrop Signed-off-by: tech4GT <varun.gupta1798@gmail.com> * done with updated ui Signed-off-by: tech4GT <varun.gupta1798@gmail.com> * solved bug for multiple consecutive crops Signed-off-by: tech4GT <varun.gupta1798@gmail.com> * fixed and updated Signed-off-by: tech4GT <varun.gupta1798@gmail.com> * externalized image area select code * major refactoring of crop drag and demo ui modules * work on crop module and ui refactor * completed Step drag ui refactor * revert unbuilt to rebase
2025-12-11 02:39:59 +01:00 · 2018-05-04 09:20:03 -04:00
36 changed files with 12411 additions and 14983 deletions
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -1,50 +1,51 @@
-module.exports = function (grunt) {
-  grunt.loadNpmTasks("grunt-browserify");
-  grunt.loadNpmTasks("grunt-contrib-uglify-es");
-  grunt.loadNpmTasks("grunt-browser-sync");
+module.exports = function(grunt) {

-  require("matchdep")
-    .filterDev("grunt-*")
-    .forEach(grunt.loadNpmTasks);
+    grunt.loadNpmTasks('grunt-browserify');
+    grunt.loadNpmTasks('grunt-contrib-uglify');

-  grunt.initConfig({
-    pkg: grunt.file.readJSON("package.json"),
+    require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);

-    watch: {
-      options: {
-        livereload: true
+    grunt.initConfig({
+
+      pkg: grunt.file.readJSON('package.json'),
+
+      watch: {
+          options : {
+              livereload: true
+          },
+          source: {
+              files: [
+                  'src/*.js',
+                  'src/*/*.js',
+                  'src/*/*/*.js',
+                  'Gruntfile.js'
+              ],
+              tasks: [ 'build:js' ]
+          }
      },
-      source: {
-        files: ["src/*.js", "src/*/*.js", "src/*/*/*.js", "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"
-      }
-    },
-    browserSync: {
-      dev: {
-        options: {
-          watchTask: true,
-          server: "./"
+      uglify: {
+        dist: {
+          src: ['./dist/image-sequencer.js'],
+          dest: './dist/image-sequencer.min.js'
        }
      }
-    }
-  });

-  /* 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"]);
+    });
+
+    /* Default (development): Watch files and build on change. */
+    grunt.registerTask('default', ['watch']);
+
+    grunt.registerTask('build', [
+        'browserify:dist',
+        'uglify:dist'
+    ]);
+
 };
--- a/README.md
+++ b/README.md
@@ -45,7 +45,7 @@ A diagram of this running 5 steps on a single sample image may help explain how

 ## Installation

-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`
+This library works in the browser, in Node, and on the commandline (CLI), which we think is great. 

 ### Browser

@@ -204,35 +204,13 @@ modules.
 sequencer.run();
 ```

-Sequencer can be run with a custom config object
+Additionally, an optional callback can be passed to this method.

 ```js
-// 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){
+sequencer.run(function(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)
--- a/dist/image-sequencer.js
+++ b/dist/image-sequencer.js
--- a/dist/image-sequencer.min.js
+++ b/dist/image-sequencer.min.js
--- a/examples/demo.js
+++ b/examples/demo.js
@@ -24,15 +24,5 @@ window.onload = function() {
  $('body').on('click', 'button.remove', ui.removeStepUi);

  // image selection and drag/drop handling from examples/lib/imageSelection.js
-  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(0);
-      step.options.step.imgElement.src = reader.result;
-    }
-  });
+  setupFileHandling(sequencer);
 };
--- a/examples/index.html
+++ b/examples/index.html
@@ -16,6 +16,7 @@
  <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="lib/defaultHtmlStepUi.js" charset="utf-8"></script>
  <script src="lib/defaultHtmlSequencerUi.js" charset="utf-8"></script>
  <script src="demo.js" charset="utf-8"></script>
--- a/examples/lib/defaultHtmlSequencerUi.js
+++ b/examples/lib/defaultHtmlSequencerUi.js
@@ -14,10 +14,12 @@ function DefaultHtmlSequencerUi(_sequencer, options) {
    var hash = getUrlHashParameter("steps");

    if (hash) {
-      _sequencer.importString(hash);
-      _sequencer.run({index:0});
+      var stepsFromHash = hash.split(",");
+      stepsFromHash.forEach(function eachStep(step) {
+        _sequencer.addSteps(step);
+      });
+      _sequencer.run();
    }
-    setUrlHashParameter("steps", sequencer.toString());
  }

  function selectNewStepUi() {
@@ -27,27 +29,25 @@ function DefaultHtmlSequencerUi(_sequencer, options) {

  function removeStepUi() {
    var index = $(removeStepSel).index(this) + 1;
-    sequencer.removeSteps(index).run({index : index-1});
+    sequencer.removeSteps(index).run();
    // remove from URL hash too
-    setUrlHashParameter("steps", sequencer.toString());
+    var urlHash = getUrlHashParameter("steps").split(",");
+    urlHash.splice(index - 1, 1);
+    setUrlHashParameter("steps", urlHash.join(","));
  }

  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
-    */
-    _sequencer
-    .addSteps(newStepName, options)
-    .run({index: _sequencer.images.image1.steps.length - 2});
-
    // add to URL hash too
-    setUrlHashParameter("steps", _sequencer.toString());
+    var hash = getUrlHashParameter("steps") || "";
+    if (hash != "") hash += ",";
+    setUrlHashParameter("steps", hash + $(addStepSel + " select").val());
+
+    var newStepName = $(addStepSel + " select").val();
+    _sequencer
+      .addSteps(newStepName, options)
+      .run(null);
  }

  return {
--- a/examples/lib/defaultHtmlStepUi.js
+++ b/examples/lib/defaultHtmlStepUi.js
@@ -52,7 +52,6 @@ function DefaultHtmlStepUi(_sequencer, options) {
      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 = "";
@@ -73,7 +72,6 @@ function DefaultHtmlStepUi(_sequencer, options) {
            paramName +
            '">';
        }
-
        var div = document.createElement("div");
        div.className = "row";
        div.setAttribute("name", paramName);
@@ -101,14 +99,22 @@ function DefaultHtmlStepUi(_sequencer, options) {
          .each(function(i, input) {
            step.options[$(input).attr("name")] = input.value;
          });
-        _sequencer.run({index: _sequencer.images.image1.steps.length - 2});
-
-        // modify the url hash
-        setUrlHashParameter("steps", _sequencer.toString());
+        _sequencer.run();
      }

+      saveOptions();
+
      // on clicking Save in the details pane of the step
-      $(step.ui.querySelector("div.details .btn-save")).click(saveOptions);
+      $(step.ui.querySelector("div.details .btn-save")).click(
+        function saveOptions() {
+	  $(step.ui.querySelector("div.details"))
+            .find("input,select")
+            .each(function(i, input) {
+              step.options[$(input).attr("name")] = input.value;
+            });
+          _sequencer.run();
+        }
+      );
    }

    if (step.name != "load-image")
@@ -133,7 +139,6 @@ function DefaultHtmlStepUi(_sequencer, options) {
    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];
    }
--- a/examples/lib/imageSelection.js
+++ b/examples/lib/imageSelection.js
@@ -0,0 +1,50 @@
+function setupFileHandling(_sequencer, dropzoneId, fileInputId) {
+
+  dropzoneId = dropzoneId || "dropzone";
+  var dropzone = $('#' + dropzoneId);
+
+  fileInputId = fileInputId || "fileInput";
+  var fileInput = $('#' + fileInputId);
+
+  var reader = new FileReader();
+
+  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;
+
+    var reader = new FileReader();
+    
+    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');
+  });
+
+}
--- a/index.js
+++ b/index.js
@@ -1,11 +1,11 @@
 #!/usr/bin/env node

-require("./src/ImageSequencer");
-sequencer = ImageSequencer({ ui: false });
-var Spinner = require("ora");
+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);
@@ -13,140 +13,127 @@ 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("-b, --basic", "Basic mode outputs only final image")
-  .option("-c, --config [Object]", "Options for the step")
-  .parse(process.argv);
+.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')
+.parse(process.argv);

 // Parse step into an array to allow for multiple steps.
-if (!program.step) exit("No steps passed");
+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.");
+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.");
+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.");
+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/";

 // Set sequencer to log module outputs, if any.
 sequencer.setUI({
+  
  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]);
+      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"
-  );
-
+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
-  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");
-
+  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) {
+    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 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
-        );
+        console.log(new Array(step.length + 5).join(' ') + input + ": " + options[input].desc);
      });
-
-      if (program.config) {
-        try {
+      
+      if(program.config){
+        try{
          program.config = JSON.parse(program.config);
          console.log(`The parsed options object: `, program.config);
-        } catch (e) {
-          console.error(
-            "\x1b[31m%s\x1b[0m",
-            `Options(Config) is not a not valid JSON Fallback activate`
-          );
+        }
+        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(program.config, options)) {
+      if(program.config && validateConfig(program.config,options)){
        console.log("Now using Options object");
-        Object.keys(options).forEach(function(input) {
+        Object.keys(options).forEach(function (input) {
          options[input] = program.config[input];
-        });
-      } else {
+        })
+      }
+      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 +
-              "): "
-          );
+          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();
-
+    
+    var spinnerObj = Spinner('Your Image is being processed..').start();
+    
    // Run the sequencer.
-    sequencer.run({progressObj: spinnerObj}, function() {
+    sequencer.run(spinnerObj,function(){
+
      // Export all images or final image as binary files.
-      sequencer.exportBin(program.output, program.basic);
+      sequencer.exportBin(program.output,program.basic);

      //check if spinner was not overriden stop it
-      if (!spinnerObj.overrideFlag) {
-        spinnerObj.succeed();
-        console.log(`\nDone!!`);
+      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.
+  
+  // 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.
@@ -154,29 +141,25 @@ function validateSteps(steps) {
      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_) {
+//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`
-          );
+    (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
-  )
+    })()
+    == false)
    return false;
-  else return true;
-}
+    else
+    return true;
+  }
--- a/package.json
+++ b/package.json
@@ -1,12 +1,11 @@
 {
  "name": "image-sequencer",
-  "version": "2.1.0",
+  "version": "1.3.3",
  "description": "A modular JavaScript image manipulation library modeled on a storyboard.",
  "main": "src/ImageSequencer.js",
  "scripts": {
-    "debug": "TEST=true node ./index.js -i ./examples/images/monarch.png -s invert",
-    "test": "TEST=true tape test/**/*.js test/*.js | tap-spec; browserify test/modules/image-sequencer.js test/modules/chain.js test/modules/replace.js test/modules/import-export.js test/modules/run.js | tape-run --render=\"tap-spec\"",
-    "start": "grunt serve"
+    "debug": "node ./index.js -i ./examples/images/monarch.png -s",
+    "test": "tape test/**/*.js test/*.js | tap-spec; browserify test/modules/image-sequencer.js test/modules/chain.js test/modules/replace.js | tape-run --render=\"tap-spec\""
  },
  "repository": {
    "type": "git",
@@ -29,7 +28,6 @@
    "fisheyegl": "^0.1.2",
    "font-awesome": "~4.5.0",
    "get-pixels": "~3.3.0",
-    "imgareaselect": "git://github.com/jywarren/imgareaselect.git#v1.0.0-rc.2",
    "jquery": "~2",
    "jsqr": "^0.2.2",
    "lodash": "^4.17.5",
@@ -38,16 +36,16 @@
    "pace": "0.0.4",
    "readline-sync": "^1.4.7",
    "save-pixels": "~2.3.4",
-    "urify": "^2.1.0"
+    "urify": "^2.1.0",
+    "imgareaselect": "git://github.com/jywarren/imgareaselect.git#v1.0.0-rc.2"
  },
  "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-es": "^3.3.0",
+    "grunt-contrib-uglify-es": "git://github.com/gruntjs/grunt-contrib-uglify.git#harmony",
    "grunt-contrib-watch": "^0.6.1",
    "image-filter-core": "~1.0.0",
    "image-filter-threshold": "~1.0.0",
--- a/src/AddStep.js
+++ b/src/AddStep.js
@@ -1,10 +1,8 @@
 // add steps to the sequencer 
-// TODO: reduce redundancy with InsertStep; this should be a specific usage of InsertStep at the final position
 function AddStep(_sequencer, image, name, o) {

  function addStep(image, name, o_) {
-    if (_sequencer.modules[name]) var moduleInfo = _sequencer.modules[name][1];
-    else console.log('Module ' + name + ' not found.');
+    var moduleInfo = _sequencer.modules[name][1];

    var o = _sequencer.copy(o_);
    o.number = _sequencer.options.sequencerCounter++; // gives a unique ID to each step
@@ -25,13 +23,12 @@ function AddStep(_sequencer, image, name, o) {
      options: o
    };
    var UI = _sequencer.events;
-    var module = _sequencer.modules[name][0](o, UI);
+    var module = _sequencer.modules[name][0](o,UI);
    _sequencer.images[image].steps.push(module);

    return true;
  }

  addStep(image, name, o);
-  _sequencer.steps = _sequencer.images[image].steps;
 }
 module.exports = AddStep;
--- a/src/ImageSequencer.js
+++ b/src/ImageSequencer.js
@@ -1,25 +1,23 @@
 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;
  options.sequencerCounter = 0;
-
+  
  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 copy(a) {
    if (!typeof(a) == "object") return a;
    if (objTypeOf(a) == "Array") return a.slice();
@@ -32,11 +30,11 @@ ImageSequencer = function ImageSequencer(options) {
    }
    return a;
  }
-
+  
  function makeArray(input) {
    return (objTypeOf(input)=="Array")?input:[input];
  }
-
+  
  var image,
  steps = [],
  modules = require('./Modules'),
@@ -45,27 +43,27 @@ ImageSequencer = function ImageSequencer(options) {
  inputlog = [],
  events = require('./ui/UserInterface')(),
  fs = require('fs');
-
+  
  // 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];
    var json_q = {};
    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)});
-
+    
    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);
-
+    
    return this;
  }
-
+  
  function removeStep(image,index) {
    //remove the step from images[image].steps and redraw remaining images
    if(index>0) {
@@ -75,16 +73,16 @@ ImageSequencer = function ImageSequencer(options) {
    }
    //tell the UI a step has been removed
  }
-
+  
  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 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];
@@ -94,16 +92,16 @@ ImageSequencer = function ImageSequencer(options) {
    // this.run(run); // This is creating problems
    return this;
  }
-
+  
  function insertSteps(image, index, name, o) {
    var run = {};
    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)});
-
+    
    for (var img in json_q) {
      var details = json_q[img];
      details = details.sort(function(a,b){return b.index-a.index});
@@ -114,49 +112,39 @@ ImageSequencer = function ImageSequencer(options) {
    // this.run(run); // This is Creating issues
    return this;
  }
-
-  // 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;
+  
+  function run(spinnerObj,t_image,t_from) {
+    let progressObj;
+    if(arguments[0] != 'test'){
+      progressObj = spinnerObj
+      delete arguments['0']    
    }

    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() {};
    for (var arg in args)
    if(objTypeOf(args[arg]) == "Function")
    callback = args.splice(arg,1)[0];
-
+    
    var json_q = formatInput.call(this_,args,"r");
-
-    require('./Run')(this_, json_q, callback,index,progressObj);
-
+    
+    require('./Run')(this_, json_q, callback,progressObj);
+    
    return true;
  }
-
+  
  function loadImages() {
    var args = [];
    var sequencer = this;
    for (var arg in arguments) args.push(copy(arguments[arg]));
    var json_q = formatInput.call(this,args,"l");
-
+    
    inputlog.push({method:"loadImages", json_q:copy(json_q)});
    var loadedimages = this.copy(json_q.loadedimages);
-
+    
    var ret = {
      name: "ImageSequencer Wrapper",
      sequencer: this,
@@ -168,7 +156,7 @@ ImageSequencer = function ImageSequencer(options) {
      setUI: this.setUI,
      images: loadedimages
    };
-
+    
    function load(i) {
      if(i==loadedimages.length) {
        json_q.callback.call(ret);
@@ -179,24 +167,24 @@ ImageSequencer = function ImageSequencer(options) {
        load(++i);
      });
    }
-
+    
    load(0);
  }
-
+  
  function replaceImage(selector,steps,options) {
    options = options || {};
    options.callback = options.callback || function() {};
    return require('./ReplaceImage')(this,selector,steps,options);
  }
-
+  
  function setUI(UI) {
    this.events = require('./ui/UserInterface')(UI);
  }
-
+  
  var exportBin = function(dir,basic) {
    return require('./ExportBin')(dir,this,basic);
  }
-
+  
  function modulesInfo(name) {
    var modulesdata = {}
    if(name == "load-image") return {};
@@ -207,91 +195,7 @@ ImageSequencer = function ImageSequencer(options) {
    else modulesdata = modules[name][1];
    return modulesdata;
  }
-
-  // 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(str){
-    return this.stringToJSON(this.toString());
-  }
-
-  // Coverts stringified sequence into an array of JSON steps
-  function stringToJSON(str){
-    let steps = str.split(',');
-    return steps.map(stringToJSONstep);
-  }
-
-  // Converts one stringified step into JSON
-  function stringToJSONstep(str){
-    if(str.indexOf('(') === -1) { // if there are no settings specified
-      var moduleName = str.substr(0);
-      stepSettings = "";
-    } else {
-      var moduleName = str.substr(0, str.indexOf('('));
-      stepSettings = str.slice(str.indexOf('(') + 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 = decodeURIComponent(settingValue);
-      current = [
-        settingName,
-        settingValue
-      ];
-      if (!!settingName) accumulator[settingName] = settingValue;
-      return accumulator;
-    }, {});
-
-    return {
-      name : moduleName,
-      options: stepSettings
-    }
-  }
-
-  // imports a string into the sequencer steps
-  function importString(str){
-    let sequencer = this;
-    if(this.name != "ImageSequencer")
-    sequencer = this.sequencer;
-    var stepsFromString = stringToJSON(str);
-    stepsFromString.forEach(function eachStep(stepObj) {
-      sequencer.addSteps(stepObj.name,stepObj.options);
-    });
-  }
-
-  // imports a array of JSON steps into the sequencer steps
-  function importJSON(obj){
-    let sequencer = this;
-    if(this.name != "ImageSequencer")
-    sequencer = this.sequencer;
-    obj.forEach(function eachStep(stepObj) {
-      sequencer.addSteps(stepObj.name,stepObj.options);
-    });
-  }
-
+  
  return {
    //literals and objects
    name: "ImageSequencer",
@@ -300,7 +204,7 @@ ImageSequencer = function ImageSequencer(options) {
    modules: modules,
    images: images,
    events: events,
-
+    
    //user functions
    loadImages: loadImages,
    loadImage: loadImages,
@@ -312,21 +216,12 @@ ImageSequencer = function ImageSequencer(options) {
    setUI: setUI,
    exportBin: exportBin,
    modulesInfo: modulesInfo,
-    toString: toString,
-    stepToString: stepToString,
-    toJSON: toJSON,
-    stringToJSON: stringToJSON,
-    stringToJSONstep: stringToJSONstep,
-    importString: importString,
-    importJSON: importJSON,
-
+    
    //other functions
    log: log,
    objTypeOf: objTypeOf,
-    copy: copy,
-
-    setInputStep: require('./ui/SetInputStep')(sequencer)
+    copy: copy
  }
-
+  
 }
 module.exports = ImageSequencer;
--- a/src/InsertStep.js
+++ b/src/InsertStep.js
@@ -1,5 +1,3 @@
-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) {

@@ -11,7 +9,7 @@ function InsertStep(ref, image, index, name, o) {
    o.container = o_.container || ref.options.selector;
    o.image = image;

-    if (index == -1) index = ref.images[image].steps.length;
+    if(index==-1) index = ref.images[image].steps.length;

    o.step = {
      name: o.name,
@@ -24,8 +22,8 @@ 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);
+    var module = ref.modules[name][0](o,UI);
+    ref.images[image].steps.splice(index,0,module);

    return true;
  }
--- a/src/Modules.js
+++ b/src/Modules.js
@@ -3,48 +3,39 @@
 */
 module.exports = {
  'channel': [
-    require('./modules/Channel/Module'), require('./modules/Channel/info')
+    require('./modules/Channel/Module'),require('./modules/Channel/info')
  ],
  'brightness': [
-    require('./modules/Brightness/Module'), require('./modules/Brightness/info')
+    require('./modules/Brightness/Module'),require('./modules/Brightness/info')
  ],
-  'edge-detect': [
-    require('./modules/EdgeDetect/Module'), require('./modules/EdgeDetect/info')
+  'edge-detect':[
+    require('./modules/EdgeDetect/Module'),require('./modules/EdgeDetect/info')
  ],
  'ndvi': [
-    require('./modules/Ndvi/Module'), require('./modules/Ndvi/info')
+    require('./modules/Ndvi/Module'),require('./modules/Ndvi/info')
  ],
  'invert': [
-    require('./modules/Invert/Module'), require('./modules/Invert/info')
+    require('./modules/Invert/Module'),require('./modules/Invert/info')
  ],
  'crop': [
-    require('./modules/Crop/Module'), require('./modules/Crop/info')
+    require('./modules/Crop/Module'),require('./modules/Crop/info')
  ],
  'colormap': [
-    require('./modules/Colormap/Module'), require('./modules/Colormap/info')
+    require('./modules/Colormap/Module'),require('./modules/Colormap/info')
  ],
  'decode-qr': [
-    require('./modules/DecodeQr/Module'), require('./modules/DecodeQr/info')
+    require('./modules/DecodeQr/Module'),require('./modules/DecodeQr/info')
  ],
  'fisheye-gl': [
-    require('./modules/FisheyeGl/Module'), require('./modules/FisheyeGl/info')
+    require('./modules/FisheyeGl/Module'),require('./modules/FisheyeGl/info')
  ],
  'dynamic': [
-    require('./modules/Dynamic/Module'), require('./modules/Dynamic/info')
+    require('./modules/Dynamic/Module'),require('./modules/Dynamic/info')
  ],
  'blur': [
-    require('./modules/Blur/Module'), require('./modules/Blur/info')
+    require('./modules/Blur/Module'),require('./modules/Blur/info')
  ],
  'saturation': [
-    require('./modules/Saturation/Module'), require('./modules/Saturation/info')
-  ],
-  'average': [
-    require('./modules/Average/Module'), require('./modules/Average/info')
-  ],
-  'blend': [
-    require('./modules/Blend/Module'), require('./modules/Blend/info')
-  ],
-  'import-image': [
-    require('./modules/ImportImage/Module'), require('./modules/ImportImage/info')
+    require('./modules/Saturation/Module'),require('./modules/Saturation/info')
  ]
 }
--- a/src/ReplaceImage.js
+++ b/src/ReplaceImage.js
@@ -21,17 +21,7 @@ function ReplaceImage(ref,selector,steps,options) {
    xmlHTTP.responseType = 'arraybuffer';
    xmlHTTP.onload = function(e) {
      var arr = new Uint8Array(this.response);
-
-      // 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 raw = String.fromCharCode.apply(null,arr);
      var base64 = btoa(raw);
      var dataURL="data:image/"+ext+";base64," + base64;
      make(dataURL);
--- a/src/Run.js
+++ b/src/Run.js
@@ -1,80 +1,56 @@
-const getStepUtils = require('./util/getStep.js');
+function Run(ref, json_q, callback,progressObj) {
+  if(!progressObj) progressObj = {stop: function(){}}

-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" && ref.images[image].steps.slice(-1)[0].output) {
+      var image = drawarray[pos-1].image;
+      if(ref.objTypeOf(callback) == 'Function') {
        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].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];
-        }
-      }
-      
-      ref.images[image].steps[i].draw(
-        ref.copy(input),
-        function onEachStep() {
-          drawStep(drawarray, ++pos);
-        },
-        progressObj
-      );
+      ref.images[image].steps[i].draw(ref.copy(input), function onEachStep() {
+        drawStep(drawarray, ++pos);
+      },progressObj);
    }
  }
-  
+
  function drawSteps(json_q) {
    var drawarray = [];
    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, ind);
+    drawStep(drawarray,0);
  }
-  
-  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];
+        delete json_q[image];
      else if (json_q[image] == 0) json_q[image]++;
    }
    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;
  }
-  
+
  var json_q = filter(json_q);
  return drawSteps(json_q);
+
 }
 module.exports = Run;
--- a/src/modules/Average/Module.js
+++ b/src/modules/Average/Module.js
@@ -1,88 +0,0 @@
-/*
-* Average all pixel colors
-*/
-module.exports = function Average(options, UI){
-    options = options || {};
-    options.blur = options.blur || 2
-    
-    //Tell the UI that a step has been set up
-    UI.onSetup(options.step);
-    var output;
-
-    options.step.metadata = options.step.metadata || {};
-    
-    function draw(input,callback,progressObj){
-
-        progressObj.stop(true);
-        progressObj.overrideFlag = true;
-        
-        // Tell the UI that a step is being drawn
-        UI.onDraw(options.step);
-        
-        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
-            };
-            
-            // 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, {
-            output: output,
-            changePixel: changePixel,
-            extraManipulation: extraManipulation,
-            format: input.format,
-            image: options.image,
-            callback: callback
-        });
-        
-    }
-    return {
-        options: options,
-        draw:  draw,
-        output: output,
-        UI: UI
-    }
-}
--- a/src/modules/Average/info.json
+++ b/src/modules/Average/info.json
@@ -1,6 +0,0 @@
-{
-    "name": "Average",
-    "description": "Average all pixel color",
-    "inputs": {
-    }
-}
--- a/src/modules/Blend/Module.js
+++ b/src/modules/Blend/Module.js
@@ -1,74 +0,0 @@
-module.exports = function Dynamic(options, UI, util) {
-
-  options = options || {};
-  options.func = options.func || "function(r1, g1, b1, a1, r2, g2, b2, a2) { return [ r1, g2, b2, a2 ] }";
-
-  // 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, progressObj) {
-
-    progressObj.stop(true);
-    progressObj.overrideFlag = true;
-
-    // Tell the UI that the step is being drawn
-    UI.onDraw(options.step);
-    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 };
-
-        // This output is accessible by the UI
-        options.step.output = datauri;
-
-        // Tell the UI that the draw is complete
-        UI.onComplete(options.step);
-
-      }
-
-      // 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
-  }
-}
--- a/src/modules/Blend/info.json
+++ b/src/modules/Blend/info.json
@@ -1,11 +0,0 @@
-{
-  "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 ] }"
-    }
-  }
-}
--- a/src/modules/Crop/Module.js
+++ b/src/modules/Crop/Module.js
@@ -20,9 +20,8 @@ module.exports = function CropModule(options, UI) {

  // Tell the UI that a step has been added
  UI.onSetup(options.step); // 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 ui = require('./Ui.js')(options.step, UI);
  var output,
      setupComplete = false;

@@ -51,9 +50,6 @@ module.exports = function CropModule(options, UI) {
      // Tell the UI that the step has been drawn
      UI.onComplete(options.step);

-      // 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) {
--- a/src/modules/Crop/Ui.js
+++ b/src/modules/Crop/Ui.js
@@ -1,87 +1,60 @@
-// 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
+  // The problem is we don't have input image dimensions at the 
+  // time of setting up the UI; that comes when draw() is triggered...
+  // so we're triggering setup only on first run of draw()
  function setup() {
-    let x = 0,
-        y = 0;
-
-    // display original uncropped input image on initial setup
+    // display original input image on initial setup
    showOriginal()
-
-    inputWidth = Math.floor(imgEl().naturalWidth);
-    inputHeight = Math.floor(imgEl().naturalHeight);
+    let width = Math.floor(imgEl.width),
+        height = Math.floor(imgEl.height),
+        x1 = 0,
+        y1 = 0,
+        x2 = width / 2,
+        y2 = height / 2;

    // display with 50%/50% default crop:
-    setOptions(x, y, inputWidth, inputHeight);
+    setOptions(
+      x1,
+      y1,
+      x2 - x1,
+      y2 - y1
+    )

    $(imgEl()).imgAreaSelect({
      handles: true,
-      x1: x,
-      y1: y,
-      x2: x + inputWidth / 2,
-      y2: y + inputHeight / 2,
+      x1: x1,
+      y1: y1,
+      x2: x2,
+      y2: y2,
      // when selection is complete
      onSelectEnd: function onSelectEnd(img, selection) {
        // assign crop values to module UI form inputs:
-        let converted = convertToNatural(
+        setOptions(
          selection.x1,
          selection.y1,
-          selection.width,
-          selection.height
-        );
-        setOptions(
-          converted[0],
-          converted[1],
-          converted[2],
-          converted[3]
-        );
+          selection.x2 - selection.x1,
+          selection.y2 - selection.y1
+        )
+        // then hide the draggable UI
+        $(imgEl()).imgAreaSelect({
+          hide: true
+        });
      }
    });
  }

-  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) {
+  function setOptions(x1,y1,x2,y2) {
    let options = $($(imgEl()).parents()[2]).find("input");
    options[0].value = x1;
    options[1].value = y1;
-    options[2].value = width;
-    options[3].value = height;
+    options[2].value = x2 - x1;
+    options[3].value = y2 - y1;
  }

  // replaces currently displayed output thumbnail with the input image, for ui dragging purposes
@@ -90,8 +63,6 @@ module.exports = function CropModuleUi(step, ui) {
  }

  return {
-    setup: setup,
-    remove: remove,
-    hide: hide
+    setup: setup
  }
 }
--- a/src/modules/ImportImage/Module.js
+++ b/src/modules/ImportImage/Module.js
@@ -1,68 +0,0 @@
-/*
- * 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 = options || {};
-  options.imageUrl = options.url || "./images/monarch.png";
-
-  var output,
-      imgObj = new Image();
-
-  // Tell the UI that a step has been added
-  UI.onSetup(options.step); // 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) {
-
-    // Tell the UI that the step has been triggered
-    UI.onDraw(options.step);
-    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
-      }
-
-      // This output is accessible to the UI
-      options.step.output = imgObj.src;
- 
-      // Tell the UI that the step has been drawn
-      UI.onComplete(options.step);
-
-      // 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
-  }
-}
--- a/src/modules/ImportImage/Ui.js
+++ b/src/modules/ImportImage/Ui.js
@@ -1,54 +0,0 @@
-// 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
-  }
-}
--- a/src/modules/ImportImage/info.json
+++ b/src/modules/ImportImage/info.json
@@ -1,12 +0,0 @@
-{
-  "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"
-    }
-  }
-}
--- a/src/modules/Invert/Module.js
+++ b/src/modules/Invert/Module.js
@@ -1,7 +1,7 @@
 /*
 * Invert the image
 */
-module.exports = function Invert(options, UI) {
+module.exports = function Invert(options,UI) {

  options = options || {};

@@ -10,7 +10,7 @@ module.exports = function Invert(options, UI) {
  var output;

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

    progressObj.stop(true);
    progressObj.overrideFlag = true;
@@ -20,13 +20,13 @@ module.exports = function Invert(options, UI) {
    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;
@@ -48,7 +48,7 @@ module.exports = function Invert(options, UI) {

  return {
    options: options,
-    draw: draw,
+    draw:  draw,
    output: output,
    UI: UI
  }
--- a/src/modules/_nomodule/PixelManipulation.js
+++ b/src/modules/_nomodule/PixelManipulation.js
@@ -3,86 +3,82 @@
 * accepting a changePixel() method to remix a pixel's channels
 */
 module.exports = function PixelManipulation(image, options) {
+  
  options = options || {};
-  options.changePixel =
-    options.changePixel ||
-    function changePixel(r, g, b, a) {
-      return [r, g, b, a];
-    };
-
-  //
-  options.extraManipulation =
-    options.extraManipulation ||
-    function extraManipulation(pixels) {
-      return pixels;
-    };
-
-  var getPixels = require("get-pixels"),
-    savePixels = require("save-pixels");
-
-  getPixels(image.src, function (err, pixels) {
-    if (err) {
-      console.log("Bad image path", image);
+  options.changePixel = options.changePixel || function changePixel(r, g, b, a) {
+    return [r, g, b, a];
+  };
+  options.extraManipulation = options.extraManipulation||function extraManipulation(pixels){
+    return pixels;
+  }
+  
+  var getPixels = require('get-pixels'),
+  savePixels = require('save-pixels');
+  
+  getPixels(image.src, function(err, pixels) {
+    
+    if(err) {
+      console.log('Bad image path', image);
      return;
    }

-    if (options.getNeighbourPixel) {
-      options.getNeighbourPixel.fun = function getNeighborPixel(distX, distY) {
-        return options.getNeighbourPixel(pixels, x, y, distX, distY);
+    if(options.getNeighbourPixel){
+      options.getNeighbourPixel.fun = function (distX,distY) { 
+        return options.getNeighbourPixel(pixels,x,y,distX,distY);
      };
    }
-
+    
    // iterate through pixels;
-    // TODO: this could possibly be more efficient; see
+    // 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) {
+    
+    if(!options.inBrowser){
+      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++) {
+    
+    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),
-          x,
-          y
-        );
-
+            pixels.get(x, y, 0),
+            pixels.get(x, y, 1),
+            pixels.get(x, y, 2),
+            pixels.get(x, y, 3)
+          );
+        
        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]);
-
-        if (!options.inBrowser && !process.env.TEST) pace.op();
+        
+        if(!options.inBrowser)
+        pace.op()
      }
    }
-
-    // perform any extra operations on the entire array:
-    if (options.extraManipulation) pixels = options.extraManipulation(pixels);
-
+    
+    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 });
-
-    r.on("data", function (chunk) {
+    var r = savePixels(pixels, options.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/" + 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();
    });
  });
--- a/src/ui/SetInputStep.js
+++ b/src/ui/SetInputStep.js
@@ -1,50 +0,0 @@
-// TODO: potentially move this into ImportImage module
-function setInputStepInit() {
-
-  return function setInputStep(options) {
-
-    var dropzone = $(options.dropZoneSelector);
-    var fileInput = $(options.fileInputSelector);
- 
-    var onLoad = options.onLoad;
- 
-    var reader = new FileReader();
- 
-    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;
- 
-      var reader = new FileReader();
-      
-      reader.onload = onLoad;
- 
-      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');
-    });
-
-  }
-
-}
-module.exports = setInputStepInit;
--- a/src/util/GetFormat.js
+++ b/src/util/GetFormat.js
@@ -1,29 +0,0 @@
-/*
-* Determine format from a URL or data-url, return "jpg" "png" "gif" etc
-* TODO: write a test for this using the examples
-*/
-module.exports = function GetFormat(src) {
-
-  var format = undefined; // haha default
-
-  // EXAMPLE: "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAQABADASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAf/xAAUEAEAAAAAAAAAAAAAAAAAAAAA/8QAFQEBAQAAAAAAAAAAAAAAAAAABgj/xAAUEQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIRAxEAPwCdABykX//Z";
-  // EXAMPLE: "http://example.com/example.png" 
-  // EXAMPLE: "/example.png" 
- 
-  if (isDataUrl(src)) {
-    format = src.split(';')[0].split('/').pop();
-  } else {
-    format = src.split('.').pop();
-  }
-
-  function isDataUrl(src) {
-    return src.substr(0, 10) === "data:image"
-  }
-
-  format = format.toLowerCase();
-
-  if (format === "jpeg") format = "jpg";
-
-  return format;
-
-}
--- a/src/util/getStep.js
+++ b/src/util/getStep.js
@@ -1,18 +0,0 @@
-module.exports = {
-    getPreviousStep : function () {
-        return this.getStep(-1);
-    },
-    
-    getNextStep : function() {
-        return this.getStep(1);
-    },
-    
-    getInput : function(offset){
-        if(offset + this.getIndex() === 0) offset++;
-        return this.getStep(offset - 1).output;
-    },
-    
-    getOuput : function(offset){
-        return this.getStep(offset).output;
-    }
-}
--- a/test/cli.js
+++ b/test/cli.js
@@ -6,8 +6,8 @@ const test = require('tape');
 test('Output directory is correctly generated',function(t){
    cliUtils.makedir('./output/',function(){
        require('fs').access('./output/.',function(err){
-            t.true(!err,"Access the created dir");
-            t.end();
+            t.true(!err,"Access the created dir")
+            t.end()
        });
    });
 });
--- a/test/modules/image-manip.js
+++ b/test/modules/image-manip.js
@@ -15,12 +15,13 @@ var sequencer = ImageSequencer({ ui: false });
 var qr = require('./images/IS-QR.js');
 var test_png = require('./images/test.png.js');
 var test_gif = require('./images/test.gif.js');
+var spinner = require('ora')('').start()

 sequencer.loadImages(test_png);
 sequencer.addSteps(['invert','invert']);

 test("Preload", function(t) {
-  sequencer.run({mode:'test'},function(){
+  sequencer.run(spinner,function(){
    t.end();
  });
 });
@@ -51,7 +52,7 @@ test("Twice inverted image is identical to original image", function (t) {

 test("Decode QR module works properly :: setup", function (t) {
  sequencer.loadImage(qr,function(){
-    this.addSteps('decode-qr').run({mode:'test'},function(){
+    this.addSteps('decode-qr').run(spinner.start(),function(){
      t.end();
    });
  })
@@ -64,7 +65,7 @@ test("Decode QR module works properly :: teardown", function (t) {

 test("PixelManipulation works for PNG images", function (t) {
  sequencer.loadImages(test_png,function(){
-    this.addSteps('invert').run({mode:'test'},function(out){
+    this.addSteps('invert').run(spinner.start(),function(out){
      t.equal(1,1)
      t.end();
    });
@@ -73,9 +74,10 @@ test("PixelManipulation works for PNG images", function (t) {

 test("PixelManipulation works for GIF images", function (t) {
  sequencer.loadImages(test_gif,function(){
-    this.addSteps('invert').run({mode:'test'},function(out){
+    this.addSteps('invert').run(spinner,function(out){
      t.equal(1,1)
      t.end();
    });
  });
-});
+});
+spinner.stop(true)
--- a/test/modules/image-sequencer.js
+++ b/test/modules/image-sequencer.js
@@ -9,21 +9,21 @@ var test = require('tape');
 require('../../src/ImageSequencer.js');

 // This function is used to test whether or not any additional global variables are being created
-function copy(g, a) {
+function copy(g,a) {
  var b = {};
  var i = 0;
  for (var v in a)
-  if (g) {
-    if (v != "sequencer") b[v] = a[v];
-  }
-  else {
-    if (v != "sequencer" && v != "global1" && v != "global2" && !global1.hasOwnProperty(v)) i++;
-  }
-  if (g) return b;
+    if(g) {
+      if(v != "sequencer") b[v] = a[v];
+    }
+    else {
+      if(v != "sequencer" && v!="global1" && v!="global2" && !global1.hasOwnProperty(v)) i++;
+    }
+  if(g) return b;
  else return i;
 }
-var parent = (typeof (global) === "undefined") ? window : global;
-var global1 = copy(true, parent);
+var parent = (typeof(global)==="undefined")?window:global;
+var global1 = copy(true,parent);

 var sequencer = ImageSequencer({ ui: false });
 var red = "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAQABADASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAf/xAAUEAEAAAAAAAAAAAAAAAAAAAAA/8QAFQEBAQAAAAAAAAAAAAAAAAAABgj/xAAUEQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIRAxEAPwCdABykX//Z";
@@ -33,14 +33,14 @@ test('Image Sequencer has tests', function (t) {
  t.end();
 });

-test('loadImages loads a DataURL image and creates a step.', function (t) {
-  sequencer.loadImages('test', red);
+test('loadImages loads a DataURL image and creates a step.', function (t){
+  sequencer.loadImages('test',red);
  t.equal(sequencer.images.test.steps.length, 1, "Initial Step Created");
-  t.equal(typeof (sequencer.images.test.steps[0].output.src), "string", "Initial output exists");
+  t.equal(typeof(sequencer.images.test.steps[0].output.src), "string", "Initial output exists");
  t.end();
 });

-test('modulesInfo() returns info for each module', function (t) {
+test('modulesInfo() returns info for each module', function (t){
  var info = sequencer.modulesInfo();
  t.equal(Object.keys(info).length, Object.keys(sequencer.modules).length);
  t.equal(info.hasOwnProperty(Object.keys(sequencer.modules)[0]), true);
@@ -49,40 +49,40 @@ test('modulesInfo() returns info for each module', function (t) {
  t.end();
 });

-if (!sequencer.options.inBrowser)
-test('loadImage loads an image from URL and creates a step. (NodeJS)', function (t) {
-  require('dns').resolve('www.github.com', function (err) {
-    if (err) {
-      console.log("Test aborted due to no internet");
-      t.end();
-    }
-    else {
-      sequencer.loadImage('URL', 'https://ccpandhare.github.io/image-sequencer/examples/images/red.jpg', function () {
-      t.equal(sequencer.images.URL.steps.length, 1, "Initial Step Created");
-      t.equal(typeof (sequencer.images.URL.steps[0].output.src), "string", "Initial output exists");
-      t.end();
+if(!sequencer.options.inBrowser)
+  test('loadImage loads an image from URL and creates a step. (NodeJS)', function (t){
+    require('dns').resolve('www.github.com', function(err) {
+      if (err) {
+        console.log("Test aborted due to no internet");
+        t.end();
+      }
+      else {
+        sequencer.loadImage('URL','https://ccpandhare.github.io/image-sequencer/examples/images/red.jpg', function(){
+          t.equal(sequencer.images.URL.steps.length, 1, "Initial Step Created");
+          t.equal(typeof(sequencer.images.URL.steps[0].output.src), "string", "Initial output exists");
+          t.end();
+        });
+      }
    });
-  }
-});
-});
+  });

-if (!sequencer.options.inBrowser)
-test('loadImages loads an image from PATH and creates a step. (NodeJS)', function (t) {
-  sequencer.loadImages('examples/images/red.jpg');
-  t.equal(sequencer.images.image1.steps.length, 1, "Initial Step Created");
-  t.equal(typeof (sequencer.images.image1.steps[0].output.src), "string", "Initial output exists");
-  t.end();
-});
+if(!sequencer.options.inBrowser)
+  test('loadImages loads an image from PATH and creates a step. (NodeJS)', function (t){
+    sequencer.loadImages('examples/images/red.jpg');
+    t.equal(sequencer.images.image1.steps.length, 1, "Initial Step Created");
+    t.equal(typeof(sequencer.images.image1.steps[0].output.src), "string", "Initial output exists");
+    t.end();
+  });

-test('loadImage works too.', function (t) {
-  sequencer.loadImage('test2', red);
+test('loadImage works too.', function (t){
+  sequencer.loadImage('test2',red);
  t.equal(sequencer.images.test2.steps.length, 1, "Initial Step Created");
-  t.equal(typeof (sequencer.images.test2.steps[0].output.src), "string", "Initial output exists");
+  t.equal(typeof(sequencer.images.test2.steps[0].output.src), "string", "Initial output exists");
  t.end();
 });

 test('addSteps("image","name") adds a step', function (t) {
-  sequencer.addSteps('test', 'channel');
+  sequencer.addSteps('test','channel');
  t.equal(sequencer.images.test.steps.length, 2, "Length of steps increased")
  t.equal(sequencer.images.test.steps[1].options.name, "channel", "Correct Step Added");
  t.equal(sequencer.images.test.steps[1].options.description, "Displays only one color channel of an image -- default is green", "Step description shown");
@@ -97,7 +97,7 @@ test('addSteps("name") adds a step', function (t) {
 });

 test('addSteps(["name"]) adds a step', function (t) {
-  sequencer.addSteps(['channel', 'invert']);
+  sequencer.addSteps(['channel','invert']);
  t.equal(sequencer.images.test.steps.length, 5, "Length of steps increased by two")
  t.equal(sequencer.images.test.steps[3].options.name, "channel", "Correct Step Added");
  t.equal(sequencer.images.test.steps[4].options.name, "invert", "Correct Step Added");
@@ -105,92 +105,81 @@ test('addSteps(["name"]) adds a step', function (t) {
 });

 test('addSteps("name",o) adds a step', function (t) {
-  sequencer.addSteps('channel', {});
+  sequencer.addSteps('channel',{});
  t.equal(sequencer.images.test.steps.length, 6, "Length of steps increased");
  t.equal(sequencer.images.test.steps[5].options.name, "channel", "Correct Step Added");
  t.end();
 });

 test('addSteps("image","name",o) adds a step', function (t) {
-  sequencer.addSteps('test', 'channel', {});
+  sequencer.addSteps('test','channel',{});
  t.equal(sequencer.images.test.steps.length, 7, "Length of steps increased");
  t.equal(sequencer.images.test.steps[6].options.name, "channel", "Correct Step Added");
  t.end();
 });

 test('removeSteps("image",position) removes a step', function (t) {
-  sequencer.removeSteps('test', 1);
+  sequencer.removeSteps('test',1);
  t.equal(sequencer.images.test.steps.length, 6, "Length of steps reduced");
  t.end();
 });

 test('removeSteps({image: [positions]}) removes steps', function (t) {
-  sequencer.removeSteps('test', [1, 2]);
+  sequencer.removeSteps('test',[1,2]);
  t.equal(sequencer.images.test.steps.length, 4, "Length of steps reduced");
  t.end();
 });

 test('removeSteps(position) removes steps', function (t) {
-  sequencer.removeSteps([1, 2]);
+  sequencer.removeSteps([1,2]);
  t.equal(sequencer.images.test.steps.length, 2, "Length of steps reduced");
  t.end();
 });

 test('insertSteps("image",position,"module",options) inserts a step', function (t) {
-  sequencer.insertSteps('test', 1, 'channel', {});
+  sequencer.insertSteps('test',1,'channel',{});
  t.equal(sequencer.images.test.steps.length, 3, "Length of Steps increased");
  t.equal(sequencer.images.test.steps[1].options.name, "channel", "Correct Step Inserted");
  t.end();
 });

 test('insertSteps("image",position,"module") inserts a step', function (t) {
-  sequencer.insertSteps('test', 1, 'channel');
+  sequencer.insertSteps('test',1,'channel');
  t.equal(sequencer.images.test.steps.length, 4, "Length of Steps increased");
  t.equal(sequencer.images.test.steps[1].options.name, "channel", "Correct Step Inserted");
  t.end();
 });

 test('insertSteps(position,"module") inserts a step', function (t) {
-  sequencer.insertSteps(1, 'channel');
+  sequencer.insertSteps(1,'channel');
  t.equal(sequencer.images.test.steps.length, 5, "Length of Steps increased");
  t.equal(sequencer.images.test.steps[1].options.name, "channel", "Correct Step Inserted");
  t.end();
 });

 test('insertSteps({image: {index: index, name: "module", o: options} }) inserts a step', function (t) {
-  sequencer.insertSteps({ test: { index: 1, name: 'channel', o: {} } });
+  sequencer.insertSteps({test: {index:1, name:'channel', o:{} } });
  t.equal(sequencer.images.test.steps.length, 6, "Length of Steps increased");
  t.equal(sequencer.images.test.steps[1].options.name, "channel", "Correct Step Inserted");
  t.end();
 });

-
 test('run() runs the sequencer and returns output to callback', function (t) {
-  sequencer.run({mode:'test'}, function (out) {
-    t.equal(typeof (sequencer.images.test.steps[sequencer.images.test.steps.length - 1].output), "object", "Output is Generated");
-    t.equal(out, sequencer.images.test.steps[sequencer.images.test.steps.length - 1].output.src, "Output callback works");
-    t.end();
-  });
-});
-
-
-test('getStep(offset) returns the step at offset distance relative to current step',function(t){
-  sequencer.addSteps('test','invert',{});
-  sequencer.addSteps('test','blend',{});
-  sequencer.run({mode:'test'},function(out){
-    t.equal(!!out,true,"Blend generates output");
-    t.end();
+  sequencer.run('test',function(out){
+    t.equal(typeof(sequencer.images.test.steps[sequencer.images.test.steps.length - 1].output), "object", "Output is Generated");
+    t.equal(out,sequencer.images.test.steps[sequencer.images.test.steps.length - 1].output.src, "Output callback works");
  });
+  t.end();
 });

 test('replaceImage returns false in NodeJS', function (t) {
-  var returnvalue = (sequencer.options.inBrowser) ? false : sequencer.replaceImage("#selector", "test");
-  t.equal(returnvalue, false, "It does.");
+  var returnvalue = (sequencer.options.inBrowser)?false:sequencer.replaceImage("#selector","test");
+  t.equal(returnvalue,false,"It does.");
  t.end();
 });

-var global2 = copy(false, parent);
+var global2 = copy(false,parent);
 test('No Global Variables Created', function (t) {
-  t.equal(0, global2, "None Created.");
+  t.equal(0,global2,"None Created.");
  t.end();
 });
--- a/test/modules/import-export.js
+++ b/test/modules/import-export.js
@@ -1,58 +0,0 @@
-var test = require('tape');
-require('../../src/ImageSequencer.js');
-
-var sequencer = ImageSequencer({ ui: false });
-var red = "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAQABADASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAf/xAAUEAEAAAAAAAAAAAAAAAAAAAAA/8QAFQEBAQAAAAAAAAAAAAAAAAAABgj/xAAUEQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIRAxEAPwCdABykX//Z";
-
-test('toString() and stepToString() return the step/steps in string format', function(t){
-  sequencer.loadImages('image1', red);
-  sequencer.addSteps('channel');
-  sequencer.addSteps('invert');
-  t.equal(sequencer.toString(),"channel(channel:green),invert()","toString works");
-  t.equal(sequencer.stepToString(sequencer.steps[1]),"channel(channel:green)","stepToString works");
-  t.end();
-});
-
-test('stringToJSON() and stringToJSONstep() return the step/steps from a string', function(t){
-  t.deepEqual(sequencer.stringToJSON('channel(channel:green),invert(),crop(x:0|y:0|w:50%25|h:50%25),blend(blend:function(r1%2C%20g1%2C%20b1%2C%20a1%2C%20r2%2C%20g2%2C%20b2%2C%20a2)%20%7B%20return%20%5B%20r1%2C%20g2%2C%20b2%2C%20a2%20%5D%20%7D)'),[
-    { name: 'channel', options: { channel: 'green' } },
-    { name: 'invert', options: {} },
-    { name: 'crop', options: { x: '0', y: '0', w: '50%', h: '50%'} },
-    { name: 'blend', options: { blend: 'function(r1, g1, b1, a1, r2, g2, b2, a2) { return [ r1, g2, b2, a2 ] }' } }
-  ]);
-  t.deepEqual(sequencer.stringToJSONstep("channel(channel:green)"),{ name: 'channel', options: { channel: 'green' } });
-  t.end();
-});
-
-test('stringToJSON() and stringToJSONstep() return the step/steps from a string without configs, using defaults', function(t){
-  t.deepEqual(sequencer.stringToJSON('channel,blur,invert,blend'),[
-    { name: 'channel', options: { } },
-    { name: 'blur', options: { } },
-    { name: 'invert', options: { } },
-    { name: 'blend', options: { } }
-  ]);
-  t.end();
-});
-
-test('toJSON() returns the right sequence of steps',function(t){
-  t.deepEqual(sequencer.toJSON(), [
-    { name: 'channel', options: { channel: 'green' } },
-    { name: 'invert', options: {} }
-  ]);
-  t.end();
-});
-
-test('importString() imports a string of steps into the sequencer', function(t){
-  sequencer.importString('brightness(brightness:50),invert');
-  t.equal(sequencer.toString(),"channel(channel:green),invert(),brightness(brightness:50),invert()");
-  t.end();
-});
-
-test('importJSON() imports a JSON array of steps into the sequencer', function(t){
-  sequencer.importJSON([
-    { name: 'blur',options: {}}
-  ]);
-  t.equal(sequencer.toString(),"channel(channel:green),invert(),brightness(brightness:50),invert(),blur(blur:2)")
-  t.end();
-});
-
--- a/test/modules/run.js
+++ b/test/modules/run.js
@@ -1,29 +0,0 @@
-'use strict';
-
-var fs = require('fs');
-var test = require('tape');
-var DataURItoBuffer = require('data-uri-to-buffer');
-
-require('../../src/ImageSequencer.js');
-
-var sequencer = ImageSequencer({ ui: false });
-var red = "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAQABADASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAf/xAAUEAEAAAAAAAAAAAAAAAAAAAAA/8QAFQEBAQAAAAAAAAAAAAAAAAAABgj/xAAUEQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIRAxEAPwCdABykX//Z";
-
-sequencer.loadImages('image1', red);
-sequencer.addSteps('invert');
-sequencer.addSteps('invert');
-sequencer.addSteps('invert');
-
-test('run() works with all possible argument combinations',function(t){
-    sequencer.run(function (out) {
-        var output1 = DataURItoBuffer(sequencer.images.image1.steps.slice(-1)[0].output.src);
-        sequencer.images.image1.steps.splice(1,1);
-        sequencer.run({index: 1},function(out){
-            var output2 = DataURItoBuffer(sequencer.images.image1.steps.slice(-1)[0].output.src);
-            t.deepEqual(output1,output2,"output remains same after removing a step and running sequencer from a greater index");
-            sequencer.run(function(out){
-            t.end();
-            })
-        });
-    });
-});