Blockly create new block

Goal: Create block that can be used to send HTTP Post Request to a server to position an RCServo

In: Server address, required position 0-180 degrees

Out:

  • HTTP POST request with URL: /192.168.1.105/api/rcservo/position/n

 


Install Blockly:

  • SVN and copy to local system
  • Delete
    • from root:
      • de_compressed.js
      • zh_tw_compressed
      • python_compressed.js
      • tests/
      • demos/
      • i18n/
    • from language:
      • de
      • vi
      • zh_tw

 


The Block

https://code.google.com/p/blockly/wiki/DefiningBlocks

Using:

In http://blockly-demo.appspot.com/static/apps/blockfactory/index.html

 

* Create block

    * Copy generated language code

In blockly /language/common/

* Create new pnp.js using any existing one as a model

    * edited Author etc

    * Past above as only content

The Code

https://code.google.com/p/blockly/wiki/GeneratingCode

In blockly /generators/javascript/

*  Create new pnp.js

    * Add Blockly.JavaScript = Blockly.Generator.get('JavaScript');

    * Copy template from Block Generator

Editor blocks:

in blockly /apps/code/en/html:

<script type="text/javascript" src="../../language/common/pnp.js"></script>

<script type="text/javascript" src="../../generators/javascript/pnp.js"></script>

in blockly /apps/code/en/html:

catPNP: "PlugAndProgram"

 


20130731 backup before replacing blockly with latest

 

language:

/**
 * Visual Blocks Language
 *
 * PlugAndProgram connectivity blocks
 */

/**
 * @fileoverview PlugAndProgram blocks for Blockly.
 * @author Lindsay
 */
'use strict';

Blockly.Language.rcservo_position = {
  category: 'Control',
  helpUrl: 'http://www.example.com/',
  init: function() {
    this.setColour(330);
    this.appendValueInput("RCServo")
        .setCheck("Number")
        .appendTitle("Servo 1-8");
    this.appendValueInput("Degrees")
        .setCheck("Number")
        .appendTitle("Degrees 0-180");
    this.setTooltip('');
  }
};

Generator:

/**
 * @fileoverview Generating JavaScript for PNP blocks.
 * @author Lindsay
 */

 'use strict';

Blockly.JavaScript.variables = {};

Blockly.JavaScript.rcservo_position = function() {
  var value_rcservo = Blockly.JavaScript.valueToCode(this, 'RCServo', Blockly.JavaScript.ORDER_ATOMIC);
  var value_degrees = Blockly.JavaScript.valueToCode(this, 'Degrees', Blockly.JavaScript.ORDER_ATOMIC);
  // TODO: Assemble JavaScript into code variable.
  var code = 'xmlhttp.open("POST","/rcservo/' +  value_rcservo + '/required/' + value_degrees + '",true); xmlhttp.send();'
  return code;
};

 


For standard toolbox xml, copy from /apps/code/generated/en.js and add our own category to that


Hmm gonna need a hard delay function (**Javascript heresy alert**)

http://www.phpied.com/sleep-in-javascript/

function sleep(milliseconds) {
  var start = new Date().getTime();
  for (var i = 0; i < 1e7; i++) {
    if ((new Date().getTime() - start) > milliseconds){
      break;
    }
  }
}

 


xxx