From 7584b1ec45e541978b3024c03d54fbeb65ddba00 Mon Sep 17 00:00:00 2001 From: Chinmay Pandhare Date: Sun, 23 Jul 2017 11:57:05 +0530 Subject: [PATCH] Added Docs, updated method names --- README.md | 44 ++++++++++++++++++ dist/image-sequencer.js | 60 ++++++++++++------------- src/ImageSequencer.js | 2 +- src/LoadImage.js | 6 +-- src/UserInterface.js | 8 ++-- src/modules/Crop/Module.js | 6 +-- src/modules/DoNothing/Module.js | 6 +-- src/modules/DoNothingPix/Module.js | 8 ++-- src/modules/GreenChannel/Module.js | 6 +-- src/modules/Invert/Module.js | 6 +-- src/modules/NdviRed/Module.js | 6 +-- src/modules/SegmentedColormap/Module.js | 6 +-- 12 files changed, 104 insertions(+), 60 deletions(-) diff --git a/README.md b/README.md index 455bd259..9fd2525d 100644 --- a/README.md +++ b/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`. diff --git a/dist/image-sequencer.js b/dist/image-sequencer.js index 5cc6110b..13f7c160 100644 --- a/dist/image-sequencer.js +++ b/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.drawing(); - ref.images[name].steps[0].UI.drawn(image.steps[0].output.src); + 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); } 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, diff --git a/src/ImageSequencer.js b/src/ImageSequencer.js index b3f37960..de1e6e10 100644 --- a/src/ImageSequencer.js +++ b/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 diff --git a/src/LoadImage.js b/src/LoadImage.js index 204c0ae6..d7453b0d 100644 --- a/src/LoadImage.js +++ b/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.drawing(); - ref.images[name].steps[0].UI.drawn(image.steps[0].output.src); + 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); } return loadImage(name,src); diff --git a/src/UserInterface.js b/src/UserInterface.js index e708c1f0..84a80b03 100644 --- a/src/UserInterface.js +++ b/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 } diff --git a/src/modules/Crop/Module.js b/src/modules/Crop/Module.js index da86522d..d1ae7911 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.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(); }); diff --git a/src/modules/DoNothing/Module.js b/src/modules/DoNothing/Module.js index b339c857..f45712c0 100644 --- a/src/modules/DoNothing/Module.js +++ b/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 { diff --git a/src/modules/DoNothingPix/Module.js b/src/modules/DoNothingPix/Module.js index 24a6e9fa..ec820e93 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.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 { diff --git a/src/modules/GreenChannel/Module.js b/src/modules/GreenChannel/Module.js index af9358ec..2f7cdbfc 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.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, diff --git a/src/modules/Invert/Module.js b/src/modules/Invert/Module.js index 6804f24c..6863b38b 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.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, diff --git a/src/modules/NdviRed/Module.js b/src/modules/NdviRed/Module.js index 574c1dba..7433d9f0 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.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, diff --git a/src/modules/SegmentedColormap/Module.js b/src/modules/SegmentedColormap/Module.js index 7350e32d..48de04b5 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.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,