Block creation

Blockly is a ROS package that provides web-based visualization and block programming tools for robots and drones.

This guide shows how to create different kind of Blocks in Robot_Blockly.

Let's try to explain how Blocks are executed as simple as possible.

When we launch a workspace with different Blocks, we have to be aware that each block has its own code attached. That source code is merged into a single file when it is going to be executed.

As only one file is being executed, we can only initialize one node, which is created in the backend ('blockly_node').

The created file is executed via Python3.

Notice that Blockly is a subrepository of Robot_Blockly, so be careful when pushing changes.

In order to be able to modify the scripts without recompiling Blockly, which creates new compressed javascript files, scripts are directly loaded to javascript from python files. The resulting code structure is the following:

cd robot_blockly/frontend/blockly

Inside the Blockly subrepository we find: blocks/ generators/ Compressed files Other stuff

blocks/ is where the shape of the blocks is created. You will find an useful tool to create blocks here.

generators/ is where the code to be executed is linkd to each block. Inside generators we find the python/ folder, where the javascript code for each block is located. This JS files load input/output variables from the website and then load the python file located inside scripts/.

Once we create a new block we have to add if to blockly.html, which is located in /robot_blockly/frontend/pages/ . Remember that this file is not from the same repository.

To create a block we have to update or create the following files:

  1. robot_blockly/frontend/pages/blockly.html
  2. robot_blockly/frontend/blockly/blocks/FILE.js
  3. robot_blockly/frontend/blockly/generators/python/FILE.js
  4. /.../generators/python/scripts/

Note: All the references to the same block must be named the same way.

The final steps are: Recompile blockly if changes is javascript files have been made.

cd robot_blockly/frontend/blockly

Recompile robot_blockly ros package.

cd ~my_workspace
catkin_make_isolated --pkg robot_blockly --install

There are 3 types of blocks depending on the input/output. Here you will find a simple example for each of them. These are real examples with code from Erle-Brain blocks. You can check the full repository here.

Javascript file

cd /.../blockly/generators/python/erle-brain.js

Python file

cd /.../blockly/generators/python/scripts/brain/

Simply read the file from the source.

JS file example

Blockly.Python['calibrate_imu'] = function(block) {

    var code = "";
    code += Blockly.readPythonFile("../blockly/generators/python/scripts/brain/");
    return code;


Save the input variable, then add it to the 'code' string before reading the python file. You can access this variable in the script as if it was created there.

JS file example

Blockly.Python['turn_on_blue_led'] = function(block) {

    var blue_led = block.getFieldValue('BLUE_LED');

    var code = "";
    code += "blue_led = \"" + blue_led.toString() + "\"\n";
    code += Blockly.readPythonFile("../blockly/generators/python/scripts/brain/");
    return code;


Create a variable to save the name of the output variable. After reading the script simply assing that variable the value you want from the script.

JS file example

Blockly.Python['get_laser'] = function(block) {

    var varName = Blockly.Python.valueToCode(block, 'laser', Blockly.Python.ORDER_ATOMIC);

    var code = "";
    code += Blockly.readPythonFile("../blockly/generators/python/scripts/brain/");
    return code + varName + " = msg_laser.range\n"


blockly comes preinstalled in Erle-Brain 2.0. Acquire this artificial brain for making robots and drones here