eessppeelllloo/image-sequencer
1
0
Fork 0
mirror of https://github.com/publiclab/image-sequencer.git synced 2025-12-16 21:29:58 +01:00
Code Issues Packages Projects Releases Wiki Activity

basic functionality with drag and drop

Browse Source
This commit is contained in:
jywarren
2017-01-02 19:14:37 -05:00
parent f45608250c
commit 6fcd18a03f
7 changed files with 55 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
README.md
View File

@@ -1,10 +1,8 @@
ImageFlow
ImageBoard
ImageFlow
========
* [ ] figure out UI/functional separation -- ui is in module wrapper?
* [ ] is there a module for generating forms from parameters?
* [ ] commandline runnability?
@@ -16,7 +14,7 @@ ImageBoard
* [ ] click to expand for all images
* [ ] "add a new step" menu
* [ ] allow passing data as data-uri or Image object, if both of neighboring pair has ability?
* [ ] allow passing data as data-uri or Image object, or stream, or ndarray or ImageData array, if both of neighboring pair has ability?
* [ ] ...could we directly include package.json for module descriptions? At least as a fallback.
* [ ] BUG: this doesn't work for defaults: imageboard.loadImage('examples/grid.png', function() {

5
dist/imageboard.css vendored
View File

@@ -13,6 +13,10 @@ body {
border-bottom: 1px dashed #ccc;
}
.panel img {
max-width: 100%;
}
.instructions {
color: #aaa;
}
@@ -36,5 +40,4 @@ body {
.mod-image-select #drop img {
width: 100%;
max-width: 800px;
}

55
dist/imageboard.js vendored
View File

