jest running in gitpod, some timeouts

.github/ISSUE_TEMPLATE/enhancement template.md

@@ -1,25 +0,0 @@
-# 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

@@ -1,22 +0,0 @@
-# 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

@@ -13,32 +13,19 @@ 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
+* [ ] create a release [project](https://github.com/publiclab/image-sequencer/projects) from [this template](https://github.com/publiclab/image-sequencer/projects/5). You can copy a project from its menu.
-* [ ] auto-compile release notes and copy below from corresponding release draft
+* [ ] compile release notes below from corresponding [release project](https://github.com/publiclab/image-sequencer/projects).
-* [ ] open a pull request with updated version numbers
+* [ ] update version number in `examples/sw.js` (ex #1734) and `package.json` (ex #1695)
-    * [ ] 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)
-
+* [ ] merge, build and publish `/dist/` files to `stable` (merges to `main` branch can resume for next release)
-Now, move to `stable` branch:
+* [ ] create a release on GitHub and use features description + release notes from below
-
+* [ ] tag version number branch (i.e. `v0.0.0`)
-* [ ] force push from `main` to `stable`
+* [ ] publish tagged branch to `npm`
-* [ ] 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`.
+Noting we're now in this process in https://github.com/publiclab/image-sequencer/pull/1695 for `v3.6.0`.
 
 ****
 

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,19 +1,16 @@
-<!--- (Replace `0000` with the Issue Number below) --->
+Fixes #0000  (<=== Replace `0000` with the Issue Number)
-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 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
+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!--->
+Thanks!

.github/dependabot.yml

@@ -1,25 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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

@@ -8,7 +8,7 @@ jobs:
     - name: Setup node
       uses: actions/setup-node@v2
       with:
-        node-version: '14'
+        node-version: '12'
         check-latest: true
     - name: Cache node modules
       uses: actions/cache@v2
@@ -33,7 +33,7 @@ jobs:
     - name: Setup node
       uses: actions/setup-node@v2
       with:
-        node-version: '14'
+        node-version: '12'
         check-latest: true
     - name: Cache node modules
       uses: actions/cache@v2
@@ -58,7 +58,7 @@ jobs:
     - name: Setup node
       uses: actions/setup-node@v2
       with:
-        node-version: '14'
+        node-version: '12'
         check-latest: true
     - name: Cache node modules
       uses: actions/cache@v2
@@ -83,7 +83,7 @@ jobs:
     - name: Setup node
       uses: actions/setup-node@v2
       with:
-        node-version: '14'
+        node-version: '12'
         check-latest: true
     - name: Cache node modules
       uses: actions/cache@v2
@@ -109,7 +109,7 @@ jobs:
     - name: Setup node
       uses: actions/setup-node@v2
       with:
-        node-version: '14'
+        node-version: '12'
         check-latest: true
     - name: Cache node modules
       uses: actions/cache@v2
@@ -134,7 +134,7 @@ jobs:
     - name: Setup node
       uses: actions/setup-node@v2
       with:
-        node-version: '14'
+        node-version: '12'
         check-latest: true
     - name: Cache node modules
       uses: actions/cache@v2
@@ -159,7 +159,7 @@ jobs:
     - name: Setup node
       uses: actions/setup-node@v2
       with:
-        node-version: '14'
+        node-version: '12'
         check-latest: true
     - name: Cache node modules
       uses: actions/cache@v2
@@ -184,7 +184,7 @@ jobs:
     - name: Setup node
       uses: actions/setup-node@v2
       with:
-        node-version: '14'
+        node-version: '12'
         check-latest: true
     - name: Cache node modules
       uses: actions/cache@v2

.gitpod.dockerfile

@@ -30,24 +30,19 @@ RUN sudo apt-get update && apt-get install -y apt-transport-https \
     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 \

CONTRIBUTING.md

@@ -118,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 web-based modules but since it runs the module in a headless browser, it 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 webl based modules but since it runs the module in a headless browser, ti 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;
 
@@ -197,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 emitted when a notification has to be produced.
+* `UI.notify(msg,id)` must be emmited when a notification has to be produced.
 
 ### Name and description
 
@@ -244,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 overridden 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 overriden 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) {
@@ -279,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 overridden 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 overriden with custom progress object.
 
 
 ### Module example
@@ -292,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 generate 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 genarate meta modules dynamically with the function `createMetaModule` which can be called in the following ways
 
 ```js
 
@@ -387,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.`
 
@@ -479,13 +479,3 @@ The following shell scripts are present in the `scripts/` directory.
  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.

docs/MODULES.md

@@ -41,12 +41,11 @@ List of Module Documentations
 36. [Rotate](#rotate-module)
 37. [Saturation](#saturation-module)
 38. [Segmented-Colormap](#segmented-colormap-module)
-39. [Sharpen](#sharpening-module)
+39. [Text-Overlay](#text-overlay)
-40. [Text-Overlay](#text-overlay)
+40. [Threshold](#threshold)
-41. [Threshold](#threshold)
+41. [Tint](#tint)
-42. [Tint](#tint)
+42. [WebGL-Distort](#webgl-distort-module)
-43. [WebGL-Distort](#webgl-distort-module)
+43. [White-Balance](#white-balance-module)
-44. [White-Balance](#white-balance-module)
 
 
 ## add-qr-module
@@ -668,20 +667,6 @@ 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

@@ -78,8 +78,7 @@ body > .container-fluid {
 }
 
 .hover {
-  border: 4px dashed #888888;
+  background: #eee;
-  background: #F0F0F0;
 }
 
 .step {
@@ -172,8 +171,8 @@ body > .container-fluid {
 
 #move-up {
   position: fixed;
-  bottom: 30px;
+  bottom: 50px;
-  right: 20px;
+  right: 40px;
   z-index: 550;
   display: none;
   background:transparent;
@@ -181,17 +180,11 @@ body > .container-fluid {
 }
 
 #move-up i {
-  font-size:50px;
+  font-size:60px;
   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;
@@ -340,47 +333,21 @@ a.name-header{
   display: block;
 }
 
-#update-prompt-modal,.notify-box {
+#update-prompt-modal {
  visibility: hidden;
  min-width: 250px;
  margin-left: -125px;
  background-color: #333;
  color: #fff;
  text-align: center;
- border-radius: 8px;
+ border-radius: 2px;
  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/index.html

@@ -58,15 +58,6 @@
 
   <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">

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,42 +19,34 @@ 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;
+            }
+          });
+        });
 
-          return new Promise(function(resolve,reject){
+        const installingWorker = registration.installing;
-
+        installingWorker.onstatechange = () => {
-            registration.addEventListener('updatefound', () => {
+          console.log(installingWorker);
-              // When sw.js has been changed, get a reference to the new service worker.
+          if (installingWorker.state === 'installed') {
-              newWorker = registration.installing;
+            location.reload();
-
+          }
-              if(!newWorker){
+        };
-                return reject(new Error('error in installing service worker'));
+        console.log('Registration successful, scope is:', registration.scope);
-              }
+      })
-
+      .catch(function(error) {
-            newWorker.addEventListener('statechange', () => {
+        console.log('Service worker registration failed, error:', error);
-              // 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);
       });
 
       /**
@@ -77,22 +69,21 @@ var setupCache = function() {
     });
   }
 
-  const clearCache = () => {
+  $('#clear-cache').click(function() {
     if ('serviceWorker' in navigator) {
-      return caches.keys()
+      caches.keys().then(function(cacheNames) {
-        .then(function(cache) {
+        cacheNames.forEach(function(cacheName) {
-          return Promise.all(cache.map(function(cacheItem) {
+          caches.delete(cacheName);
-            return caches.delete(cacheItem);
+        });
-        }));
       });
     }
-  }
-
-  $('#clear-cache').click(function() {
-    clearCache();
     location.reload();
   });
 
+
+
+
+
 };
 
 module.exports = setupCache;

examples/lib/defaultHtmlSequencerUi.js

@@ -17,6 +17,7 @@ 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 });
@@ -26,7 +27,8 @@ function DefaultHtmlSequencerUi(_sequencer, options) {
 
   function selectNewStepUi() {
     var m = $(addStepSel + ' select').val();
-    if(m) $(addStepSel + ' .info').html(_sequencer.modulesInfo(m).description);
+    if(!m) m = arguments[0];
+    else $(addStepSel + ' .info').html(_sequencer.modulesInfo(m).description);
     $(addStepSel + ' #add-step-btn').prop('disabled', false);
   }
 
@@ -45,12 +47,7 @@ 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,9 +24,6 @@ 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
       '\
@@ -51,7 +48,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="' + stepDocsLink + '">' + (step.description || '') + '</a>' +
+                    '<a href="https://github.com/publiclab/image-sequencer/blob/main/docs/MODULES.md#' + step.name + '-module">' + (step.description || '') + '</a>' +
                  '</p></div>\
                 </div>\
                 <div class="col-md-8 cal collapse in step-column">\
@@ -121,14 +118,7 @@ function DefaultHtmlStepUi(_sequencer, options) {
               paramVal + '">' + '<span class="input-group-addon"><i></i></span>' +
               '</div>';
           }
-          else if(inputDesc.type === 'button'){
+          else { // Non color-picker input types
-            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 +
@@ -339,24 +329,12 @@ 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();
     });
 
@@ -407,7 +385,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} px<br>Image Height: ${dim.height} px</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}<br>Image Height: ${dim.height}</br>${isGIF(step.output) ? `Frames: ${dim.frames}` : ''}</div>`;
     });
   }
 
