9c0adae3cd
- Animate scrolling to the edited item’s position - Sanity check file drops and show warnings - Fix form init / refresh on new configuration drop - Document the API methods that get/set defines
602 lines
19 KiB
JavaScript
602 lines
19 KiB
JavaScript
/**
|
||
* configurator.js
|
||
*
|
||
* Marlin Configuration Utility
|
||
* - Web form for entering configuration options
|
||
* - A reprap calculator to calculate movement values
|
||
* - Uses HTML5 to generate downloadables in Javascript
|
||
* - Reads and parses standard configuration files from local folders
|
||
*
|
||
* Supporting functions
|
||
* - Parser to read Marlin Configuration.h and Configuration_adv.h files
|
||
* - Utilities to replace values in configuration files
|
||
*/
|
||
|
||
"use strict";
|
||
|
||
$(function(){
|
||
|
||
var marlin_config = 'config';
|
||
|
||
// Extend String
|
||
String.prototype.lpad = function(len, chr) {
|
||
if (chr === undefined) { chr = ' '; }
|
||
var s = this+'', need = len - s.length;
|
||
if (need > 0) { s = new Array(need+1).join(chr) + s; }
|
||
return s;
|
||
};
|
||
|
||
String.prototype.prePad = function(len, chr) {
|
||
return len ? this.lpad(len, chr) : this;
|
||
};
|
||
|
||
String.prototype.zeroPad = function(len) {
|
||
return len ? this.prePad(len, '0') : this;
|
||
};
|
||
|
||
String.prototype.regEsc = function() {
|
||
return this.replace(/[.?*+^$[\]\\(){}|-]/g, "\\$&");
|
||
}
|
||
|
||
/**
|
||
* selectField.addOptions takes an array or keyed object
|
||
*/
|
||
$.fn.extend({
|
||
addOptions: function(arrObj) {
|
||
return this.each(function() {
|
||
var sel = $(this);
|
||
var isArr = Object.prototype.toString.call(arrObj) == "[object Array]";
|
||
$.each(arrObj, function(k, v) {
|
||
sel.append( $('<option>',{value:isArr?v:k}).text(v) );
|
||
});
|
||
});
|
||
}
|
||
});
|
||
|
||
// The app is a singleton
|
||
var configuratorApp = (function(){
|
||
|
||
// private variables and functions go here
|
||
var self,
|
||
pi2 = Math.PI * 2,
|
||
has_boards = false, has_config = false, has_config_adv = false,
|
||
boards_file = 'boards.h',
|
||
config_file = 'Configuration.h',
|
||
config_adv_file = 'Configuration_adv.h',
|
||
$config = $('#config_text'),
|
||
$config_adv = $('#config_adv_text'),
|
||
boards_list = {},
|
||
therms_list = {},
|
||
total_config_lines,
|
||
total_config_adv_lines;
|
||
|
||
// Return this anonymous object as configuratorApp
|
||
return {
|
||
my_public_var: 4,
|
||
logging: 1,
|
||
|
||
init: function() {
|
||
self = this; // a 'this' for use when 'this' is something else
|
||
|
||
// Set up the form
|
||
this.setupConfigForm();
|
||
|
||
// 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({
|
||
element: $uploader[0],
|
||
onFileLoad: function(file) { self.handleFileLoad(file, $uploader); }
|
||
});
|
||
|
||
if (!fileUploader.hasFileUploaderSupport()) alert('Your browser doesn\'t support the file reading API');
|
||
|
||
// Read boards.h
|
||
boards_list = {};
|
||
|
||
var errFunc = function(jqXHR, textStatus, errorThrown) {
|
||
alert('Failed to load '+this.url+'. Try the file field.');
|
||
};
|
||
|
||
$.ajax({
|
||
url: marlin_config+'/'+boards_file,
|
||
type: 'GET',
|
||
async: false,
|
||
cache: false,
|
||
success: function(txt) {
|
||
// Get all the boards and save them into an object
|
||
self.initBoardsFromText(txt);
|
||
has_boards = true;
|
||
},
|
||
error: errFunc
|
||
});
|
||
|
||
// Read Configuration.h
|
||
$.ajax({
|
||
url: marlin_config+'/'+config_file,
|
||
type: 'GET',
|
||
async: false,
|
||
cache: false,
|
||
success: function(txt) {
|
||
// File contents into the textarea
|
||
$config.text(txt);
|
||
// Get thermistor info too
|
||
self.initThermistorsFromText(txt);
|
||
has_config = true;
|
||
},
|
||
error: errFunc
|
||
});
|
||
|
||
// Read Configuration.h
|
||
$.ajax({
|
||
url: marlin_config+'/'+config_adv_file,
|
||
type: 'GET',
|
||
async: false,
|
||
cache: false,
|
||
success: function(txt) {
|
||
// File contents into the textarea
|
||
$config_adv.text(txt);
|
||
has_config_adv = true;
|
||
self.refreshConfigForm();
|
||
},
|
||
error: errFunc
|
||
});
|
||
|
||
},
|
||
|
||
initBoardsFromText: function(txt) {
|
||
boards_list = {};
|
||
var r, findDef = new RegExp('[ \\t]*#define[ \\t]+(BOARD_[\\w_]+)[ \\t]+(\\d+)[ \\t]*(//[ \\t]*)?(.+)?', 'gm');
|
||
while((r = findDef.exec(txt)) !== null) {
|
||
boards_list[r[1]] = r[2].prePad(3, ' ') + " — " + r[4].replace(/\).*/, ')');
|
||
}
|
||
this.log("Loaded boards", 0);
|
||
this.log(boards_list, 0);
|
||
},
|
||
|
||
initThermistorsFromText: function(txt) {
|
||
// Get all the thermistors and save them into an object
|
||
var r, s, findDef = new RegExp('(//.*\n)+\\s+(#define[ \\t]+TEMP_SENSOR_0)', 'g');
|
||
r = findDef.exec(txt);
|
||
findDef = new RegExp('^//[ \\t]*([-\\d]+)[ \\t]+is[ \\t]+(.*)[ \\t]*$', 'gm');
|
||
while((s = findDef.exec(r[0])) !== null) {
|
||
therms_list[s[1]] = s[1].prePad(4, ' ') + " — " + s[2];
|
||
}
|
||
},
|
||
|
||
handleFileLoad: function(file, $uploader) {
|
||
file += '';
|
||
var filename = $uploader.val().replace(/.*[\/\\](.*)$/, '$1');
|
||
switch(filename) {
|
||
case boards_file:
|
||
this.initBoardsFromText(file);
|
||
has_boards = true;
|
||
$('#MOTHERBOARD').html('').addOptions(boards_list);
|
||
if (has_config) this.initField('MOTHERBOARD');
|
||
break;
|
||
case config_file:
|
||
if (has_boards) {
|
||
$config.text(file);
|
||
has_config = true;
|
||
total_config_lines = file.replace(/[^\n]+/g, '').length;
|
||
this.initThermistorsFromText(file);
|
||
this.purgeDefineInfo(false);
|
||
this.refreshConfigForm();
|
||
}
|
||
else {
|
||
alert("Upload a " + boards_file + " file first!");
|
||
}
|
||
break;
|
||
case config_adv_file:
|
||
if (has_config) {
|
||
$config_adv.text(file);
|
||
has_config_adv = true;
|
||
total_config_adv_lines = file.replace(/[^\n]+/g, '').length;
|
||
this.purgeDefineInfo(true);
|
||
this.refreshConfigForm();
|
||
}
|
||
else {
|
||
alert("Upload a " + config_file + " file first!");
|
||
}
|
||
break;
|
||
default:
|
||
this.log("Can't parse "+filename, 1);
|
||
break;
|
||
}
|
||
},
|
||
|
||
setupConfigForm: function() {
|
||
// Modify form fields and make the form responsive.
|
||
// As values change on the form, we could update the
|
||
// contents of text areas containing the configs, for
|
||
// example.
|
||
|
||
// while(!$config_adv.text() == null) {}
|
||
// while(!$config.text() == null) {}
|
||
|
||
// Go through all form items with names
|
||
$('#config_form').find('[name]').each(function() {
|
||
// Set its id to its name
|
||
var name = $(this).attr('name');
|
||
$(this).attr({id: name});
|
||
// Attach its label sibling
|
||
var $label = $(this).prev();
|
||
if ($label[0].tagName == 'LABEL') {
|
||
$label.attr('for',name);
|
||
}
|
||
});
|
||
|
||
// Get all 'switchable' class items and add a checkbox
|
||
$('#config_form .switchable').each(function(){
|
||
$(this).after(
|
||
$('<input>',{type:'checkbox',value:'1',class:'enabler'}).prop('checked',true)
|
||
.attr('id',this.id + '-switch')
|
||
.change(self.handleSwitch)
|
||
);
|
||
});
|
||
|
||
$('#SERIAL_PORT').addOptions([0,1,2,3,4,5,6,7]);
|
||
$('#BAUDRATE').addOptions([2400,9600,19200,38400,57600,115200,250000]);
|
||
$('#EXTRUDERS').addOptions([1,2,3,4]);
|
||
$('#POWER_SUPPLY').addOptions({'1':'ATX','2':'Xbox 360'});
|
||
|
||
$('#serial_stepper').jstepper({
|
||
min: 0,
|
||
max: 7,
|
||
val: $('#SERIAL_PORT').val(),
|
||
arrowWidth: '18px',
|
||
arrowHeight: '15px',
|
||
color: '#FFF',
|
||
acolor: '#F70',
|
||
hcolor: '#FF0',
|
||
id: 'select-me',
|
||
textStyle: {width:'1.5em',fontSize:'120%',textAlign:'center'},
|
||
onChange: function(v) { $('#SERIAL_PORT').val(v).trigger('change'); }
|
||
});
|
||
|
||
},
|
||
|
||
refreshConfigForm: function() {
|
||
|
||
/**
|
||
* For now I'm manually creating these references
|
||
* but I should be able to parse Configuration.h
|
||
* and iterate the #defines.
|
||
*
|
||
* For any #ifdef blocks I can create field groups
|
||
* which can be dimmed together when the option
|
||
* is disabled.
|
||
*
|
||
* Then we only need to specify exceptions to
|
||
* standard behavior, (which is to add a text field)
|
||
*/
|
||
this.initField('SERIAL_PORT');
|
||
|
||
this.initField('BAUDRATE');
|
||
|
||
this.initField('BTENABLED');
|
||
|
||
$('#MOTHERBOARD').html('').addOptions(boards_list);
|
||
this.initField('MOTHERBOARD');
|
||
|
||
this.initField('CUSTOM_MENDEL_NAME');
|
||
|
||
this.initField('MACHINE_UUID');
|
||
|
||
this.initField('EXTRUDERS');
|
||
|
||
this.initField('POWER_SUPPLY');
|
||
|
||
this.initField('PS_DEFAULT_OFF');
|
||
|
||
$('#TEMP_SENSOR_0, #TEMP_SENSOR_1, #TEMP_SENSOR_2, #TEMP_SENSOR_BED').html('').addOptions(therms_list);
|
||
this.initField('TEMP_SENSOR_0');
|
||
this.initField('TEMP_SENSOR_1');
|
||
this.initField('TEMP_SENSOR_2');
|
||
this.initField('TEMP_SENSOR_BED');
|
||
|
||
this.initField('TEMP_SENSOR_1_AS_REDUNDANT');
|
||
this.initField('MAX_REDUNDANT_TEMP_SENSOR_DIFF');
|
||
|
||
this.initField('TEMP_RESIDENCY_TIME');
|
||
|
||
// prettyPrint();
|
||
},
|
||
|
||
/**
|
||
* initField - make a field responsive and get info
|
||
* about its configuration file define
|
||
*/
|
||
initField: function(name, adv) {
|
||
this.log("initField:"+name,3);
|
||
var $elm = $('#'+name), elm = $elm[0];
|
||
if (elm.defineInfo === undefined) {
|
||
elm.defineInfo = this.getDefineInfo(name, adv);
|
||
$elm.on($elm.attr('type') == 'text' ? 'input' : 'change', this.handleChange);
|
||
}
|
||
this.setFieldFromDefine(name);
|
||
},
|
||
|
||
handleChange: function(e) {
|
||
self.updateDefineFromField(e.target.id);
|
||
},
|
||
|
||
handleSwitch: function(e) {
|
||
var $elm = $(e.target), $prev = $elm.prev();
|
||
var on = $elm.prop('checked') || false;
|
||
$prev.attr('disabled', !on);
|
||
self.setDefineEnabled($prev[0].id, on);
|
||
},
|
||
|
||
/**
|
||
* Get the current value of a #define (from the config text)
|
||
*/
|
||
defineValue: function(name) {
|
||
this.log('defineValue:'+name,4);
|
||
var $elm = $('#'+name), elm = $elm[0], inf = elm.defineInfo;
|
||
var result = inf.regex.exec($(inf.field).text());
|
||
|
||
this.log(result,2);
|
||
|
||
return inf.type == 'switch' ? result[inf.val_i] != '//' : result[inf.val_i];
|
||
},
|
||
|
||
/**
|
||
* Get the current enabled state of a #define (from the config text)
|
||
*/
|
||
defineIsEnabled: function(name) {
|
||
this.log('defineIsEnabled:'+name,4);
|
||
var $elm = $('#'+name), elm = $elm[0], inf = elm.defineInfo;
|
||
var result = inf.regex.exec($(inf.field).text());
|
||
|
||
this.log(result,2);
|
||
|
||
var on = result !== null ? result[1].trim() != '//' : true;
|
||
this.log(name + ' = ' + on, 4);
|
||
|
||
return on;
|
||
},
|
||
|
||
/**
|
||
* Set a #define enabled or disabled by altering the config text
|
||
*/
|
||
setDefineEnabled: function(name, val) {
|
||
this.log('setDefineEnabled:'+name,4);
|
||
|
||
var $elm = $('#'+name), elm = $elm[0], inf = elm.defineInfo;
|
||
var $c = $(inf.field), txt = $c.text();
|
||
|
||
var slash = val ? '' : '//';
|
||
var newline = inf.line
|
||
.replace(/^([ \t]*)(\/\/)([ \t]*)/, '$1$3') // remove slashes
|
||
.replace(inf.pre+inf.define, inf.pre+slash+inf.define); // add them back
|
||
|
||
txt = txt.replace(inf.line, newline);
|
||
inf.line = newline;
|
||
this.log(newline, 2);
|
||
|
||
$c.text(txt);
|
||
},
|
||
|
||
/**
|
||
* Update a #define (from the form) by altering the config text
|
||
*/
|
||
updateDefineFromField: function(name) {
|
||
this.log('updateDefineFromField:'+name,4);
|
||
var $elm = $('#'+name), elm = $elm[0], inf = elm.defineInfo;
|
||
var $c = $(inf.field), txt = $c.text();
|
||
|
||
// var result = inf.repl.exec(txt);
|
||
// this.log(result, 2);
|
||
|
||
var isCheck = $elm.attr('type') == 'checkbox',
|
||
val = isCheck ? $elm.prop('checked') : $elm.val();
|
||
|
||
var newline;
|
||
switch(inf.type) {
|
||
case 'switch':
|
||
var slash = val ? '' : '//';
|
||
newline = (inf.pre + slash + inf.define + inf.post);
|
||
break;
|
||
case 'quoted':
|
||
if (isCheck) {
|
||
this.log(name + ' should not be a checkbox', 1);
|
||
var slash = val ? '' : '//';
|
||
newline = (inf.pre + slash + inf.define + '"'+val+'"' + inf.post);
|
||
}
|
||
else {
|
||
newline = inf.pre + inf.define + '"'+val+'"' + inf.post;
|
||
}
|
||
break;
|
||
case 'plain':
|
||
if (isCheck) {
|
||
this.log(name + ' should not be a checkbox', 1);
|
||
var slash = val ? '' : '//';
|
||
newline = (inf.pre + slash + inf.define + val + inf.post);
|
||
}
|
||
else {
|
||
newline = inf.pre + inf.define + val + inf.post;
|
||
}
|
||
break;
|
||
}
|
||
|
||
txt = txt.replace(inf.line, newline);
|
||
inf.line = newline;
|
||
this.log(newline, 2);
|
||
|
||
$c.text(txt);
|
||
|
||
// Scroll to the altered text if it isn't visible
|
||
var halfHeight = $c.height()/2, scrollHeight = $c.prop('scrollHeight'),
|
||
textScrollY = inf.lineNum * scrollHeight/(inf.adv ? total_config_adv_lines : total_config_lines) - halfHeight;
|
||
|
||
if (textScrollY < 0)
|
||
textScrollY = 0;
|
||
else if (textScrollY > scrollHeight)
|
||
textScrollY = scrollHeight - 1;
|
||
|
||
if (Math.abs($c.prop('scrollTop') - textScrollY) > halfHeight)
|
||
$c.animate({ scrollTop: textScrollY < 0 ? 0 : textScrollY });
|
||
|
||
},
|
||
|
||
/**
|
||
* Set a form field to the current #define value in the config text
|
||
*/
|
||
setFieldFromDefine: function(name) {
|
||
var $elm = $('#'+name), val = this.defineValue(name);
|
||
|
||
this.log('setFieldFromDefine:' + name + ' to ' + val, 4);
|
||
|
||
// Set the field value
|
||
$elm.attr('type') == 'checkbox' ? $elm.prop('checked', val) : $elm.val(''+val);
|
||
|
||
// If the item has a checkbox then set enabled state too
|
||
var $cb = $('#'+name+'-switch');
|
||
if ($cb.length) {
|
||
var on = self.defineIsEnabled(name);
|
||
$elm.attr('disabled', !on); // enable/disable the form field (could also dim it)
|
||
$cb.prop('checked', on); // check/uncheck the checkbox
|
||
}
|
||
},
|
||
|
||
/**
|
||
* Purge #define information for one of the config files
|
||
*/
|
||
purgeDefineInfo: function(adv) {
|
||
if (typeof adv == 'undefined') adv = false;
|
||
$('[defineInfo]').each(function() {
|
||
if (adv === this.defineInfo.adv) $(this).removeProp('defineInfo');
|
||
});
|
||
},
|
||
|
||
/**
|
||
* Update #define information for one of the config files
|
||
*/
|
||
refreshDefineInfo: function(adv) {
|
||
if (typeof adv == 'undefined') adv = false;
|
||
$('[defineInfo]').each(function() {
|
||
if (adv == this.defineInfo.adv) this.defineInfo = self.getDefineInfo(this.id, adv);
|
||
});
|
||
},
|
||
|
||
/**
|
||
* Get information about a #define from configuration file text:
|
||
*
|
||
* Pre-examine the #define for its prefix, value position, suffix, etc.
|
||
* Construct a regex for the #define to quickly find (and replace) values.
|
||
* Store the existing #define line as the key to finding it later.
|
||
* Determine the line number of the #define so it can be scrolled to.
|
||
*/
|
||
getDefineInfo: function(name, adv) {
|
||
if (typeof adv == 'undefined') adv = false;
|
||
this.log('getDefineInfo:'+name,4);
|
||
var $elm = $('#'+name), elm = $elm[0];
|
||
var $c = adv ? $config_adv : $config;
|
||
|
||
// a switch line with no value
|
||
var findDef = new RegExp('^(.*//)?(.*#define[ \\t]+' + elm.id + ')([ \\t]*/[*/].*)?$', 'm');
|
||
var result = findDef.exec($c.text());
|
||
if (result !== null) {
|
||
var info = {
|
||
type:'switch', adv:adv, field:$c[0], val_i: 1,
|
||
line: result[0], // whole line
|
||
pre: result[1] === undefined ? '' : result[1].replace('//',''),
|
||
define: result[2],
|
||
post: result[3] === undefined ? '' : result[3]
|
||
};
|
||
info.repl = info.regex = new RegExp('(.*//)?(.*' + info.define.regEsc() + info.post.regEsc() + ')', 'm');
|
||
info.lineNum = this.getLineInText(info.line, $c.text());
|
||
this.log(info,2);
|
||
return info;
|
||
}
|
||
|
||
// a define with quotes
|
||
findDef = new RegExp('^(.*//)?(.*#define[ \\t]+' + elm.id + '[ \\t]+)("[^"]*")([ \\t]*/[*/].*)?$', 'm');
|
||
result = findDef.exec($c.text());
|
||
if (result !== null) {
|
||
var info = {
|
||
type:'quoted', adv:adv, field:$c[0], val_i: 2,
|
||
line: result[0],
|
||
pre: result[1] === undefined ? '' : result[1].replace('//',''),
|
||
define: result[2],
|
||
post: result[4] === undefined ? '' : result[4]
|
||
};
|
||
info.regex = new RegExp('(.*//)?.*' + info.define.regEsc() + '"([^"]*)"' + info.post.regEsc(), 'm');
|
||
info.repl = new RegExp('((.*//)?.*' + info.define.regEsc() + '")[^"]*("' + info.post.regEsc() + ')', 'm');
|
||
info.lineNum = this.getLineInText(info.line, $c.text());
|
||
this.log(info,2);
|
||
return info;
|
||
}
|
||
|
||
// a define with no quotes
|
||
findDef = new RegExp('^(.*//)?(.*#define[ \\t]+' + elm.id + '[ \\t]+)(\\S*)([ \\t]*/[*/].*)?$', 'm');
|
||
result = findDef.exec($c.text());
|
||
if (result !== null) {
|
||
var info = {
|
||
type:'plain', adv:adv, field:$c[0], val_i: 2,
|
||
line: result[0],
|
||
pre: result[1] === undefined ? '' : result[1].replace('//',''),
|
||
define: result[2],
|
||
post: result[4] === undefined ? '' : result[4]
|
||
};
|
||
info.regex = new RegExp('(.*//)?.*' + info.define.regEsc() + '(\\S*)' + info.post.regEsc(), 'm');
|
||
info.repl = new RegExp('((.*//)?.*' + info.define.regEsc() + ')\\S*(' + info.post.regEsc() + ')', 'm');
|
||
info.lineNum = this.getLineInText(info.line, $c.text());
|
||
this.log(info,2);
|
||
return info;
|
||
}
|
||
|
||
return null;
|
||
},
|
||
|
||
getLineInText: function(line, txt) {
|
||
var pos = txt.indexOf(line);
|
||
return (pos < 0) ? pos : txt.substr(0, pos).replace(/[^\n]+/g, '').length;
|
||
},
|
||
|
||
log: function(o,l) {
|
||
if (l === undefined) l = 0;
|
||
if (this.logging>=l*1) console.log(o);
|
||
},
|
||
|
||
logOnce: function(o) {
|
||
if (typeof o.didLogThisObject === 'undefined') {
|
||
this.log(o);
|
||
o.didLogThisObject = true;
|
||
}
|
||
},
|
||
|
||
EOF: null
|
||
};
|
||
|
||
})();
|
||
|
||
// Typically the app would be in its own file, but this would be here
|
||
configuratorApp.init();
|
||
|
||
});
|