Marlin_Firmware/Marlin/configurator/js/configurator.js
2015-04-08 03:12:21 -07:00

1433 lines
49 KiB
JavaScript
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

/**
* 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(){
/**
* Github API useful GET paths. (Start with "https://api.github.com/repos/:owner/:repo/")
*
* contributors Get a list of contributors
* tags Get a list of tags
* contents/[path]?ref=branch/tag/commit Get the contents of a file
*/
// GitHub
// Warning! Limited to 60 requests per hour!
var config = {
type: 'github',
host: 'https://api.github.com',
owner: 'MarlinFirmware',
repo: 'Marlin',
ref: 'Development',
path: 'Marlin/configurator/config'
};
/**/
/* // Remote
var config = {
type: 'remote',
host: 'http://www.thinkyhead.com',
path: '_marlin/config'
};
/**/
/* // Local
var config = {
type: 'local',
path: 'config'
};
/**/
function github_command(conf, command, path) {
var req = conf.host+'/repos/'+conf.owner+'/'+conf.repo+'/'+command;
if (path) req += '/' + path;
return req;
}
function config_path(item) {
var path = '', ref = '';
switch(config.type) {
case 'github':
path = github_command(config, 'contents', config.path);
if (config.ref !== undefined) ref = '?ref=' + config.ref;
break;
case 'remote':
path = config.host + '/' + config.path + '/';
break;
case 'local':
path = config.path + '/';
break;
}
return path + '/' + item + ref;
}
// Extend builtins
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 this.prePad(len, '0'); };
String.prototype.toHTML = function() { return jQuery('<div>').text(this).html(); };
String.prototype.regEsc = function() { return this.replace(/[.?*+^$[\]\\(){}|-]/g, "\\$&"); }
String.prototype.lineCount = function(ind) { var len = (ind === undefined ? this : this.substr(0,ind*1)).split(/\r?\n|\r/).length; return len > 0 ? len - 1 : 0; };
String.prototype.line = function(num) { var arr = this.split(/\r?\n|\r/); return num < arr.length ? arr[1*num] : ''; };
String.prototype.replaceLine = function(num,txt) { var arr = this.split(/\r?\n|\r/); if (num < arr.length) { arr[num] = txt; return arr.join('\n'); } else return this; }
String.prototype.toLabel = function() { return this.replace(/[\[\]]/g, '').replace(/_/g, ' ').toTitleCase(); }
String.prototype.toTitleCase = function() { return this.replace(/([A-Z])(\w+)/gi, function(m,p1,p2) { return p1.toUpperCase() + p2.toLowerCase(); }); }
Number.prototype.limit = function(m1, m2) {
if (m2 == null) return this > m1 ? m1 : this;
return this < m1 ? m1 : this > m2 ? m2 : this;
};
Date.prototype.fileStamp = function(filename) {
var fs = this.getFullYear()
+ ((this.getMonth()+1)+'').zeroPad(2)
+ (this.getDate()+'').zeroPad(2)
+ (this.getHours()+'').zeroPad(2)
+ (this.getMinutes()+'').zeroPad(2)
+ (this.getSeconds()+'').zeroPad(2);
if (filename !== undefined)
return filename.replace(/^(.+)(\.\w+)$/g, '$1-['+fs+']$2');
return fs;
}
/**
* 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) );
});
});
},
noSelect: function() {
return this
.attr('unselectable', 'on')
.css('user-select', 'none')
.on('selectstart', false);
},
unblock: function(on) {
on ? this.removeClass('blocked') : this.addClass('blocked');
return this;
}
});
// The app is a singleton
window.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',
$msgbox = $('#message'),
$form = $('#config_form'),
$tooltip = $('#tooltip'),
$cfg = $('#config_text'), $adv = $('#config_adv_text'),
$config = $cfg.find('pre'), $config_adv = $adv.find('pre'),
config_file_list = [ boards_file, config_file, config_adv_file ],
config_list = [ $config, $config_adv ],
define_info = {}, // info for all defines, by name
define_list = [[],[]], // arrays with all define names
define_occur = [{},{}], // lines where defines occur in each file
define_groups = [{},{}], // similarly-named defines that group in the form
define_section = {}, // the section of each define
dependent_groups = {},
boards_list = {},
therms_list = {},
total_config_lines,
total_config_adv_lines,
hover_timer,
pulse_offset = 0;
// 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, creating fields and fieldsets as-needed
this.initConfigForm();
// Make tabs for all the fieldsets
this.makeTabsForFieldsets();
// No selection on errors
// $msgbox.noSelect();
// Make a droppable file uploader, if possible
var $uploader = $('#file-upload');
var fileUploader = new BinaryFileUploader({
element: $uploader[0],
onFileLoad: function(file) { self.handleFileLoad(file, $uploader); }
});
if (!fileUploader.hasFileUploaderSupport())
this.setMessage("Your browser doesn't support the file reading API.", 'error');
// Make the disclosure items work
$('.disclose').click(function(){
var $dis = $(this), $pre = $dis.nextAll('pre:first');
var didAnim = function() {$dis.toggleClass('closed almost');};
$dis.addClass('almost').hasClass('closed')
? $pre.slideDown(200, didAnim)
: $pre.slideUp(200, didAnim);
});
// Adjust the form layout for the window size
$(window).bind('scroll resize', this.adjustFormLayout).trigger('resize');
// Read boards.h, Configuration.h, Configuration_adv.h
var ajax_count = 0, success_count = 0;
var loaded_items = {};
var isGithub = config.type == 'github';
var rateLimit = 0;
$.each(config_file_list, function(i,fname){
var url = config_path(fname);
$.ajax({
url: url,
type: 'GET',
dataType: isGithub ? 'jsonp' : undefined,
async: true,
cache: false,
error: function(req, stat, err) {
self.log(req, 1);
if (req.status == 200) {
if (typeof req.responseText === 'string') {
var txt = req.responseText;
loaded_items[fname] = function(){ self.fileLoaded(fname, txt, true); };
success_count++;
// self.setMessage('The request for "'+fname+'" may be malformed.', 'error');
}
}
else {
self.setRequestError(req.status ? req.status : '(Access-Control-Allow-Origin?)', url);
}
},
success: function(txt) {
if (isGithub && typeof txt.meta.status !== undefined && txt.meta.status != 200) {
self.setRequestError(txt.meta.status, url);
}
else {
// self.log(txt, 1);
if (isGithub) {
rateLimit = {
quota: 1 * txt.meta['X-RateLimit-Remaining'],
timeLeft: Math.floor(txt.meta['X-RateLimit-Reset'] - Date.now()/1000),
};
}
loaded_items[fname] = function(){ self.fileLoaded(fname, isGithub ? decodeURIComponent(escape(atob(txt.data.content))) : txt, true); };
success_count++;
}
},
complete: function() {
ajax_count++;
if (ajax_count >= config_file_list.length) {
// If not all files loaded set an error
if (success_count < ajax_count)
self.setMessage('Unable to load configurations. Try the upload field.', 'error');
// Is the request near the rate limit? Set an error.
var r;
if (r = rateLimit) {
if (r.quota < 20) {
self.setMessage(
'Approaching request limit (' +
r.quota + ' remaining.' +
' Reset in ' + Math.floor(r.timeLeft/60) + ':' + (r.timeLeft%60+'').zeroPad(2) + ')',
'warning'
);
}
}
// Post-process all the loaded files
$.each(config_file_list, function(){ if (loaded_items[this]) loaded_items[this](); });
}
}
});
});
},
/**
* Make a download link visible and active
*/
activateDownloadLink: function(cindex) {
var filename = config_file_list[cindex+1];
var $c = config_list[cindex], txt = $c.text();
$c.prevAll('.download:first')
.unbind('mouseover click')
.mouseover(function() {
var d = new Date(), fn = d.fileStamp(filename);
$(this).attr({ download:fn, href:'download:'+fn, title:'download:'+fn });
})
.click(function(){
var $button = $(this);
$(this).attr({ href:'data:text/plain;charset=utf-8,' + encodeURIComponent($c.text()) });
setTimeout(function(){
$button.attr({ href:$button.attr('title') });
}, 100);
return true;
})
.css({visibility:'visible'});
},
/**
* Make the download-all link visible and active
*/
activateDownloadAllLink: function() {
$('.download-all')
.unbind('mouseover click')
.mouseover(function() {
var d = new Date(), fn = d.fileStamp('MarlinConfig.zip');
$(this).attr({ download:fn, href:'download:'+fn, title:'download:'+fn });
})
.click(function(){
var $button = $(this);
var zip = new JSZip();
for (var e in [0,1]) zip.file(config_file_list[e+1], config_list[e].text());
var zipped = zip.generate({type:'blob'});
saveAs(zipped, $button.attr('download'));
return false;
})
.css({visibility:'visible'});
},
/**
* Init the boards array from a boards.h file
*/
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:\n" + Object.keys(boards_list).join('\n'), 3);
has_boards = true;
},
/**
* Init the thermistors array from the Configuration.h file
*/
initThermistorList: 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];
}
},
/**
* Get all the unique define names, building lists that will be used
* when gathering info about each define.
*
* define_list[c][j] : Define names in each config (in order of occurrence)
* define_section[name] : Section where define should appear in the form
* define_occur[c][name][i] : Lines in each config where the same define occurs
* .cindex Config file index
* .lineNum Line number of the occurrence
* .line The occurrence line
*/
initDefineList: function(cindex) {
var section = 'hidden',
leave_out_defines = ['CONFIGURATION_H', 'CONFIGURATION_ADV_H'],
define_sect = {},
occ_list = {},
txt = config_list[cindex].text(),
r, findDef = new RegExp('^.*(@section|#define)[ \\t]+(\\w+).*$', 'gm');
while((r = findDef.exec(txt)) !== null) {
var name = r[2];
if (r[1] == '@section') {
section = name;
}
else if ($.inArray(name, leave_out_defines) < 0) {
var lineNum = txt.lineCount(r.index),
inst = { cindex:cindex, lineNum:lineNum, line:r[0] },
in_sect = (name in define_sect);
if (!in_sect) {
occ_list[name] = [ inst ];
}
if (!(name in define_section) && !in_sect) {
define_sect[name] = section; // new first-time define
}
else {
occ_list[name].push(inst);
}
}
}
define_list[cindex] = Object.keys(define_sect);
define_occur[cindex] = occ_list;
$.extend(define_section, define_sect);
this.log(define_list[cindex], 2);
this.log(occ_list, 2);
this.log(define_sect, 2);
},
/**
* Find the defines in one of the configs that are just variants.
* Group them together for form-building and other uses.
*
* define_groups[c][name]
* .pattern regexp matching items in the group
* .title title substitution
* .count number of items in the group
*/
refreshDefineGroups: function(cindex) {
var findDef = /^(|.*_)(([XYZE](MAX|MIN))|(E[0-3]|[XYZE01234])|MAX|MIN|(bed)?K[pid]|HOTEND|HPB|JAPAN|WESTERN|CYRILLIC|LEFT|RIGHT|BACK|FRONT|[XYZ]_POINT)(_.*|)$/i;
var match_prev, patt, title, nameList, groups = {}, match_section;
$.each(define_list[cindex], function(i, name) {
if (match_prev) {
if (match_prev.exec(name) && define_section[name] == match_section) {
nameList.push(name);
}
else {
if (nameList.length > 1) {
$.each(nameList, function(i,n){
groups[n] = {
pattern: patt,
title: title,
count: nameList.length
};
});
}
match_prev = null;
}
}
if (!match_prev) {
var r = findDef.exec(name);
if (r != null) {
title = '';
switch(r[2].toUpperCase()) {
case '0':
patt = '([0123])';
title = 'N';
break;
case 'X':
patt = '([XYZE])';
title = 'AXIS';
break;
case 'E0':
patt = 'E([0-3])';
title = 'E';
break;
case 'BEDKP':
patt = 'bed(K[pid])';
title = 'BED_PID';
break;
case 'KP':
patt = '(K[pid])';
title = 'PID';
break;
case 'LEFT':
case 'RIGHT':
case 'BACK':
case 'FRONT':
patt = '([LRBF])(EFT|IGHT|ACK|RONT)';
break;
case 'MAX':
case 'MIN':
patt = '(MAX|MIN)';
break;
case 'HOTEND':
case 'HPB':
patt = '(HOTEND|HPB)';
break;
case 'JAPAN':
case 'WESTERN':
case 'CYRILLIC':
patt = '(JAPAN|WESTERN|CYRILLIC)';
break;
case 'XMIN':
case 'XMAX':
patt = '([XYZ])'+r[4];
title = 'XYZ_'+r[4];
break;
default:
patt = null;
break;
}
if (patt) {
patt = '^' + r[1] + patt + r[7] + '$';
title = r[1] + title + r[7];
match_prev = new RegExp(patt, 'i');
match_section = define_section[name];
nameList = [ name ];
}
}
}
});
define_groups[cindex] = groups;
this.log(define_groups[cindex], 2);
},
/**
* Get all conditional blocks and their line ranges
* and store them in the dependent_groups list.
*
* dependent_groups[condition][i]
*
* .cindex config file index
* .start starting line
* .end ending line
*
*/
initDependentGroups: function() {
var findBlock = /^[ \t]*#(ifn?def|if|else|endif)[ \t]*(.*)([ \t]*\/\/[^\n]+)?$/gm,
leave_out_defines = ['CONFIGURATION_H', 'CONFIGURATION_ADV_H'];
dependent_groups = {};
$.each(config_list, function(i, $v) {
var ifStack = [];
var r, txt = $v.text();
while((r = findBlock.exec(txt)) !== null) {
var lineNum = txt.lineCount(r.index);
var code = r[2].replace(/[ \t]*\/\/.*$/, '');
switch(r[1]) {
case 'if':
var code = code
.replace(/([A-Z][A-Z0-9_]+)/g, 'self.defineValue("$1")')
.replace(/defined[ \t]*\(?[ \t]*self.defineValue\(("[A-Z][A-Z0-9_]+")\)[ \t]*\)?/g, 'self.defineIsEnabled($1)');
ifStack.push(['('+code+')', lineNum]); // #if starts on next line
self.log("push if " + code, 4);
break;
case 'ifdef':
if ($.inArray(code, leave_out_defines) < 0) {
ifStack.push(['self.defineIsEnabled("' + code + '")', lineNum]);
self.log("push ifdef " + code, 4);
}
else {
ifStack.push(0);
}
break;
case 'ifndef':
if ($.inArray(code, leave_out_defines) < 0) {
ifStack.push(['!self.defineIsEnabled("' + code + '")', lineNum]);
self.log("push ifndef " + code, 4);
}
else {
ifStack.push(0);
}
break;
case 'else':
case 'endif':
var c = ifStack.pop();
if (c) {
var cond = c[0], line = c[1];
self.log("pop " + c[0], 4);
if (dependent_groups[cond] === undefined) dependent_groups[cond] = [];
dependent_groups[cond].push({cindex:i,start:line,end:lineNum});
if (r[1] == 'else') {
// Reverse the condition
cond = (cond.indexOf('!') === 0) ? cond.substr(1) : ('!'+cond);
ifStack.push([cond, lineNum]);
self.log("push " + cond, 4);
}
}
else {
if (r[1] == 'else') ifStack.push(0);
}
break;
}
}
}); // text blobs loop
},
/**
* Init all the defineInfo structures after reload
* The "enabled" field may need an update for newly-loaded dependencies
*/
initDefineInfo: function() {
$.each(define_list, function(e,def_list){
$.each(def_list, function(i, name) {
define_info[name] = self.getDefineInfo(name, e);
});
});
},
/**
* Create fields for defines in a config that have none
* Use define_groups data to group fields together
*/
createFieldsForDefines: function(cindex) {
// var n = 0;
var grouping = false, group = define_groups[cindex],
g_pattern, g_regex, g_subitem, g_section, g_class,
fail_list = [];
$.each(define_list[cindex], function(i, name) {
var section = define_section[name];
if (section != 'hidden' && !$('#'+name).length) {
var inf = define_info[name];
if (inf) {
var label_text = name, sublabel;
// Is this field in a sequence?
// Then see if it's the second or after
if (grouping) {
if (name in group && g_pattern == group[name].pattern && g_section == section) {
g_subitem = true;
sublabel = g_regex.exec(name)[1];
}
else
grouping = false;
}
// Start grouping?
if (!grouping && name in group) {
grouping = true;
g_subitem = false;
var grp = group[name];
g_section = section;
g_class = 'one_of_' + grp.count;
g_pattern = grp.pattern;
g_regex = new RegExp(g_pattern, 'i');
label_text = grp.title;
sublabel = g_regex.exec(name)[1];
}
var $ff = $('#'+section), $newfield,
avail = eval(inf.enabled);
if (!(grouping && g_subitem)) {
var $newlabel = $('<label>',{for:name,class:'added'}).text(label_text.toLabel());
$newlabel.unblock(avail);
// if (!(++n % 3))
$newlabel.addClass('newline');
$ff.append($newlabel);
}
// Multiple fields?
if (inf.type == 'list') {
for (var i=0; i<inf.size; i++) {
var fieldname = i > 0 ? name+'-'+i : name;
$newfield = $('<input>',{type:'text',size:6,maxlength:10,id:fieldname,name:fieldname,class:'subitem added',disabled:!avail}).unblock(avail);
if (grouping) $newfield.addClass(g_class);
$ff.append($newfield);
}
}
else {
// Items with options, either toggle or select
// TODO: Radio buttons for other values
if (inf.options !== undefined) {
if (inf.type == 'toggle') {
$newfield = $('<input>',{type:'checkbox'});
}
else {
// Otherwise selectable
$newfield = $('<select>');
}
// ...Options added when field initialized
}
else {
$newfield = inf.type == 'switch' ? $('<input>',{type:'checkbox'}) : $('<input>',{type:'text',size:10,maxlength:40});
}
$newfield.attr({id:name,name:name,class:'added',disabled:!avail}).unblock(avail);
if (grouping) {
$newfield.addClass(g_class);
if (sublabel) {
$ff.append($('<label>',{class:'added sublabel',for:name}).text(sublabel.toTitleCase()).unblock(avail));
}
}
// Add the new field to the form
$ff.append($newfield);
}
}
else
fail_list.push(name);
}
});
if (fail_list.length) this.log('Unable to parse:\n' + fail_list.join('\n'), 2);
},
/**
* Handle a file being dropped on the file field
*/
handleFileLoad: function(txt, $uploader) {
txt += '';
var filename = $uploader.val().replace(/.*[\/\\](.*)$/, '$1');
if ($.inArray(filename, config_file_list))
this.fileLoaded(filename, txt);
else
this.setMessage("Can't parse '"+filename+"'!");
},
/**
* Process a file after it's been successfully loaded
*/
fileLoaded: function(filename, txt, wait) {
this.log("fileLoaded:"+filename,4);
var err, cindex;
switch(filename) {
case boards_file:
this.initBoardsFromText(txt);
$('#MOTHERBOARD').html('').addOptions(boards_list);
if (has_config) this.initField('MOTHERBOARD');
break;
case config_file:
if (has_boards) {
$config.text(txt);
total_config_lines = txt.lineCount();
// this.initThermistorList(txt);
if (!wait) cindex = 0;
has_config = true;
if (has_config_adv) {
this.activateDownloadAllLink();
if (wait) cindex = 2;
}
}
else {
err = boards_file;
}
break;
case config_adv_file:
if (has_config) {
$config_adv.text(txt);
total_config_adv_lines = txt.lineCount();
if (!wait) cindex = 1;
has_config_adv = true;
if (has_config) {
this.activateDownloadAllLink();
if (wait) cindex = 2;
}
}
else {
err = config_file;
}
break;
}
// When a config file loads defines need update
if (cindex != null) this.prepareConfigData(cindex);
this.setMessage(err
? 'Please upload a "' + boards_file + '" file first!'
: '"' + filename + '" loaded successfully.', err ? 'error' : 'message'
);
},
prepareConfigData: function(cindex) {
var inds = (cindex == 2) ? [ 0, 1 ] : [ cindex ];
$.each(inds, function(i,e){
// Purge old fields from the form, clear the define list
self.purgeAddedFields(e);
// Build the define_list
self.initDefineList(e);
// TODO: Find sequential names and group them
// Allows related settings to occupy one line in the form
self.refreshDefineGroups(e);
});
// Build the dependent defines list
this.initDependentGroups(); // all config text
// Get define_info for all known defines
this.initDefineInfo(); // all config text
$.each(inds, function(i,e){
// Create new fields
self.createFieldsForDefines(e); // create new fields
// Init the fields, set values, etc
self.refreshConfigForm(e);
self.activateDownloadLink(e);
});
},
/**
* Add initial enhancements to the existing form
*/
initConfigForm: 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
$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('label');
if ($label.length) $label.attr('for',name);
});
// Get all 'switchable' class items and add a checkbox
// $form.find('.switchable').each(function(){
// $(this).after(
// $('<input>',{type:'checkbox',value:'1',class:'enabler added'})
// .prop('checked',true)
// .attr('id',this.id + '-switch')
// .change(self.handleSwitch)
// );
// });
// Add options to the popup menus
// $('#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'});
// Replace the Serial popup menu with a stepper control
/*
$('#serial_stepper').jstepper({
min: 0,
max: 3,
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'); }
});
*/
},
/**
* Make tabs to switch between fieldsets
*/
makeTabsForFieldsets: function() {
// Make tabs for the fieldsets
var $fset = $form.find('fieldset'),
$tabs = $('<ul>',{class:'tabs'}),
ind = 1;
$fset.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').html('').append($tabs);
$('<br>',{class:'clear'}).appendTo('#tabs');
$tabs.find('a:first').trigger('click');
},
/**
* Update all fields on the form after loading a configuration
*/
refreshConfigForm: function(cindex) {
/**
* Any manually-created form elements will remain
* where they are. Unknown defines (currently most)
* are added to tabs based on section
*
* Specific exceptions can be managed by applying
* classes to the associated form fields.
* Sorting and arrangement can come from an included
* Javascript file that describes the configuration
* in JSON, or using information added to the config
* files.
*
*/
// Refresh the motherboard menu with new options
$('#MOTHERBOARD').html('').addOptions(boards_list);
// Init all existing fields, getting define info for those that need it
// refreshing the options and updating their current values
$.each(define_list[cindex], function(i, name) {
if ($('#'+name).length) {
self.initField(name);
self.initFieldValue(name);
}
else
self.log(name + " is not on the page yet.", 2);
});
// Set enabled state based on dependencies
// this.enableForDependentConditions();
},
/**
* Enable / disable fields in dependent groups
* based on their dependencies.
*/
refreshDependentFields: function() {
$.each(define_list, function(e,def_list){
$.each(def_list, function(i, name) {
var inf = define_info[name];
if (inf && inf.enabled != 'true') {
var $elm = $('#'+name), ena = eval(inf.enabled);
var isEnabled = (inf.type == 'switch') || self.defineIsEnabled(name);
$('#'+name+'-switch').attr('disabled', !ena);
$elm.attr('disabled', !(ena && isEnabled)).unblock(ena);
$('label[for="'+name+'"]').unblock(ena);
}
});
});
},
/**
* Make a field responsive, tooltip its label(s), add enabler if needed
*/
initField: function(name) {
this.log("initField:"+name,4);
var $elm = $('#'+name), inf = define_info[name];
$elm[0].defineInfo = inf;
// Create a tooltip on the label if there is one
if (inf.tooltip) {
// label for the item
var $tipme = $('label[for="'+name+'"]');
if ($tipme.length) {
$tipme.unbind('mouseenter mouseleave');
$tipme.hover(
function() {
if ($('#tipson input').prop('checked')) {
var pos = $tipme.position(), px = $tipme.width()/2;
$tooltip.html(inf.tooltip)
.append('<span>')
.css({bottom:($tooltip.parent().outerHeight()-pos.top+10)+'px',left:(pos.left+px)+'px'})
.show();
if (hover_timer) {
clearTimeout(hover_timer);
hover_timer = null;
}
}
},
function() {
hover_timer = setTimeout(function(){
hover_timer = null;
$tooltip.fadeOut(400);
}, 400);
}
);
}
}
// Make the element(s) respond to events
if (inf.type == 'list') {
// Multiple fields need to respond
for (var i=0; i<inf.size; i++) {
if (i > 0) $elm = $('#'+name+'-'+i);
$elm.unbind('input');
$elm.on('input', this.handleChange);
}
}
else {
var elmtype = $elm.attr('type');
// Set options on single fields if there are any
if (inf.options !== undefined && elmtype === undefined)
$elm.html('').addOptions(inf.options);
$elm.unbind('input change');
$elm.on(elmtype == 'text' ? 'input' : 'change', this.handleChange);
}
// Add an enabler checkbox if it needs one
if (inf.switchable && $('#'+name+'-switch').length == 0) {
// $elm = the last element added
$elm.after(
$('<input>',{type:'checkbox',value:'1',class:'enabler added'})
.prop('checked',self.defineIsEnabled(name))
.attr({id: name+'-switch'})
.change(self.handleSwitch)
);
}
},
/**
* Handle any value field being changed
* this = the field
*/
handleChange: function() {
self.updateDefineFromField(this.id);
self.refreshDependentFields();
},
/**
* Handle a switch checkbox being changed
* this = the switch checkbox
*/
handleSwitch: function() {
var $elm = $(this),
name = $elm[0].id.replace(/-.+/,''),
inf = define_info[name],
on = $elm.prop('checked') || false;
self.setDefineEnabled(name, on);
if (inf.type == 'list') {
// Multiple fields?
for (var i=0; i<inf.size; i++) {
$('#'+name+(i?'-'+i:'')).attr('disabled', !on);
}
}
else {
$elm.prev().attr('disabled', !on);
}
},
/**
* Get the current value of a #define
*/
defineValue: function(name) {
this.log('defineValue:'+name,4);
var inf = define_info[name];
if (inf == null) return 'n/a';
var r = inf.regex.exec(inf.line), val = r[inf.val_i];
this.log(r,2);
return (inf.type == 'switch') ? (val === undefined || val.trim() != '//') : val;
},
/**
* Get the current enabled state of a #define
*/
defineIsEnabled: function(name) {
this.log('defineIsEnabled:'+name,4);
var inf = define_info[name];
if (inf == null) return false;
var r = inf.regex.exec(inf.line);
this.log(r,2);
var on = r[1] != null ? r[1].trim() != '//' : true;
this.log(name + ' = ' + on, 2);
return on;
},
/**
* Set a #define enabled or disabled by altering the config text
*/
setDefineEnabled: function(name, val) {
this.log('setDefineEnabled:'+name,4);
var inf = define_info[name];
if (inf) {
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
this.setDefineLine(name, newline);
}
},
/**
* Update a #define (from the form) by altering the config text
*/
updateDefineFromField: function(name) {
this.log('updateDefineFromField:'+name,4);
// Drop the suffix on sub-fields
name = name.replace(/-\d+$/, '');
var $elm = $('#'+name), inf = define_info[name];
if (inf == null) return;
var isCheck = $elm.attr('type') == 'checkbox',
val = isCheck ? $elm.prop('checked') : $elm.val().trim();
var newline;
switch(inf.type) {
case 'switch':
var slash = val ? '' : '//';
newline = inf.line.replace(inf.repl, '$1'+slash+'$3');
break;
case 'list':
case 'quoted':
case 'plain':
if (isCheck) this.setMessage(name + ' should not be a checkbox!', 'error');
case 'toggle':
if (isCheck) {
val = val ? inf.options[1] : inf.options[0];
}
else {
if (inf.type == 'list')
for (var i=1; i<inf.size; i++) val += ', ' + $('#'+name+'-'+i).val().trim();
}
newline = inf.line.replace(inf.repl, '$1'+(''+val).replace('$','\\$')+'$3');
break;
}
this.setDefineLine(name, newline);
},
/**
* Set the define's line in the text to a new line,
* then update, highlight, and scroll to the line
*/
setDefineLine: function(name, newline) {
this.log('setDefineLine:'+name+'\n'+newline,4);
var inf = define_info[name];
var $c = $(inf.field), txt = $c.text();
var hilite_token = '[HIGHLIGHTER-TOKEN]';
txt = txt.replaceLine(inf.lineNum, hilite_token + newline); // for override line and lineNum would be changed
inf.line = newline;
// Convert txt into HTML before storing
var html = txt.toHTML().replace(hilite_token, '<span></span>');
// Set the final text including the highlighter
$c.html(html);
// Scroll to reveal the define
if ($c.is(':visible')) this.scrollToDefine(name);
},
/**
* Scroll a pre box to reveal a #define
*/
scrollToDefine: function(name, always) {
this.log('scrollToDefine:'+name,4);
var inf = define_info[name], $c = $(inf.field);
// Scroll to the altered text if it isn't visible
var halfHeight = $c.height()/2, scrollHeight = $c.prop('scrollHeight'),
lineHeight = scrollHeight/[total_config_lines, total_config_adv_lines][inf.cindex],
textScrollY = (inf.lineNum * lineHeight - halfHeight).limit(0, scrollHeight - 1);
if (always || Math.abs($c.prop('scrollTop') - textScrollY) > halfHeight) {
$c.find('span').height(lineHeight);
$c.animate({ scrollTop: textScrollY });
}
},
/**
* Set a form field to the current #define value in the config text
*/
initFieldValue: function(name) {
var $elm = $('#'+name), inf = define_info[name],
val = this.defineValue(name);
this.log('initFieldValue:' + name + ' to ' + val, 2);
// If the item is switchable then set enabled state too
var $cb = $('#'+name+'-switch'), avail = eval(inf.enabled), on = true;
if ($cb.length) {
on = self.defineIsEnabled(name);
$cb.prop('checked', on);
}
if (inf.type == 'list') {
$.each(val.split(','),function(i,v){
var $e = i > 0 ? $('#'+name+'-'+i) : $elm;
$e.val(v.trim());
$e.attr('disabled', !(on && avail)).unblock(avail);
});
}
else {
if (inf.type == 'toggle') val = val == inf.options[1];
$elm.attr('type') == 'checkbox' ? $elm.prop('checked', val) : $elm.val(''+val);
$elm.attr('disabled', !(on && avail)).unblock(avail); // enable/disable the form field (could also dim it)
}
$('label[for="'+name+'"]').unblock(avail);
},
/**
* Purge added fields and all their define info
*/
purgeAddedFields: function(cindex) {
$.each(define_list[cindex], function(i, name){
$('#'+name + ",[id^='"+name+"-'],label[for='"+name+"']").filter('.added').remove();
});
define_list[cindex] = [];
},
/**
* Get information about a #define from configuration file text:
*
* - Pre-examine the #define for its prefix, value position, suffix, etc.
* - Construct RegExp's for the #define to find and replace values.
* - Store the existing #define line as a fast key to finding it later.
* - Determine the line number of the #define
* - Gather nearby comments to be used as tooltips.
* - Look for JSON in nearby comments for use as select options.
*
* define_info[name]
* .type type of define: switch, list, quoted, plain, or toggle
* .size the number of items in a "list" type
* .options select options, if any
* .cindex config index
* .field pre containing the config text (config_list[cindex][0])
* .line the full line from the config text
* .pre any text preceding #define
* .define the "#define NAME" text (may have leading spaces)
* .post the text following the "#define NAME val" part
* .regex regexp to get the value from the line
* .repl regexp to replace the value in the line
* .val_i the value's index in the .regex result
*/
getDefineInfo: function(name, cindex) {
if (cindex === undefined) cindex = 0;
this.log('getDefineInfo:'+name,4);
var $c = config_list[cindex], txt = $c.text(),
info = { type:0, cindex:cindex, field:$c[0], val_i:2 }, post;
// a switch line with no value
var find = new RegExp('^([ \\t]*//)?([ \\t]*#define[ \\t]+' + name + ')([ \\t]*(/[*/].*)?)$', 'm'),
r = find.exec(txt);
if (r !== null) {
post = r[3] == null ? '' : r[3];
$.extend(info, {
type: 'switch',
val_i: 1,
regex: new RegExp('([ \\t]*//)?([ \\t]*' + r[2].regEsc() + post.regEsc() + ')', 'm'),
repl: new RegExp('([ \\t]*)(\/\/)?([ \\t]*' + r[2].regEsc() + post.regEsc() + ')', 'm')
});
}
else {
// a define with curly braces
find = new RegExp('^(.*//)?(.*#define[ \\t]+' + name + '[ \\t]+)(\{[^\}]*\})([ \\t]*(/[*/].*)?)$', 'm');
r = find.exec(txt);
if (r !== null) {
post = r[4] == null ? '' : r[4];
$.extend(info, {
type: 'list',
size: r[3].split(',').length,
regex: new RegExp('([ \\t]*//)?[ \\t]*' + r[2].regEsc() + '\{([^\}]*)\}' + post.regEsc(), 'm'),
repl: new RegExp('(([ \\t]*//)?[ \\t]*' + r[2].regEsc() + '\{)[^\}]*(\}' + post.regEsc() + ')', 'm')
});
}
else {
// a define with quotes
find = new RegExp('^(.*//)?(.*#define[ \\t]+' + name + '[ \\t]+)("[^"]*")([ \\t]*(/[*/].*)?)$', 'm');
r = find.exec(txt);
if (r !== null) {
post = r[4] == null ? '' : r[4];
$.extend(info, {
type: 'quoted',
regex: new RegExp('([ \\t]*//)?[ \\t]*' + r[2].regEsc() + '"([^"]*)"' + post.regEsc(), 'm'),
repl: new RegExp('(([ \\t]*//)?[ \\t]*' + r[2].regEsc() + '")[^"]*("' + post.regEsc() + ')', 'm')
});
}
else {
// a define with no quotes
find = new RegExp('^([ \\t]*//)?([ \\t]*#define[ \\t]+' + name + '[ \\t]+)(\\S*)([ \\t]*(/[*/].*)?)$', 'm');
r = find.exec(txt);
if (r !== null) {
post = r[4] == null ? '' : r[4];
$.extend(info, {
type: 'plain',
regex: new RegExp('([ \\t]*//)?[ \\t]*' + r[2].regEsc() + '(\\S*)' + post.regEsc(), 'm'),
repl: new RegExp('(([ \\t]*//)?[ \\t]*' + r[2].regEsc() + ')\\S*(' + post.regEsc() + ')', 'm')
});
if (r[3].match(/false|true/)) {
info.type = 'toggle';
info.options = ['false','true'];
}
}
}
}
}
// Success?
if (info.type) {
$.extend(info, {
line: r[0],
pre: r[1] == null ? '' : r[1].replace('//',''),
define: r[2],
post: post
});
// Get the end-of-line comment, if there is one
var tooltip = '', eoltip = '';
find = new RegExp('.*#define[ \\t].*/[/*]+[ \\t]*(.*)');
if (info.line.search(find) >= 0)
eoltip = tooltip = info.line.replace(find, '$1');
// Get all the comments immediately before the item, also include #define lines preceding it
var s;
// find = new RegExp('(([ \\t]*(//|#)[^\n]+\n){1,4})' + info.line.regEsc(), 'g');
find = new RegExp('(([ \\t]*//+[^\n]+\n)+([ \\t]*(//)?#define[^\n]+\n)*)' + info.line.regEsc(), 'g');
if (r = find.exec(txt)) {
var temp = [], tips = [];
// Find each line in forward order, store in reverse
find = new RegExp('^[ \\t]*//+[ \\t]*(.*)[ \\t]*$', 'gm');
while((s = find.exec(r[1])) !== null) temp.unshift(s[1]);
this.log(name+":\n"+temp.join('\n'), 2);
// Go through the reversed lines and add comment lines on
$.each(temp, function(i,v) {
// @ annotation breaks the comment chain
if (v.match(/^[ \\t]*\/\/+[ \\t]*@/)) return false;
// A #define breaks the chain, after a good tip
if (v.match(/^[ \\t]*(\/\/+)?[ \\t]*#define/)) return (tips.length < 1);
// Skip unwanted lines
if (v.match(/^[ \\t]*(={5,}|#define[ \\t]+.*)/g)) return true;
tips.unshift(v);
});
// Build the final tooltip, extract embedded options
$.each(tips, function(i,tip) {
// if (tip.match(/^#define[ \\t]/) != null) tooltip = eoltip;
// JSON data? Save as select options
if (!info.options && tip.match(/:[\[{]/) != null) {
// TODO
// :[1-6] = value limits
var o; eval('o=' + tip.substr(1));
info.options = o;
if (Object.prototype.toString.call(o) == "[object Array]" && o.length == 2 && !eval(''+o[0]))
info.type = 'toggle';
}
else {
// Other lines added to the tooltip
tooltip += ' ' + tip + '\n';
}
});
// Add .tooltip and .lineNum properties to the info
find = new RegExp('^'+name); // Strip the name from the tooltip
var lineNum = this.getLineNumberOfText(info.line, txt);
// See if this define is enabled conditionally
var enable_cond = '';
$.each(dependent_groups, function(cond,dat){
$.each(dat, function(i,o){
if (o.cindex == cindex && lineNum > o.start && lineNum < o.end) {
if (enable_cond != '') enable_cond += ' && ';
enable_cond += '(' + cond + ')';
}
});
});
$.extend(info, {
tooltip: '<strong>'+name+'</strong> '+tooltip.trim().replace(find,'').toHTML(),
lineNum: lineNum,
switchable: (info.type != 'switch' && info.line.match(/^[ \t]*\/\//)) || false, // Disabled? Mark as "switchable"
enabled: enable_cond ? enable_cond : 'true'
});
} // found comments
} // if info.type
else
info = null;
this.log(info, 2);
return info;
},
/**
* Count the number of lines before a match, return -1 on fail
*/
getLineNumberOfText: function(line, txt) {
var pos = txt.indexOf(line);
return (pos < 0) ? pos : txt.lineCount(pos);
},
/**
* Add a temporary message to the page
*/
setMessage: function(msg,type) {
if (msg) {
if (type === undefined) type = 'message';
var $err = $('<p class="'+type+'">'+msg+'<span>x</span></p>').appendTo($msgbox), err = $err[0];
var baseColor = $err.css('color').replace(/rgba?\(([^),]+,[^),]+,[^),]+).*/, 'rgba($1,');
err.pulse_offset = (pulse_offset += 200);
err.startTime = Date.now() + pulse_offset;
err.pulser = setInterval(function(){
var pulse_time = Date.now() + err.pulse_offset;
var opac = 0.5+Math.sin(pulse_time/200)*0.4;
$err.css({color:baseColor+(opac)+')'});
if (pulse_time - err.startTime > 2500 && opac > 0.899) {
clearInterval(err.pulser);
}
}, 50);
$err.click(function(e) {
$(this).remove();
self.adjustFormLayout();
return false;
}).css({cursor:'pointer'});
}
else {
$msgbox.find('p.error, p.warning').each(function() {
if (this.pulser !== undefined && this.pulser)
clearInterval(this.pulser);
$(this).remove();
});
}
self.adjustFormLayout();
},
adjustFormLayout: function() {
var wtop = $(window).scrollTop(),
ctop = $cfg.offset().top,
thresh = $form.offset().top+100;
if (ctop < thresh) {
var maxhi = $form.height(); // pad plus heights of config boxes can't be more than this
var pad = wtop > ctop ? wtop-ctop : 0; // pad the top box to stay in view
var innerpad = Math.ceil($cfg.height() - $cfg.find('pre').height());
// height to use for the inner boxes
var hi = ($(window).height() - ($cfg.offset().top - pad) + wtop - innerpad)/2;
if (hi < 200) hi = 200;
$cfg.css({ paddingTop: pad });
var $pre = $('pre.config');
$pre.css({ height: Math.floor(hi) - $pre.position().top });
}
else {
$cfg.css({ paddingTop: wtop > ctop ? wtop-ctop : 0, height: '' });
}
},
setRequestError: function(stat, path) {
self.setMessage('Error '+stat+' ' + path.replace(/^(https:\/\/[^\/]+\/)?.+(\/[^\/]+)$/, '$1...$2'), 'error');
},
log: function(o,l) {
if (l === undefined) l = 0;
if (this.logging>=l*1) console.log(o);
},
logOnce: function(o) {
if (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
window.configuratorApp.init();
});