Change default of Rotate module to 90

Bumps [looks-same](https://github.com/gemini-testing/looks-same) from 5.0.2 to 6.0.0.
- [Release notes](https://github.com/gemini-testing/looks-same/releases)
- [Changelog](https://github.com/gemini-testing/looks-same/blob/master/CHANGELOG.md)
- [Commits](https://github.com/gemini-testing/looks-same/compare/v5.0.2...v6.0.0)

Signed-off-by: dependabot[bot] <support@dependabot.com>

.github/ISSUE_TEMPLATE.md

@@ -0,0 +1,35 @@
+### Please describe the problem (or idea)
+
+> What happened just before the problem occurred? Or what problem could this idea solve?
+
+
+
+> What did you expect to see that you didn't?
+
+
+
+### Please show us where to look
+
+http://sequencer.publiclab.org...
+
+
+### What's your PublicLab.org username?
+
+> This can help us diagnose the issue:
+
+
+
+### Browser, version, and operating system
+
+> Many bugs are related to these -- please help us track it down and reproduce what you're seeing!
+
+
+****
+
+## Thank you!
+
+Your help makes Public Lab better! We *deeply* appreciate your helping refine and improve this site.
+
+To learn how to write really great issues, which increases the chances they'll be resolved, see:
+
+https://publiclab.org/wiki/developers#Contributing+for+non-coders

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,16 @@
+Fixes #[Add issue number here.]
+
+Make sure these boxes are checked before your pull request (PR) is ready to be reviewed and merged. Thanks!
+
+* [ ] tests pass -- look for a green checkbox ✔️ a few minutes after opening your PR -- or run tests locally with `npm test`
+* [ ] code is in uniquely-named feature branch and has no merge conflicts
+* [ ] PR is descriptively titled
+* [ ] ask `@publiclab/reviewers` and `@publiclab/is-reviewers` for help, in a comment below
+
+> We're happy to help you get this ready -- don't be afraid to ask for help, and **don't be discouraged** if your tests fail at first!
+
+If tests do fail, click on the red `X` to learn why by reading the logs.
+
+Please be sure you've reviewed our contribution guidelines at https://publiclab.org/contributing-to-public-lab-software
+
+Thanks!

.github/config.yml

@@ -0,0 +1,25 @@
+# Configuration for welcome - https://github.com/behaviorbot/welcome
+
+# Configuration for new-issue-welcome - https://github.com/behaviorbot/new-issue-welcome
+
+# Comment to be posted to on first time issues
+newIssueWelcomeComment: |
+  Thanks for opening your first issue here! Please follow the issue template to help us help you 👍🎉😄
+  If you have screenshots to share demonstrating the issue, that's really helpful! 📸 You can [make a gif](https://www.cockos.com/licecap/) too!
+# Configuration for new-pr-welcome - https://github.com/behaviorbot/new-pr-welcome
+
+# Comment to be posted to on PRs from first time contributors in your repository
+newPRWelcomeComment: |
+ Thanks for opening this pull request!
+ There may be some errors, **but don't worry!** We're here to help! 👍🎉😄
+# Configuration for first-pr-merge - https://github.com/behaviorbot/first-pr-merge
+
+# Comment to be posted to on pull requests merged by a first time user
+firstPRMergeComment: |
+ Congrats on merging your first pull request! 🙌🎉⚡️ 
+ Your code will likely be published to https://sequencer.publiclab.org in the next few days. 
+ In the meantime, can you tell us your Twitter handle so we can thank you properly?
+ Now that you've completed this, you can help someone else take their first step!
+ See: [Public Lab's coding community!](https://code.publiclab.org)
+
+# It is recommended to include as many gifs and emojis as possible

.npmignore

@@ -0,0 +1,45 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Optional npm cache directory
+.npm
+
+# Optional REPL history
+.node_repl_history
+
+.DS_Store
+
+*.swp
+todo.txt
+test.js
+output.txt
+output/
+
+examples/
+icons/
+
+.travis.yml
+Gruntfile.js
+yarn.lock

.travis.yml

@@ -1,16 +1,20 @@
 language: node_js
 node_js:
-  - '4'
-  - '5'
   - '6'
-  - '7' # Node.js 7 is most stable version
+  - '8'
+  - '10'
 env:
   - CXX=g++-4.8
 before_script:
   - npm install grunt-cli -g # for "grunt build"
+  - curl -L https://codeclimate.com/downloads/test-reporter/test-reporter-latest-linux-amd64 > ./cc-test-reporter
+  - chmod +x ./cc-test-reporter
+  - ./cc-test-reporter before-build
 script:
   - npm test
   - grunt build
+after_script:
+  - ./cc-test-reporter after-build --exit-code $TRAVIS_TEST_RESULT
 addons:
   apt:
     sources:

CODE_OF_CONDUCT.md

@@ -0,0 +1,113 @@
+This document was copied from its home at https://publiclab.org/conduct on October 12, 2017. See that page if you would like to submit your concerns in a safe, completely anonymous way, and to learn more about this document. 
+
+****
+
+# Public Lab Code of Conduct 
+
+_Public Lab, PO Box 426113, Cambridge, MA 02142_
+
+We are coming together with an intent to care for ourselves and one another. We want to nurture a compassionate democratic culture where responsibility is shared. We -- visitors, community members, community moderators, staff, organizers, sponsors, and all others -- hold ourselves accountable to the same values regardless of position or experience. For this to work for everybody, individual decisions will not be allowed to run counter to the welfare of other people. This community aspires to be a respectful place both during online and in-person interactions so that all people are able to fully participate with their dignity intact. This document is a piece of the culture we're creating.
+
+
+This code of conduct applies to all spaces managed by the Public Lab community and non-profit, both online and in person. It was written by the Conduct Committee (formed in 2015 during Public Lab’s annual conference “The Barnraising”) and facilitated by staff to provide a clear set of practical guidelines for multi-day events such as Barnraisings, events led by organizers and community members, and online venues such as the website, comment threads on software platforms, chatrooms, our mailing lists, the issue tracker, and any other forums created by Public Lab which the community uses for communication. 
+
+
+## We come from all kinds of backgrounds
+
+Our community is best when we fully invite and include participants from a wide range of backgrounds. We specifically design spaces to be welcoming and accessible to newcomers and folks from underrepresented groups. Public Lab is dedicated to providing a harassment-free, safe, and inclusive experience for everyone, regardless of personal and professional background, gender, gender identity and expression, style of clothing, sexual orientation, dis-/ability, physical appearance, body size, race, class, age, or religion. Public Lab resists and rejects: racism, sexism, ableism, ageism, homophobia, transphobia, body shaming, religion shaming, “geekier-than-thou” shaming, education bias, the shaming of people nursing children, and the dismissal or bullying of children or adults.
+
+## We do not tolerate harassment or shaming
+
+While we operate under the assumption that all people involved with Public Lab subscribe to the basic understanding laid out above, we take these issues very seriously and think they should, in general, be taken seriously. Therefore, individuals who violate this Code both in and outside of Public Lab spaces may affect their ability to participate in Public Lab ranging from temporarily being placed into online moderation to, as a last resort, expulsion from the community. If you have any questions about our commitment to this framework and/or if you are unsure about aspects of it, email conduct@publiclab.org and we will do our best to provide clarification.
+
+## How It Works
+
+Sometimes things go wrong. When a situation is uncomfortable, hurtful, exclusionary, or upsetting, there is a problem that should be addressed. This code of conduct is an effort to maintain a safe space for everyone, and to talk about what might happen if that space is compromised. Please see additional guidelines below for community behavior on how we expect people to interact with one another. 
+
+### Two helpful groups
+
+__Conduct Committee (ConductCom)__: If at any time you experience something that you are not comfortable with, you may contact the Conduct Committee. As established during the 2015 Annual Barnraising, the following individuals are on the Conduct Committee: Klie Kliebert, Carla Green, Nick Shapiro, and Shannon Dosemagen, the executive director of the Public Lab nonprofit. 
+
+
+If you would like to have a confidential conversation, connect with ConductCom in person or email via [conduct@publiclab.org](mailto:conduct@publiclab.org). A minimum of two committee members will confer and respond as swiftly as possible. If you would prefer to speak privately with a representative of the nonprofit, please contact the executive director directly either in person or by email: [shannon@publiclab.org.](mailto:conduct@publiclab.org)
+
+
+To submit a report anonymously for review by ConductCom, go online via phone or computer to our anonymous “contact” app, located at [http://bit.ly/PLReport](http://bit.ly/PLReport). This contact app will be monitored daily at 8am CST during in-person events like Barnraisings and weekly at all other times. During multi-day in-person events hosted by the Public Lab non-profit, there will also be a physical suggestion box available. This box will be monitored throughout the event and can also be used to let us know if you need us to check on an anonymous online submission sooner.
+
+
+__Moderators Group:__ The moderators group is responsible for addressing immediate moderation issues that arise during online violations of the code over email lists and Public Lab community websites, as well as approving first-time posts and generally handling spam. Instructions on how to become a moderator, and, if you’ve been placed in moderation how to begin the process of getting out of moderation can be found at: https://publiclab.org/wiki/moderation. 
+
+****
+
+## A Culture of Empathy
+
+We begin interactions by acknowledging that we are part of a community with complementary goals. Different views are allowed to respectfully coexist in the same space. When something's happened and someone is uncomfortable, our first choice is to work through it. Endeavor to listen and appropriately adjust your behavior if someone approaches you privately with a request that you apologize or publicly requests that you stop an ongoing presentation. If someone questions your words, actions or motives, or "calls you out", hear their feedback and respond respectfully. It’s okay to not understand why something is hurtful or causes discomfort, as long as you approach it respectfully, with empathy. Repeating hurtful behavior after it has been addressed is disrespectful and is not allowed. Doing so will result in removal and subsequent banning from in-person events and being placed into moderation in online spaces. 
+
+###The first rule of engaging with others is consent
+During in-person gatherings, consent is important to highlight because the negotiation of consent can be subtle, and it’s easy to miss each other’s non-verbal cues, resulting in miscommunication and/or offense. During online interactions, consent can be even harder to distinguish.
+
+We make guesses or assessments of consent (willingness, welcome, invitation) all the time. Then we stay open to signs that the consent isn't there. Handshakes are a clear example of consent: someone offers a hand, and you take it if you want to shake it. A friendly smile might indicate consent to start a conversation. It might not. We learn that in the interaction. Sometimes we ask directly. We are open to making mistakes, and learning from them. The more we learn to be empathetic and see other people, the more we're able to talk about consent.
+
+Before you engage with someone on any level, be sure you have their consent. If your indications aren't being heard, you can also ask for help from other folks, especially Conduct Committee members and staff of the non-profit: "They aren't taking the hint. Will you help?" Turning a blind eye to hurtful interactions can be as bad for our community as the exchange itself. If you witness something, it's your responsibility to say something.  This is how we keep each other accountable, encourage empathy, and keep our community safe.
+
+## Guidelines for in-person community behavior
+
+
+Do | Don’t
+----------- | -----------
+Respectfully share what method works best for you, while giving others space to think differently and contribute other ideas | Disparage entire groups/sets of people for their beliefs or methods
+Ask permission to take pictures of and post about others on social media (see Media Consent, above)| Upload photos, tag or mention others online without their consent 
+Speak your own narrative, from your own unique culture | Caricature the cultural expressions of groups you are not a member of
+Model inclusionary expertise - if others in the group appear to be “lost”, slow down; stop and ask for input | Present information in a way / at a level that no one else in the room can understand, with no attempt to include others in the discussion
+Create events that are all-ages appropriate | Use language that excludes youth and their experiences as vital contributors
+Give everyone a chance to talk, only interrupting if absolutely necessary - for example, Code of Conduct violations | Repeatedly disrupt a discussion
+Stop, listen and ask for clarification if someone perceives your behavior or presentation as violating the Code of Conduct | Ignore others’ request to stop potentially harmful behavior, even if it was an accident
+Cultivate a sense of humor based on other subjects, such as word play (especially puns!)  | Joke using words related to actual or insulting descriptions of people
+Use words that accurately describe the situation - For example, “The wind was ridiculously strong!” instead of “The wind was crazy!” | Use disability and mental/emotional health terminology to describe a situation metaphorically, especially if the phrasing is meant as an insult
+Only discuss someone else’s lifestyle practices if they invite you to a conversation on the topic | Make unwelcomed comments regarding a person’s lifestyle practices, including those related to food, health, parenting, relationships, and employment
+Ask someone before you hug them; keep your hands/body to yourself, even when joking, unless the other person has given verbal consent | Initiate physical contact or simulate physical contact without consent 
+Disengage and find another activity if someone did not invite you and is not engaging with you | Violate personal space by continuing your physical presence into private spaces without consent
+Exercise the right to talk about your own identity if you want to, or not if you don’t want to | Deliberately “out” any aspect of a person’s identity without their consent
+Use the pronouns people have specified for themselves | Purposely misgender someone (ie, refusing to use their correct gender pronouns) after they have told you their correct pronouns 
+
+
+## Additional guidelines for online community behavior
+
+
+Online modes of interaction involve large numbers of people without the helpful presence of gestural, expression, and tonal cues regarding consent. Because of this, respectful and self-aware online conduct is both especially important and difficult. Our community has evolved specific guidelines for online interactions. 
+
+_If someone violates these guidelines, someone from the Moderators group will place them into moderation by changing that person’s posting permission on the relevant list, on the website, or both._
+
+Our triple notification standard for moderation means a point person from the Moderators group will:
+
+1. e-mail the person directly with a brief explanation of what was violated,
+2. send a summary email to the rest of the moderators group, 
+3. if it happened on a public list (vs a website), notify the list that one of our members has been placed into moderation with a brief explanation of what is not tolerated.
+
+
+If you wish to begin the process of getting out of moderation, respond to the email sent to you from [moderators@publiclab.org](mailto:moderators@publiclab.org). The Moderators group has the option to involve ConductCom.
+
+
+Do | Don’t
+-------|--------
+Stay on topic to make long threads easier to follow |Send spurious one-line responses that effectively "spam" hundreds of people and lower the overall content quality of a conversation. (Exception: expressions of appreciation and encouragement!)
+Start a new thread to help others follow along. Important if your response starts to significantly diverge from the original topic | Respond with off-topic information making it hard for the large group of readers to follow along
+Write short and literal subject lines to help the readers of the list manage the volume of communication | Humor and euphemisms in subject lines are easily misunderstood, although enthusiasm is welcome! 
+Mind your tone. We are not having this conversation in person, so it is all the more important to maintain a tone of respect | Write in aggressive tone, disrespectful tone, mocking tone, off-color tone. Note: writing in all caps is regarded as shouting
+
+## Media Consent
+
+* ALWAYS check with parents about posting anything with minors.
+* Never post the names of minors in conjunction with their photo. 
+* During multi-day events like Barnraisings most people will have signed media releases. Those who haven’t will be responsible for placing stickers on their nametags, and/or raising their hands in the moment to alert photographers to move them out of frame. 
+* For events where people have not signed blanket media release forms, the photographer is responsible for letting the room know that you are taking photos that will be posted online. Pay special attention to the presence of minors and their parent's wishes.
+
+
+## Addendum for all staff 
+
+Staff are bound by their Employment Handbook, you must reference it. Additionally:  
+
+* Direct problems that come up among community members to the Conduct Committee.
+* When organizing events, circulate access information regarding wheelchair-accessible ADA bathrooms, non-gendered bathrooms, the presence of stairs or curb ramps in the parking lot, et cetera.
+* During events that you are attending in person, solve accessibility issues by making sure attendees know where bathrooms are located and can access them by wheelchair without being obstructed by things like chairs, kites, contraptions, or cords. 
+* Watch for people feeling left out and include them.  

CONTRIBUTING.md

@@ -10,13 +10,13 @@ Most contribution (we imagine) would be in the form of API-compatible modules, w
 * [README.md](https://github.com/publiclab/image-sequencer)
 * [Contributing Modules](#contributing-modules)
 * [Info File](#info-file)
-* [Ideas](#ideas)
+* [Ideas](#Contribution-ideas)
 
 ****
 
-## Contribution ideas
+## Contribution-ideas
 
-See [this issue](https://github.com/publiclab/image-sequencer/issues/118) for a range of ideas for new contributions, and links to possibly helpful libraries. Also see the [new features issues list](https://github.com/publiclab/image-sequencer/labels/new-feature).
+See [this issue](https://github.com/publiclab/image-sequencer/issues/118) for a range of ideas for new contributions and links to possibly helpful libraries, or you can solve an [existing issue](https://github.com/publiclab/image-sequencer/labels/module). Also see the [new features issues list](https://github.com/publiclab/image-sequencer/labels/new-feature).
 
 ### Bugs
 
@@ -175,6 +175,7 @@ There are four events in all:
 * `UI.onComplete(options.step)` must be emitted whenever the output of a draw call
 is ready. An argument, that is the DataURL of the output image must be passed in.
 * `UI.onRemove(options.step)` is emitted automatically and the module should not emit it.
+* `UI.notify(msg,id)` must be emmited when a notification has to be produced.
 
 ### Name and description
 

Gruntfile.js

@@ -24,6 +24,10 @@ module.exports = function(grunt) {
       dist: {
         src: ["src/ImageSequencer.js"],
         dest: "dist/image-sequencer.js"
+      }, 
+      js: {
+        src: ["examples/demo.js"],
+        dest: "dist/image-sequencer-ui.js"
       }
     },
 
@@ -31,6 +35,10 @@ module.exports = function(grunt) {
       dist: {
         src: ["./dist/image-sequencer.js"],
         dest: "./dist/image-sequencer.min.js"
+      },
+      js: {
+        src: ['dist/image-sequencer-ui.js'],
+        dest: 'dist/image-sequencer-ui.min.js'
       }
     },
     browserSync: {
@@ -46,5 +54,5 @@ module.exports = function(grunt) {
   /* Default (development): Watch files and build on change. */
   grunt.registerTask("default", ["watch"]);
   grunt.registerTask("build", ["browserify:dist", "uglify:dist"]);
-  grunt.registerTask("serve", ["browserify:dist", "uglify:dist", "browserSync", "watch"]);
+  grunt.registerTask("serve", ["browserify:dist","browserify:js","uglify:dist","uglify:js","browserSync", "watch"]);
 };

README.md

@@ -10,13 +10,13 @@ Image Sequencer is different from other image processing systems in that it's _n
 * produces a legible trail of operations, to "show your work" for evidential, educational, or reproducibility reasons
 * makes the creation of new tools or "modules" simpler -- each must accept an input image, and produce an output image
 * allows many images to be run through the same sequence of steps
-* works identically in the browser, on Node.js, and on the commandline
+* works identically in the browser, on Node.js, and on the command line
 
 ![workflow diagram](https://raw.githubusercontent.com/publiclab/image-sequencer/master/examples/images/diagram-workflows.png)
 
 It is also for prototyping some other related ideas:
 
-* filter-like image processing -- applying a transform to any image from a given source, like a proxy. I.e. every image tile of a satellite imagery web map
+* filter-like image processing -- applying a transform to an image from a given source, like a proxy. I.e. [every image tile of a satellite imagery web map](https://publiclab.org/notes/warren/05-10-2018/prototype-filter-map-tiles-in-real-time-in-a-browser-with-imagesequencer-ndvi-landsat)
 * test-based image processing -- the ability to create a sequence of steps that do the same task as some other image processing tool, provable with example before/after images to compare with
 * logging of each step to produce an evidentiary record of modifications to an original image
 * cascading changes -- change an earlier step's settings, and see those changes affect later steps
@@ -45,7 +45,20 @@ A diagram of this running 5 steps on a single sample image may help explain how
 
 ## Installation
 
-This library works in the browser, in Node, and on the commandline (CLI), which we think is great. You can start a local environement to test the UI with `npm start`
+This library works in the browser, in Node, and on the command line (CLI), which we think is great.
+
+### Unix based platforms
+You can set up a local environment to test the UI with `sudo npm run setup` followed by `npm start` 
+
+### Windows
+Our npm scripts do not support windows shells, please run the following snippet in PowerShell.
+```powershell
+npm i ; npm i -g grunt grunt-cli ; grunt serve
+```
+In case of a port conflict please run the following
+```powershell
+npm i -g http-server ; http-server -p 3000
+```
 
 ### Browser
 
@@ -54,7 +67,7 @@ Just include [image-sequencer.js](https://publiclab.github.io/image-sequencer/di
 ### Node (via NPM)
 
 (You must have NPM for this)
-Add `image-sequencer` to your list of dependancies and run `$ npm install`
+Add `image-sequencer` to your list of dependencies and run `$ npm install`
 
 ### CLI
 
@@ -80,13 +93,13 @@ Image Sequencer can be used to run modules on an HTML Image Element using the
 modified. `steps` may be the name of a module or array of names of modules.
 
 Note: Browser CORS Restrictions apply. Some browsers may not allow local images
-form other folders, and throw a Security Error instead.
+from other folders, and throw a Security Error instead.
 
 ```js
   sequencer.replaceImage(selector,steps,optional_options);
 ```
 
-`optional_options` allows to pass additional arguments to the module itself.
+`optional_options` allows passing additional arguments to the module itself.
 
 For example:
 
@@ -95,6 +108,14 @@ For example:
   sequencer.replaceImage('#photo',['invert','ndvi-red']);
 ```
 
+### Data URL usage
+
+Since Image Sequencer uses data-urls, you can initiate a new sequence by providing an image in the [data URL format](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs), which will import into the demo and run:
+
+[Try this example link with a very small Data URL](http://sequencer.publiclab.org/examples/#src=data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAQABADASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAf/xAAUEAEAAAAAAAAAAAAAAAAAAAAA/8QAFQEBAQAAAAAAAAAAAAAAAAAABgj/xAAUEQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIRAxEAPwCdABykX//Z&steps=invert{})
+
+To produce a data URL from an HTML image, see [this nice blog post with example code](https://davidwalsh.name/convert-image-data-uri-javascript).
+
 ## CLI Usage
 
 Image Sequencer also provides a CLI for applying operations to local files. The CLI takes the following arguments:
@@ -123,7 +144,7 @@ The CLI also can take multiple steps at once, like so:
 
 But for this, double quotes must wrap the space-separated steps.
 
-Options for the steps can be passed in one line as json in the details option like
+Options for the steps can be passed in one line as JSON in the details option like
 ```
 $ ./index.js -i [PATH] -s "brightness" -c '{"brightness":50}'
 
@@ -137,7 +158,7 @@ Or the values can be given through terminal prompt like
 sequencer --save-sequence "invert-colormap invert(),colormap()"
 ```
 
-`install-module` option can be used to install new modules from npm. You can register this module in your sequencer with a custom name space sepated with the npm package name. Below is an example for the `image-sequencer-invert` module.
+`install-module` option can be used to install new modules from npm. You can register this module in your sequencer with a custom namespace separated with the npm package name. Below is an example of the `image-sequencer-invert` module.
 ```shell
 sequencer --install-module "invert image-sequencer-invert"
 ```
@@ -175,7 +196,7 @@ CORS Restrictions). To sum up, these are accepted:
 * DataURLs
 
 return value: **none** (A callback should be used to ensure the image gets loaded)
-The callback is called within the scope of a the sequencer. For example:
+The callback is called within the scope of a sequencer. For example:
 (addSteps is defined later)
 
 ```js
@@ -189,7 +210,7 @@ In this case, only `'SRC'`.
 
 ### Adding steps to the image
 
-The `addSteps` method is used to add steps on the image. One or more steps can
+The `addSteps` method is used to add steps to the image. One or more steps can
 be added at a time. Each step is called a module.
 
 ```js
@@ -218,7 +239,7 @@ sequencer.run();
 Sequencer can be run with a custom config object
 
 ```js
-// The config object enables custom progress bars in node environment and
+// The config object enables custom progress bars in a node environment and
 // ability to run the sequencer from a particular index(of the steps array)
 
 sequencer.run(config);
@@ -242,7 +263,7 @@ sequencer.run(function callback(out){
   // "out" is the DataURL of the final image.
 });
 sequencer.run(config,function callback(out){
-  // the callback is supported with all types of invocations
+  // the callback is supported by all types of invocations
 });
 ```
 
@@ -252,7 +273,7 @@ return value: **`sequencer`** (To allow method chaining)
 ### Removing a step from the sequencer
 
 The `removeSteps` method is used to remove unwanted steps from the sequencer.
-It accepts the index of the step as an input, or an array of the unwanted indices
+It accepts the index of the step as an input or an array of the unwanted indices
 if there are more than one.
 
 For example, if the modules ['ndvi-red','crop','invert'] were added in this order,
@@ -272,7 +293,7 @@ return value: **`sequencer`** (To allow method chaining)
 ### Inserting a step in between the sequencer
 
 The `insertSteps` method can be used to insert one or more steps at a given index
-in the sequencer. It accepts the index where the module is to be inserted, name of
+in the sequencer. It accepts the index where the module is to be inserted, the name of
 the module, and an optional options parameter. `index` is the index of the inserted
 step. Only one step can be inserted at a time. `optional_options` plays the same
 role it played in `addSteps`.
@@ -290,7 +311,7 @@ return value: **`sequencer`** (To allow method chaining)
 
 ### Importing an independent module
 
-The `loadNewModule` method can be used to import a new module inside sequencer. Modules can be downloaded via npm, yarn or cdn and are imported with a custom name. If you wish to load a new module at runtime, it will need to avoid using `require()` -- unless it is compiled with a system like browserify or webpack.
+The `loadNewModule` method can be used to import a new module inside the sequencer. Modules can be downloaded via npm, yarn or CDN and are imported with a custom name. If you wish to load a new module at runtime, it will need to avoid using `require()` -- unless it is compiled with a system like browserify or webpack.
 
 ```js
 const module = require('sequencer-moduleName')
@@ -306,7 +327,7 @@ Methods can be chained on the Image Sequencer:
 * 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.
+be of the form "image<number>". For Ex: "image1", "image2", "image3", etc.
 
 Valid Chains:
 ```js
@@ -363,7 +384,7 @@ 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
+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
@@ -414,7 +435,7 @@ The `run` method also accepts an optional callback just like before:
   });
 ```
 
-JSON Input is also acceptable.
+JSON input is also acceptable.
 
 ```js
 sequencer.run({
@@ -453,7 +474,7 @@ 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 Inout is acceptable too.
+may be an array. Everything else remains the same. JSON Input is acceptable too.
 
 ```js
 sequencer.insertSteps("image",index,"module_name",o);
@@ -474,7 +495,7 @@ return value: **`sequencer`** (To allow method chaining)
 
 ## Saving Sequences
 
-IMAGE SEQUENCER supports saving a sequence of modules and their associated settings in a simple string syntax. These sequences can be saved in the local storage inside the browser and inside a json file in node.js. sequences can be saved in node context using the CLI option
+IMAGE SEQUENCER supports saving a sequence of modules and their associated settings in a simple string syntax. These sequences can be saved in the local storage inside the browser and inside a JSON file in node.js. sequences can be saved in node context using the CLI option
 
 ```shell
 --save-sequence "name stringified-sequence"
@@ -495,7 +516,7 @@ Image sequencer supports stringifying a sequence which is appended to the url an
 channel{channel:green},invert{}
 ```
 
-Sequencer also supports use of `()` in place of `{}` for backwards compatibility with older links.(This syntax is deprecated and should be avoided as far as possible)
+Sequencer also supports the use of `()` in place of `{}` for backward compatibility with older links. (This syntax is deprecated and should be avoided as far as possible)
 ```
 channel(channel:green),invert()
 ```
@@ -528,6 +549,10 @@ for a module. This can be used, for instance, to update the DIV with the new ima
 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.
+* `notify` : This event is triggered whenever we need to shoot a notification to the
+user-interface.For example when the step is not available, we can shoot a notification,
+by sending appropriate message.For HTML UI it adds a DOM node to the browser, for CLI 
+and node , it logs the notification output to the respective console.
 
 How to define these functions:
 
@@ -536,7 +561,8 @@ sequencer.setUI({
   onSetup: function(step) {},
   onDraw: function(step) {},
   onComplete: function(step) {},
-  onRemove: function(step) {}
+  onRemove: function(step) {},
+  notify: function(msg,id) {}
 });
 ```
 
@@ -586,3 +612,5 @@ not specified, the name of a loaded image defaults to a name like "image1",
 
 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.

dist/image-sequencer-ui.js

@@ -0,0 +1,895 @@
+(function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){
+var defaultHtmlSequencerUi = require('./lib/defaultHtmlSequencerUi.js'),
+    setupCache = require('./lib/cache.js'),
+    DefaultHtmlStepUi = require('./lib/defaultHtmlStepUi.js'),
+    urlHash = require('./lib/urlHash.js'),
+    insertPreview = require('./lib/insertPreview.js');
+
+window.onload = function() {
+  sequencer = ImageSequencer();
+
+  function refreshOptions() {
+    // Load information of all modules (Name, Inputs, Outputs)
+    var modulesInfo = sequencer.modulesInfo();
+
+    var addStepSelect = $("#addStep select");
+    addStepSelect.html("");
+
+    // Add modules to the addStep dropdown
+    for (var m in modulesInfo) {
+      if (modulesInfo[m] && modulesInfo[m].name)
+        addStepSelect.append(
+          '<option value="' + m + '">' + modulesInfo[m].name + "</option>"
+        );
+    }
+    // Null option
+    addStepSelect.append('<option value="none" disabled selected>More modules...</option>');
+  }
+  refreshOptions();
+
+  $(window).on('scroll', scrollFunction);
+
+  function scrollFunction() {
+    var shouldDisplay = $('body').scrollTop() > 20 || $(':root').scrollTop() > 20;
+
+    $('#move-up').css({
+       display: shouldDisplay ? 'block' : 'none'
+    });
+  }
+
+
+  function topFunction() {
+    $('body').animate({scrollTop: 0});
+    $(':root').animate({scrollTop: 0});
+  }
+
+  $('#move-up').on("click",topFunction);
+
+
+  // UI for each step:
+  sequencer.setUI(DefaultHtmlStepUi(sequencer));
+
+  // UI for the overall demo:
+  var ui = defaultHtmlSequencerUi(sequencer);
+
+  // find any `src` parameters in URL hash and attempt to source image from them and run the sequencer
+  if (urlHash.getUrlHashParameter('src')) {
+    sequencer.loadImage(urlHash.getUrlHashParameter('src'), ui.onLoad);
+  } else {
+    sequencer.loadImage("images/tulips.png", ui.onLoad);
+  }
+
+  var resetSequence = function(){
+    var r=confirm("Do you want to reset the sequence?");
+    if (r)
+      window.location = "/";
+  }
+
+  $("#addStep select").on("change", ui.selectNewStepUi);
+  $("#addStep #add-step-btn").on("click", ui.addStepUi);
+  $("#resetButton").on("click",resetSequence);
+
+  //Module button radio selection
+  $('.radio-group .radio').on("click", function() {
+    $(this).parent().find('.radio').removeClass('selected');
+    $(this).addClass('selected');
+    newStep = $(this).attr('data-value');
+    //$("#addStep option[value=" + newStep + "]").attr('selected', 'selected');
+    $("#addStep select").val(newStep);
+    ui.selectNewStepUi();
+    ui.addStepUi();
+    $(this).removeClass('selected');
+  });
+
+  $('#download-btn').click(function() {
+    $('.step-thumbnail:last()').trigger("click");
+    return false;
+  });
+
+  function displayMessageOnSaveSequence(){
+      $(".savesequencemsg").fadeIn();
+      setTimeout(function() {
+          $(".savesequencemsg").fadeOut();
+      }, 1000);
+    }
+
+  $('body').on('click', 'button.remove', ui.removeStepUi);
+  $('#save-seq').click(() => {
+    var result = window.prompt("Please give a name to your sequence... (Saved sequence will only be available in this browser).");
+    if(result){
+      result = result + " (local)";
+      sequencer.saveSequence(result, sequencer.toString());
+      sequencer.loadModules();
+      displayMessageOnSaveSequence();
+      refreshOptions();
+    }
+  });
+
+  var isWorkingOnGifGeneration = false;
+
+  $('.js-view-as-gif').on('click', function(event) {
+    // Prevent user from triggering generation multiple times
+    if (isWorkingOnGifGeneration) return;
+
+    isWorkingOnGifGeneration = true;
+
+    var button = event.target;
+    button.disabled = true;
+
+
+    try {
+      // Select all images from previous steps
+      var imgs = document.getElementsByClassName("step-thumbnail");
+
+      var imgSrcs = [];
+
+      for (var i = 0; i < imgs.length; i++) {
+        imgSrcs.push(imgs[i].src);
+      }
+
+      var options = {
+        'gifWidth': imgs[0].width,
+        'gifHeight': imgs[0].height,
+        'images': imgSrcs,
+        'frameDuration': 7,
+      }
+
+      gifshot.createGIF(options, function(obj) {
+        if (!obj.error) {
+          // Final gif encoded with base64 format
+          var image = obj.image;
+          var animatedImage = document.createElement('img');
+
+          animatedImage.id = "gif_element";
+          animatedImage.src = image;
+
+
+          var modal = $('#js-download-gif-modal');
+
+          $("#js-download-as-gif-button").one("click", function() {
+            // Trigger download
+            download(image, "index.gif", "image/gif");
+
+            // Close modal
+            modal.modal('hide');
+          })
+
+          var gifContainer = document.getElementById("js-download-modal-gif-container");
+
+          // Clear previous results
+          gifContainer.innerHTML = '';
+
+          // Insert image
+          gifContainer.appendChild(animatedImage);
+
+
+          // Open modal
+          modal.modal();
+
+          button.disabled = false;
+          isWorkingOnGifGeneration = false;
+        }
+      });
+    }
+    catch (e) {
+      console.error(e);
+      button.disabled = false;
+      isWorkingOnGifGeneration = false;
+
+    }
+  });
+
+  // image selection and drag/drop handling from examples/lib/imageSelection.js
+  sequencer.setInputStep({
+    dropZoneSelector: "#dropzone",
+    fileInputSelector: "#fileInput",
+    takePhotoSelector: "#take-photo",
+    onLoad: function onFileReaderLoad(progress) {
+      var reader = progress.target;
+      var step = sequencer.images.image1.steps[0];
+      var util=IntermediateHtmlStepUi(sequencer);
+      step.output.src = reader.result;
+      sequencer.run({ index: 0 });
+      step.options.step.imgElement.src = reader.result;
+      insertPreview.updatePreviews(reader.result,'addStep');
+      insertPreview.updatePreviews(sequencer.images.image1.steps[0].options.step.imgElement.src,'insertStep');
+    },
+    onTakePhoto: function (url) {
+      var step = sequencer.images.image1.steps[0];
+      step.output.src = url;
+      sequencer.run({ index: 0 });
+      step.options.step.imgElement.src = url;
+    }
+  });
+
+  setupCache();
+
+  if (urlHash.getUrlHashParameter('src')) {
+    insertPreview.updatePreviews(urlHash.getUrlHashParameter('src'),'addStep');
+  } else {
+    insertPreview.updatePreviews("images/tulips.png",'addStep');
+  }
+};
+},{"./lib/cache.js":2,"./lib/defaultHtmlSequencerUi.js":3,"./lib/defaultHtmlStepUi.js":4,"./lib/insertPreview.js":5,"./lib/urlHash.js":7}],2:[function(require,module,exports){
+var setupCache = function() {
+  if ('serviceWorker' in navigator) {
+    navigator.serviceWorker.register('sw.js', { scope: '/examples/' })
+      .then(function(registration) {
+        const installingWorker = registration.installing;
+        installingWorker.onstatechange = () => {
+          console.log(installingWorker)
+          if (installingWorker.state === 'installed') {
+            location.reload();
+          }
+        }
+        console.log('Registration successful, scope is:', registration.scope);
+      })
+      .catch(function(error) {
+        console.log('Service worker registration failed, error:', error);
+      });
+  }
+
+  if ('serviceWorker' in navigator) {
+    caches.keys().then(function(cacheNames) {
+      cacheNames.forEach(function(cacheName) {
+        $("#clear-cache").append(" " + cacheName);
+      });
+    });
+  }
+
+  $("#clear-cache").click(function() {
+    if ('serviceWorker' in navigator) {
+      caches.keys().then(function(cacheNames) {
+        cacheNames.forEach(function(cacheName) {
+          caches.delete(cacheName);
+        });
+      });
+    }
+    location.reload();
+  });
+}
+
+module.exports = setupCache;
+},{}],3:[function(require,module,exports){
+var urlHash = require('./urlHash.js');
+function DefaultHtmlSequencerUi(_sequencer, options) {
+
+  options = options || {};
+  var addStepSel = options.addStepSel = options.addStepSel || "#addStep";
+  var removeStepSel = options.removeStepSel = options.removeStepSel || "button.remove";
+  var selectStepSel = options.selectStepSel = options.selectStepSel || "#selectStep";
+
+  function onLoad() {
+    importStepsFromUrlHash();
+    if (!$('#selectStep').val())
+      $(addStepSel + " #add-step-btn").prop("disabled", true);
+      handleSaveSequence();
+  }
+
+  // look up needed steps from Url Hash:
+  function importStepsFromUrlHash() {
+    var hash = urlHash.getUrlHashParameter("steps");
+
+    if (hash) {
+      _sequencer.importString(hash);
+      _sequencer.run({ index: 0 });
+    }
+    urlHash.setUrlHashParameter("steps", sequencer.toString());
+  }
+
+  function selectNewStepUi() {
+    var m = $(addStepSel + " select").val();
+    $(addStepSel + " .info").html(_sequencer.modulesInfo(m).description);
+    $(addStepSel + " #add-step-btn").prop("disabled", false);
+  }
+
+  function removeStepUi() {
+    var index = $(removeStepSel).index(this) + 1;
+    sequencer.removeSteps(index).run({ index: index - 1 });
+    // remove from URL hash too
+    urlHash.setUrlHashParameter("steps", sequencer.toString());
+    //disable save-sequence button if all steps are removed
+    handleSaveSequence();
+  }
+
+  function addStepUi() {
+    if ($(addStepSel + " select").val() == "none") return;
+
+    var newStepName = $(addStepSel + " select").val();
+
+    /*
+    * after adding the step we run the sequencer from defined step
+    * and since loadImage is not a part of the drawarray the step lies at current
+    * length - 2 of the drawarray
+    */
+    var sequenceLength = 1;
+    if (sequencer.sequences[newStepName]) {
+      sequenceLength = sequencer.sequences[newStepName].length;
+    } else if (sequencer.modules[newStepName][1]["length"]) {
+      sequenceLength = sequencer.modules[newStepName][1]["length"];
+    }
+    _sequencer
+      .addSteps(newStepName, options)
+      .run({ index: _sequencer.images.image1.steps.length - sequenceLength - 1 });
+      $(addStepSel + " .info").html("Select a new module to add to your sequence.");
+
+    //enable save-sequence button if disabled initially
+    handleSaveSequence();
+
+    // add to URL hash too
+    urlHash.setUrlHashParameter("steps", _sequencer.toString());
+  }
+
+  function handleSaveSequence(){
+    var stepCount=sequencer.images.image1.steps.length;
+    if(stepCount<2)
+    $(" #save-seq").prop("disabled", true);
+    else
+    $(" #save-seq").prop("disabled", false);
+  }
+
+  return {
+    onLoad: onLoad,
+    importStepsFromUrlHash: importStepsFromUrlHash,
+    selectNewStepUi: selectNewStepUi,
+    removeStepUi: removeStepUi,
+    addStepUi: addStepUi
+  }
+}
+
+module.exports = DefaultHtmlSequencerUi;
+
+
+},{"./urlHash.js":7}],4:[function(require,module,exports){
+// Set the UI in sequencer. This Will generate HTML based on
+// Image Sequencer events :
+// onSetup : Called every time a step is added
+// onDraw : Called every time a step starts draw
+// onComplete : Called every time a step finishes drawing
+// onRemove : Called everytime a step is removed
+// The variable 'step' stores useful data like input and
+// output values, step information.
+// See documetation for more details.
+
+var intermediateHtmlStepUi = require('./intermediateHtmlStepUi.js');
+var urlHash = require('./urlHash.js');
+
+function DefaultHtmlStepUi(_sequencer, options) {
+  
+  options = options || {};
+  var stepsEl = options.stepsEl || document.querySelector("#steps");
+  var selectStepSel = options.selectStepSel = options.selectStepSel || "#selectStep";
+
+  function onSetup(step, stepOptions) {
+    if (step.options && step.options.description)
+      step.description = step.options.description;
+
+    step.ui =
+      '\
+      <div class="container">\
+    <div class="row step">\
+    <form class="input-form">\
+    <div class="col-md-4 details">\
+    <h3>\
+    <span class = "toggle">' +step.name + ' <i class="fa fa-caret-up toggleIcon" aria-hidden="true"></i></span>' +
+    '<span class="load-spin" style="display:none;"><i class="fa fa-circle-o-notch fa-spin"></i></span>' +
+    '</h3><div class="cal"><p><i>"'+
+      (step.description || "") +
+      '</i></p></div>\
+    </div>\
+    </form>\
+    <div class="col-md-8 cal">\
+    <div class="load" style="display:none;"><i class="fa fa-circle-o-notch fa-spin"></i></div>\
+    <a><img alt="" style="max-width=100%" class="img-thumbnail step-thumbnail"/></a>\
+    </div>\
+    </div>\
+    </div>\
+    </div>';
+
+    var tools =
+    '<div class="cal"><div class="tools btn-group">\
+    <button confirm="Are you sure?" class="remove btn btn btn-default">\
+      <i class="fa fa-trash"></i>\
+    </button>\
+    <button class="btn  insert-step" style="margin-left:10px;border-radius:6px;background-color:#fff;border:solid #bababa 1.1px;" >\
+      <i class="fa fa-plus"></i> Add\
+    </button>\
+    </div>\
+    </div>';
+
+    var util = intermediateHtmlStepUi(_sequencer, step);
+
+    var parser = new DOMParser();
+    step.ui = parser.parseFromString(step.ui, "text/html");
+    step.ui = step.ui.querySelector("div.container");
+    step.linkElements = step.ui.querySelectorAll("a");
+    step.imgElement = step.ui.querySelector("a img");
+
+    if (_sequencer.modulesInfo().hasOwnProperty(step.name)) {
+      var inputs = _sequencer.modulesInfo(step.name).inputs;
+      var outputs = _sequencer.modulesInfo(step.name).outputs;
+      var merged = Object.assign(inputs, outputs); // combine outputs w inputs
+
+      for (var paramName in merged) {
+        var isInput = inputs.hasOwnProperty(paramName);
+        var html = "";
+        var inputDesc = isInput ? inputs[paramName] : {};
+        if (!isInput) {
+          html += '<span class="output"></span>';
+        } else if (inputDesc.type.toLowerCase() == "select") {
+          html += '<select class="form-control target" name="' + paramName + '">';
+          for (var option in inputDesc.values) {
+            html += "<option>" + inputDesc.values[option] + "</option>";
+          }
+          html += "</select>";
+        } else {
+          let paramVal = step.options[paramName] || inputDesc.default;
+          html =
+            '<input class="form-control target" type="' +
+            inputDesc.type +
+            '" name="' +
+            paramName +
+            '" value="' +
+            paramVal +
+            '" placeholder ="' +
+            (inputDesc.placeholder || "");
+
+          if (inputDesc.type.toLowerCase() == "range") {
+            html +=
+              '"min="' +
+              inputDesc.min +
+              '"max="' +
+              inputDesc.max +
+              '"step="' +
+              inputDesc.step + '">' + '<span>' + paramVal + '</span>';
+
+          }
+          else html += '">';
+        }
+
+        var div = document.createElement("div");
+        div.className = "row";
+        div.setAttribute("name", paramName);
+        var description = inputs[paramName].desc || paramName;
+        div.innerHTML =
+          "<div class='det cal'>\
+                           <label for='" +
+          paramName +
+          "'>" +
+          description +
+          "</label>\
+                           " +
+          html +
+          "\
+                         </div>";
+        step.ui.querySelector("div.details").appendChild(div);
+      }
+
+      $(step.ui.querySelector("div.details")).append(
+        '<div class="cal"><p><button type="submit" class="btn btn-default btn-save" disabled = "true" >Apply</button><span> Press apply to see changes</span></p></div>'
+      );
+
+      
+    }
+
+    if (step.name != "load-image") {
+      step.ui
+        .querySelector("div.details")
+        .appendChild(
+          parser.parseFromString(tools, "text/html").querySelector("div")
+        );
+      $(step.ui.querySelectorAll(".remove")).on('click', function() {notify('Step Removed','remove-notification')});  
+      $(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) {
+        stepsEl.appendChild(step.ui);
+        $("#steps .container:nth-last-child(1) .insert-step").prop('disabled',true);
+        if($("#steps .container:nth-last-child(2)"))
+        $("#steps .container:nth-last-child(2) .insert-step").prop('disabled',false);
+      } else {
+        stepsEl.insertBefore(step.ui, $(stepsEl).children()[stepOptions.index]);
+      }
+    }
+    else {
+      $("#load-image").append(step.ui);
+    }
+    $(step.ui.querySelector(".toggle")).on("click", () => {
+      $(step.ui.querySelector('.toggleIcon')).toggleClass('fa-caret-up').toggleClass('fa-caret-down');
+      $(step.ui.querySelectorAll(".cal")).toggleClass("collapse");
+    });
+    
+
+    function saveOptions(e) {
+      e.preventDefault();
+      if (optionsChanged){
+        $(step.ui.querySelector("div.details"))
+          .find("input,select")
+          .each(function(i, input) {
+            $(input)
+              .data('initValue', $(input).val())
+              .data('hasChangedBefore', false);
+            step.options[$(input).attr("name")] = $(input).val();
+          });
+        _sequencer.run({ index: step.index - 1 });
+
+        // modify the url hash
+        urlHash.setUrlHashParameter("steps", _sequencer.toString());
+
+        // disable the save button
+        $(step.ui.querySelector('.btn-save')).prop('disabled', true);
+        optionsChanged = false;
+        changedInputs = 0;
+      }
+    }
+
+    function handleInputValueChange(currentValue, initValue, hasChangedBefore) {
+      var inputChanged = !(isNaN(initValue) || isNaN(currentValue) ? currentValue === initValue : currentValue - initValue === 0);
+      changedInputs += hasChangedBefore ? inputChanged ? 0 : -1 : inputChanged ? 1 : 0;
+      optionsChanged = changedInputs > 0;
+
+      $(step.ui.querySelector('.btn-save')).prop('disabled', !optionsChanged);
+      return inputChanged;
+    }
+
+    var 
+      changedInputs = 0,
+      optionsChanged = false;
+    $(step.ui.querySelector('.input-form')).on('submit', saveOptions);
+    $(step.ui.querySelectorAll('.target')).each(function(i, input) {
+      $(input)
+        .data('initValue', $(input).val())
+        .data('hasChangedBefore', false)
+        .on('input', function() {
+          $(this)
+            .focus()
+            .data('hasChangedBefore',
+              handleInputValueChange(
+                $(this).val(),
+                $(this).data('initValue'),
+                $(this).data('hasChangedBefore')
+            )
+          )
+        })
+    })
+
+
+
+    $('input[type="range"]').on('input', function() {
+        $(this).next().html($(this).val());
+    })
+  }
+
+
+  function onDraw(step) {
+    $(step.ui.querySelector(".load")).show();
+    $(step.ui.querySelector("img")).hide();
+    if( $(step.ui.querySelector(".toggleIcon")).hasClass("fa-caret-down") )
+    {
+      $(step.ui.querySelector(".load-spin")).show();
+    }
+  }
+
+  function onComplete(step) {
+    $(step.ui.querySelector(".load")).hide();
+    $(step.ui.querySelector("img")).show();
+    $(step.ui.querySelector(".load-spin")).hide();
+
+    step.imgElement.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;
+    }
+
+    // TODO: use a generalized version of this
+    function fileExtension(output) {
+      return output.split("/")[1].split(";")[0];
+    }
+
+    for (let index = 0; index < step.linkElements.length; index++) {
+      step.linkElements[index].download = step.name + "." + fileExtension(step.output);
+      step.linkElements[index].target = "_blank";
+    }
+
+    // fill inputs with stored step options
+    if (_sequencer.modulesInfo().hasOwnProperty(step.name)) {
+      var inputs = _sequencer.modulesInfo(step.name).inputs;
+      var outputs = _sequencer.modulesInfo(step.name).outputs;
+      for (var i in inputs) {
+        if (step.options[i] !== undefined) {
+          if (inputs[i].type.toLowerCase() === "input")
+            $(step.ui.querySelector('div[name="' + i + '"] input'))
+              .val(step.options[i])
+              .data('initValue', step.options[i]);
+          if (inputs[i].type.toLowerCase() === "select")
+            $(step.ui.querySelector('div[name="' + i + '"] select'))
+              .val(step.options[i])
+              .data('initValue', step.options[i]);
+        }
+      }
+      for (var i in outputs) {
+        if (step[i] !== undefined)
+          $(step.ui.querySelector('div[name="' + i + '"] input'))
+            .val(step[i]);
+      }
+    }
+  }
+
+  function onRemove(step) {
+    step.ui.remove();
+    $("#steps .container:nth-last-child(1) .insert-step").prop('disabled',true);
+    $('div[class^=imgareaselect-]').remove();
+  }
+
+  function getPreview() {
+    return step.imgElement;
+  }
+
+  function notify(msg,id){
+    if ($('#'+id).length == 0) {
+      var notification = document.createElement('span');
+      notification.innerHTML = ' <i class="fa fa-info-circle" aria-hidden="true"></i> ' + msg ;
+      notification.id = id;
+      notification.classList.add("notification");
+  
+      $('body').append(notification);
+    }
+  
+    $('#'+id).fadeIn(500).delay(200).fadeOut(500);
+  }
+
+  return {
+    getPreview: getPreview,
+    onSetup: onSetup,
+    onComplete: onComplete,
+    onRemove: onRemove,
+    onDraw: onDraw, 
+    notify: notify
+  }
+}
+
+if(typeof window === "undefined"){
+  module.exports={
+    DefaultHtmlStepUi: DefaultHtmlStepUi
+  }
+}
+
+module.exports = DefaultHtmlStepUi;
+
+
+},{"./intermediateHtmlStepUi.js":6,"./urlHash.js":7}],5:[function(require,module,exports){
+function generatePreview(previewStepName, customValues, path, selector) {
+
+    var previewSequencer = ImageSequencer();
+    function insertPreview(src) {
+      var img = document.createElement('img');
+      img.classList.add('img-thumbnail')
+      img.classList.add('no-border');
+      img.src = src;
+      $(img).css("max-width", "200%");
+      $(img).css("transform", "translateX(-20%)");
+      var stepDiv = $('#'+selector+' .row').find('div').each(function() {
+        if ($(this).find('div').attr('data-value') === previewStepName) {
+          $(this).find('div').append(img);
+        }
+      });
+    }
+
+    function loadPreview() {
+      previewSequencer = previewSequencer.addSteps('resize', { resize: "40%" });
+      if (previewStepName === "crop") {
+        previewSequencer.addSteps(previewStepName, customValues).run(insertPreview);
+      }
+      else {
+        previewSequencer.addSteps(previewStepName, { [previewStepName]: customValues }).run(insertPreview);
+      }
+    }
+    previewSequencer.loadImage(path, loadPreview);
+  }
+
+  function updatePreviews(src, selector) {
+    $('#'+selector+' img').remove();
+
+    var previewSequencerSteps = {
+      "brightness": "20",
+      "saturation": "5",
+      "rotate": 90,
+      "contrast": 90,
+      "crop": {
+        "x": 0,
+        "y": 0,
+        "w": "(50%)",
+        "h": "(50%)",
+        "noUI": true
+      }
+    }
+
+    Object.keys(previewSequencerSteps).forEach(function (step, index) {
+      generatePreview(step, Object.values(previewSequencerSteps)[index], src, selector);
+    });
+  }
+
+module.exports = {
+  generatePreview : generatePreview,
+  updatePreviews : updatePreviews
+}
+},{}],6:[function(require,module,exports){
+var urlHash = require('./urlHash.js');
+function IntermediateHtmlStepUi(_sequencer, step, options) {
+  function stepUI() {
+    return '<div class="row insertDiv">\
+        <div class="col-md-6 col-md-offset-2" style="margin-top:5%">\
+        <section id="insertStep" class="panel panel-primary">\
+          <div class="form-inline">\
+            <div class="panel-body">\
+              <p class="info">Select a new module to add to your sequence.</p>\
+              <div class="row center-align radio-group">\
+                <div>\
+                <div class="radio" data-value="brightness">\
+                <i class="fa fa-sun-o fa-4x i-over"></i>\
+              </div>\
+                  <p>Brightness</p>\
+                </div>\
+                <div>\
+                <div class="radio" data-value="contrast">\
+                <i class="fa fa-adjust fa-4x i-over"></i>\
+              </div>\
+                  <p>Contrast</p>\
+                </div>\
+                <div>\
+                <div class="radio" data-value="saturation">\
+                <i class="fa fa-tint fa-4x i-over i-small"></i>\
+              </div>\
+                  <p>Saturation</p>\
+                </div>\
+                <div>\
+                <div class="radio" data-value="rotate">\
+                <i class="fa fa-rotate-right fa-4x i-over"></i>\
+              </div>\
+                  <p>Rotate</p>\
+                </div>\
+                <div>\
+                <div class="radio" data-value="crop">\
+                <i class="fa fa-crop fa-4x i-over"></i>\
+              </div>\
+                  <p>Crop</p>\
+                </div>\
+              </div>\
+              <div class="center-align">\
+                <select class="form-control input-lg" id="selectStep">\
+                  <!-- The default null selection has been appended manually in demo.js\
+                  This is because the options in select are overritten when options are appended.-->\
+                </select>\
+                <button class="btn btn-success btn-lg" name="add" id="add-step-btn">Add Step</button>\
+              </div>\
+            </div>\
+          </div>\
+        </section>\
+        </div>';
+  }
+
+
+  function selectNewStepUi() {
+    var m = $("#insertStep select").val();
+    $("#insertStep .info").html(_sequencer.modulesInfo(m).description);
+    $("#insertStep #add-step-btn").prop("disabled", false);
+  }
+  insertStep = function (id) {
+    var modulesInfo = _sequencer.modulesInfo();
+    var parser = new DOMParser();
+    var addStepUI = stepUI();
+    addStepUI = parser.parseFromString(addStepUI, "text/html").querySelector("div")
+    step.ui
+      .querySelector("div.step")
+      .insertAdjacentElement('afterend',
+        addStepUI
+      );
+      updatePreviews(step.output,'insertStep');
+    var insertStepSelect = $("#insertStep select");
+    insertStepSelect.html("");
+    // Add modules to the insertStep dropdown
+    for (var m in modulesInfo) {
+      if (modulesInfo[m] !== undefined)
+        insertStepSelect.append(
+          '<option value="' + m + '">' + modulesInfo[m].name + "</option>"
+        );
+    }
+
+    $('#insertStep #add-step-btn').prop('disabled', true);
+
+    insertStepSelect.append('<option value="none" disabled selected>More modules...</option>');
+    $('#insertStep .radio-group .radio').on("click", function () {
+      $(this).parent().find('.radio').removeClass('selected');
+      $(this).addClass('selected');
+      newStep = $(this).attr('data-value');
+      insertStepSelect.val(newStep);
+      selectNewStepUi();
+      insert(id);
+      $(this).removeClass('selected');
+    });
+    $(step.ui.querySelector("#insertStep select")).on('change', selectNewStepUi);
+    $(step.ui.querySelector("#insertStep #add-step-btn")).on('click', function () { insert(id) });
+  }
+
+  function insert(id) {
+
+    options = options || {};
+    var insertStepSelect = $("#insertStep select");
+    if (insertStepSelect.val() == "none") return;
+
+    var newStepName = insertStepSelect.val()
+    $('div .insertDiv').remove();
+    var sequenceLength = 1;
+    if (sequencer.sequences[newStepName]) {
+      sequenceLength = sequencer.sequences[newStepName].length;
+    } else if (sequencer.modules[newStepName][1]["length"]) {
+      sequenceLength = sequencer.modules[newStepName][1]["length"];
+    }
+    _sequencer
+      .insertSteps(id + 1, newStepName).run({ index: id });
+
+    // add to URL hash too
+    urlHash.setUrlHashParameter("steps", _sequencer.toString());
+
+  }
+
+  return {
+    insertStep
+  }
+}
+module.exports = IntermediateHtmlStepUi;
+
+
+},{"./urlHash.js":7}],7:[function(require,module,exports){
+function getUrlHashParameter(param) {
+
+  var params = getUrlHashParameters();
+  return params[param];
+
+}
+
+function getUrlHashParameters() {
+
+  var sPageURL = window.location.hash;
+  if (sPageURL) sPageURL = sPageURL.split('#')[1];
+  var pairs = sPageURL.split('&');
+  var object = {};
+  pairs.forEach(function(pair, i) {
+    pair = pair.split('=');
+    if (pair[0] != '') object[pair[0]] = pair[1];
+  });
+  return object;
+}
+
+// accepts an object like { paramName: value, paramName1: value }
+// and transforms to: url.com#paramName=value&paramName1=value
+function setUrlHashParameters(params) {
+
+  var keys = Object.keys(params);
+  var values = Object.values(params);
+  var pairs = [];
+  keys.forEach(function(key, i) {
+    if (key != '') pairs.push(keys[i] + '=' + values[i]);
+  });
+  var hash = pairs.join('&');
+  window.location.hash = hash;
+
+}
+
+function setUrlHashParameter(param, value) {
+
+  var params = getUrlHashParameters();
+  params[param] = value;
+  setUrlHashParameters(params);
+
+}
+
+module.exports =  {
+                    getUrlHashParameter: getUrlHashParameter,
+                    setUrlHashParameter: setUrlHashParameter,
+                    getUrlHashParameters: getUrlHashParameters,
+                    setUrlHashParameters: setUrlHashParameters
+                  }
+
+},{}]},{},[1]);

docs/MODULES.md

@@ -1,7 +1,38 @@
 Documentation of various Modules
 ===
 
-## Crop Module (crop)
+List of Module Documentations
+
+1.  [Crop](#crop-module)
+2.  [Segmented-Colormap](#segmented-colormap-module)
+3.  [FisheyeGl](#fisheyeGl-module)
+4.  [Average](#average-module)
+5.  [Blend](#blend-module)
+6.  [Blur](#blur-module)
+7.  [Brightness](#brightness-module)
+8.  [Channel](#channel-module)
+9.  [Colorbar](#colorbar-module)
+10. [Colormap](#colormap-module)
+11. [Contrast](#contrast-module)
+12. [Convolution](#convolutioon-module)
+13. [DecodeQr](#decodeQr-module)
+14. [Dynamic](#dynamic-module)
+15. [Edge-Detect](#edge-detect-module)
+16. [Gamma-Correction](#gamma-correction-module)
+17. [Gradient](#gradient-module)
+18. [Histogram](#histogram-module)
+19. [Import-image](#import-image-module)
+20. [Invert](#invert-module)
+21. [Ndvi](#ndvi-module)
+22. [Ndvi-Colormap](#ndvi-colormap-module)
+23. [Overlay](#overlay-module)
+24. [Resize](#resize-module)
+25. [Rotate](#rotate-module)
+26. [Saturation](#saturation-module)
+
+
+
+## crop-module
 
 This module is used to crop an image.
 
@@ -24,7 +55,7 @@ Where `options` is an object having the properties `x`, `y`, `w`, `h`. This diag
 * `options.h` : half of image height
 
 
-## Segmented Colormap Module (segmented-colormap)
+## segmented-colormap-module
 
 This module is used to map the pixels of the image to a segmented colormap.
 
@@ -48,7 +79,7 @@ where `options` is an object with the property `colormap`. `options.colormap` ca
 
 * A custom array.
 
-## FisheyeGl (fisheye-gl)
+## fisheyeGl-module
 
 This module is used for correcting Fisheye or Lens Distortion
 
@@ -68,3 +99,333 @@ where `options` is an object with the following properties:
 * scale : The ratio to which the original image is to be scaled (0 to 20; default 1.5)
 * x : Field of View x (0 to 2; default 1)
 * y : Field of View y (0 to 2; default 1)
+
+## average-module
+
+This module is used for averaging all the pixels of the image.
+
+#### Usage
+
+```js
+  sequencer.loadImage('PATH')
+           .addSteps('average',options)
+           .run()
+```
+
+## blend-module
+
+This module is used for blending two images .
+#### Usage
+
+```js
+  sequencer.loadImage('PATH')
+           .addSteps('blend',options)
+           .run()
+```
+
+where `options` is an object with the following properties:
+* offset: step of image with which current image is to be blended(Two steps back is -2, three                steps back is -3 etc; default -2) 
+* func: function used to blend two images (default : function(r1, g1, b1, a1, r2, g2, b2, a2) {            return [ r1, g2, b2, a2 ] })
+
+## blur-module
+
+This module is used for applying a Gaussian blur effect.
+#### Usage
+
+```js
+  sequencer.loadImage('PATH')
+           .addSteps('blur',options)
+           .run()
+```
+
+where `options` is an object with the following property:
+* blur : Intensity of Gaussian blur (0 to 5; default 2)
+
+## brightness-module
+
+This module is used for changing the brightness of the image.
+
+
+#### Usage
+
+```js
+  sequencer.loadImage('PATH')
+           .addSteps('brightness',options)
+           .run()
+```
+
+where `options` is an object with the following property:
+* brightness : brightness of the image in percentage (0 to 100; default 100)
+
+## channel-module
+
+This module is used for forming a grayscale image by applying one of the three primary colors.
+
+#### Usage
+
+```js
+  sequencer.loadImage('PATH')
+           .addSteps('channel',options)
+           .run()
+```
+
+where `options` is an object with the following property:
+* channel : color of the channel (red, green, blue; default green)
+
+## colorbar-module
+
+This module is used for displaying an image with a colorbar.
+
+#### Usage
+
+```js
+  sequencer.loadImage('PATH')
+           .addSteps('colorbar',options)
+           .run()
+```
+
+where `options` is an object with the following properties:
+* colormap : Name of the Colormap(default, greyscale, stretched, fastie, brntogrn, blutoredjet,                 colors16; default: default)
+* x : X-position of the image on which the new image is overlayed (default 0)
+* y : Y-position of the image on which the new image is overlayed (default 0)
+* h : height of resulting cropped image (default : 50% of input image width )
+
+## colormap-module
+
+This module is used for mapping brightness values (average of red, green & blue) to a given color  lookup table, made up of a set of one more color gradients.
+
+#### Usage
+
+```js
+  sequencer.loadImage('PATH')
+           .addSteps('colormap',options)
+           .run()
+```
+
+where `options` is an object with the following property:
+* colormap : Name of the Colormap ( greyscale, stretched, fastie, brntogrn, blutoredjet,                        colors16)
+
+## contrast-module
+
+This module is used for changing the contrast of the image.
+
+#### Usage
+
+```js
+  sequencer.loadImage('PATH')
+           .addSteps('contrast',options)
+           .run()
+```
+
+where `options` is an object with the following property:
+* contrast : contrast for the given image (-100 to 100; default : 70)
+
+## convolution-module
+
+This module is used for performing image-convolution.
+
+#### Usage
+
+```js
+  sequencer.loadImage('PATH')
+           .addSteps('convolution',options)
+           .run()
+```
+
+where `options` is an object with the following properties:
+* constantFactor : a constant factor, multiplies all the kernel values by that factor (default :                     1/9)
+* kernelValues : nine space separated numbers representing the kernel values in left to right and                   top to bottom format(default : 1 1 1 1 1 1 1 1 1)
+
+## decodeQr-module
+
+This module is used for decoding a QR in image (if present).
+
+#### Usage
+
+```js
+  sequencer.loadImage('PATH')
+           .addSteps('decode-qr',options)
+           .run()
+```
+## dynamic-module
+
+This module is used for producing each color channel based on the original image's color.
+
+#### Usage
+
+```js
+  sequencer.loadImage('PATH')
+           .addSteps('dynamic',options)
+           .run()
+```
+
+where `options` is an object with the following properties:
+* red : expression for red channel (R, G, B and A as inputs; default r)
+* green : expression for green channel (R, G, B and A as inputs; default g)
+* blue : expression for blue channel (R, G, B and A as inputs; default b)
+* monochrome: fallback for other channels if none provided (default : r+g+b/3)
+
+## edge-detect-module
+
+This module is used for detecting images.
+#### Usage
+
+```js
+  sequencer.loadImage('PATH')
+           .addSteps('edge-detect',options)
+           .run()
+```
+
+where `options` is an object with the following properties:
+* blur :  Intensity of Gaussian blur (0 to 5; default 2)
+* highThresholdRatio : Upper Threshold Ratio ( default : 0.2)
+* lowThresholdratio : Lower Threshold Ratio ( default : 0.2)
+
+## gamma-correction-module
+
+This module is used for applying gamma correction.
+#### Usage
+
+```js
+  sequencer.loadImage('PATH')
+           .addSteps('gamma-correction',options)
+           .run()
+```
+
+where `options` is an object with the following property:
+* adjustment : Inverse of actual gamma factor (default 0.2)
+
+## gradient-module
+
+This module is used for finding gradient of the image.
+#### Usage
+
+```js
+  sequencer.loadImage('PATH')
+           .addSteps('gradient',options)
+           .run()
+```
+
+## histogram-module
+
+This module is used for calculating histogram of the image.
+#### Usage
+
+```js
+  sequencer.loadImage('PATH')
+           .addSteps('histogram',options)
+           .run()
+```
+
+where `options` is an object with the following property:
+* gradient : boolean value used to toggle gradient along x-axis (true or false; default true)
+
+## import-image-module
+
+This module is used for importing a new image and replacing the original with it.
+#### Usage
+
+```js
+  sequencer.loadImage('PATH')
+           .addSteps('import-image',options)
+           .run()
+```
+
+where `options` is an object with the following property:
+* url : url of the  new image (local image url or data url;default : "./images/monarch.png")
+
+## invert-module
+
+This module is used for inverting the image.
+#### Usage
+
+```js
+  sequencer.loadImage('PATH')
+           .addSteps('invert',options)
+           .run()
+```
+
+## ndvi-module  
+
+This module is used for applying ndvi technique to the image.
+#### Usage
+
+```js
+  sequencer.loadImage('PATH')
+           .addSteps('ndvi',options)
+           .run()
+```
+
+where `options` is an object with the following property:
+* filter : filter for NDVI (blue or red; default red)
+
+## ndvi-colormap-module
+
+This module is used for demonstrating ndvi and colormap properties consecutively.
+#### Usage
+
+```js
+  sequencer.loadImage('PATH')
+           .addSteps('ndvi-colormap',options)
+           .run()
+```
+
+## overlay-module
+
+This module is used for overlaying an Image over another .
+#### Usage
+
+```js
+  sequencer.loadImage('PATH')
+           .addSteps('overlay',options)
+           .run()
+```
+
+where `options` is an object with the following properties:
+* x : X-position of the image on which the new image is overlayed (default 0)
+* y : Y-position of the image on which the new image is overlayed (default 0)
+* offset : offset to the step on which the output of the last step is overlayed (default -2)
+
+## resize-module
+
+This module is used for resizing an image.
+#### Usage
+
+```js
+  sequencer.loadImage('PATH')
+           .addSteps('resize',options)
+           .run()
+```
+
+where `options` is an object with the following property:
+* resize : Percentage value of resize (default 125%)
+
+## rotate-module
+
+This module is used for rotating an image.
+#### Usage
+
+```js
+  sequencer.loadImage('PATH')
+           .addSteps('rotate',options)
+           .run()
+```
+
+where `options` is an object with the following property:
+* rotate : angular value for rotation in degrees (between 0 and 360; default 0)
+
+## saturation-module
+
+This module is used for changing the saturation of the image.
+#### Usage
+
+```js
+  sequencer.loadImage('PATH')
+           .addSteps('saturation',options)
+           .run()
+```
+
+where `options` is an object with the following property:
+* saturation : saturation for the new image (between 0 and 2; default 0)
+
+

examples/demo.css

@@ -23,15 +23,30 @@ h1 {
   color: #445;
 }
 
+.center-align {
+  display: flex;
+  justify-content: center;
+  text-align:center;
+}
+
 .header {
   text-align: center;
 }
 
+.panel {
+  margin-left: 20px;
+  margin-right: 20px;
+}
+
 .nomargin {
   margin: 0 !important;
 }
 
-#dropzone {
+.form-control[type="range"] {
+  padding: 0px 0px;
+}
+
+.dropzone {
   padding: 30px;
   margin: 0 20% 30px;
   border: 4px dashed #ccc;
@@ -44,7 +59,7 @@ h1 {
   background: #eee;
 }
 
-#dropzone input {
+.dropzone input {
   max-width: 100%;
 }
 
@@ -85,11 +100,20 @@ h1 {
   color: #444;
 }
 
+.load-spin{
+  position: absolute;
+  right: 0px;
+}
+
 #addStep {
   max-width: 500px;
   margin: 20px auto;
 }
 
+#add-step-btn{
+  margin-left: 10px;
+}
+
 #addStep .labels {
   text-align: right;
   padding: 6px;
@@ -108,6 +132,121 @@ h1 {
   margin: 10px;
 }
 #save-seq {
+  display: block;
+  margin: 0px 10px 0px 0px;
+  width: 250px;
+}
+.info {
+  padding: 8px;
+  text-align: center;
+}
+#gif {
+  display: block;
+  margin: 0px 0px 0px 10px;
+  width: 250px;
+}
+#dwnld {
+  max-width: 500px;
+  margin: 20px auto;
+  margin-left: 5px;
+}
+
+#gif_element {
   display: block;
   margin: 0 auto;
-}
+  width: 100%;
+  height: auto;
+}
+
+#move-up {
+    position: fixed;
+    bottom: 50px;
+    right: 40px;
+    z-index: 550;
+    display: none;
+    background:transparent;
+    border:none;
+}
+
+#move-up i {
+    font-size:60px;
+    opacity:0.7;
+    color:#BABABA;
+}
+
+.btn-circle{
+  min-width: 80px;
+  min-height: 80px;
+  text-align: center;
+  display: flex !important;
+  flex-direction: column;
+  padding: 6px 0;
+  font-size: 12px;
+  line-height: 1.42;
+  border-radius: 10px;
+  margin-left: 5px;
+  margin-right: 5px;
+}
+.radio{
+  cursor:pointer;
+  overflow: hidden;
+  height: 80px;
+  width: 80px;
+  margin-left: 5px;
+  margin-right: 5px;
+}
+
+.radio-group {
+  margin-bottom: 20px;
+  overflow: auto;
+}
+
+.no-border {
+  border: 0px;
+}
+
+.savesequencemsg{
+  display: none;
+  text-align: center;
+  }
+
+.notification {
+  background-color: #808b96;
+  padding:4px;
+  color:white;
+  border-radius:3px;
+  font-size:2rem;
+  position:fixed;
+  bottom:2px;
+  left:50%;
+  min-width:14rem;
+  text-align:center;
+  display:none;
+  transform: translate(-50%, -50%);
+}
+
+#resetButton {
+  margin-top: 20px;
+}
+
+.i-over {
+  position: absolute;
+  left: 15px;
+  top: 15px;
+  z-index: 2;
+  color: white;
+}
+
+.i-small {
+  left: 25px;
+}
+
+@media all and (max-width: 767px) {
+  .center-align {
+    justify-content: space-between;
+  }
+}
+a.name-header{
+  text-decoration: none;
+  color: #445;
+}

examples/demo.js

@@ -1,3 +1,9 @@
+var defaultHtmlSequencerUi = require('./lib/defaultHtmlSequencerUi.js'),
+    setupCache = require('./lib/cache.js'),
+    DefaultHtmlStepUi = require('./lib/defaultHtmlStepUi.js'),
+    urlHash = require('./lib/urlHash.js'),
+    insertPreview = require('./lib/insertPreview.js');
+
 window.onload = function() {
   sequencer = ImageSequencer();
 
@@ -10,40 +16,196 @@ window.onload = function() {
 
     // Add modules to the addStep dropdown
     for (var m in modulesInfo) {
-      addStepSelect.append(
-        '<option value="' + m + '">' + modulesInfo[m].name + "</option>"
-      );
+      if (modulesInfo[m] && modulesInfo[m].name)
+        addStepSelect.append(
+          '<option value="' + m + '">' + modulesInfo[m].name + "</option>"
+        );
     }
+    // Null option
+    addStepSelect.append('<option value="none" disabled selected>More modules...</option>');
   }
   refreshOptions();
 
+  $(window).on('scroll', scrollFunction);
+
+  function scrollFunction() {
+    var shouldDisplay = $('body').scrollTop() > 20 || $(':root').scrollTop() > 20;
+
+    $('#move-up').css({
+       display: shouldDisplay ? 'block' : 'none'
+    });
+  }
+
+
+  function topFunction() {
+    $('body').animate({scrollTop: 0});
+    $(':root').animate({scrollTop: 0});
+  }
+
+  $('#move-up').on("click",topFunction);
+
+
   // UI for each step:
   sequencer.setUI(DefaultHtmlStepUi(sequencer));
 
   // UI for the overall demo:
-  var ui = DefaultHtmlSequencerUi(sequencer);
+  var ui = defaultHtmlSequencerUi(sequencer);
 
-  sequencer.loadImage("images/tulips.png", ui.onLoad);
+  // find any `src` parameters in URL hash and attempt to source image from them and run the sequencer
+  if (urlHash.getUrlHashParameter('src')) {
+    sequencer.loadImage(urlHash.getUrlHashParameter('src'), ui.onLoad);
+  } else {
+    sequencer.loadImage("images/tulips.png", ui.onLoad);
+  }
+
+  var resetSequence = function(){
+    var r=confirm("Do you want to reset the sequence?");
+    if (r)
+      window.location = "/";
+  }
 
   $("#addStep select").on("change", ui.selectNewStepUi);
-  $("#addStep button").on("click", ui.addStepUi);
+  $("#addStep #add-step-btn").on("click", ui.addStepUi);
+  $("#resetButton").on("click",resetSequence);
+
+  //Module button radio selection
+  $('.radio-group .radio').on("click", function() {
+    $(this).parent().find('.radio').removeClass('selected');
+    $(this).addClass('selected');
+    newStep = $(this).attr('data-value');
+    //$("#addStep option[value=" + newStep + "]").attr('selected', 'selected');
+    $("#addStep select").val(newStep);
+    ui.selectNewStepUi();
+    ui.addStepUi();
+    $(this).removeClass('selected');
+  });
+
+  $('#download-btn').click(function() {
+    $('.step-thumbnail:last()').trigger("click");
+    return false;
+  });
+
+  function displayMessageOnSaveSequence(){
+      $(".savesequencemsg").fadeIn();
+      setTimeout(function() {
+          $(".savesequencemsg").fadeOut();
+      }, 1000);
+    }
+
   $('body').on('click', 'button.remove', ui.removeStepUi);
   $('#save-seq').click(() => {
-    sequencer.saveSequence(window.prompt("Please give a name to your sequence..."), sequencer.toString());
-    sequencer.loadModules();
-    refreshOptions();
+    var result = window.prompt("Please give a name to your sequence... (Saved sequence will only be available in this browser).");
+    if(result){
+      result = result + " (local)";
+      sequencer.saveSequence(result, sequencer.toString());
+      sequencer.loadModules();
+      displayMessageOnSaveSequence();
+      refreshOptions();
+    }
+  });
+
+  var isWorkingOnGifGeneration = false;
+
+  $('.js-view-as-gif').on('click', function(event) {
+    // Prevent user from triggering generation multiple times
+    if (isWorkingOnGifGeneration) return;
+
+    isWorkingOnGifGeneration = true;
+
+    var button = event.target;
+    button.disabled = true;
+
+
+    try {
+      // Select all images from previous steps
+      var imgs = document.getElementsByClassName("step-thumbnail");
+
+      var imgSrcs = [];
+
+      for (var i = 0; i < imgs.length; i++) {
+        imgSrcs.push(imgs[i].src);
+      }
+
+      var options = {
+        'gifWidth': imgs[0].width,
+        'gifHeight': imgs[0].height,
+        'images': imgSrcs,
+        'frameDuration': 7,
+      }
+
+      gifshot.createGIF(options, function(obj) {
+        if (!obj.error) {
+          // Final gif encoded with base64 format
+          var image = obj.image;
+          var animatedImage = document.createElement('img');
+
+          animatedImage.id = "gif_element";
+          animatedImage.src = image;
+
+
+          var modal = $('#js-download-gif-modal');
+
+          $("#js-download-as-gif-button").one("click", function() {
+            // Trigger download
+            download(image, "index.gif", "image/gif");
+
+            // Close modal
+            modal.modal('hide');
+          })
+
+          var gifContainer = document.getElementById("js-download-modal-gif-container");
+
+          // Clear previous results
+          gifContainer.innerHTML = '';
+
+          // Insert image
+          gifContainer.appendChild(animatedImage);
+
+
+          // Open modal
+          modal.modal();
+
+          button.disabled = false;
+          isWorkingOnGifGeneration = false;
+        }
+      });
+    }
+    catch (e) {
+      console.error(e);
+      button.disabled = false;
+      isWorkingOnGifGeneration = false;
+
+    }
   });
 
   // image selection and drag/drop handling from examples/lib/imageSelection.js
   sequencer.setInputStep({
     dropZoneSelector: "#dropzone",
     fileInputSelector: "#fileInput",
+    takePhotoSelector: "#take-photo",
     onLoad: function onFileReaderLoad(progress) {
       var reader = progress.target;
       var step = sequencer.images.image1.steps[0];
+      var util=IntermediateHtmlStepUi(sequencer);
       step.output.src = reader.result;
       sequencer.run({ index: 0 });
       step.options.step.imgElement.src = reader.result;
+      insertPreview.updatePreviews(reader.result,'addStep');
+      insertPreview.updatePreviews(sequencer.images.image1.steps[0].options.step.imgElement.src,'insertStep');
+    },
+    onTakePhoto: function (url) {
+      var step = sequencer.images.image1.steps[0];
+      step.output.src = url;
+      sequencer.run({ index: 0 });
+      step.options.step.imgElement.src = url;
     }
   });
-};
+
+  setupCache();
+
+  if (urlHash.getUrlHashParameter('src')) {
+    insertPreview.updatePreviews(urlHash.getUrlHashParameter('src'),'addStep');
+  } else {
+    insertPreview.updatePreviews("images/tulips.png",'addStep');
+  }
+};

examples/index.html

@@ -7,8 +7,9 @@
 
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="content-type" content="text/html; charset=UTF8">
+  <meta name="theme-color" content="#428bca">
   <link rel="icon" sizes="192x192" href="../icons/ic_192.png">
-
+  <link rel="manifest" href="manifest.json">
 
   <title>Image Sequencer</title>
 
@@ -16,12 +17,15 @@
   <script src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
   <script src="../src/ui/prepareDynamic.js"></script>
   <script src="../dist/image-sequencer.js" charset="utf-8"></script>
-  <script src="lib/urlHash.js" charset="utf-8"></script>
-  <script src="lib/defaultHtmlStepUi.js" charset="utf-8"></script>
-  <script src="lib/defaultHtmlSequencerUi.js" charset="utf-8"></script>
-  <script src="demo.js" charset="utf-8"></script>
+  <script src="../dist/image-sequencer-ui.js" charset="utf-8"></script>
   <!-- for crop module: -->
   <script src="../node_modules/imgareaselect/jquery.imgareaselect.dev.js"></script>
+  <script src="../node_modules/gifshot/dist/gifshot.min.js" type="text/javascript"></script>
+
+  <!-- Download.js for large files -->
+  <script src="../node_modules/downloadjs/download.min.js" type="text/javascript"/>
+
+  <script src="lib/scrollToTop.js"></script>
 
 </head>
 
@@ -30,8 +34,7 @@
 
   <link href="../node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
   <link href="../node_modules/font-awesome/css/font-awesome.min.css" rel="stylesheet">
-  <link href="../node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
-  <link href="../node_modules/font-awesome/css/font-awesome.min.css" rel="stylesheet">
+
   <!-- for crop module: -->
   <link href="../node_modules/imgareaselect/distfiles/css/imgareaselect-default.css" rel="stylesheet">
   <link rel="stylesheet" href="demo.css">
@@ -39,7 +42,7 @@
   <div class="container-fluid">
 
     <header class="text-center">
-      <h1>Image Sequencer</h1>
+      <h1><a href="/" target='_blank' class="name-header">Image Sequencer</a></h1>
       <p>
         A pure JavaScript sequential image processing system, inspired by storyboards. Instead of modifying the original image, it
         creates a new image at each step in a sequence.
@@ -49,42 +52,134 @@
         Open Source
         <a href="https://github.com/publiclab/image-sequencer">
           <i class="fa fa-github"></i>
-        </a> by
-        <a href="https://publiclab.org">Public Lab</a>
+        </a>
+       by <a href= "https://publiclab.org" title = "Publiclab Website"><i class = "fa fa-globe"></i> Publiclab</a>
       </p>
     </header>
 
-    <div id="dropzone">
+    <div id="dropzone" class="dropzone">
       <p>
         <i>Select or drag in an image to start!</i>
       </p>
       <center>
-        <input type="file" id="fileInput" value="">
+        <input type="file" id="fileInput" value="" accept="image/*"><br />
+        <button type="button" id="take-photo">Take a Photo</button>
+        <video  id="video" width="400" height="300" style="display:none"></video>
+        <a href="#" id="capture" style="display:none" class="btn btn-primary btn-md">Click Picture</a>
+        <a href="#" id="close" style="display:none" class="btn btn-default btn-md">Close</a>
+        <canvas id="canvas" width="400" height="300" style="display:none"></canvas>
       </center>
     </div>
 
-    <section id="steps" class="row"></section>
+    <section id="steps" class="row">
+      <div id="load-image"></div>
+    </section>
 
     <hr />
-
+  <p class = "alert alert-success savesequencemsg">Saved Sequence Success. Sequence can be found among other modules.</p>
+  <div class="row">
+    <div class="col-sm-8">
     <section id="addStep" class="panel panel-primary">
       <div class="form-inline">
         <div class="panel-body">
-          <div style="text-align:center;">
-            <select class="form-control input-lg" id="selectStep">
-              <option value="none" disabled selected>Select a new step...</option>
-            </select>
-            <button class="btn btn-success btn-lg" name="add">Add Step</button>
+          <p class="info">Select a new module to add to your sequence.</p>
+          <div class="row center-align radio-group">
+            <div>
+              <div class="radio" data-value="brightness">
+                <i class="fa fa-sun-o fa-4x i-over"></i>
+              </div>
+              <p>Brightness</p>
+            </div>
+            <div>
+              <div class="radio" data-value="contrast">
+                <i class="fa fa-adjust fa-4x i-over"></i>
+              </div>
+              <p>Contrast</p>
+            </div>
+            <div>
+              <div class="radio" data-value="saturation">
+                <i class="fa fa-tint fa-4x i-over i-small"></i>
+              </div>
+              <p>Saturation</p>
+            </div>
+            <div>
+              <div class="radio" data-value="rotate">
+                <i class="fa fa-rotate-right fa-4x i-over"></i>
+              </div>
+              <p>Rotate</p>
+            </div>
+            <div>
+              <div class="radio" data-value="crop">
+                <i class="fa fa-crop fa-4x i-over"></i>
+              </div>
+              <p>Crop</p>
+            </div>
+          </div>
+          <div class="center-align">
+            <select class="form-control input-lg" id="selectStep">
+              <!-- The default null selection has been appended manually in demo.js
+              This is because the options in select are overritten when options are appended.-->
+            </select>
+            <button class="btn btn-success btn-lg" name="add" id="add-step-btn">Add Step</button>
           </div>
-          <br />
-          <p class="info" style="padding:8px;">Select a new module to add to your sequence.</p>
         </div>
       </div>
     </section>
-    <button class="btn btn-primary btn-lg" name="save-sequence" id="save-seq">Save Sequence</button>
 
+    <section id="sequence-actions" class="panel">
+      <div class="panel-body">
+
+        <div class="row center-align">
+          <button class="btn btn-primary btn-block btn-lg" name="save-sequence" id="save-seq">Save Sequence</button>
+          <button class="btn btn-primary btn-block btn-lg js-view-as-gif" id="gif">View GIF</button>
+        </div>
+
+
+        <div class="modal fade" id="js-download-gif-modal" tabindex="-1" role="dialog">
+          <div class="modal-dialog" role="document">
+            <div class="modal-content">
+              <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+                <h4 class="modal-title">Your gif is ready</h4>
+              </div>
+              <div class="modal-body">
+                <div id="js-download-modal-gif-container">
+                  <!-- Gif should appear here -->
+                </div>
+              </div>
+              <div class="modal-footer">
+                <button type="button" class="btn btn-default" data-dismiss="modal">Done</button>
+
+                <button id="js-download-as-gif-button" class="btn btn-primary">Download</button>
+              </div>
+            </div>
+          </div>
+        </div>
+
+      </div>
+    </section>
+
+    </div>
+    <div class="col-sm-4">
+    <section id="dwnld" class="panel panel-primary">
+      <div class="form-inline">
+        <div class="panel-body">
+          <div style="text-align:center;">
+            <button class="btn btn-success btn-lg" id="download-btn" name="download">Download PNG</button>
+            <button id="resetButton" class="btn btn-default btn-lg">Clear All Steps</button>
+          </div>
+        </div>
+      </div>
+    </section>
+    </div>
   </div>
 
+  <footer>
+    <hr style="margin:20px;"><center><a class="color:grey;" id="clear-cache">Clear offline cache</a></center>
+  </footer>
+
+  <button id="move-up"><i class="fa fa-arrow-circle-o-up"></i></button>
+
   <script type="text/javascript">
     $(function() {
       var sequencer;
@@ -93,4 +188,4 @@
 
 </body>
 
-</html>
+</html>

examples/lib/cache.js

@@ -0,0 +1,39 @@
+var setupCache = function() {
+  if ('serviceWorker' in navigator) {
+    navigator.serviceWorker.register('sw.js', { scope: '/examples/' })
+      .then(function(registration) {
+        const installingWorker = registration.installing;
+        installingWorker.onstatechange = () => {
+          console.log(installingWorker)
+          if (installingWorker.state === 'installed') {
+            location.reload();
+          }
+        }
+        console.log('Registration successful, scope is:', registration.scope);
+      })
+      .catch(function(error) {
+        console.log('Service worker registration failed, error:', error);
+      });
+  }
+
+  if ('serviceWorker' in navigator) {
+    caches.keys().then(function(cacheNames) {
+      cacheNames.forEach(function(cacheName) {
+        $("#clear-cache").append(" " + cacheName);
+      });
+    });
+  }
+
+  $("#clear-cache").click(function() {
+    if ('serviceWorker' in navigator) {
+      caches.keys().then(function(cacheNames) {
+        cacheNames.forEach(function(cacheName) {
+          caches.delete(cacheName);
+        });
+      });
+    }
+    location.reload();
+  });
+}
+
+module.exports = setupCache;

examples/lib/defaultHtmlSequencerUi.js

@@ -1,3 +1,4 @@
+var urlHash = require('./urlHash.js');
 function DefaultHtmlSequencerUi(_sequencer, options) {
 
   options = options || {};
@@ -8,31 +9,34 @@ function DefaultHtmlSequencerUi(_sequencer, options) {
   function onLoad() {
     importStepsFromUrlHash();
     if (!$('#selectStep').val())
-      $(addStepSel + " button").prop("disabled", true);
+      $(addStepSel + " #add-step-btn").prop("disabled", true);
+      handleSaveSequence();
   }
 
   // look up needed steps from Url Hash:
   function importStepsFromUrlHash() {
-    var hash = getUrlHashParameter("steps");
+    var hash = urlHash.getUrlHashParameter("steps");
 
     if (hash) {
       _sequencer.importString(hash);
       _sequencer.run({ index: 0 });
     }
-    setUrlHashParameter("steps", sequencer.toString());
+    urlHash.setUrlHashParameter("steps", sequencer.toString());
   }
 
   function selectNewStepUi() {
     var m = $(addStepSel + " select").val();
     $(addStepSel + " .info").html(_sequencer.modulesInfo(m).description);
-    $(addStepSel + " button").prop("disabled", false);
+    $(addStepSel + " #add-step-btn").prop("disabled", false);
   }
 
   function removeStepUi() {
     var index = $(removeStepSel).index(this) + 1;
     sequencer.removeSteps(index).run({ index: index - 1 });
     // remove from URL hash too
-    setUrlHashParameter("steps", sequencer.toString());
+    urlHash.setUrlHashParameter("steps", sequencer.toString());
+    //disable save-sequence button if all steps are removed
+    handleSaveSequence();
   }
 
   function addStepUi() {
@@ -54,9 +58,21 @@ function DefaultHtmlSequencerUi(_sequencer, options) {
     _sequencer
       .addSteps(newStepName, options)
       .run({ index: _sequencer.images.image1.steps.length - sequenceLength - 1 });
+      $(addStepSel + " .info").html("Select a new module to add to your sequence.");
+
+    //enable save-sequence button if disabled initially
+    handleSaveSequence();
 
     // add to URL hash too
-    setUrlHashParameter("steps", _sequencer.toString());
+    urlHash.setUrlHashParameter("steps", _sequencer.toString());
+  }
+
+  function handleSaveSequence(){
+    var stepCount=sequencer.images.image1.steps.length;
+    if(stepCount<2)
+    $(" #save-seq").prop("disabled", true);
+    else
+    $(" #save-seq").prop("disabled", false);
   }
 
   return {
@@ -67,3 +83,6 @@ function DefaultHtmlSequencerUi(_sequencer, options) {
     addStepUi: addStepUi
   }
 }
+
+module.exports = DefaultHtmlSequencerUi;
+

examples/lib/defaultHtmlStepUi.js

@@ -7,45 +7,59 @@
 // The variable 'step' stores useful data like input and
 // output values, step information.
 // See documetation for more details.
-function DefaultHtmlStepUi(_sequencer, options) {
 
+var intermediateHtmlStepUi = require('./intermediateHtmlStepUi.js');
+var urlHash = require('./urlHash.js');
+
+function DefaultHtmlStepUi(_sequencer, options) {
+  
   options = options || {};
   var stepsEl = options.stepsEl || document.querySelector("#steps");
   var selectStepSel = options.selectStepSel = options.selectStepSel || "#selectStep";
 
-  function onSetup(step) {
+  function onSetup(step, stepOptions) {
     if (step.options && step.options.description)
       step.description = step.options.description;
 
     step.ui =
       '\
+      <div class="container">\
     <div class="row step">\
+    <form class="input-form">\
     <div class="col-md-4 details">\
-    <h3>' +
-      step.name +
-      "</h3>\
-    <p><i>" +
+    <h3>\
+    <span class = "toggle">' +step.name + ' <i class="fa fa-caret-up toggleIcon" aria-hidden="true"></i></span>' +
+    '<span class="load-spin" style="display:none;"><i class="fa fa-circle-o-notch fa-spin"></i></span>' +
+    '</h3><div class="cal"><p><i>"'+
       (step.description || "") +
-      '</i></p>\
+      '</i></p></div>\
     </div>\
-    <div class="col-md-8">\
+    </form>\
+    <div class="col-md-8 cal">\
     <div class="load" style="display:none;"><i class="fa fa-circle-o-notch fa-spin"></i></div>\
-    <a><img alt="" style="max-width=100%" class="img-thumbnail" /></a>\
+    <a><img alt="" style="max-width=100%" class="img-thumbnail step-thumbnail"/></a>\
     </div>\
     </div>\
-    ';
+    </div>\
+    </div>';
 
     var tools =
-      '<div class="tools btn-group">\
-       <button confirm="Are you sure?" class="remove btn btn btn-default">\
-         <i class="fa fa-trash"></i>\
-       </button>\
+    '<div class="cal"><div class="tools btn-group">\
+    <button confirm="Are you sure?" class="remove btn btn btn-default">\
+      <i class="fa fa-trash"></i>\
+    </button>\
+    <button class="btn  insert-step" style="margin-left:10px;border-radius:6px;background-color:#fff;border:solid #bababa 1.1px;" >\
+      <i class="fa fa-plus"></i> Add\
+    </button>\
+    </div>\
     </div>';
 
+    var util = intermediateHtmlStepUi(_sequencer, step);
+
     var parser = new DOMParser();
     step.ui = parser.parseFromString(step.ui, "text/html");
-    step.ui = step.ui.querySelector("div.row");
-    step.linkElement = step.ui.querySelector("a");
+    step.ui = step.ui.querySelector("div.container");
+    step.linkElements = step.ui.querySelectorAll("a");
     step.imgElement = step.ui.querySelector("a img");
 
     if (_sequencer.modulesInfo().hasOwnProperty(step.name)) {
@@ -66,12 +80,28 @@ function DefaultHtmlStepUi(_sequencer, options) {
           }
           html += "</select>";
         } else {
+          let paramVal = step.options[paramName] || inputDesc.default;
           html =
             '<input class="form-control target" type="' +
             inputDesc.type +
             '" name="' +
             paramName +
-            '">';
+            '" value="' +
+            paramVal +
+            '" placeholder ="' +
+            (inputDesc.placeholder || "");
+
+          if (inputDesc.type.toLowerCase() == "range") {
+            html +=
+              '"min="' +
+              inputDesc.min +
+              '"max="' +
+              inputDesc.max +
+              '"step="' +
+              inputDesc.step + '">' + '<span>' + paramVal + '</span>';
+
+          }
+          else html += '">';
         }
 
         var div = document.createElement("div");
@@ -79,7 +109,7 @@ function DefaultHtmlStepUi(_sequencer, options) {
         div.setAttribute("name", paramName);
         var description = inputs[paramName].desc || paramName;
         div.innerHTML =
-          "<div class='det'>\
+          "<div class='det cal'>\
                            <label for='" +
           paramName +
           "'>" +
@@ -92,103 +122,195 @@ function DefaultHtmlStepUi(_sequencer, options) {
         step.ui.querySelector("div.details").appendChild(div);
       }
 
-      function toggleSaveButton(){
-        $(step.ui.querySelector("div.details .btn-save")).prop("disabled",false);
-      }
-
-      $(step.ui.querySelector(".target")).change(toggleSaveButton);
-
       $(step.ui.querySelector("div.details")).append(
-        "<p><button class='btn btn-default btn-save' disabled = 'true' >Save</button><span> Press save to see changes</span></p>"
+        '<div class="cal"><p><button type="submit" class="btn btn-default btn-save" disabled = "true" >Apply</button><span> Press apply to see changes</span></p></div>'
       );
 
-      function saveOptions() {
-        $(step.ui.querySelector("div.details"))
-          .find("input,select")
-          .each(function(i, input) {
-            step.options[$(input).attr("name")] = input.value;
-          });
-        _sequencer.run({ index: step.index - 1 });
-
-        // modify the url hash
-        setUrlHashParameter("steps", _sequencer.toString());
-        // disable the save button
-        $(step.ui.querySelector("div.details .btn-save")).prop("disabled",true);
-      }
-
-      // on clicking Save in the details pane of the step
-      $(step.ui.querySelector("div.details .btn-save")).click(saveOptions);
+      
     }
 
-    if (step.name != "load-image")
+    if (step.name != "load-image") {
       step.ui
         .querySelector("div.details")
         .appendChild(
           parser.parseFromString(tools, "text/html").querySelector("div")
         );
+      $(step.ui.querySelectorAll(".remove")).on('click', function() {notify('Step Removed','remove-notification')});  
+      $(step.ui.querySelectorAll(".insert-step")).on('click', function() { util.insertStep(step.ID) });
 
-    stepsEl.appendChild(step.ui);
+      // Insert the step's UI in the right place
+      if (stepOptions.index == _sequencer.images.image1.steps.length) {
+        stepsEl.appendChild(step.ui);
+        $("#steps .container:nth-last-child(1) .insert-step").prop('disabled',true);
+        if($("#steps .container:nth-last-child(2)"))
+        $("#steps .container:nth-last-child(2) .insert-step").prop('disabled',false);
+      } else {
+        stepsEl.insertBefore(step.ui, $(stepsEl).children()[stepOptions.index]);
+      }
+    }
+    else {
+      $("#load-image").append(step.ui);
+    }
+    $(step.ui.querySelector(".toggle")).on("click", () => {
+      $(step.ui.querySelector('.toggleIcon')).toggleClass('fa-caret-up').toggleClass('fa-caret-down');
+      $(step.ui.querySelectorAll(".cal")).toggleClass("collapse");
+    });
+    
+
+    function saveOptions(e) {
+      e.preventDefault();
+      if (optionsChanged){
+        $(step.ui.querySelector("div.details"))
+          .find("input,select")
+          .each(function(i, input) {
+            $(input)
+              .data('initValue', $(input).val())
+              .data('hasChangedBefore', false);
+            step.options[$(input).attr("name")] = $(input).val();
+          });
+        _sequencer.run({ index: step.index - 1 });
+
+        // modify the url hash
+        urlHash.setUrlHashParameter("steps", _sequencer.toString());
+
+        // disable the save button
+        $(step.ui.querySelector('.btn-save')).prop('disabled', true);
+        optionsChanged = false;
+        changedInputs = 0;
+      }
+    }
+
+    function handleInputValueChange(currentValue, initValue, hasChangedBefore) {
+      var inputChanged = !(isNaN(initValue) || isNaN(currentValue) ? currentValue === initValue : currentValue - initValue === 0);
+      changedInputs += hasChangedBefore ? inputChanged ? 0 : -1 : inputChanged ? 1 : 0;
+      optionsChanged = changedInputs > 0;
+
+      $(step.ui.querySelector('.btn-save')).prop('disabled', !optionsChanged);
+      return inputChanged;
+    }
+
+    var 
+      changedInputs = 0,
+      optionsChanged = false;
+    $(step.ui.querySelector('.input-form')).on('submit', saveOptions);
+    $(step.ui.querySelectorAll('.target')).each(function(i, input) {
+      $(input)
+        .data('initValue', $(input).val())
+        .data('hasChangedBefore', false)
+        .on('input', function() {
+          $(this)
+            .focus()
+            .data('hasChangedBefore',
+              handleInputValueChange(
+                $(this).val(),
+                $(this).data('initValue'),
+                $(this).data('hasChangedBefore')
+            )
+          )
+        })
+    })
+
+
+
+    $('input[type="range"]').on('input', function() {
+        $(this).next().html($(this).val());
+    })
   }
 
+
   function onDraw(step) {
     $(step.ui.querySelector(".load")).show();
     $(step.ui.querySelector("img")).hide();
+    if( $(step.ui.querySelector(".toggleIcon")).hasClass("fa-caret-down") )
+    {
+      $(step.ui.querySelector(".load-spin")).show();
+    }
   }
 
   function onComplete(step) {
     $(step.ui.querySelector(".load")).hide();
     $(step.ui.querySelector("img")).show();
+    $(step.ui.querySelector(".load-spin")).hide();
 
     step.imgElement.src = step.output;
-    step.linkElement.href = 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;
+    }
 
     // TODO: use a generalized version of this
     function fileExtension(output) {
       return output.split("/")[1].split(";")[0];
     }
 
-    step.linkElement.download = step.name + "." + fileExtension(step.output);
-    step.linkElement.target = "_blank";
+    for (let index = 0; index < step.linkElements.length; index++) {
+      step.linkElements[index].download = step.name + "." + fileExtension(step.output);
+      step.linkElements[index].target = "_blank";
+    }
 
     // fill inputs with stored step options
     if (_sequencer.modulesInfo().hasOwnProperty(step.name)) {
       var inputs = _sequencer.modulesInfo(step.name).inputs;
       var outputs = _sequencer.modulesInfo(step.name).outputs;
       for (var i in inputs) {
-        if (
-          step.options[i] !== undefined &&
-          inputs[i].type.toLowerCase() === "input"
-        )
-          step.ui.querySelector('div[name="' + i + '"] input').value =
-            step.options[i];
-        if (
-          step.options[i] !== undefined &&
-          inputs[i].type.toLowerCase() === "select"
-        )
-          step.ui.querySelector('div[name="' + i + '"] select').value =
-            step.options[i];
+        if (step.options[i] !== undefined) {
+          if (inputs[i].type.toLowerCase() === "input")
+            $(step.ui.querySelector('div[name="' + i + '"] input'))
+              .val(step.options[i])
+              .data('initValue', step.options[i]);
+          if (inputs[i].type.toLowerCase() === "select")
+            $(step.ui.querySelector('div[name="' + i + '"] select'))
+              .val(step.options[i])
+              .data('initValue', step.options[i]);
+        }
       }
       for (var i in outputs) {
         if (step[i] !== undefined)
-          step.ui.querySelector('div[name="' + i + '"] input').value =
-            step[i];
+          $(step.ui.querySelector('div[name="' + i + '"] input'))
+            .val(step[i]);
       }
     }
   }
 
   function onRemove(step) {
     step.ui.remove();
+    $("#steps .container:nth-last-child(1) .insert-step").prop('disabled',true);
+    $('div[class^=imgareaselect-]').remove();
   }
 
   function getPreview() {
     return step.imgElement;
   }
 
+  function notify(msg,id){
+    if ($('#'+id).length == 0) {
+      var notification = document.createElement('span');
+      notification.innerHTML = ' <i class="fa fa-info-circle" aria-hidden="true"></i> ' + msg ;
+      notification.id = id;
+      notification.classList.add("notification");
+  
+      $('body').append(notification);
+    }
+  
+    $('#'+id).fadeIn(500).delay(200).fadeOut(500);
+  }
+
   return {
     getPreview: getPreview,
     onSetup: onSetup,
     onComplete: onComplete,
     onRemove: onRemove,
-    onDraw: onDraw
+    onDraw: onDraw, 
+    notify: notify
   }
 }
+
+if(typeof window === "undefined"){
+  module.exports={
+    DefaultHtmlStepUi: DefaultHtmlStepUi
+  }
+}
+
+module.exports = DefaultHtmlStepUi;
+

examples/lib/insertPreview.js

@@ -0,0 +1,55 @@
+function generatePreview(previewStepName, customValues, path, selector) {
+
+    var previewSequencer = ImageSequencer();
+    function insertPreview(src) {
+      var img = document.createElement('img');
+      img.classList.add('img-thumbnail')
+      img.classList.add('no-border');
+      img.src = src;
+      $(img).css("max-width", "200%");
+      $(img).css("transform", "translateX(-20%)");
+      var stepDiv = $('#'+selector+' .row').find('div').each(function() {
+        if ($(this).find('div').attr('data-value') === previewStepName) {
+          $(this).find('div').append(img);
+        }
+      });
+    }
+
+    function loadPreview() {
+      previewSequencer = previewSequencer.addSteps('resize', { resize: "40%" });
+      if (previewStepName === "crop") {
+        previewSequencer.addSteps(previewStepName, customValues).run(insertPreview);
+      }
+      else {
+        previewSequencer.addSteps(previewStepName, { [previewStepName]: customValues }).run(insertPreview);
+      }
+    }
+    previewSequencer.loadImage(path, loadPreview);
+  }
+
+  function updatePreviews(src, selector) {
+    $('#'+selector+' img').remove();
+
+    var previewSequencerSteps = {
+      "brightness": "20",
+      "saturation": "5",
+      "rotate": 90,
+      "contrast": 90,
+      "crop": {
+        "x": 0,
+        "y": 0,
+        "w": "(50%)",
+        "h": "(50%)",
+        "noUI": true
+      }
+    }
+
+    Object.keys(previewSequencerSteps).forEach(function (step, index) {
+      generatePreview(step, Object.values(previewSequencerSteps)[index], src, selector);
+    });
+  }
+
+module.exports = {
+  generatePreview : generatePreview,
+  updatePreviews : updatePreviews
+}

examples/lib/intermediateHtmlStepUi.js

@@ -0,0 +1,125 @@
+var urlHash = require('./urlHash.js');
+function IntermediateHtmlStepUi(_sequencer, step, options) {
+  function stepUI() {
+    return '<div class="row insertDiv">\
+        <div class="col-md-6 col-md-offset-2" style="margin-top:5%">\
+        <section id="insertStep" class="panel panel-primary">\
+          <div class="form-inline">\
+            <div class="panel-body">\
+              <p class="info">Select a new module to add to your sequence.</p>\
+              <div class="row center-align radio-group">\
+                <div>\
+                <div class="radio" data-value="brightness">\
+                <i class="fa fa-sun-o fa-4x i-over"></i>\
+              </div>\
+                  <p>Brightness</p>\
+                </div>\
+                <div>\
+                <div class="radio" data-value="contrast">\
+                <i class="fa fa-adjust fa-4x i-over"></i>\
+              </div>\
+                  <p>Contrast</p>\
+                </div>\
+                <div>\
+                <div class="radio" data-value="saturation">\
+                <i class="fa fa-tint fa-4x i-over i-small"></i>\
+              </div>\
+                  <p>Saturation</p>\
+                </div>\
+                <div>\
+                <div class="radio" data-value="rotate">\
+                <i class="fa fa-rotate-right fa-4x i-over"></i>\
+              </div>\
+                  <p>Rotate</p>\
+                </div>\
+                <div>\
+                <div class="radio" data-value="crop">\
+                <i class="fa fa-crop fa-4x i-over"></i>\
+              </div>\
+                  <p>Crop</p>\
+                </div>\
+              </div>\
+              <div class="center-align">\
+                <select class="form-control input-lg" id="selectStep">\
+                  <!-- The default null selection has been appended manually in demo.js\
+                  This is because the options in select are overritten when options are appended.-->\
+                </select>\
+                <button class="btn btn-success btn-lg" name="add" id="add-step-btn">Add Step</button>\
+              </div>\
+            </div>\
+          </div>\
+        </section>\
+        </div>';
+  }
+
+
+  function selectNewStepUi() {
+    var m = $("#insertStep select").val();
+    $("#insertStep .info").html(_sequencer.modulesInfo(m).description);
+    $("#insertStep #add-step-btn").prop("disabled", false);
+  }
+  insertStep = function (id) {
+    var modulesInfo = _sequencer.modulesInfo();
+    var parser = new DOMParser();
+    var addStepUI = stepUI();
+    addStepUI = parser.parseFromString(addStepUI, "text/html").querySelector("div")
+    step.ui
+      .querySelector("div.step")
+      .insertAdjacentElement('afterend',
+        addStepUI
+      );
+      updatePreviews(step.output,'insertStep');
+    var insertStepSelect = $("#insertStep select");
+    insertStepSelect.html("");
+    // Add modules to the insertStep dropdown
+    for (var m in modulesInfo) {
+      if (modulesInfo[m] !== undefined)
+        insertStepSelect.append(
+          '<option value="' + m + '">' + modulesInfo[m].name + "</option>"
+        );
+    }
+
+    $('#insertStep #add-step-btn').prop('disabled', true);
+
+    insertStepSelect.append('<option value="none" disabled selected>More modules...</option>');
+    $('#insertStep .radio-group .radio').on("click", function () {
+      $(this).parent().find('.radio').removeClass('selected');
+      $(this).addClass('selected');
+      newStep = $(this).attr('data-value');
+      insertStepSelect.val(newStep);
+      selectNewStepUi();
+      insert(id);
+      $(this).removeClass('selected');
+    });
+    $(step.ui.querySelector("#insertStep select")).on('change', selectNewStepUi);
+    $(step.ui.querySelector("#insertStep #add-step-btn")).on('click', function () { insert(id) });
+  }
+
+  function insert(id) {
+
+    options = options || {};
+    var insertStepSelect = $("#insertStep select");
+    if (insertStepSelect.val() == "none") return;
+
+    var newStepName = insertStepSelect.val()
+    $('div .insertDiv').remove();
+    var sequenceLength = 1;
+    if (sequencer.sequences[newStepName]) {
+      sequenceLength = sequencer.sequences[newStepName].length;
+    } else if (sequencer.modules[newStepName][1]["length"]) {
+      sequenceLength = sequencer.modules[newStepName][1]["length"];
+    }
+    _sequencer
+      .insertSteps(id + 1, newStepName).run({ index: id });
+
+    // add to URL hash too
+    urlHash.setUrlHashParameter("steps", _sequencer.toString());
+
+  }
+
+  return {
+    insertStep
+  }
+}
+module.exports = IntermediateHtmlStepUi;
+

examples/lib/scrollToTop.js

@@ -0,0 +1,17 @@
+$(document).ready(function($){
+	$(function(){
+		$(window).scroll(function(){
+			if ($(this).scrollTop() > 100){
+				$('.move-up').fadeIn();
+			} else {
+				$('.move-up').fadeOut();
+			}
+		});
+		$('.move-up button').click(function(){
+			$('body,html').animate({
+				scrollTop: 0
+			}, 800);
+			return false;
+		});
+	});
+});

examples/lib/sw.js

@@ -0,0 +1,35 @@
+const staticCacheName = 'image-sequencer-static-v3';
+
+self.addEventListener('install', event => {
+  console.log('Attempting to install service worker');
+});
+
+self.addEventListener('activate', function(e) {
+  console.log('[ServiceWorker] Activate');
+  e.waitUntil(
+    caches.keys().then(function(cacheNames) {
+      return Promise.all(
+        cacheNames.filter(function(cacheName){
+          return cacheName.startsWith('image-sequencer-') &&
+                 cacheName != staticCacheName;
+        }).map(function(cacheName){
+          return caches.delete(cacheName);
+        })
+      );
+    })
+  );      
+});
+
+self.addEventListener('fetch', function(event) {
+  event.respondWith(
+    caches.open(staticCacheName).then(function(cache) {
+      return cache.match(event.request).then(function (response) {
+        return response || fetch(event.request).then(function(response) {
+          if(event.request.method == "GET")
+            cache.put(event.request, response.clone());
+          return response;
+        });
+      });
+    })
+  );
+});

examples/lib/urlHash.js

@@ -40,3 +40,10 @@ function setUrlHashParameter(param, value) {
   setUrlHashParameters(params);
 
 }
+
+module.exports =  {
+                    getUrlHashParameter: getUrlHashParameter,
+                    setUrlHashParameter: setUrlHashParameter,
+                    getUrlHashParameters: getUrlHashParameters,
+                    setUrlHashParameters: setUrlHashParameters
+                  }

examples/manifest.json

@@ -0,0 +1,21 @@
+{
+  "short_name": "IS",
+  "name": "Image Sequencer",
+  "icons": [
+    {
+      "src": "../icons/ic_192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "../icons/ic_512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": "/examples/#steps=",
+  "background_color": "#428bca",
+  "display": "standalone",
+  "scope": "/examples/",
+  "theme_color": "#428bca"
+}

examples/sw.js

@@ -0,0 +1,35 @@
+const staticCacheName = 'image-sequencer-static-v3';
+
+self.addEventListener('install', event => {
+  console.log('Attempting to install service worker');
+});
+
+self.addEventListener('activate', function(e) {
+  console.log('[ServiceWorker] Activate');
+  e.waitUntil(
+    caches.keys().then(function(cacheNames) {
+      return Promise.all(
+        cacheNames.filter(function(cacheName){
+          return cacheName.startsWith('image-sequencer-') &&
+                 cacheName != staticCacheName;
+        }).map(function(cacheName){
+          return caches.delete(cacheName);
+        })
+      );
+    })
+  );      
+});
+
+self.addEventListener('fetch', function(event) {
+  event.respondWith(
+    caches.open(staticCacheName).then(function(cache) {
+      return cache.match(event.request).then(function (response) {
+        return response || fetch(event.request).then(function(response) {
+          if(event.request.method == "GET")
+            cache.put(event.request, response.clone());
+          return response;
+        });
+      });
+    })
+  );
+});

index.js

@@ -26,13 +26,20 @@ program
 if (program.saveSequence) {
   var params = program.saveSequence.split(' ');
   sequencer.saveSequence(params[0], params[1]);
+  console.log("\x1b[32m", "Your sequence was saved successfully!!");
 } else if (program.installModule) {
+  console.log(
+    "\x1b[33m%s\x1b[0m",
+    "Please wait while your Module is being Installed...\nThis may take a while!"
+  );
+  
   var params = program.installModule.split(' ');
   var spinner = Spinner("Now Installing...").start();
   require('child_process').execSync(`npm i ${params[1]}`)
   sequencer.saveNewModule(params[0], params[1]);
   sequencer.loadNewModule(params[0], require(params[1]));
   spinner.stop();
+  console.log("\x1b[32m%s\x1b[0m", "Your module was installed successfully!!");
 } else {
   // Parse step into an array to allow for multiple steps.
   if (!program.step) exit("No steps passed");
@@ -62,6 +69,9 @@ if (program.saveSequence) {
       for (var output in step.info.outputs) {
         console.log("[" + program.step + "]: " + output + " = " + step[output]);
       }
+    },
+    notify: function(msg) {
+      console.log('\x1b[36m%s\x1b[0m','🌟  '+msg);
     }
   });
 
@@ -202,4 +212,3 @@ if (program.saveSequence) {
     else return true;
   }
 }
-

package.json

@@ -1,11 +1,12 @@
 {
   "name": "image-sequencer",
-  "version": "2.2.3",
+  "version": "2.3.1",
   "description": "A modular JavaScript image manipulation library modeled on a storyboard.",
   "main": "src/ImageSequencer.js",
   "scripts": {
     "debug": "TEST=true node ./index.js -i ./examples/images/monarch.png -s invert",
-    "test": "TEST=true tape test/**/*.js test/*.js | tap-spec; browserify test/modules/image-sequencer.js test/modules/chain.js test/modules/meta-modules.js test/modules/replace.js test/modules/import-export.js test/modules/run.js test/modules/dynamic-imports.js | tape-run --render=\"tap-spec\"",
+    "test": "TEST=true tape test/ui/*.js test/**/*.js test/*.js test/ui/user-interface.js | tap-spec; browserify test/modules/image-sequencer.js test/modules/chain.js test/modules/meta-modules.js test/modules/replace.js test/modules/import-export.js test/modules/run.js test/modules/dynamic-imports.js test/util/parse-input.js | tape-run --render=\"tap-spec\"",
+    "setup": "npm i && npm i -g grunt grunt-cli",
     "start": "grunt serve"
   },
   "repository": {
@@ -22,40 +23,44 @@
     "url": "https://github.com/publiclab/image-sequencer/issues"
   },
   "dependencies": {
-    "bootstrap": "~3.2.0",
-    "buffer": "~5.0.2",
+    "bootstrap": "~3.4.0",
+    "buffer": "~5.2.1",
     "commander": "^2.11.0",
     "data-uri-to-buffer": "^2.0.0",
+    "downloadjs": "^1.4.7",
     "fisheyegl": "^0.1.2",
-    "font-awesome": "~4.5.0",
+    "font-awesome": "~4.7.0",
     "get-pixels": "~3.3.0",
+    "gifshot": "^0.4.5",
     "image-sequencer-invert": "^1.0.0",
+    "imagejs": "0.0.9",
     "imgareaselect": "git://github.com/jywarren/imgareaselect.git#v1.0.0-rc.2",
-    "jquery": "~2",
-    "jsqr": "^0.2.2",
+    "jquery": "^3.3.1",
+    "jsdom": "^13.1.0",
+    "jsqr": "^1.1.1",
     "lodash": "^4.17.5",
     "ndarray-gaussian-filter": "^1.0.0",
-    "ora": "^2.0.0",
+    "ora": "^3.0.0",
     "pace": "0.0.4",
     "readline-sync": "^1.4.7",
     "save-pixels": "~2.3.4",
-    "urify": "^2.1.0"
+    "urify": "^2.1.1"
   },
   "devDependencies": {
-    "browserify": "13.0.0",
-    "grunt": "^0.4.5",
+    "browserify": "16.2.3",
+    "grunt": "^1.0.3",
     "grunt-browser-sync": "^2.2.0",
     "grunt-browserify": "^5.0.0",
-    "grunt-contrib-concat": "^0.5.0",
+    "grunt-contrib-concat": "^1.0.1",
     "grunt-contrib-uglify-es": "^3.3.0",
-    "grunt-contrib-watch": "^0.6.1",
-    "image-filter-core": "~1.0.0",
-    "image-filter-threshold": "~1.0.0",
-    "looks-same": "^3.2.1",
-    "matchdep": "^0.3.0",
-    "tap-spec": "^4.1.1",
-    "tape": ">=4.7.0",
-    "tape-run": "^3.0.0",
+    "grunt-contrib-watch": "^1.1.0",
+    "image-filter-core": "~2.0.2",
+    "image-filter-threshold": "~2.0.1",
+    "looks-same": "^6.0.0",
+    "matchdep": "^2.0.0",
+    "tap-spec": "^5.0.0",
+    "tape": "^4.9.2",
+    "tape-run": "^5.0.0",
     "uglify-es": "^3.3.7"
   },
   "homepage": "https://github.com/publiclab/image-sequencer",

src/ImageSequencer.js

@@ -219,7 +219,7 @@ ImageSequencer = function ImageSequencer(options) {
         modulesdata[modulename] = modules[modulename][1];
       }
       for (var sequencename in this.sequences) {
-        modulesdata[sequencename] = { name: sequencename, steps: sequences[sequencename] };
+        modulesdata[sequencename] = { name: sequencename, steps: this.sequences[sequencename] };
       }
     }
     else {
@@ -256,15 +256,18 @@ ImageSequencer = function ImageSequencer(options) {
 
   // Stringifies one step of the sequence
   function stepToString(step) {
-    let inputs = copy(modulesInfo(step.options.name).inputs);
-    inputs = inputs || {};
+    let inputs = modulesInfo(step.options.name).inputs || {}, op = {};
 
     for (let input in inputs) {
-      inputs[input] = step.options[input] || inputs[input].default;
-      inputs[input] = encodeURIComponent(inputs[input]);
+
+      if (!!step.options[input] && step.options[input] != inputs[input].default) {
+        op[input] = step.options[input];
+        op[input] = encodeURIComponent(op[input]);
+      }
+
     }
 
-    var configurations = Object.keys(inputs).map(key => key + ':' + inputs[key]).join('|');
+    var configurations = Object.keys(op).map(key => key + ':' + op[key]).join('|');
     return `${step.options.name}{${configurations}}`;
   }
 
@@ -452,7 +455,7 @@ ImageSequencer = function ImageSequencer(options) {
     createMetaModule: createMetaModule,
     saveSequence: saveSequence,
     loadModules: loadModules,
-
+    
     //other functions
     log: log,
     objTypeOf: objTypeOf,

src/InsertStep.js

@@ -34,15 +34,22 @@ function InsertStep(ref, image, index, name, o) {
     };
     var UI = ref.events;
 
-    // Tell UI that a step has been set up.
-    o = o || {};
+    // define the expandSteps function for sequencer
     ref.modules[name].expandSteps = function expandSteps(stepsArray) {
-      for (var step of stepsArray) {
-        ref.addSteps(step['name'], step['options']);
+      for (var i in stepsArray) {
+        let step = stepsArray[i];
+        console.log(step['name'])
+        console.log(step['options'])
+        ref.insertSteps(index + Number.parseInt(i), step['name'], step['options']);
+        // ref.addSteps(step['name'], step['options']);
       }
     }
+
+    // Tell UI that a step has been set up.
+    o = o || {};
+
     if (!ref.modules[name][1].length) {
-      UI.onSetup(o.step);
+      UI.onSetup(o.step, { index: index });
       ref.images[image].steps.splice(index, 0, ref.modules[name][0](o, UI));
     } else {
       ref.modules[name][0](o, UI);

src/Modules.js

@@ -2,23 +2,33 @@
 * Core modules and their info files
 */
 module.exports = {
-  'channel': require('./modules/Channel'),
-  'brightness': require('./modules/Brightness'),
-  'edge-detect': require('./modules/EdgeDetect'),
-  'ndvi': require('./modules/Ndvi'),
-  'crop': require('./modules/Crop'),
-  'colormap': require('./modules/Colormap'),
-  'decode-qr': require('./modules/DecodeQr'),
-  'fisheye-gl': require('./modules/FisheyeGl'),
-  'dynamic': require('./modules/Dynamic'),
-  'blur': require('./modules/Blur'),
-  'saturation': require('./modules/Saturation'),
   'average': require('./modules/Average'),
   'blend': require('./modules/Blend'),
-  'import-image': require('./modules/ImportImage'),
-  'overlay': require('./modules/Overlay'),
-  'gradient': require('./modules/Gradient'),
-  'invert': require('image-sequencer-invert'),
-  'ndvi-colormap': require('./modules/NdviColormap'),
+  'blur': require('./modules/Blur'),
+  'brightness': require('./modules/Brightness'),
+  'channel': require('./modules/Channel'),
   'colorbar': require('./modules/Colorbar'),
-}
+  'colormap': require('./modules/Colormap'),
+  'contrast': require('./modules/Contrast'),
+  'convolution': require('./modules/Convolution'),
+  'crop': require('./modules/Crop'),
+  'decode-qr': require('./modules/DecodeQr'),
+  'dither': require('./modules/Dither'),
+  'draw-rectangle': require('./modules/DrawRectangle'),
+  'dynamic': require('./modules/Dynamic'),
+  'edge-detect': require('./modules/EdgeDetect'),
+  'fisheye-gl': require('./modules/FisheyeGl'),
+  'histogram': require('./modules/Histogram'),
+  'gamma-correction': require('./modules/GammaCorrection'),
+  'gradient': require('./modules/Gradient'),
+  'import-image': require('./modules/ImportImage'),
+  'invert': require('image-sequencer-invert'),
+  'ndvi': require('./modules/Ndvi'),
+  'ndvi-colormap': require('./modules/NdviColormap'),
+  'paint-bucket': require('./modules/PaintBucket'),
+  'overlay': require('./modules/Overlay'),
+  'resize': require('./modules/Resize'),
+  'rotate': require('./modules/Rotate'),
+  'saturation': require('./modules/Saturation'),
+  'white-balance': require('./modules/WhiteBalance')
+}

src/modules/Average/info.json

@@ -2,5 +2,6 @@
     "name": "Average",
     "description": "Average all pixel color",
     "inputs": {
-    }
+    },
+    "docs-link":"https://github.com/publiclab/image-sequencer/blob/main/docs/MODULES.md"
 }

src/modules/Blend/Module.js

@@ -1,63 +1,73 @@
 module.exports = function Dynamic(options, UI, util) {
 
-  options.func = options.func || "function(r1, g1, b1, a1, r2, g2, b2, a2) { return [ r1, g2, b2, a2 ] }";
+    options.func = options.func || "function(r1, g1, b1, a1, r2, g2, b2, a2) { return [ r1, g2, b2, a2 ] }";
+    options.offset = options.offset || -2;
 
-  var output;
+    var output;
 
-  // This function is called on every draw.
-  function draw(input, callback, progressObj) {
+    // This function is called on every draw.
+    function draw(input, callback, progressObj) {
 
-    progressObj.stop(true);
-    progressObj.overrideFlag = true;
+        progressObj.stop(true);
+        progressObj.overrideFlag = true;
 
-    var step = this;
+        var step = this;
 
-    // convert to runnable code:
-    if (typeof options.func === "string") eval('options.func = ' + options.func);
+        // convert to runnable code:
+        if (typeof options.func === "string") eval('options.func = ' + options.func);
 
-    var getPixels = require('get-pixels');
+        var getPixels = require('get-pixels');
 
-    // save first image's pixels
-    var priorStep = this.getStep(-2);
+        // convert offset as string to int
+        if(typeof options.offset === "string") options.offset = parseInt(options.offset);
 
-    getPixels(priorStep.output.src, function(err, pixels) {
-      options.firstImagePixels = pixels;
+        // save first image's pixels
+        var priorStep = this.getStep(options.offset);
 
-      function changePixel(r2, g2, b2, a2, x, y) {
-        // blend!
-        var p = options.firstImagePixels;
-        return options.func(
-          r2, g2, b2, a2,
-          p.get(x, y, 0),
-          p.get(x, y, 1),
-          p.get(x, y, 2),
-          p.get(x, y, 3)
-        )
-      }
+        if (priorStep.output === undefined) {
+            this.output = input;
+            UI.notify('Offset Unavailable','offset-notification');
+            callback();
+        } 
 
-      function output(image, datauri, mimetype) {
+        getPixels(priorStep.output.src, function(err, pixels) {
+            options.firstImagePixels = pixels;
 
-        // This output is accessible by Image Sequencer
-        step.output = { src: datauri, format: mimetype };
+            function changePixel(r2, g2, b2, a2, x, y) {
+                // blend!
+                var p = options.firstImagePixels;
+                return options.func(
+                    r2, g2, b2, a2,
+                    p.get(x, y, 0),
+                    p.get(x, y, 1),
+                    p.get(x, y, 2),
+                    p.get(x, y, 3)
+                )
+            }
 
-      }
+            function output(image, datauri, mimetype) {
 
-      // run PixelManipulatin on second image's pixels
-      return require('../_nomodule/PixelManipulation.js')(input, {
+                // This output is accessible by Image Sequencer
+                step.output = { src: datauri, format: mimetype };
+
+            }
+
+            // run PixelManipulatin on second image's pixels
+            return require('../_nomodule/PixelManipulation.js')(input, {
+                output: output,
+                changePixel: changePixel,
+                format: input.format,
+                image: options.image,
+                inBrowser: options.inBrowser,
+                callback: callback
+            });
+        });
+    }
+
+    return {
+        options: options,
+        draw: draw,
         output: output,
-        changePixel: changePixel,
-        format: input.format,
-        image: options.image,
-        inBrowser: options.inBrowser,
-        callback: callback
-      });
-    });
-  }
-
-  return {
-    options: options,
-    draw: draw,
-    output: output,
-    UI: UI
-  }
+        UI: UI
+    }
 }

src/modules/Blend/info.json

@@ -1,11 +1,17 @@
 {
   "name": "Blend",
-  "description": "Blend the past two image steps with the given function. Defaults to using the red channel from image 1 and the green and blue and alpha channels of image 2. Easier to use interfaces coming soon!",
+  "description": "Blend two chosen image steps with the given function. Defaults to using the red channel from image 1 and the green and blue and alpha channels of image 2. Easier to use interfaces coming soon!",
   "inputs": {
+    "offset": {
+      "type": "integer",
+      "desc": "Choose which image to blend the current image with. Two steps back is -2, three steps back is -3 etc.",
+      "default": -2
+    },
     "blend": {
       "type": "input",
       "desc": "Function to use to blend the two images.",
       "default": "function(r1, g1, b1, a1, r2, g2, b2, a2) { return [ r1, g2, b2, a2 ] }"
     }
-  }
+  },
+  "docs-link":"https://github.com/publiclab/image-sequencer/blob/main/docs/MODULES.md"
 }

src/modules/Blur/info.json

@@ -1,11 +1,15 @@
 {
     "name": "Blur",
-    "description": "Gaussian blur an image by a given value, typically 0-5",
+    "description": "Applies a Gaussian blur given by the intensity value",
     "inputs": {
         "blur": {
-            "type": "integer",
-            "desc": "amount of gaussian blur(Less blur gives more detail, typically 0-5)",
-            "default": 2
+            "type": "range",
+            "desc": "Amount of gaussian blur(Less blur gives more detail, typically 0-5)",
+            "default": "2",
+            "min": "0",
+            "max": "5",
+            "step": "0.25"
         }
-    }
+    },
+    "docs-link":"https://github.com/publiclab/image-sequencer/blob/main/docs/MODULES.md"
 }

src/modules/Brightness/Module.js

@@ -4,10 +4,13 @@
 
 module.exports = function Brightness(options,UI){
 
+
     var output;
 
     function draw(input,callback,progressObj){
 
+        options.brightness = parseInt(options.brightness) || 100;
+        var val = (options.brightness)/100.0;
         progressObj.stop(true);
         progressObj.overrideFlag = true;
 
@@ -20,12 +23,11 @@ module.exports = function Brightness(options,UI){
         var step = this;
 
         function changePixel(r, g, b, a){
-            var val = (options.brightness)/100.0
 
-            r = val*r<255?val*r:255
-            g = val*g<255?val*g:255
-            b = val*b<255?val*b:255
-            return [r , g, b, a]
+            r = Math.min(val*r, 255)
+            g = Math.min(val*g, 255)
+            b = Math.min(val*b, 255)
+            return [r, g, b, a]
         }
 
         function output(image,datauri,mimetype){

src/modules/Brightness/info.json

@@ -1,11 +1,15 @@
 {
-    "name": "Brightness",
-    "description": "Change the brightness of the image by given percent value",
-    "inputs": {
-        "brightness": {
-            "type": "integer",
-            "desc": "% brightness for the new image",
-            "default": 0 
-        }
-    } 
+  "name": "Brightness",
+  "description": "Change the brightness of the image by given percent value",
+  "inputs": {
+      "brightness": {
+          "type": "range",
+          "desc": "% brightness for the new image",
+          "default": "175",
+          "min": "0",
+          "max": "200",
+          "step": "1"
+      }
+  },
+  "docs-link":"https://github.com/publiclab/image-sequencer/blob/main/docs/MODULES.md"
 }

src/modules/Channel/info.json

@@ -8,5 +8,6 @@
       "default": "green",
       "values": ["red", "green", "blue"]
     }
-  }
+  },
+  "docs-link":"https://github.com/publiclab/image-sequencer/blob/main/docs/MODULES.md"
 }

src/modules/Colorbar/info.json

@@ -29,5 +29,6 @@
             "default": 10
         }
     },
-    "length": 4
+    "length": 4,
+    "docs-link":"https://github.com/publiclab/image-sequencer/blob/main/docs/MODULES.md"
 }

src/modules/Colormap/Colormap.js

@@ -56,32 +56,142 @@ var colormaps = {
                [0,     [0,   0,   0],   [255, 255, 255] ],
                [1,     [255, 255, 255], [255, 255, 255] ]
              ]),
-  default:   colormap([
-               [0,     [0,   0,   255], [0,   255, 0]   ],
-               [0.25,  [0,   255, 0],   [255, 255, 0]   ],
-               [0.50,  [0,   255, 255], [255, 255, 0]   ],
-               [0.75,  [255, 255, 0],   [255, 0,   0]   ]
+
+ bluwhtgrngis:   colormap([
+               [0,     	[6,23,86],    [6,25, 84]    ],
+               [0.0625, [6,25,84],    [6,25, 84]    ],//1
+               [0.125,  [6,25,84],    [6,25, 84]    ],//2
+               [0.1875, [6,25,84],    [6,25, 84]    ],
+               [0.25,   [6,25,84],    [6,25,84]     ],
+               [0.3125, [6,25,84],    [9,24, 84]    ],//5
+               [0.3438, [9,24, 84],   [119,120,162] ],//5
+               [0.375,  [119,129,162],[249,250,251] ], //6
+               [0.406,  [249,250,251],[255,255,255] ], //6.5
+               [0.4375, [255,255,255],[255,255,255] ], //7 white
+               [0.50,   [255,255,255],[214,205,191] ],//8
+               [0.52,   [214,205,191],[178,175,96]  ],//8.2
+               [0.5625, [178,175,96], [151,176,53]  ],//9
+               [0.593,  [151,176,53], [146,188,12]  ],//9.5
+               [0.625,  [146,188,12], [96,161,1]    ], //10
+               [0.6875, [96,161,1],   [30,127,3]    ],//11
+               [0.75,   [30,127,3],   [0,99,1]      ],//12
+               [0.8125, [0,99,1],     [0,74,1]      ],//13
+               [0.875,  [0,74,1],     [0,52, 0]     ],//14
+               [0.9375, [0,52, 0],    [0,34,0]      ], //15
+               [0.968,  [0,34,0],     [68,70,67]    ] //16
+              ]),
+
+
+  brntogrn:   colormap([
+               [0,      [110,12,3],   [118,6,1]      ],
+               [0.0625, [118,6,1],    [141,19,6]     ],
+               [0.125,  [141,19,6],   [165,35,13]    ],
+               [0.1875, [165,35,13],  [177,59,25]    ],
+               [0.2188, [177,59,25],  [192,91,36]    ],
+               [0.25,   [192,91,36],  [214, 145, 76] ],
+               [0.3125, [214,145,76], [230,183,134]  ],
+               [0.375,  [230,183,134],[243, 224, 194]],   
+               [0.4375, [243,224,194],[250,252,229]  ],
+               [0.50,   [250,252,229],[217,235,185]  ],
+               [0.5625, [217,235,185],[184,218,143]  ],
+               [0.625,  [184,218,143],[141,202,89]   ],
+               [0.6875, [141,202,89], [80,176,61]    ],
+               [0.75,   [80,176,61],  [0, 147, 32]   ],
+               [0.8125, [0,147,32],   [1, 122, 22]   ],
+               [0.875,  [1,122,22],   [0, 114, 19]   ],
+               [0.90,   [0,114,19],   [0,105,18]     ],
+               [0.9375, [0,105,18],   [7,70,14]      ] 
+
              ]),
-  ndvi:      colormap([
-               [0,     [0,   0,   255], [38,  195, 195] ],
-               [0.5,   [0,   150, 0],   [255, 255, 0]   ],
-               [0.75,  [255, 255, 0],   [255, 50,  50]  ]
+
+
+  blutoredjet:     colormap([
+               [0,       [0,0,140],    [1,1,186]    ],
+               [0.0625,  [1,1,186],    [0,1,248]    ],
+               [0.125,   [0,1,248],    [0,70,254]   ],
+               [0.1875,  [0,70,254],   [0,130,255]  ],
+               [0.25,    [0,130,255],  [2,160,255]  ],
+	       [0.2813,  [2,160,255],  [0,187,255]  ],	//inset
+               [0.3125,  [0,187,255],  [6,250,255]  ],
+ //            [0.348,   [0,218,255],  [8,252,251]  ],//inset
+               [0.375,   [8,252,251],  [27,254,228] ], 
+               [0.406,   [27,254,228], [70,255,187] ], //insert
+               [0.4375,  [70,255,187], [104,254,151]],
+               [0.47, 	 [104,254,151],[132,255,19] ],//insert
+               [0.50,    [132,255,19], [195,255,60] ],
+               [0.5625,  [195,255,60], [231,254,25] ],
+               [0.5976,  [231,254,25], [253,246,1]  ],//insert
+               [0.625,   [253,246,1],  [252,210,1]  ], //yellow
+               [0.657,   [252,210,1],  [255,183,0]  ],//insert
+               [0.6875,  [255,183,0],  [255,125,2]  ],
+               [0.75,    [255,125,2],  [255,65, 1]  ],
+               [0.8125,  [255,65, 1],  [247, 1, 1]  ],
+               [0.875,   [247,1,1],    [200, 1,  3] ],
+               [0.9375,  [200,1,3],    [122, 3,  2] ] 
+
              ]),
+
+
+  colors16:   colormap([
+               [0,      [0,0,0],       [0,0,0]       ],
+               [0.0625, [3,1,172],     [3,1,172]     ],
+               [0.125,  [3,1,222],     [3,1, 222]    ],
+               [0.1875, [0,111,255],   [0,111,255]   ],
+               [0.25,   [3,172,255],   [3,172,255]   ],
+               [0.3125, [1,226,255],   [1,226,255]   ],
+               [0.375,  [2,255,0],     [2,255,0]     ],   
+               [0.4375, [198,254,0],   [190,254,0]   ],
+               [0.50,   [252,255,0],   [252,255,0]   ],
+               [0.5625, [255,223,3],   [255,223,3]   ],
+               [0.625,  [255,143,3],   [255,143,3]   ],
+               [0.6875, [255,95,3],    [255,95,3]    ],
+               [0.75,   [242,0,1],     [242,0,1]     ],
+               [0.8125, [245,0,170],   [245,0,170]   ],
+               [0.875,  [223,180,225], [223,180,225] ],
+               [0.9375, [255,255,255], [255,255, 255]] 
+
+             ]),
+
+   default:      colormap([
+               [0,       [45,1,121],     [25,1,137]    ],
+               [0.125,   [25,1,137],     [0,6,156]     ],
+               [0.1875,  [0,6,156],      [7,41,172]    ],
+               [0.25,    [7,41,172],     [22,84,187]   ],
+               [0.3125,  [22,84,187],    [25,125,194]  ],
+               [0.375,   [25,125,194],   [26,177,197]  ],   
+               [0.4375,  [26,177,197],   [23,199,193]  ],
+               [0.47,    [23,199,193],   [25, 200,170] ],
+               [0.50,    [25, 200,170],  [21,209,27]   ],
+               [0.5625,  [21,209,27],    [108,215,18]  ],
+               [0.625,   [108,215,18],   [166,218,19]  ],
+               [0.6875,  [166,218,19],   [206,221,20]  ],
+               [0.75,    [206,221,20],   [222,213,19 ] ],
+               [0.7813,  [222,213,19],   [222, 191, 19]],
+               [0.8125,  [222, 191, 19], [227,133,17]  ],
+               [0.875,   [227,133,17],   [231,83,16]   ],
+               [0.9375,  [231,83,16],    [220,61,48]   ] 
+
+             ]),
+
+
+  fastie:    colormap([
+               [0,     [255, 255, 255], [0,   0,   0]   ],
+               [0.167, [0,   0,   0],   [255, 255, 255] ],
+               [0.33,  [255, 255, 255],   [0,   0,   0] ],
+               [0.5,   [0,   0,   0],   [140, 140, 255] ],
+               [0.55,  [140, 140, 255], [0,   255, 0]   ],
+               [0.63,  [0,   255, 0],   [255, 255, 0]   ],
+               [0.75,  [255, 255, 0],   [255, 0,   0]   ],
+               [0.95,  [255, 0,   0],   [255, 0,   255] ]
+             ]),
+
+
   stretched: colormap([
                [0,     [0,   0,   255], [0,   0,   255] ],
                [0.1,   [0,   0,   255], [38,  195, 195] ],
                [0.5,   [0,   150, 0],   [255, 255, 0]   ],
                [0.7,   [255, 255, 0],   [255, 50,  50]  ],
                [0.9,   [255, 50,  50],  [255, 50,  50]  ]
-             ]),
-  fastie:    colormap([
-               [0,     [255, 255, 255], [0,   0,   0]   ],
-               [0.167, [0,   0,   0],   [255, 255, 255] ],
-               [0.33,  [255, 255, 255], [0,   0,   0]   ],
-               [0.5,   [0,   0,   0],   [140, 140, 255] ],
-               [0.55,  [140, 140, 255], [0,   255, 0]   ],
-               [0.63,  [0,   255, 0],   [255, 255, 0]   ],
-               [0.75,  [255, 255, 0],   [255, 0,   0]   ],
-               [0.95,  [255, 0,   0],   [255, 0,   255] ]
              ])
-}
+ 
+}

src/modules/Colormap/info.json

@@ -6,7 +6,8 @@
       "type": "select",
       "desc": "Name of the Colormap",
       "default": "default",
-      "values": ["default","greyscale","stretched","fastie"]
+      "values": ["default","greyscale","bluwhtgrngis","stretched","fastie","brntogrn","blutoredjet","colors16"]
     }
-  }
+  },
+  "docs-link":"https://github.com/publiclab/image-sequencer/blob/main/docs/MODULES.md"
 }

src/modules/Contrast/Contrast.js

@@ -0,0 +1,47 @@
+var _ = require('lodash');
+module.exports = exports = function(pixels , contrast){
+	let oldpix = _.cloneDeep(pixels);
+    contrast = Number(contrast)
+	if (contrast < -100) contrast = -100;
+    if (contrast > 100) contrast = 100;
+    contrast = (100.0 + contrast) / 100.0;
+    contrast *= contrast;
+        
+    for (let i = 0; i < oldpix.shape[0]; i++) {
+        for (let j = 0; j < oldpix.shape[1]; j++) {
+        	var r = oldpix.get(i,j,0)/255.0;
+        	r -= 0.5;
+            r *= contrast;
+        	r += 0.5;
+            r *= 255;
+            if (r < 0) r = 0;
+            if (r > 255) r = 255;
+
+
+            var g = oldpix.get(i,j,1)/255.0;
+            g -= 0.5;
+            g *= contrast;
+            g += 0.5;
+            g *= 255;
+            if (g < 0) g = 0;
+            if (g > 255) g = 255;
+        
+
+
+            var b = oldpix.get(i,j,2)/255.0;
+            b -= 0.5;
+            b *= contrast;
+            b += 0.5;
+            b *= 255;
+            if (b < 0) b = 0;
+            if (b > 255) b = 255;
+            
+
+            pixels.set(i, j, 0, r);
+            pixels.set(i, j, 1, g);
+            pixels.set(i, j, 2, b);
+
+        }
+    }
+    return pixels;
+}

src/modules/Contrast/Module.js

@@ -0,0 +1,49 @@
+// /*
+// * Changes the Image Contrast
+// */
+
+module.exports = function Contrast(options, UI) {
+
+    options.contrast = options.contrast || 70
+    var output;
+
+    function draw(input, callback, progressObj) {
+
+        progressObj.stop(true);
+        progressObj.overrideFlag = true;
+
+        var step = this;
+
+        function changePixel(r, g, b, a) {
+            return [r, g, b, a]
+        }
+
+        function extraManipulation(pixels) {
+            pixels = require('./Contrast')(pixels, options.contrast)
+            return pixels
+        }
+
+        function output(image, datauri, mimetype) {
+
+            // This output is accessible by Image Sequencer
+            step.output = { src: datauri, format: mimetype };
+
+        }
+
+        return require('../_nomodule/PixelManipulation.js')(input, {
+            output: output,
+            changePixel: changePixel,
+            extraManipulation: extraManipulation,
+            format: input.format,
+            image: options.image,
+            callback: callback
+        });
+
+    }
+    return {
+        options: options,
+        draw: draw,
+        output: output,
+        UI: UI
+    }
+}

src/modules/Contrast/index.js

@@ -0,0 +1,4 @@
+module.exports = [
+    require('./Module'),
+    require('./info.json')
+]

src/modules/Contrast/info.json

@@ -0,0 +1,15 @@
+{
+    "name": "Contrast",
+    "description": "Change the contrast of the image by given value",
+    "inputs": {
+        "contrast": {
+            "type": "range",
+            "desc": "contrast for the new image, typically -100 to 100",
+            "default": "70",
+            "min": "-100",
+            "max": "100",
+            "step": "1"
+        }
+    },
+    "docs-link":"https://github.com/publiclab/image-sequencer/blob/main/docs/MODULES.md"
+}

src/modules/Convolution/Convolution.js

@@ -0,0 +1,71 @@
+var _ = require('lodash');
+module.exports = exports = function(pixels, constantFactor, kernelValues){
+	let kernel = kernelGenerator(constantFactor, kernelValues), oldpix = _.cloneDeep(pixels);
+	kernel = flipKernel(kernel);
+
+	for (let i = 0; i < pixels.shape[0]; i++) {
+        for (let j = 0; j < pixels.shape[1]; j++) {
+            let neighboutPos = getNeighbouringPixelPositions([i, j]);
+            let acc = [0.0, 0.0, 0.0, 0.0];
+            for (let a = 0; a < kernel.length; a++) {
+                for (let b = 0; b < kernel.length; b++) {
+                    acc[0] += (oldpix.get(neighboutPos[a][b][0], neighboutPos[a][b][1], 0) * kernel[a][b]);
+                    acc[1] += (oldpix.get(neighboutPos[a][b][0], neighboutPos[a][b][1], 1) * kernel[a][b]);
+                    acc[2] += (oldpix.get(neighboutPos[a][b][0], neighboutPos[a][b][1], 2) * kernel[a][b]);
+                    acc[3] += (oldpix.get(neighboutPos[a][b][0], neighboutPos[a][b][1], 3) * kernel[a][b]);
+                }
+            }
+            acc[0] = acc[0]%255;
+            acc[1] = acc[1]%255;
+            acc[2] = acc[2]%255;
+            pixels.set(i, j, 0, acc[0]);
+            pixels.set(i, j, 1, acc[1]);
+            pixels.set(i, j, 2, acc[2]);
+        }
+    }
+    return pixels;
+
+
+	function kernelGenerator(constantFactor, kernelValues){
+		kernelValues = kernelValues.split(" ");
+        for(i = 0 ; i < 9; i++){
+            kernelValues[i] = Number(kernelValues[i]) * constantFactor;
+        }
+        let k = 0;
+		let arr = [];
+		for(i = 0; i < 3; i++){
+			let columns = [];
+			for(j = 0; j < 3; j++){
+				columns.push(kernelValues[k]);
+				k += 1;
+			}
+			arr.push(columns);
+		}
+		return arr;
+	}
+
+	function getNeighbouringPixelPositions(pixelPosition) {
+        let x = pixelPosition[0], y = pixelPosition[1], result = [];
+
+        for (let i = -1; i <= 1; i++) {
+            let arr = [];
+            for (let j = -1; j <= 1; j++)
+                arr.push([x + i, y + j]);
+
+            result.push(arr);
+        }
+        return result;
+    }
+
+	function flipKernel(kernel) {
+        let result = [];
+        for (let i = kernel.length - 1; i >= 0; i--) {
+            let arr = [];
+            for (let j = kernel[i].length - 1; j >= 0; j--) {
+                arr.push(kernel[i][j]);
+            }
+            result.push(arr);
+        }
+        return result;
+    }
+}

src/modules/Convolution/Module.js

@@ -0,0 +1,45 @@
+module.exports = function Convolution(options, UI) {
+
+    options.kernelValues = options.kernelValues || '1 1 1 1 1 1 1 1 1';
+    options.constantFactor = options.constantFactor || 1/9;
+    var output;
+
+    function draw(input, callback, progressObj) {
+
+        progressObj.stop(true);
+        progressObj.overrideFlag = true;
+
+        var step = this;
+
+        function changePixel(r, g, b, a) {
+            return [r, g, b, a]
+        }
+
+        function extraManipulation(pixels) {
+            pixels = require('./Convolution')(pixels, options.constantFactor, options.kernelValues)
+            return pixels
+        }
+
+        function output(image, datauri, mimetype) {
+
+            step.output = { src: datauri, format: mimetype };
+
+        }
+
+        return require('../_nomodule/PixelManipulation.js')(input, {
+            output: output,
+            changePixel: changePixel,
+            extraManipulation: extraManipulation,
+            format: input.format,
+            image: options.image,
+            callback: callback
+        });
+
+    }
+    return {
+        options: options,
+        draw: draw,
+        output: output,
+        UI: UI
+    }
+}

src/modules/Convolution/index.js

@@ -0,0 +1,4 @@
+module.exports = [
+    require('./Module'),
+    require('./info.json')
+]

src/modules/Convolution/info.json

@@ -0,0 +1,20 @@
+{
+    "name": "Convolution",
+    "description": "Image Convolution using a given 3x3 kernel matrix <a href='https://en.wikipedia.org/wiki/Kernel_(image_processing)'>Read more</a>",
+    "inputs": {
+  		"constantFactor":{
+  			"type": "Float",
+  			"desc": "a constant factor, multiplies all the kernel values by that factor",
+  			"default": 0.1111,
+        "placeholder": 0.1111
+  		},
+        
+      "kernelValues": {
+        "type": "String",
+        "desc": "nine space separated numbers representing the kernel values in left to right and top to bottom format.",
+        "default": "1 1 1 1 1 1 1 1 1",
+        "placeholder": "1 1 1 1 1 1 1 1 1"
+      }
+    },
+    "docs-link":"https://github.com/publiclab/image-sequencer/blob/main/docs/MODULES.md"
+}

src/modules/Crop/Crop.js

@@ -9,14 +9,25 @@ module.exports = function Crop(input,options,callback) {
   getPixels(input.src,function(err,pixels){
     options.w = parseInt(options.w) || Math.floor(pixels.shape[0]);
     options.h = parseInt(options.h) || Math.floor(pixels.shape[1]);
+    options.backgroundColor = options.backgroundColor || '255 255 255 255';
     var ox = options.x;
     var oy = options.y;
     var w = options.w;
     var h = options.h;
     var iw = pixels.shape[0]; //Width of Original Image
+    var ih = pixels.shape[1]; //Height of Original Image
+    var backgroundArray = [];
+    backgroundColor = options.backgroundColor.split(" ");
+    for(var i = 0; i < w ; i++){
+      backgroundArray = backgroundArray.concat([backgroundColor[0],backgroundColor[1],backgroundColor[2],backgroundColor[3]]);
+    }
     var newarray = new Uint8Array(4*w*h);
     for (var n = oy; n < oy + h; n++) {
+      if(n<ih){
       newarray.set(pixels.data.slice(n*4*iw + ox, n*4*iw + ox + 4*w),4*w*(n-oy));
+      } else {
+        newarray.set(backgroundArray,4*w*(n-oy));
+      }
     }
     pixels.data = newarray;
     pixels.shape = [w,h,4];

src/modules/Crop/Module.js

@@ -17,9 +17,9 @@ module.exports = function CropModule(options, UI) {
 
   // we should get UI to return the image thumbnail so we can attach our own UI extensions
   // add our custom in-module html ui:
-  if (options.step.inBrowser) var ui = require('./Ui.js')(options.step, 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 parseCornerCoordinateInputs = require('../../util/ParseInputCoordinates');
 
-    require('./Crop')(input, options, function(out, format){
+    //parse the inputs
+    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 = {
@@ -49,7 +64,7 @@ module.exports = function CropModule(options, UI) {
 
       // start custom UI setup (draggable UI)
       // only once we have an input image
-      if (setupComplete === false && options.step.inBrowser) {
+      if (setupComplete === false && options.step.inBrowser && !options.noUI) {
         setupComplete = true;
         ui.setup();
       }

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": {
@@ -16,12 +16,19 @@
     "w": {
       "type": "integer",
       "desc": "Width of crop",
-      "default": "(100%)"
+      "default": "(50%)"
     },
     "h": {
       "type": "integer",
       "desc": "Height of crop",
-      "default": "(100%)"
+      "default": "(50%)"
+    },
+    "backgroundColor": {
+      "type": "String",
+      "desc": "Background Color (Four space separated RGBA values)",
+      "default": "255 255 255 255",
+      "placeholder": "255 255 255 255"
     }
-  }
-}
+  },
+  "docs-link":"https://github.com/publiclab/image-sequencer/blob/main/docs/MODULES.md"
+}

src/modules/DecodeQr/info.json

@@ -7,5 +7,6 @@
     "qrval": {
       "type": "text"
     }
-  }
+  },
+  "docs-link":"https://github.com/publiclab/image-sequencer/blob/main/docs/MODULES.md"
 }

src/modules/Dither/Dither.js

@@ -0,0 +1,70 @@
+module.exports = function Dither(pixels, type) {
+  type = type || "none";
+      var bayerThresholdMap = [
+          [  15, 135,  45, 165 ],
+          [ 195,  75, 225, 105 ],
+          [  60, 180,  30, 150 ],
+          [ 240, 120, 210,  90 ]
+      ];
+      
+      var lumR = [];
+      var lumG = [];
+      var lumB = [];
+      for (var i=0; i<256; i++) {
+          lumR[i] = i*0.299;
+          lumG[i] = i*0.587;
+          lumB[i] = i*0.114;
+      }
+      var threshold = 129;
+      var imageDataLength = pixels.data.length;   //imageData.data.length;
+    
+      // Greyscale luminance (sets r pixels to luminance of rgb)
+      for (var i = 0; i <= imageDataLength; i += 4) {
+        pixels.data[i] = Math.floor(lumR[pixels.data[i]] + lumG[pixels.data[i+1]] + lumB[pixels.data[i+2]]);
+      }
+    
+      var w = pixels.shape[0];
+      var newPixel, err;
+    
+      for (var currentPixel = 0; currentPixel <= imageDataLength; currentPixel+=4) {
+    
+        if (type === "none") {
+          // No dithering
+          pixels.data[currentPixel] = pixels.data[currentPixel] < threshold ? 0 : 255;
+        } else if (type === "bayer") {
+          // 4x4 Bayer ordered dithering algorithm
+          var x = currentPixel/4 % w;
+          var y = Math.floor(currentPixel/4 / w);
+          var map = Math.floor( (pixels.data[currentPixel] + bayerThresholdMap[x%4][y%4]) / 2 );
+          pixels.data[currentPixel] = (map < threshold) ? 0 : 255;
+        } else if (type === "floydsteinberg") {
+          // Floyd–Steinberg dithering algorithm
+          newPixel = pixels.data[currentPixel] < 129 ? 0 : 255;
+          err = Math.floor((pixels.data[currentPixel] - newPixel) / 16);
+          pixels.data[currentPixel] = newPixel;
+    
+          pixels.data[currentPixel       + 4 ] += err*7;
+          pixels.data[currentPixel + 4*w - 4 ] += err*3;
+          pixels.data[currentPixel + 4*w     ] += err*5;
+          pixels.data[currentPixel + 4*w + 4 ] += err*1;
+        } else {
+          // Bill Atkinson's dithering algorithm
+          newPixel = pixels.data[currentPixel] < threshold ? 0 : 255;
+          err = Math.floor((pixels.data[currentPixel] - newPixel) / 8);
+          pixels.data[currentPixel] = newPixel;
+    
+          pixels.data[currentPixel       + 4 ] += err;
+          pixels.data[currentPixel       + 8 ] += err;
+          pixels.data[currentPixel + 4*w - 4 ] += err;
+          pixels.data[currentPixel + 4*w     ] += err;
+          pixels.data[currentPixel + 4*w + 4 ] += err;
+          pixels.data[currentPixel + 8*w     ] += err;
+        }
+    
+        // Set g and b pixels equal to r
+        pixels.data[currentPixel + 1] = pixels.data[currentPixel + 2] = pixels.data[currentPixel];
+      }
+      return pixels;
+  
+  }
+  

src/modules/Dither/Module.js

@@ -0,0 +1,37 @@
+module.exports = function Dither(options, UI){
+
+    var output;
+
+    function draw(input,callback,progressObj){
+
+        progressObj.stop(true);
+        progressObj.overrideFlag = true;
+
+        var step = this;
+
+        function extraManipulation(pixels) {
+            pixels = require('./Dither')(pixels, options.dither)
+            return pixels
+        }
+
+        function output(image,  datauri, mimetype){
+            // This output is accessible by Image Sequencer
+            step.output = { src: datauri, format: mimetype };
+
+        }
+
+        return require('../_nomodule/PixelManipulation.js')(input, {
+            output: output,
+            extraManipulation: extraManipulation,
+            format: input.format,
+            image: options.image,
+            callback: callback
+        });
+    }
+    return {
+        options: options,
+        draw: draw,
+        output: output,
+        UI: UI
+    }
+}

src/modules/Dither/index.js

@@ -0,0 +1,4 @@
+module.exports = [
+    require('./Module'),
+    require('./info.json')
+]

src/modules/Dither/info.json

@@ -0,0 +1,13 @@
+{
+    "name": "Dither",
+    "description": "Approximates a color from a mixture of other colors when the required color is not available, creating illusions of the color that is not present actually.<a href='https://en.wikipedia.org/wiki/Dither'>Read more</a>",
+    "inputs": {
+      "dither": {
+        "type": "select",
+        "desc": "Name of the Dithering Algorithm",
+        "default": "none",
+        "values": ["none","floydsteinberg","bayer","Atkinson"]
+      }
+    }
+}
+  

src/modules/DrawRectangle/DrawRectangle.js

@@ -0,0 +1,37 @@
+module.exports = exports = function(pixels, options){
+	options.startingX = options.startingX || 0;
+  options.startingY = options.startingY || 0;
+	var ox = Number(options.startingX),
+	  oy = Number(options.startingY),
+	  iw = pixels.shape[0],
+	  ih = pixels.shape[1],
+	  ex =  options.endX = Number(options.endX) || iw - 1,
+	  ey = options.endY = Number(options.endY) || ih - 1,
+    thickness = Number(options.thickness) || 1,
+    color = options.color || "0 0 0 255";
+
+  color = color.split(" ");
+
+  var drawSide = function(startY, startX, endY, endX, yIncrement, xIncrement, sign, incrementFactor = 1){
+    for(var i = 0; i<thickness; i++){
+      for(
+        var n = (startY + i*yIncrement*sign)*4*iw + 4*(startX + i*xIncrement*sign);
+        n <= (endY + i*yIncrement*sign)*4*iw + 4*(endX + i*xIncrement*sign);
+        n = n+4*(incrementFactor)
+      )
+      {
+        pixels.data[n] = color[0];
+        pixels.data[n+1] = color[1];
+        pixels.data[n+2] = color[2];
+        pixels.data[n+3] = color[3];
+      }
+    }
+  }
+
+  drawSide(oy, ox, oy, ex, 1, 0, 1); // Top
+  drawSide(ey, ox, ey, ex, 1, 0, -1); // Bottom
+  drawSide(oy, ox, ey, ox, 0, 1, 1, iw); // Left
+  drawSide(oy, ex, ey, ex, 0, 1, -1, iw); // Right
+
+  return pixels;
+}

src/modules/DrawRectangle/Module.js

@@ -0,0 +1,44 @@
+module.exports = function DrawRectangle(options, UI) {
+
+    
+    var output;
+
+    function draw(input, callback, progressObj) {
+
+        progressObj.stop(true);
+        progressObj.overrideFlag = true;
+
+        var step = this;
+
+        function changePixel(r, g, b, a) {
+            return [r, g, b, a]
+        }
+
+        function extraManipulation(pixels) {
+            pixels = require('./DrawRectangle')(pixels, options)
+            return pixels
+        }
+
+        function output(image, datauri, mimetype) {
+
+            step.output = { src: datauri, format: mimetype };
+
+        }
+
+        return require('../_nomodule/PixelManipulation.js')(input, {
+            output: output,
+            changePixel: changePixel,
+            extraManipulation: extraManipulation,
+            format: input.format,
+            image: options.image,
+            callback: callback
+        });
+
+    }
+    return {
+        options: options,
+        draw: draw,
+        output: output,
+        UI: UI
+    }
+}

src/modules/DrawRectangle/index.js

@@ -0,0 +1,4 @@
+module.exports = [
+    require('./Module'),
+    require('./info.json')
+]

src/modules/DrawRectangle/info.json

@@ -0,0 +1,41 @@
+{
+    "name": "Draw Rectangle",
+    "description": "It draws a rectangle on the image",
+    "inputs": {
+  		"startingX":{
+  			"type": "Number",
+  			"desc": "starting x position of the rectangle",
+  			"default": 0
+  		},
+        
+      "startingY": {
+        "type": "Number",
+        "desc": "starting y position of the rectangle",
+        "default": 0
+      },
+
+      "endX":{
+        "type": "integer",
+        "desc": "last x position of the rectangle",
+        "default": "width"
+      },
+
+      "endY":{
+        "type": "integer",
+        "desc": "last y position of the rectangle",
+        "default": "height"
+      },
+
+      "thickness":{
+        "type": "integer",
+        "desc": "thickness of border",
+        "default": 1
+      },
+
+      "color":{
+        "type": "String",
+        "desc": "RGBA values separated by a space",
+        "default": "0 0 0 255"
+      }
+    }
+}

src/modules/Dynamic/Module.js

@@ -54,6 +54,22 @@ module.exports = function Dynamic(options,UI) {
       ]
     }
 
+    // via P5js: https://github.com/processing/p5.js/blob/2920492842aae9a8bf1a779916893ac19d65cd38/src/math/calculation.js#L461-L472
+    function map(n, start1, stop1, start2, stop2, withinBounds) {
+      var newval = (n - start1) / (stop1 - start1) * (stop2 - start2) + start2;
+      if (!withinBounds) {
+        return newval;
+      }
+      // also via P5js: https://github.com/processing/p5.js/blob/2920492842aae9a8bf1a779916893ac19d65cd38/src/math/calculation.js#L116-L119
+      function constrain(n, low, high) {
+        return Math.max(Math.min(n, high), low);
+      };
+      if (start2 < stop2) {
+        return constrain(newval, start2, stop2);
+      } else {
+        return constrain(newval, stop2, start2);
+      }
+    };
 
     function output(image,datauri,mimetype){
 

src/modules/Dynamic/info.json

@@ -22,5 +22,6 @@
       "desc": "Expression to return with R, G, B, and A inputs; fallback for other channels if none provided",
       "default": "r + g + b"
     }
-  }
+  },
+  "docs-link":"https://github.com/publiclab/image-sequencer/blob/main/docs/MODULES.md"
 }

src/modules/EdgeDetect/EdgeUtils.js

@@ -4,9 +4,8 @@ const _ = require('lodash')
 const kernelx = [[-1, 0, 1], [-2, 0, 2], [-1, 0, 1]],
     kernely = [[-1, -2, -1], [0, 0, 0], [1, 2, 1]];
 
-let angles = [], mags = [], strongEdgePixels = [], weakEdgePixels = [], notInUI;
 module.exports = function(pixels, highThresholdRatio, lowThresholdRatio, inBrowser) {
-    notInUI = !inBrowser;
+    let angles = [], mags = [], strongEdgePixels = [], weakEdgePixels = [], notInUI = !inBrowser;
     for (var x = 0; x < pixels.shape[0]; x++) {
         angles.push([]);
         mags.push([]);
@@ -29,8 +28,9 @@ module.exports = function(pixels, highThresholdRatio, lowThresholdRatio, inBrows
             angles.slice(-1)[0].push(result.angle);
         }
     }
-
-    return doubleThreshold(nonMaxSupress(pixels), highThresholdRatio, lowThresholdRatio);
+    nonMaxSupress(pixels, mags, angles);
+    doubleThreshold(pixels, highThresholdRatio, lowThresholdRatio, mags, strongEdgePixels, weakEdgePixels);
+    return pixels;
 }
 
 //changepixel function that convolutes every pixel (sobel filter)
@@ -65,7 +65,7 @@ function changePixel(pixels, val, a, x, y) {
 }
 
 //Non Maximum Supression without interpolation
-function nonMaxSupress(pixels) {
+function nonMaxSupress(pixels, mags, angles) {
 
     angles = angles.map((arr) => arr.map(convertToDegrees));
 
@@ -113,7 +113,6 @@ function nonMaxSupress(pixels) {
 
         }
     }
-    return pixels;
 }
 //Converts radians to degrees
 var convertToDegrees = radians => (radians * 180) / Math.PI;
@@ -122,9 +121,9 @@ var convertToDegrees = radians => (radians * 180) / Math.PI;
 var findMaxInMatrix = arr => Math.max(...arr.map(el => el.map(val => !!val ? val : 0)).map(el => Math.max(...el)));
 
 //Applies the double threshold to the image
-function doubleThreshold(pixels, highThresholdRatio, lowThresholdRatio) {
+function doubleThreshold(pixels, highThresholdRatio, lowThresholdRatio, mags, strongEdgePixels, weakEdgePixels) {
 
-    const highThreshold = findMaxInMatrix(mags) * 0.2;
+    const highThreshold = findMaxInMatrix(mags) * highThresholdRatio;
     const lowThreshold = highThreshold * lowThresholdRatio;
 
     for (let i = 0; i < pixels.shape[0]; i++) {
@@ -140,8 +139,6 @@ function doubleThreshold(pixels, highThresholdRatio, lowThresholdRatio) {
     }
 
     strongEdgePixels.forEach(pix => pixels.set(pix[0], pix[1], 3, 255));
-
-    return pixels;
 }
 
 //  hysteresis edge tracking algorithm -- not working as of now

src/modules/EdgeDetect/Module.js

@@ -1,16 +1,16 @@
 /*
 * Detect Edges in an Image
 */
-module.exports = function edgeDetect(options,UI) {
+module.exports = function edgeDetect(options, UI) {
 
   options.blur = options.blur || 2;
-  options.highThresholdRatio = options.highThresholdRatio||0.2;
-  options.lowThresholdRatio = options.lowThresholdRatio||0.15;
+  options.highThresholdRatio = options.highThresholdRatio || 0.2;
+  options.lowThresholdRatio = options.lowThresholdRatio || 0.15;
 
   var output;
 
   // The function which is called on every draw.
-  function draw(input,callback,progressObj) {
+  function draw(input, callback, progressObj) {
 
     progressObj.stop(true);
     progressObj.overrideFlag = true;
@@ -19,19 +19,20 @@ module.exports = function edgeDetect(options,UI) {
 
 
     //   Extra Manipulation function used as an enveloper for applying gaussian blur and Convolution
-    function extraManipulation(pixels){
-      pixels = require('ndarray-gaussian-filter')(pixels,options.blur);
-      return require('./EdgeUtils')(pixels,options.highThresholdRatio,options.lowThresholdRatio,options.inBrowser);
+    function extraManipulation(pixels) {
+      pixels = require('ndarray-gaussian-filter')(pixels, options.blur);
+      pixels = require('./EdgeUtils')(pixels, options.highThresholdRatio, options.lowThresholdRatio, options.inBrowser);
+      return pixels;
     }
 
     function changePixel(r, g, b, a) {
-      return [(r+g+b)/3, (r+g+b)/3, (r+g+b)/3, a];
+      return [(r + g + b) / 3, (r + g + b) / 3, (r + g + b) / 3, a];
     }
 
-    function output(image,datauri,mimetype){
+    function output(image, datauri, mimetype) {
 
       // This output is accessible by Image Sequencer
-      step.output = {src:datauri,format:mimetype};
+      step.output = { src: datauri, format: mimetype };
 
     }
 
@@ -49,7 +50,7 @@ module.exports = function edgeDetect(options,UI) {
 
   return {
     options: options,
-    draw:  draw,
+    draw: draw,
     output: output,
     UI: UI
   }

src/modules/EdgeDetect/info.json

@@ -1,11 +1,14 @@
 {
     "name": "Detect Edges",
-    "description": "this module detects edges using the Canny method, which first Gaussian blurs the image to reduce noise (amount of blur configurable in settings as `options.blur`), then applies a number of steps to highlight edges, resulting in a greyscale image where the brighter the pixel, the stronger the detected edge. Read more at: https://en.wikipedia.org/wiki/Canny_edge_detector",
+    "description": "This module detects edges using the Canny method, which first Gaussian blurs the image to reduce noise (amount of blur configurable in settings as `options.blur`), then applies a number of steps to highlight edges, resulting in a greyscale image where the brighter the pixel, the stronger the detected edge.<a href='https://en.wikipedia.org/wiki/Canny_edge_detector'> Read more. </a>",
     "inputs": {
         "blur": {
-            "type": "integer",
-            "desc": "amount of gaussian blur(Less blur gives more detail, typically 0-5)",
-            "default": 2
+            "type": "range",
+            "desc": "Amount of gaussian blur(Less blur gives more detail, typically 0-5)",
+            "default": "2",
+            "min": "0",
+            "max": "5",
+            "step": "0.25"
         },
         "highThresholdRatio":{
             "type": "float",
@@ -17,5 +20,6 @@
             "desc": "The low threshold value for the image",
             "default": 0.15
         }
-    }
+    },
+    "docs-link":"https://github.com/publiclab/image-sequencer/blob/main/docs/MODULES.md"
 }

src/modules/FisheyeGl/info.json

@@ -54,13 +54,14 @@
     },
     "fragmentSrc": {
       "type": "PATH",
-      "desc": "Patht to a WebGL fragment shader file",
+      "desc": "Path to a WebGL fragment shader file",
       "default": "(inbuilt)"
     },
     "vertexSrc": {
       "type": "PATH",
-      "desc": "Patht to a WebGL vertex shader file",
+      "desc": "Path to a WebGL vertex shader file",
       "default": "(inbuilt)"
     }
-  }
+  },
+  "docs-link":"https://github.com/publiclab/image-sequencer/blob/main/docs/MODULES.md"
 }

src/modules/GammaCorrection/Module.js

@@ -0,0 +1,44 @@
+module.exports = function Gamma(options,UI){
+
+    var output;
+
+    function draw(input,callback,progressObj){
+
+        progressObj.stop(true);
+        progressObj.overrideFlag = true;
+
+        var step = this;
+
+        function changePixel(r, g, b, a){
+            var val = options.adjustment || 0.2;
+
+            r = Math.pow(r / 255, val) * 255;
+            g = Math.pow(g / 255, val) * 255;
+            b = Math.pow(b / 255, val) * 255;
+
+            return [r , g, b, a];
+        }
+
+        function output(image,datauri,mimetype){
+
+            step.output = {src:datauri,format:mimetype};
+
+        }
+
+        return require('../_nomodule/PixelManipulation.js')(input, {
+            output: output,
+            changePixel: changePixel,
+            format: input.format,
+            image: options.image,
+            inBrowser: options.inBrowser,
+            callback: callback
+        });
+
+    }
+    return {
+        options: options,
+        draw:  draw,
+        output: output,
+        UI: UI
+    }
+}

src/modules/GammaCorrection/index.js

@@ -0,0 +1,4 @@
+module.exports = [
+    require('./Module'),
+    require('./info.json')
+]

src/modules/GammaCorrection/info.json

@@ -0,0 +1,12 @@
+{
+    "name": "Gamma Correction",
+    "description": "Apply gamma correction on the image <a href='https://en.wikipedia.org/wiki/Gamma_correction'>Read more</a>",
+    "inputs": {
+        "adjustment": {
+            "type": "float",
+            "desc": "gamma correction (inverse of actual gamma factor) for the new image",
+            "default": 0.2
+        }
+    },
+    "docs-link":"https://github.com/publiclab/image-sequencer/blob/main/docs/MODULES.md"
+}

src/modules/Gradient/info.json

@@ -1,5 +1,6 @@
 {
     "name": "Gradient",
     "description": "Gives a gradient of the image",
-    "inputs": {}
+    "inputs": {},
+    "docs-link":"https://github.com/publiclab/image-sequencer/blob/main/docs/MODULES.md"
 }

src/modules/Histogram/Module.js

@@ -0,0 +1,93 @@
+/*
+ * Calculates the histogram of the image
+ */
+module.exports = function Channel(options, UI) {
+
+    var output;
+
+    function draw(input, callback, progressObj) {
+
+        options.gradient = options.gradient || "true";
+        options.gradient = JSON.parse(options.gradient);
+
+        progressObj.stop(true);
+        progressObj.overrideFlag = true;
+
+        var step = this, hist = new Array(256).fill(0);
+
+        function changePixel(r, g, b, a) {
+            let pixVal = Math.round((r + g + b) / 3);
+            hist[pixVal]++;
+            return [r, g, b, a];
+        }
+
+        function extraManipulation(pixels) {
+            // if (!options.inBrowser)
+            //     require('fs').writeFileSync('./output/histo.txt', hist.reduce((tot, cur, idx) => `${tot}\n${idx} : ${cur}`, ``));
+            var newarray = new Uint8Array(4 * 256 * 256);
+            pixels.data = newarray;
+            pixels.shape = [256, 256, 4];
+            pixels.stride[1] = 4 * 256;
+
+            for (let x = 0; x < 256; x++) {
+                for (let y = 0; y < 256; y++) {
+                    pixels.set(x, y, 0, 255);
+                    pixels.set(x, y, 1, 255);
+                    pixels.set(x, y, 2, 255);
+                    pixels.set(x, y, 3, 255);
+                }
+            }
+
+            let startY = options.gradient ? 10 : 0;
+            if (options.gradient) {
+                for (let x = 0; x < 256; x++) {
+                    for (let y = 0; y < 10; y++) {
+                        pixels.set(x, 255 - y, 0, x);
+                        pixels.set(x, 255 - y, 1, x);
+                        pixels.set(x, 255 - y, 2, x);
+                    }
+                }
+            }
+
+            let convfactor = (256 - startY) / Math.max(...hist);
+
+            for (let x = 0; x < 256; x++) {
+                let pixCount = Math.round(convfactor * hist[x]);
+
+                for (let y = startY; y < pixCount; y++) {
+                    pixels.set(x, 255 - y, 0, 204);
+                    pixels.set(x, 255 - y, 1, 255);
+                    pixels.set(x, 255 - y, 2, 153);
+                }
+            }
+
+            return pixels;
+        }
+
+        function output(image, datauri, mimetype) {
+
+            // This output is accesible by Image Sequencer
+            step.output = { src: datauri, format: mimetype };
+
+        }
+
+        return require('../_nomodule/PixelManipulation.js')(input, {
+            output: output,
+            changePixel: changePixel,
+            extraManipulation: extraManipulation,
+            format: input.format,
+            image: options.image,
+            inBrowser: options.inBrowser,
+            callback: callback
+        });
+
+    }
+
+    return {
+        options: options,
+        //setup: setup, // optional
+        draw: draw,
+        output: output,
+        UI: UI
+    }
+}

src/modules/Histogram/index.js

@@ -0,0 +1,4 @@
+module.exports = [
+    require('./Module.js'),
+    require('./info.json')
+]

src/modules/Histogram/info.json

@@ -0,0 +1,16 @@
+{
+    "name": "Histogram",
+    "description": "Calculates the histogram for the image",
+    "inputs": {
+        "gradient": {
+            "type": "select",
+            "desc": "Toggle the gradient along x-axis",
+            "default": "true",
+            "values": [
+                "true",
+                "false"
+            ]
+        }
+    },
+    "docs-link":"https://github.com/publiclab/image-sequencer/blob/main/docs/MODULES.md"
+}

src/modules/ImportImage/Ui.js

@@ -8,8 +8,8 @@ module.exports = function ImportImageModuleUi(step, ui) {
 
     // add a file input listener
     var dropZone ='\
-    <div style="padding: 30px;margin: 10px 20% 30px;border: 4px dashed #ccc;border-radius: 8px;text-align: center;color: #444;" id="' + dropzoneId + '">\
-      <p>\
+    <div class="dropzone" style="padding: 30px;margin: 10px 20% 30px;border: 4px dashed #ccc;border-radius: 8px;text-align: center;color: #444;" id="' + dropzoneId + '">\
+          <p>\
         <i>Select or drag in an image to overlay.</i>\
       </p>\
       <center>\

src/modules/ImportImage/info.json

@@ -8,5 +8,6 @@
       "desc": "URL of image to import",
       "default": "./images/monarch.png"
     }
-  }
+  },
+  "docs-link":"https://github.com/publiclab/image-sequencer/blob/main/docs/MODULES.md"
 }

src/modules/Invert/info.json

@@ -2,5 +2,6 @@
   "name": "Invert",
   "description": "Inverts the image.",
   "inputs": {
-  }
+  },
+  "docs-link":"https://github.com/publiclab/image-sequencer/blob/main/docs/MODULES.md"
 }

src/modules/Ndvi/Ui.js

@@ -17,7 +17,10 @@ module.exports = function CropModuleUi(step, ui) {
             var offset = $(this).offset();
             var xPos = e.pageX - offset.left;
             var yPos = e.pageY - offset.top;
-            ndviImage[0].title = "NDVI: " + canvas.getContext('2d').getImageData(xPos, yPos, 1, 1).data[0];
+            var ndvi = canvas.getContext('2d').getImageData(xPos, yPos, 1, 1).data[0];
+            ndvi = ndvi/127.5 - 1 ;
+            ndvi = ndvi.toFixed(2);
+            ndviImage[0].title = "NDVI: " + ndvi;
         });
     }
     // step.imgSelector is not defined, imgElement is:

src/modules/Ndvi/info.json

@@ -8,5 +8,6 @@
       "default": "red",
       "values": ["red", "blue"]
     }
-  }
+  },
+  "docs-link":"https://github.com/publiclab/image-sequencer/blob/main/docs/MODULES.md"
 }

src/modules/NdviColormap/info.json

@@ -2,5 +2,6 @@
     "name": "NDVI-Colormap",
     "description": "Sequentially Applies NDVI and Colormap steps",
     "inputs": {},
-    "length": 2
+    "length": 2,
+    "docs-link":"https://github.com/publiclab/image-sequencer/blob/main/docs/MODULES.md"
 }

src/modules/Overlay/Module.js

@@ -15,13 +15,25 @@ module.exports = function Dynamic(options, UI, util) {
 
         var step = this;
 
+        var parseCornerCoordinateInputs = require('../../util/ParseInputCoordinates');
+
+        //parse the inputs
+        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) {

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",
@@ -17,5 +17,6 @@
             "desc": "offset to the output of the step on which the output of the last step is overlayed",
             "default": -2
         }
-    }
+    },
+    "docs-link":"https://github.com/publiclab/image-sequencer/blob/main/docs/MODULES.md"
 }

src/modules/PaintBucket/Module.js

@@ -0,0 +1,47 @@
+module.exports = function PaintBucket(options, UI) {
+
+    var output;
+
+    function draw(input, callback, progressObj) {
+
+        progressObj.stop(true);
+        progressObj.overrideFlag = true;
+
+        var step = this;
+
+
+        function changePixel(r, g, b, a) {
+            return [r, g, b, a]
+        }
+
+        function extraManipulation(pixels) {
+            
+
+            pixels = require('./PaintBucket')(pixels, options)
+            return pixels
+            
+        }
+
+        function output(image, datauri, mimetype) {
+            // This output is accesible by Image Sequencer
+            step.output = { src: datauri, format: mimetype };
+        }
+
+        return require('../_nomodule/PixelManipulation.js')(input, {
+            output: output,
+            changePixel: changePixel,
+            extraManipulation: extraManipulation,
+            format: input.format,
+            image: options.image,
+            inBrowser: options.inBrowser,
+            callback: callback
+        });
+    }
+
+    return {
+        options: options,
+        draw: draw,
+        output: output,
+        UI: UI
+    }
+}

src/modules/PaintBucket/PaintBucket.js

@@ -0,0 +1,64 @@
+module.exports = exports = function(pixels, options){
+
+      var fillColor = options.fillColor || '100 100 100 255',
+          x = parseInt(options.startingX) || 10,
+          y = parseInt(options.startingY) || 10,
+          height = pixels.shape[1],
+          width = pixels.shape[0],
+          r = pixels.get(x, y, 0),
+          g = pixels.get(x,y,1),
+          b = pixels.get(x,y,2),
+          a = pixels.get(x, y, 3),
+          queuex = [x],
+          queuey = [y],
+          curry, currx,
+          north,
+          south,
+          n,
+          tolerance = parseInt(options.tolerance) || 10,
+          maxFactor = (1 + tolerance/100),
+          minFactor = (1 - tolerance/100);
+
+      fillColor = fillColor.split(" ");
+      function isSimilar(currx, curry){
+        return (pixels.get(currx, curry, 0) > r*minFactor && pixels.get(currx, curry, 0) < r*maxFactor &&
+                pixels.get(currx, curry, 1) > g*minFactor && pixels.get(currx, curry, 1) < g*maxFactor &&
+                pixels.get(currx, curry, 2) > b*minFactor && pixels.get(currx, curry, 2) < b*maxFactor &&
+                pixels.get(currx, curry, 3) > a*minFactor && pixels.get(currx, curry, 3) < a*maxFactor);
+      }
+
+      while (queuey.length) {
+        currx = queuex.pop()
+        curry = queuey.pop()
+        
+
+        if (isSimilar(currx, curry)) {
+          north = south = curry
+
+          do {
+            north -= 1
+          } while (isSimilar(currx, north) && north >= 0)
+
+          do {
+            south += 1
+          } while (isSimilar(currx, south) && south < height)
+          
+          for (n = north + 1; n < south; n += 1) {
+            pixels.set(currx, n, 0, fillColor[0]);
+            pixels.set(currx, n, 1, fillColor[1]);
+            pixels.set(currx, n, 2, fillColor[2]);
+            pixels.set(currx, n, 3, fillColor[3]);
+            if (isSimilar(currx - 1, n)) {
+              queuex.push(currx - 1)
+              queuey.push(n)
+            }
+            if (isSimilar(currx + 1, n)) {
+              queuex.push(currx + 1)
+              queuey.push(n)
+            }
+          }
+        }
+      }
+
+      return pixels;
+}

src/modules/PaintBucket/index.js

@@ -0,0 +1,4 @@
+module.exports = [
+    require('./Module'),
+    require('./info.json')
+]

src/modules/PaintBucket/info.json

@@ -0,0 +1,30 @@
+{
+  "name": "PaintBucket",
+  "description": "Fill color in pixels",
+  "inputs": {
+      "startingX": {
+          "type": "integer",
+          "desc": "value of the starting x-coordinate",
+          "default": "10"
+      },
+      "startingY": {
+          "type": "integer",
+          "desc": "value of the starting y-coordinate",
+          "default": "10"
+      },
+      "fillColor": {
+        "type": "String",
+        "desc": "four space separated numbers representing the RGBA values of fill-color",
+        "default": "100 100 100 255",
+        "placeholder": "100 100 100 255"
+      },
+      "tolerance": {
+        "type": "range",
+        "desc": "% tolerance",
+        "default": "10",
+        "min": "5",
+        "max": "15",
+        "step": "1"
+      }
+  } 
+}

src/modules/Resize/Module.js

@@ -0,0 +1,71 @@
+/*
+ * Resize the image by given percentage value
+ */
+module.exports = function Resize(options, UI) {
+
+    var output;
+
+    function draw(input, callback, progressObj) {
+
+        options.resize = options.resize || "125%";
+
+        progressObj.stop(true);
+        progressObj.overrideFlag = true;
+
+        var step = this;
+
+        var imagejs = require('imagejs');
+
+        function changePixel(r, g, b, a) {
+            return [r, g, b, a]
+        }
+
+        function extraManipulation(pixels) {
+            // value above 100% scales up, and below 100% scales down
+            var resize_value = parseInt(options.resize.slice(0, -1));
+
+            var new_width,
+                new_height;
+
+            new_width = Math.round(pixels.shape[0] * (resize_value / 100));
+            new_height = Math.round(pixels.shape[1] * (resize_value / 100));
+
+            var bitmap = new imagejs.Bitmap({width: pixels.shape[0], height: pixels.shape[1]});
+            bitmap._data.data = pixels.data;
+
+
+            var resized = bitmap.resize({
+                width: new_width, height: new_height,
+                algorithm: "bicubicInterpolation"
+            });
+
+            pixels.data = resized._data.data;
+            pixels.shape = [new_width,new_height,4];
+            pixels.stride[1] = 4 * new_width;
+
+            return pixels;
+        }
+
+        function output(image, datauri, mimetype) {
+            // This output is accesible by Image Sequencer
+            step.output = { src: datauri, format: mimetype };
+        }
+
+        return require('../_nomodule/PixelManipulation.js')(input, {
+            output: output,
+            changePixel: changePixel,
+            extraManipulation: extraManipulation,
+            format: input.format,
+            image: options.image,
+            inBrowser: options.inBrowser,
+            callback: callback
+        });
+    }
+
+    return {
+        options: options,
+        draw: draw,
+        output: output,
+        UI: UI
+    }
+}

src/modules/Resize/index.js

@@ -0,0 +1,4 @@
+module.exports = [
+    require('./Module'),
+    require('./info.json')
+]

src/modules/Resize/info.json

@@ -0,0 +1,12 @@
+{
+  "name": "Resize",
+  "description": "Resize image by given percentage value",
+  "inputs": {
+    "resize": {
+      "type": "string",
+      "desc": "Percentage value of the resize",
+      "default": "125%"
+    }
+  },
+  "docs-link":"https://github.com/publiclab/image-sequencer/blob/main/docs/MODULES.md"
+}

src/modules/Rotate/Module.js

@@ -0,0 +1,62 @@
+/*
+ * Rotates image 
+ */
+module.exports = function Rotate(options, UI) {
+
+    var output;
+
+    function draw(input, callback, progressObj) {
+
+        options.rotate = parseInt(options.rotate) || 0;
+
+        progressObj.stop(true);
+        progressObj.overrideFlag = true;
+
+        var step = this;
+
+        var imagejs = require('imagejs');
+
+        function changePixel(r, g, b, a) {
+            return [r, g, b, a]
+        }
+
+        function extraManipulation(pixels) {
+            var rotate_value = (options.rotate)%360;
+
+            if(rotate_value%360 == 0)
+            return pixels;
+
+            var bitmap = new imagejs.Bitmap({width: pixels.shape[0], height: pixels.shape[1]});
+            bitmap._data.data = pixels.data;
+
+            var rotated = bitmap.rotate({
+                degrees: rotate_value, 
+            });
+            pixels.data = rotated._data.data;
+            
+            return pixels;
+        }
+
+        function output(image, datauri, mimetype) {
+            // This output is accesible by Image Sequencer
+            step.output = { src: datauri, format: mimetype };
+        }
+
+        return require('../_nomodule/PixelManipulation.js')(input, {
+            output: output,
+            changePixel: changePixel,
+            extraManipulation: extraManipulation,
+            format: input.format,
+            image: options.image,
+            inBrowser: options.inBrowser,
+            callback: callback
+        });
+    }
+
+    return {
+        options: options,
+        draw: draw,
+        output: output,
+        UI: UI
+    }
+}

src/modules/Rotate/index.js

@@ -0,0 +1,4 @@
+module.exports = [
+    require('./Module'),
+    require('./info.json')
+]

src/modules/Rotate/info.json

@@ -0,0 +1,15 @@
+{
+    "name": "Rotate",
+    "description": "Rotates image by specified degrees",
+    "inputs": {
+      "rotate": {
+        "type": "range",
+        "desc": "Angular value for rotation in degrees",
+        "default": "90",
+        "min": "0",
+        "max": "360",
+        "step": "1"
+      }
+    },
+    "docs-link":"https://github.com/publiclab/image-sequencer/blob/main/docs/MODULES.md"
+  }

src/modules/Saturation/info.json

@@ -3,9 +3,13 @@
     "description": "Change the saturation of the image by given value, from 0-1, with 1 being 100% saturated.",
     "inputs": {
         "saturation": {
-            "type": "integer",
+            "type": "range",
             "desc": "saturation for the new image between 0 and 2, 0 being black and white and 2 being highly saturated",
-            "default": 0
+            "default": "0.5",
+            "min": "0",
+            "max": "2",
+            "step": "0.1"
         }
-    }
+    },
+    "docs-link":"https://github.com/publiclab/image-sequencer/blob/main/docs/MODULES.md"
 }

src/modules/WhiteBalance/Module.js

@@ -0,0 +1,86 @@
+module.exports = function Balance(options, UI) {
+
+    var output;
+
+    function draw (input, callback, progressObj) {
+
+      options.temperature = (options.temperature > "40000") ? "40000" : options.temperature
+
+        progressObj.stop(true);
+        progressObj.overrideFlag = true;
+
+        var step = this;
+
+        function changePixel(r, g, b, a) {
+            return [r, g, b ,a]
+        }
+
+        function extraManipulation(pixels) {
+
+            let temp = parseInt(options.temperature)
+            temp /= 100
+
+            let r, g, b;
+
+            if (temp <= 66) {
+                r = 255;
+                g = Math.min(Math.max(99.4708025861 * Math.log(temp) - 161.1195681661, 0), 255);
+            } else {
+                r = Math.min(Math.max(329.698727446 * Math.pow(temp - 60, -0.1332047592), 0), 255);
+                g = Math.min(Math.max(288.1221695283 * Math.pow(temp - 60, -0.0755148492), 0), 255);
+            }
+
+            if (temp >= 66) {
+                b = 255;
+            } else if (temp <= 19) {
+                b = 0;
+            } else {
+                b = temp - 10;
+                b = Math.min(Math.max(138.5177312231 * Math.log(b) - 305.0447927307, 0), 255);
+            }
+
+            for(let i=0; i<pixels.shape[0]; i++) {
+              for (let j=0; j<pixels.shape[1]; j++) {
+
+                  r_data = pixels.get(i,j,0)
+                  r_new_data = (255/r) * r_data
+                  pixels.set(i,j,0,r_new_data)
+
+                  g_data = pixels.get(i,j,1)
+                  g_new_data = (255/g) * g_data
+                  pixels.set(i,j,1,g_new_data)
+
+                  b_data = pixels.get(i,j,2)
+                  b_new_data = (255/b) * b_data
+                  pixels.set(i,j,2,b_new_data)
+              }
+            }
+
+          return pixels
+        }
+
+        function output (image, datauri, mimetype){
+
+            step.output = {src:datauri,format:mimetype};
+
+        }
+
+        return require('../_nomodule/PixelManipulation.js')(input, {
+            output: output,
+            changePixel: changePixel,
+            extraManipulation: extraManipulation,
+            format: input.format,
+            image: options.image,
+            inBrowser: options.inBrowser,
+            callback: callback
+        });
+    }
+
+    return {
+        options: options,
+        draw: draw,
+        output: output,
+        UI: UI
+    }
+
+}

src/modules/WhiteBalance/index.js

@@ -0,0 +1,4 @@
+module.exports = [
+    require('./Module'),
+    require('./info.json')
+]

src/modules/WhiteBalance/info.json

@@ -0,0 +1,12 @@
+{
+    "name": "White Balance",
+    "description": "Change the colour balance of the image by adjusting the colour temperature.",
+    "inputs": {
+      "temperature": {
+        "type": "string",
+        "desc": "Temperature between 0 - 40,000 Kelvin",
+        "default": "6000"
+      }
+    },
+    "docs-link":"https://github.com/publiclab/image-sequencer/blob/main/docs/MODULES.md"
+}

src/ui/SetInputStep.js

@@ -5,9 +5,11 @@ function setInputStepInit() {
 
     var dropzone = $(options.dropZoneSelector);
     var fileInput = $(options.fileInputSelector);
+    var takePhoto = $(options.takePhotoSelector);
  
     var onLoad = options.onLoad;
- 
+    var onTakePhoto = options.onTakePhoto;
+
     var reader = new FileReader();
  
     function handleFile(e) {
@@ -25,8 +27,53 @@ function setInputStepInit() {
  
       reader.readAsDataURL(file);
     }
+
+    function runVideo(){
+      /* event handler for Take-Photo */
+      document.getElementById('video').style.display='inline';
+      document.getElementById('capture').style.display='inline';
+      document.getElementById('close').style.display='inline';
+      
+      var video = document.getElementById('video');
+      canvas = document.getElementById('canvas'),
+      context = canvas.getContext('2d'),
+      vendorUrl = window.URL || window.webkitURL;
+
+      const constraints = { audio: false,video: true};
+
+      function handleSuccess(stream) {
+        window.stream = stream; // make stream available to browser console
+        video.srcObject = stream;
+        video.onloadedmetadata = function(e) {
+          video.play();
+        };
+        document.getElementById('close').addEventListener('click', function () {
+          stopStream(stream);
+         });
+      }
+      function handleError(error) {
+        console.log('navigator.getUserMedia error: ', error);
+      }
+  navigator.mediaDevices.getUserMedia(constraints).then(handleSuccess).catch(handleError);
+  
+
+  document.getElementById('capture').addEventListener('click', function(stream){
+    context.drawImage(video, 0, 0, 400, 300);
+    options.onTakePhoto(canvas.toDataURL());
+  });
+
+  function stopStream(stream) {
+    stream.getVideoTracks().forEach(function (track) {
+        track.stop();
+    });
+    document.getElementById('video').style.display='none';
+    document.getElementById('capture').style.display='none';
+    document.getElementById('close').style.display='none';
+  }
+}
  
     fileInput.on('change', handleFile);
+    takePhoto.on('click', runVideo);
  
     dropzone[0].addEventListener('drop', handleFile, false);