Additional per-module image pass-through tests

Gruntfile.js

@@ -28,6 +28,9 @@ module.exports = function(grunt) {
                   'src/ImageSequencer.js'
               ],
               dest: 'dist/image-sequencer.js'
+          },
+          options: {
+              exclude: [ 'canvas' ]
           }
       }
 

README.md

@@ -3,7 +3,7 @@ Image Sequencer
 
 aka "Consequencer"
 
-[![Build Status](https://travis-ci.org/jywarren/image-sequencer.svg?branch=master)](https://travis-ci.org/jywarren/image-sequencer)
+[![Build Status](https://travis-ci.org/publiclab/image-sequencer.svg?branch=master)](https://travis-ci.org/publiclab/image-sequencer)
 
 ## Why
 
@@ -25,8 +25,8 @@ It is also for prototyping some other related ideas:
 
 Examples:
 
-* [Basic example](https://jywarren.github.io/image-sequencer/)
-* [NDVI example](https://jywarren.github.io/image-sequencer/examples/ndvi/) - related to [Infragram.org](http://infragram.org)
+* [Basic example](https://publiclab.github.io/image-sequencer/)
+* [NDVI example](https://publiclab.github.io/image-sequencer/examples/ndvi/) - related to [Infragram.org](http://infragram.org)
 
 ## Contributing
 
@@ -62,7 +62,7 @@ For display in the web-based UI, each module may also have a title like `options
 
 #### Module example
 
-See existing module `green-channel` for an example: https://github.com/jywarren/image-sequencer/tree/master/src/modules/GreenChannel.js
+See existing module `green-channel` for an example: https://github.com/publiclab/image-sequencer/tree/master/src/modules/GreenChannel.js
 
 For help integrating, please open an issue.
 
@@ -72,6 +72,8 @@ For help integrating, please open an issue.
 
 Notes on development next steps:
 
+* use `Marty.isBrowser`
+
 ### UI
 
 * [ ] add createUserInterface() which is set up by default to draw on ImageBoardUI, but could be swapped for nothing, or an equiv. lib
@@ -94,7 +96,7 @@ Notes on development next steps:
   * [ ] Make available as browserified OR `require()` includable...
 * [ ] standardize panel addition with submodule that offers Panel.display(image)
 * [ ] allow passing data as data-uri or Image object, or stream, or ndarray or ImageData array, if both of neighboring pair has ability?
-  * see https://github.com/jywarren/image-sequencer/issues/1
+  * see https://github.com/publiclab/image-sequencer/issues/1
 * [ ] ...could we directly include package.json for module descriptions? At least as a fallback.
 * [ ] (for node-and-line style UIs) non-linear sequences with Y-splitters
 * [ ] `sequencer.addModule('path/to/module.js')` style module addition -- also to avoid browserifying all of Plotly :-P
@@ -103,8 +105,13 @@ Notes on development next steps:
 ### Testing
 
 * [ ] tests - modules headless; unit tests
+  * some modules won't work headlessly; make this part of the required API
+  * plotly experimental headless:  https://gist.github.com/etpinard/bee7d62b43b6bb286950
 * [ ] comparisons with diff
   * [ ] testing a module's promised functionality: each module could offer before/after images as part of their API; by running the module on the before image, you should get exactly the after image, comparing with an image diff
+* lots of classic test images are problematic, objectifying and sexist: http://www.hlevkin.com/06testimages.htm
+  * more http://sipi.usc.edu/database/
+  * https://en.wikipedia.org/wiki/Standard_test_image
 
 ### Use cases
 

dist/image-sequencer.js

@@ -184263,20 +184263,24 @@ module.exports = function GreenChannel(options) {
   options.title = "Green channel only";
   options.description = "Displays only the green channel of an image";
 
+  var image;
+
   //function setup() {} // optional
 
-  function draw(image) {
+  function draw(_image) {
+    image = _image;
     function changePixel(r, g, b, a) {
       return [0, g, 0, a];
     }
-    return require('./PixelManipulation.js')(image, {
+    return require('./PixelManipulation.js')(_image, {
       output: options.output,
       changePixel: changePixel
     });
   }
 
   return {
     options: options,
+    image: image,
     //setup: setup, // optional
     draw:  draw
   }
@@ -184351,13 +184355,15 @@ module.exports = function ImageSelect(options) {
   }
 
   // this module is unique because it creates the image
-  function draw(image) {
-    el.html(image);
+  function draw(_image) {
+    image = _image;
+    options.el.html(image);
     if (options.output) options.output(image);
   }
 
   return {
     options: options,
+    image: image,
     draw: draw,
     setup: setup
   }
@@ -184378,11 +184384,15 @@ module.exports = function ImageThreshold(options) {
 
   function draw(inputImage) {
     $(inputImage).load(function(){
-      var canvas = document.createElement('canvas');
-      canvas.width = inputImage.naturalWidth;
-      canvas.height = inputImage.naturalHeight;
+      if (typeof window !== 'undefined') var canvas = document.createElement('canvas');
+      else {
+        var Canvas = require("canvas");
+        var canvas = new Canvas(inputImage.width, inputImage.height); 
+      }
+      canvas.width = inputImage.naturalWidth || inputImage.width; // node-canvas doesn't provide naturalWidth
+      canvas.height = inputImage.naturalHeight || inputImage.height;
       var context = canvas.getContext('2d');
-      context.drawImage(inputImage, 0, 0);
+      context.drawImage(inputImage, 0, 0 );
 
       var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
 
@@ -184402,41 +184412,40 @@ module.exports = function ImageThreshold(options) {
     });
   }
 
-  function get() {
-    return image;
-  }
-
   return {
     options: options,
-    draw: draw,
-    get: get
+    image: image,
+    draw: draw
   }
 }
 
-},{"image-filter-core":85,"image-filter-threshold":86}],1613:[function(require,module,exports){
+},{"canvas":undefined,"image-filter-core":85,"image-filter-threshold":86}],1613:[function(require,module,exports){
 /*
  * NDVI with red filter (blue channel is infrared)
  */
 module.exports = function NdviRed(options) {
 
   options = options || {};
   options.title = "NDVI for red-filtered cameras (blue is infrared)";
+  var image;
 
   //function setup() {} // optional
 
-  function draw(image) {
+  function draw(_image) {
+    image = _image;
     function changePixel(r, g, b, a) {
       var ndvi = 255 * (b - r) / (1.00 * b + r);
       return [ndvi, ndvi, ndvi, a];
     }
-    return require('./PixelManipulation.js')(image, {
+    require('./PixelManipulation.js')(image, {
       output: options.output,
       changePixel: changePixel
     });
   }
 
   return {
     options: options,
+    image: image,
     //setup: setup, // optional
     draw: draw
   }
@@ -184462,7 +184471,8 @@ module.exports = function PixelManipulation(image, options) {
   getPixels(image.src, function(err, pixels) {
 
     if(err) {
-      console.log("Bad image path")
+console.log('image src',image.src)
+      console.log("getPixels: Bad image path")
       return
     }
 
@@ -184576,6 +184586,7 @@ module.exports = function Plot(options) {
 
   return {
     options: options,
+    image: image,
     draw: draw
   }
 }

package.json

@@ -1,10 +1,10 @@
 {
   "name": "image-sequencer",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "description": "A modular JavaScript image manipulation library modeled on a storyboard.",
   "main": "dist/image-sequencer.js",
   "scripts": {
-    "test": "tape test/*.js"
+    "test": "tape test/*.js | tap-summary"
   },
   "repository": {
     "type": "git",
@@ -25,6 +25,7 @@
     "jquery": "~2"
   },
   "devDependencies": {
+    "canvas": "~1.6.4",
     "get-pixels": "~3.3.0",
     "save-pixels": "~2.3.4",
       "base64-stream": "~0.1.3",
@@ -34,6 +35,7 @@
     "image-filter-core": "~1.0.0",
 
     "tape": "^3.5.0",
+    "tap-summary": "~3.0.1",
     "browserify": "13.0.0",
     "grunt": "^0.4.5",
     "grunt-browserify": "^5.0.0",

src/modules/GreenChannel.js

@@ -7,20 +7,24 @@ module.exports = function GreenChannel(options) {
   options.title = "Green channel only";
   options.description = "Displays only the green channel of an image";
 
+  var image;
+
   //function setup() {} // optional
 
-  function draw(image) {
+  function draw(_image) {
+    image = _image;
     function changePixel(r, g, b, a) {
       return [0, g, 0, a];
     }
-    return require('./PixelManipulation.js')(image, {
+    return require('./PixelManipulation.js')(_image, {
       output: options.output,
       changePixel: changePixel
     });
   }
 
   return {
     options: options,
+    image: image,
     //setup: setup, // optional
     draw:  draw
   }

src/modules/ImageSelect.js

@@ -66,13 +66,15 @@ module.exports = function ImageSelect(options) {
   }
 
   // this module is unique because it creates the image
-  function draw(image) {
-    el.html(image);
+  function draw(_image) {
+    image = _image;
+    options.el.html(image);
     if (options.output) options.output(image);
   }
 
   return {
     options: options,
+    image: image,
     draw: draw,
     setup: setup
   }

src/modules/ImageThreshold.js

@@ -11,11 +11,15 @@ module.exports = function ImageThreshold(options) {
 
   function draw(inputImage) {
     $(inputImage).load(function(){
-      var canvas = document.createElement('canvas');
-      canvas.width = inputImage.naturalWidth;
-      canvas.height = inputImage.naturalHeight;
+      if (typeof window !== 'undefined') var canvas = document.createElement('canvas');
+      else {
+        var Canvas = require("canvas");
+        var canvas = new Canvas(inputImage.width, inputImage.height); 
+      }
+      canvas.width = inputImage.naturalWidth || inputImage.width; // node-canvas doesn't provide naturalWidth
+      canvas.height = inputImage.naturalHeight || inputImage.height;
       var context = canvas.getContext('2d');
-      context.drawImage(inputImage, 0, 0);
+      context.drawImage(inputImage, 0, 0 );
 
       var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
 
@@ -35,13 +39,9 @@ module.exports = function ImageThreshold(options) {
     });
   }
 
-  function get() {
-    return image;
-  }
-
   return {
     options: options,
-    draw: draw,
-    get: get
+    image: image,
+    draw: draw
   }
 }

src/modules/NdviRed.js

@@ -5,22 +5,25 @@ module.exports = function NdviRed(options) {
 
   options = options || {};
   options.title = "NDVI for red-filtered cameras (blue is infrared)";
+  var image;
 
   //function setup() {} // optional
 
-  function draw(image) {
+  function draw(_image) {
+    image = _image;
     function changePixel(r, g, b, a) {
       var ndvi = 255 * (b - r) / (1.00 * b + r);
       return [ndvi, ndvi, ndvi, a];
     }
-    return require('./PixelManipulation.js')(image, {
+    require('./PixelManipulation.js')(image, {
       output: options.output,
       changePixel: changePixel
     });
   }
 
   return {
     options: options,
+    image: image,
     //setup: setup, // optional
     draw: draw
   }

src/modules/PixelManipulation.js

@@ -17,7 +17,8 @@ module.exports = function PixelManipulation(image, options) {
   getPixels(image.src, function(err, pixels) {
 
     if(err) {
-      console.log("Bad image path")
+console.log('image src',image.src)
+      console.log("getPixels: Bad image path")
       return
     }
 

src/modules/Plot.js

@@ -68,6 +68,7 @@ module.exports = function Plot(options) {
 
   return {
     options: options,
+    image: image,
     draw: draw
   }
 }

src/modules/Resize.js

@@ -2,23 +2,26 @@
  * Resize image
  */
 module.exports = function Resize(options) {
+
+  options = options || {};
   options.title = "Resize image";
   options.description = "Resizes image to given width";
 
-  options = options || {};
+  var image;
 
   function setup() {
 
   }
 
-  function draw(image) {
+  function draw(_image) {
 
 
 
   }
 
   return {
     options: options,
+    image: image,
     setup: setup,
     draw:  draw
   }