Added Docs, updated method names

README.md

@@ -325,6 +325,50 @@ sequencer.insertSteps({
 return value: **`sequencer`** (To allow method chaining)
 
 
+## Creating a User Interface
+
+Image Sequencer provides the following events which can be used to generate a UI:
+
+* `onSetup` : this event is triggered when a new module is set up. This can be used,
+for instance, to generate a DIV element to store the generated image for that step.
+* `onDraw` : This event is triggered when Image Sequencer starts drawing the output
+for a module. This can be used, for instance, to overlay a loading GIF over the DIV
+generated above.
+* `onComplete` : This event is triggered when Image Sequencer has drawn the output
+for a module. This can be used, for instance, to update the DIV with the new image
+and remove the loading GIF generated above.
+* `onRemove` : This event is triggered when a module is removed. This can be used,
+for instance, to remove the DIV generated above.
+
+How to define these functions:
+
+```js
+sequencer.setUI({
+  onSetup: function() {},
+  onDraw: function() {},
+  onComplete: function(output) {},
+  onRemove: function() {}
+});
+```
+
+These methods can be defined and re-defined at any time, but it is advisable to
+set them before any module is added and not change it thereafter. This is because
+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.
+
 ## Contributing
 
 Happily accepting pull requests; to edit the core library, modify files in `/src/`. To build, run `npm install` and `grunt build`.

dist/image-sequencer.js

@@ -34822,7 +34822,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.remove();
+      images[image].steps[index].UI.onRemove();
       images[image].steps.splice(index,1);
     }
     //tell the UI a step has been removed
@@ -35016,9 +35016,9 @@ function LoadImage(ref, name, src) {
       }]
     };
     ref.images[name] = image;
-    ref.images[name].steps[0].UI.setup();
+    ref.images[name].steps[0].UI.onSetup();
-    ref.images[name].steps[0].UI.drawing();
+    ref.images[name].steps[0].UI.onDraw();
-    ref.images[name].steps[0].UI.drawn(image.steps[0].output.src);
+    ref.images[name].steps[0].UI.onComplete(image.steps[0].output.src);
   }
 
   return loadImage(name,src);
