Added a function to sequencer and then made the functionality available to crop and overlay module. (#592)

* Add manifest.json and cache static assets for offline use (#331)

* Add manifest.json

* cache static assets for offline use

* update cache

* add meta theme-color and change static files to be cache

* cache the files on network request

* caching on first run

Signed-off-by: tech4GT <varun.gupta1798@gmail.com>

* add a button to clear cache

* add styling to clear cache link

* Update Modules.js (#452)

I've arranged the modules in alphabetical order.

* Added a function to parse Input coordinates and added the functionality for crop and overlay modules

* Added changed dist files

* Revert "Added changed dist files"

This reverts commit dbda25a228.

* Changed function name and added the functionaity to src/utils folder

* Added unit test

* Added unit test to /test/util

examples/index.html

@@ -176,6 +176,10 @@
     </div>
   </div>
   
+  <footer>
+    <hr style="margin:20px;"><center><a class="color:grey;" id="clear-cache">Clear offline cache</a></center>
+  </footer>
+
   <form class="move-up" action="#up">
     <button><i class="fa fa-arrow-circle-o-up"></i></button>
   </form>

src/modules/Crop/Module.js

@@ -19,7 +19,7 @@ module.exports = function CropModule(options, UI) {
   // add our custom in-module html ui:
   if (options.step.inBrowser && !options.noUI) var ui = require('./Ui.js')(options.step, UI);
   var output,
-      setupComplete = false;
+    setupComplete = false;
 
   // This function is caled everytime the step has to be redrawn
   function draw(input,callback) {
@@ -29,8 +29,23 @@ module.exports = function CropModule(options, UI) {
     // save the input image;
     // TODO: this should be moved to module API to persist the input image
     options.step.input = input.src;
+    var parseCoordInputs = require('../../util/ParseInputCoordinates');
 
-    require('./Crop')(input, options, function(out, format){
+    //parse the inputs 
+    parseCoordInputs.parseCornerCoordinateInputs(options,{
+      src: input.src,
+      x: { valInp: options.x, type: 'horizontal' },
+      y: { valInp: options.y, type: 'vertical' },
+      w: { valInp: options.w, type: 'horizontal' },
+      h: { valInp: options.h, type: 'vertical' },
+    }, function (options, coord) {
+      options.x = parseInt(coord.x.valInp);
+      options.y = parseInt(coord.y.valInp);
+      options.w = coord.w.valInp;
+      options.h = coord.h.valInp;
+    });
+
+    require('./Crop')(input, options, function (out, format) {
 
       // This output is accessible to Image Sequencer
       step.output = {

src/modules/Crop/info.json

@@ -1,6 +1,6 @@
 {
   "name": "Crop",
-  "description": "Crop image to given x, y, w, h in pixels, measured from top left",
+  "description": "Crop image to given x, y, w, h in pixels or % , measured from top left",
   "url": "https://github.com/publiclab/image-sequencer/tree/master/MODULES.md",
   "inputs": {
     "x": {

src/modules/Overlay/Module.js

@@ -15,13 +15,25 @@ module.exports = function Dynamic(options, UI, util) {
 
         var step = this;
 
+        var parseCoordInputs = require('../../util/ParseInputCoordinates');
+
+        //parse the inputs 
+        parseCoordInputs.parseCornerCoordinateInputs(options, {
+            src: input.src,
+            x: { valInp: options.x, type: 'horizontal' },
+            y: { valInp: options.y, type: 'vertical' },
+        }, function (options, input) {
+            options.x = parseInt(input.x.valInp);
+            options.y = parseInt(input.y.valInp);
+        });
+
         // save the pixels of the base image
         var baseStepImage = this.getStep(options.offset).image;
         var baseStepOutput = this.getOutput(options.offset);
 
         var getPixels = require('get-pixels');
 
-        getPixels(input.src, function(err, pixels) {
+        getPixels(input.src, function (err, pixels) {
             options.secondImagePixels = pixels;
 
             function changePixel(r1, g1, b1, a1, x, y) {

src/modules/Overlay/info.json

@@ -1,6 +1,6 @@
 {
     "name": "Overlay",
-    "description": "Overlays an Image over another at a given position(x,y)",
+    "description": "Overlays an Image over another at a given position(x,y) in pixels or in %",
     "inputs": {
         "x": {
             "type": "integer",

src/util/ParseInputCoordinates.js

@@ -0,0 +1,24 @@
+module.exports = function parseCornerCoordinateInputs(options,coord,callback) {
+    var getPixels = require('get-pixels');
+    getPixels(coord.src, function(err, pixels) {
+      var iw = pixels.shape[0],
+        ih = pixels.shape[1];
+      if (!coord.x.valInp) {
+        return
+      }
+      else {
+        Object.keys(coord).forEach(convert);
+        function convert(key) {
+          var val = coord[key];
+          if (val.valInp && val.valInp.slice(-1) === "%") {
+            val.valInp = parseInt(val.valInp, 10);
+            if (val.type === 'horizontal')
+              val.valInp = val.valInp * iw / 100;
+            else
+              val.valInp = val.valInp * ih / 100;
+          }
+        }
+      }
+      callback(options, coord);
+    })
+  }

test/util/parse-input.js

@@ -0,0 +1,17 @@
+var test = require('tape');
+
+var red = "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAQABADASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAf/xAAUEAEAAAAAAAAAAAAAAAAAAAAA/8QAFQEBAQAAAAAAAAAAAAAAAAAABgj/xAAUEQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIRAxEAPwCdABykX//Z";
+
+var parseCornerCoordinateInputs = require('../../src/util/ParseInputCoordinates');
+
+
+test('parseCornerCoordinateInputs works.', function (t) {
+    var options = { x: '10%' },
+        coord = { src: red, x: { valInp: options.x, type: 'horizontal' } }
+    callback = function (options, coord) {
+        options.x = parseInt(coord.x.valInp);
+        t.equal(options.x, 1, 'parseCornerCoordinateInputs works.');
+        t.end();
+    };
+    parseCornerCoordinateInputs(options, coord, callback);
+});