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

Added Docs, updated method names

Browse Source
This commit is contained in:
Chinmay Pandhare
2017-07-23 11:57:05 +05:30
parent cfdc4c509e
commit 7584b1ec45
12 changed files with 104 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
README.md
View File

@@ -325,6 +325,50 @@ sequencer.insertSteps({
return value: **`sequencer`** (To allow method chaining)
## Creating a User Interface
Image Sequencer provides the following events which can be used to generate a UI:
* `onSetup` : this event is triggered when a new module is set up. This can be used,
for instance, to generate a DIV element to store the generated image for that step.
* `onDraw` : This event is triggered when Image Sequencer starts drawing the output
for a module. This can be used, for instance, to overlay a loading GIF over the DIV
generated above.
* `onComplete` : This event is triggered when Image Sequencer has drawn the output
for a module. This can be used, for instance, to update the DIV with the new image
and remove the loading GIF generated above.
* `onRemove` : This event is triggered when a module is removed. This can be used,
for instance, to remove the DIV generated above.
How to define these functions:
```js
sequencer.setUI({
onSetup: function() {},
onDraw: function() {},
onComplete: function(output) {},
onRemove: function() {}
});
```
These methods can be defined and re-defined at any time, but it is advisable to
set them before any module is added and not change it thereafter. This is because
the `setUI` method will only affect the modules added after `setUI` is called.
The `onComplete` event is passed on the output of the module.
In the scope of all these events, the following variables are present, which
may be used in generating the UI:
* The object `identity`
```
identity = {
stepName: "Name of the Step",
stepID: "A unique ID given to the step",
imageName: "The name of the image to which the step is added."
}
```
* The variable `options.inBrowser` which is a Boolean and is `true` if the client is a browser and `false` otherwise.
## Contributing
Happily accepting pull requests; to edit the core library, modify files in `/src/`. To build, run `npm install` and `grunt build`.

60
dist/image-sequencer.js vendored
View File

@@ -34822,7 +34822,7 @@ ImageSequencer = function ImageSequencer(options) {
function removeStep(image,index) {
//remove the step from images[image].steps and redraw remaining images
if(index>0) {
images[image].steps[index].UI.remove();
images[image].steps[index].UI.onRemove();
images[image].steps.splice(index,1);
}
//tell the UI a step has been removed
@@ -35016,9 +35016,9 @@ function LoadImage(ref, name, src) {
}]
};
ref.images[name] = image;
ref.images[name].steps[0].UI.setup();
ref.images[name].steps[0].UI.drawing();
ref.images[name].steps[0].UI.drawn(image.steps[0].output.src);
ref.images[name].steps[0].UI.onSetup();
ref.images[name].steps[0].UI.onDraw();
ref.images[name].steps[0].UI.onComplete(image.steps[0].output.src);
}
return loadImage(name,src);
@@ -35136,7 +35136,7 @@ module.exports = function UserInterface(UI,options) {
var UI = UI || {};
UI.setup = UI.setup || function() {
UI.onSetup = UI.onSetup || function() {
if(options.ui == "none") {
// No UI
}
@@ -35151,7 +35151,7 @@ module.exports = function UserInterface(UI,options) {
}
}
UI.drawing = UI.drawing || function() {
UI.onDraw = UI.onDraw || function() {
if (options.ui == "none") {
// No UI
}
@@ -35165,7 +35165,7 @@ module.exports = function UserInterface(UI,options) {
}
}
UI.drawn = UI.drawn || function(output) {
UI.onComplete = UI.onComplete || function(output) {
if (options.ui == "none") {
// No UI
}
@@ -35180,7 +35180,7 @@ module.exports = function UserInterface(UI,options) {
}
}
UI.remove = UI.remove || function(callback) {
UI.onRemove = UI.onRemove || function(callback) {
if(options.ui == "null"){
// No UI
}
@@ -35254,12 +35254,12 @@ module.exports = function Crop(input,options,callback) {
module.exports = function CropModule(options,UI) {
options = options || {};
options.title = "Crop Image";
UI.setup();
UI.onSetup();
var output
function draw(input,callback) {
UI.drawing();
UI.onDraw();
const this_ = this;
require('./Crop')(input,options,function(out,format){
@@ -35267,7 +35267,7 @@ module.exports = function Crop(input,options,callback) {
src: out,
format: format
}
UI.drawn(out);
UI.onComplete(out);
callback();
});
@@ -35289,14 +35289,14 @@ module.exports = function Crop(input,options,callback) {
module.exports = function DoNothing(options,UI) {
options = options || {};
options.title = "Do Nothing";
UI.setup();
UI.onSetup();
var output;
function draw(input,callback) {
UI.drawing();
UI.onDraw();
this.output = input;
callback();
UI.drawn(this.output.src);
UI.onComplete(this.output.src);
}
return {
@@ -35315,12 +35315,12 @@ module.exports = function DoNothingPix(options,UI) {
options = options || {};
options.title = "Do Nothing with pixels";
UI.setup();
UI.onSetup();
var output;
function draw(input,callback) {
UI.drawing();
UI.onDraw();
var this_ = this;
function changePixel(r, g, b, a) {
@@ -35328,7 +35328,7 @@ module.exports = function DoNothingPix(options,UI) {
}
function output(image,datauri,mimetype){
this_.output = {src:datauri,format:mimetype}
UI.drawn(datauri);
UI.onComplete(datauri);
}
return require('../_nomodule/PixelManipulation.js')(input, {
output: output,
@@ -35337,7 +35337,7 @@ module.exports = function DoNothingPix(options,UI) {
image: options.image,
callback: callback
});
}
return {
@@ -35357,12 +35357,12 @@ module.exports = function GreenChannel(options,UI) {
options = options || {};
options.title = "Green channel only";
options.description = "Displays only the green channel of an image";
UI.setup();
UI.onSetup();
var output;
function draw(input,callback) {
UI.drawing();
UI.onDraw();
var this_ = this;
function changePixel(r, g, b, a) {
@@ -35370,7 +35370,7 @@ module.exports = function GreenChannel(options,UI) {
}
function output(image,datauri,mimetype){
this_.output = {src:datauri,format:mimetype};
UI.drawn(datauri);
UI.onComplete(datauri);
}
return require('../_nomodule/PixelManipulation.js')(input, {
output: output,
@@ -35400,14 +35400,14 @@ module.exports = function GreenChannel(options,UI) {
options = options || {};
options.title = "Invert Colors";
options.description = "Inverts the colors of the image";
UI.setup();
UI.onSetup();
var output;
//function setup() {} // optional
function draw(input,callback) {
UI.drawing();
UI.onDraw();
var this_ = this;
function changePixel(r, g, b, a) {
@@ -35415,7 +35415,7 @@ module.exports = function GreenChannel(options,UI) {
}
function output(image,datauri,mimetype){
this_.output = {src:datauri,format:mimetype};
UI.drawn(datauri);
UI.onComplete(datauri);
}
return require('../_nomodule/PixelManipulation.js')(input, {
output: output,
@@ -35444,12 +35444,12 @@ module.exports = function NdviRed(options,UI) {
options = options || {};
options.title = "NDVI for red-filtered cameras (blue is infrared)";
UI.setup();
UI.onSetup();
var output;
function draw(input,callback) {
UI.drawing();
UI.onDraw();
var this_ = this;
function changePixel(r, g, b, a) {
@@ -35459,7 +35459,7 @@ module.exports = function NdviRed(options,UI) {
}
function output(image,datauri,mimetype){
this_.output = {src:datauri,format:mimetype};
UI.drawn(datauri);
UI.onComplete(datauri);
}
return require('../_nomodule/PixelManipulation.js')(input, {
output: output,
@@ -35484,12 +35484,12 @@ module.exports = function SegmentedColormap(options,UI) {
options = options || {};
options.title = "Segmented Colormap";
UI.setup();
UI.onSetup();
var output;
function draw(input,callback) {
UI.drawing();
UI.onDraw();
var this_ = this;
function changePixel(r, g, b, a) {
@@ -35500,7 +35500,7 @@ module.exports = function SegmentedColormap(options,UI) {
}
function output(image,datauri,mimetype){
this_.output = {src:datauri,format:mimetype};
UI.drawn(datauri);
UI.onComplete(datauri);
}
return require('../_nomodule/PixelManipulation.js')(input, {
output: output,

2
src/ImageSequencer.js
View File

@@ -69,7 +69,7 @@ ImageSequencer = function ImageSequencer(options) {
function removeStep(image,index) {
//remove the step from images[image].steps and redraw remaining images
if(index>0) {
images[image].steps[index].UI.remove();
images[image].steps[index].UI.onRemove();
images[image].steps.splice(index,1);
}
//tell the UI a step has been removed

6
src/LoadImage.js
View File

@@ -38,9 +38,9 @@ function LoadImage(ref, name, src) {
}]
};
ref.images[name] = image;
ref.images[name].steps[0].UI.setup();
ref.images[name].steps[0].UI.drawing();
ref.images[name].steps[0].UI.drawn(image.steps[0].output.src);
ref.images[name].steps[0].UI.onSetup();
ref.images[name].steps[0].UI.onDraw();
ref.images[name].steps[0].UI.onComplete(image.steps[0].output.src);
}
return loadImage(name,src);

8
src/UserInterface.js
View File

@@ -7,7 +7,7 @@ module.exports = function UserInterface(UI,options) {
var UI = UI || {};
UI.setup = UI.setup || function() {
UI.onSetup = UI.onSetup || function() {
if(options.ui == "none") {
// No UI
}
@@ -22,7 +22,7 @@ module.exports = function UserInterface(UI,options) {
}
}
UI.drawing = UI.drawing || function() {
UI.onDraw = UI.onDraw || function() {
if (options.ui == "none") {
// No UI
}
@@ -36,7 +36,7 @@ module.exports = function UserInterface(UI,options) {
}
}
UI.drawn = UI.drawn || function(output) {
UI.onComplete = UI.onComplete || function(output) {
if (options.ui == "none") {
// No UI
}
@@ -51,7 +51,7 @@ module.exports = function UserInterface(UI,options) {
}
}
UI.remove = UI.remove || function(callback) {
UI.onRemove = UI.onRemove || function(callback) {
if(options.ui == "null"){
// No UI
}

6
src/modules/Crop/Module.js
View File

@@ -16,12 +16,12 @@
module.exports = function CropModule(options,UI) {
options = options || {};
options.title = "Crop Image";
UI.setup();
UI.onSetup();
var output
function draw(input,callback) {
UI.drawing();
UI.onDraw();
const this_ = this;
require('./Crop')(input,options,function(out,format){
@@ -29,7 +29,7 @@
src: out,
format: format
}
UI.drawn(out);
UI.onComplete(out);
callback();
});

6
src/modules/DoNothing/Module.js
View File

@@ -4,14 +4,14 @@
module.exports = function DoNothing(options,UI) {
options = options || {};
options.title = "Do Nothing";
UI.setup();
UI.onSetup();
var output;
function draw(input,callback) {
UI.drawing();
UI.onDraw();
this.output = input;
callback();
UI.drawn(this.output.src);
UI.onComplete(this.output.src);
}
return {

8
src/modules/DoNothingPix/Module.js
View File

@@ -5,12 +5,12 @@ module.exports = function DoNothingPix(options,UI) {
options = options || {};
options.title = "Do Nothing with pixels";
UI.setup();
UI.onSetup();
var output;
function draw(input,callback) {
UI.drawing();
UI.onDraw();
var this_ = this;
function changePixel(r, g, b, a) {
@@ -18,7 +18,7 @@ module.exports = function DoNothingPix(options,UI) {
}
function output(image,datauri,mimetype){
this_.output = {src:datauri,format:mimetype}
UI.drawn(datauri);
UI.onComplete(datauri);
}
return require('../_nomodule/PixelManipulation.js')(input, {
output: output,
@@ -27,7 +27,7 @@ module.exports = function DoNothingPix(options,UI) {
image: options.image,
callback: callback
});
}
return {

6
src/modules/GreenChannel/Module.js
View File

@@ -6,12 +6,12 @@ module.exports = function GreenChannel(options,UI) {
options = options || {};
options.title = "Green channel only";
options.description = "Displays only the green channel of an image";
UI.setup();
UI.onSetup();
var output;
function draw(input,callback) {
UI.drawing();
UI.onDraw();
var this_ = this;
function changePixel(r, g, b, a) {
@@ -19,7 +19,7 @@ module.exports = function GreenChannel(options,UI) {
}
function output(image,datauri,mimetype){
this_.output = {src:datauri,format:mimetype};
UI.drawn(datauri);
UI.onComplete(datauri);
}
return require('../_nomodule/PixelManipulation.js')(input, {
output: output,

6
src/modules/Invert/Module.js
View File

@@ -6,14 +6,14 @@ module.exports = function GreenChannel(options,UI) {
options = options || {};
options.title = "Invert Colors";
options.description = "Inverts the colors of the image";
UI.setup();
UI.onSetup();
var output;
//function setup() {} // optional
function draw(input,callback) {
UI.drawing();
UI.onDraw();
var this_ = this;
function changePixel(r, g, b, a) {
@@ -21,7 +21,7 @@ module.exports = function GreenChannel(options,UI) {
}
function output(image,datauri,mimetype){
this_.output = {src:datauri,format:mimetype};
UI.drawn(datauri);
UI.onComplete(datauri);
}
return require('../_nomodule/PixelManipulation.js')(input, {
output: output,

6
src/modules/NdviRed/Module.js
View File

@@ -5,12 +5,12 @@ module.exports = function NdviRed(options,UI) {
options = options || {};
options.title = "NDVI for red-filtered cameras (blue is infrared)";
UI.setup();
UI.onSetup();
var output;
function draw(input,callback) {
UI.drawing();
UI.onDraw();
var this_ = this;
function changePixel(r, g, b, a) {
@@ -20,7 +20,7 @@ module.exports = function NdviRed(options,UI) {
}
function output(image,datauri,mimetype){
this_.output = {src:datauri,format:mimetype};
UI.drawn(datauri);
UI.onComplete(datauri);
}
return require('../_nomodule/PixelManipulation.js')(input, {
output: output,

6
src/modules/SegmentedColormap/Module.js
View File

@@ -2,12 +2,12 @@ module.exports = function SegmentedColormap(options,UI) {
options = options || {};
options.title = "Segmented Colormap";
UI.setup();
UI.onSetup();
var output;
function draw(input,callback) {
UI.drawing();
UI.onDraw();
var this_ = this;
function changePixel(r, g, b, a) {
@@ -18,7 +18,7 @@ module.exports = function SegmentedColormap(options,UI) {
}
function output(image,datauri,mimetype){
this_.output = {src:datauri,format:mimetype};
UI.drawn(datauri);
UI.onComplete(datauri);
}
return require('../_nomodule/PixelManipulation.js')(input, {
output: output,