diff --git a/examples/index.html b/examples/index.html index b0be1689..6e59bcc8 100644 --- a/examples/index.html +++ b/examples/index.html @@ -175,6 +175,10 @@ + +
diff --git a/src/ImageSequencer.js b/src/ImageSequencer.js index b0c01481..88a23992 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 a3853dea..db13a360 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 25c186b7..41ce1873 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 ab846e4a..fb435ab7 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 71a9eea8..d2b9944d 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 00000000..5453a24f --- /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 00000000..b752d3b2 --- /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); +});