@@ -24323,13 +24323,19 @@ ImageBoard = function ImageBoard(options) {
steps[steps.length - 1].module.setup();
}
// by default, always begin with an ImageSelect module
addStep('image-select');
function setup() {
steps.forEach(function forEachStep(step, index) {
if (step.module.setup) step.module.setup();
// different behavior for first step:
var onComplete = (index !== 0) ? false : function (image) {
run(image); // begin run on image selection
}
if (step.module.setup) step.module.setup(onComplete);
});
@@ -24337,17 +24343,19 @@ ImageBoard = function ImageBoard(options) {
setup();
// need prev() next() functions
function run() {
var lastImage;
steps.forEach(function forEachStep(step) {
// step.module.run(onComplete);// initial image
step.module.run(lastImage, function onComplete(image) {
lastImage = image;
});
});
// return image;
return lastImage;
}
@@ -24391,8 +24399,7 @@ module.exports = {
// But 'image-select' is not set up that way; it's UI. But it's special.
'image-select': function ImageSelect() {
var imageselect,
image;
var imageselect;
function setup(onComplete) {
imageselect = require('./modules/ImageSelect.js')({
@@ -24401,9 +24408,8 @@ module.exports = {
});
}
function run() {
image = imageselect.getImage();
return image;
function run(image, onComplete) {
if (onComplete) onComplete(get());
}
function get() {
@@ -24433,7 +24439,7 @@ module.exports = {
function setup() {
$(options.container).append('<div class="panel ' + selector + ' ' + uniqueSelector + '"></div>');
el = $(uniqueSelector);
el = $('.' + uniqueSelector);
}
@@ -24442,9 +24448,6 @@ module.exports = {
options = options || {};
options.format = options.format || "jpg";
// is global necessary? this is for browsers only
//global.Buffer = require('buffer');
var getPixels = require("get-pixels"),
savePixels = require("save-pixels"),
base64 = require('base64-stream');
@@ -24471,32 +24474,16 @@ module.exports = {
var buffer = base64.encode();
savePixels(pixels, options.format)
.pipe(buffer)
.on('end', function() {
// so this line needs time to run asynchronously. Look into how stream callbacks work, or if we can chain a .something(function(){}) to do the rest
pix = buffer;
var image = new Image();
/*
// these two won't work if run on the same line -- something needs to load
imageboard.steps[1].module.run(imageboard.steps[0].module.get());
$('.panel').last().html('<img src="data:image/jpeg;base64,'+pix.read().toString()+'" />')
*/
// asynchronicity problem;
// this doesn't work, what's a real event:
buffer.on('write', function() {
image.src = buffer.read().toString();
console.log(image)
el.html(image)
if (onComplete) onComplete(image);
});
image.src = 'data:image/' + options.format + ';base64,' + buffer.read().toString();
}).pipe(buffer);
});
@@ -24576,7 +24563,7 @@ module.exports = function ImageSelect(options) {
for (var i = 0, f; f = files[i]; i++) {
// Read the File objects in this FileList.
reader = new FileReader()
reader = new FileReader();
reader.onload = function(e) {
// we should trigger "load" event here

6
index.html
View File

@@ -45,11 +45,11 @@ var pix;
imageboard = ImageBoard();
imageboard.loadImage('examples/grid.png', function() {
// imageboard.loadImage('examples/grid.png', function() {
$('body').append(imageboard.run());
// $('body').append(imageboard.run());
});
// });
imageboard.addStep('passthrough');

18
src/ImageBoard.js
View File

@@ -17,13 +17,19 @@ ImageBoard = function ImageBoard(options) {
steps[steps.length - 1].module.setup();
}
// by default, always begin with an ImageSelect module
addStep('image-select');
function setup() {
steps.forEach(function forEachStep(step, index) {
if (step.module.setup) step.module.setup();
// different behavior for first step:
var onComplete = (index !== 0) ? false : function (image) {
run(image); // begin run on image selection
}
if (step.module.setup) step.module.setup(onComplete);
});
@@ -31,17 +37,19 @@ ImageBoard = function ImageBoard(options) {
setup();
// need prev() next() functions
function run() {
var lastImage;
steps.forEach(function forEachStep(step) {
// step.module.run(onComplete);// initial image
step.module.run(lastImage, function onComplete(image) {
lastImage = image;
});
});
// return image;
return lastImage;
}

35
src/Modules.js
View File

@@ -9,8 +9,7 @@ module.exports = {
// But 'image-select' is not set up that way; it's UI. But it's special.
'image-select': function ImageSelect() {
var imageselect,
image;
var imageselect;
function setup(onComplete) {
imageselect = require('./modules/ImageSelect.js')({
@@ -19,9 +18,8 @@ module.exports = {
});
}
function run() {
image = imageselect.getImage();
return image;
function run(image, onComplete) {
if (onComplete) onComplete(get());
}
function get() {
@@ -51,7 +49,7 @@ module.exports = {
function setup() {
$(options.container).append('<div class="panel ' + selector + ' ' + uniqueSelector + '"></div>');
el = $(uniqueSelector);
el = $('.' + uniqueSelector);
}
@@ -60,9 +58,6 @@ module.exports = {
options = options || {};
options.format = options.format || "jpg";
// is global necessary? this is for browsers only
//global.Buffer = require('buffer');
var getPixels = require("get-pixels"),
savePixels = require("save-pixels"),
base64 = require('base64-stream');
@@ -89,32 +84,16 @@ module.exports = {
var buffer = base64.encode();
savePixels(pixels, options.format)
.pipe(buffer)
.on('end', function() {
// so this line needs time to run asynchronously. Look into how stream callbacks work, or if we can chain a .something(function(){}) to do the rest
pix = buffer;
var image = new Image();
/*
// these two won't work if run on the same line -- something needs to load
imageboard.steps[1].module.run(imageboard.steps[0].module.get());
$('.panel').last().html('<img src="data:image/jpeg;base64,'+pix.read().toString()+'" />')
*/
// asynchronicity problem;
// this doesn't work, what's a real event:
buffer.on('write', function() {
image.src = buffer.read().toString();
console.log(image)
el.html(image)
if (onComplete) onComplete(image);
});
image.src = 'data:image/' + options.format + ';base64,' + buffer.read().toString();
}).pipe(buffer);
});

2
src/modules/ImageSelect.js
View File

@@ -32,7 +32,7 @@ module.exports = function ImageSelect(options) {
for (var i = 0, f; f = files[i]; i++) {
// Read the File objects in this FileList.
reader = new FileReader()
reader = new FileReader();
reader.onload = function(e) {
// we should trigger "load" event here