diff --git a/dist/image-sequencer.js b/dist/image-sequencer.js index 9f6d41af..411d6609 100644 --- a/dist/image-sequencer.js +++ b/dist/image-sequencer.js @@ -34562,30 +34562,21 @@ function hasOwnProperty(obj, prop) { function AddStep(ref, image, name, o) { function addStep(image, name, o_) { - ref.log('\x1b[36m%s\x1b[0m','adding step \"' + name + '\" to \"' + image + '\".'); - var o = ref.copy(o_); - o.id = ref.options.sequencerCounter++; //Gives a Unique ID to each step + o.number = ref.options.sequencerCounter++; //Gives a Unique ID to each step o.name = o_.name || name; o.selector = o_.selector || 'ismod-' + name; o.container = o_.container || ref.options.selector; o.image = image; - var module = ref.modules[name].call(ref.images,o); + var UI = ref.UI({ + stepName: o.name, + stepID: o.number, + imageName: o.image + }); + var module = ref.modules[name](o,UI); ref.images[image].steps.push(module); - - function defaultSetupModule() { - if (ref.options.ui && ref.options.ui!="none") module.options.ui = ref.options.ui({ - selector: o.selector, - title: module.options.title, - id: o.id - }); - } - if (module.hasOwnProperty('setup')) module.setup(); // add a default UI, unless the module has one specified - else defaultSetupModule.apply(module); // run default setup() in scope of module (is this right?) - - // tell the UI that a step has been added. return true; } @@ -34803,7 +34794,10 @@ ImageSequencer = function ImageSequencer(options) { modules = require('./Modules'), formatInput = require('./FormatInput'), images = {}, - inputlog = []; + inputlog = [], + UI; + + setUI(); // if in browser, prompt for an image // if (options.imageSelect || options.inBrowser) addStep('image-select'); @@ -34828,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) { - log('\x1b[31m%s\x1b[0m',"Removing "+index+" from "+image); + images[image].steps[index].UI.remove(); images[image].steps.splice(index,1); } //tell the UI a step has been removed @@ -34874,7 +34868,6 @@ ImageSequencer = function ImageSequencer(options) { } function run(t_image,t_from) { - log('\x1b[32m%s\x1b[0m',"Running the Sequencer!"); const this_ = (this.name == "ImageSequencer")?this:this.sequencer; var args = (this.name == "ImageSequencer")?[]:[this.images]; for (var arg in arguments) args.push(copy(arguments[arg])); @@ -34910,6 +34903,8 @@ ImageSequencer = function ImageSequencer(options) { removeSteps: this.removeSteps, insertSteps: this.insertSteps, run: this.run, + UI: this.UI, + setUI: this.setUI, images: loadedimages }; } @@ -34919,9 +34914,21 @@ ImageSequencer = function ImageSequencer(options) { return require('./ReplaceImage')(this,selector,steps); } + function setUI(_UI) { + UI = require('./UserInterface')(_UI,options); + return UI; + } + return { + //literals and objects name: "ImageSequencer", options: options, + inputlog: inputlog, + modules: modules, + images: images, + UI: UI, + + //user functions loadImages: loadImages, loadImage: loadImages, addSteps: addSteps, @@ -34929,10 +34936,9 @@ ImageSequencer = function ImageSequencer(options) { insertSteps: insertSteps, replaceImage: replaceImage, run: run, - inputlog: inputlog, - modules: modules, - images: images, - ui: options.ui, + setUI: setUI, + + //other functions log: log, objTypeOf: objTypeOf, copy: copy @@ -34941,35 +34947,26 @@ ImageSequencer = function ImageSequencer(options) { } module.exports = ImageSequencer; -},{"./AddStep":114,"./FormatInput":115,"./InsertStep":117,"./LoadImage":118,"./Modules":119,"./ReplaceImage":120,"./Run":121,"jquery":44}],117:[function(require,module,exports){ +},{"./AddStep":114,"./FormatInput":115,"./InsertStep":117,"./LoadImage":118,"./Modules":119,"./ReplaceImage":120,"./Run":121,"./UserInterface":122,"jquery":44}],117:[function(require,module,exports){ function InsertStep(ref, image, index, name, o) { function insertStep(image, index, name, o_) { - ref.log('\x1b[36m%s\x1b[0m','inserting step \"' + name + '\" to \"' + image + '\" at \"'+index+'\".'); - var o = ref.copy(o_); - o.id = ref.options.sequencerCounter++; //Gives a Unique ID to each step - o.name = o.name || name; - o.selector = o.selector || 'ismod-' + name; - o.container = o.container || ref.options.selector; + o.number = ref.options.sequencerCounter++; //Gives a Unique ID to each step + o.name = o_.name || name; + o.selector = o_.selector || 'ismod-' + name; + o.container = o_.container || ref.options.selector; o.image = image; if(index==-1) index = ref.images[image].steps.length; - var module = ref.modules[name](o); - ref.images[image].steps.splice(index, 0, module); - - function defaultSetupModule() { - if (ref.options.ui && ref.options.ui!="none") module.options.ui = ref.options.ui({ - selector: o.selector, - title: module.options.title, - id: o.id - }); - } - if (module.hasOwnProperty('setup')) module.setup(); // add a default UI, unless the module has one specified - else defaultSetupModule.apply(module); // run default setup() in scope of module (is this right?) - - // tell the UI that a step has been inserted. + var UI = ref.UI({ + stepName: o.name, + stepID: o.number, + imageName: o.image + }); + var module = ref.modules[name](o,UI); + ref.images[image].steps.splice(index,0,module); return true; } @@ -34998,6 +34995,11 @@ function LoadImage(ref, name, src) { name: "load-image", title: "Load Image" }, + UI: ref.UI({ + stepName: "load-image", + stepID: ref.options.sequencerCounter++, + imageName: name + }), draw: function() { if(arguments.length==1){ this.output = CImage(arguments[0]); @@ -35014,6 +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); } return loadImage(name,src); @@ -35035,7 +35040,7 @@ module.exports = { 'segmented-colormap': require('./modules/SegmentedColormap/Module') } -},{"./modules/Crop/Module":123,"./modules/DoNothing/Module":124,"./modules/DoNothingPix/Module.js":125,"./modules/GreenChannel/Module":126,"./modules/Invert/Module":127,"./modules/NdviRed/Module":128,"./modules/SegmentedColormap/Module":129}],120:[function(require,module,exports){ +},{"./modules/Crop/Module":124,"./modules/DoNothing/Module":125,"./modules/DoNothingPix/Module.js":126,"./modules/GreenChannel/Module":127,"./modules/Invert/Module":128,"./modules/NdviRed/Module":129,"./modules/SegmentedColormap/Module":130}],120:[function(require,module,exports){ function ReplaceImage(ref,selector,steps,options) { if(!ref.options.inBrowser) return false; // This isn't for Node.js var this_ = ref; @@ -35122,6 +35127,72 @@ function Run(ref, json_q, callback) { module.exports = Run; },{}],122:[function(require,module,exports){ +/* + * Default UI for each image-sequencer module + */ +module.exports = function UserInterface(UI,options) { + + return function userInterface(identity) { + + var UI = UI || {}; + + UI.setup = UI.setup || function() { + if(options.ui == "none") { + // No UI + } + else if(options.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.drawing = UI.drawing || function() { + if(options.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.drawn = UI.drawn || function(output) { + if(options.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.remove = UI.remove || function() { + if(options.inBrowser) { + // Remove the DIV Element + console.log("Removing Step \""+identity.stepName+"\" of \""+identity.imageName+"\"."); + image.remove(); + } + else { + // Delete the NodeJS Object + console.log('\x1b[31m%s\x1b[0m',"Removing Step \""+identity.stepName+"\" of \""+identity.imageName+"\"."); + } + } + + return UI; + + } + +} + +},{}],123:[function(require,module,exports){ module.exports = function Crop(input,options,callback) { var getPixels = require("get-pixels"), @@ -35156,7 +35227,7 @@ module.exports = function Crop(input,options,callback) { } -},{"base64-stream":3,"get-pixels":27,"save-pixels":104}],123:[function(require,module,exports){ +},{"base64-stream":3,"get-pixels":27,"save-pixels":104}],124:[function(require,module,exports){ /* * Image Cropping module * Usage: @@ -35172,14 +35243,15 @@ module.exports = function Crop(input,options,callback) { * y = options.y * y = options.y + options.h */ - module.exports = function CropModule(options) { + module.exports = function CropModule(options,UI) { options = options || {}; options.title = "Crop Image"; - var this_ = this; + UI.setup(); var output function draw(input,callback) { + UI.drawing(); const this_ = this; require('./Crop')(input,options,function(out,format){ @@ -35187,6 +35259,7 @@ module.exports = function Crop(input,options,callback) { src: out, format: format } + UI.drawn(out); callback(); }); @@ -35196,49 +35269,58 @@ module.exports = function Crop(input,options,callback) { return { options: options, draw: draw, - output: output + output: output, + UI: UI } } -},{"./Crop":122}],124:[function(require,module,exports){ +},{"./Crop":123}],125:[function(require,module,exports){ /* * Demo Module. Does nothing. Adds a step where output is equal to input. */ -module.exports = function DoNothing(options) { +module.exports = function DoNothing(options,UI) { options = options || {}; options.title = "Do Nothing"; - var this_ = this; - var output + UI.setup(); + var output; function draw(input,callback) { + UI.drawing(); this.output = input; callback(); + UI.drawn(this.output.src); } return { options: options, draw: draw, - output: output + output: output, + UI: UI } } -},{}],125:[function(require,module,exports){ +},{}],126:[function(require,module,exports){ /* * This module extracts pixels and saves them as it is. */ -module.exports = function DoNothingPix(options) { +module.exports = function DoNothingPix(options,UI) { options = options || {}; options.title = "Do Nothing with pixels"; + UI.setup(); var output; function draw(input,callback) { + + UI.drawing(); var this_ = this; + function changePixel(r, g, b, a) { return [r, g, b, a]; } function output(image,datauri,mimetype){ this_.output = {src:datauri,format:mimetype} + UI.drawn(datauri); } return require('../_nomodule/PixelManipulation.js')(input, { output: output, @@ -35247,35 +35329,40 @@ module.exports = function DoNothingPix(options) { image: options.image, callback: callback }); + } return { options: options, draw: draw, - output: output + output: output, + UI: UI } } -},{"../_nomodule/PixelManipulation.js":131}],126:[function(require,module,exports){ +},{"../_nomodule/PixelManipulation.js":132}],127:[function(require,module,exports){ /* * Display only the green channel */ -module.exports = function GreenChannel(options) { +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(); var output; - //function setup() {} // optional - function draw(input,callback) { + + UI.drawing(); var this_ = this; + function changePixel(r, g, b, a) { return [0, g, 0, a]; } function output(image,datauri,mimetype){ - this_.output = {src:datauri,format:mimetype} + this_.output = {src:datauri,format:mimetype}; + UI.drawn(datauri); } return require('../_nomodule/PixelManipulation.js')(input, { output: output, @@ -35284,36 +35371,43 @@ module.exports = function GreenChannel(options) { image: options.image, callback: callback }); + } return { options: options, //setup: setup, // optional draw: draw, - output: output + output: output, + UI: UI } } -},{"../_nomodule/PixelManipulation.js":131}],127:[function(require,module,exports){ +},{"../_nomodule/PixelManipulation.js":132}],128:[function(require,module,exports){ /* * Display only the green channel */ -module.exports = function GreenChannel(options) { +module.exports = function GreenChannel(options,UI) { options = options || {}; options.title = "Invert Colors"; options.description = "Inverts the colors of the image"; + UI.setup(); var output; //function setup() {} // optional function draw(input,callback) { + + UI.drawing(); var this_ = this; + function changePixel(r, g, b, a) { return [255-r, 255-g, 255-b, a]; } function output(image,datauri,mimetype){ - this_.output = {src:datauri,format:mimetype} + this_.output = {src:datauri,format:mimetype}; + UI.drawn(datauri); } return require('../_nomodule/PixelManipulation.js')(input, { output: output, @@ -35322,35 +35416,42 @@ module.exports = function GreenChannel(options) { image: options.image, callback: callback }); + } return { options: options, //setup: setup, // optional draw: draw, - output: output + output: output, + UI: UI } } -},{"../_nomodule/PixelManipulation.js":131}],128:[function(require,module,exports){ +},{"../_nomodule/PixelManipulation.js":132}],129:[function(require,module,exports){ /* * NDVI with red filter (blue channel is infrared) */ -module.exports = function NdviRed(options) { +module.exports = function NdviRed(options,UI) { options = options || {}; options.title = "NDVI for red-filtered cameras (blue is infrared)"; + UI.setup(); var output; function draw(input,callback) { + + UI.drawing(); var this_ = this; + function changePixel(r, g, b, a) { var ndvi = (b - r) / (1.00 * b + r); var x = 255 * (ndvi + 1) / 2; return [x, x, x, a]; } function output(image,datauri,mimetype){ - this_.output = {src:datauri,format:mimetype} + this_.output = {src:datauri,format:mimetype}; + UI.drawn(datauri); } return require('../_nomodule/PixelManipulation.js')(input, { output: output, @@ -35359,23 +35460,30 @@ module.exports = function NdviRed(options) { image: options.image, callback: callback }); + } return { options: options, - draw: draw + draw: draw, + output: output, + UI:UI } } -},{"../_nomodule/PixelManipulation.js":131}],129:[function(require,module,exports){ -module.exports = function SegmentedColormap(options) { +},{"../_nomodule/PixelManipulation.js":132}],130:[function(require,module,exports){ +module.exports = function SegmentedColormap(options,UI) { options = options || {}; options.title = "Segmented Colormap"; + UI.setup(); var output; function draw(input,callback) { + + UI.drawing(); var this_ = this; + function changePixel(r, g, b, a) { var ndvi = (b - r) / (r + b); var normalized = (ndvi + 1) / 2; @@ -35383,7 +35491,8 @@ module.exports = function SegmentedColormap(options) { return [res[0], res[1], res[2], 255]; } function output(image,datauri,mimetype){ - this_.output = {src:datauri,format:mimetype} + this_.output = {src:datauri,format:mimetype}; + UI.drawn(datauri); } return require('../_nomodule/PixelManipulation.js')(input, { output: output, @@ -35392,16 +35501,18 @@ module.exports = function SegmentedColormap(options) { image: options.image, callback: callback }); + } return { options: options, draw: draw, - output: output + output: output, + UI: UI } } -},{"../_nomodule/PixelManipulation.js":131,"./SegmentedColormap":130}],130:[function(require,module,exports){ +},{"../_nomodule/PixelManipulation.js":132,"./SegmentedColormap":131}],131:[function(require,module,exports){ /* * Accepts a normalized ndvi and returns the new color-mapped pixel */ @@ -35460,7 +35571,7 @@ var colormaps = { fastie: fastie_colormap } -},{}],131:[function(require,module,exports){ +},{}],132:[function(require,module,exports){ /* * General purpose per-pixel manipulation * accepting a changePixel() method to remix a pixel's channels diff --git a/src/AddStep.js b/src/AddStep.js index e29ab90e..22298c05 100644 --- a/src/AddStep.js +++ b/src/AddStep.js @@ -1,30 +1,21 @@ function AddStep(ref, image, name, o) { function addStep(image, name, o_) { - ref.log('\x1b[36m%s\x1b[0m','adding step \"' + name + '\" to \"' + image + '\".'); - var o = ref.copy(o_); - o.id = ref.options.sequencerCounter++; //Gives a Unique ID to each step + o.number = ref.options.sequencerCounter++; //Gives a Unique ID to each step o.name = o_.name || name; o.selector = o_.selector || 'ismod-' + name; o.container = o_.container || ref.options.selector; o.image = image; - var module = ref.modules[name].call(ref.images,o); + var UI = ref.UI({ + stepName: o.name, + stepID: o.number, + imageName: o.image + }); + var module = ref.modules[name](o,UI); ref.images[image].steps.push(module); - - function defaultSetupModule() { - if (ref.options.ui && ref.options.ui!="none") module.options.ui = ref.options.ui({ - selector: o.selector, - title: module.options.title, - id: o.id - }); - } - if (module.hasOwnProperty('setup')) module.setup(); // add a default UI, unless the module has one specified - else defaultSetupModule.apply(module); // run default setup() in scope of module (is this right?) - - // tell the UI that a step has been added. return true; } diff --git a/src/ImageSequencer.js b/src/ImageSequencer.js index a4d570a5..b3f37960 100644 --- a/src/ImageSequencer.js +++ b/src/ImageSequencer.js @@ -41,7 +41,10 @@ ImageSequencer = function ImageSequencer(options) { modules = require('./Modules'), formatInput = require('./FormatInput'), images = {}, - inputlog = []; + inputlog = [], + UI; + + setUI(); // if in browser, prompt for an image // if (options.imageSelect || options.inBrowser) addStep('image-select'); @@ -66,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) { - log('\x1b[31m%s\x1b[0m',"Removing "+index+" from "+image); + images[image].steps[index].UI.remove(); images[image].steps.splice(index,1); } //tell the UI a step has been removed @@ -112,7 +115,6 @@ ImageSequencer = function ImageSequencer(options) { } function run(t_image,t_from) { - log('\x1b[32m%s\x1b[0m',"Running the Sequencer!"); const this_ = (this.name == "ImageSequencer")?this:this.sequencer; var args = (this.name == "ImageSequencer")?[]:[this.images]; for (var arg in arguments) args.push(copy(arguments[arg])); @@ -148,6 +150,8 @@ ImageSequencer = function ImageSequencer(options) { removeSteps: this.removeSteps, insertSteps: this.insertSteps, run: this.run, + UI: this.UI, + setUI: this.setUI, images: loadedimages }; } @@ -157,9 +161,21 @@ ImageSequencer = function ImageSequencer(options) { return require('./ReplaceImage')(this,selector,steps); } + function setUI(_UI) { + UI = require('./UserInterface')(_UI,options); + return UI; + } + return { + //literals and objects name: "ImageSequencer", options: options, + inputlog: inputlog, + modules: modules, + images: images, + UI: UI, + + //user functions loadImages: loadImages, loadImage: loadImages, addSteps: addSteps, @@ -167,10 +183,9 @@ ImageSequencer = function ImageSequencer(options) { insertSteps: insertSteps, replaceImage: replaceImage, run: run, - inputlog: inputlog, - modules: modules, - images: images, - ui: options.ui, + setUI: setUI, + + //other functions log: log, objTypeOf: objTypeOf, copy: copy diff --git a/src/InsertStep.js b/src/InsertStep.js index cbab43ab..ece3da01 100644 --- a/src/InsertStep.js +++ b/src/InsertStep.js @@ -1,31 +1,22 @@ function InsertStep(ref, image, index, name, o) { function insertStep(image, index, name, o_) { - ref.log('\x1b[36m%s\x1b[0m','inserting step \"' + name + '\" to \"' + image + '\" at \"'+index+'\".'); - var o = ref.copy(o_); - o.id = ref.options.sequencerCounter++; //Gives a Unique ID to each step - o.name = o.name || name; - o.selector = o.selector || 'ismod-' + name; - o.container = o.container || ref.options.selector; + o.number = ref.options.sequencerCounter++; //Gives a Unique ID to each step + o.name = o_.name || name; + o.selector = o_.selector || 'ismod-' + name; + o.container = o_.container || ref.options.selector; o.image = image; if(index==-1) index = ref.images[image].steps.length; - var module = ref.modules[name](o); - ref.images[image].steps.splice(index, 0, module); - - function defaultSetupModule() { - if (ref.options.ui && ref.options.ui!="none") module.options.ui = ref.options.ui({ - selector: o.selector, - title: module.options.title, - id: o.id - }); - } - if (module.hasOwnProperty('setup')) module.setup(); // add a default UI, unless the module has one specified - else defaultSetupModule.apply(module); // run default setup() in scope of module (is this right?) - - // tell the UI that a step has been inserted. + var UI = ref.UI({ + stepName: o.name, + stepID: o.number, + imageName: o.image + }); + var module = ref.modules[name](o,UI); + ref.images[image].steps.splice(index,0,module); return true; } diff --git a/src/LoadImage.js b/src/LoadImage.js index cee3e427..204c0ae6 100644 --- a/src/LoadImage.js +++ b/src/LoadImage.js @@ -17,6 +17,11 @@ function LoadImage(ref, name, src) { name: "load-image", title: "Load Image" }, + UI: ref.UI({ + stepName: "load-image", + stepID: ref.options.sequencerCounter++, + imageName: name + }), draw: function() { if(arguments.length==1){ this.output = CImage(arguments[0]); @@ -33,6 +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); } return loadImage(name,src); diff --git a/src/UserInterface.js b/src/UserInterface.js index d483ef8f..2d12dec4 100644 --- a/src/UserInterface.js +++ b/src/UserInterface.js @@ -1,41 +1,64 @@ /* * Default UI for each image-sequencer module */ -module.exports = function UserInterface(options) { +module.exports = function UserInterface(UI,options) { - options = options || {}; - options.container = options.container || ".panels"; - options.id = options.id; - options.instanceName = options.instanceName; - options.random = options.random || parseInt(Math.random() * (new Date()).getTime() / 1000000); - options.uniqueSelector = options.uniqueSelector || options.selector + '-' + options.random; - $(options.container).append('
'); - options.el = options.el || $('.' + options.uniqueSelector); - createLabel(options.el); + return function userInterface(identity) { - // method to remove the UI for a given method, and remove the step - function display(image) { - options.el.find('.image').html(image); - } + var UI = UI || {}; - // method to remove the UI for a given method, and remove the step - function remove() { - $('div#sequencer-'+options.id).remove(); - } + UI.setup = UI.setup || function() { + if(options.ui == "none") { + // No UI + } + else if(options.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+"\"."); - // method to reorder steps, and update the UI - //function move() {} + } + } - function createLabel(el) { - if (options.title) el.prepend('