andrey
/
Marlin_FB4S
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Add fieldsets and make them into tabs

pull/1/head
Scott Lahteine 10 years ago
parent
56769ba4f8
commit
b51204cc1c
3 changed files with 86 additions and 23 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 34
      Marlin/configurator/css/configurator.css
  2. 51
      Marlin/configurator/index.html
  3. 24
      Marlin/configurator/js/configurator.js

34
Marlin/configurator/css/configurator.css
View File

@ -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; }

51
Marlin/configurator/index.html
View File

@ -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>

24
Marlin/configurator/js/configurator.js
View File

@ -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({

Write Preview
Loading…
Cancel
Save