diff --git a/README.md b/README.md index f716cef3..1961fe75 100644 --- a/README.md +++ b/README.md @@ -36,6 +36,8 @@ Happily accepting pull requests; to edit the core library, modify files in `/src Most contribution (we imagine) would be in the form of API-compatible modules, which need not be directly included. +#### draw() + To add a module to Image Sequencer, it must have the following method; you can wrap an existing module to add them: * `module.draw(image)` @@ -54,6 +56,12 @@ function draw(image) { } ``` +#### Title + +For display in the web-based UI, each module may also have a title like `options.title`. + +#### Module example + See existing module `green-channel` for an example: https://github.com/jywarren/image-sequencer/tree/master/src/modules/GreenChannel.js For help integrating, please open an issue. diff --git a/dist/image-sequencer.css b/dist/image-sequencer.css index 5e28b0f6..ffd9fb97 100644 --- a/dist/image-sequencer.css +++ b/dist/image-sequencer.css @@ -62,7 +62,7 @@ h1 { /* ImageSelect styles */ -.mod-image-select #drop { +.ismod-image-select .mod-drop { border-radius: 4px; background: #efeff6; color: #aaa; @@ -73,10 +73,10 @@ h1 { text-align: center; } -.mod-image-select #drop.hover { +.ismod-image-select .mod-drop.hover { background: #ddd; } -.mod-image-select #drop img { +.ismod-image-select .mod-drop img { width: 100%; } diff --git a/dist/image-sequencer.js b/dist/image-sequencer.js index a8a45305..3e4244c1 100644 --- a/dist/image-sequencer.js +++ b/dist/image-sequencer.js @@ -184103,7 +184103,7 @@ ImageSequencer = function ImageSequencer(options) { modules = require('./Modules'); // if in browser, prompt for an image - if (options.imageSelect || options.inBrowser) addStep('image-select', { selector: "#drop" }); + if (options.imageSelect || options.inBrowser) addStep('image-select'); else if (options.imageUrl) loadImage(imageUrl); // soon, detect local or URL? @@ -184119,17 +184119,23 @@ ImageSequencer = function ImageSequencer(options) { steps.push(module); - if (module.name !== "image-select") { + function defaultSetupModule() { + if (options.ui) module.options.ui = options.ui({ + selector: o.selector, + title: module.options.title + }); + } + + if (name === "image-select") { + + module.setup(); // just set up initial ImageSelect; it has own UI + + } else { // add a default UI, unless the module has one specified if (module.hasOwnProperty('setup')) module.setup(); else { - setup.apply(module); // run default setup() in scope of module (is this right?) - function setup() { - if (module.options.ui) module.options.ui = options.ui({ - selector: o.selector - }); - } + defaultSetupModule.apply(module); // run default setup() in scope of module (is this right?) } var previousStep = steps[steps.length - 2]; @@ -184144,10 +184150,6 @@ ImageSequencer = function ImageSequencer(options) { } } - } else { - - module.setup(); // just set up initial ImageSelect - } // Pre-set the initial output behavior of the final step, @@ -184184,6 +184186,7 @@ ImageSequencer = function ImageSequencer(options) { } return { + options: options, loadImage: loadImage, addStep: addStep, run: run, @@ -184221,13 +184224,13 @@ module.exports = function UserInterface(options) { options.random = options.random || parseInt(Math.random() * (new Date()).getTime() / 1000000); options.uniqueSelector = options.uniqueSelector || options.selector + '-' + options.random; - $(options.container).append('
'); + $(options.container).append('
'); options.el = options.el || $('.' + options.uniqueSelector); createLabel(options.el); // method to remove the UI for a given method, and remove the step function display(image) { - options.el.html(image); + options.el.find('.image').html(image); } // method to remove the UI for a given method, and remove the step @@ -184237,8 +184240,7 @@ module.exports = function UserInterface(options) { //function move() {} function createLabel(el) { -console.log("createLabel", module.title) - el.append('

' + module.title + '

'); + if (options.title) el.prepend('

' + options.title + '

