From 2888c2d735fe1d9a5f1638d6818e8cadff4591a7 Mon Sep 17 00:00:00 2001
From: Chinmay Pandhare <pandharechinmay882@gmail.com>
Date: Fri, 28 Jul 2017 18:01:22 +0530
Subject: [PATCH 1/6] Patch for UI

---
 dist/image-sequencer.js | 53 +++++++++++++++++++++++++++--------------
 src/AddStep.js          | 11 +++++++--
 src/InsertStep.js       | 11 +++++++--
 src/UserInterface.js    | 31 +++++++++++++-----------
 4 files changed, 70 insertions(+), 36 deletions(-)

diff --git a/dist/image-sequencer.js b/dist/image-sequencer.js
index 30675115..abcf2f2a 100644
--- a/dist/image-sequencer.js
+++ b/dist/image-sequencer.js
@@ -34391,11 +34391,18 @@ function AddStep(ref, image, name, o) {
     o.container = o_.container || ref.options.selector;
     o.image = image;
 
-    var UI = ref.UI({
+    o.identity = {
       stepName: o.name,
       stepID: o.number,
       imageName: o.image
-    });
+    };
+    o.UIFs = ref.UI();
+    var UI = {
+      onSetup: function(){o.UIFs.onSetup(o.identity);},
+      onDraw: function(){o.UIFs.onSetup(o.identity);},
+      onComplete: function(out){o.UIFs.onSetup(o.identity,out);},
+      onRemove: function(){o.UIFs.onSetup(o.identity);},
+    }
     var module = ref.modules[name](o,UI);
     ref.images[image].steps.push(module);
 
@@ -34782,11 +34789,18 @@ function InsertStep(ref, image, index, name, o) {
 
     if(index==-1) index = ref.images[image].steps.length;
 
-    var UI = ref.UI({
+    o.identity = {
       stepName: o.name,
       stepID: o.number,
       imageName: o.image
-    });
+    };
+    o.UIFs = ref.UI();
+    var UI = {
+      onSetup: function(){o.UIFs.onSetup(o.identity);},
+      onDraw: function(){o.UIFs.onSetup(o.identity);},
+      onComplete: function(out){o.UIFs.onSetup(o.identity,out);},
+      onRemove: function(){o.UIFs.onSetup(o.identity);},
+    }
     var module = ref.modules[name](o,UI);
     ref.images[image].steps.splice(index,0,module);
 
@@ -34952,17 +34966,20 @@ module.exports = Run;
 /*
  * Default UI for each image-sequencer module
  */
-module.exports = function UserInterface(UI,options) {
+module.exports = function UserInterface(newUI = {},options) {
+
+  var UI = newUI;
 
   return function userInterface(identity) {
 
-    var UI = UI || {};
+    identity.ui = options.ui;
+    identity.inBrowser = options.inBrowser;
 
-    UI.onSetup = UI.onSetup || function() {
-      if(options.ui == false) {
+    UI.onSetup = UI.onSetup || function(identity) {
+      if(identity.ui == false) {
         // No UI
       }
-      else if(options.inBrowser) {
+      else if(identity.inBrowser) {
         // Create and append an HTML Element
         console.log("Added Step \""+identity.stepName+"\" to \""+identity.imageName+"\".");
       }
@@ -34973,11 +34990,11 @@ module.exports = function UserInterface(UI,options) {
       }
     }
 
-    UI.onDraw = UI.onDraw || function() {
-      if (options.ui == false) {
+    UI.onDraw = UI.onDraw || function(identity) {
+      if (identity.ui == false) {
         // No UI
       }
-      else if(options.inBrowser) {
+      else if(identity.inBrowser) {
         // Overlay a loading spinner
         console.log("Drawing Step \""+identity.stepName+"\" on \""+identity.imageName+"\".");
       }
@@ -34987,11 +35004,11 @@ module.exports = function UserInterface(UI,options) {
       }
     }
 
-    UI.onComplete = UI.onComplete || function(output) {
-      if (options.ui == false) {
+    UI.onComplete = UI.onComplete || function(identity,output) {
+      if (identity.ui == false) {
         // No UI
       }
-      else if(options.inBrowser) {
+      else if(identity.inBrowser) {
         // Update the DIV Element
         // Hide the laoding spinner
         console.log("Drawn Step \""+identity.stepName+"\" on \""+identity.imageName+"\".");
@@ -35002,11 +35019,11 @@ module.exports = function UserInterface(UI,options) {
       }
     }
 
-    UI.onRemove = UI.onRemove || function(callback) {
-      if(options.ui == false){
+    UI.onRemove = UI.onRemove || function(identity) {
+      if(identity.ui == false){
         // No UI
       }
-      else if(options.inBrowser) {
+      else if(identity.inBrowser) {
         // Remove the DIV Element
         console.log("Removing Step \""+identity.stepName+"\" of \""+identity.imageName+"\".");
       }
diff --git a/src/AddStep.js b/src/AddStep.js
index 22298c05..4998803a 100644
--- a/src/AddStep.js
+++ b/src/AddStep.js
@@ -8,11 +8,18 @@ function AddStep(ref, image, name, o) {
     o.container = o_.container || ref.options.selector;
     o.image = image;
 
-    var UI = ref.UI({
+    o.identity = {
       stepName: o.name,
       stepID: o.number,
       imageName: o.image
-    });
+    };
+    o.UIFs = ref.UI();
+    var UI = {
+      onSetup: function(){o.UIFs.onSetup(o.identity);},
+      onDraw: function(){o.UIFs.onSetup(o.identity);},
+      onComplete: function(out){o.UIFs.onSetup(o.identity,out);},
+      onRemove: function(){o.UIFs.onSetup(o.identity);},
+    }
     var module = ref.modules[name](o,UI);
     ref.images[image].steps.push(module);
 
diff --git a/src/InsertStep.js b/src/InsertStep.js
index ece3da01..ed6d751d 100644
--- a/src/InsertStep.js
+++ b/src/InsertStep.js
@@ -10,11 +10,18 @@ function InsertStep(ref, image, index, name, o) {
 
     if(index==-1) index = ref.images[image].steps.length;
 
-    var UI = ref.UI({
+    o.identity = {
       stepName: o.name,
       stepID: o.number,
       imageName: o.image
-    });
+    };
+    o.UIFs = ref.UI();
+    var UI = {
+      onSetup: function(){o.UIFs.onSetup(o.identity);},
+      onDraw: function(){o.UIFs.onSetup(o.identity);},
+      onComplete: function(out){o.UIFs.onSetup(o.identity,out);},
+      onRemove: function(){o.UIFs.onSetup(o.identity);},
+    }
     var module = ref.modules[name](o,UI);
     ref.images[image].steps.splice(index,0,module);
 
diff --git a/src/UserInterface.js b/src/UserInterface.js
index 8ac3623c..b9300039 100644
--- a/src/UserInterface.js
+++ b/src/UserInterface.js
@@ -1,17 +1,20 @@
 /*
  * Default UI for each image-sequencer module
  */
-module.exports = function UserInterface(UI,options) {
+module.exports = function UserInterface(newUI = {},options) {
+
+  var UI = newUI;
 
   return function userInterface(identity) {
 
-    var UI = UI || {};
+    identity.ui = options.ui;
+    identity.inBrowser = options.inBrowser;
 
-    UI.onSetup = UI.onSetup || function() {
-      if(options.ui == false) {
+    UI.onSetup = UI.onSetup || function(identity) {
+      if(identity.ui == false) {
         // No UI
       }
-      else if(options.inBrowser) {
+      else if(identity.inBrowser) {
         // Create and append an HTML Element
         console.log("Added Step \""+identity.stepName+"\" to \""+identity.imageName+"\".");
       }
@@ -22,11 +25,11 @@ module.exports = function UserInterface(UI,options) {
       }
     }
 
-    UI.onDraw = UI.onDraw || function() {
-      if (options.ui == false) {
+    UI.onDraw = UI.onDraw || function(identity) {
+      if (identity.ui == false) {
         // No UI
       }
-      else if(options.inBrowser) {
+      else if(identity.inBrowser) {
         // Overlay a loading spinner
         console.log("Drawing Step \""+identity.stepName+"\" on \""+identity.imageName+"\".");
       }
@@ -36,11 +39,11 @@ module.exports = function UserInterface(UI,options) {
       }
     }
 
-    UI.onComplete = UI.onComplete || function(output) {
-      if (options.ui == false) {
+    UI.onComplete = UI.onComplete || function(identity,output) {
+      if (identity.ui == false) {
         // No UI
       }
-      else if(options.inBrowser) {
+      else if(identity.inBrowser) {
         // Update the DIV Element
         // Hide the laoding spinner
         console.log("Drawn Step \""+identity.stepName+"\" on \""+identity.imageName+"\".");
@@ -51,11 +54,11 @@ module.exports = function UserInterface(UI,options) {
       }
     }
 
-    UI.onRemove = UI.onRemove || function(callback) {
-      if(options.ui == false){
+    UI.onRemove = UI.onRemove || function(identity) {
+      if(identity.ui == false){
         // No UI
       }
-      else if(options.inBrowser) {
+      else if(identity.inBrowser) {
         // Remove the DIV Element
         console.log("Removing Step \""+identity.stepName+"\" of \""+identity.imageName+"\".");
       }

From f1f3574468d5e2c71a48b41703d7ad5dd1aad975 Mon Sep 17 00:00:00 2001
From: Chinmay Pandhare <pandharechinmay882@gmail.com>
Date: Sat, 29 Jul 2017 02:53:39 +0530
Subject: [PATCH 2/6] Rework UI Handling

---
 dist/image-sequencer.js                 | 216 ++++++++++--------------
 src/AddStep.js                          |  18 +-
 src/ImageSequencer.js                   |  11 +-
 src/InsertStep.js                       |  18 +-
 src/LoadImage.js                        |  32 ++--
 src/UserInterface.js                    |  86 ++--------
 src/modules/Crop/Module.js              |   7 +-
 src/modules/DoNothing/Module.js         |   9 +-
 src/modules/DoNothingPix/Module.js      |   7 +-
 src/modules/GreenChannel/Module.js      |   7 +-
 src/modules/Invert/Module.js            |   7 +-
 src/modules/NdviRed/Module.js           |   7 +-
 src/modules/SegmentedColormap/Module.js |   7 +-
 test.js                                 |   5 +-
 14 files changed, 180 insertions(+), 257 deletions(-)

diff --git a/dist/image-sequencer.js b/dist/image-sequencer.js
index abcf2f2a..f9316e4a 100644
--- a/dist/image-sequencer.js
+++ b/dist/image-sequencer.js
@@ -34391,18 +34391,14 @@ function AddStep(ref, image, name, o) {
     o.container = o_.container || ref.options.selector;
     o.image = image;
 
-    o.identity = {
-      stepName: o.name,
-      stepID: o.number,
-      imageName: o.image
+    o.step = {
+      name: o.name,
+      ID: o.number,
+      imageName: o.image,
+      inBrowser: ref.options.inBrowser,
+      ui: ref.options.ui
     };
-    o.UIFs = ref.UI();
-    var UI = {
-      onSetup: function(){o.UIFs.onSetup(o.identity);},
-      onDraw: function(){o.UIFs.onSetup(o.identity);},
-      onComplete: function(out){o.UIFs.onSetup(o.identity,out);},
-      onRemove: function(){o.UIFs.onSetup(o.identity);},
-    }
+    var UI = ref.events;
     var module = ref.modules[name](o,UI);
     ref.images[image].steps.push(module);
 
@@ -34624,7 +34620,7 @@ ImageSequencer = function ImageSequencer(options) {
       formatInput = require('./FormatInput'),
       images = {},
       inputlog = [],
-      UI;
+      events;
 
   setUI();
 
@@ -34651,7 +34647,7 @@ ImageSequencer = function ImageSequencer(options) {
   function removeStep(image,index) {
     //remove the step from images[image].steps and redraw remaining images
     if(index>0) {
-      images[image].steps[index].UI.onRemove();
+      images[image].steps[index].UI.onRemove(images[image].steps[index].options.step);
       images[image].steps.splice(index,1);
     }
     //tell the UI a step has been removed
@@ -34743,9 +34739,8 @@ ImageSequencer = function ImageSequencer(options) {
     return require('./ReplaceImage')(this,selector,steps);
   }
 
-  function setUI(_UI) {
-    UI = require('./UserInterface')(_UI,options);
-    return UI;
+  function setUI(UI) {
+    events = require('./UserInterface')(UI);
   }
 
   return {
@@ -34755,7 +34750,7 @@ ImageSequencer = function ImageSequencer(options) {
     inputlog: inputlog,
     modules: modules,
     images: images,
-    UI: UI,
+    events: events,
 
     //user functions
     loadImages: loadImages,
@@ -34789,18 +34784,14 @@ function InsertStep(ref, image, index, name, o) {
 
     if(index==-1) index = ref.images[image].steps.length;
 
-    o.identity = {
-      stepName: o.name,
-      stepID: o.number,
-      imageName: o.image
+    o.step = {
+      name: o.name,
+      ID: o.number,
+      imageName: o.image,
+      inBrowser: ref.options.inBrowser,
+      ui: ref.options.ui
     };
-    o.UIFs = ref.UI();
-    var UI = {
-      onSetup: function(){o.UIFs.onSetup(o.identity);},
-      onDraw: function(){o.UIFs.onSetup(o.identity);},
-      onComplete: function(out){o.UIFs.onSetup(o.identity,out);},
-      onRemove: function(){o.UIFs.onSetup(o.identity);},
-    }
+    var UI = ref.events;
     var module = ref.modules[name](o,UI);
     ref.images[image].steps.splice(index,0,module);
 
@@ -34823,27 +34814,37 @@ function LoadImage(ref, name, src) {
   }
 
   function loadImage(name, src) {
+    var step = {
+      name: "load-image",
+      ID: ref.options.sequencerCounter++,
+      imageName: name,
+      inBrowser: ref.options.inBrowser,
+      ui: ref.options.ui
+    };
+
     var image = {
       src: src,
       steps: [{
         options: {
-          id: ref.options.sequencerCounter++,
+          id: step.ID,
           name: "load-image",
-          title: "Load Image"
+          title: "Load Image",
+          step: step
         },
-        UI: ref.UI({
-          stepName: "load-image",
-          stepID: ref.options.sequencerCounter++,
-          imageName: name
-        }),
+        UI: ref.events,
         draw: function() {
+          UI.onDraw(options.step);
           if(arguments.length==1){
             this.output = CImage(arguments[0]);
+            options.step.output = this.output;
+            UI.onComplete(options.step);
             return true;
           }
           else if(arguments.length==2) {
             this.output = CImage(arguments[0]);
+            options.step.output = this.output;
             arguments[1]();
+            UI.onComplete(options.step);
             return true;
           }
           return false;
@@ -34852,9 +34853,11 @@ function LoadImage(ref, name, src) {
       }]
     };
     ref.images[name] = image;
-    ref.images[name].steps[0].UI.onSetup();
-    ref.images[name].steps[0].UI.onDraw();
-    ref.images[name].steps[0].UI.onComplete(image.steps[0].output.src);
+    loadImageStep = ref.images[name].steps[0];
+    loadImageStep.options.step.output = loadImageStep.output.src;
+    loadImageStep.UI.onSetup(loadImageStep.options.step);
+    loadImageStep.UI.onDraw(loadImageStep.options.step);
+    loadImageStep.UI.onComplete(loadImageStep.options.step);
   }
 
   return loadImage(name,src);
@@ -34964,79 +34967,29 @@ module.exports = Run;
 
 },{}],119:[function(require,module,exports){
 /*
- * Default UI for each image-sequencer module
+ * User Interface Handling Module
  */
-module.exports = function UserInterface(newUI = {},options) {
 
-  var UI = newUI;
-
-  return function userInterface(identity) {
-
-    identity.ui = options.ui;
-    identity.inBrowser = options.inBrowser;
-
-    UI.onSetup = UI.onSetup || function(identity) {
-      if(identity.ui == false) {
-        // No UI
-      }
-      else if(identity.inBrowser) {
-        // Create and append an HTML Element
-        console.log("Added Step \""+identity.stepName+"\" to \""+identity.imageName+"\".");
-      }
-      else {
-        // Create a NodeJS Object
-        console.log('\x1b[36m%s\x1b[0m',"Added Step \""+identity.stepName+"\" to \""+identity.imageName+"\".");
-
-      }
-    }
-
-    UI.onDraw = UI.onDraw || function(identity) {
-      if (identity.ui == false) {
-        // No UI
-      }
-      else if(identity.inBrowser) {
-        // Overlay a loading spinner
-        console.log("Drawing Step \""+identity.stepName+"\" on \""+identity.imageName+"\".");
-      }
-      else {
-        // Don't do anything
-        console.log('\x1b[33m%s\x1b[0m',"Drawing Step \""+identity.stepName+"\" on \""+identity.imageName+"\".");
-      }
-    }
-
-    UI.onComplete = UI.onComplete || function(identity,output) {
-      if (identity.ui == false) {
-        // No UI
-      }
-      else if(identity.inBrowser) {
-        // Update the DIV Element
-        // Hide the laoding spinner
-        console.log("Drawn Step \""+identity.stepName+"\" on \""+identity.imageName+"\".");
-      }
-      else {
-        // Update the NodeJS Object
-        console.log('\x1b[32m%s\x1b[0m',"Drawn Step \""+identity.stepName+"\" on \""+identity.imageName+"\".");
-      }
-    }
-
-    UI.onRemove = UI.onRemove || function(identity) {
-      if(identity.ui == false){
-        // No UI
-      }
-      else if(identity.inBrowser) {
-        // Remove the DIV Element
-        console.log("Removing Step \""+identity.stepName+"\" of \""+identity.imageName+"\".");
-      }
-      else {
-        // Delete the NodeJS Object
-        console.log('\x1b[31m%s\x1b[0m',"Removing Step \""+identity.stepName+"\" of \""+identity.imageName+"\".");
-      }
-    }
-
-    return UI;
+module.exports = function UserInterface(events = {}) {
 
+  events.onSetup = events.onSetup || function(step) {
+    console.log("onSetup "+step.name);
   }
 
+  events.onDraw = events.onDraw || function(step) {
+    console.log("onDraw "+step.name);
+  }
+
+  events.onComplete = events.onComplete || function(step) {
+    console.log("onComplete "+step.name);
+  }
+
+  events.onRemove = events.onRemove || function(step) {
+    console.log("onRemove "+step.name);
+  }
+
+  return events;
+
 }
 
 },{}],120:[function(require,module,exports){
@@ -35097,12 +35050,12 @@ module.exports = function Crop(input,options,callback) {
  module.exports = function CropModule(options,UI) {
    options = options || {};
    options.title = "Crop Image";
-   UI.onSetup();
+   UI.onSetup(options.step);
    var output
 
    function draw(input,callback) {
 
-     UI.onDraw();
+     UI.onDraw(options.step);
      const step = this;
 
      require('./Crop')(input,options,function(out,format){
@@ -35110,7 +35063,8 @@ module.exports = function Crop(input,options,callback) {
          src: out,
          format: format
        }
-       UI.onComplete(out);
+       options.step.output = out;
+       UI.onComplete(options.step);
        callback();
      });
 
@@ -35132,14 +35086,17 @@ module.exports = function Crop(input,options,callback) {
 module.exports = function DoNothing(options,UI) {
   options = options || {};
   options.title = "Do Nothing";
-  UI.onSetup();
+  UI.onSetup(options.step);
   var output;
 
   function draw(input,callback) {
-    UI.onDraw();
+    UI.onDraw(options.step);
+
     this.output = input;
+
+    options.step.output = this.output.src;
     callback();
-    UI.onComplete(this.output.src);
+    UI.onComplete(options.step);
   }
 
   return {
@@ -35158,12 +35115,12 @@ module.exports = function DoNothingPix(options,UI) {
 
   options = options || {};
   options.title = "Do Nothing with pixels";
-  UI.onSetup();
+  UI.onSetup(options.step);
   var output;
 
   function draw(input,callback) {
 
-    UI.onDraw();
+    UI.onDraw(options.step);
     const step = this;
 
     function changePixel(r, g, b, a) {
@@ -35171,7 +35128,8 @@ module.exports = function DoNothingPix(options,UI) {
     }
     function output(image,datauri,mimetype){
       step.output = {src:datauri,format:mimetype}
-      UI.onComplete(datauri);
+      options.step.output = datauri;
+      UI.onComplete(options.step);
     }
     return require('../_nomodule/PixelManipulation.js')(input, {
       output: output,
@@ -35200,12 +35158,12 @@ module.exports = function GreenChannel(options,UI) {
   options = options || {};
   options.title = "Green channel only";
   options.description = "Displays only the green channel of an image";
-  UI.onSetup();
+  UI.onSetup(options.step);
   var output;
 
   function draw(input,callback) {
 
-    UI.onDraw();
+    UI.onDraw(options.step);
     const step = this;
 
     function changePixel(r, g, b, a) {
@@ -35213,7 +35171,8 @@ module.exports = function GreenChannel(options,UI) {
     }
     function output(image,datauri,mimetype){
       step.output = {src:datauri,format:mimetype};
-      UI.onComplete(datauri);
+      options.step.output = datauri;
+      UI.onComplete(options.step);
     }
     return require('../_nomodule/PixelManipulation.js')(input, {
       output: output,
@@ -35243,14 +35202,14 @@ module.exports = function GreenChannel(options,UI) {
   options = options || {};
   options.title = "Invert Colors";
   options.description = "Inverts the colors of the image";
-  UI.onSetup();
+  UI.onSetup(options.step);
   var output;
 
   //function setup() {} // optional
 
   function draw(input,callback) {
 
-    UI.onDraw();
+    UI.onDraw(options.step);
     const step = this;
 
     function changePixel(r, g, b, a) {
@@ -35258,7 +35217,8 @@ module.exports = function GreenChannel(options,UI) {
     }
     function output(image,datauri,mimetype){
       step.output = {src:datauri,format:mimetype};
-      UI.onComplete(datauri);
+      options.step.output = datauri;
+      UI.onComplete(options.step);
     }
     return require('../_nomodule/PixelManipulation.js')(input, {
       output: output,
@@ -35287,12 +35247,12 @@ module.exports = function NdviRed(options,UI) {
 
   options = options || {};
   options.title = "NDVI for red-filtered cameras (blue is infrared)";
-  UI.onSetup();
+  UI.onSetup(options.step);
   var output;
 
   function draw(input,callback) {
 
-    UI.onDraw();
+    UI.onDraw(options.step);
     const step = this;
 
     function changePixel(r, g, b, a) {
@@ -35302,7 +35262,8 @@ module.exports = function NdviRed(options,UI) {
     }
     function output(image,datauri,mimetype){
       step.output = {src:datauri,format:mimetype};
-      UI.onComplete(datauri);
+      options.step.output = datauri;
+      UI.onComplete(options.step);
     }
     return require('../_nomodule/PixelManipulation.js')(input, {
       output: output,
@@ -35327,12 +35288,12 @@ module.exports = function SegmentedColormap(options,UI) {
 
   options = options || {};
   options.title = "Segmented Colormap";
-  UI.onSetup();
+  UI.onSetup(options.step);
   var output;
 
   function draw(input,callback) {
 
-    UI.onDraw();
+    UI.onDraw(options.step);
     const step = this;
 
     function changePixel(r, g, b, a) {
@@ -35343,7 +35304,8 @@ module.exports = function SegmentedColormap(options,UI) {
     }
     function output(image,datauri,mimetype){
       step.output = {src:datauri,format:mimetype};
-      UI.onComplete(datauri);
+      options.step.output = datauri;
+      UI.onComplete(options.step);
     }
     return require('../_nomodule/PixelManipulation.js')(input, {
       output: output,
diff --git a/src/AddStep.js b/src/AddStep.js
index 4998803a..62d6aa81 100644
--- a/src/AddStep.js
+++ b/src/AddStep.js
@@ -8,18 +8,14 @@ function AddStep(ref, image, name, o) {
     o.container = o_.container || ref.options.selector;
     o.image = image;
 
-    o.identity = {
-      stepName: o.name,
-      stepID: o.number,
-      imageName: o.image
+    o.step = {
+      name: o.name,
+      ID: o.number,
+      imageName: o.image,
+      inBrowser: ref.options.inBrowser,
+      ui: ref.options.ui
     };
-    o.UIFs = ref.UI();
-    var UI = {
-      onSetup: function(){o.UIFs.onSetup(o.identity);},
-      onDraw: function(){o.UIFs.onSetup(o.identity);},
-      onComplete: function(out){o.UIFs.onSetup(o.identity,out);},
-      onRemove: function(){o.UIFs.onSetup(o.identity);},
-    }
+    var UI = ref.events;
     var module = ref.modules[name](o,UI);
     ref.images[image].steps.push(module);
 
diff --git a/src/ImageSequencer.js b/src/ImageSequencer.js
index de1e6e10..204896c6 100644
--- a/src/ImageSequencer.js
+++ b/src/ImageSequencer.js
@@ -42,7 +42,7 @@ ImageSequencer = function ImageSequencer(options) {
       formatInput = require('./FormatInput'),
       images = {},
       inputlog = [],
-      UI;
+      events;
 
   setUI();
 
@@ -69,7 +69,7 @@ ImageSequencer = function ImageSequencer(options) {
   function removeStep(image,index) {
     //remove the step from images[image].steps and redraw remaining images
     if(index>0) {
-      images[image].steps[index].UI.onRemove();
+      images[image].steps[index].UI.onRemove(images[image].steps[index].options.step);
       images[image].steps.splice(index,1);
     }
     //tell the UI a step has been removed
@@ -161,9 +161,8 @@ ImageSequencer = function ImageSequencer(options) {
     return require('./ReplaceImage')(this,selector,steps);
   }
 
-  function setUI(_UI) {
-    UI = require('./UserInterface')(_UI,options);
-    return UI;
+  function setUI(UI) {
+    events = require('./UserInterface')(UI);
   }
 
   return {
@@ -173,7 +172,7 @@ ImageSequencer = function ImageSequencer(options) {
     inputlog: inputlog,
     modules: modules,
     images: images,
-    UI: UI,
+    events: events,
 
     //user functions
     loadImages: loadImages,
diff --git a/src/InsertStep.js b/src/InsertStep.js
index ed6d751d..64448949 100644
--- a/src/InsertStep.js
+++ b/src/InsertStep.js
@@ -10,18 +10,14 @@ function InsertStep(ref, image, index, name, o) {
 
     if(index==-1) index = ref.images[image].steps.length;
 
-    o.identity = {
-      stepName: o.name,
-      stepID: o.number,
-      imageName: o.image
+    o.step = {
+      name: o.name,
+      ID: o.number,
+      imageName: o.image,
+      inBrowser: ref.options.inBrowser,
+      ui: ref.options.ui
     };
-    o.UIFs = ref.UI();
-    var UI = {
-      onSetup: function(){o.UIFs.onSetup(o.identity);},
-      onDraw: function(){o.UIFs.onSetup(o.identity);},
-      onComplete: function(out){o.UIFs.onSetup(o.identity,out);},
-      onRemove: function(){o.UIFs.onSetup(o.identity);},
-    }
+    var UI = ref.events;
     var module = ref.modules[name](o,UI);
     ref.images[image].steps.splice(index,0,module);
 
diff --git a/src/LoadImage.js b/src/LoadImage.js
index d7453b0d..2c679313 100644
--- a/src/LoadImage.js
+++ b/src/LoadImage.js
@@ -9,27 +9,37 @@ function LoadImage(ref, name, src) {
   }
 
   function loadImage(name, src) {
+    var step = {
+      name: "load-image",
+      ID: ref.options.sequencerCounter++,
+      imageName: name,
+      inBrowser: ref.options.inBrowser,
+      ui: ref.options.ui
+    };
+
     var image = {
       src: src,
       steps: [{
         options: {
-          id: ref.options.sequencerCounter++,
+          id: step.ID,
           name: "load-image",
-          title: "Load Image"
+          title: "Load Image",
+          step: step
         },
-        UI: ref.UI({
-          stepName: "load-image",
-          stepID: ref.options.sequencerCounter++,
-          imageName: name
-        }),
+        UI: ref.events,
         draw: function() {
+          UI.onDraw(options.step);
           if(arguments.length==1){
             this.output = CImage(arguments[0]);
+            options.step.output = this.output;
+            UI.onComplete(options.step);
             return true;
           }
           else if(arguments.length==2) {
             this.output = CImage(arguments[0]);
+            options.step.output = this.output;
             arguments[1]();
+            UI.onComplete(options.step);
             return true;
           }
           return false;
@@ -38,9 +48,11 @@ function LoadImage(ref, name, src) {
       }]
     };
     ref.images[name] = image;
-    ref.images[name].steps[0].UI.onSetup();
-    ref.images[name].steps[0].UI.onDraw();
-    ref.images[name].steps[0].UI.onComplete(image.steps[0].output.src);
+    loadImageStep = ref.images[name].steps[0];
+    loadImageStep.options.step.output = loadImageStep.output.src;
+    loadImageStep.UI.onSetup(loadImageStep.options.step);
+    loadImageStep.UI.onDraw(loadImageStep.options.step);
+    loadImageStep.UI.onComplete(loadImageStep.options.step);
   }
 
   return loadImage(name,src);
diff --git a/src/UserInterface.js b/src/UserInterface.js
index b9300039..3b346994 100644
--- a/src/UserInterface.js
+++ b/src/UserInterface.js
@@ -1,75 +1,25 @@
 /*
- * Default UI for each image-sequencer module
+ * User Interface Handling Module
  */
-module.exports = function UserInterface(newUI = {},options) {
 
-  var UI = newUI;
-
-  return function userInterface(identity) {
-
-    identity.ui = options.ui;
-    identity.inBrowser = options.inBrowser;
-
-    UI.onSetup = UI.onSetup || function(identity) {
-      if(identity.ui == false) {
-        // No UI
-      }
-      else if(identity.inBrowser) {
-        // Create and append an HTML Element
-        console.log("Added Step \""+identity.stepName+"\" to \""+identity.imageName+"\".");
-      }
-      else {
-        // Create a NodeJS Object
-        console.log('\x1b[36m%s\x1b[0m',"Added Step \""+identity.stepName+"\" to \""+identity.imageName+"\".");
-
-      }
-    }
-
-    UI.onDraw = UI.onDraw || function(identity) {
-      if (identity.ui == false) {
-        // No UI
-      }
-      else if(identity.inBrowser) {
-        // Overlay a loading spinner
-        console.log("Drawing Step \""+identity.stepName+"\" on \""+identity.imageName+"\".");
-      }
-      else {
-        // Don't do anything
-        console.log('\x1b[33m%s\x1b[0m',"Drawing Step \""+identity.stepName+"\" on \""+identity.imageName+"\".");
-      }
-    }
-
-    UI.onComplete = UI.onComplete || function(identity,output) {
-      if (identity.ui == false) {
-        // No UI
-      }
-      else if(identity.inBrowser) {
-        // Update the DIV Element
-        // Hide the laoding spinner
-        console.log("Drawn Step \""+identity.stepName+"\" on \""+identity.imageName+"\".");
-      }
-      else {
-        // Update the NodeJS Object
-        console.log('\x1b[32m%s\x1b[0m',"Drawn Step \""+identity.stepName+"\" on \""+identity.imageName+"\".");
-      }
-    }
-
-    UI.onRemove = UI.onRemove || function(identity) {
-      if(identity.ui == false){
-        // No UI
-      }
-      else if(identity.inBrowser) {
-        // Remove the DIV Element
-        console.log("Removing Step \""+identity.stepName+"\" of \""+identity.imageName+"\".");
-      }
-      else {
-        // Delete the NodeJS Object
-        console.log('\x1b[31m%s\x1b[0m',"Removing Step \""+identity.stepName+"\" of \""+identity.imageName+"\".");
-      }
-    }
-
-    return UI;
+module.exports = function UserInterface(events = {}) {
 
+  events.onSetup = events.onSetup || function(step) {
+    console.log("onSetup "+step.name);
   }
 
+  events.onDraw = events.onDraw || function(step) {
+    console.log("onDraw "+step.name);
+  }
+
+  events.onComplete = events.onComplete || function(step) {
+    console.log("onComplete "+step.name);
+  }
+
+  events.onRemove = events.onRemove || function(step) {
+    console.log("onRemove "+step.name);
+  }
+
+  return events;
+
 }
diff --git a/src/modules/Crop/Module.js b/src/modules/Crop/Module.js
index 40e8ce6b..8e902e27 100644
--- a/src/modules/Crop/Module.js
+++ b/src/modules/Crop/Module.js
@@ -16,12 +16,12 @@
  module.exports = function CropModule(options,UI) {
    options = options || {};
    options.title = "Crop Image";
-   UI.onSetup();
+   UI.onSetup(options.step);
    var output
 
    function draw(input,callback) {
 
-     UI.onDraw();
+     UI.onDraw(options.step);
      const step = this;
 
      require('./Crop')(input,options,function(out,format){
@@ -29,7 +29,8 @@
          src: out,
          format: format
        }
-       UI.onComplete(out);
+       options.step.output = out;
+       UI.onComplete(options.step);
        callback();
      });
 
diff --git a/src/modules/DoNothing/Module.js b/src/modules/DoNothing/Module.js
index f45712c0..01e3e35a 100644
--- a/src/modules/DoNothing/Module.js
+++ b/src/modules/DoNothing/Module.js
@@ -4,14 +4,17 @@
 module.exports = function DoNothing(options,UI) {
   options = options || {};
   options.title = "Do Nothing";
-  UI.onSetup();
+  UI.onSetup(options.step);
   var output;
 
   function draw(input,callback) {
-    UI.onDraw();
+    UI.onDraw(options.step);
+
     this.output = input;
+
+    options.step.output = this.output.src;
     callback();
-    UI.onComplete(this.output.src);
+    UI.onComplete(options.step);
   }
 
   return {
diff --git a/src/modules/DoNothingPix/Module.js b/src/modules/DoNothingPix/Module.js
index 0d1974ca..8c7798c5 100644
--- a/src/modules/DoNothingPix/Module.js
+++ b/src/modules/DoNothingPix/Module.js
@@ -5,12 +5,12 @@ module.exports = function DoNothingPix(options,UI) {
 
   options = options || {};
   options.title = "Do Nothing with pixels";
-  UI.onSetup();
+  UI.onSetup(options.step);
   var output;
 
   function draw(input,callback) {
 
-    UI.onDraw();
+    UI.onDraw(options.step);
     const step = this;
 
     function changePixel(r, g, b, a) {
@@ -18,7 +18,8 @@ module.exports = function DoNothingPix(options,UI) {
     }
     function output(image,datauri,mimetype){
       step.output = {src:datauri,format:mimetype}
-      UI.onComplete(datauri);
+      options.step.output = datauri;
+      UI.onComplete(options.step);
     }
     return require('../_nomodule/PixelManipulation.js')(input, {
       output: output,
diff --git a/src/modules/GreenChannel/Module.js b/src/modules/GreenChannel/Module.js
index 3b389dc4..1cc934e1 100644
--- a/src/modules/GreenChannel/Module.js
+++ b/src/modules/GreenChannel/Module.js
@@ -6,12 +6,12 @@ module.exports = function GreenChannel(options,UI) {
   options = options || {};
   options.title = "Green channel only";
   options.description = "Displays only the green channel of an image";
-  UI.onSetup();
+  UI.onSetup(options.step);
   var output;
 
   function draw(input,callback) {
 
-    UI.onDraw();
+    UI.onDraw(options.step);
     const step = this;
 
     function changePixel(r, g, b, a) {
@@ -19,7 +19,8 @@ module.exports = function GreenChannel(options,UI) {
     }
     function output(image,datauri,mimetype){
       step.output = {src:datauri,format:mimetype};
-      UI.onComplete(datauri);
+      options.step.output = datauri;
+      UI.onComplete(options.step);
     }
     return require('../_nomodule/PixelManipulation.js')(input, {
       output: output,
diff --git a/src/modules/Invert/Module.js b/src/modules/Invert/Module.js
index 65106427..95ecee1e 100644
--- a/src/modules/Invert/Module.js
+++ b/src/modules/Invert/Module.js
@@ -6,14 +6,14 @@ module.exports = function GreenChannel(options,UI) {
   options = options || {};
   options.title = "Invert Colors";
   options.description = "Inverts the colors of the image";
-  UI.onSetup();
+  UI.onSetup(options.step);
   var output;
 
   //function setup() {} // optional
 
   function draw(input,callback) {
 
-    UI.onDraw();
+    UI.onDraw(options.step);
     const step = this;
 
     function changePixel(r, g, b, a) {
@@ -21,7 +21,8 @@ module.exports = function GreenChannel(options,UI) {
     }
     function output(image,datauri,mimetype){
       step.output = {src:datauri,format:mimetype};
-      UI.onComplete(datauri);
+      options.step.output = datauri;
+      UI.onComplete(options.step);
     }
     return require('../_nomodule/PixelManipulation.js')(input, {
       output: output,
diff --git a/src/modules/NdviRed/Module.js b/src/modules/NdviRed/Module.js
index a6a9a230..19a8a255 100644
--- a/src/modules/NdviRed/Module.js
+++ b/src/modules/NdviRed/Module.js
@@ -5,12 +5,12 @@ module.exports = function NdviRed(options,UI) {
 
   options = options || {};
   options.title = "NDVI for red-filtered cameras (blue is infrared)";
-  UI.onSetup();
+  UI.onSetup(options.step);
   var output;
 
   function draw(input,callback) {
 
-    UI.onDraw();
+    UI.onDraw(options.step);
     const step = this;
 
     function changePixel(r, g, b, a) {
@@ -20,7 +20,8 @@ module.exports = function NdviRed(options,UI) {
     }
     function output(image,datauri,mimetype){
       step.output = {src:datauri,format:mimetype};
-      UI.onComplete(datauri);
+      options.step.output = datauri;
+      UI.onComplete(options.step);
     }
     return require('../_nomodule/PixelManipulation.js')(input, {
       output: output,
diff --git a/src/modules/SegmentedColormap/Module.js b/src/modules/SegmentedColormap/Module.js
index 00aa60b5..b671c60a 100644
--- a/src/modules/SegmentedColormap/Module.js
+++ b/src/modules/SegmentedColormap/Module.js
@@ -2,12 +2,12 @@ module.exports = function SegmentedColormap(options,UI) {
 
   options = options || {};
   options.title = "Segmented Colormap";
-  UI.onSetup();
+  UI.onSetup(options.step);
   var output;
 
   function draw(input,callback) {
 
-    UI.onDraw();
+    UI.onDraw(options.step);
     const step = this;
 
     function changePixel(r, g, b, a) {
@@ -18,7 +18,8 @@ module.exports = function SegmentedColormap(options,UI) {
     }
     function output(image,datauri,mimetype){
       step.output = {src:datauri,format:mimetype};
-      UI.onComplete(datauri);
+      options.step.output = datauri;
+      UI.onComplete(options.step);
     }
     return require('../_nomodule/PixelManipulation.js')(input, {
       output: output,
diff --git a/test.js b/test.js
index 8fcbae71..bf868390 100644
--- a/test.js
+++ b/test.js
@@ -1,5 +1,4 @@
 require('./src/ImageSequencer');
 sequencer = ImageSequencer();
-sequencer.loadImages({images:{red:'examples/red.jpg'},callback:function(){
-  sequencer.addSteps(['do-nothing','invert']).run();
-}});
+sequencer.loadImages('examples/red.jpg');
+sequencer.addSteps('do-nothing');

From 31e9b3ec9de6399ffddf76f51d742638d04dc4c8 Mon Sep 17 00:00:00 2001
From: Chinmay Pandhare <pandharechinmay882@gmail.com>
Date: Sat, 29 Jul 2017 03:20:17 +0530
Subject: [PATCH 3/6] Complete UI Handling

---
 .gitignore              |  2 ++
 dist/image-sequencer.js | 58 ++++++++++++++++++++++++++++++++++-------
 src/ImageSequencer.js   |  9 +++----
 src/UserInterface.js    | 49 +++++++++++++++++++++++++++++++---
 4 files changed, 100 insertions(+), 18 deletions(-)

diff --git a/.gitignore b/.gitignore
index 195c8f8d..200b54d8 100644
--- a/.gitignore
+++ b/.gitignore
@@ -34,3 +34,5 @@ node_modules
 
 *.swp
 todo.txt
+test.js
+output.txt
diff --git a/dist/image-sequencer.js b/dist/image-sequencer.js
index 9af5ec20..24d9ea24 100644
--- a/dist/image-sequencer.js
+++ b/dist/image-sequencer.js
@@ -34620,9 +34620,7 @@ ImageSequencer = function ImageSequencer(options) {
       formatInput = require('./FormatInput'),
       images = {},
       inputlog = [],
-      events;
-
-  setUI();
+      events = require('./UserInterface')();
 
   // if in browser, prompt for an image
   // if (options.imageSelect || options.inBrowser) addStep('image-select');
@@ -34647,7 +34645,8 @@ ImageSequencer = function ImageSequencer(options) {
   function removeStep(image,index) {
     //remove the step from images[image].steps and redraw remaining images
     if(index>0) {
-      images[image].steps[index].UI.onRemove(images[image].steps[index].options.step);
+      thisStep = images[image].steps[index];
+      thisStep.UI.onRemove(thisStep.options.step);
       images[image].steps.splice(index,1);
     }
     //tell the UI a step has been removed
@@ -34751,7 +34750,7 @@ ImageSequencer = function ImageSequencer(options) {
   }
 
   function setUI(UI) {
-    events = require('./UserInterface')(UI);
+    this.events = require('./UserInterface')(UI);
   }
 
   return {
@@ -35025,19 +35024,60 @@ module.exports = Run;
 module.exports = function UserInterface(events = {}) {
 
   events.onSetup = events.onSetup || function(step) {
-    console.log("onSetup "+step.name);
+    if(step.ui == false) {
+        // No UI
+    }
+    else if(step.inBrowser) {
+      // Create and append an HTML Element
+      console.log("Added Step \""+step.name+"\" to \""+step.imageName+"\".");
+    }
+    else {
+      // Create a NodeJS Object
+      console.log('\x1b[36m%s\x1b[0m',"Added Step \""+step.name+"\" to \""+step.imageName+"\".");
+    }
   }
 
   events.onDraw = events.onDraw || function(step) {
-    console.log("onDraw "+step.name);
+    if (step.ui == false) {
+      // No UI
+    }
+    else if(step.inBrowser) {
+      // Overlay a loading spinner
+      console.log("Drawing Step \""+step.name+"\" on \""+step.imageName+"\".");
+    }
+    else {
+      // Don't do anything
+      console.log('\x1b[33m%s\x1b[0m',"Drawing Step \""+step.name+"\" on \""+step.imageName+"\".");
+    }
   }
 
   events.onComplete = events.onComplete || function(step) {
-    console.log("onComplete "+step.name);
+    if (step.ui == false) {
+      // No UI
+    }
+    else if(step.inBrowser) {
+      // Update the DIV Element
+      // Hide the laoding spinner
+      console.log("Drawn Step \""+step.name+"\" on \""+step.imageName+"\".");
+    }
+    else {
+      // Update the NodeJS Object
+      console.log('\x1b[32m%s\x1b[0m',"Drawn Step \""+step.name+"\" on \""+step.imageName+"\".");
+    }
   }
 
   events.onRemove = events.onRemove || function(step) {
-    console.log("onRemove "+step.name);
+    if(step.ui == false){
+      // No UI
+    }
+    else if(step.inBrowser) {
+      // Remove the DIV Element
+      console.log("Removing Step \""+step.name+"\" of \""+step.imageName+"\".");
+    }
+    else {
+      // Delete the NodeJS Object
+      console.log('\x1b[31m%s\x1b[0m',"Removing Step \""+step.name+"\" of \""+step.imageName+"\".");
+    }
   }
 
   return events;
diff --git a/src/ImageSequencer.js b/src/ImageSequencer.js
index 8decaa40..726210d8 100644
--- a/src/ImageSequencer.js
+++ b/src/ImageSequencer.js
@@ -42,9 +42,7 @@ ImageSequencer = function ImageSequencer(options) {
       formatInput = require('./FormatInput'),
       images = {},
       inputlog = [],
-      events;
-
-  setUI();
+      events = require('./UserInterface')();
 
   // if in browser, prompt for an image
   // if (options.imageSelect || options.inBrowser) addStep('image-select');
@@ -69,7 +67,8 @@ ImageSequencer = function ImageSequencer(options) {
   function removeStep(image,index) {
     //remove the step from images[image].steps and redraw remaining images
     if(index>0) {
-      images[image].steps[index].UI.onRemove(images[image].steps[index].options.step);
+      thisStep = images[image].steps[index];
+      thisStep.UI.onRemove(thisStep.options.step);
       images[image].steps.splice(index,1);
     }
     //tell the UI a step has been removed
@@ -173,7 +172,7 @@ ImageSequencer = function ImageSequencer(options) {
   }
 
   function setUI(UI) {
-    events = require('./UserInterface')(UI);
+    this.events = require('./UserInterface')(UI);
   }
 
   return {
diff --git a/src/UserInterface.js b/src/UserInterface.js
index 3b346994..c0f1df5b 100644
--- a/src/UserInterface.js
+++ b/src/UserInterface.js
@@ -5,19 +5,60 @@
 module.exports = function UserInterface(events = {}) {
 
   events.onSetup = events.onSetup || function(step) {
-    console.log("onSetup "+step.name);
+    if(step.ui == false) {
+        // No UI
+    }
+    else if(step.inBrowser) {
+      // Create and append an HTML Element
+      console.log("Added Step \""+step.name+"\" to \""+step.imageName+"\".");
+    }
+    else {
+      // Create a NodeJS Object
+      console.log('\x1b[36m%s\x1b[0m',"Added Step \""+step.name+"\" to \""+step.imageName+"\".");
+    }
   }
 
   events.onDraw = events.onDraw || function(step) {
-    console.log("onDraw "+step.name);
+    if (step.ui == false) {
+      // No UI
+    }
+    else if(step.inBrowser) {
+      // Overlay a loading spinner
+      console.log("Drawing Step \""+step.name+"\" on \""+step.imageName+"\".");
+    }
+    else {
+      // Don't do anything
+      console.log('\x1b[33m%s\x1b[0m',"Drawing Step \""+step.name+"\" on \""+step.imageName+"\".");
+    }
   }
 
   events.onComplete = events.onComplete || function(step) {
-    console.log("onComplete "+step.name);
+    if (step.ui == false) {
+      // No UI
+    }
+    else if(step.inBrowser) {
+      // Update the DIV Element
+      // Hide the laoding spinner
+      console.log("Drawn Step \""+step.name+"\" on \""+step.imageName+"\".");
+    }
+    else {
+      // Update the NodeJS Object
+      console.log('\x1b[32m%s\x1b[0m',"Drawn Step \""+step.name+"\" on \""+step.imageName+"\".");
+    }
   }
 
   events.onRemove = events.onRemove || function(step) {
-    console.log("onRemove "+step.name);
+    if(step.ui == false){
+      // No UI
+    }
+    else if(step.inBrowser) {
+      // Remove the DIV Element
+      console.log("Removing Step \""+step.name+"\" of \""+step.imageName+"\".");
+    }
+    else {
+      // Delete the NodeJS Object
+      console.log('\x1b[31m%s\x1b[0m',"Removing Step \""+step.name+"\" of \""+step.imageName+"\".");
+    }
   }
 
   return events;

From d1b47a73fee285801e503ad914d4599f58e3baf0 Mon Sep 17 00:00:00 2001
From: Chinmay Pandhare <pandharechinmay882@gmail.com>
Date: Sat, 29 Jul 2017 03:28:39 +0530
Subject: [PATCH 4/6] Updated README.md

---
 README.md | 55 +++++++++++++++++++++++++++++++++++++------------------
 1 file changed, 37 insertions(+), 18 deletions(-)

diff --git a/README.md b/README.md
index 2465ac97..5e42bfef 100644
--- a/README.md
+++ b/README.md
@@ -370,10 +370,10 @@ How to define these functions:
 
 ```js
 sequencer.setUI({
-  onSetup: function() {},
-  onDraw: function() {},
-  onComplete: function(output) {},
-  onRemove: function() {}
+  onSetup: function(step) {},
+  onDraw: function(step) {},
+  onComplete: function(step) {},
+  onRemove: function(step) {}
 });
 ```
 
@@ -383,18 +383,37 @@ the `setUI` method will only affect the modules added after `setUI` is called.
 
 The `onComplete` event is passed on the output of the module.
 
-In the scope of all these events, the following variables are present, which
-may be used in generating the UI:
-* The object `identity`
-```
-identity = {
-  stepName: "Name of the Step",
-  stepID: "A unique ID given to the step",
-  imageName: "The name of the image to which the step is added."
-}
-```
-* The variable `options.inBrowser` which is a Boolean and is `true` if the client is a browser and `false` otherwise.
+Image Sequencer provides a namespace `step` for the purpose of UI Creation in
+the scope of these definable function. This namespace has the following
+predefined properties:
 
-Note: `identity.imageName` is the "name" of that particular image. This name can be specified
-while loading the image via `sequencer.loadImage("name","SRC")`. If not specified,
-the name of a loaded image defaults to a name like "image1", "image2", et cetra.
+* `step.name` : (String) Name of the step
+* `step.ID` : (Number) An ID given to every step of the sequencer, unique throughout.
+* `step.imageName` : (String) Name of the image the step is applied to.
+* `step.output` : (DataURL String) Output of the step.
+* `step.inBrowser` : (Boolean) Whether the client is a browser or not
+
+In addition to these, one might define their own properties, which shall be
+accessible across all the event scopes of that step.
+
+For example :
+
+```js
+sequencer.setUI({
+  onSetup: function(step){
+    step.image = document.createElement('img');
+    document.body.append(step.image);
+  },
+  onComplete: function(step){
+    step.image.src = step.output;
+  },
+  onRemove: function(step){
+    step.image.remove();
+  }
+});
+```
+
+Note: `identity.imageName` is the "name" of that particular image. This name can
+be specified while loading the image via `sequencer.loadImage("name","SRC")`. If
+not specified, the name of a loaded image defaults to a name like "image1",
+"image2", et cetra.

From 6eea7b8bd6a4d6f2f748e466381ab72f8a0865a1 Mon Sep 17 00:00:00 2001
From: Chinmay Pandhare <pandharechinmay882@gmail.com>
Date: Sat, 29 Jul 2017 03:31:33 +0530
Subject: [PATCH 5/6] Updated README.md

---
 CONTRIBUTING.md | 7 ++++---
 README.md       | 3 +++
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 84e9801d..185ea142 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -13,17 +13,18 @@ Any module must look like this :
 module.exports = function ModuleName(options,UI) {
   options = options || {};
   options.title = "Title of the Module";
-  UI.onSetup();
+  UI.onSetup(options.step);
   var output;
 
   function draw(input,callback) {
-    UI.onDraw();
+    UI.onDraw(options.step);
 
     var output = /*do something with the input*/ ;
 
     this.output = output;
+    options.step.output = output.src;
     callback();
-    UI.onComplete(this.output.src);
+    UI.onComplete(options.step);
   }
 
   return {
diff --git a/README.md b/README.md
index 5e42bfef..90f02cbd 100644
--- a/README.md
+++ b/README.md
@@ -401,13 +401,16 @@ For example :
 ```js
 sequencer.setUI({
   onSetup: function(step){
+    // Create new property "step.image"
     step.image = document.createElement('img');
     document.body.append(step.image);
   },
   onComplete: function(step){
+    // Access predefined "step.output" and user-defined "step.image"
     step.image.src = step.output;
   },
   onRemove: function(step){
+    // Access user-defined "step.image"
     step.image.remove();
   }
 });

From 93941b12803d33841a4da56c3eb6bb1a39c77a8f Mon Sep 17 00:00:00 2001
From: Chinmay Pandhare <pandharechinmay882@gmail.com>
Date: Sat, 29 Jul 2017 03:33:35 +0530
Subject: [PATCH 6/6] Updated CONTRIBUTING.md

---
 CONTRIBUTING.md | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 185ea142..e81939e3 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -66,21 +66,19 @@ constant definitions must be done **outside** the `draw()` method's definition.
 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, and call
-`callback()`.
+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
 
 ### UI Methods
 
 The module is responsible to emit various events for the UI to capture. There are
 four events in all:
 
-* `UI.onSetup()` must be emitted when the module is added. So it must be emitted
-outside the draw method's definition as shown above.
-* `UI.onDraw()` must be emitted whenever the `draw()` method is called. So it should
-ideally be the first line of the definition of the `draw` method.
-* `UI.onComplete(output_src)` must be emitted whenever the output of a draw call
+* `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.
+* `UI.onComplete(options.step)` must be emitted whenever the output of a draw call
 is ready. An argument, that is the DataURL of the output image must be passed in.
-* `UI.onRemove()` is emitted automatically and the module should not emit it.
+* `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: