Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Restructure API #824

Merged
merged 8 commits into from
Mar 14, 2019
Merged

Restructure API #824

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
990543a
Change addsteps(), loadImages(), run() and default UI
Mar 3, 2019
091acca
Restructure API completely
Mar 8, 2019
8f855ca
Resolved Merge Conflicts
Mar 8, 2019
3b1edfd
Merge remote-tracking branch 'upstream/main' into restructure-api
Mar 9, 2019
6b566f1
Add updated dist files
Mar 9, 2019
3810509
Removed extra comments
Mar 9, 2019
ca3706e
Indentation improved
Mar 12, 2019
512651e
Update README.md
Mar 12, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
186 changes: 32 additions & 154 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -330,12 +330,11 @@ Methods can be chained on the Image Sequencer:
* run() can not be in the middle of the chain.
* If the chain starts with loadImage() or loadImages(), the following methods are
applied only to the newly loaded images.
* If no name is provided to the image, a name will be generated for it. The name will
be of the form "image<number>". For Ex: "image1", "image2", "image3", etc.


Valid Chains:
```js
sequencer.loadImage('red',function(){
sequencer.loadImage(function(){
this.addSteps('invert').run(function(out){
//do something with ouptut.
});
Expand All @@ -350,152 +349,6 @@ sequencer.addSteps('invert').run().addSteps('ndvi-red');
```


## Multiple Images
Image Sequencer is capable of handling multiple images at once.

### Initializing a sequencer with multiple images.
This is just like before.
```js
var sequencer = ImageSequencer();
```

### Loading Multiple Images into the Sequencer

Multiple images can be loaded by the method `loadImages`. Everything is the same,
except that now, a unique identification called `image_name` has to be provided
with each image. This is a string literal.

* 3/2 parameters :
```js
sequencer.loadImages(image_name,
image_src,optional_callback);
```
* 1/2 parameters (JSON) :
```js
sequencer.loadImages({
images: {
image1_name: image_src,
image2_name: image_src,
...
},
callback: optional_callback
});
```

return value: **none**


### Adding Steps on Multiple Images

The same method `addSteps` is used for this. There's just a slight obvious change
in the syntax that the image name has to be supplied too. `image_name` as well as,
`module_name` in the following examples can be either strings or arrays of strings.

```js
sequencer.addSteps(image_name,module_name,optional_options);
```

If no Image Name is specified, the module is added to **all** images.

```js
sequencer.addSteps(module_name,optional_options);
```

All this can be passed in as JSON:

```js
sequencer.addSteps({
image1_name: {name: module_name, o: optional_options},
image2_name: {name: module_name, o: optional_options},
...
});
```

return value: **`sequencer`** (To allow method chaining)


### Running a Sequencer with multiple images

The same `run` method can be used with a slight change in syntax.
The `run` method accepts parameters `image` and `from`. `from` is the index from
where the function starts generating output. By default, it will run across all
the steps. (from = 1) If no image is specified, the sequencer will be run over **all
the images**. `image_name` may be an array of image names.

```js
sequencer.run(); //All images from first step
```

```js
sequencer.run(image_name,from); //Image 'image' from 'from'
```

The `run` method also accepts an optional callback just like before:

```js
sequencer.run(image_name,from,function(out){
// This gets called back.
// "out" is the DataURL of final image.
});
```

JSON input is also acceptable.

```js
sequencer.run({
image1_name: from,
image2_name: from,
...
});
```

return value: **`sequencer`** (To allow method chaining)


### Removing Steps from an Image

Similarly, `removeSteps` can also accept an `image_name` parameter. Either, both,
or none of `image_name` and `steps` them may be an array. JSON input is also acceptable.

```js
sequencer.removeSteps("image_name",[steps]);
```

```js
sequencer.removeSteps("image_name",step);
```

```js
sequencer.removeSteps({
image1_name: [steps],
image2_name: [steps],
...
});
```
return value: **`sequencer`** (To allow method chaining)


### Inserting steps on an image

The `insertSteps` method can also accept an `image_name` parameter. `image_name`
may be an array. Everything else remains the same. JSON Input is acceptable too.

```js
sequencer.insertSteps("image",index,"module_name",o);
```
```js
sequencer.insertSteps([image],index,"module_name",o);
```
```js
sequencer.insertSteps({
image1: [
{index:index1, name: module_name1, o:optional_options1},
{index:index2, name: module_name2, o:optional_options2},
...
]
});
```
return value: **`sequencer`** (To allow method chaining)

## Fetching current steps

Expand Down Expand Up @@ -619,12 +472,37 @@ sequencer.setUI({
});
```

Note: `identity.imageName` is the "name" of that particular image. This name can
be specified while loading the image via `sequencer.loadImage("name","SRC")`. If
not specified, the name of a loaded image defaults to a name like "image1",
"image2", et cetra.
## Using multiple images on same sequencer:

Image Sequencer object supports one imageURL at a time.

Adding a seccond image to same sequencer will result to adding same set of steps added to prior image and flushing out the previous one.

```js
s1 = new ImageSequencer(...);
s1.loadImage(url1);
s1.addSteps('blur');
s1.run();
s1.addImage(url2);
s1.run();
```
However if we want to use more than one image, we can either initialize a sequencer for each image like:

```js
sequencer1 = new ImageSequencer(...);
sequencer1.loadImage(...);
sequencer1.addSteps(steps);
sequencer1.run();

sequencer2 = new ImageSequencer(...);
sequencer2.loadImage(...);
sequencer2.addSteps(steps);
sequencer2.run();
```



Details of all modules can be sought using `sequencer.modulesInfo()`.
**Note**: Details of all modules can be sought using `sequencer.modulesInfo()`.
This method returns an object which defines the name and inputs of the modules. If a module name (hyphenated) is passed in the method, then only the details of that module are returned.

The `notify` function takes two parameters `msg` and `id`, former being the message to be displayed on console (in case of CLI and node ) and a HTML component(in browser). The id is optional and is useful for HTML interface to give appropriate IDs.
36 changes: 22 additions & 14 deletions dist/image-sequencer-ui.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -187,19 +187,28 @@ window.onload = function() {
takePhotoSelector: "#take-photo",
onLoad: function onFileReaderLoad(progress) {
var reader = progress.target;
var step = sequencer.images.image1.steps[0];
var step = sequencer.steps[0];
var util= intermediateHtmlStepUi(sequencer);
step.output.src = reader.result;
sequencer.run({ index: 0 });
if(typeof step.options !=="undefined")
step.options.step.imgElement.src = reader.result;
else
step.imgElement.src = reader.result;
insertPreview.updatePreviews(reader.result,'addStep');
insertPreview.updatePreviews(sequencer.images.image1.steps[0].options.step.imgElement.src,'insertStep');
insertPreview.updatePreviews(sequencer.steps[0].imgElement.src,'insertStep');
},
onTakePhoto: function (url) {
var step = sequencer.images.image1.steps[0];
var step = sequencer.steps[0];
step.output.src = url;
sequencer.run({ index: 0 });
step.options.step.imgElement.src = url;
if(typeof step.options !=="undefined"){
step.options.step.imgElement.src = url;
}
else
step.imgElement.src = url;
insertPreview.updatePreviews(url,'addStep');
insertPreview.updatePreviews(sequencer.steps[0].imgElement.src,'insertStep');
}
});

Expand Down Expand Up @@ -311,19 +320,19 @@ function DefaultHtmlSequencerUi(_sequencer, options) {
}
_sequencer
.addSteps(newStepName, options)
.run({ index: _sequencer.images.image1.steps.length - sequenceLength - 1 });
.run({ index: _sequencer.steps.length - sequenceLength - 1 });
$(addStepSel + " .info").html("Select a new module to add to your sequence.");
$(addStepSel + " select").val("none");

//enable save-sequence button if disabled initially
handleSaveSequence();

// add to URL hash too
urlHash.setUrlHashParameter("steps", _sequencer.toString());
urlHash.setUrlHashParameter("steps", _sequencer.toString())
}

function handleSaveSequence(){
var stepCount=sequencer.images.image1.steps.length;
var stepCount=sequencer.steps.length;
if(stepCount<2)
$(" #save-seq").prop("disabled", true);
else
Expand Down Expand Up @@ -486,7 +495,7 @@ function DefaultHtmlStepUi(_sequencer, options) {
$(step.ui.querySelectorAll(".insert-step")).on('click', function() { util.insertStep(step.ID) });

// Insert the step's UI in the right place
if (stepOptions.index == _sequencer.images.image1.steps.length) {
if (stepOptions.index == _sequencer.steps.length) {
stepsEl.appendChild(step.ui);
$("#steps .container:nth-last-child(1) .insert-step").prop('disabled',true);
if($("#steps .container:nth-last-child(2)"))
Expand Down Expand Up @@ -519,8 +528,7 @@ function DefaultHtmlStepUi(_sequencer, options) {
_sequencer.run({ index: step.index - 1 });

// modify the url hash
urlHash.setUrlHashParameter("steps", _sequencer.toString());

urlHash.setUrlHashParameter("steps", _sequencer.toString())
// disable the save button
$(step.ui.querySelector('.btn-save')).prop('disabled', true);
optionsChanged = false;
Expand Down Expand Up @@ -580,11 +588,11 @@ function DefaultHtmlStepUi(_sequencer, options) {
$(step.ui.querySelector("img")).show();
$(step.ui.querySelector(".load-spin")).hide();

step.imgElement.src = step.output;
step.imgElement.src = (step.name == "load-image") ? step.output.src : step.output;
var imgthumbnail = step.ui.querySelector(".img-thumbnail");
for (let index = 0; index < step.linkElements.length; index++) {
if (step.linkElements[index].contains(imgthumbnail))
step.linkElements[index].href = step.output;
step.linkElements[index].href = step.imgElement.src;
}

// TODO: use a generalized version of this
Expand All @@ -593,7 +601,8 @@ function DefaultHtmlStepUi(_sequencer, options) {
}

for (let index = 0; index < step.linkElements.length; index++) {
step.linkElements[index].download = step.name + "." + fileExtension(step.output);

step.linkElements[index].download = step.name + "." + fileExtension(step.imgElement.src);
step.linkElements[index].target = "_blank";
}

Expand Down Expand Up @@ -702,7 +711,6 @@ function generatePreview(previewStepName, customValues, path, selector) {
}

function loadPreview() {
previewSequencer = previewSequencer.addSteps('resize', { resize: "40%" });
if (previewStepName === "crop") {
previewSequencer.addSteps(previewStepName, customValues).run(insertPreview);
}
Expand Down
2 changes: 1 addition & 1 deletion dist/image-sequencer-ui.min.js
View file
Open in desktop

Large diffs are not rendered by default.

Loading