Updates to Demo

examples/demo.css

@@ -45,7 +45,7 @@ h1 {
 }
 
 #dropzone input {
-  max-width: 100%;  
+  max-width: 100%;
 }
 
 .step {
@@ -56,6 +56,19 @@ h1 {
   margin-bottom: 20px;
 }
 
+.load {
+  display: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 200px;
+  height: 200px;
+  background: url(images/load.gif) center no-repeat;
+}
+.load.loading {
+  display: block;
+}
+
 .details {
   border-top: 3px solid #444;
   padding-left: 6px;

examples/demo.js

@@ -39,6 +39,7 @@ window.onload = function() {
           <p><i>'+(step.description || '')+'</i></p>\
         </div>\
         <div class="col-md-8">\
+          <div class="load"></div>\
           <img alt="" class="img-thumbnail"/>\
         </div>\
       </div>\
@@ -60,20 +61,36 @@ window.onload = function() {
         var outputs = sequencer.modulesInfo(step.name).outputs;
         var io = Object.assign(inputs, outputs);
         for (var i in io) {
+          var isInput = inputs.hasOwnProperty(i);
+          var ioUI = "";
+          var inputDesc = (isInput)?inputs[i]:{};
+          if (!isInput) {
+            ioUI += "<span class=\"output\"></span>";
+          }
+          else if (inputDesc.type.toLowerCase() == "select") {
+            ioUI += "<select name=\""+i+"\">";
+            for (var option in inputDesc.values) {
+              ioUI += "<option>"+inputDesc.values[option]+"</option>";
+            }
+            ioUI += "</select>";
+          }
+          else {
+            ioUI = "<input type=\""+inputDesc.type+"\" name=\""+i+"\">";
+          }
           var div = document.createElement('div');
           div.className = "row";
           div.setAttribute('name', i);
           div.innerHTML = "<div class='det'>\
                              <label for='" + i + "'>" + i + "</label>\
-                             <input name=" + i + " class='form-control' style='width:50%' type='text' />\
+                             "+ioUI+"\
                            </div>";
           step.ui.querySelector('div.details').appendChild(div);
         }
         $(step.ui.querySelector('div.details')).append("<p><button class='btn btn-default btn-save'>Save</button></p>");
 
         // on clicking Save in the details pane of the step
         $(step.ui.querySelector('div.details .btn-save')).click(function saveOptions() {
-          $(step.ui.querySelector('div.details')).find('input').each(function(i, input) {
+          $(step.ui.querySelector('div.details')).find('input,select').each(function(i, input) {
             step.options[$(input).attr('name')] = input.value;
           });
           sequencer.run();
@@ -89,13 +106,21 @@ window.onload = function() {
       steps.appendChild(step.ui);
     },
 
+    onDraw: function(step) {
+      step.ui.querySelector('.load').className = "load loading";
+    },
+
     onComplete: function(step) {
+      step.ui.querySelector('.load').className = "load";
+
       step.imgElement.src = step.output;
       if(sequencer.modulesInfo().hasOwnProperty(step.name)) {
         var inputs = sequencer.modulesInfo(step.name).inputs;
         var outputs = sequencer.modulesInfo(step.name).outputs;
         for (var i in inputs) {
-          if (step.options[i] !== undefined) step.ui.querySelector('div[name="'+i+'"] input')
+          if (step.options[i] !== undefined && inputs[i].type.toLowerCase()!="select") step.ui.querySelector('div[name="'+i+'"] input')
+                                                 .value = step.options[i];
+          if (step.options[i] !== undefined) step.ui.querySelector('div[name="'+i+'"] select')
                                                  .value = step.options[i];
         }
         for (var i in outputs) {
@@ -131,14 +156,25 @@ window.onload = function() {
     $('#options').html('');
     var m = $('#addStep select').val();
     for(var input in modulesInfo[m].inputs) {
+      var inputUI = "";
+      var inputDesc = modulesInfo[m].inputs[input];
+      if (inputDesc.type.toLowerCase() == "select") {
+        inputUI += "<select name=\""+input+"\">";
+        for (var option in inputDesc.values) {
+          inputUI += "<option>"+inputDesc.values[option]+"</option>";
+        }
+        inputUI += "</select>";
+      }
+      else {
+        inputUI = "<input type=\""+inputDesc.type+"\" name=\""+input+"\">";
+      }
       $('#options').append(
         '<div class="row">\
            <div class="col-md-5 labels">\
              '+input+':\
            </div>\
            <div class="col-md-5">\
-             <input class="form-control" type="text" name="'+input+'" value="" placeholder="'+
-             modulesInfo[m].inputs[input].default+'"/>\
+             '+inputUI+'\
            </div>\
          </div>'
       );
@@ -148,7 +184,7 @@ window.onload = function() {
 
   function addStepUI() {
     var options = {};
-    var inputs = $('#options input');
+    var inputs = $('#options input, #options select');
     $.each(inputs, function() {
       options[this.name] = $(this).val();
     });

examples/lib/imageSelection.js

@@ -6,6 +6,8 @@ function setupFileHandling(_sequencer, dropzoneId, fileInputId) {
   fileInputId = fileInputId || "fileInput";
   var fileInput = $('#' + fileInputId);
 
+  var reader = new FileReader();
+
   function handleFile(e) {
 
     e.preventDefault();

package.json

@@ -1,6 +1,6 @@
 {
   "name": "image-sequencer",
-  "version": "0.1.1",
+  "version": "1.0.0",
   "description": "A modular JavaScript image manipulation library modeled on a storyboard.",
   "main": "src/ImageSequencer.js",
   "scripts": {