Fixes Grid-Overlay with node Compatibility (#1024)

* Fixes Grid-Overlay

* Tests

* Correct bounds

Co-Authored-By: aashna27 <aashna.mittal27@gmail.com>

* Correct bounds

Co-Authored-By: aashna27 <aashna.mittal27@gmail.com>

* Correct bounds

Co-Authored-By: aashna27 <aashna.mittal27@gmail.com>

* Correct bounds

Co-Authored-By: aashna27 <aashna.mittal27@gmail.com>

src/modules/GridOverlay/GridOverlay.js

@@ -1,36 +1,28 @@
-module.exports = exports = function(pixels, options,priorstep){
+module.exports = exports = function(pixels, options){
     var defaults = require('./../../util/getDefaults.js')(require('./info.json'));
 
-    options.color = options.color || defaults.color;
-    options.x = options.x || defaults.x;
-    options.y = options.y || defaults.y;
+    options.x = Number(options.x) || defaults.x;
+    options.y = Number(options.y) || defaults.y;
+    color = options.color || defaults.color;
+    color = color.split(" ");
 
-        var img = $(priorstep.imgElement);
-        if(Object.keys(img).length === 0){
-            img = $(priorstep.options.step.imgElement);
-        }
-        var canvas = document.createElement("canvas");
-        canvas.width = pixels.shape[0]; //img.width();
-        canvas.height = pixels.shape[1]; //img.height();
-        var ctx = canvas.getContext('2d');
-        ctx.drawImage(img[0], 0, 0);
-        var p=2;
-        function drawBoard(){
-            for (var x = 0; x <= canvas.width; x+=options.x) {
-                ctx.moveTo(0.5 + x + p, p);
-                ctx.lineTo(0.5 + x + p, canvas.height + p);
+        for(var x = 0; x < pixels.shape[0]; x+=options.x){
+            for(var y = 0 ; y < pixels.shape[1]; y++){
+                pixels.set(x, y, 0, color[0]);
+                pixels.set(x, y, 1, color[1]);
+                pixels.set(x, y, 2, color[2]);
+                pixels.set(x, y, 3, color[3]);
             }
-            for (var y = 0; y <= canvas.height; y+=options.y) {
-                ctx.moveTo(p, 0.5 + y + p);
-                ctx.lineTo(canvas.width + p, 0.5 + y + p);
-            }
-            ctx.strokeStyle = options.color;
-            ctx.stroke();
         }
-        
-        drawBoard();
+    
+        for(var y = 0; y < pixels.shape[1]; y+=options.y){
+            for(var x = 0 ; x < pixels.shape[0]; x++){
+                pixels.set(x, y, 0, color[0]);
+                pixels.set(x, y, 1, color[1]);
+                pixels.set(x, y, 2, color[2]);
+                pixels.set(x, y, 3, color[3]);
+            }
+        } 
 
-    var myImageData = ctx.getImageData(0,0,canvas.width,canvas.height);
-    pixels.data = myImageData.data
     return pixels;
-}
+}

src/modules/GridOverlay/Module.js

@@ -9,16 +9,9 @@ module.exports = function GridOverlay(options,UI) {
     progressObj.overrideFlag = true;
 
     var step = this;
-    if (!options.step.inBrowser) { // This module is only for browser
-     this.output = input;
-     callback();
-   }
-   else{
-    var priorStep = this.getStep(-1); // get the previous step to add text onto it.
-
+    
     function extraManipulation(pixels) {
-     //if (options.step.inBrowser) 
-     pixels = require('./GridOverlay')(pixels, options,priorStep);
+     pixels = require('./GridOverlay')(pixels, options);
      return pixels
    }
 
@@ -38,7 +31,7 @@ module.exports = function GridOverlay(options,UI) {
       callback: callback
     });
 
-  }
+  
  }
 
   return {

src/modules/GridOverlay/info.json

@@ -12,20 +12,11 @@
             "desc": "Y-position (measured from top) from where grid starts",
             "default": 100
         },
-        "color": {
-            "type": "select",
-            "desc": "Select the color for the grid.",
-            "default": "black",
-            "values": [
-                "black",
-                "blue",
-                "green",
-                "red",
-                "white",
-                "pink",
-                "orange"
-            ]
-        }
+        "color":{
+            "type": "string",
+            "desc": "RGBA values separated by a space",
+            "default": "0 0 0 255"
+          }
     },
     "only": "browser" 
 }

test/core/modules/gridOverlay.js

@@ -0,0 +1,41 @@
+var test = require('tape');
+var base64Img = require('base64-img');
+var looksSame = require('looks-same');
+
+require('../../../src/ImageSequencer.js');
+
+var sequencer = ImageSequencer({ ui: false });
+var options = {x : 1};
+var target = 'test_outputs';
+var red = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABlBMVEX+AAD///+KQee0AAAAAWJLR0QB/wIt3gAAAAd0SU1FB+EGHRIVAvrm6EMAAAAMSURBVAjXY2AgDQAAADAAAceqhY4AAAAldEVYdGRhdGU6Y3JlYXRlADIwMTctMDYtMjlUMTg6MjE6MDIrMDI6MDDGD83DAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDE3LTA2LTI5VDE4OjIxOjAyKzAyOjAwt1J1fwAAAABJRU5ErkJggg==";
+var benchmark = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAklEQVR4AewaftIAAAApSURBVKXBAQEAMAzDIF7/nncRgYcTTDTRRBNNNNFEE0000UQTTTTRRB9NQAEfe+dsMAAAAABJRU5ErkJggg==";
+
+// Test 1 to check GridOverlay module is getting loaded
+test('Load Grid-Overlay module', function(t) {
+  sequencer.loadImages(red);
+  sequencer.addSteps('grid-overlay', options);
+  t.equal(sequencer.steps[1].options.name, 'grid-overlay', 'Grid-Overlay module is getting loaded');
+  t.end();
+});
+
+// Test 2 to check options are correct
+test('Check Options', function(t) {
+  t.equal(sequencer.steps[1].options.x, 1, 'Options are correct');
+  t.end();
+});
+
+// Test 3 to check brightness module works as expected
+test('GridOverlay module works correctly', function(t) {
+  sequencer.run({ mode: 'test' }, function(out) {
+    var result = sequencer.steps[1].output.src
+    base64Img.imgSync(result, target, 'result')
+    base64Img.imgSync(benchmark, target, 'benchmark')
+    result = './test_outputs/result.png'
+    benchmark = './test_outputs/benchmark.png'
+    looksSame(result, benchmark, function(err, res) {
+      if (err) console.log(err)
+      t.equal(res.equal, true)
+      t.end()
+    })
+  })
+})