diff --git a/dist/image-sequencer.js b/dist/image-sequencer.js
index c168d977..0994fcec 100644
--- a/dist/image-sequencer.js
+++ b/dist/image-sequencer.js
@@ -28654,10 +28654,10 @@ module.exports = function Crop(input,options,callback) {
       savePixels = require('save-pixels');
 
   getPixels(input.src,function(err,pixels){
-    var ox = options.x || 0;
-    var oy = options.y || 0;
-    var w = options.w || Math.floor(0.5*pixels.shape[0]);
-    var h = options.h || Math.floor(0.5*pixels.shape[1]);
+    var ox = parseInt(options.x) || 0;
+    var oy = parseInt(options.y) || 0;
+    var w = parseInt(options.w) || Math.floor(0.5*pixels.shape[0]);
+    var h = parseInt(options.h) || Math.floor(0.5*pixels.shape[1]);
     var iw = pixels.shape[0]; //Width of Original Image
     var newarray = new Uint8Array(4*w*h);
     for (var n = oy; n < oy + h; n++) {
@@ -28749,12 +28749,12 @@ module.exports={
       "desc": "Y-position (measured from top) from where cropping starts",
       "default": 0
     },
-    "width": {
+    "w": {
       "type": "integer",
       "desc": "Width of crop",
       "default": "(50%)"
     },
-    "height": {
+    "h": {
       "type": "integer",
       "desc": "Height of crop",
       "default": "(50%)"
@@ -28922,13 +28922,13 @@ module.exports = function DoNothing(options,UI) {
         selector: "#image-sequencer-canvas"
       });
 
-      distorter.lens.a = options.a || distorter.lens.a;
-      distorter.lens.b = options.b || distorter.lens.b;
-      distorter.lens.Fx = options.Fx || distorter.lens.Fx;
-      distorter.lens.Fy = options.Fy || distorter.lens.Fy;
-      distorter.lens.scale = options.scale || distorter.lens.scale;
-      distorter.fov.x = options.x || distorter.fov.x;
-      distorter.fov.y = options.y || distorter.fov.y;
+      distorter.lens.a = parseFloat(options.a) || distorter.lens.a;
+      distorter.lens.b = parseFloat(options.b) || distorter.lens.b;
+      distorter.lens.Fx = parseFloat(options.Fx) || distorter.lens.Fx;
+      distorter.lens.Fy = parseFloat(options.Fy) || distorter.lens.Fy;
+      distorter.lens.scale = parseFloat(options.scale) || distorter.lens.scale;
+      distorter.fov.x = parseFloat(options.x) || distorter.fov.x;
+      distorter.fov.y = parseFloat(options.y) || distorter.fov.y;
 
       distorter.setImage(input.src,function(){
         step.output = {src: canvas.toDataURL(), format: input.format};
diff --git a/examples/index.html b/examples/index.html
index fac7494e..e84c9b07 100644
--- a/examples/index.html
+++ b/examples/index.html
@@ -51,13 +51,6 @@
           Add Step :
           <select style="font-family: sans-serif; height: 30px">
             <option value="none" disabled selected>Please Select</option>
-            <option value="crop">Crop</option>
-            <option value="decode-qr">Decode Qr</option>
-            <option value="fisheye-gl">Fisheye GL</option>
-            <option value="green-channel">Green Channel</option>
-            <option value="invert">Invert</option>
-            <option value="ndvi-red">NDVI Red</option>
-            <option value="segmented-colormap">Segmented Colormap</option>
           </select>
           <button type="button" name="add">Add Step</button>
         </div>
@@ -65,23 +58,7 @@
           <div class="c">
             Options:
           </div>
-          <div class="c rh">
-            <div class="r">
-              <div class="c">
-                key:
-              </div>
-              <div class="c">
-                <input type="text" name="" value="" placeholder="default"/>
-              </div>
-            </div>
-            <div class="r">
-              <div class="c">
-                key:
-              </div>
-              <div class="c">
-                <input type="text" name="" value="" placeholder="default"/>
-              </div>
-            </div>
+          <div id="options" class="c rh">
           </div>
         </div>
       </section>
@@ -94,6 +71,14 @@
 
       window.onload = function() {
 
+        var modulesInfo = sequencer.modulesInfo();
+
+        for(var m in modulesInfo) {
+          if(m!="do-nothing" && m!="do-nothing-pix")
+            $('#addStep select').append(
+              '<option value="'+m+'">'+modulesInfo[m].name+'</option>'
+            );
+        }
 
         var steps = document.querySelector('#steps');
         var parser = new DOMParser();
@@ -147,9 +132,32 @@
           this.addSteps('crop').run();
         });
 
+        $('#addStep select').on('change', function(){
+          $('#options').html('');
+          var m = $('#addStep select').val();
+          for(var input in modulesInfo[m].inputs) {
+            $('#options').append(
+              '<div class="r">\
+                 <div class="c">\
+                   '+input+':\
+                 </div>\
+                 <div class="c">\
+                   <input type="text" name="'+input+'" value="" placeholder="'+
+                   modulesInfo[m].inputs[input].default+'"/>\
+                 </div>\
+               </div>'
+            );
+          }
+        });
+
         $('#addStep button').on('click',function(){
+          var options = {};
+          var inputs = $('#options input');
+          $.each(inputs, function() {
+            options[this.name] = $(this).val();
+          });
           if($('#addStep select').val()=="none") return;
-          sequencer.addSteps($('#addStep select').val()).run();
+          sequencer.addSteps($('#addStep select').val(),options).run();
         });
 
         $('body').on('click','button.remove',function(){
diff --git a/src/modules/Crop/Crop.js b/src/modules/Crop/Crop.js
index 7502e00a..0f9932b8 100644
--- a/src/modules/Crop/Crop.js
+++ b/src/modules/Crop/Crop.js
@@ -4,10 +4,10 @@ module.exports = function Crop(input,options,callback) {
       savePixels = require('save-pixels');
 
   getPixels(input.src,function(err,pixels){
-    var ox = options.x || 0;
-    var oy = options.y || 0;
-    var w = options.w || Math.floor(0.5*pixels.shape[0]);
-    var h = options.h || Math.floor(0.5*pixels.shape[1]);
+    var ox = parseInt(options.x) || 0;
+    var oy = parseInt(options.y) || 0;
+    var w = parseInt(options.w) || Math.floor(0.5*pixels.shape[0]);
+    var h = parseInt(options.h) || Math.floor(0.5*pixels.shape[1]);
     var iw = pixels.shape[0]; //Width of Original Image
     var newarray = new Uint8Array(4*w*h);
     for (var n = oy; n < oy + h; n++) {
diff --git a/src/modules/Crop/info.json b/src/modules/Crop/info.json
index 6b33ed7b..20f5ad9f 100644
--- a/src/modules/Crop/info.json
+++ b/src/modules/Crop/info.json
@@ -11,12 +11,12 @@
       "desc": "Y-position (measured from top) from where cropping starts",
       "default": 0
     },
-    "width": {
+    "w": {
       "type": "integer",
       "desc": "Width of crop",
       "default": "(50%)"
     },
-    "height": {
+    "h": {
       "type": "integer",
       "desc": "Height of crop",
       "default": "(50%)"
diff --git a/src/modules/FisheyeGl/Module.js b/src/modules/FisheyeGl/Module.js
index f0dd2c19..a636b28f 100644
--- a/src/modules/FisheyeGl/Module.js
+++ b/src/modules/FisheyeGl/Module.js
@@ -28,13 +28,13 @@ module.exports = function DoNothing(options,UI) {
         selector: "#image-sequencer-canvas"
       });
 
-      distorter.lens.a = options.a || distorter.lens.a;
-      distorter.lens.b = options.b || distorter.lens.b;
-      distorter.lens.Fx = options.Fx || distorter.lens.Fx;
-      distorter.lens.Fy = options.Fy || distorter.lens.Fy;
-      distorter.lens.scale = options.scale || distorter.lens.scale;
-      distorter.fov.x = options.x || distorter.fov.x;
-      distorter.fov.y = options.y || distorter.fov.y;
+      distorter.lens.a = parseFloat(options.a) || distorter.lens.a;
+      distorter.lens.b = parseFloat(options.b) || distorter.lens.b;
+      distorter.lens.Fx = parseFloat(options.Fx) || distorter.lens.Fx;
+      distorter.lens.Fy = parseFloat(options.Fy) || distorter.lens.Fy;
+      distorter.lens.scale = parseFloat(options.scale) || distorter.lens.scale;
+      distorter.fov.x = parseFloat(options.x) || distorter.fov.x;
+      distorter.fov.y = parseFloat(options.y) || distorter.fov.y;
 
       distorter.setImage(input.src,function(){
         step.output = {src: canvas.toDataURL(), format: input.format};