'); } return { @@ -184258,6 +184260,8 @@ console.log("createLabel", module.title) module.exports = function GreenChannel(options) { options = options || {}; + options.title = "Green channel only"; + options.description = "Displays only the green channel of an image"; //function setup() {} // optional @@ -184272,8 +184276,6 @@ module.exports = function GreenChannel(options) { } return { - title: "Green channel only", - description: "Displays only the green channel of an image", options: options, //setup: setup, // optional draw: draw @@ -184290,15 +184292,11 @@ module.exports = function ImageSelect(options) { if (!window.hasOwnProperty('$')) window.$ = window.jQuery = require('jquery'); options = options || {}; - options.selector = options.selector || "#drop"; + options.title = "Select image"; options.inputSelector = options.inputSelector || "#file-select"; - options.ui = options.ui || {}; - options.ui.el = options.ui.el || $(options.selector); - - if (options.ui.el.length === 0) console.log('No UI element found with given selector: ', options.selector); var image, - el = options.ui.el; + el = $('.' + options.selector + ' .mod-drop'); function setup() { @@ -184354,20 +184352,14 @@ module.exports = function ImageSelect(options) { // this module is unique because it creates the image function draw(image) { - options.ui.display(image); + options.el.html(image); if (options.output) options.output(image); } - function get() { - return image; - } - return { - title: "Select image", options: options, draw: draw, - setup: setup, - get: get + setup: setup } } @@ -184379,6 +184371,7 @@ module.exports = function ImageSelect(options) { module.exports = function ImageThreshold(options) { options = options || {}; + options.title = "Threshold image"; options.threshold = options.threshold || 30; var image; @@ -184411,7 +184404,6 @@ module.exports = function ImageThreshold(options) { } return { - title: "Threshold image", options: options, draw: draw, get: get @@ -184425,6 +184417,7 @@ module.exports = function ImageThreshold(options) { module.exports = function NdviRed(options) { options = options || {}; + options.title = "NDVI for red-filtered cameras (blue is infrared)"; //function setup() {} // optional @@ -184440,7 +184433,6 @@ module.exports = function NdviRed(options) { } return { - title: "NDVI for red-filtered cameras (blue is infrared)", options: options, //setup: setup, // optional draw: draw @@ -184517,6 +184509,7 @@ module.exports = function PixelManipulation(image, options) { module.exports = function Plot(options) { options = options || {}; + options.title = "Plot with colorbar"; options.colorscale = options.colorscale || 'Jet',//'RdBu'; options.type = options.type || 'contour'; // or 'heatmap' @@ -184579,7 +184572,6 @@ module.exports = function Plot(options) { } return { - title: "Plot with colorbar", options: options, draw: draw } diff --git a/examples/ndvi/index.html b/examples/ndvi/index.html index b13b442b..0eab0c3e 100644 --- a/examples/ndvi/index.html +++ b/examples/ndvi/index.html @@ -33,16 +33,16 @@
-
-
Drag image here
+
+
Drag image here

Select or drop an image here to begin.

-
-
+
+

Add a new step

