Add fieldsets and make them into tabs

Marlin/configurator/css/configurator.css

@@ -12,7 +12,7 @@ p { width: 80%; color: #FF0; }
 #help strong { color: #0DD; }
 img { display: none; }
 label, input, select, textarea { display: block; float: left; margin: 1px 0; }
-label.newline, textarea { clear: both; }
+label.newline, textarea, fieldset { clear: both; }
 label { width: 130px; height: 1em; padding: 10px 480px 10px 1em; margin-right: -470px; text-align: right; }
 input[type="text"], select { margin: 0.75em 0 0; }
 input[type="checkbox"], input[type="radio"], input[type="file"] { margin: 1em 0 0; }
@@ -25,4 +25,34 @@ input:disabled { color: #BBB; }
 h1, h2, h3, h4, h5, h6 { clear: both; }
 h2 { margin: 0; padding: 1em 0 0; }
 #serial_stepper { padding-top: 0.75em; display: block; float: left; }
-#SERIAL_PORT { display: none; }
+#SERIAL_PORT { display: none; }
+
+ul.tabs { display: inline; list-style: none; }
+ul.tabs li { display: inline; }
+ul.tabs li a,
+ul.tabs li a.active:hover,
+ul.tabs li a.active:active {
+	display: block;
+	float: left;
+	background: #666;
+	color: #CCC;
+	font-size: 150%;
+	border-radius: 0.25em 0.25em 0 0;
+	margin: 0 4px 0 0;
+	padding: 2px 4px;
+	text-decoration: none;
+	}
+ul.tabs li a.active:link,
+ul.tabs li a.active:visited {
+	background: #DDD;
+	color: #900;
+	cursor: default;
+	}
+ul.tabs li a:hover,
+ul.tabs li a:active {
+	background: #777;
+	color: #DDD;
+	}
+
+fieldset { display: none; border: 1px solid #AAA; border-radius: 1em; }
+fieldset legend { display: none; }

Marlin/configurator/index.html

@@ -19,43 +19,52 @@
         <li><strong>HELP</strong> - This is the help region</li>
       </ul>
 
+      <div id="tabs"></div>
+
       <form id="config_form">
 
         <label>Drop Files Here:</label><input type="file" id="file-upload" />
 
-        <label class="newline">Serial Port:</label><select name="SERIAL_PORT"></select><div id="serial_stepper"></div>
+        <fieldset id="machine">
+          <legend>Machine</legend>
+
+          <label class="newline">Serial Port:</label><select name="SERIAL_PORT"></select><div id="serial_stepper"></div>
 
-        <label>Baud Rate:</label><select name="BAUDRATE"></select>
+          <label>Baud Rate:</label><select name="BAUDRATE"></select>
 
-        <label>AT90USB BT IF:</label>
-          <input name="BTENABLED" type="checkbox" value="1" checked />
+          <label>AT90USB BT IF:</label>
+            <input name="BTENABLED" type="checkbox" value="1" checked />
 
-        <label class="newline">Motherboard:</label><select name="MOTHERBOARD"></select>
+          <label class="newline">Motherboard:</label><select name="MOTHERBOARD"></select>
 
-        <label class="newline">Custom Name:</label><input name="CUSTOM_MENDEL_NAME" class="switchable" type="text" size="14" maxlength="12" value="" />
+          <label class="newline">Custom Name:</label><input name="CUSTOM_MENDEL_NAME" class="switchable" type="text" size="14" maxlength="12" value="" />
 
-        <label class="newline">Machine UUID:</label><input name="MACHINE_UUID" class="switchable" type="text" size="38" maxlength="36" value="" />
+          <label class="newline">Machine UUID:</label><input name="MACHINE_UUID" class="switchable" type="text" size="38" maxlength="36" value="" />
 
-        <label class="newline">Extruders:</label><select name="EXTRUDERS"></select>
+          <label class="newline">Extruders:</label><select name="EXTRUDERS"></select>
 
-        <label class="newline">Power Supply:</label><select name="POWER_SUPPLY"></select>
+          <label class="newline">Power Supply:</label><select name="POWER_SUPPLY"></select>
 
-        <label>PS Default Off:</label>
-          <input name="PS_DEFAULT_OFF" type="checkbox" value="1" checked />
+          <label>PS Default Off:</label>
+            <input name="PS_DEFAULT_OFF" type="checkbox" value="1" checked />
+        </fieldset>
 
-        <label class="newline">Temp Sensor 0:</label><select name="TEMP_SENSOR_0"></select>
-        <label class="newline">Temp Sensor 1:</label><select name="TEMP_SENSOR_1"></select>
-        <label class="newline">Temp Sensor 2:</label><select name="TEMP_SENSOR_2"></select>
-        <label class="newline">Bed Temp Sensor:</label><select name="TEMP_SENSOR_BED"></select>
+        <fieldset id="temperature">
+          <legend>Temperature</legend>
+          <label class="newline">Temp Sensor 0:</label><select name="TEMP_SENSOR_0"></select>
+          <label class="newline">Temp Sensor 1:</label><select name="TEMP_SENSOR_1"></select>
+          <label class="newline">Temp Sensor 2:</label><select name="TEMP_SENSOR_2"></select>
+          <label class="newline">Bed Temp Sensor:</label><select name="TEMP_SENSOR_BED"></select>
 
-        <label class="newline">Redundant Sensor:</label>
-          <input name="TEMP_SENSOR_1_AS_REDUNDANT" type="checkbox" value="1" checked />
+          <label class="newline">Redundant Sensor:</label>
+            <input name="TEMP_SENSOR_1_AS_REDUNDANT" type="checkbox" value="1" checked />
 
-        <label>Max Diff:</label>
-          <input name="MAX_REDUNDANT_TEMP_SENSOR_DIFF" type="text" size="3" maxlength="2" />
+          <label>Max Diff:</label>
+            <input name="MAX_REDUNDANT_TEMP_SENSOR_DIFF" type="text" size="3" maxlength="2" />
 
-        <label class="newline">Temp Residency Time (s):</label>
-          <input name="TEMP_RESIDENCY_TIME" type="text" size="3" maxlength="2" />
+          <label class="newline">Temp Residency Time (s):</label>
+            <input name="TEMP_RESIDENCY_TIME" type="text" size="3" maxlength="2" />
+        </fieldset>
 
         <h2>Marlin/Configuration.h</h2>
         <pre id="config_text" class="prettyprint linenums"></pre>

Marlin/configurator/js/configurator.js

@@ -75,6 +75,30 @@ var configuratorApp = (function(){
     init: function() {
       self = this; // a 'this' for use when 'this' is something else
 
+      // Make tabs for the fieldsets
+      var $fset = $('#config_form fieldset');
+      var $tabs = $('<ul>',{class:'tabs'}), ind = 1;
+      $('#config_form fieldset').each(function(){
+        var tabID = 'TAB'+ind;
+        $(this).addClass(tabID);
+        var $leg = $(this).find('legend');
+        var $link = $('<a>',{href:'#'+ind,id:tabID}).text($leg.text());
+        $tabs.append($('<li>').append($link));
+        $link.click(function(e){
+          e.preventDefault;
+          var ind = this.id;
+          $tabs.find('.active').removeClass('active');
+          $(this).addClass('active');
+          $fset.hide();
+          $fset.filter('.'+this.id).show();
+          return false;
+        });
+        ind++;
+      });
+      $tabs.appendTo('#tabs');
+      $('<br>',{class:'clear'}).appendTo('#tabs');
+      $tabs.find('a:first').trigger('click');
+
       // Make a droppable file uploader
       var $uploader = $('#file-upload');
       var fileUploader = new BinaryFileUploader({