changed color of cache button to blue also changed it's position (#2200)

Bumps [jquery](https://github.com/jquery/jquery) from 3.4.1 to 3.6.2.
- [Release notes](https://github.com/jquery/jquery/releases)
- [Commits](https://github.com/jquery/jquery/compare/3.4.1...3.6.2)

---
updated-dependencies:
- dependency-name: jquery
  dependency-type: direct:production
  update-type: version-update:semver-minor
...

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

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

.github/CODEOWNERS

@@ -0,0 +1,75 @@
+# <-- DOCS FOR THIS FILE -->
+# This is a comment.
+# Each line is a file pattern followed by one or more owners.
+
+# These owners will be the default owners for everything in
+# the repo. Unless a later match takes precedence,
+# @global-owner1 and @global-owner2 will be requested for
+# review when someone opens a pull request.
+# *       @global-owner1 @global-owner2
+
+# Order is important; the last matching pattern takes the most
+# precedence. When someone opens a pull request that only
+# modifies JS files, only @js-owner and not the global
+# owner(s) will be requested for a review.
+# *.js    @js-owner
+
+# You can also use email addresses if you prefer. They'll be
+# used to look up users just like we do for commit author
+# emails.
+# *.go docs@example.com
+
+# In this example, @doctocat owns any files in the build/logs
+# directory at the root of the repository and any of its
+# subdirectories.
+# /build/logs/ @doctocat
+
+# The `docs/*` pattern will match files like
+# `docs/getting-started.md` but not further nested files like
+# `docs/build-app/troubleshooting.md`.
+# docs/*  docs@example.com
+
+# In this example, @octocat owns any file in an apps directory
+# anywhere in your repository.
+# apps/ @octocat
+
+# In this example, @doctocat owns any file in the `/docs`
+# directory in the root of your repository.
+# /docs/ @doctocat
+# <-- /DOCS FOR THIS FILE -->
+
+# <-- COMMON TO ALL MAINTAINERS -->
+/*.json @publiclab/is-maintainers
+/*.md @publiclab/is-maintainers
+/*.lock @ubliclab/is-maintainers
+/Gruntfile.js @publiclab/is-maintainers
+/.github/ @publiclab/is-maintainers
+/scripts/ @publiclab/is-maintainers
+# <-- /COMMON TO ALL MAINTAINERS -->
+
+# <-- SPECIFIC MAINTAINERS -->
+/index.js @publiclab/is-cli-maintainers
+/src/cli/ @publiclab/is-cli-maintainers
+/src/CliUtils.js @publiclab/is-cli-maintainers
+
+/src/*.js @publiclab/is-core-maintainers
+/src/*.json @publiclab/is-core-maintainers
+/src/util/ @publiclab/is-core-maintainers
+/test/core/* @publiclab/is-core-maintainers
+
+/src/modules/ @publiclab/is-module-maintainers
+/docs/ @publiclab/is-module-maintainers
+
+/test/ @publiclab/is-tests-maintainers
+/jest* @publiclab/is-tests-maintainers
+/eslint* @publiclab/is-tests-maintainers
+/travis* @publiclab/is-tests-maintainers
+.travis.yml @publiclab/is-tests-maintainers
+.gitpod* @publiclab/is-tests-maintainers
+/gitpod* @publiclab/is-tests-maintainers
+
+/examples/ @publiclab/is-ui-maintainers
+/icons/ @publiclab/is-ui-maintainers
+/test/ui-2/test/* @publiclab/is-ui-maintainers
+/test/ui/spec/* @publiclab/is-ui-maintainers
+# <-- /SPECIFIC MAINTAINERS -->

.github/ISSUE_TEMPLATE/bug_report.md

@@ -1,3 +1,10 @@
+---
+name: Bug report 🐞
+about: Help us identify and fix a bug!
+title: ''
+labels: bug
+---
+
 ### Please describe the problem (or idea)
 
 > What happened just before the problem occurred? Or what problem could this idea solve?
@@ -10,13 +17,13 @@
 
 ### Please show us where to look
 
-https://beta.sequencer.publiclab.org
+Paste in a full URL, starting with:
 
+> https://beta.sequencer.publiclab.org/
 
-### What's your PublicLab.org username?
-
-> This can help us diagnose the issue:
+If you can share a screenshot or a GIF that is EXTRA helpful! 💖
 
+If you can see a version number in the upper right, please note that!
 
 
 ### Browser, version, and operating system

.github/ISSUE_TEMPLATE/enhancement template.md

@@ -0,0 +1,25 @@
+# New Enhancement Request
+
+Describe your enhancement
+
+
+
+
+
+
+ What does your enhancement do?
+
+ Upload Screenshot of your enhancement
+ 
+ ### Please show us where to look
+ Paste in a full URL, starting with:
+ ### Problem it can solve
+ 
+   what problem could this enhancement solve?
+   
+   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
+### Thank you :)

.github/ISSUE_TEMPLATE/feature request.md

@@ -0,0 +1,22 @@
+# New Feature Request
+
+Describe your feature
+
+
+
+
+
+
+ What does your feature do?
+
+ Upload Screenshot of your implementation/feature
+ 
+ ### Please show us where to look
+ Paste in a full URL, starting with:
+ ### Problem it can solve
+ 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
+### Thank you :)

.github/ISSUE_TEMPLATE/release_workflow.md

@@ -0,0 +1,52 @@
+---
+name: New release checklist ✅
+about: Coordinate steps to publish a new release
+title: 'Checklist and coordination for v0.0.0 major/minor/patch release'
+labels: release
+assignees: '@publiclab/is-maintainers'
+---
+
+This template guides us through the steps of creating a new release, based on conversation and testing in [#1692](https://github.com/publiclab/image-sequencer/issues/1692).
+
+Discuss with @publiclab/is-maintainers if anything is ambiguous!
+
+<!-- NOTE: Change v0.0.0 to the appropriate release version -->
+
+* [x] open an issue using the "release" template with this checklist with title `Checklist and coordination for v0.0.0 major/minor/patch release` (see [semantic versioning](https://docs.npmjs.com/about-semantic-versioning/))
+* [ ] create a release draft in https://github.com/publiclab/image-sequencer/releases
+* [ ] auto-compile release notes and copy below from corresponding release draft
+* [ ] open a pull request with updated version numbers
+    * [ ] update version number in `package.json` (ex #1695)
+    * [ ] update version number in `examples/sw.js` (ex #1734)
+    * [ ] run `npm install` to update `package-lock.json` (from recent node version - 16 at time of writing, in GitPod should work)
+    * [ ] check in `package-lock.json`
+* [ ] finalize and merge to `main` branch (freeze merges to `main` branch until next step)
+
+Now, move to `stable` branch:
+
+* [ ] force push from `main` to `stable`
+* [ ] then in `stable` branch, compile `dist/` files with `grunt build`
+* [ ] add `dist/` files with `git add -f dist/*` and commit them to `stable` branch
+* [ ] publish `stable` branch to `npm` with `npm publish` (logging in first as necessary)
+* [ ] push local `stable` branch up to origin github.com/publiclab/image-sequencer.git with `git push`
+
+Draft a release:
+
+* [ ] [create a release on GitHub](https://github.com/publiclab/image-sequencer/releases) and reconcile with features description + release notes from below
+* [ ] tag version number branch (i.e. `v0.0.0`) based on `stable` or choose `stable`
+* [ ] publish to live Github pages [demo](https://sequencer.publiclab.org) (with [bash script](https://github.com/publiclab/image-sequencer/pull/1703) from `/scripts/update-demo`) (from within GitPod works well)
+* [ ] move anything necessary to next release project, i.e. <!-- Update this link -->https://github.com/publiclab/image-sequencer/projects/[insert project number]
+* [ ] close this issue!
+
+Noting we're now in this process in https://github.com/publiclab/image-sequencer/issues/1751 for `v3.7.0`.
+
+****
+
+### Release notes
+Compile and edit release notes below, to be copied into the release description.
+
+#### Added
+
+#### Fixed
+
+#### Changed

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,16 +1,19 @@
-Fixes #0000  (<=== Replace `0000` with the Issue Number)
+<!--- (Replace `0000` with the Issue Number below) --->
+Fixes #0000  
 
-Make sure these boxes are checked before your pull request (PR) is ready to be reviewed and merged. Thanks!
+
+<!---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 run test-all`
 * [ ] code is in uniquely-named feature branch and has no merge conflicts
 * [ ] PR is descriptively titled
-* [ ] ask `@publiclab/is-reviewers` for help, in a comment below
+* [ ] ask `@publiclab/is-reviewers` for help, in a comment below 
+* [ ] at least 2 reviews required for getting pull request merged
 * [ ] Insert-step functionality is working correct as expected.
-> 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!
+<!--- 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.
+<!---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
-Please make sure to get at least two reviews before asking for merging the PR as that would make the PR more reliable on our part
-Thanks!
+<!---Please be sure you've reviewed our contribution guidelines at https://publiclab.org/contributing-to-public-lab-software--->
+<!---Please make sure to get at least two reviews before asking for merging the PR as that would make the PR more reliable on our part
+Thanks!--->

.github/config.yml

@@ -4,22 +4,27 @@
 
 # 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!
+ Thanks for opening your first issue here! This space is [protected by our Code of Conduct](https://publiclab.org/conduct) - and we're here to help.
+ 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!
+ Don't forget to join our [PublicLab Gitter channel](https://gitter.im/publiclab/publiclab) and our [ImageSequencer Gitter Channel](https://gitter.im/publiclab/image-sequencer) for some brainstorming discussions. 
 # 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!
+ Thanks for opening this pull request! This space is [protected by our Code of Conduct](https://publiclab.org/conduct).
  There may be some errors, **but don't worry!** We're here to help! 👍🎉😄
+ Also please refer (https://github.com/publiclab/image-sequencer/blob/main/README.md) for installation 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 be published to https://beta.sequencer.publiclab.org in a day or two. 
- 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!
+ Your code will be published to https://beta.sequencer.publiclab.org in a day or two. Please test out your work on this testing server and report back with a comment that all has gone well!
+ In the meantime, can you tell us your Twitter handle so we can thank you properly also do join our weekly check-in to share your this week goal and the awesome work you did 😃. 
+ Please find the link **pinned in the issue section**
+ Now that you've completed this, you can help someone else take their first step! Try looking at this list of `first-timers-only` issues, and see if someone else is waiting for feedback, or even stuck! 😕
+ People often get stuck at the same steps, so you might be able to help someone get unstuck, or help lead them to some documentation that'd help. Reach out and be encouraging and friendly! 😄 🎉  
  See: [Public Lab's coding community!](https://code.publiclab.org)
 
 # It is recommended to include as many gifs and emojis as possible

.github/dependabot.yml

@@ -0,0 +1,25 @@
+version: 2
+updates:
+- package-ecosystem: npm
+  directory: "/"
+  schedule:
+    interval: daily
+  open-pull-requests-limit: 10
+  ignore:
+  - dependency-name: jest-puppeteer
+    versions:
+    - 5.0.1
+    - 5.0.2
+  - dependency-name: geotiff
+    versions:
+    - 1.0.2
+  - dependency-name: "@babel/core"
+    versions:
+    - 7.13.13
+  - dependency-name: puppeteer
+    versions:
+    - 5.2.1
+    - 7.1.0
+  - dependency-name: tape
+    versions:
+    - 5.1.1

.github/workflows/rebase.yml

@@ -0,0 +1,21 @@
+name: Automatic Rebase
+# https://github.com/marketplace/actions/automatic-rebase
+
+on:
+  issue_comment:
+    types: [created]
+jobs:
+  rebase:
+    name: Rebase
+    if: github.event.issue.pull_request != '' && contains(github.event.comment.body, '/rebase')
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout the latest code
+        uses: actions/checkout@v2
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          fetch-depth: 0 # otherwise, you will fail to push refs to dest repo
+      - name: Automatic Rebase
+        uses: cirrus-actions/rebase@1.4
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/tests.yml

@@ -0,0 +1,209 @@
+name: tests
+on: [pull_request]
+jobs:
+  base-tests:
+    runs-on: ubuntu-18.04
+    steps:
+    - uses: actions/checkout@v2
+    - name: Setup node
+      uses: actions/setup-node@v2
+      with:
+        node-version: '14'
+        check-latest: true
+    - name: Cache node modules
+      uses: actions/cache@v2
+      env:
+        cache-name: cache-node-modules
+      with:
+        path: ~/.npm
+        key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
+        restore-keys: |
+          ${{ runner.os }}-build-${{ env.cache-name }}-
+          ${{ runner.os }}-build-
+          ${{ runner.os }}-
+    - name: Install Dependencies
+      run: npm install
+    - name: "Base istanbul/tape node tests"
+      run: npm test
+
+  benchmark-tests:
+    runs-on: ubuntu-18.04
+    steps:
+    - uses: actions/checkout@v2
+    - name: Setup node
+      uses: actions/setup-node@v2
+      with:
+        node-version: '14'
+        check-latest: true
+    - name: Cache node modules
+      uses: actions/cache@v2
+      env:
+        cache-name: cache-node-modules
+      with:
+        path: ~/.npm
+        key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
+        restore-keys: |
+          ${{ runner.os }}-build-${{ env.cache-name }}-
+          ${{ runner.os }}-build-
+          ${{ runner.os }}-
+    - name: Install Dependencies
+      run: npm install
+    - name: "Benchmark tests"
+      run: npm run benchmark
+
+  gif-tests:
+    runs-on: ubuntu-18.04
+    steps:
+    - uses: actions/checkout@v2
+    - name: Setup node
+      uses: actions/setup-node@v2
+      with:
+        node-version: '14'
+        check-latest: true
+    - name: Cache node modules
+      uses: actions/cache@v2
+      env:
+        cache-name: cache-node-modules
+      with:
+        path: ~/.npm
+        key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
+        restore-keys: |
+          ${{ runner.os }}-build-${{ env.cache-name }}-
+          ${{ runner.os }}-build-
+          ${{ runner.os }}-
+    - name: Install Dependencies
+      run: npm install
+    - name: "Gif tests"
+      run: npm run gif-test
+
+  browserify-core-tests:
+    runs-on: ubuntu-18.04
+    steps:
+    - uses: actions/checkout@v2
+    - name: Setup node
+      uses: actions/setup-node@v2
+      with:
+        node-version: '14'
+        check-latest: true
+    - name: Cache node modules
+      uses: actions/cache@v2
+      env:
+        cache-name: cache-node-modules
+      with:
+        path: ~/.npm
+        key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
+        restore-keys: |
+          ${{ runner.os }}-build-${{ env.cache-name }}-
+          ${{ runner.os }}-build-
+          ${{ runner.os }}-
+    - name: Install Dependencies
+      run: npm install
+    - run: sudo apt-get install xvfb
+    - name: "Browserify core tests and run"
+      run: grunt tests && xvfb-run --auto-servernum npm run core-tests
+
+  jsmine-ui-tests:
+    runs-on: ubuntu-18.04
+    steps:
+    - uses: actions/checkout@v2
+    - name: Setup node
+      uses: actions/setup-node@v2
+      with:
+        node-version: '14'
+        check-latest: true
+    - name: Cache node modules
+      uses: actions/cache@v2
+      env:
+        cache-name: cache-node-modules
+      with:
+        path: ~/.npm
+        key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
+        restore-keys: |
+          ${{ runner.os }}-build-${{ env.cache-name }}-
+          ${{ runner.os }}-build-
+          ${{ runner.os }}-
+    - name: Install Dependencies
+      run: npm install
+    - name: "Jasmine UI tests (mocked browser env)"
+      run: npm run test-ui
+
+  jest-ui-tests:
+    runs-on: ubuntu-18.04
+    steps:
+    - uses: actions/checkout@v2
+    - name: Setup node
+      uses: actions/setup-node@v2
+      with:
+        node-version: '14'
+        check-latest: true
+    - name: Cache node modules
+      uses: actions/cache@v2
+      env:
+        cache-name: cache-node-modules
+      with:
+        path: ~/.npm
+        key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
+        restore-keys: |
+          ${{ runner.os }}-build-${{ env.cache-name }}-
+          ${{ runner.os }}-build-
+          ${{ runner.os }}-
+    - name: Install Dependencies
+      run: npm install
+    - name: "jest-puppeteer UI tests (full browser env)"
+      run: npm run test-ui-2    
+
+  cli-tests:
+    runs-on: ubuntu-18.04
+    steps:
+    - uses: actions/checkout@v2
+    - name: Setup node
+      uses: actions/setup-node@v2
+      with:
+        node-version: '14'
+        check-latest: true
+    - name: Cache node modules
+      uses: actions/cache@v2
+      env:
+        cache-name: cache-node-modules
+      with:
+        path: ~/.npm
+        key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
+        restore-keys: |
+          ${{ runner.os }}-build-${{ env.cache-name }}-
+          ${{ runner.os }}-build-
+          ${{ runner.os }}-
+    - name: Install Dependencies
+      run: npm install
+    - name: "CLI tests"
+      run: npm run test-cli
+
+  grunt-build-test:
+    runs-on: ubuntu-18.04
+    steps:
+    - uses: actions/checkout@v2
+    - name: Setup node
+      uses: actions/setup-node@v2
+      with:
+        node-version: '14'
+        check-latest: true
+    - name: Cache node modules
+      uses: actions/cache@v2
+      env:
+        cache-name: cache-node-modules
+      with:
+        path: ~/.npm
+        key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
+        restore-keys: |
+          ${{ runner.os }}-build-${{ env.cache-name }}-
+          ${{ runner.os }}-build-
+          ${{ runner.os }}-
+    - name: Install Dependencies
+      run: npm install
+    - name: "Grunt build test of dev environment"
+      run: grunt build
+
+## Cache NPM folder
+# cache:
+#   directories:
+#     - ~/.npm
+#     - ~/.cache

.gitpod.dockerfile

@@ -3,5 +3,66 @@ FROM gitpod/workspace-full
 USER root
 RUN sudo apt-get update && apt-get install -y apt-transport-https \
  && sudo apt-get install -y \
-    xserver-xorg-dev libxext-dev libxi-dev build-essential libxi-dev libglu1-mesa-dev libglew-dev pkg-config libglu1-mesa-dev freeglut3-dev mesa-common-dev \
+    xserver-xorg-dev \
+    libxext-dev \
+    build-essential \
+    libxi-dev \
+    libglew-dev \
+    pkg-config \
+    libglu1-mesa-dev \
+    freeglut3-dev \
+    mesa-common-dev \
+    x11-apps \
+    libice6 \
+    libsm6 \
+    libxaw7 \
+    libxft2 \
+    libxmu6 \
+    libxpm4 \
+    libxt6 \
+    x11-apps \
+    xbitmaps \
+    ca-certificates \
+    fonts-liberation \
+    libappindicator3-1 \
+    libasound2 \
+    libatk-bridge2.0-0 \
+    libatk1.0-0 \
+    libc6 \
+    libcairo2 \
+    libcairo2-dev \
+    libcups2 \
+    libdbus-1-3 \
+    libexpat1 \
+    libfontconfig1 \
+    libgbm1 \
+    libgcc1 \
+    libgif-dev \
+    libglib2.0-0 \
+    libgtk-3-0 \
+    libjpeg-dev \
+    libnspr4 \
+    libnss3 \
+    libpango-1.0-0 \
+    libpango1.0-dev \
+    libpangocairo-1.0-0 \
+    libstdc++6 \
+    librsvg2-dev \
+    libx11-6 \
+    libx11-xcb1 \
+    libxcb1 \
+    libxcomposite1 \
+    libxcursor1 \
+    libxdamage1 \
+    libxext6 \
+    libxfixes3 \
+    libxi6 \
+    libxrandr2 \
+    libxrender1 \
+    libxss1 \
+    libxtst6 \
+    lsb-release \
+    wget \
+    xdg-utils \
+    xvfb \
  && apt-get clean && rm -rf /var/lib/apt/lists/* /tmp/*

.travis.yml

@@ -1,8 +1,8 @@
 sudo: required
 language: node_js
 node_js:
-  - '8'
   - '10'
+  - '12'
 env:
   - CXX=g++-4.8
 before_script:
@@ -23,7 +23,9 @@ jobs:
     - name: "Jasmine UI tests (mocked browser env)"
       script: npm run test-ui
     - name: "jest-puppeteer UI tests (full browser env)"
-      script: npm run test-ui-2
+      script: npm run test-ui-2    
+    - name: "CLI tests"
+      script: npm run test-cli
     - name: "Grunt build test of dev environment"
       script: grunt build
 after_success:

CONTRIBUTING.md

@@ -17,6 +17,7 @@ Most contribution (we imagine) would be in the form of API-compatible modules, w
 * [Ideas](#Contribution-ideas)
 * [Grunt Tasks](#grunt-tasks)
 * [UI Helper Methods](#ui-helper-methods)
+* [Scripts](#scripts)
 
 ****
 
@@ -117,9 +118,9 @@ function ModuleName(options,UI) {
       ];
 ```
 ### Running a browser-only module in node
-If your module has browser specific code or you are consuming a dependency which does the `gl-context` api. We designed this api especially for webl based modules but since it runs the module in a headless browser, ti supports all browser specific APIs.
+If your module has browser specific code or you are consuming a dependency which does the `gl-context` API. We designed this api especially for web-based modules but since it runs the module in a headless browser, it supports all browser specific APIs.
 
-The api must be used in the following format
+The API must be used in the following format
 ```js
 var step = this;
 
@@ -196,7 +197,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.
+* `UI.notify(msg,id)` must be emitted when a notification has to be produced.
 
 ### Name and description
 
@@ -243,7 +244,7 @@ Also, A module may have output values. These must be defined as shown above.
 
 ### Progress reporting
 
-The default "loading spinner" can be optionally overriden with a custom progress object to draw progress on the CLI, following is a basic module format for the same:
+The default "loading spinner" can be optionally overridden with a custom progress object to draw progress on the CLI, following is a basic module format for the same:
 
 ```js
 module.exports = function ModuleName(options,UI) {
@@ -278,7 +279,7 @@ module.exports = function ModuleName(options,UI) {
 }
 ```
 
-The `progressObj` parameter of `draw()` is not consumed unless a custom progress bar needs to be drawn, for which this default spinner should be stopped with `progressObj.stop()` and image-sequencer is informed about the custom progress bar with `progressObj.overrideFlag = true;` following which this object can be overriden with custom progress object.
+The `progressObj` parameter of `draw()` is not consumed unless a custom progress bar needs to be drawn, for which this default spinner should be stopped with `progressObj.stop()` and image-sequencer is informed about the custom progress bar with `progressObj.overrideFlag = true;` following which this object can be overridden with custom progress object.
 
 
 ### Module example
@@ -291,7 +292,7 @@ For help integrating, please open an issue.
 
 ## Meta Module
 
-IMAGE SEQUENCER supports "meta modules" -- modules made of other modules. The syntax and structure of these meta modules is very similar to standard modules. Sequencer can also genarate meta modules dynamically with the function `createMetaModule` which can be called in the following ways
+IMAGE SEQUENCER supports "meta modules" -- modules made of other modules. The syntax and structure of these meta modules is very similar to standard modules. Sequencer can also generate meta modules dynamically with the function `createMetaModule` which can be called in the following ways
 
 ```js
 
@@ -374,7 +375,7 @@ module.exports =
 We are now using `eslint` and `husky` to help lint and format our code each time we commit. Eslint defines coding standards and helps in cleaning up the code. To run eslint for checking errors globally or within a specific file run:
 
 ```
-npx eslint . 
+npx eslint .
 
 npx eslint <file path>
 ```
@@ -386,7 +387,7 @@ npx eslint <file path> --fix
 ```
 Be sure to not include the angular brackets(<>).
 
-Husky ensures automation of the above steps with git-hooks(eg. git add,git commit..). However we don't want to check and fix changes of the entire codebase with each commit and that the fixes made by eslint appear unstaged and require us to commit them  again and that is where lint-staged helps.
+Husky ensures automation of the above steps with git-hooks(eg. git add, git commit..). However we don't want to check and fix changes of the entire codebase with each commit and that the fixes made by eslint appear unstaged and require us to commit them  again and that is where lint-staged helps.
 
 If we want `husky` to not verify the commit and push it anyway, use `git commit -m "message" --no-verify.`
 
@@ -412,15 +413,15 @@ The following command is used for running the tasks: `grunt [task-name]`. Here `
 
 The method returns a scoped `jQuery` object which only searches for elements inside a given scope (a DOM element).
 
-To use the method, 
+To use the method,
 * import the `scopeSelector` and `scopeSelectorAll` methods from `lib/scopeQuery.js`
 * call the methods with scope as a parameter
-	
+
 ```js
 var scopeQuery = require('./scopeQuery');
 
 var $step = scopeQuery.scopeSelector(scope),
-    $stepAll = scopeQuery.scopeSelectorAll(scope);	
+    $stepAll = scopeQuery.scopeSelectorAll(scope);
 ```
 This will return an object with a constructor which returns a `jQuery` object (from inside the scope) but with new `elem` and `elemAll` methods.
 
@@ -433,7 +434,7 @@ This will return an object with a constructor which returns a `jQuery` object (f
 #### Example
 
 ```js
-//The scope is a div element with id=“container“ and there are three divs in it 
+//The scope is a div element with id=“container“ and there are three divs in it
 //with ids „1“, „2“, and „3“, and all of them have a „child“ class attribute
 
 var $step = require('./scopeQuery').scopeSelector(document.getElementById('container'));
@@ -458,3 +459,33 @@ The following code can be used
 $step('query').show().hide();
 $stepAll('q2').show().hide();
 ```
+
+## Scripts
+The following shell scripts are present in the `scripts/` directory.
+
+- `update-gh-pages`: This script can be used to update the `gh-pages` branch of this repo or a fork.
+ This script is not meant to be used directly as it runs in the current working directory.
+ If you run it on your primary local clone, it can **delete** the local changes. This script is made to be used in a github action
+ or in a temporary directory via another script, such as `update-demo`.
+
+  Arguments:
+  1. Repo(to use as upstream) url in the form username/repo (default: publiclab/image-sequencer) NOTE: Github only
+  2. Branch to pull from eg: main or stable (default: stable)
+  3. CNAME URL (default: none)
+  4. Set the fourth argument to anything to bypass the warning. You will have to set this argument if you want to run this script in another script without needing
+  user interaction, such as in a github action.
+
+- `update-demo`: A safe, interactive script that can be used to update the `gh-pages` branch of any image-sequencer fork.
+ This script is safe to use directly because it separately clones the repo in a temporary directory.
+
+  Arguments: None since it is a an *interactive* script, ie it asks the user for input.
+
+****
+
+# Comments
+
+1. Methods must be described using [JSDoc comments](https://devdocs.io/jsdoc/)
+2. Misc code comments should be inline unless it is a long sentence.
+3. No use of continuous tenses, no pronouns.
+4. No redundant comments.
+5. Each comment should start with an uppercase letter and end with a full stop.

README.md

@@ -2,13 +2,18 @@ Image Sequencer
 ====
 
 [![Code of Conduct](https://img.shields.io/badge/code-of%20conduct-green.svg)](https://publiclab.org/conduct)
+[![npm version](https://badge.fury.io/js/image-sequencer.svg)](https://badge.fury.io/js/image-sequencer)
 [![Build Status](https://travis-ci.org/publiclab/image-sequencer.svg?branch=master)](https://travis-ci.org/publiclab/image-sequencer) [![Maintainability](https://api.codeclimate.com/v1/badges/5906996dd2e90aca6398/maintainability)](https://codeclimate.com/github/publiclab/image-sequencer/maintainability) [![Codecov](https://img.shields.io/codecov/c/github/publiclab/image-sequencer.svg?logo=codecov)](https://codecov.io/gh/publiclab/image-sequencer)
-[![Gitpod Ready-to-Code](https://img.shields.io/badge/Gitpod-ready--to--code-blue?logo=gitpod)](https://gitpod.io/from-referrer/)
+[![Gitpod Ready-to-Code](https://img.shields.io/badge/Gitpod-ready--to--code-blue?logo=gitpod)](https://gitpod.io/#https://github.com/publiclab/image-sequencer/)
 
 - **Latest Stable Demo**: https://sequencer.publiclab.org
 - **Latest Beta Demo**: https://beta.sequencer.publiclab.org
 - **Stable Branch**: https://github.com/publiclab/image-sequencer/tree/stable/
 
+Begin running (and contributing to) this codebase immediately with [GitPod](https://gitpod.io) (this also opens the latest `main` branch code):
+
+[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/publiclab/image-sequencer)
+
 ## Why
 
 Image Sequencer is different from other image processing systems because it's _non-destructive_: instead of modifying the original image, it **creates a new image at each step in a sequence**. This is because it:
@@ -615,8 +620,7 @@ The final frames are then converted back to a GIF but in the process, the time d
 Modules that do not work:
 1. ColorBar (Will get fixed upon fixing overlay as this is a meta module which uses overlay)
 2. FisheyeGL
-4. Overlay
-5. Text Overlay (Almost fixed)
-6. Blend
-7. Histogram
-8. WebGL Distort
+3. Overlay
+4. Blend
+5. Histogram
+6. WebGL Distort

docs/MODULES.md

@@ -41,11 +41,12 @@ List of Module Documentations
 36. [Rotate](#rotate-module)
 37. [Saturation](#saturation-module)
 38. [Segmented-Colormap](#segmented-colormap-module)
-39. [Text-Overlay](#text-overlay)
-40. [Threshold](#threshold)
-41. [Tint](#tint)
-42. [WebGL-Distort](#webgl-distort-module)
-43. [White-Balance](#white-balance-module)
+39. [Sharpen](#sharpening-module)
+40. [Text-Overlay](#text-overlay)
+41. [Threshold](#threshold)
+42. [Tint](#tint)
+43. [WebGL-Distort](#webgl-distort-module)
+44. [White-Balance](#white-balance-module)
 
 
 ## add-qr-module
@@ -667,6 +668,20 @@ where `options` is an object with the property `colormap`. `options.colormap` ca
 * A custom array.
 
 
+## sharpen-module
+
+This module is used to sharpen the pixels of the image using a 3x3 convolution filter.
+#### Usage
+
+```js
+  sequencer.loadImage('PATH')
+           .addSteps('sharpen',options)
+           .run()
+```
+
+where `options` is an object with the property `sharpenStrength`, which can be set to achieve the desired level of sharpening on the image.
+
+
 ## Text Overlay
 
 The modules allows to add text to image in both browser and node environment. We have the options to modify the font-size and also support few font-styles. The text color can also be modified.

examples/demo.css

@@ -1,12 +1,8 @@
 /* https://github.com/theleagueof/league-spartan */
 @font-face {
   font-family: 'League Spartan';
-  src: url('https://raw.githubusercontent.com/theleagueof/league-spartan/master/_webfonts/leaguespartan-bold.eot');
-  src: url('https://raw.githubusercontent.com/theleagueof/league-spartan/master/_webfonts/leaguespartan-bold.eot?#iefix') format('embedded-opentype'),
-       url('https://raw.githubusercontent.com/theleagueof/league-spartan/master/_webfonts/leaguespartan-bold.woff2') format('woff2'),
-       url('https://raw.githubusercontent.com/theleagueof/league-spartan/master/_webfonts/leaguespartan-bold.woff') format('woff'),
-       url('https://raw.githubusercontent.com/theleagueof/league-spartan/master/_webfonts/leaguespartan-bold.ttf') format('truetype'),
-       url('https://raw.githubusercontent.com/theleagueof/league-spartan/master/_webfonts/leaguespartan-bold.svg#league_spartanbold') format('svg');
+  src: url('https://cdn.jsdelivr.net/npm/fontsource-league-spartan@3/files/league-spartan-latin-600-normal.woff2') format('woff2'),
+       url('https://cdn.jsdelivr.net/npm/fontsource-league-spartan@3/files/league-spartan-latin-600-normal.woff') format('woff');
   font-weight: bold;
   font-style: normal;
 }
@@ -44,7 +40,6 @@ body > .container-fluid {
 .panel {
   margin-left: 20px;
   margin-right: 20px;
-  min-width:400px;
 }
 
 .mouse {
@@ -66,7 +61,6 @@ body > .container-fluid {
   border-radius: 8px;
   text-align: center;
   color: #444;
-  min-width:300px;
 }
 
 .dropzone input {
@@ -84,7 +78,8 @@ body > .container-fluid {
 }
 
 .hover {
-  background: #eee;
+  border: 4px dashed #888888;
+  background: #F0F0F0;
 }
 
 .step {
@@ -156,6 +151,13 @@ body > .container-fluid {
   margin: 0px 0px 0px 10px;
   width: 250px;
 }
+
+@media(max-width: 768px) {
+    #dropzone {
+      margin: 0 0% 30px;
+    }
+}
+
 #dwnld {
   max-width: 500px;
   margin: 20px auto;
@@ -170,8 +172,8 @@ body > .container-fluid {
 
 #move-up {
   position: fixed;
-  bottom: 50px;
-  right: 40px;
+  bottom: 30px;
+  right: 20px;
   z-index: 550;
   display: none;
   background:transparent;
@@ -179,11 +181,17 @@ body > .container-fluid {
 }
 
 #move-up i {
-  font-size:60px;
+  font-size:50px;
   opacity:0.7;
   color:#BABABA;
 }
 
+@media (max-width: 768px), (max-height 700px) {
+  #move-up {
+    display: none !important; /* !important is used to override the jQuery style */
+  }
+}
+
 .btn-circle{
   min-width: 80px;
   min-height: 80px;
@@ -324,7 +332,7 @@ a.name-header{
   position: fixed;
   right: 2%;
   top: 5%;
-  color: lightgray;
+  color: gray;
 }
 /* Non float rightward alignment*/
 .right {
@@ -332,21 +340,47 @@ a.name-header{
   display: block;
 }
 
-#update-prompt-modal {
+#update-prompt-modal,.notify-box {
  visibility: hidden;
  min-width: 250px;
  margin-left: -125px;
  background-color: #333;
  color: #fff;
  text-align: center;
- border-radius: 2px;
+ border-radius: 8px;
  padding: 16px;
  position: fixed;
  z-index: 1000;
  left: 10%;
  top: 30px;
 }
-#update-prompt-modal.show {
+
+#update-prompt-modal {
+  width: 30vw;
+  margin: 0.2rem;
+}
+
+.notify-box {
+  width:34vw;
+  padding:18px;
+  border-radius:8px;
+  margin-left:0.8rem;
+  text-align:left;
+  color:#333;
+  background:#c3c3c3;
+}
+
+/* Bootstrap class for display none remove it after updating to version v4 */
+.d-none {
+  display:none;
+}
+
+/* Bootstrap class for display block remove it after updating to version v4 */
+.d-block {
+  display:block;
+}
+
+#update-prompt-modal.show,.notify-box {
  visibility: visible;
  -webkit-animation: fadein 0.5s;
  animation: fadein 0.5s;

examples/demo.js

@@ -340,6 +340,7 @@ window.onload = function () {
       else
         step.imgElement.src = url;
       insertPreview.updatePreviews(url, document.querySelector('#addStep'));
+      DefaultHtmlStepUi(sequencer).updateDimensions(step);
     }
   });
 

examples/index.html

@@ -58,15 +58,24 @@
 
   <div id="update-prompt-modal">A new version of image sequencer is available. Click <a href="#" id="reload">here</a> to update.</div>
 
+  <div class="notify-box d-none">
+    <strong>Failed To Load Image</strong>
+    <button type="button" class="ml-2 mb-1 close" id="close-popup"><span>&times;</span></button>
+    <div class="notify-msg">
+      Can not Load Image Due to CORS Error Learn more about this 
+      <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors" target="_blank">here</a>
+    </div>
+  </div>
+
   <div class="container-fluid">
 
-    <header class="text-center" style="min-width: 450px">
+    <header class="text-center">
       <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.
-        <a href="https://github.com/publiclab/image-sequencer/blob/main/README.md">Learn more</a>
+        <a href="https://publiclab.org/image-sequencer">Learn more</a>
       </p>
       <p>
         Open Source
@@ -212,13 +221,12 @@
 
     <footer>
       <hr style="margin:20px;">
-      <center><button class="btn btn-default btn-sm" id="clear-cache">Clear offline cache</button></center>
       <div class="row">
         <div class="col-md-6">
           <h2>Need Help?</h2>
           <p>
             <a class="btn btn-default" href="https://github.com/publiclab/image-sequencer/issues">Ask a question</a>
-            <a class="btn btn-default" href="https://publiclab.org/chat">Ask in our chatroom</a>
+            <a class="btn btn-default" href="https://gitter.im/publiclab/image-sequencer"  target="_blank">Ask in our chatroom </a>
           </p>
         </div>
         <div class="col-md-6">
@@ -232,7 +240,8 @@
         </div>
       </div>
       <div class="row">
-        <p id="version-number-text">Unable to load version number</p>
+        <p id="version-number-text">Loading Version Number</p>
+        <center><button class="btn btn-primary btn-sm" id="clear-cache">Clear offline cache</button></center>
       </div>
     </footer>
 

examples/lib/cache.js

@@ -1,6 +1,6 @@
 var setupCache = function() {
   let newWorker; // When sw.js is changed, this is the new service worker generated.
-
+  
   // Toggle a CSS class to display a popup prompting the user to fetch a new version.
   function showUpdateModal() {
     $('#update-prompt-modal').addClass('show');
@@ -19,34 +19,42 @@ var setupCache = function() {
     // Register the service worker.
     navigator.serviceWorker.register('sw.js', { scope: '/examples/' })
       .then(function(registration) {
-        registration.addEventListener('updatefound', () => {
-          // When sw.js has been changed, get a reference to the new service worker.
-          newWorker = registration.installing;
-          newWorker.addEventListener('statechange', () => {
-            // Check if service worker state has changed.
-            switch(newWorker.state) {
-              case 'installed':
-                if(navigator.serviceWorker.controller) {
-                  // New service worker available; prompt the user to update.
-                  showUpdateModal();
-                }
-                // No updates available; do nothing.
-                break;
-            }
-          });
-        });
 
-        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);
+          return new Promise(function(resolve,reject){
+
+            registration.addEventListener('updatefound', () => {
+              // When sw.js has been changed, get a reference to the new service worker.
+              newWorker = registration.installing;
+
+              if(!newWorker){
+                return reject(new Error('error in installing service worker'));
+              }
+
+            newWorker.addEventListener('statechange', () => {
+              // Check if service worker state has changed.
+              switch(newWorker.state) {
+                case 'installed':
+                  if(navigator.serviceWorker.controller) {
+                    // New service worker available; prompt the user to update.
+                    showUpdateModal();
+                    $('#reload').on('click',(e) => {
+                      e.preventDefault();
+                      console.log('New Service Worker Installed Successfully');
+                      location.reload();
+                      return resolve();
+                    })
+                  }
+                  // No updates available; do nothing.
+                  break;
+
+                case 'redundant':
+                  return reject(new Error('installing new service worker now became redundant'));
+              }
+            })
+          })
+        })
+      }).catch(err => {
+        console.log('Failed In Registering Service Worker: ',err);
       });
 
       /**
@@ -69,21 +77,22 @@ var setupCache = function() {
     });
   }
 
-  $('#clear-cache').click(function() {
+  const clearCache = () => {
     if ('serviceWorker' in navigator) {
-      caches.keys().then(function(cacheNames) {
-        cacheNames.forEach(function(cacheName) {
-          caches.delete(cacheName);
-        });
+      return caches.keys()
+        .then(function(cache) {
+          return Promise.all(cache.map(function(cacheItem) {
+            return caches.delete(cacheItem);
+        }));
       });
     }
+  }
+
+  $('#clear-cache').click(function() {
+    clearCache();
     location.reload();
   });
 
-
-
-
-
 };
 
 module.exports = setupCache;

examples/lib/defaultHtmlSequencerUi.js

@@ -17,7 +17,6 @@ function DefaultHtmlSequencerUi(_sequencer, options) {
   // look up needed steps from Url Hash:
   function importStepsFromUrlHash() {
     var hash = urlHash.getUrlHashParameter('steps');
-
     if (hash) {
       _sequencer.importString(hash);
       _sequencer.run({ index: 0 });
@@ -27,8 +26,7 @@ function DefaultHtmlSequencerUi(_sequencer, options) {
 
   function selectNewStepUi() {
     var m = $(addStepSel + ' select').val();
-    if(!m) m = arguments[0];
-    $(addStepSel + ' .info').html(_sequencer.modulesInfo(m).description);
+    if(m) $(addStepSel + ' .info').html(_sequencer.modulesInfo(m).description);
     $(addStepSel + ' #add-step-btn').prop('disabled', false);
   }
 
@@ -47,7 +45,12 @@ function DefaultHtmlSequencerUi(_sequencer, options) {
   }
 
   function addStepUi() {
-    if ($(addStepSel + ' select').val() == 'none') return;
+    
+    if ($(addStepSel + ' select').val() == ''){
+      alert('Please Select a Step to Proceed');
+      return;
+    }
+
     var newStepName;
     if(typeof arguments[0] !== 'string')
       newStepName = $(addStepSel + ' select option').html().toLowerCase().split(' ').join('-');

examples/lib/defaultHtmlStepUi.js

@@ -24,6 +24,9 @@ function DefaultHtmlStepUi(_sequencer, options) {
   function onSetup(step, stepOptions) {
     if (step.options && step.options.description)
       step.description = step.options.description;
+    
+    let stepDocsLink = '';
+    if (step.moduleInfo) stepDocsLink = step.moduleInfo['docs-link'] || '';
 
     step.ui = // Basic UI markup for the step
       '\
@@ -48,7 +51,7 @@ function DefaultHtmlStepUi(_sequencer, options) {
               <div class="row step">\
                 <div class="col-md-4 details container-fluid">\
                   <div class="cal collapse in"><p>' +
-                    '<a href="https://github.com/publiclab/image-sequencer/blob/main/docs/MODULES.md#' + step.name + '-module">' + (step.description || '') + '</a>' +
+                    '<a href="' + stepDocsLink + '">' + (step.description || '') + '</a>' +
                  '</p></div>\
                 </div>\
                 <div class="col-md-8 cal collapse in step-column">\
@@ -118,7 +121,14 @@ function DefaultHtmlStepUi(_sequencer, options) {
               paramVal + '">' + '<span class="input-group-addon"><i></i></span>' +
               '</div>';
           }
-          else { // Non color-picker input types
+          else if(inputDesc.type === 'button'){
+            html = '<div><button name="' + paramName + '" type="' + inputDesc.type + '" >\
+            <i class="fa fa-crosshairs"></i></button>\
+            <span>click to select coordinates</span>\
+            </div>';
+          }
+          else { // Non color-picker input types and other than a button
+
             html =
               '<input class="form-control target" type="' +
               inputDesc.type +
@@ -136,7 +146,7 @@ function DefaultHtmlStepUi(_sequencer, options) {
                 '"max="' +
                 inputDesc.max +
                 '"step="' +
-                (inputDesc.step ? inputDesc.step : 1) + '">' + '<span>' + paramVal + '</span>';
+                inputDesc.step + '">' + '<span>' + paramVal + '</span>';
 
             }
             else html += '">';
@@ -329,12 +339,24 @@ function DefaultHtmlStepUi(_sequencer, options) {
 
     $stepAll('.download-btn').on('click', () => {
 
+      function dataURLtoBlob(dataurl) {
+        let arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
+          bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
+        while(n--){
+          u8arr[n] = bstr.charCodeAt(n);
+        }
+        return new Blob([u8arr], {type:mime});
+      }
+      
       var element = document.createElement('a');
-      element.setAttribute('href', step.output);
+      
       element.setAttribute('download', step.name + '.' + fileExtension(step.imgElement.src));
       element.style.display = 'none';
       document.body.appendChild(element);
-
+      var blob = dataURLtoBlob(step.output);
+      var objurl = URL.createObjectURL(blob);
+      element.setAttribute('href', objurl);
+      
       element.click();
     });
 
@@ -385,7 +407,7 @@ function DefaultHtmlStepUi(_sequencer, options) {
    */
   function updateDimensions(step){
     _sequencer.getImageDimensions(step.imgElement.src, function (dim) {
-      step.ui.querySelector('.' + step.name).attributes['data-original-title'].value = `<div style="text-align: center"><p>Image Width: ${dim.width}<br>Image Height: ${dim.height}</br>${isGIF(step.output) ? `Frames: ${dim.frames}` : ''}</div>`;
+      step.ui.querySelector('.' + step.name).attributes['data-original-title'].value = `<div style="text-align: center"><p>Image Width: ${dim.width} px<br>Image Height: ${dim.height} px</br>${isGIF(step.output) ? `Frames: ${dim.frames}` : ''}</div>`;
     });
   }
 
@@ -399,6 +421,19 @@ function DefaultHtmlStepUi(_sequencer, options) {
 
     var img = $(step.imgElement);
 
+    let customXCoord = '20'; //default x coordinate
+    let customYCoord = '20'; //default y coordinate
+
+    const customButton = $('button[name="Custom-Coordinates"]');
+      img.click(function(e) {
+          customXCoord = e.offsetX;
+          customYCoord = e.offsetY;
+          customButton.click(function() {
+            $('input[name="x"]').val(customXCoord);
+            $('input[name="y"]').val(customYCoord);
+          })
+      });
+
     img.mousemove(function(e) {
       var canvas = document.createElement('canvas');
       canvas.width = img.width();

examples/lib/mapHtmltypes.js

@@ -7,6 +7,7 @@ function mapHtmlTypes(inputInfo){
   switch(inputInfo.type.toLowerCase()){
   case 'integer':
     htmlType = inputInfo.min != undefined ? 'range' : 'number';
+    if (htmlType === 'range') inputInfo.step = inputInfo.step || 1; // default range step size for integer
     break;
   case 'string':
     htmlType = 'text';
@@ -19,6 +20,10 @@ function mapHtmlTypes(inputInfo){
     break;
   case 'float':
     htmlType = inputInfo.min != undefined ? 'range' : 'text';
+    if (htmlType === 'range') inputInfo.step = inputInfo.step || 0.1; // default range step size for float
+    break;
+  case 'coordinate-input':
+    htmlType = 'button';
     break;
   default:
     htmlType = 'text';

examples/offline.html

@@ -0,0 +1,34 @@
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Error 502 | Bad Gateway</title>
+    <style>
+        body{
+            background-color:#d3d3d3;
+        }
+        p {
+            font-size:20px;
+        }
+        main {
+            display: flex;
+            flex-direction:column;
+            text-align: center;
+            justify-content: center;
+        }
+        a {
+            text-decoration: none;
+            color:blue;
+        }
+        
+    </style>
+</head>
+<body>
+    <main> 
+        <p>Error 502: something went wrong.</p>
+        <p>It seems that you are not connected to internet.<br>Please try after some time.</p>
+        <a href="/">Go To Home Page</a>
+    </main>
+</body>
+</html>

examples/sw.js

@@ -1,6 +1,14 @@
-const staticCacheName = 'image-sequencer-static-v3.5.1';
-self.addEventListener('install', event => {
-  console.log('Attempting to install service worker');
+const staticCacheName = 'image-sequencer-static-v3.7.2';
+self.addEventListener('install', function(e) {
+  e.waitUntil(
+    caches.open(staticCacheName).then(function(cache) {
+      console.log('Attempting to install service worker');
+      return cache.addAll([
+        '/',
+        '/examples/offline.html'
+      ]);
+    })
+  );
 });
 
 self.addEventListener('activate', function(e) {
@@ -21,15 +29,27 @@ self.addEventListener('activate', function(e) {
 
 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;
+    // Try to fetch the latest data first.
+    fetch(event.request)
+      .then(function(response) {
+        return caches.open(staticCacheName)
+          .then(function(cache) {
+            if(event.request.method == 'GET'){
+              cache.put(event.request.url, response.clone());
+            }
+            return response;
+          });
+      })
+      .catch(function(err) {
+      // Now the request has been failed so show cached data.
+        return caches.match(event.request).then(function(res){
+          if (res === undefined) {
+            // Display offline page
+            return caches.match('offline.html');
+          }
+          return res;
         });
-      });
-    })
+      })
   );
 });
 

index.js

@@ -1,89 +1,5 @@
 #!/usr/bin/env node
 
-require('./src/ImageSequencer');
-sequencer = ImageSequencer({ ui: true });
-var fs = require('fs');
-var program = require('commander');
-var utils = require('./src/CliUtils');
+var cli = require('./src/cli');
 
-var saveSequence = require('./src/cli/saveSequence.js');
-var installModule = require('./src/cli/installModule.js');
-var sequencerSteps = require('./src/cli/sequencerSteps.js');
-
-function exit(message) {
-  console.error(message);
-  process.exit(1);
-}
-
-program
-  .version('0.1.0')
-  .option('-i, --image [PATH/URL]', 'Input image URL')
-  .option('-s, --step [step-name]', 'Name of the step to be added.')
-  .option('-o, --output [PATH]', 'Directory where output will be stored.')
-  .option('-b, --basic', 'Basic mode outputs only final image')
-  .option('-c, --config [Object]', 'Options for the step')
-  .option('--save-sequence [string]', 'Name space separated with Stringified sequence')
-  .option('--install-module [string]', 'Module name space seaprated npm package name')
-  .parse(process.argv);
-
-if (program.saveSequence) saveSequence(program, sequencer);
-
-else if (program.installModule) installModule(program, sequencer);
-
-else {
-  // Parse step into an array to allow for multiple steps.
-  if (!program.step) exit('No steps passed');
-  program.step = program.step.split(' ');
-
-  // User must input an image.
-  if (!program.image) exit('Can\'t read file.');
-
-  // User must input an image.
-  fs.access(program.image, function(err) {
-    if (err) exit('Can\'t read file.');
-  });
-
-  // User must input a step. If steps exist, check that every step is a valid step.
-  if (!program.step || !(utils.validateSteps(program.step, sequencer)))
-    exit('Please ensure all steps are valid.');
-
-  // If there's no user defined output directory, select a default directory.
-  program.output = program.output || './output/';
-
-  // Set sequencer to log module outputs, if any.
-  sequencer.setUI({
-    onComplete: function(step) {
-      // Get information of outputs.
-      step.info = sequencer.modulesInfo(step.name);
-
-      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);
-    }
-  });
-
-  // Finally, if everything is alright, load the image, add the steps and run the sequencer.
-  sequencer.loadImages(program.image, function() {
-    console.warn(
-      '\x1b[33m%s\x1b[0m',
-      'Please wait \n output directory generated will be empty until the execution is complete'
-    );
-
-    //Generate the Output Directory
-    var outputFilename = program.output.split('/').slice(-1)[0];
-    if (outputFilename.includes('.')) {
-      // user did give an output filename we have to remove it from dir
-      program.output = program.output.split('/').slice(0, -1).join('/');
-    }
-    else {
-      outputFilename = null;
-    }
-
-    sequencerSteps(program, sequencer, outputFilename);
-
-  });
-
-}
+cli(process.argv);

jest-puppeteer.config.js

@@ -1,5 +1,6 @@
 module.exports = {
   launch: {
+    args: ['--no-sandbox', '--disable-setuid-sandbox'], // https://github.com/puppeteer/puppeteer/blob/main/docs/troubleshooting.md#setting-up-chrome-linux-sandbox
     headless: process.env.HEADLESS !== 'false',
   },
   server: {

package.json

@@ -1,17 +1,18 @@
 {
   "name": "image-sequencer",
-  "version": "3.5.1",
+  "version": "3.7.2",
   "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 istanbul cover tape test/core/*.js test/core/ui/user-interface.js test/core/modules/*.js | tap-spec;",
-    "benchmark" : "node test/core/sequencer/benchmark.js | tap-spec;",
-    "gif-test" : "node test/core/gifs/gif-test.js | tap-spec;",
-    "core-tests" : "cat ./output/core-tests.js | tape-run --render=\"tap-spec\"",
+    "benchmark": "node test/core/sequencer/benchmark.js | tap-spec;",
+    "gif-test": "node test/core/gifs/gif-test.js | tap-spec;",
+    "core-tests": "cat ./output/core-tests.js | tape-run --render=\"tap-spec\"",
     "test-all": "npm run test && npm run benchmark && npm run gif-test && grunt tests && npm run core-tests",
     "test-ui": "node node_modules/jasmine/bin/jasmine test/ui/spec/*.js",
     "test-ui-2": "node ./node_modules/.bin/jest",
+    "test-cli": "node test/cli/*.js | tap-spec",
     "setup": "npm i && npm i -g grunt grunt-cli && npm rebuild --build-from-source && grunt build",
     "start": "grunt serve"
   },
@@ -39,38 +40,38 @@
     "base64-img": "^1.0.4",
     "bootstrap": "^3.4.1",
     "bootstrap-colorpicker": "^2.5.3",
-    "buffer": "~5.6.0",
-    "commander": "^4.0.1",
+    "buffer": "~6.0.2",
+    "commander": "^9.0.0",
     "compressorjs": "^1.0.5",
     "data-uri-to-buffer": "^3.0.0",
     "downloadjs": "^1.4.7",
-    "eslint": "^6.1.0",
+    "eslint": "^8.0.0",
+    "expr-eval": "^2.0.2",
     "fisheyegl": "^0.1.2",
     "font-awesome": "~4.7.0",
-    "geotiff": "^1.0.0-beta.6",
     "get-pixels": "~3.3.0",
     "gifshot": "^0.4.5",
     "glfx": "0.0.4",
     "gpu.js": "^2.3.1",
+    "imgareaselect": "git+https://git@github.com/jywarren/imgareaselect.git#v1.0.0-rc.2",
     "image-sequencer-invert": "^1.0.0",
-    "imagejs": "0.0.9",
+    "imagejs": "git+https://git@github.com/glennjones/imagejs.git#1119a31e6eabc87563bc573cd62c11bd487ce8a9",
     "imagemin": "^7.0.1",
-    "imagemin-jpegtran": "^6.0.0",
-    "imagemin-pngquant": "^8.0.0",
-    "imgareaselect": "git://github.com/jywarren/imgareaselect.git#v1.0.0-rc.2",
+    "imagemin-jpegtran": "^7.0.0",
+    "imagemin-pngquant": "^9.0.1",
     "istanbul": "^0.4.5",
-    "jasmine": "^3.4.0",
-    "jpegtran-bin": "^4.0.0",
+    "jasmine": "^4.0.2",
+    "jpegtran-bin": "^7.0.0",
     "jquery": "^3.3.1",
-    "jsdom": "^15.0.0",
-    "jspdf": "^1.5.3",
+    "jsdom": "^20.0.0",
+    "jspdf": "^2.1.1",
     "jsqr": "^1.1.1",
     "lodash": "^4.17.11",
     "ndarray": "^1.0.18",
     "opencv.js": "^1.2.1",
-    "ora": "^4.0.3",
+    "ora": "^5.1.0",
     "pace": "0.0.4",
-    "pngquant-bin": "^5.0.2",
+    "pngquant-bin": "^6.0.0",
     "puppeteer": "^1.14.0",
     "qrcode": "^1.3.3",
     "readline-sync": "^1.4.7",
@@ -85,29 +86,31 @@
     "@babel/plugin-proposal-object-rest-spread": "^7.4.3",
     "@babel/plugin-syntax-object-rest-spread": "^7.2.0",
     "babelify": "^10.0.0",
-    "browserify": "16.5.0",
-    "eslint": "^6.1.0",
+    "browserify": "17.0.0",
+    "canvas": "^2.8.0",
+    "eslint": "^8.0.0",
     "grunt": "^1.0.3",
     "grunt-browser-sync": "^2.2.0",
     "grunt-browserify": "^5.0.0",
-    "grunt-contrib-concat": "^1.0.1",
+    "grunt-contrib-concat": "^2.0.0",
     "grunt-contrib-uglify-es": "^3.3.0",
     "grunt-contrib-watch": "^1.1.0",
     "grunt-text-replace": "^0.4.0",
-    "husky": "^3.0.5",
+    "husky": "^8.0.1",
     "image-filter-core": "~2.0.2",
     "image-filter-threshold": "~2.0.1",
-    "jasmine-core": "^3.3.0",
+    "jasmine-core": "^4.0.0",
     "jasmine-jquery": "^2.1.1",
-    "jasmine-spec-reporter": "^4.2.1",
-    "jest": "^25.1.0",
-    "jest-puppeteer": "^4.3.0",
-    "lint-staged": "^10.0.3",
+    "jasmine-spec-reporter": "^7.0.0",
+    "jest": "^29.0.0",
+    "jest-puppeteer": "^6.0.0",
+    "lint-staged": "^13.0.0",
     "looks-same": "^7.0.0",
     "matchdep": "^2.0.0",
+    "resemblejs": "^4.0.1",
     "tap-spec": "^5.0.0",
-    "tape": "^4.9.2",
-    "tape-run": "^7.0.0",
+    "tape": "^5.2.0",
+    "tape-run": "^10.0.0",
     "uglify-es": "^3.3.7"
   },
   "husky": {
@@ -119,4 +122,4 @@
   "bin": {
     "sequencer": "./index.js"
   }
-} 
+}

scripts/update-demo

@@ -0,0 +1,26 @@
+#!/bin/bash
+
+scriptsDir=$(realpath $(dirname $0))
+
+echo -ne "Enter the repo to push to in the form username/repo (required): "
+read -e pushRepo
+
+echo -ne "Enter repo URL to pull from (upstream) in the form username/repo (default: publiclab/image-sequencer): "
+read -e repoInput
+
+echo -ne "Enter branch name (default: stable): "
+read -e branchInput
+
+echo -ne "Enter CNAME URL(default: none): "
+read -e cnameUrlInput
+
+tempDir=$(mktemp -d)
+pushd $tempDir > /dev/null
+
+git clone https://github.com/$pushRepo
+pushd image-sequencer > /dev/null
+
+$scriptsDir/update-gh-pages "$repoInput" "$branchInput" "$cnameUrlInput" "no warn"
+
+popd > /dev/null
+popd > /dev/null

scripts/update-gh-pages

@@ -0,0 +1,117 @@
+#!/bin/bash
+set -e # So that nothing wrong is published
+
+warn() {
+  echo -e "\033[1;31m
+------IMPORTANT------
+  THIS SCRIPT IS NOT MEANT TO BE USED DIRECTLY, PLEASE NEWLY CLONE THE REPO IN A SEPARATE DIRECTORY AND USE THE SCRIPT THERE.
+  USING THIS SCRIPT IN YOUR MAIN CLONE MAY DELETE YOUR LOCAL CHANGES.
+  This script is made to be reusable: If you want to manually update the demo, \
+  use the interactive script \`update-demo\`. This script can also be used in a github action.
+
+  You can set the 4th argument to anything to bypass this warning. \
+  Setting the 4th argument means that the first 3 arguments are also set which means that you know what you are doing (I assume).
+------IMPORTANT------
+\033[0m"
+
+  echo -ne "Do you still want to continue? [Y/n]: "
+  read -e yN
+
+  case $yN in
+    [yY][eE][sS] | [yY])
+    ;;
+    *)
+      exit 0
+    ;;
+  esac
+}
+
+# --- Constants ---
+deps="jquery bootstrap imgareaselect gifshot downloadjs selectize font-awesome bootstrap-colorpicker jspdf opencv.js/opencv.js" # A list of node_module dependencies to force commit
+# --- Constants ---
+
+# --- Arguments ---
+# $1: Repo(to use as upstream) url in the form username/repo (default: publiclab/image-sequencer) NOTE: Github only
+# $2: Branch to pull from eg: main or stable (default: stable)
+# $3: CNAME URL (default: none)
+# $4: Set the fourth argument to anything to bypass the warning.
+
+if [[ "$1" != "" ]];
+then
+  repo=$1
+else
+  repo="publiclab/image-sequencer"
+fi
+
+if [[ "$2" != "" ]];
+then
+  branch=$2
+else
+  branch="stable"
+fi
+
+if [[ "$3" != "" ]];
+then
+  CNAMEURL=$3
+else
+  CNAMEURL=""
+fi
+# --- Arguments ---
+
+# --- Main Script ---
+if [[ "$4" == "" ]]; # Set a 4th argument to anything to bypass this warning.
+then
+  warn
+fi
+
+git checkout gh-pages
+git remote add upstream https://github.com/$repo
+git fetch upstream
+
+git reset --hard upstream/$branch
+
+echo -e "Running setup script."
+npm run setup
+
+echo -e "Building dist files."
+grunt production
+
+if [ ! -f CNAME ];
+then
+  echo -e "Creating CNAME"
+  touch CNAME
+fi
+
+echo $CNAMEURL > CNAME
+
+echo -e "Removing unnecessary files."
+rm -R docs/
+rm -R test/
+rm CONTRIBUTING.md
+rm index.js
+
+echo -e "Copying important files from src/"
+cp src/ui/prepareDynamic.js prepareDynamic.js
+
+echo "Removing src/"
+rm -R src/
+mkdir -p src/ui/
+mv prepareDynamic.js src/ui/prepareDynamic.js
+
+echo -e "git add dist and node_modules dependencies."
+git add .
+
+for dep in $deps; # Force add node_modules dependencies
+do
+  git add -f node_modules/$dep
+done
+
+git add -f dist/image-sequencer.js
+git add -f dist/image-sequencer-ui.js
+
+echo -e "committing and pusing."
+git commit --no-verify -m "update"
+git push -f
+
+exit 0
+# --- Main Script ---

src/Modules.js

@@ -31,8 +31,10 @@ module.exports = {
   'gradient': require('./modules/Gradient'),
   'grid-overlay': require('./modules/GridOverlay'),
   'import-image': require('./modules/ImportImage'),
+  'mask': require('./modules/Mask'),
   'minify-image': require('./modules/MinifyImage'),
-  // 'invert': require('image-sequencer-invert'),
+  // 'invert': require('image-sequencer-invert'), this code imports the invert module from a different repository altogether (using a require statement)
+  // Which is a powerful feature of ImageSequencer, the modules are independent of the rest of the library's source.
   'invert': require('./modules/Invert'),
   'ndvi': require('./modules/Ndvi'),
   'ndvi-colormap': require('./modules/NdviColormap'),
@@ -43,6 +45,8 @@ module.exports = {
   'resize': require('./modules/Resize'),
   'rotate': require('./modules/Rotate'),
   'saturation': require('./modules/Saturation'),
+  'shadow': require('./modules/Shadow'),
+  'sharpen': require('./modules/Sharpen'),
   'text-overlay': require('./modules/TextOverlay'),
   'threshold': require('./modules/Threshold'),
   'tint': require('./modules/Tint'),

src/cli/index.js

@@ -0,0 +1,102 @@
+require('../ImageSequencer');
+sequencer = ImageSequencer({ ui: true });
+var fs = require('fs');
+var { Command } = require('commander');
+var utils = require('../CliUtils');
+
+var saveSequence = require('./saveSequence.js');
+var installModule = require('./installModule.js');
+var sequencerSteps = require('./sequencerSteps.js');
+
+function exit(message) {
+  console.error(message);
+  process.exit(1);
+}
+
+function executeSteps(program) {
+  // Set sequencer to log module outputs, if any.
+  sequencer.setUI({
+    onComplete: function (step) {
+      // Get information of outputs.
+      step.info = sequencer.modulesInfo(step.name);
+
+      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);
+    },
+  });
+
+  // Finally, if everything is alright, load the image, add the steps and run the sequencer.
+  sequencer.loadImages(program.image, function () {
+    console.warn(
+      '\x1b[33m%s\x1b[0m',
+      'Please wait \n output directory generated will be empty until the execution is complete'
+    );
+
+    //Generate the Output Directory
+    var outputFilename = program.output.split('/').slice(-1)[0];
+    if (outputFilename.includes('.')) {
+      // user did give an output filename we have to remove it from dir
+      program.output = program.output.split('/').slice(0, -1).join('/');
+    } else {
+      outputFilename = null;
+    }
+
+    sequencerSteps(program, sequencer, outputFilename);
+  });
+}
+
+function parseSteps(program) {
+  // Parse step into an array to allow for multiple steps.
+  if (!program.step) exit('No steps passed');
+  program.step = program.step.split(' ');
+
+  // User must input an image.
+  if (!program.image) exit('Can\'t read file.');
+
+  // User must input an image.
+  fs.access(program.image, function (err) {
+    if (err) exit('Can\'t read file.');
+  });
+
+  // User must input a step. If steps exist, check that every step is a valid step.
+  if (!program.step || !utils.validateSteps(program.step, sequencer))
+    exit('Please ensure all steps are valid.');
+
+  // If there's no user defined output directory, select a default directory.
+  program.output = program.output || './output/';
+
+  executeSteps(program);
+}
+
+function cli(args) {
+
+  let program = new Command();
+
+  program
+    .version('0.1.0')
+    .option('-i, --image [PATH/URL]', 'Input image URL')
+    .option('-s, --step [step-name]', 'Name of the step to be added.')
+    .option('-o, --output [PATH]', 'Directory where output will be stored.')
+    .option('-b, --basic', 'Basic mode outputs only final image')
+    .option('-c, --config [Object]', 'Options for the step')
+    .option(
+      '--save-sequence [string]',
+      'Name space separated with Stringified sequence'
+    )
+    .option(
+      '--install-module [string]',
+      'Module name space seaprated npm package name'
+    )
+    .parse(args);
+
+  const options = program.opts();
+  if (options.saveSequence) saveSequence(options, sequencer);
+  else if (options.installModule) installModule(options, sequencer);
+  else parseSteps(options);
+}
+
+module.exports = cli;

src/modules/BlobAnalysis/Module.js

@@ -10,9 +10,15 @@ module.exports = function BlobAnalysis(options, UI){
   
     var step = this;
 
-    function extraManipulation(pixels){
-  
-      pixels = require('./BlobAnalysis')(pixels);
+    function extraManipulation(pixels, setRenderState, generateOutput){
+      setRenderState(false);
+      if (!options.inBrowser) {
+        require('../_nomodule/gl-context')(input, callback, step, options);
+      } else{
+        pixels = require('./BlobAnalysis')(pixels);
+        setRenderState(true);
+        generateOutput();
+      }
       return pixels;
     }
   

src/modules/ColorHalftone/info.json

@@ -8,7 +8,8 @@
             "desc": "angle of rotation of the halftone patterns in radians",
             "default": "0.25",
             "min": "0",
-            "max": "1.57"
+            "max": "1.57",
+            "step": "0.05"
         },
         "size": {
             "type": "integer",

src/modules/Colorbar/Module.js

@@ -6,7 +6,7 @@ module.exports = require('../../util/createMetaModule.js')(
       { 'name': 'gradient', 'options': {} },
       { 'name': 'colormap', 'options': { colormap: options.colormap || defaults.colormap } },
       { 'name': 'crop', 'options': { 'y': 0, 'w': '100%', 'h': options.h || defaults.h } },
-      { 'name': 'overlay', 'options': { 'x': options.x || defaults.h, 'y': options.y || defaults.y, 'offset': -4 } }
+      { 'name': 'overlay', 'options': { 'x': options.x || defaults.x, 'y': options.y || defaults.y, 'offset': -4 }  }
     ];
   }, {
     infoJson: require('./info.json')

src/modules/Crop/Module.js

@@ -29,11 +29,13 @@ module.exports = function CropModule(options, UI) {
 
     options.step.input = input.src;
 
+    // We should do this via event/listener:
+    if (ui && ui.hide) ui.hide();
+
+
     function extraManipulation(pixels) {
       const newPixels = require('./Crop')(pixels, options, function() {
-        // We should do this via event/listener:
-        if (ui && ui.hide) ui.hide();
-
+        
         // Start custom UI setup (draggable UI)
         // Only once we have an input image
         if (setupComplete === false && options.step.inBrowser && !options.noUI) {

src/modules/Dynamic/Module.js

@@ -14,20 +14,18 @@ module.exports = function Dynamic(options, UI) {
     options.blue = options.blue || defaults.blue;
     options.green = options.green || defaults.green;
 
+    const Parser = require('expr-eval').Parser;
     function generator(expression) {
-      var func = 'f = function (r, g, b, a) { var R = r, G = g, B = b, A = a; return ' + expression + ';}';
-      var f;
-      eval(func);
-      return f;
+      let expr = Parser.parse('R = r; G = g; B = b; A = a; ' + expression);
+      return expr.toJSFunction("r,g,b,a,R,G,B,A");
     }
-
+    
     var channels = ['red', 'green', 'blue', 'alpha'];
 
     channels.forEach(function(channel) {
       if (channel === 'alpha'){
         options['alpha_function'] = function() { return 255; };
-      }
-      else{
+      } else {
         options[channel + '_function'] = generator(options[channel]);
       }
     });

src/modules/EdgeDetect/EdgeUtils.js

@@ -13,10 +13,10 @@ const kernelx = [
     [ 0, 0, 0],
     [ 1, 2, 1]
   ];
-  
+
 module.exports = function(pixels, highThresholdRatio, lowThresholdRatio, useHysteresis) {
   let angles = [], grads = [], strongEdgePixels = [], weakEdgePixels = [], pixelsToBeSupressed = [];
-  
+
   for (var x = 0; x < pixels.shape[0]; x++) {
     grads.push([]);
     angles.push([]);
@@ -110,10 +110,13 @@ function sobelFilter(pixels, x, y) {
  * @returns {Number} Category number of the given angle
  */
 function categorizeAngle(angle){
-  if ((angle >= -22.5 && angle <= 22.5) || (angle < -157.5 && angle >= -180)) return 1;
-  else if ((angle >= 22.5 && angle <= 67.5) || (angle < -112.5 && angle >= -157.5)) return 2;
-  else if ((angle >= 67.5 && angle <= 112.5) || (angle < -67.5 && angle >= -112.5)) return 3;
-  else if ((angle >= 112.5 && angle <= 157.5) || (angle < -22.5 && angle >= -67.5)) return 4;
+  const pi = Math.PI;
+  angle = angle > 0 ? angle : pi - Math.abs(angle); // Diagonally flip the angle if it is negative (since edge remains the same)
+
+  if (angle <= pi / 8 || angle > 7 * pi / 8) return 1;
+  else if (angle > pi / 8 && angle <= 3 * pi / 8) return 2;
+  else if (angle > 3 * pi / 8 && angle <= 5 * pi / 8) return 3;
+  else if (angle > 5 * pi / 8 && angle <= 7 * pi / 8) return 4;
 
   /* Category Map
   * 1 => E-W
@@ -143,8 +146,6 @@ const removeElem = (arr = [], elem) => { // Removes the specified element from t
 
 // Non Maximum Supression without interpolation.
 function nonMaxSupress(pixels, grads, angles, pixelsToBeSupressed) {
-  angles = angles.map((arr) => arr.map(convertToDegrees));
-
   for (let x = 0; x < pixels.shape[0]; x++) {
     for (let y = 0; y < pixels.shape[1]; y++) {
 
@@ -157,7 +158,7 @@ function nonMaxSupress(pixels, grads, angles, pixelsToBeSupressed) {
             pixelsToBeSupressed.push([x, y]);
           }
           break;
-          
+
         case 2:
           if (!((grads[x][y] >= grads[x + 1][y + 1]) && (grads[x][y] >= grads[x - 1][y - 1]))){
             pixelsToBeSupressed.push([x, y]);
@@ -181,15 +182,6 @@ function nonMaxSupress(pixels, grads, angles, pixelsToBeSupressed) {
   }
 }
 
-
-/**
- * @method convertToDegrees
- * @description Converts the given angle(in radians) to degrees.
- * @param {Number} radians Angle in radians
- * @returns {Number} Angle in degrees
- */
-var convertToDegrees = radians => (radians * 180) / Math.PI;
-
 // Finds the max value in a 2d array like grads.
 var findMaxInMatrix = arr => Math.max(...arr.map(el => el.map(val => val ? val : 0)).map(el => Math.max(...el)));
 

src/modules/Mask/Module.js

@@ -0,0 +1,82 @@
+module.exports = function Mask(options, UI, util) {
+  var defaults = require('./../../util/getDefaults.js')(require('./info.json'));
+  options.offset = options.offset || defaults.offset;
+  options.resize = options.resize || defaults.resize;
+
+  var output;
+
+  // This function is called on every draw.
+  function draw(input, callback, progressObj) {
+    progressObj.stop(true);
+    progressObj.overrideFlag = true;
+
+    var step = this;
+
+    var getPixels = require('get-pixels');
+
+    // convert offset as string to int
+    if (typeof options.offset === 'string')
+      options.offset = parseInt(options.offset);
+
+    // save first image's pixels
+    var priorStep = this.getStep(options.offset);
+
+    if (priorStep.output === undefined) {
+      this.output = input;
+      UI.notify('Offset Unavailable', 'offset-notification');
+      callback();
+    }
+
+    const alpha_masking = function(c, a) {
+      return (a * c + (255 - a) * c) / 255;
+    };
+    const internalSequencer = ImageSequencer({ inBrowser: false, ui: false });
+    internalSequencer.loadImage(priorStep.output.src, function() {
+      internalSequencer.importJSON([{ 'name': 'resize', 'options': { resize: options.resize } }]);
+      internalSequencer.run(function onCallback(internalOutput) {
+
+        getPixels(internalOutput, function(err, pixels) {
+          options.firstImagePixels = pixels;
+
+          function changePixel(r2, g2, b2, a2, x, y) {
+            let p = options.firstImagePixels;
+            let r1 = p.get(x, y, 0),
+              g1 = p.get(x, y, 1),
+              b1 = p.get(x, y, 2),
+              a1 = p.get(x, y, 3);
+
+            return [alpha_masking(r1, a2), alpha_masking(g1, a2), alpha_masking(b1, a2)];
+          }
+
+          function output(image, datauri, mimetype, wasmSuccess) {
+            step.output = {
+              src: datauri,
+              format: mimetype,
+              wasmSuccess,
+              useWasm: options.useWasm
+            };
+          }
+
+          // run PixelManipulatin on second image's pixels
+          return require('../_nomodule/PixelManipulation.js')(input, {
+            output: output,
+            ui: options.step.ui,
+            changePixel: changePixel,
+            format: input.format,
+            image: options.image,
+            inBrowser: options.inBrowser,
+            callback: callback,
+            useWasm: options.useWasm
+          });
+        });
+      });
+    });
+  }
+
+  return {
+    options: options,
+    draw: draw,
+    output: output,
+    UI: UI
+  };
+};

src/modules/Mask/index.js

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

src/modules/Mask/info.json

@@ -0,0 +1,18 @@
+{
+    "name": "mask",
+    "description": "Masks two images according to their Alpha values",
+    "inputs": {
+      "offset": {
+        "type": "integer",
+        "desc": "Choose which image to mask the current image with. Two steps back is -2, three steps back is -3 etc.",
+        "default": -2
+      },
+      "resize": {
+        "type": "string",
+        "desc": "Percentage value by which first image is to be resized",
+        "default": "125%"
+      }
+    },
+    "docs-link":"https://github.com/publiclab/image-sequencer/blob/main/docs/MODULES.md"
+  }
+  

src/modules/Overlay/Module.js

@@ -1,15 +1,17 @@
 module.exports = function Dynamic(options, UI, util) {
 
-  var defaults = require('./../../util/getDefaults.js')(require('./info.json'));
+  const defaults = require('./../../util/getDefaults.js')(require('./info.json'));
   options.x = options.x || defaults.x;
   options.y = options.y || defaults.y;
 
   if(options.step.inBrowser && !options.noUI && sequencer.getSteps().length < 2)
     options.offset = -1;
 
-  if (options.step.inBrowser && !options.noUI) var ui = require('./Ui.js')(options.step, UI);
+  let ui;
 
-  var output;
+  if (options.step.inBrowser && !options.noUI)  ui = require('./Ui.js')(options.step, UI);
+
+  let output;
 
   // This function is called on every draw.
   function draw(input, callback, progressObj) {
@@ -19,15 +21,15 @@ module.exports = function Dynamic(options, UI, util) {
     progressObj.stop(true);
     progressObj.overrideFlag = true;
 
-    var step = this;
+    const step = this;
 
-    var parseCornerCoordinateInputs = require('../../util/ParseInputCoordinates');
+    const parseCornerCoordinateInputs = require('../../util/ParseInputCoordinates');
 
     // save the pixels of the base image
-    var baseStepImage = this.getStep(options.offset).image;
-    var baseStepOutput = this.getOutput(options.offset);
+    const baseStepImage = this.getStep(options.offset).image;
+    const baseStepOutput = this.getOutput(options.offset);
 
-    var getPixels = require('get-pixels');
+    const getPixels = require('get-pixels');
 
     getPixels(input.src, function(err, pixels) {
       // parse the inputs
@@ -47,20 +49,29 @@ module.exports = function Dynamic(options, UI, util) {
 
       function changePixel(r1, g1, b1, a1, x, y) {
 
+        const firstImagePixels = [r1, g1, b1, a1];
+
         // overlay
-        var p = options.secondImagePixels;
+        const p = options.secondImagePixels;
         if (x >= options.x
           && x - options.x < p.shape[0]
           && y >= options.y
-          && y - options.y < p.shape[1])
-          return [
+          && y - options.y < p.shape[1]){
+
+          const secondImagePixels = [
             p.get(x - options.x, y - options.y, 0),
             p.get(x - options.x, y - options.y, 1),
             p.get(x - options.x, y - options.y, 2),
             p.get(x - options.x, y - options.y, 3)
           ];
+          
+          if(secondImagePixels[3] === 0)
+            return firstImagePixels;
+          else
+            return secondImagePixels;
+        }
         else
-          return [r1, g1, b1, a1];
+          return firstImagePixels;
       }
 
       function output(image, datauri, mimetype, wasmSuccess) {

src/modules/Resize/Module.js

@@ -1,6 +1,3 @@
-const imagejs = require('imagejs'),
-  pixelSetter = require('../../util/pixelSetter'),
-  ndarray = require('ndarray');
 /*
  * Resize the image by given percentage value
  */
@@ -19,44 +16,7 @@ module.exports = function Resize(options, UI) {
     const step = this;
 
     function extraManipulation(pixels) {
-      // Value above 100% scales up, and below 100% scales down
-      const resize_value = parseInt(options.resize.slice(0, -1));
-
-      if (resize_value == 100) return pixels;
-
-
-      const new_width = Math.round(pixels.shape[0] * (resize_value / 100)),
-        new_height = Math.round(pixels.shape[1] * (resize_value / 100));
-
-      const bitmap = new imagejs.Bitmap({ width: pixels.shape[0], height: pixels.shape[1] });
-      
-      for (let x = 0; x < pixels.shape[0]; x++) {
-        for (let y = 0; y < pixels.shape[1]; y++) {
-          let r = pixels.get(x, y, 0),
-            g = pixels.get(x, y, 1),
-            b = pixels.get(x, y, 2),
-            a = pixels.get(x, y, 3);
-
-          bitmap.setPixel(x, y, r, g, b, a);
-        }
-      }
-
-      const resized = bitmap.resize({
-        width: new_width,
-        height: new_height,
-        algorithm: 'bicubicInterpolation'
-      });
-
-      const newPix = new ndarray([], [new_width, new_height, 4]);
-
-      for (let x = 0; x < new_width; x++) {
-        for (let y = 0; y < new_height; y++) {
-          const {r, g, b, a} = resized.getPixel(x, y);
-          pixelSetter(x, y, [r, g, b, a], newPix);
-        }
-      }
-
-      return newPix;
+      return require('./Resize')(pixels, options);
     }
 
     function output(image, datauri, mimetype, wasmSuccess) {

src/modules/Resize/Resize.js

@@ -0,0 +1,44 @@
+const imagejs = require('imagejs'),
+  pixelSetter = require('../../util/pixelSetter'),
+  ndarray = require('ndarray');
+module.exports = function Resize(pixels, options) {
+  const resize_value = parseFloat(options.resize);
+
+  if (resize_value == 100) return pixels;
+
+  const new_width = Math.round(pixels.shape[0] * (resize_value / 100)),
+    new_height = Math.round(pixels.shape[1] * (resize_value / 100));
+
+  const bitmap = new imagejs.Bitmap({
+    width: pixels.shape[0],
+    height: pixels.shape[1]
+  });
+
+  for (let x = 0; x < pixels.shape[0]; x++) {
+    for (let y = 0; y < pixels.shape[1]; y++) {
+      let r = pixels.get(x, y, 0),
+        g = pixels.get(x, y, 1),
+        b = pixels.get(x, y, 2),
+        a = pixels.get(x, y, 3);
+
+      bitmap.setPixel(x, y, r, g, b, a);
+    }
+  }
+
+  const resized = bitmap.resize({
+    width: new_width,
+    height: new_height,
+    algorithm: 'bicubicInterpolation'
+  });
+
+  const newPix = new ndarray([], [new_width, new_height, 4]);
+
+  for (let x = 0; x < new_width; x++) {
+    for (let y = 0; y < new_height; y++) {
+      const { r, g, b, a } = resized.getPixel(x, y);
+      pixelSetter(x, y, [r, g, b, a], newPix);
+    }
+  }
+
+  return newPix;
+};

src/modules/Shadow/Module.js

@@ -0,0 +1,146 @@
+/*
+* Create Shadow
+*/
+module.exports = function canvasResize(options, UI) {
+
+  var defaults = require('./../../util/getDefaults.js')(require('./info.json'));
+  const pixelSetter = require('../../util/pixelSetter.js');
+
+  var output;
+
+  function draw(input, callback, progressObj) {
+
+    options.X_value = parseInt(options.X_value || defaults.X_value);
+    options.Y_value = parseInt(options.Y_value || defaults.Y_value);
+
+    progressObj.stop(true);
+    progressObj.overrideFlag = true;
+
+    var step = this;
+
+    function extraManipulation(pixels) {
+      let [w, h] = pixels.shape;
+      let newPixels = require('ndarray')(new Uint8Array(4 * (w + Math.abs(options.X_value)) * (h + Math.abs(options.Y_value))).fill(0), [(w + Math.abs(options.X_value)), (h + Math.abs(options.Y_value)), 4]);
+      let iMax = w,
+        jMax = h;
+      if (options.X_value < 0 && options.Y_value < 0) {
+        for (var k = 0; k < Math.abs(options.X_value); k++) {
+          for (var l = 0; l < (h + Math.abs(options.Y_value)); l++) {
+            let val = 255 - ((k / Math.abs(options.X_value)) * 255);
+            pixelSetter(k, l, [val, val, val, 255], newPixels);
+          }
+        }
+        for (var k = 0; k < (w + Math.abs(options.X_value)); k++) {
+          for (var l = 0; l < Math.abs(options.Y_value); l++) {
+            if (k < Math.abs(options.X_value) && k < l) {
+              continue;
+            }
+            let val = 255 - ((l / Math.abs(options.Y_value)) * 255);
+            pixelSetter(k, l, [val, val, val, 255], newPixels);
+          }
+        }
+        for (let i = 0; i < iMax && i < w; i++) {
+          for (let j = 0; j < jMax && j < h; j++) {
+            let x = i + Math.abs(options.X_value), y = j + Math.abs(options.Y_value);
+            pixelSetter(x, y, [pixels.get(i, j, 0), pixels.get(i, j, 1), pixels.get(i, j, 2), pixels.get(i, j, 3)], newPixels);
+          }
+        }
+      }
+
+      else if (options.X_value >= 0 && options.Y_value >= 0) {
+        for (var k = w; k < (w + options.X_value); k++) {
+          for (var l = 0; l < (h + options.Y_value); l++) {
+            let val = (((k - w) / options.X_value) * 255);
+            pixelSetter(k, l, [val, val, val, 255], newPixels);
+          }
+        }
+        for (var k = 0; k < (w + options.X_value); k++) {
+          for (var l = h; l < (h + options.Y_value); l++) {
+            if (k >= w && l >= h && ((k - w) >= (l - h))) {
+              continue;
+            }
+            let val = ((l - h) / options.Y_value * 255);
+            pixelSetter(k, l, [val, val, val, 255], newPixels);
+          }
+        }
+        for (let i = 0; i < iMax && i < w; i++) {
+          for (let j = 0; j < jMax && j < h; j++) {
+            let x = i, y = j;
+            pixelSetter(x, y, [pixels.get(i, j, 0), pixels.get(i, j, 1), pixels.get(i, j, 2), pixels.get(i, j, 3)], newPixels);
+          }
+        }
+      }
+      
+      else if (options.X_value < 0 && options.Y_value >= 0) {
+        for (var k = 0; k < (w + Math.abs(options.X_value)); k++) {
+          for (var l = h; l < (h + options.Y_value); l++) {
+            let val = ((l - h) / options.Y_value * 255);
+            pixelSetter(k, l, [val, val, val, 255], newPixels);
+          }
+        }
+        for (var k = 0; k < Math.abs(options.X_value); k++) {
+          for (var l = 0; l < (h + options.Y_value); l++) {
+            if (l + (k * (options.Y_value / Math.abs(options.X_value))) - (options.Y_value + h) > 0 && l >= h) {
+              continue;
+            }
+            let val = 255 - ((k / Math.abs(options.X_value)) * 255);
+            pixelSetter(k, l, [val, val, val, 255], newPixels);
+          }
+        }
+        for (let i = 0; i < iMax && i < w; i++) {
+          for (let j = 0; j < jMax && j < h; j++) {
+            let x = i + Math.abs(options.X_value), y = j;
+            pixelSetter(x, y, [pixels.get(i, j, 0), pixels.get(i, j, 1), pixels.get(i, j, 2), pixels.get(i, j, 3)], newPixels);
+          }
+        }
+      }
+
+      else if (options.X_value >= 0 && options.Y_value < 0) {
+        for (var k = w; k < (w + options.X_value); k++) {
+          for (var l = 0; l < (h + Math.abs(options.Y_value)); l++) {
+            let val = (((k - w) / options.X_value) * 255);
+            pixelSetter(k, l, [val, val, val, 255], newPixels);
+          }
+        }
+        for (var k = 0; k < (w + options.X_value); k++) {
+          for (var l = 0; l < Math.abs(options.Y_value); l++) {
+            if (l >= ((options.X_value / Math.abs(options.Y_value)) * (w + options.X_value - k)) && k >= w) {
+              continue;
+            }
+            let val = 255 - (l / Math.abs(options.Y_value) * 255);
+            pixelSetter(k, l, [val, val, val, 255], newPixels);
+          }
+        }
+        for (let i = 0; i < iMax && i < w; i++) {
+          for (let j = 0; j < jMax && j < h; j++) {
+            let x = i, y = j + Math.abs(options.Y_value);
+            pixelSetter(x, y, [pixels.get(i, j, 0), pixels.get(i, j, 1), pixels.get(i, j, 2), pixels.get(i, j, 3)], newPixels);
+          }
+        }
+      }
+      return newPixels;
+    }
+
+    function output(image, datauri, mimetype, wasmSuccess) {
+      step.output = { src: datauri, format: mimetype, wasmSuccess, useWasm: options.useWasm };
+    }
+
+    return require('../_nomodule/PixelManipulation.js')(input, {
+      output: output,
+      ui: options.step.ui,
+      extraManipulation: extraManipulation,
+      format: input.format,
+      image: options.image,
+      inBrowser: options.inBrowser,
+      callback: callback,
+      useWasm:options.useWasm
+    });
+
+  }
+  return {
+    options: options,
+    draw: draw,
+    output: output,
+    UI: UI
+  };
+};

src/modules/Shadow/index.js

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

src/modules/Shadow/info.json

@@ -0,0 +1,17 @@
+{
+  "name": "shadow",
+  "description": "Creates a two sided shadow.",
+  "inputs": {
+    "X_value": {
+      "type": "integer",
+      "desc": "X-value",
+      "default": 20
+    },
+    "Y_value": {
+      "type": "integer",
+      "desc": "Y-value",
+      "default": 20
+    }
+  },
+  "docs-link":"https://github.com/publiclab/image-sequencer/blob/main/docs/MODULES.md#shadow-module"
+}

src/modules/Sharpen/Module.js

@@ -0,0 +1,46 @@
+/*
+  Sharpen an image
+*/
+module.exports = function Sharpen(options, UI) {
+
+  let defaults = require('./../../util/getDefaults.js')(require('./info.json'));
+  options.sharpenStrength = options.sharpenStrength || defaults.sharpenStrength;
+  options.sharpenStrength = parseFloat(options.sharpenStrength); //returns a float
+  let output;
+  
+  function draw(input, callback, progressObj) {
+  
+    progressObj.stop(true);
+    progressObj.overrideFlag = true;
+  
+    let step = this;
+  
+    function extraManipulation(pixels) {
+      pixels = require('./Sharpen')(pixels, options.sharpenStrength);
+      return (pixels);
+    }
+  
+    function output(image, datauri, mimetype, wasmSuccess) {
+      step.output = { src: datauri, format: mimetype, wasmSuccess, useWasm: options.useWasm };
+    }
+  
+    return require('../_nomodule/PixelManipulation.js')(input, {
+      output: output,
+      ui: options.step.ui,
+      inBrowser: options.inBrowser,
+      extraManipulation: extraManipulation,
+      format: input.format,
+      image: options.image,
+      callback: callback,
+      useWasm:options.useWasm
+    });
+  
+  }
+  return {
+    options: options,
+    draw: draw,
+    output: output,
+    UI: UI
+  };
+};
+  

src/modules/Sharpen/Sharpen.js

@@ -0,0 +1,48 @@
+// Generates a 3x3 convolution sharpening kernel
+function kernelGenerator(strength = 1) { //default value of sharpeningStrength set to 1
+
+  let kernel = [
+    [0, -1 * strength, 0],
+    [-1 * strength, 5 * strength, -1 * strength],
+    [0, -1 * strength, 0]
+  ];
+  return kernel;
+}
+
+module.exports = exports = function(pixels, sharpen) {
+  const pixelSetter = require('../../util/pixelSetter.js');
+    
+  let kernel = kernelGenerator(sharpen), // Generate the kernel based on the strength input.
+    pixs = { // Separates the rgb channel pixels to convolve on the GPU.
+      r: [],
+      g: [],
+      b: [],
+    };
+  for (let y = 0; y < pixels.shape[1]; y++){
+    pixs.r.push([]);
+    pixs.g.push([]);
+    pixs.b.push([]);
+
+    for (let x = 0; x < pixels.shape[0]; x++){
+      pixs.r[y].push(pixels.get(x, y, 0));
+      pixs.g[y].push(pixels.get(x, y, 1));
+      pixs.b[y].push(pixels.get(x, y, 2));
+    }
+  }
+
+  const convolve = require('../_nomodule/gpuUtils').convolve; // GPU convolution function.
+
+  const conPix = convolve([pixs.r, pixs.g, pixs.b], kernel); // Convolves the pixels (all channels separately) on the GPU.
+
+  for (let y = 0; y < pixels.shape[1]; y++){
+    for (let x = 0; x < pixels.shape[0]; x++){
+      var pixelvalue = [Math.max(0, Math.min(conPix[0][y][x], 255)),
+        Math.max(0, Math.min(conPix[1][y][x], 255)),
+        Math.max(0, Math.min(conPix[2][y][x], 255))];
+
+      pixelSetter(x, y, pixelvalue, pixels); // Sets the image pixels according to the sharpened values.
+      
+    }
+  }
+  return (pixels);
+};

src/modules/Sharpen/index.js

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

src/modules/Sharpen/info.json

@@ -0,0 +1,15 @@
+{
+    "name": "sharpen",
+    "description": "Applies a sharpening filter given by the intensity value",
+    "inputs": {
+        "sharpenStrength": {
+            "type": "float",
+            "desc": "Amount of sharpening (More sharpening gives more detail, but may lead to overexposure)",
+            "default": 1,
+            "min": 1,
+            "max": 1.5,
+            "step": 0.05
+        }
+    },
+    "docs-link":"https://github.com/publiclab/image-sequencer/blob/main/docs/MODULES.md#sharpen-module"
+}

src/modules/TextOverlay/info.json

@@ -8,6 +8,10 @@
             "desc": "Enter the text to overlay.",
             "default": "Lorem ipsum"
         },
+        "Custom-Coordinates": {
+            "type": "coordinate-input",
+            "desc": "Click to fill Coordinates"
+        },
         "x": {
             "type": "integer",
             "desc": "Starting text horizontal position.",

src/modules/_nomodule/gl-context.js

@@ -15,19 +15,21 @@ module.exports = function runInBrowserContext(input, callback, step, options) {
             is not available otherwise */
       page.goto('https://google.com').then(() => {
         page.addScriptTag({ path: require('path').join(__dirname, '../../../dist/image-sequencer.js') }).then(() => {
-          page.evaluate((options) => {
-            return new Promise((resolve, reject) => {
-              var sequencer = ImageSequencer();
-              sequencer.loadImage(options.input.src);
-              sequencer.addSteps(options.modOptions.step, options.modOptions);
-              sequencer.run(function cb(out) {
-                resolve(sequencer.steps[1].output.src);
+          page.addScriptTag({path: require('path').join(__dirname, '../../../node_modules/opencv.js/opencv.js')}).then(() => {
+            page.evaluate((options) => {
+              return new Promise((resolve, reject) => {
+                var sequencer = ImageSequencer();
+                sequencer.loadImage(options.input.src);
+                sequencer.addSteps(options.modOptions.step, options.modOptions);
+                sequencer.run(function cb(out) {
+                  resolve(sequencer.steps[1].output.src);
+                });
+              });
+            }, obj).then(el => {
+              browser.close().then(() => {
+                step.output = { src: el, format: input.format };
+                callback();
               });
-            });
-          }, obj).then(el => {
-            browser.close().then(() => {
-              step.output = { src: el, format: input.format };
-              callback();
             });
           });
         });

src/ui/LoadImage.js

@@ -7,6 +7,22 @@ function LoadImage(ref, name, src, main_callback) {
     };
     return image;
   }
+
+  // function to check whether a image can be fetched from external source or not
+  function checkForError(image_url) {
+    return fetch(image_url).then(function(res) {
+      if(res)
+        return false;
+      else 
+        return true;
+    }).catch(function(err) {
+      if(err)
+        console.log('Error occured because of image URL ',err);
+
+      return true;
+    });
+  }
+
   function CImage(src, step, callback) {
     var datauri;
     if (src.match(/^data:/i)) {
@@ -25,18 +41,42 @@ function LoadImage(ref, name, src, main_callback) {
       });
     }
     else if (ref.options.inBrowser) {
-      var ext = src.split('.').pop();
-      var image = document.createElement('img');
-      var canvas = document.createElement('canvas');
-      var context = canvas.getContext('2d');
-      image.onload = function() {
-        canvas.width = image.naturalWidth;
-        canvas.height = image.naturalHeight;
-        context.drawImage(image, 0, 0);
-        datauri = canvas.toDataURL(ext);
-        callback(datauri, step);
-      };
-      image.src = src;
+      
+      let notifyBox = document.querySelector('div.notify-box');
+      let closePopUP = document.getElementById('close-popup');
+      if(src.indexOf('images/') !== 0  && src.indexOf('./images/') !== 0 && checkForError(src)){
+
+        if(notifyBox){
+          notifyBox.classList.remove('d-none');
+          notifyBox.classList.add('d-block');
+        }
+
+        if(closePopUP){
+          closePopUP.addEventListener('click',function(){
+            if(notifyBox){
+              notifyBox.classList.remove('d-block');
+              notifyBox.classList.add('d-none');
+            }
+            if(document.querySelector('button.remove'))
+              document.querySelector('button.remove').click(); // Remove the step due to redundant processing.
+            location.reload();
+          });
+        }
+      }
+      else{
+        var ext = src.split('.').pop();
+        var image = document.createElement('img');
+        var canvas = document.createElement('canvas');
+        var context = canvas.getContext('2d');
+        image.onload = function() {
+          canvas.width = image.naturalWidth;
+          canvas.height = image.naturalHeight;
+          context.drawImage(image, 0, 0);
+          datauri = canvas.toDataURL(ext);
+          callback(datauri, step);
+        };
+        image.src = src;
+      }
     }
     else {
       datauri = require('urify')(src);

src/ui/SetInputStep.js

@@ -51,21 +51,49 @@ function setInputStepInit() {
         video.onloadedmetadata = function(e) {
           video.play();
         };
+
+        document.getElementById('capture').addEventListener('click', function(){
+          context.drawImage(video, 0, 0, 400, 300);
+          options.onTakePhoto(canvas.toDataURL());
+          setTimeout(stopStream(stream),1); // wait for 1 second before closing webcam so that image loads properly
+        });
+
         document.getElementById('close').addEventListener('click', function () {
           stopStream(stream);
         });
       }
       function handleError(error) {
         console.log('navigator.getUserMedia error: ', error);
+
+        // when user dismissed the camera access (includes closing of prompt which requests for camera access)
+        if(error.message == 'Permission denied' || error.message == 'NotAllowedError' || error.message == 'PermissionDismissedError'){
+          document.getElementById('capture').addEventListener('click', function(e) {
+            alert('Enable camera access in order to take picture');
+          });
+        }
+        
+        // when user don't have webcam to use.
+        if(error.message == 'NotFoundError' || error.message == 'DevicesNotFoundError'){
+          alert('You do not have appropriate devices to use this Functionality');
+        }
+
+        // when webcam is already used by some other application
+        if(error.message == 'NotReadableError' || error.message == 'TrackStartError' || error.message == 'Concurrent mic process limit'){
+          alert('Your webcam is already in use by some other application');
+        }
+
+        // when some of the requested constraints can't be satisfied like high frame rate or high resolution
+        if(error.message == 'OverconstrainedError' || error.message == 'ConstraintNotSatisfiedError'){
+          console.log('Requested Constraints can not be satisfied ', 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());
+      
+      document.getElementById('close').addEventListener('click', function() {
+        video.style.display = 'none';
       });
 
+
       function stopStream(stream) {
         stream.getVideoTracks().forEach(function (track) {
           track.stop();
@@ -86,10 +114,10 @@ function setInputStepInit() {
     dropzone[0].addEventListener('drop', handleFile, false);
  
     dropzone.on('dragover', function onDragover(e) {
-      e.stopPropagation();
+      dropzone.addClass('hover');
       e.preventDefault();
-      e.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
-    }, false);
+      e.stopPropagation();
+    });
  
     dropzone.on('dragenter', function onDragEnter(e) {
       dropzone.addClass('hover');
@@ -99,6 +127,11 @@ function setInputStepInit() {
       dropzone.removeClass('hover');
     });
 
+    dropzone.on('drop', function onDrop(e) {
+      dropzone.removeClass('hover');
+      e.preventDefault();
+    });
+
   };
 
 }

src/util/getDefaults.js

@@ -1,3 +1,4 @@
+/** Parses the defaults and gets the input which is available. */
 module.exports = function(info){
   var defaults = {};
   for (var key in info.inputs) {

src/util/pixelSetter.js

@@ -1,5 +1,12 @@
+/**  
+ * @param {number} x x-coordinate.
+ * @param {number} y y-coordinate.
+ * @param {object} value array [r, g, b, a]
+ * @param {object} pixels NDarray of pixels.
+ * @description Sets the pixels from 0 through length of value. 
+*/
 module.exports = function(x, y, value, pixels){
   for(let i = 0; i < value.length; i++){
     pixels.set(x, y, i, value[i]);
   }
-};
+};

test/cli/saveSequence.js

@@ -0,0 +1,22 @@
+const test = require('tape');
+const cli = require('../../src/cli');
+
+test('testing save sequence function', function (t) {
+  try {
+    cli([
+      'node', 'test',
+      '--save-sequence',
+      '"invert-colormap invert(),colormap()"',
+    ]);
+    t.true(1, 'creation success');
+  } catch (error) {
+    t.true(!error, 'creation fail');
+  }
+  try {
+    cli(['node', 'test', '--save-sequence']);
+    t.true(0, 'creation success');
+  } catch (error) {
+    t.true(1, 'creation fail');
+  }
+  t.end();
+});

test/core/images/moon.js

@@ -0,0 +1,2 @@
+module.exports = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAABTmlDQ1BpY2MAACiRY2BgUkksKMhhYWBgyM0rKQpyd1KIiIxSYH/IwA6EvAxiDAqJycUFjgEBPkAlDDAaFXy7xsAIoi/rgsw6JTW1SbVewNdipvDVi69EmzDVowCulNTiZCD9B4hTkwuKShgYGFOAbOXykgIQuwPIFikCOgrIngNip0PYG0DsJAj7CFhNSJAzkH0DyFZIzkgEmsH4A8jWSUIST0diQ+0FAW6XzOKCnMRKhQBjAq4lA5SkVpSAaOf8gsqizPSMEgVHYCilKnjmJevpKBgZGJozMIDCHKL6cyA4LBnFziDEmu8zMNju/////26EmNd+BoaNQJ1cOxFiGhYMDILcDAwndhYkFiWChZiBmCktjYHh03IGBt5IBgbhC0A90cVpxkZgeUYeJwYG1nv//39WY2Bgn8zA8HfC//+/F/3//3cxUPMdBoYDeQAVIWXu+j9DEQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAABPlBMVEUAAAABAQECAgIKCQoHBwcYGBgyMjIpKSkDAwMXFxdiYmJaWlpLS0tFRUUiIiIFBQUBAAFQUFBra2t0dHRfX19NTU0eHh4CAQEWFhZ1dXVdXV1xcXFnZ2eEhIR2dnZBQUEUFBQ+Pj6JiYmGhoZ9fX2Dg4Nzc3NWVlYxMTEMDAxUU1SampqLi4ukpKR/f397e3tbW1svLy9CQkK7u7uwsLC3t7eSkpKKiopmZmZKSkodHR0uLi61tbWIiIidnZ2ZmZmenp5hYWFPT084ODgPDw+np6eWlpaoqKh5eXlEREQoKCgEBAR8fHyrq6uCgoLT09PIyMi2trYzMzMKCgqHh4exsbHX19empqaVlZWPj489PT3Nzc1ycnKbm5tcXFwsLCxsbGyTk5OqqqplZWVSUlISERJubm4wMDAICAj///+XegsgAAAAAWJLR0RpvGvEtAAAAAlwSFlzAAAWJQAAFiUBSVIk8AAAAAd0SU1FB+UDFAEmFb1Hl3EAAAGLelRYdFJhdyBwcm9maWxlIHR5cGUgaWNjAAA4jbVTW27EMAj89yl6BF4G+zh+JFLvf4FiO15lV92q/ehIUWLAMAwkfLYWPgaipAADRKJoYKANZFpAux4mRpHEhAhiijkWArAD3W3X0wFQPQEERWVjA8EIEaTBhdfzTzi96mCE29CZ+mbWCpYcE1G0E0E6p5yRe+x4FHT7a7Lwm4o3FBWNxsoXl4uxxuCNgZEtZVAvhYjNXCHY9pSWHYdqU611zG3bg9rdUWE79OlCk1si8QEsRtivAkNs1qSbCZ7b0fTNBS/8JtFTzw9UEc1jmtpc/uzjB36NecJfxf6/RDY6SiaPRMJ6+pSykWY1dRf5Uq6d0ujfWQ9lOqgRMDEw8tjsx8Y/MTo5juXcC4roe/n4NW5I3M/x5l7PhVrDd4FS6gysV1UoNX8XR4nTqgh1MmqpZm8BvS28xe0pkTomYyorcY95JuC+IkqswUevzHwvhdBknWM/JnMmXcrmmfzsGVZHhea7F14acZ+r3kCP8AW8zeykgS8wzAAAAAFvck5UAc+id5oAAADLSURBVBjTY2BgYGAEIiYGBGBkYGZhYGJE4rOysbNyMDHB+Zxc3Dy8fPyMAjABQSFhES5RMXGYFglJKWkZWTl5BXGokKKSkLKKqpq6hiYjxGAtbR1dVT19aQNDfoiAkbGJqZmktrmFpRXEbmsbW207ewdlRydniCYXVx1VN3c7WQ8uTy9voAAHg4+vn39AoLafHHdQMNgdmrYhoWGB4RGRalESUKeb6UbbxsSGxInGg01lYnBJSExyD49ITpFgAIsAzU71TEuLS88AcgCXBRyOXT9PTwAAAOBlWElmTU0AKgAAAAgABgESAAMAAAABAAEAAAEaAAUAAAABAAAAVgEbAAUAAAABAAAAXgEoAAMAAAABAAIAAAITAAMAAAABAAEAAIdpAAQAAAABAAAAZgAAAAAAAACQAAAAAQAAAJAAAAABAAiQAAAHAAAABDAyMjGRAQAHAAAABAECAwCShgAHAAAAEgAAAMygAAAHAAAABDAxMDCgAQADAAAAAQABAACgAgAEAAAAAQAAApSgAwAEAAAAAQAAAqikBgADAAAAAQAAAAAAAAAAQVNDSUkAAABTY3JlZW5zaG90AAAsGuu1AAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDIxLTAzLTIwVDAxOjM4OjIxKzAwOjAw3y/n5QAAACV0RVh0ZGF0ZTptb2RpZnkAMjAyMS0wMy0yMFQwMTozODoyMSswMDowMK5yX1kAAAARdEVYdGV4aWY6Q29sb3JTcGFjZQAxD5sCSQAAACd0RVh0ZXhpZjpDb21wb25lbnRzQ29uZmlndXJhdGlvbgAxLCAyLCAzLCAwVaQjvwAAABN0RVh0ZXhpZjpFeGlmT2Zmc2V0ADEwMnNCKacAAAAfdEVYdGV4aWY6RXhpZlZlcnNpb24ANDgsIDUwLCA1MCwgNDlj1An4AAAAI3RFWHRleGlmOkZsYXNoUGl4VmVyc2lvbgA0OCwgNDksIDQ4LCA0OO/ZB2sAAAAYdEVYdGV4aWY6UGl4ZWxYRGltZW5zaW9uADY2MBUn8W4AAAAYdEVYdGV4aWY6UGl4ZWxZRGltZW5zaW9uADY4MBarPZYAAAAXdEVYdGV4aWY6U2NlbmVDYXB0dXJlVHlwZQAwIrQxYwAAAFx0RVh0ZXhpZjpVc2VyQ29tbWVudAA2NSwgODMsIDY3LCA3MywgNzMsIDAsIDAsIDAsIDgzLCA5OSwgMTE0LCAxMDEsIDEwMSwgMTEwLCAxMTUsIDEwNCwgMTExLCAxMTZAuB9yAAAAF3RFWHRleGlmOllDYkNyUG9zaXRpb25pbmcAMawPgGMAAAAodEVYdGljYzpjb3B5cmlnaHQAQ29weXJpZ2h0IEFwcGxlIEluYy4sIDIwMTe/8xjQAAAAGnRFWHRpY2M6ZGVzY3JpcHRpb24ARGlzcGxheSBQM495u7wAAAAASUVORK5CYII=';
+//base64 of original unmodified image

test/core/modules/resize.js

@@ -1,4 +1,21 @@
 const testModule = require('../templates/module-test'),
-  benchmark = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAVCAYAAACpF6WWAAAAAklEQVR4AewaftIAAAAzSURBVLXBAQEAMAiAME7/zN4Ssr2BzzEJSEACEpCABCQgAQlIQAISkIAEJCABCUhAAhJYclMCJyy7k2QAAAAASUVORK5CYII=';
+  benchmark = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAVCAYAAACpF6WWAAAAAklEQVR4AewaftIAAAAzSURBVLXBAQEAMAiAME7/zN4Ssr2BzzEJSEACEpCABCQgAQlIQAISkIAEJCABCUhAAhJYclMCJyy7k2QAAAAASUVORK5CYII=',
 
-testModule('resize', {resize: '129%'}, benchmark);
+  benchmark1 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAAAAAklEQVR4AewaftIAAAAkSURBVJXBAQEAMAiAME7/zN4Ksr2Bz5EEEkgggQQSSCCBBBIs6poCE8Zr7KAAAAAASUVORK5CYII=',
+
+  benchmark2 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAAklEQVR4AewaftIAAAAiSURBVI3BAQEAAAiAIPP/5uqCMAtHIJFEEkkkkUQSSSTRAzwDAhGkYPRhAAAAAElFTkSuQmCC',
+
+  benchmark3 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAAklEQVR4AewaftIAAAAdSURBVHXBAQEAMAiAME7/zN4Csr2Bz0GCBAkSJCwpbQIJAvmJUgAAAABJRU5ErkJggg==',
+
+  options1 = {
+    resize: '70.85%'
+  },
+  options2 = {
+    resize: '60 %'
+  },
+  options3 = {
+    resize: '40'
+  };
+
+testModule('resize', {resize: '129%'}, benchmark);
+require('../templates/options-test')('resize', [options1, options2, options3], [benchmark1, benchmark2, benchmark3]);

test/core/modules/sharpen.js

@@ -0,0 +1,14 @@
+const testModule = require('../templates/module-test'),
+  image = require('../images/moon'),
+  benchmark = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAklEQVR4AewaftIAAAJZSURBVH3BPUvrUACA4bfnJETsoIIV6qBFCtKiQoc6SPD7I3/ACw6KoJv+Bkm4Sy/iD3DQzU2oOLu5iCCilKJQ7CjtFbcEY3Ka24AFEa/PkwAiPmiaRhiGxIQQSCkJgoCfCD7ouk4YhnS0Wi2iKCKRSPATQZuu6wRBQGz11yqFQgHDMAjDkCiKMAyD/xFSSoIgIOZ5HoPpQYaHh9nZ2aG3t5eY7/toaHxH8OHw8JDj42NmZ2eRUiKlZG1tjYQQxEJCviOUUsS2t7dxHIerqyvq9Trr6+tsbm6yvLREhyElX2m0LSwu8Pb2RjKZJJ/PYxgG19fXPD4+0tfXRzabpVar4SuFlBKlFB2CtpW5FZp/m0xPT2NZFvV6nUajgeu6jI6Osru7S7FYJKaU4jNB2+8/v8kMZzg4OGBgYIBCoYBt29i2jWmaPD09YZomXV1dxIQQdEjAfvffsW2bXC5HKpViaGgIy7LwfZ9KpcL5+Tmu61IsFrm/vyeKIqSURFGE4BPTNCmXyxwdHdHT08Pd3R03NzdsbW0xMjJCrVZjbm6OmFKKmEgmk3ScnJxwdnbG6ekpY2NjWJbF/Pw8Dw8PpNNp8vk8ruvymQzD0KbNcRxs26ZareJ5HjMzMzw/PzMxMcHr6ytTU1PkcjnK5TIvLy90SMDWdZ1Wq4XjOFQqFRqNBtlslkwmQ6lUolQqcXFxwd7eHsvLy4yPj3N7e0ssAUS0dXd343kesWq1Sn+qn1R/ipjv+0gp2d/fZ3FxkcnJSWKappEAIj5IKVFK8dnGxgbNZhPXdbm8vOSrf2/T7iEkhMBLAAAAAElFTkSuQmCC',
+  benchmark1 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAklEQVR4AewaftIAAAI8SURBVH3BPUvjYADA8X+Sh6RUqS9jdx0cilMEl1oQQYfTVUHwtJycIoIuTpoigoubn0D0E+jsC+pSqDoXpCB4DkVMsR48aeJzeaABEc/fzwAUbbZtEwQBmmVZCCGQUvIdkzbHcQiCgEQURSilMAyD75jEHMdBSom2VdpifHycdDpNEAQopUin0/yPJYTwWq0WmlKKpz9PGIbB0tISl5eXNJtNWq0WNjYREZ+ZtD0+PlKr1ZienkYIgRCCnZ0dDMtCCwj4ihmGIVo2m6VQKHB8fMzt7S1TU1PMz8/ze3GRRFoIPhPEir+KaD09PeTzeTo6OqjX61xfX5PNZnFdl3K5zN8wRAhBGIYkTGLLP5fRZmdnyWQy3NzccH9/j+/7DA8Pc3BwwOTkJFoYhnxkEhv9MYq2traGNjExwcjICHNzcxQKBSqVCjMzM3R2dqJZlkXCJPZcf0bL5XK8vb0xMDCA7/to1WqVw8NDzs/P2dzcRIuiCCEEmgV4xDzPo9FocHp6ytnZGWNjY1SrVU5OTlhfX0dKycXFBUNDQ9zd3fH+/o5mdnd3k9jY2GB3d5ft7W20/v5+FhYWuLq6oq+vj3w+j+/7fGRJKT1ipVIJz/PQBgcHSaVSaKlUit7eXnK5HK7rsr+/z8PDAwkDUI7jIKVEU0qRyGQyvL6+opSiUqlQLBZZXV2l2WyysrKCZgCKWFdXF41GA00pxVfK5TKu62IYBppt2xiAok0IQRiGfLS3t0etVuPl5YWjoyM++wcQzOdOsGwgXgAAAABJRU5ErkJggg==',
+  option = {
+    sharpenStrength: 1.0
+  },
+  option1 = {
+    sharpenStrength: 1.5
+  },
+  optionsTest = require('../templates/options-test');
+
+optionsTest('sharpen', [option, option1], [benchmark, benchmark1], image);
+testModule('sharpen', option, benchmark, image);

test/core/sequencer/sw.js

@@ -0,0 +1,37 @@
+var setUpCache = new require('../../../examples/lib/cache')();
+var test = require('tape');
+
+function SWInstallation(){
+    return new Promise(() => {
+      return setupCache();
+    });
+}
+
+function UnRegisterSW(){
+
+    function unregister() {
+        return navigator.serviceWorker.getRegistrations()
+        .then(function(registrations) {
+            var unRegisteredWorker = registrations.map(function(registration) {
+            return registration.unregister();
+            });
+            return Promise.all(unRegisteredWorker);
+        });
+    }
+    
+    return Promise.all([
+        unregister(),
+        setUpCache.clearCache()
+    ]);
+}  
+
+test('Register service worker',function(t) {
+
+    t.test('unregister service worker',function(st) {
+      st.equal(UnRegisterSW(),true,'unregistered successfully and cleared the cache') 
+    })
+
+    t.test('install service worker',function(st) {
+      st.equal(SWInstallation(),true,'successfully installed new service worker')
+    });
+});

test/core/templates/gif-module-test.js

@@ -1,6 +1,8 @@
 const test = require('tape'),
   base64Img = require('base64-img');
 
+const compare = require('resemblejs').compare;
+
 const ImageSequencer = require('../../../src/ImageSequencer');
 
 const test_gif = require('../images/test.gif.js');
@@ -15,19 +17,37 @@ target = 'test_outputs';
  * @param {String} [input="test_gif"] optional input image. Default is a test gif.
  */
 module.exports = (moduleName, options, benchmark, input) => {
-  let sequencer = ImageSequencer({ui: false});
+  let sequencer = ImageSequencer({ ui: false });
   sequencer.loadImages(input || test_gif);
   sequencer.addSteps(moduleName, options);
-  test(`${moduleName} module works correctly`, t => {
-    sequencer.run({mode: 'test'}, () => {
+  test(`${moduleName} module works correctly`, (t) => {
+    sequencer.run({ mode: 'test' }, () => {
       let result = sequencer.steps[1].output.src;
 
       base64Img.imgSync(result, target, `${moduleName}-result`);
       base64Img.imgSync(benchmark, target, `${moduleName}-benchmark`);
 
-      t.equal(result === benchmark, true, `${moduleName} module works correctly with Gif`);
+      let mismatch = 100;
+      compare(
+        result,
+        benchmark,
+        { returnEarlyThreshold: 5 },
+        (err, { rawMisMatchPercentage }) => {
+          if (err) {
+            console.log('An error while comparing!');
+          } else {
+            mismatch = rawMisMatchPercentage;
+          }
+        }
+      );
+
+      t.equal(
+        mismatch < 5,
+        true,
+        `${moduleName} module works correctly with Gif`
+      );
       sequencer = null;
       t.end();
     });
   });
-};
+};

test/core/templates/options-test.js

@@ -24,6 +24,9 @@ module.exports = (moduleName, options, benchmark, input) => {
     sequencer.loadImages(input || red);
     // Add the step.
     sequencer.addSteps(moduleName, options[0]);
+
+    t.plan(2);
+
     // Run the ImageSequencer with initial option.
     sequencer.run(() => {
       let result = sequencer.steps[1].output.src;
@@ -37,7 +40,7 @@ module.exports = (moduleName, options, benchmark, input) => {
       looksSame(result, benchmark[0], function(err, res) {
         if (err) console.log(err);
 
-        t.equal(res.equal, true, `${moduleName} module works correctly with initial option ${options[0][moduleName]}`);
+        t.equal(res.equal, true, `${moduleName} module works correctly with initial option ${JSON.stringify(options[0])}`);
       });
       // Change the option of the given module.
       sequencer.steps[1].setOptions(options[1]);
@@ -54,9 +57,8 @@ module.exports = (moduleName, options, benchmark, input) => {
         looksSame(newResult, benchmark[1], function(err, res) {
           if (err) console.log(err);
 
-          t.equal(res.equal, true, `${moduleName} module works correctly when the option is changed to ${options[1][moduleName]}`);
+          t.equal(res.equal, true, `${moduleName} module works correctly when the option is changed to ${JSON.stringify(options[1])}`);
           sequencer = null;
-          t.end();
         });
       });
     });

test/core/util/gpuUtils.js

@@ -9,7 +9,7 @@ test('convolve works with 1x1 array', t => {
       [1, 1, 1]
     ],
     expectedOut = [
-      [9]
+      new Float32Array([9])
     ];
 
   const out = convolve([array], kernel);
@@ -34,10 +34,10 @@ test('convolve works with 3x4 array', t => {
       [1, 1, 1]
     ],
     expectedOut = [
-      [12, 19, 26],
-      [13, 20, 27],
-      [13, 20, 27],
-      [13, 19, 25]
+      new Float32Array([12, 19, 26]),
+      new Float32Array([13, 20, 27]),
+      new Float32Array([13, 20, 27]),
+      new Float32Array([13, 19, 25])
     ];
 
   const out = convolve([array], kernel);
@@ -68,16 +68,16 @@ test('convolve works with multiple 3x4 arrays', t => {
       [1, 1, 1]
     ],
     expectedOut1 = [
-      [12, 19, 26],
-      [13, 20, 27],
-      [13, 20, 27],
-      [13, 19, 25]
+      new Float32Array([12, 19, 26]),
+      new Float32Array([13, 20, 27]),
+      new Float32Array([13, 20, 27]),
+      new Float32Array([13, 19, 25])
     ],
     expectedOut2 = [
-      [14, 19, 24],
-      [12, 13, 14],
-      [15, 12,  9],
-      [16, 13, 10]
+      new Float32Array([14, 19, 24]),
+      new Float32Array([12, 13, 14]),
+      new Float32Array([15, 12,  9]),
+      new Float32Array([16, 13, 10])
     ];
 
   const out = convolve([array1, array2], kernel);

test/ui-2/test/apply-button.test.js

@@ -0,0 +1,35 @@
+const timeout = process.env.SLOWMO ? 30000 : 10000;
+const fs = require('fs');
+beforeAll(async () => {
+  path = fs.realpathSync('file://../examples/index.html');
+  await page.goto('file://' + path, {waitUntil: 'domcontentloaded'});
+});
+
+describe('Apply Button Works', () => {
+  test('Apply Button is clicked', async () => {
+    await page.waitForSelector('.step');
+
+  
+    await page.click('[data-value=\'resize\']');
+    const Length1 = await page.evaluate(() => document.querySelectorAll('.step').length);
+    //Lets change the default value
+    expect(Length1).toBe(2);
+    // Let's check the source of the image output by the default values
+    const src1 = await page.evaluate(() => document.querySelectorAll('.step img')[1].src);
+    //Lets change the default value
+    await page.evaluate(() => document.querySelector('div[name="resize"] input').value = '');
+    await page.type('div[name="resize"] input', '50%');
+    //Wait for the apply button to get enabled then click
+    await page.waitForFunction('document.querySelector(".btn-save").disabled == false');
+    await page.$eval('.btn-save', elem => elem.click());
+    //Wait for the image to process with the new value
+    await page.waitForSelector('.load', {visible: false});
+    
+    //Let's check the source of the image output by the new values
+    const src2 = await page.evaluate(() => document.querySelectorAll('.step img')[1].src);
+    //Expect default and new image to be changed
+    expect(src1).not.toEqual(src2);
+    
+    
+  }, timeout);
+});

test/ui/spec/mapHtmlTypes.spec.js

@@ -6,10 +6,12 @@ describe('HTML Types Mapping Function', function() {
     expect(mapHtmlTypes({type: 'percentage'})).toEqual({type: 'number'});
 
     expect(mapHtmlTypes({type: 'integer'})).toEqual({type: 'number'});
-    expect(mapHtmlTypes({type: 'integer', min: 20, max: 100})).toEqual({type: 'range', min: 20, max: 100});
+    expect(mapHtmlTypes({type: 'integer', min: 20, max: 100})).toEqual({type: 'range', min: 20, max: 100, step: 1});
+    expect(mapHtmlTypes({type: 'float', min: 20, max: 100})).toEqual({type: 'range', min: 20, max: 100, step: 0.1}); // should default to step = 1
 
     expect(mapHtmlTypes({type: 'float'})).toEqual({type: 'text'});
-    expect(mapHtmlTypes({type: 'float', min: 20, max: 100})).toEqual({type: 'range', min: 20, max: 100});
+    expect(mapHtmlTypes({type: 'float', min: 20, max: 100})).toEqual({type: 'range', min: 20, max: 100, step: 0.1});
+    expect(mapHtmlTypes({type: 'float', min: 20, max: 100})).toEqual({type: 'range', min: 20, max: 100, step: 0.1}); // should default to step = 0.1
   });
 
   it('maps text type', function() {
@@ -21,4 +23,4 @@ describe('HTML Types Mapping Function', function() {
     expect(mapHtmlTypes({type: 'select'})).toEqual({type: 'select'});
   });
 
-});
+});