blockly

Blockly

Blockly is the visual editor component that we will use to create the javascript code generation as the user drags and drops the blocks on the workspace.

You can learn more about blockly here

Using the Block Factory we can design our custom blocks and create stubbed code for the block definition and the code generation definition:

https://blockly-demo.appspot.com/static/demos/blockfactory/index.html

You will want to watch this instructional screencast on how to use the block factory, it is not that hard, but a screencast makes it easy to convey how to do it very quickly.

Once you have the design you like:

You will want to create a new block in the blocks directory. This block will need to be a nodejs module. The module will take Blockly as an argument.

module.exports = function (Blockly) {

}

Then you will be able to copy and paste the language code and generator stub to paste in the new block file.

module.exports = function (Blockly) {
  Blockly.Blocks['math_foo'] = {
    init: function() {
      this.setTooltip('');
      this.setHelpUrl('http://www.example.com/');
    }
  };

  Blockly.JavaScript['math_foo'] = function(block) {
    // TODO: Assemble JavaScript into code variable.
    var code = '...;\n';
    return code;
  };
}