simplified demo ui (#224)

* simplified demo ui

* show description

* smaller, labelled example image

examples/demo.js

@@ -165,41 +165,13 @@ window.onload = function() {
 
   });
 
-
-  // File handling
-
   $('#addStep select').on('change', selectNewStepUI);
 
   function selectNewStepUI() {
-    $('#options').html('');
     var m = $('#addStep select').val();
-    for(var input in modulesInfo[m].inputs) {
+    $('#addStep .info').html(sequencer.modulesInfo(m).description);
-      var inputUI = "";
-      var inputDesc = modulesInfo[m].inputs[input];
-      if (inputDesc.type.toLowerCase() == "select") {
-        inputUI += "<select class=\"form-control\" name=\""+input+"\">";
-        for (var option in inputDesc.values) {
-          inputUI += "<option>"+inputDesc.values[option]+"</option>";
-        }
-        inputUI += "</select>";
-      }
-      else {
-        inputUI = "<input class=\"form-control\" type=\""+inputDesc.type+"\" name=\""+input+"\">";
-      }
-      $('#options').append(
-        '<div class="row">\
-           <div class="col-md-5 labels">\
-             '+input+':\
-           </div>\
-           <div class="col-md-5">\
-             '+inputUI+'\
-           </div>\
-         </div>'
-      );
-    }
   }
 
-
   function addStepUI() {
     var options = {};
     var inputs = $('#options input, #options select');

examples/index.html

@@ -48,18 +48,20 @@
 
       <section id="steps" class="row"></section>
 
-      <section id="addStep">
+      <hr />
-        <div class="row">
+
-          <select class="form-control">
+      <section id="addStep" class="panel panel-primary">
-            <option value="none" disabled selected>Select a new step...</option>
+        <div class="form-inline">
-          </select>
+          <div class="panel-body">
-        </div>
+            <div style="text-align:center;">
-        <hr />
+              <select class="form-control input-lg">
-        <div class="row">
+                <option value="none" disabled selected>Select a new step...</option>
-          <div id="options"></div>
+              </select>
-        </div>
+              <button class="btn btn-success btn-lg" name="add">Add Step</button>
-        <div class="row add">
+            </div>
-          <button class="btn btn-success btn-lg" name="add">Add Step</button>
+            <br />
+	    <p class="info" style="padding:8px;">Select a new module to add to your sequence.</p>
+	  </div>
         </div>
       </section>
 
@@ -68,7 +70,6 @@
     <script type="text/javascript">
 
       var sequencer;
-    
 
     </script>