module image pass-through tests, but image-filter-core module not com…

…patible with node-canvas

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.
 
@@ -94,7 +94,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 +103,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

@@ -184383,12 +184383,16 @@ module.exports = function ImageThreshold(options) {
   var image;
 
   function draw(inputImage) {
-    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 );
-    var imageData = context.getImageData(0, 0, inputImage.naturalWidth, inputImage.naturalHeight);
+    var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
 
     var imageThreshold = require('image-filter-threshold');
     var imageFilterCore = require('image-filter-core');
@@ -184412,7 +184416,7 @@ module.exports = function ImageThreshold(options) {
   }
 }
 
-},{"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)
  */

package.json

@@ -4,7 +4,7 @@
   "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/ImageThreshold.js

@@ -10,12 +10,16 @@ module.exports = function ImageThreshold(options) {
   var image;
 
   function draw(inputImage) {
-    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 );
-    var imageData = context.getImageData(0, 0, inputImage.naturalWidth, inputImage.naturalHeight);
+    var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
 
     var imageThreshold = require('image-filter-threshold');
     var imageFilterCore = require('image-filter-core');

test/image-sequencer.js

@@ -6,9 +6,7 @@ var test = require('tape');
 // We should only test headless code here. 
 // http://stackoverflow.com/questions/21358015/error-jquery-requires-a-window-with-a-document#25622933 
 
-require('../dist/image-sequencer.js');
-
-var sequencer = ImageSequencer({ ui: false });
+require('../src/ImageSequencer.js');
 
 //function read (file) {
 //  return fs.readFileSync('./test/fixtures/' + file, 'utf8').trim();
@@ -18,13 +16,10 @@ var sequencer = ImageSequencer({ ui: false });
 //  return fs.writeFileSync('./test/fixtures/' + file, data + '\n', 'utf8');
 //}
 
-test('Image Sequencer has tests', function (t) {
-  // read('something.html')
-  t.equal(true, true);
-  t.end();
-});
+// read('something.html')
 
 test('addStep adds a step', function (t) {
+  var sequencer = ImageSequencer({ ui: false });
   t.equal(sequencer.steps.length, 0);
   sequencer.addStep('ndvi-red');
   sequencer.addStep('green-channel');
@@ -33,24 +28,33 @@ test('addStep adds a step', function (t) {
   t.end();
 });
 
-test('each module conforms to base API except image-select', function (t) {
+test('each core module has a draw() method which outputs an image via options.output()', function (t) {
+  t.plan(12);
+  var sequencer = ImageSequencer({ ui: false });
+  t.equal(sequencer.steps.length, 0);
   Object.keys(sequencer.modules).forEach(function(moduleName, i) {
-    if (moduleName != "image-select") sequencer.addStep(moduleName);
+    // some modules don't work headlessly; we should make stating this a module API requirement
+    if (moduleName !== "image-select" && moduleName !== "plot") sequencer.addStep(moduleName);
   });
   // should already have image-select:
-  t.equal(sequencer.steps.length, Object.keys(sequencer.modules).length);
+  t.equal(sequencer.steps.length, Object.keys(sequencer.modules).length - 2);
   var images = [];
+  var Image = require("canvas").Image; 
+  var image = new Image();
+  // dancing cactus test image:
+  image.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgAgMAAAAOFJJnAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAxQTFRFAAAABQkEaqiYV8E6eKx7SQAAAAF0Uk5TAEDm2GYAAAABYktHRAH/Ai3eAAAACXBIWXMAAABIAAAASABGyWs+AAAAXUlEQVQY04XOoQ7AMAgEUEzNTH/tDAbTr8PU7Otmahhk2VY6sQviicsFIma6cqPQhgzUvkJEf9GkMxJsqK8mGCBYIB+YacbhN6HUgD83w1pCtPcxgz3SlV/4UhgPToo5Yg32KuZBAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE3LTAxLTMwVDE3OjExOjM4LTA1OjAwCQ+zKAAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxNy0wMS0zMFQxNzoxMToyNS0wNTowMNUvasoAAAAASUVORK5CYII=";
   sequencer.steps.forEach(function(step, i) {
-    //t.equal(step.test(step.testInput),step.testOutput);
-    // or check that it's equal with a diff method?
-    // we could also test each type of output
     t.equal(step.draw === 'undefined', false);
     step.options.output = function moduleOutput(img) { images.push(image); }
     t.equal(step.draw(image));
   });
-
-//and be sure they're all real images
   t.equal(images.length, steps.length);
+  // and be sure they're all real images
+  images.forEach(function forEachImage(img) {
+    t.equal('Image', typeof img);
+    t.ok(img.src);
+  });
+console.log("GOT HERE")
   t.end();
 });