diff --git a/src/ImageSequencer.js b/src/ImageSequencer.js index 5b50d0d1..901c612c 100644 --- a/src/ImageSequencer.js +++ b/src/ImageSequencer.js @@ -11,7 +11,7 @@ ImageSequencer = function ImageSequencer(options) { modules = require('./Modules'); // if in browser, prompt for an image - if (options.imageSelect || options.inBrowser) addStep('image-select', { selector: "#drop" }); + if (options.imageSelect || options.inBrowser) addStep('image-select'); else if (options.imageUrl) loadImage(imageUrl); // soon, detect local or URL? @@ -27,17 +27,23 @@ ImageSequencer = function ImageSequencer(options) { steps.push(module); - if (module.name !== "image-select") { + function defaultSetupModule() { + if (options.ui) module.options.ui = options.ui({ + selector: o.selector, + title: module.options.title + }); + } + + if (name === "image-select") { + + module.setup(); // just set up initial ImageSelect; it has own UI + + } else { // add a default UI, unless the module has one specified if (module.hasOwnProperty('setup')) module.setup(); else { - setup.apply(module); // run default setup() in scope of module (is this right?) - function setup() { - if (module.options.ui) module.options.ui = options.ui({ - selector: o.selector - }); - } + defaultSetupModule.apply(module); // run default setup() in scope of module (is this right?) } var previousStep = steps[steps.length - 2]; @@ -52,10 +58,6 @@ ImageSequencer = function ImageSequencer(options) { } } - } else { - - module.setup(); // just set up initial ImageSelect - } // Pre-set the initial output behavior of the final step, @@ -92,6 +94,7 @@ ImageSequencer = function ImageSequencer(options) { } return { + options: options, loadImage: loadImage, addStep: addStep, run: run, diff --git a/src/UserInterface.js b/src/UserInterface.js index 6c72af23..f4e4a670 100644 --- a/src/UserInterface.js +++ b/src/UserInterface.js @@ -8,13 +8,13 @@ module.exports = function UserInterface(options) { options.random = options.random || parseInt(Math.random() * (new Date()).getTime() / 1000000); options.uniqueSelector = options.uniqueSelector || options.selector + '-' + options.random; - $(options.container).append('
'); + $(options.container).append('
'); options.el = options.el || $('.' + options.uniqueSelector); createLabel(options.el); // method to remove the UI for a given method, and remove the step function display(image) { - options.el.html(image); + options.el.find('.image').html(image); } // method to remove the UI for a given method, and remove the step @@ -24,8 +24,7 @@ module.exports = function UserInterface(options) { //function move() {} function createLabel(el) { -console.log("createLabel", module.title) - el.append('

' + module.title + '

'); + if (options.title) el.prepend('

' + options.title + '

'); } return { diff --git a/src/modules/GreenChannel.js b/src/modules/GreenChannel.js index cac57206..28a887f0 100644 --- a/src/modules/GreenChannel.js +++ b/src/modules/GreenChannel.js @@ -4,6 +4,8 @@ module.exports = function GreenChannel(options) { options = options || {}; + options.title = "Green channel only"; + options.description = "Displays only the green channel of an image"; //function setup() {} // optional @@ -18,8 +20,6 @@ module.exports = function GreenChannel(options) { } return { - title: "Green channel only", - description: "Displays only the green channel of an image", options: options, //setup: setup, // optional draw: draw diff --git a/src/modules/ImageSelect.js b/src/modules/ImageSelect.js index 40f22ecf..fa9ab82f 100644 --- a/src/modules/ImageSelect.js +++ b/src/modules/ImageSelect.js @@ -7,15 +7,11 @@ module.exports = function ImageSelect(options) { if (!window.hasOwnProperty('$')) window.$ = window.jQuery = require('jquery'); options = options || {}; - options.selector = options.selector || "#drop"; + options.title = "Select image"; options.inputSelector = options.inputSelector || "#file-select"; - options.ui = options.ui || {}; - options.ui.el = options.ui.el || $(options.selector); - - if (options.ui.el.length === 0) console.log('No UI element found with given selector: ', options.selector); var image, - el = options.ui.el; + el = $('.' + options.selector + ' .mod-drop'); function setup() { @@ -71,20 +67,14 @@ module.exports = function ImageSelect(options) { // this module is unique because it creates the image function draw(image) { - options.ui.display(image); + options.el.html(image); if (options.output) options.output(image); } - function get() { - return image; - } - return { - title: "Select image", options: options, draw: draw, - setup: setup, - get: get + setup: setup } } diff --git a/src/modules/ImageThreshold.js b/src/modules/ImageThreshold.js index c9311ba1..47c4ae20 100644 --- a/src/modules/ImageThreshold.js +++ b/src/modules/ImageThreshold.js @@ -4,6 +4,7 @@ module.exports = function ImageThreshold(options) { options = options || {}; + options.title = "Threshold image"; options.threshold = options.threshold || 30; var image; @@ -36,7 +37,6 @@ module.exports = function ImageThreshold(options) { } return { - title: "Threshold image", options: options, draw: draw, get: get diff --git a/src/modules/NdviRed.js b/src/modules/NdviRed.js index 36afc931..b42763bf 100644 --- a/src/modules/NdviRed.js +++ b/src/modules/NdviRed.js @@ -4,6 +4,7 @@ module.exports = function NdviRed(options) { options = options || {}; + options.title = "NDVI for red-filtered cameras (blue is infrared)"; //function setup() {} // optional @@ -19,7 +20,6 @@ module.exports = function NdviRed(options) { } return { - title: "NDVI for red-filtered cameras (blue is infrared)", options: options, //setup: setup, // optional draw: draw diff --git a/src/modules/Plot.js b/src/modules/Plot.js index 10cb2c52..9e2af792 100644 --- a/src/modules/Plot.js +++ b/src/modules/Plot.js @@ -4,6 +4,7 @@ module.exports = function Plot(options) { options = options || {}; + options.title = "Plot with colorbar"; options.colorscale = options.colorscale || 'Jet',//'RdBu'; options.type = options.type || 'contour'; // or 'heatmap' @@ -66,7 +67,6 @@ module.exports = function Plot(options) { } return { - title: "Plot with colorbar", options: options, draw: draw } diff --git a/src/modules/Resize.js b/src/modules/Resize.js new file mode 100644 index 00000000..f80da85e --- /dev/null +++ b/src/modules/Resize.js @@ -0,0 +1,25 @@ +/* + * Resize image + */ +module.exports = function Resize(options) { + options.title = "Resize image"; + options.description = "Resizes image to given width"; + + options = options || {}; + + function setup() { + + } + + function draw(image) { + + + + } + + return { + options: options, + setup: setup, + draw: draw + } +}