@@ -421,19 +399,6 @@ 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

@@ -22,9 +22,6 @@ function mapHtmlTypes(inputInfo){
     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';
     break;

examples/offline.html

@@ -1,34 +0,0 @@
-<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,14 +1,6 @@
-const staticCacheName = 'image-sequencer-static-v3.7.2';
+const staticCacheName = 'image-sequencer-static-v3.6.0';
-self.addEventListener('install', function(e) {
+self.addEventListener('install', event => {
-  e.waitUntil(
+  console.log('Attempting to install service worker');
-    caches.open(staticCacheName).then(function(cache) {
-      console.log('Attempting to install service worker');
-      return cache.addAll([
-        '/',
-        '/examples/offline.html'
-      ]);
-    })
-  );
 });
 
 self.addEventListener('activate', function(e) {
@@ -29,27 +21,15 @@ self.addEventListener('activate', function(e) {
 
 self.addEventListener('fetch', function(event) {
   event.respondWith(
-    // Try to fetch the latest data first.
+    caches.open(staticCacheName).then(function(cache) {
-    fetch(event.request)
+      return cache.match(event.request).then(function (response) {
-      .then(function(response) {
+        return response || fetch(event.request).then(function(response) {
-        return caches.open(staticCacheName)
+          if(event.request.method == 'GET')
-          .then(function(cache) {
+            cache.put(event.request, response.clone());
-            if(event.request.method == 'GET'){
+          return response;
-              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,5 +1,89 @@
 #!/usr/bin/env node
 
-var cli = require('./src/cli');
+require('./src/ImageSequencer');
+sequencer = ImageSequencer({ ui: true });
+var fs = require('fs');
+var program = require('commander');
+var utils = require('./src/CliUtils');
 
-cli(process.argv);
+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);
+
+  });
+
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "image-sequencer",
-  "version": "3.7.2",
+  "version": "3.6.0",
   "description": "A modular JavaScript image manipulation library modeled on a storyboard.",
   "main": "src/ImageSequencer.js",
   "scripts": {
@@ -41,29 +41,29 @@
     "bootstrap": "^3.4.1",
     "bootstrap-colorpicker": "^2.5.3",
     "buffer": "~6.0.2",
-    "commander": "^9.0.0",
+    "commander": "^6.2.0",
     "compressorjs": "^1.0.5",
-    "data-uri-to-buffer": "^4.0.1",
+    "data-uri-to-buffer": "^3.0.0",
     "downloadjs": "^1.4.7",
-    "eslint": "^8.0.0",
+    "eslint": "^6.1.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": "git+https://git@github.com/glennjones/imagejs.git#1119a31e6eabc87563bc573cd62c11bd487ce8a9",
+    "imagejs": "0.0.9",
     "imagemin": "^7.0.1",
     "imagemin-jpegtran": "^7.0.0",
     "imagemin-pngquant": "^9.0.1",
+    "imgareaselect": "git://github.com/jywarren/imgareaselect.git#v1.0.0-rc.2",
     "istanbul": "^0.4.5",
-    "jasmine": "^4.0.2",
+    "jasmine": "^3.4.0",
-    "jpegtran-bin": "^7.0.0",
+    "jpegtran-bin": "^5.0.2",
     "jquery": "^3.3.1",
-    "jsdom": "^20.0.0",
+    "jsdom": "^16.3.0",
     "jspdf": "^2.1.1",
     "jsqr": "^1.1.1",
     "lodash": "^4.17.11",
@@ -87,30 +87,29 @@
     "@babel/plugin-syntax-object-rest-spread": "^7.2.0",
     "babelify": "^10.0.0",
     "browserify": "17.0.0",
-    "canvas": "^2.8.0",
+    "eslint": "^6.1.0",
-    "eslint": "^8.0.0",
     "grunt": "^1.0.3",
     "grunt-browser-sync": "^2.2.0",
     "grunt-browserify": "^5.0.0",
-    "grunt-contrib-concat": "^2.0.0",
+    "grunt-contrib-concat": "^1.0.1",
     "grunt-contrib-uglify-es": "^3.3.0",
     "grunt-contrib-watch": "^1.1.0",
     "grunt-text-replace": "^0.4.0",
-    "husky": "^8.0.1",
+    "husky": "^3.0.5",
     "image-filter-core": "~2.0.2",
     "image-filter-threshold": "~2.0.1",
-    "jasmine-core": "^4.0.0",
+    "jasmine-core": "^3.3.0",
     "jasmine-jquery": "^2.1.1",
-    "jasmine-spec-reporter": "^7.0.0",
+    "jasmine-spec-reporter": "^6.0.0",
-    "jest": "^29.0.0",
+    "jest": "^26.1.0",
-    "jest-puppeteer": "^6.0.0",
+    "jest-puppeteer": "^4.3.0",
-    "lint-staged": "^13.0.0",
+    "lint-staged": "^10.0.3",
     "looks-same": "^7.0.0",
     "matchdep": "^2.0.0",
-    "resemblejs": "^4.0.1",
+    "resemblejs": "^3.2.5",
     "tap-spec": "^5.0.0",
-    "tape": "^5.2.0",
+    "tape": "^4.9.2",
-    "tape-run": "^10.0.0",
+    "tape-run": "^8.0.0",
     "uglify-es": "^3.3.7"
   },
   "husky": {

src/Modules.js

@@ -33,8 +33,7 @@ module.exports = {
   'import-image': require('./modules/ImportImage'),
   'mask': require('./modules/Mask'),
   'minify-image': require('./modules/MinifyImage'),
-  // 'invert': require('image-sequencer-invert'), this code imports the invert module from a different repository altogether (using a require statement)
+  // 'invert': require('image-sequencer-invert'),
-  // 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'),
@@ -46,7 +45,6 @@ module.exports = {
   '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

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

src/modules/Dynamic/Module.js

@@ -14,18 +14,20 @@ 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) {
-      let expr = Parser.parse('R = r; G = g; B = b; A = a; ' + expression);
+      var func = 'f = function (r, g, b, a) { var R = r, G = g, B = b, A = a; return ' + expression + ';}';
-      return expr.toJSFunction("r,g,b,a,R,G,B,A");
+      var f;
+      eval(func);
+      return f;
     }
-    
+
     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/Sharpen/Module.js

@@ -1,46 +0,0 @@
-/*
-  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

@@ -1,48 +0,0 @@
-// 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

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

src/modules/Sharpen/info.json

@@ -1,15 +0,0 @@
-{
-    "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,10 +8,6 @@
             "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,22 +15,20 @@ 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.addScriptTag({path: require('path').join(__dirname, '../../../node_modules/opencv.js/opencv.js')}).then(() => {
+          page.evaluate((options) => {
-            page.evaluate((options) => {
+            return new Promise((resolve, reject) => {
-              return new Promise((resolve, reject) => {
+              var sequencer = ImageSequencer();
-                var sequencer = ImageSequencer();
+              sequencer.loadImage(options.input.src);
-                sequencer.loadImage(options.input.src);
+              sequencer.addSteps(options.modOptions.step, options.modOptions);
-                sequencer.addSteps(options.modOptions.step, options.modOptions);
+              sequencer.run(function cb(out) {
-                sequencer.run(function cb(out) {
+                resolve(sequencer.steps[1].output.src);
-                  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,22 +7,6 @@ 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)) {
@@ -41,42 +25,18 @@ function LoadImage(ref, name, src, main_callback) {
       });
     }
     else if (ref.options.inBrowser) {
-      
+      var ext = src.split('.').pop();
-      let notifyBox = document.querySelector('div.notify-box');
+      var image = document.createElement('img');
-      let closePopUP = document.getElementById('close-popup');
+      var canvas = document.createElement('canvas');
-      if(src.indexOf('images/') !== 0  && src.indexOf('./images/') !== 0 && checkForError(src)){
+      var context = canvas.getContext('2d');
-
+      image.onload = function() {
-        if(notifyBox){
+        canvas.width = image.naturalWidth;
-          notifyBox.classList.remove('d-none');
+        canvas.height = image.naturalHeight;
-          notifyBox.classList.add('d-block');
+        context.drawImage(image, 0, 0);
-        }
+        datauri = canvas.toDataURL(ext);
-
+        callback(datauri, step);
-        if(closePopUP){
+      };
-          closePopUP.addEventListener('click',function(){
+      image.src = src;
-            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,48 +51,20 @@ 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('close').addEventListener('click', function() {
-        video.style.display = 'none';
-      });
 
+      document.getElementById('capture').addEventListener('click', function(stream){
+        context.drawImage(video, 0, 0, 400, 300);
+        options.onTakePhoto(canvas.toDataURL());
+      });
 
       function stopStream(stream) {
         stream.getVideoTracks().forEach(function (track) {
@@ -114,10 +86,10 @@ function setInputStepInit() {
     dropzone[0].addEventListener('drop', handleFile, false);
  
     dropzone.on('dragover', function onDragover(e) {
-      dropzone.addClass('hover');
-      e.preventDefault();
       e.stopPropagation();
-    });
+      e.preventDefault();
+      e.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
+    }, false);
  
     dropzone.on('dragenter', function onDragEnter(e) {
       dropzone.addClass('hover');
@@ -127,11 +99,6 @@ function setInputStepInit() {
       dropzone.removeClass('hover');
     });
 
-    dropzone.on('drop', function onDrop(e) {
-      dropzone.removeClass('hover');
-      e.preventDefault();
-    });
-
   };
 
 }

src/util/getDefaults.js

@@ -1,4 +1,3 @@
-/** 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,12 +1,5 @@
-/**  
- * @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

@@ -1,22 +1,38 @@
+require('../../src/ImageSequencer');
+sequencer = ImageSequencer({ ui: true });
+const saveSequence = require('../../src/cli/saveSequence.js');
 const test = require('tape');
-const cli = require('../../src/cli');
+const { Command } = require('commander');
+
 
 test('testing save sequence function', function (t) {
   try {
-    cli([
+    let program = new Command();
-      'node', 'test',
+    program
-      '--save-sequence',
+      .option('--save-sequence [string]', 'Name space separated with Stringified sequence');
-      '"invert-colormap invert(),colormap()"',
+
-    ]);
+    program.parse(['node', 'test', '--save-sequence', '"invert brightness"']);
+
+    if (program.saveSequence)
+      saveSequence(program, sequencer);
     t.true(1, 'creation success');
+
   } catch (error) {
     t.true(!error, 'creation fail');
   }
   try {
-    cli(['node', 'test', '--save-sequence']);
+    let program = new Command();
+    program
+      .option('--save-sequence [string]', 'Name space separated with Stringified sequence');
+
+    program.parse(['node', 'test', '--save-sequence']);
+
+    if (program.saveSequence)
+      saveSequence(program, sequencer);
     t.true(0, 'creation success');
+
   } catch (error) {
     t.true(1, 'creation fail');
   }
   t.end();
-});
+});

test/core/images/moon.js

@@ -1,2 +0,0 @@
-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/sharpen.js

@@ -1,14 +0,0 @@
-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

@@ -1,37 +0,0 @@
-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/options-test.js

@@ -24,9 +24,6 @@ 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;
@@ -40,7 +37,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 ${JSON.stringify(options[0])}`);
+        t.equal(res.equal, true, `${moduleName} module works correctly with initial option ${options[0][moduleName]}`);
       });
       // Change the option of the given module.
       sequencer.steps[1].setOptions(options[1]);
@@ -57,8 +54,9 @@ 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 ${JSON.stringify(options[1])}`);
+          t.equal(res.equal, true, `${moduleName} module works correctly when the option is changed to ${options[1][moduleName]}`);
           sequencer = null;
+          t.end();
         });
       });
     });

test/core/util/gpuUtils.js

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