@@ -35136,7 +35136,7 @@ module.exports = function UserInterface(UI,options) {
 
     var UI = UI || {};
 
-    UI.setup = UI.setup || function() {
+    UI.onSetup = UI.onSetup || function() {
       if(options.ui == "none") {
         // No UI
       }
@@ -35151,7 +35151,7 @@ module.exports = function UserInterface(UI,options) {
       }
     }
 
-    UI.drawing = UI.drawing || function() {
+    UI.onDraw = UI.onDraw || function() {
       if (options.ui == "none") {
         // No UI
       }
@@ -35165,7 +35165,7 @@ module.exports = function UserInterface(UI,options) {
       }
     }
 
-    UI.drawn = UI.drawn || function(output) {
+    UI.onComplete = UI.onComplete || function(output) {
       if (options.ui == "none") {
         // No UI
       }
@@ -35180,7 +35180,7 @@ module.exports = function UserInterface(UI,options) {
       }
     }
 
-    UI.remove = UI.remove || function(callback) {
+    UI.onRemove = UI.onRemove || function(callback) {
       if(options.ui == "null"){
         // No UI
       }
@@ -35254,12 +35254,12 @@ module.exports = function Crop(input,options,callback) {
  module.exports = function CropModule(options,UI) {
    options = options || {};
    options.title = "Crop Image";
-   UI.setup();
+   UI.onSetup();
    var output
 
    function draw(input,callback) {
 
-     UI.drawing();
+     UI.onDraw();
      const this_ = this;
 
      require('./Crop')(input,options,function(out,format){
@@ -35267,7 +35267,7 @@ module.exports = function Crop(input,options,callback) {
          src: out,
          format: format
        }
-       UI.drawn(out);
+       UI.onComplete(out);
        callback();
      });
 
@@ -35289,14 +35289,14 @@ module.exports = function Crop(input,options,callback) {
 module.exports = function DoNothing(options,UI) {
   options = options || {};
   options.title = "Do Nothing";
-  UI.setup();
+  UI.onSetup();
   var output;
 
   function draw(input,callback) {
-    UI.drawing();
+    UI.onDraw();
     this.output = input;
     callback();
-    UI.drawn(this.output.src);
+    UI.onComplete(this.output.src);
   }
 
   return {
@@ -35315,12 +35315,12 @@ module.exports = function DoNothingPix(options,UI) {
 
   options = options || {};
   options.title = "Do Nothing with pixels";
-  UI.setup();
+  UI.onSetup();
   var output;
 
   function draw(input,callback) {
 
-    UI.drawing();
+    UI.onDraw();
     var this_ = this;
 
     function changePixel(r, g, b, a) {
@@ -35328,7 +35328,7 @@ module.exports = function DoNothingPix(options,UI) {
     }
     function output(image,datauri,mimetype){
       this_.output = {src:datauri,format:mimetype}
-      UI.drawn(datauri);
+      UI.onComplete(datauri);
     }
     return require('../_nomodule/PixelManipulation.js')(input, {
       output: output,
@@ -35337,7 +35337,7 @@ module.exports = function DoNothingPix(options,UI) {
       image: options.image,
       callback: callback
     });
-    
+
   }
 
   return {
@@ -35357,12 +35357,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.setup();
+  UI.onSetup();
   var output;
 
   function draw(input,callback) {
 
-    UI.drawing();
+    UI.onDraw();
     var this_ = this;
 
     function changePixel(r, g, b, a) {
@@ -35370,7 +35370,7 @@ module.exports = function GreenChannel(options,UI) {
     }
     function output(image,datauri,mimetype){
       this_.output = {src:datauri,format:mimetype};
-      UI.drawn(datauri);
+      UI.onComplete(datauri);
     }
     return require('../_nomodule/PixelManipulation.js')(input, {
       output: output,
@@ -35400,14 +35400,14 @@ module.exports = function GreenChannel(options,UI) {
   options = options || {};
   options.title = "Invert Colors";
   options.description = "Inverts the colors of the image";
-  UI.setup();
+  UI.onSetup();
   var output;
 
   //function setup() {} // optional
 
   function draw(input,callback) {
 
-    UI.drawing();
+    UI.onDraw();
     var this_ = this;
 
     function changePixel(r, g, b, a) {
@@ -35415,7 +35415,7 @@ module.exports = function GreenChannel(options,UI) {
     }
     function output(image,datauri,mimetype){
       this_.output = {src:datauri,format:mimetype};
-      UI.drawn(datauri);
+      UI.onComplete(datauri);
     }
     return require('../_nomodule/PixelManipulation.js')(input, {
       output: output,
@@ -35444,12 +35444,12 @@ module.exports = function NdviRed(options,UI) {
 
   options = options || {};
   options.title = "NDVI for red-filtered cameras (blue is infrared)";
-  UI.setup();
+  UI.onSetup();
   var output;
 
   function draw(input,callback) {
 
-    UI.drawing();
+    UI.onDraw();
     var this_ = this;
 
     function changePixel(r, g, b, a) {
@@ -35459,7 +35459,7 @@ module.exports = function NdviRed(options,UI) {
     }
     function output(image,datauri,mimetype){
       this_.output = {src:datauri,format:mimetype};
-      UI.drawn(datauri);
+      UI.onComplete(datauri);
     }
     return require('../_nomodule/PixelManipulation.js')(input, {
       output: output,
@@ -35484,12 +35484,12 @@ module.exports = function SegmentedColormap(options,UI) {
 
   options = options || {};
   options.title = "Segmented Colormap";
-  UI.setup();
+  UI.onSetup();
   var output;
 
   function draw(input,callback) {
 
-    UI.drawing();
+    UI.onDraw();
     var this_ = this;
 
     function changePixel(r, g, b, a) {
@@ -35500,7 +35500,7 @@ module.exports = function SegmentedColormap(options,UI) {
     }
     function output(image,datauri,mimetype){
       this_.output = {src:datauri,format:mimetype};
-      UI.drawn(datauri);
+      UI.onComplete(datauri);
     }
     return require('../_nomodule/PixelManipulation.js')(input, {
       output: output,

src/ImageSequencer.js

@@ -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.remove();
+      images[image].steps[index].UI.onRemove();
       images[image].steps.splice(index,1);
     }
     //tell the UI a step has been removed

src/LoadImage.js

@@ -38,9 +38,9 @@ function LoadImage(ref, name, src) {
       }]
     };
     ref.images[name] = image;
-    ref.images[name].steps[0].UI.setup();
+    ref.images[name].steps[0].UI.onSetup();
-    ref.images[name].steps[0].UI.drawing();
+    ref.images[name].steps[0].UI.onDraw();
-    ref.images[name].steps[0].UI.drawn(image.steps[0].output.src);
+    ref.images[name].steps[0].UI.onComplete(image.steps[0].output.src);
   }
 
   return loadImage(name,src);

src/UserInterface.js

@@ -7,7 +7,7 @@ module.exports = function UserInterface(UI,options) {
 
     var UI = UI || {};
 
-    UI.setup = UI.setup || function() {
+    UI.onSetup = UI.onSetup || function() {
       if(options.ui == "none") {
         // No UI
       }
@@ -22,7 +22,7 @@ module.exports = function UserInterface(UI,options) {
       }
     }
 
-    UI.drawing = UI.drawing || function() {
+    UI.onDraw = UI.onDraw || function() {
       if (options.ui == "none") {
         // No UI
       }
@@ -36,7 +36,7 @@ module.exports = function UserInterface(UI,options) {
       }
     }
 
-    UI.drawn = UI.drawn || function(output) {
+    UI.onComplete = UI.onComplete || function(output) {
       if (options.ui == "none") {
         // No UI
       }
@@ -51,7 +51,7 @@ module.exports = function UserInterface(UI,options) {
       }
     }
 
-    UI.remove = UI.remove || function(callback) {
+    UI.onRemove = UI.onRemove || function(callback) {
       if(options.ui == "null"){
         // No UI
       }

src/modules/Crop/Module.js

@@ -16,12 +16,12 @@
  module.exports = function CropModule(options,UI) {
    options = options || {};
    options.title = "Crop Image";
-   UI.setup();
+   UI.onSetup();
    var output
 
    function draw(input,callback) {
 
-     UI.drawing();
+     UI.onDraw();
      const this_ = this;
 
      require('./Crop')(input,options,function(out,format){
@@ -29,7 +29,7 @@
          src: out,
          format: format
        }
-       UI.drawn(out);
+       UI.onComplete(out);
        callback();
      });
 

src/modules/DoNothing/Module.js

@@ -4,14 +4,14 @@
 module.exports = function DoNothing(options,UI) {
   options = options || {};
   options.title = "Do Nothing";
-  UI.setup();
+  UI.onSetup();
   var output;
 
   function draw(input,callback) {
-    UI.drawing();
+    UI.onDraw();
     this.output = input;
     callback();
-    UI.drawn(this.output.src);
+    UI.onComplete(this.output.src);
   }
 
   return {

src/modules/DoNothingPix/Module.js

@@ -5,12 +5,12 @@ module.exports = function DoNothingPix(options,UI) {
 
   options = options || {};
   options.title = "Do Nothing with pixels";
-  UI.setup();
+  UI.onSetup();
   var output;
 
   function draw(input,callback) {
 
-    UI.drawing();
+    UI.onDraw();
     var this_ = this;
 
     function changePixel(r, g, b, a) {
@@ -18,7 +18,7 @@ module.exports = function DoNothingPix(options,UI) {
     }
     function output(image,datauri,mimetype){
       this_.output = {src:datauri,format:mimetype}
-      UI.drawn(datauri);
+      UI.onComplete(datauri);
     }
     return require('../_nomodule/PixelManipulation.js')(input, {
       output: output,
@@ -27,7 +27,7 @@ module.exports = function DoNothingPix(options,UI) {
       image: options.image,
       callback: callback
     });
-    
+
   }
 
   return {

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.setup();
+  UI.onSetup();
   var output;
 
   function draw(input,callback) {
 
-    UI.drawing();
+    UI.onDraw();
     var this_ = this;
 
     function changePixel(r, g, b, a) {
@@ -19,7 +19,7 @@ module.exports = function GreenChannel(options,UI) {
     }
     function output(image,datauri,mimetype){
       this_.output = {src:datauri,format:mimetype};
-      UI.drawn(datauri);
+      UI.onComplete(datauri);
     }
     return require('../_nomodule/PixelManipulation.js')(input, {
       output: output,

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.setup();
+  UI.onSetup();
   var output;
 
   //function setup() {} // optional
 
   function draw(input,callback) {
 
-    UI.drawing();
+    UI.onDraw();
     var this_ = this;
 
     function changePixel(r, g, b, a) {
@@ -21,7 +21,7 @@ module.exports = function GreenChannel(options,UI) {
     }
     function output(image,datauri,mimetype){
       this_.output = {src:datauri,format:mimetype};
-      UI.drawn(datauri);
+      UI.onComplete(datauri);
     }
     return require('../_nomodule/PixelManipulation.js')(input, {
       output: output,

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.setup();
+  UI.onSetup();
   var output;
 
   function draw(input,callback) {
 
-    UI.drawing();
+    UI.onDraw();
     var this_ = this;
 
     function changePixel(r, g, b, a) {
@@ -20,7 +20,7 @@ module.exports = function NdviRed(options,UI) {
     }
     function output(image,datauri,mimetype){
       this_.output = {src:datauri,format:mimetype};
-      UI.drawn(datauri);
+      UI.onComplete(datauri);
     }
     return require('../_nomodule/PixelManipulation.js')(input, {
       output: output,

src/modules/SegmentedColormap/Module.js

@@ -2,12 +2,12 @@ module.exports = function SegmentedColormap(options,UI) {
 
   options = options || {};
   options.title = "Segmented Colormap";
-  UI.setup();
+  UI.onSetup();
   var output;
 
   function draw(input,callback) {
 
-    UI.drawing();
+    UI.onDraw();
     var this_ = this;
 
     function changePixel(r, g, b, a) {
@@ -18,7 +18,7 @@ module.exports = function SegmentedColormap(options,UI) {
     }
     function output(image,datauri,mimetype){
       this_.output = {src:datauri,format:mimetype};
-      UI.drawn(datauri);
+      UI.onComplete(datauri);
     }
     return require('../_nomodule/PixelManipulation.js')(input, {
       output: output,