From aad1f823d32b629d5beb9d23fb74c224e8bebcbb Mon Sep 17 00:00:00 2001 From: Slytherin <31225007+Divy123@users.noreply.github.com> Date: Fri, 4 Jan 2019 21:57:00 +0530 Subject: [PATCH] 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 * 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 dbda25a22819801db1447fbb6b5f6b469c110967. * Changed function name and added the functionaity to src/utils folder * Added unit test * Added unit test to /test/util --- examples/index.html | 4 ++++ src/ImageSequencer.js | 2 +- src/modules/Crop/Module.js | 19 +++++++++++++++++-- src/modules/Crop/info.json | 2 +- src/modules/Overlay/Module.js | 14 +++++++++++++- src/modules/Overlay/info.json | 2 +- src/util/ParseInputCoordinates.js | 24 ++++++++++++++++++++++++ test/util/parse-input.js | 17 +++++++++++++++++ 8 files changed, 78 insertions(+), 6 deletions(-) create mode 100644 src/util/ParseInputCoordinates.js create mode 100644 test/util/parse-input.js diff --git a/examples/index.html b/examples/index.html index b0be16899c..6e59bcc8e8 100644 --- a/examples/index.html +++ b/examples/index.html @@ -175,6 +175,10 @@

Your gif is ready

+ +
diff --git a/src/ImageSequencer.js b/src/ImageSequencer.js index b0c014811a..88a23992bd 100644 --- a/src/ImageSequencer.js +++ b/src/ImageSequencer.js @@ -455,7 +455,7 @@ ImageSequencer = function ImageSequencer(options) { createMetaModule: createMetaModule, saveSequence: saveSequence, loadModules: loadModules, - + //other functions log: log, objTypeOf: objTypeOf, diff --git a/src/modules/Crop/Module.js b/src/modules/Crop/Module.js index a3853deaca..db13a36041 100644 --- a/src/modules/Crop/Module.js +++ b/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 = { diff --git a/src/modules/Crop/info.json b/src/modules/Crop/info.json index 25c186b742..41ce1873d9 100644 --- a/src/modules/Crop/info.json +++ b/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": { diff --git a/src/modules/Overlay/Module.js b/src/modules/Overlay/Module.js index ab846e4a62..fb435ab7f5 100644 --- a/src/modules/Overlay/Module.js +++ b/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) { diff --git a/src/modules/Overlay/info.json b/src/modules/Overlay/info.json index 71a9eea8cc..d2b9944d1d 100644 --- a/src/modules/Overlay/info.json +++ b/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", diff --git a/src/util/ParseInputCoordinates.js b/src/util/ParseInputCoordinates.js new file mode 100644 index 0000000000..5453a24fa5 --- /dev/null +++ b/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); + }) + } \ No newline at end of file diff --git a/test/util/parse-input.js b/test/util/parse-input.js new file mode 100644 index 0000000000..b752d3b23a --- /dev/null +++ b/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); +});