passing tests and displaying titles in web UI

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.

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%;
 }

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?)
+        defaultSetupModule.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
-          });
-        }
       }
 
       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('<div class="panel ' + options.selector + ' ' + options.uniqueSelector + '"></div>');
+  $(options.container).append('<div class="panel ' + options.selector + ' ' + options.uniqueSelector + '"><div class="image"></div></div>');
   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)
+    if (options.title) el.prepend('<h3 class="title">' + options.title + '</h3>');
-    el.append('<h3 class="title">' + module.title + '</h3>');
   }
 
   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,
+    setup: setup
-    get: get
   }
 
 }
@@ -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
   }

examples/ndvi/index.html

@@ -33,16 +33,16 @@
 
     <div class="panels">
 
-      <div class="panel mod-image-select">
+      <div class="panel ismod-image-select">
-        <div id="drop">Drag image here</div>
+        <div class="mod-drop">Drag image here</div>
         <p class="instructions">Select or drop an image here to begin.</p>
         <input id="file-select" type="file" />
       </div>
 
     </div>
 
-    <div class="mod-new-panel">
+    <div class="ismod-new-panel">
-      <form class="mod-new-panel">
+      <form class="ismod-new-panel">
         <p class="instructions">Add a new step</p>
         <select class="select-module form-control" style="margin-bottom:6px;">
           <option value="ndvi-red">NDVI with red filter</option>

index.html

@@ -32,8 +32,8 @@
 
     <div class="panels">
 
-      <div class="panel mod-image-select">
+      <div class="panel ismod-image-select">
-        <div id="drop">Drag image here</div>
+        <div class="mod-drop">Drag image here</div>
         <p class="instructions">Select or drop an image here to begin.</p>
         <input id="file-select" type="file" />
       </div>

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?)
+        defaultSetupModule.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
-          });
-        }
       }
 
       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,

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('<div class="panel ' + options.selector + ' ' + options.uniqueSelector + '"></div>');
+  $(options.container).append('<div class="panel ' + options.selector + ' ' + options.uniqueSelector + '"><div class="image"></div></div>');
   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)
+    if (options.title) el.prepend('<h3 class="title">' + options.title + '</h3>');
-    el.append('<h3 class="title">' + module.title + '</h3>');
   }
 
   return {

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

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,
+    setup: setup
-    get: get
   }
 
 }

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

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

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
   }

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
+  }
+}