Grid-Overlay module. (#974)

* Grid-Overlay module

* Added the X and Y for inputs

src/Modules.js

@@ -24,6 +24,7 @@ module.exports = {
   'histogram': require('./modules/Histogram'),
   'gamma-correction': require('./modules/GammaCorrection'),
   'gradient': require('./modules/Gradient'),
+  'grid-overlay': require('./modules/GridOverlay'),
   'import-image': require('./modules/ImportImage'),
   'invert': require('image-sequencer-invert'),
   'ndvi': require('./modules/Ndvi'),

src/modules/GridOverlay/GridOverlay.js

@@ -0,0 +1,33 @@
+module.exports = exports = function(pixels, options,priorstep){
+    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;
+
+        var img = $(priorstep.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 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();
+
+    var myImageData = ctx.getImageData(0,0,canvas.width,canvas.height);
+    pixels.data = myImageData.data
+    return pixels;
+}

src/modules/GridOverlay/Module.js

@@ -0,0 +1,50 @@
+
+module.exports = function GridOverlay(options,UI) {
+
+  var output;
+
+  function draw(input, callback, progressObj) {
+
+    progressObj.stop(true);
+    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);
+     return pixels
+   }
+
+    function output(image, datauri, mimetype) {
+
+      // This output is accesible by Image Sequencer
+      step.output = { src: datauri, format: mimetype };
+
+    }
+
+    return require('../_nomodule/PixelManipulation.js')(input, {
+      output: output,
+      extraManipulation: extraManipulation,
+      format: input.format,
+      image: options.image,
+      inBrowser: options.inBrowser,
+      callback: callback
+    });
+
+  }
+ }
+
+  return {
+    options: options,
+    draw: draw,
+    output: output,
+    UI: UI
+  }
+}

src/modules/GridOverlay/index.js

@@ -0,0 +1,4 @@
+module.exports = [
+    require('./Module'),
+    require('./info.json')
+]

src/modules/GridOverlay/info.json

@@ -0,0 +1,31 @@
+{
+    "name": "GridOverlay",
+    "description": "Overlays a grid over an Image",
+    "inputs": {
+        "x": {
+            "type": "integer",
+            "desc": "X-position (measured from left) from where grid starts",
+            "default": 100
+        },
+        "y": {
+            "type": "integer",
+            "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"
+            ]
+        }
+    },
+    "only": "browser" 
+}