Add fieldsets and make them into tabs
This commit is contained in:
parent
56769ba4f8
commit
b51204cc1c
@ -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; }
|
||||
|
@ -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>
|
||||
|
@ -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({
|
||||
|
Loading…
Reference in New Issue
Block a user