Merge branch 'main' into ui-tests

to generate dist files...

Gruntfile.js

@@ -2,6 +2,7 @@ module.exports = function(grunt) {
   grunt.loadNpmTasks('grunt-browserify');
   grunt.loadNpmTasks('grunt-contrib-uglify-es');
   grunt.loadNpmTasks('grunt-browser-sync');
+  grunt.loadNpmTasks('grunt-contrib-jasmine');
 
   require('matchdep')
     .filterDev('grunt-*')
@@ -57,6 +58,7 @@ module.exports = function(grunt) {
         dest: 'dist/image-sequencer-ui.js'
       }
     },
+
     browserSync: {
       dev: {
         options: {
@@ -64,6 +66,33 @@ module.exports = function(grunt) {
           server: './'
         }
       }
+    },
+    
+    jasmine: {
+      imagesequencer: {
+        src: 'dist/image-sequencer.js',
+        options: {
+          specs: 'test/ui/spec/*spec.js',
+          vendor: [
+            'node_modules/jquery/dist/jquery.min.js',
+            'node_modules/bootstrap/dist/js/bootstrap.min.js',
+            'node_modules/jasmine-jquery/lib/jasmine-jquery.js',
+            'src/ui/prepareDynamic.js',
+            'node_modules/bootstrap-colorpicker/dist/js/bootstrap-colorpicker.js',
+            'node_modules/imgareaselect/jquery.imgareaselect.dev.js',
+            'node_modules/gifshot/dist/gifshot.min.js',
+            'node_modules/downloadjs/download.min.js',
+            'examples/lib/scrollToTop.js',
+            'node_modules/selectize/dist/js/standalone/selectize.min.js',
+            'node_modules/opencv.js/opencv.js',
+            'dist/image-sequencer-ui.js'
+          ],
+          keepRunner: true,
+          '--web-security' : false,
+          '--local-to-remote-url-access' : true,
+          '--ignore-ssl-errors' : true
+        }
+      }
     }
   });
 

examples/demo.js

@@ -5,50 +5,15 @@ var defaultHtmlSequencerUi = require('./lib/defaultHtmlSequencerUi.js'),
   urlHash = require('./lib/urlHash.js'),
   insertPreview = require('./lib/insertPreview.js');
 
-window.onload = function () {
+initializeSequencerUi = function initializeSequencerUi() {
   sequencer = ImageSequencer();
 
-  function refreshOptions() {
-    // Load information of all modules (Name, Inputs, Outputs)
-    var modulesInfo = sequencer.modulesInfo();
-
-    var addStepSelect = $('#addStep select');
-    addStepSelect.html('');
-
-    // Add modules to the addStep dropdown
-    for (var m in modulesInfo) {
-      if (modulesInfo[m] && modulesInfo[m].name)
-        addStepSelect.append(
-          '<option value="' + m + '">' + modulesInfo[m].name + '</option>'
-        );
-    }
-    // Null option
-    addStepSelect.append('<option value="" disabled selected>Select a Module</option>');
-    addStepSelect.selectize({
-      sortField: 'text'
-    });
-  }
   refreshOptions();
 
   $(window).on('scroll', scrollFunction);
 
-  function scrollFunction() {
-    var shouldDisplay = $('body').scrollTop() > 20 || $(':root').scrollTop() > 20;
-
-    $('#move-up').css({
-      display: shouldDisplay ? 'block' : 'none'
-    });
-  }
-
-
-  function topFunction() {
-    $('body').animate({scrollTop: 0});
-    $(':root').animate({scrollTop: 0});
-  }
-
   $('#move-up').on('click', topFunction);
 
-
   // UI for each step:
   sequencer.setUI(DefaultHtmlStepUi(sequencer));
 
@@ -62,12 +27,6 @@ window.onload = function () {
     sequencer.loadImage('images/tulips.png', ui.onLoad);
   }
 
-  var resetSequence = function () {
-    var r = confirm('Do you want to reset the sequence?');
-    if (r)
-      window.location = '/';
-  };
-
   $('#addStep select').on('change', ui.selectNewStepUi);
   $('#addStep #add-step-btn').on('click', ui.addStepUi);
   $('#resetButton').on('click', resetSequence);
@@ -84,24 +43,7 @@ window.onload = function () {
     $(this).removeClass('selected');
   });
 
-  function displayMessageOnSaveSequence() {
-    $('.savesequencemsg').fadeIn();
-    setTimeout(function () {
-      $('.savesequencemsg').fadeOut();
-    }, 3000);
-  }
-
   $('body').on('click', 'button.remove', ui.removeStepUi);
-  function saveSequence() { // 1. save seq
-    var result = window.prompt('Please give a name to your sequence... (Saved sequence will only be available in this browser).');
-    if (result) {
-      result = result + ' (local)';
-      sequencer.saveSequence(result, sequencer.toString()); // 1.a study saveSequence
-      sequencer.loadModules();
-      displayMessageOnSaveSequence();
-      refreshOptions();
-    }
-  }
   $('#saveButton').on('click', function () {
     // different handlers triggered for different dropdown options
 
@@ -250,3 +192,61 @@ window.onload = function () {
     insertPreview.updatePreviews('images/tulips.png', '#addStep');
   }
 };
+
+function scrollFunction() {
+  var shouldDisplay = $('body').scrollTop() > 20 || $(':root').scrollTop() > 20;
+
+  $('#move-up').css({
+    display: shouldDisplay ? 'block' : 'none'
+  });
+}
+
+function topFunction() {
+  $('body').animate({scrollTop: 0});
+  $(':root').animate({scrollTop: 0});
+}
+
+function refreshOptions() {
+  // Load information of all modules (Name, Inputs, Outputs)
+  var modulesInfo = sequencer.modulesInfo();
+
+  var addStepSelect = $('#addStep select');
+  addStepSelect.html('');
+
+  // Add modules to the addStep dropdown
+  for (var m in modulesInfo) {
+    if (modulesInfo[m] && modulesInfo[m].name)
+      addStepSelect.append(
+        '<option value="' + m + '">' + modulesInfo[m].name + '</option>'
+      );
+  }
+  // Null option
+  addStepSelect.append('<option value="" disabled selected>Select a Module</option>');
+  addStepSelect.selectize({
+    sortField: 'text'
+  });
+}
+
+var resetSequence = function () {
+  var r = confirm('Do you want to reset the sequence?');
+  if (r)
+    window.location = '/';
+};
+
+function displayMessageOnSaveSequence() {
+  $('.savesequencemsg').fadeIn();
+  setTimeout(function () {
+    $('.savesequencemsg').fadeOut();
+  }, 3000);
+}
+
+function saveSequence() { // 1. save seq
+  var result = window.prompt('Please give a name to your sequence... (Saved sequence will only be available in this browser).');
+  if (result) {
+    result = result + ' (local)';
+    sequencer.saveSequence(result, sequencer.toString()); // 1.a study saveSequence
+    sequencer.loadModules();
+    displayMessageOnSaveSequence();
+    refreshOptions();
+  }
+}

examples/index.html

@@ -1,7 +1,5 @@
 <!DOCTYPE html>
-
 <html>
-
 <head>
 
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -228,8 +226,9 @@
     <button id="move-up"><i class="fa fa-arrow-circle-o-up"></i></button>
 
     <script type="text/javascript">
+      var sequencer;
       $(function () {
-        var sequencer;
+        initializeSequencerUi();
       })
     </script>
     <script async src="../node_modules/opencv.js/opencv.js" type="text/javascript"></script>

package-lock.json

@@ -3284,6 +3284,12 @@
         "next-tick": "1"
       }
     },
+    "es5-shim": {
+      "version": "4.5.13",
+      "resolved": "https://registry.npmjs.org/es5-shim/-/es5-shim-4.5.13.tgz",
+      "integrity": "sha512-xi6hh6gsvDE0MaW4Vp1lgNEBpVcCXRWfPXj5egDvtgLz4L9MEvNwYEMdJH+JJinWkwa8c3c3o5HduV7dB/e1Hw==",
+      "dev": true
+    },
     "es6-iterator": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/es6-iterator/-/es6-iterator-2.0.3.tgz",
@@ -5638,6 +5644,66 @@
         }
       }
     },
+    "grunt-contrib-jasmine": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/grunt-contrib-jasmine/-/grunt-contrib-jasmine-1.0.3.tgz",
+      "integrity": "sha1-GRVxE2R1UkLgOLPqd4lGy1kpxs4=",
+      "dev": true,
+      "requires": {
+        "chalk": "^1.0.0",
+        "es5-shim": "^4.0.1",
+        "grunt-lib-phantomjs": "^1.0.0",
+        "jasmine-core": "^2.2.0",
+        "lodash": "~2.4.1",
+        "rimraf": "^2.1.4",
+        "sprintf-js": "~1.0.3"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "2.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
+          "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=",
+          "dev": true
+        },
+        "chalk": {
+          "version": "1.1.3",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+          "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^2.2.1",
+            "escape-string-regexp": "^1.0.2",
+            "has-ansi": "^2.0.0",
+            "strip-ansi": "^3.0.0",
+            "supports-color": "^2.0.0"
+          }
+        },
+        "jasmine-core": {
+          "version": "2.99.1",
+          "resolved": "https://registry.npmjs.org/jasmine-core/-/jasmine-core-2.99.1.tgz",
+          "integrity": "sha1-5kAN8ea1bhMLYcS80JPap/boyhU=",
+          "dev": true
+        },
+        "lodash": {
+          "version": "2.4.2",
+          "resolved": "https://registry.npmjs.org/lodash/-/lodash-2.4.2.tgz",
+          "integrity": "sha1-+t2DS5aDBz2hebPq5tnA0VBT9z4=",
+          "dev": true
+        },
+        "sprintf-js": {
+          "version": "1.0.3",
+          "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
+          "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
+          "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=",
+          "dev": true
+        }
+      }
+    },
     "grunt-contrib-uglify-es": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/grunt-contrib-uglify-es/-/grunt-contrib-uglify-es-3.3.0.tgz",
@@ -5743,6 +5809,19 @@
         "which": "~1.3.0"
       }
     },
+    "grunt-lib-phantomjs": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/grunt-lib-phantomjs/-/grunt-lib-phantomjs-1.1.0.tgz",
+      "integrity": "sha1-np7c3Z/S3UDgwYHJQ3HVcqpe6tI=",
+      "dev": true,
+      "requires": {
+        "eventemitter2": "^0.4.9",
+        "phantomjs-prebuilt": "^2.1.3",
+        "rimraf": "^2.5.2",
+        "semver": "^5.1.0",
+        "temporary": "^0.0.8"
+      }
+    },
     "gzip-size": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-1.0.0.tgz",
@@ -5921,6 +6000,16 @@
         "minimalistic-assert": "^1.0.1"
       }
     },
+    "hasha": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/hasha/-/hasha-2.2.0.tgz",
+      "integrity": "sha1-eNfL/B5tZjA/55g3NlmEUXsvbuE=",
+      "dev": true,
+      "requires": {
+        "is-stream": "^1.0.1",
+        "pinkie-promise": "^2.0.0"
+      }
+    },
     "he": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
@@ -7343,6 +7432,12 @@
       "resolved": "https://registry.npmjs.org/junk/-/junk-3.1.0.tgz",
       "integrity": "sha512-pBxcB3LFc8QVgdggvZWyeys+hnrNWg4OcZIU/1X59k5jQdLBlCsYGRQaz234SqoRLTCgMH00fY0xRJH+F9METQ=="
     },
+    "kew": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/kew/-/kew-0.7.0.tgz",
+      "integrity": "sha1-edk9LTM2PW/dKXCzNdkUGtWR15s=",
+      "dev": true
+    },
     "keyv": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/keyv/-/keyv-3.0.0.tgz",
@@ -7360,6 +7455,15 @@
         "is-buffer": "^1.1.5"
       }
     },
+    "klaw": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/klaw/-/klaw-1.3.1.tgz",
+      "integrity": "sha1-QIhDO0azsbolnXh4XY6W9zugJDk=",
+      "dev": true,
+      "requires": {
+        "graceful-fs": "^4.1.9"
+      }
+    },
     "labeled-stream-splicer": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/labeled-stream-splicer/-/labeled-stream-splicer-2.0.1.tgz",
@@ -8927,6 +9031,12 @@
         "charm": "~0.1.0"
       }
     },
+    "package": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/package/-/package-1.0.1.tgz",
+      "integrity": "sha1-0lofmeJQbcsn1nBLg9yooxLk7cw=",
+      "dev": true
+    },
     "pako": {
       "version": "0.2.9",
       "resolved": "https://registry.npmjs.org/pako/-/pako-0.2.9.tgz",
@@ -9130,6 +9240,51 @@
       "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
       "integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns="
     },
+    "phantomjs-prebuilt": {
+      "version": "2.1.16",
+      "resolved": "https://registry.npmjs.org/phantomjs-prebuilt/-/phantomjs-prebuilt-2.1.16.tgz",
+      "integrity": "sha1-79ISpKOWbTZHaE6ouniFSb4q7+8=",
+      "dev": true,
+      "requires": {
+        "es6-promise": "^4.0.3",
+        "extract-zip": "^1.6.5",
+        "fs-extra": "^1.0.0",
+        "hasha": "^2.2.0",
+        "kew": "^0.7.0",
+        "progress": "^1.1.8",
+        "request": "^2.81.0",
+        "request-progress": "^2.0.1",
+        "which": "^1.2.10"
+      },
+      "dependencies": {
+        "fs-extra": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-1.0.0.tgz",
+          "integrity": "sha1-zTzl9+fLYUWIP8rjGR6Yd/hYeVA=",
+          "dev": true,
+          "requires": {
+            "graceful-fs": "^4.1.2",
+            "jsonfile": "^2.1.0",
+            "klaw": "^1.0.0"
+          }
+        },
+        "jsonfile": {
+          "version": "2.4.0",
+          "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-2.4.0.tgz",
+          "integrity": "sha1-NzaitCi4e72gzIO1P6PWM6NcKug=",
+          "dev": true,
+          "requires": {
+            "graceful-fs": "^4.1.6"
+          }
+        },
+        "progress": {
+          "version": "1.1.8",
+          "resolved": "https://registry.npmjs.org/progress/-/progress-1.1.8.tgz",
+          "integrity": "sha1-4mDHj2Fhzdmw5WzD4Khd4Xx6V74=",
+          "dev": true
+        }
+      }
+    },
     "phantomjs-stream": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/phantomjs-stream/-/phantomjs-stream-1.1.1.tgz",
@@ -9945,6 +10100,23 @@
         "uuid": "^3.3.2"
       }
     },
+    "request-progress": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/request-progress/-/request-progress-2.0.1.tgz",
+      "integrity": "sha1-XTa7V5YcZzqlt4jbyBQf3yO0Tgg=",
+      "dev": true,
+      "requires": {
+        "throttleit": "^1.0.0"
+      },
+      "dependencies": {
+        "throttleit": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/throttleit/-/throttleit-1.0.0.tgz",
+          "integrity": "sha1-nnhYNtr0Z0MUWlmEtiaNgoUorGw=",
+          "dev": true
+        }
+      }
+    },
     "request-promise-core": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/request-promise-core/-/request-promise-core-1.1.2.tgz",
@@ -11590,6 +11762,15 @@
         "uuid": "^3.0.1"
       }
     },
+    "temporary": {
+      "version": "0.0.8",
+      "resolved": "https://registry.npmjs.org/temporary/-/temporary-0.0.8.tgz",
+      "integrity": "sha1-oYqYHSi6jKNgJ/s8MFOMPst0CsA=",
+      "dev": true,
+      "requires": {
+        "package": ">= 1.0.0 < 1.2.0"
+      }
+    },
     "tempy": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/tempy/-/tempy-0.1.0.tgz",

package.json

@@ -6,7 +6,8 @@
   "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; node test/core/sequencer/benchmark.js;  browserify test/core/sequencer/meta-modules.js test/core/sequencer/image-sequencer.js test/core/sequencer/chain.js  test/core/sequencer/replace.js test/core/sequencer/import-export.js test/core/sequencer/run.js test/core/sequencer/dynamic-imports.js test/core/util/*.js | tape-run --render=\"tap-spec\"",
-    "test-ui": "node node_modules/jasmine/bin/jasmine test/ui/spec/*.js",
+    "test-ui": "grunt browserify && grunt jasmine",
+    "test-ui-unit": "node node_modules/jasmine/bin/jasmine test/ui/spec/unit/*spec.js",
     "setup": "npm i && npm i -g grunt grunt-cli && grunt build",
     "start": "grunt serve"
   },
@@ -85,6 +86,7 @@
     "grunt-contrib-concat": "^1.0.1",
     "grunt-contrib-uglify-es": "^3.3.0",
     "grunt-contrib-watch": "^1.1.0",
+    "grunt-contrib-jasmine": "~1.0.3",
     "husky": "^3.0.5",
     "image-filter-core": "~2.0.2",
     "image-filter-threshold": "~2.0.1",

test/ui/spec/basicUi.spec.js

