A personal repository of random information in compensation for a fatigued biological computer
Breaded IT » HTML CSS JS 2013 » 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:
Install Blockly:
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
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