From b51204cc1c67100e38efbf223a70151a7a2f9b06 Mon Sep 17 00:00:00 2001
From: Scott Lahteine <sourcetree@thinkyhead.com>
Date: Thu, 5 Feb 2015 20:28:39 -0800
Subject: [PATCH] Add fieldsets and make them into tabs
---
Marlin/configurator/css/configurator.css | 34 +++++++++++++++-
Marlin/configurator/index.html | 51 ++++++++++++++----------
Marlin/configurator/js/configurator.js | 24 +++++++++++
3 files changed, 86 insertions(+), 23 deletions(-)
diff --git a/Marlin/configurator/css/configurator.css b/Marlin/configurator/css/configurator.css
index 2409508e6a..418000deee 100644
--- a/Marlin/configurator/css/configurator.css
+++ b/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; }
\ No newline at end of file
+#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; }
diff --git a/Marlin/configurator/index.html b/Marlin/configurator/index.html
index aa2c106a69..66be7514c6 100644
--- a/Marlin/configurator/index.html
+++ b/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>Baud Rate:</label><select name="BAUDRATE"></select>
+ <label class="newline">Serial Port:</label><select name="SERIAL_PORT"></select><div id="serial_stepper"></div>
- <label>AT90USB BT IF:</label>
- <input name="BTENABLED" type="checkbox" value="1" checked />
+ <label>Baud Rate:</label><select name="BAUDRATE"></select>
- <label class="newline">Motherboard:</label><select name="MOTHERBOARD"></select>
+ <label>AT90USB BT IF:</label>
+ <input name="BTENABLED" type="checkbox" value="1" checked />
- <label class="newline">Custom Name:</label><input name="CUSTOM_MENDEL_NAME" class="switchable" type="text" size="14" maxlength="12" value="" />
+ <label class="newline">Motherboard:</label><select name="MOTHERBOARD"></select>
- <label class="newline">Machine UUID:</label><input name="MACHINE_UUID" class="switchable" type="text" size="38" maxlength="36" value="" />
+ <label class="newline">Custom Name:</label><input name="CUSTOM_MENDEL_NAME" class="switchable" type="text" size="14" maxlength="12" value="" />
- <label class="newline">Extruders:</label><select name="EXTRUDERS"></select>
+ <label class="newline">Machine UUID:</label><input name="MACHINE_UUID" class="switchable" type="text" size="38" maxlength="36" value="" />
- <label class="newline">Power Supply:</label><select name="POWER_SUPPLY"></select>
+ <label class="newline">Extruders:</label><select name="EXTRUDERS"></select>
- <label>PS Default Off:</label>
- <input name="PS_DEFAULT_OFF" type="checkbox" value="1" checked />
+ <label class="newline">Power Supply:</label><select name="POWER_SUPPLY"></select>
- <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>PS Default Off:</label>
+ <input name="PS_DEFAULT_OFF" type="checkbox" value="1" checked />
+ </fieldset>
- <label class="newline">Redundant Sensor:</label>
- <input name="TEMP_SENSOR_1_AS_REDUNDANT" type="checkbox" value="1" checked />
+ <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>Max Diff:</label>
- <input name="MAX_REDUNDANT_TEMP_SENSOR_DIFF" type="text" size="3" maxlength="2" />
+ <label class="newline">Redundant Sensor:</label>
+ <input name="TEMP_SENSOR_1_AS_REDUNDANT" type="checkbox" value="1" checked />
- <label class="newline">Temp Residency Time (s):</label>
- <input name="TEMP_RESIDENCY_TIME" 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" />
+ </fieldset>
<h2>Marlin/Configuration.h</h2>
<pre id="config_text" class="prettyprint linenums"></pre>
diff --git a/Marlin/configurator/js/configurator.js b/Marlin/configurator/js/configurator.js
index dd7de6f8e1..2dfa2d2178 100644
--- a/Marlin/configurator/js/configurator.js
+++ b/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({