@@ -0,0 +1,35 @@
+describe('Default sequencer HTML', function() {
+
+  beforeAll(function() {
+    jasmine.getFixtures().fixturesPath = 'test/ui/spec/fixtures';
+    fixture = loadFixtures('index.html');
+//    ImageSequencer();
+    initializeSequencerUi();
+  });
+
+  //it('detects HTML from the fixture', function() {
+  it('adds a step from the quick selector', function() {
+    expect($('#steps').length).toBe(1);
+    expect($('#steps').length).toBe(1);
+    expect($('#dropzone').length).toBe(1);
+  //});
+
+  //it('adds a step from the quick selector', function() {
+    expect($('#dropzone').length).toBe(1);
+console.log('dropzone',$('#dropzone').length);
+
+    expect($('.step').length).toBe(1);
+console.log('step',$('.step').length);
+    expect($('.step:first img').length).not.toBe(0);
+    expect($('.step:first img')[0].src).not.toBeUndefined();
+    expect($('.step:first img')[0].src).not.toBe('');
+    // needs more setup
+    $("[data-value='brightness']").click()
+    expect($('.step').length).toBe(2);
+    expect($('.step:last img')[0].src).not.toBeUndefined();
+    expect($('.step:last img')[0].src).not.toBe('');
+    expect($('.step:last img')[0].src).not.toEqual($('.step:first img')[0].src);
+    // TODO: test the actual `src` attribute of $('.step:last img') against a known value
+  });
+
+});

test/ui/spec/defaultHtmlSequencerUi.spec.js

@@ -40,11 +40,4 @@ describe('Default sequencer HTML', function() {
     expect(defaultHtmlSequencerUi.importStepsFromUrlHash).toHaveBeenCalled();
   });
   
-  xit('adds a step from the quick selector', function() {
-    expect($('.step').length).toBe(1);
-    $("[data-value='brightness']").click()
-    expect($('.step').length).toBe(2);
-    // expect($('.step:last img'))[0].src).not.toEqualTo($('.step:first img'));
-    // TODO: test the actual `src` attribute of $('.step:last img') against a known value
-  });
 });

test/ui/spec/fixtures/index.html

