MarlinFirmware/Marlin/configurator/js/configurator.js

/**
 * 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();

});