@@ -0,0 +1,157 @@
+<!--<script src="../../dist/image-sequencer-ui.js" charset="utf-8"></script>-->
+
+<script type="text/javascript">
+  var sequencer;
+  window.onload = function() {
+    (function () {
+      //initializeSequencerUi();
+    })();
+  }
+</script>
+
+<link href="../../node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
+<link href="../../node_modules/bootstrap-colorpicker/dist/css/bootstrap-colorpicker.css" rel="stylesheet">
+
+<link rel="stylesheet" href="../../examples/demo.css">
+<link href="../../node_modules/font-awesome/css/font-awesome.min.css" rel="stylesheet">
+<link href="../../node_modules/selectize/dist/css/selectize.default.css" rel="stylesheet">
+<!-- for crop module: -->
+<link href="../../node_modules/imgareaselect/distfiles/css/imgareaselect-default.css" rel="stylesheet">
+<link href="../../examples/selectize.default.css" rel="stylesheet">
+
+<div class="container-fluid">
+
+  <div id="dropzone" class="dropzone">
+    <p>
+      <i>Select or drag in an image to start!</i>
+    </p>
+    <center>
+      <input type="file" id="fileInput" value="" accept="image/*"><br />
+      <button type="button" id="take-photo" class="btn btn-primary btn-block btn-lg ">Take a Photo</button>
+      <video id="video" width="100%" height="100%" style="display:none"></video>
+      <a href="#" id="capture" style="display:none" class="btn btn-primary btn-md">Click Picture</a>
+      <a href="#" id="close" style="display:none" class="btn btn-default btn-md">Close</a>
+      <canvas id="canvas" width="400" height="300" style="display:none"></canvas>
+    </center>
+  </div>
+
+  <section id="steps" class="row">
+    <div id="load-image"></div>
+  </section>
+
+  <hr />
+  <p class="alert alert-success savesequencemsg">Saved Sequence Success. Sequence can be found among other modules in browser's localStorage.
+  </p>
+  <div class="row">
+    <div class="col-sm-8">
+      <section id="addStep" class="panel panel-primary">
+        <div class="form-inline">
+          <div class="panel-body">
+            <div style="display:flex; justify-content:center;">
+            </div>
+            <p class="info">Select a new module to add to your sequence.</p>
+            <div class="row center-align radio-group">
+              <div>
+                <div class="radio" data-value="resize">
+                  <i class="fa fa-arrows-alt fa-4x i-over"></i>
+                </div>
+                <p>Resize</p>
+              </div>
+              <div>
+                <div class="radio" data-value="brightness">
+                  <i class="fa fa-sun-o fa-4x i-over"></i>
+                </div>
+                <p>Brightness</p>
+              </div>
+              <div>
+                <div class="radio" data-value="contrast">
+                  <i class="fa fa-adjust fa-4x i-over"></i>
+                </div>
+                <p>Contrast</p>
+              </div>
+              <div>
+                <div class="radio" data-value="saturation">
+                  <i class="fa fa-tint fa-4x i-over i-small"></i>
+                </div>
+                <p>Saturation</p>
+              </div>
+              <div>
+                <div class="radio" data-value="rotate">
+                  <i class="fa fa-rotate-right fa-4x i-over"></i>
+                </div>
+                <p>Rotate</p>
+              </div>
+              <div>
+                <div class="radio" data-value="crop">
+                  <i class="fa fa-crop fa-4x i-over"></i>
+                </div>
+                <p>Crop</p>
+              </div>
+            </div>
+            <div class="row justify-content-center">
+              <div class="col-lg-8">
+
+                <select id="selectStep" class="text-center">
+                  <!-- The default null selection has been appended manually in demo.js
+            This is because the options in select are overritten when options are appended.-->
+                </select>
+              </div>
+              <div class="col-lg-4">
+                <button class="btn btn-success btn-lg" name="add" id="add-step-btn">Add Step</button></div>
+            </div>
+            <div class="row center-align">
+              <button id="resetButton" class="btn btn-default btn-lg"
+                style=" margin: 20px 35px 0px 35px; width:100%;">Clear All Steps</button>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <div class="modal fade" id="js-download-gif-modal" tabindex="-1" role="dialog">
+        <div class="modal-dialog" role="document">
+          <div class="modal-content">
+            <div class="modal-header">
+              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
+                  aria-hidden="true">&times;</span></button>
+              <h4 class="modal-title">Your gif is ready</h4>
+            </div>
+            <div class="modal-body">
+              <div id="js-download-modal-gif-container">
+                <!-- Gif should appear here -->
+              </div>
+            </div>
+            <div class="modal-footer">
+              <button type="button" class="btn btn-default" data-dismiss="modal">Done</button>
+
+              <button id="js-download-as-gif-button" class="btn btn-primary">Download</button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+    </div>
+    <div class="col-sm-4">
+      <section id="dwnld" class="panel panel-primary">
+        <div class="form-inline">
+          <div class="panel-body">
+            <div style="text-align:center;">
+              <h2 style="margin-top:20px">Save</h2>
+              <select class="form-control input-md" id="selectSaveOption" style="margin-top:20px">
+                <option value="save-image">Save as PNG</option>
+                <option value="save-gif">Save as GIF (all steps)</option>
+                <option value="save-seq">Save sequence</option>
+                <option value="save-seq-string">Save sequence string</option>
+              </select>
+              <p><button id="saveButton" class="btn btn-primary btn-lg save-button">Save</button></p>
+              <p><button class="btn btn-default btn-lg js-view-as-gif" id="gif">Preview GIF</button></p>
+            </div>
+          </div>
+        </div>
+      </section>
+    </div>
+  </div>
+</div>
+
+<footer>
+  <center><button class="btn btn-default btn-sm" id="clear-cache">Clear offline cache</button></center>
+</footer>

test/ui/spec/support/jasmine.json

@@ -1,10 +1,15 @@
 {
-  "spec_dir": "test/spec",
+  "spec_dir": "test/ui/spec",
   "spec_files": [
     "**/*.[sS]pec.js"
   ],
   "helpers": [
-    "helpers/**/*.js"
+    "helpers/**/*.js",
+    "../../../node_modules/jquery/dist/jquery.min.js",
+    "../../../node_modules/bootstrap/dist/js/bootstrap.min.js",
+    "../../../node_modules/jasmine-jquery/lib/jasmine-jquery.js",
+    "../../../dist/image-sequencer.js",
+    "../../../dist/image-sequencer-ui.js"
   ],
   "stopSpecOnExpectationFailure": false,
   "random": false