Block Creation - Overview¶
By now you have an idea that blocks
are the fundamental elements in this drag and drop Blockly sofware. We will discuss how to create new blocks and/or to edit the existing ones.
This guide is adapted from Erle Robotics documentation on Block Creation and we will focus on the block creation pertaining to TurtleBot3’s functionalities.
Understanding the file structure¶
Code changes or development typically happens inside the blockly_ws/src/ folder.
There are four different files one should edit to create a new block.
- turtlebot3_blockly/frontend/blockly/generators/python/scripts/turtlebot3/example.py
- turtlebot3_blockly/frontend/blockly/generators/python/customName.js
- turtlebot3_blockly/frontend/blockly/blocks/customName.js
- turtlebot3_blockly/frontend/pages/blockly.html
A detailed description of the contents of these four files, in a particular order will help in creating or editing a block.
Note
The filenames with the .js
extension must be the same.
Let’s take a look at the blockly/ directory
$ cd turtlebot3_blockly/frontend/blockly/
Note
blockly
was one of the submodules that we cloned during the software setup.
The directories blocks/ and generators/ contain a few files that we must edit. Each block that you see on the Blockly web interface has its own python script that provides the block’s functionality.
The Python script¶
Let’s look into the generators/python/scripts/turtlebot3/ directory.
$ cd generators/python/scripts/turtlebot3/
This directory should contain a few python scripts already.
Move Forward is a custom block that moves the TurtleBot3 forward in one of three speed modes - SLOW, NORMAL and FAST. A python script called move_forward.py
shown below is the backend code for this block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | import rospy, sys
import time
from geometry_msgs.msg import Twist
pub = rospy.Publisher('cmd_vel', Twist, queue_size=10)
#rospy.init_node('circle_mode', anonymous=True)
rate = rospy.Rate(10) # 10Hz
twist = Twist()
start = time.time()
flag=True #time flag
# Angular velocity = linear velocity / radius
speed=dropdown_speed # SLOW, NORMAL, FAST
twist.linear.z = 0.00
# CLOCKWISE rotation
if speed =='SLOW':
twist.linear.y = 0.05
twist.linear.x = 0.05
elif speed =='NORMAL':
twist.linear.y = 0.25
twist.linear.x = 0.25
elif speed == 'FAST':
twist.linear.y = 0.75
twist.linear.x = 0.75
while not rospy.is_shutdown() and flag:
sample_time=time.time()
if ((sample_time - start) > 3):
flag=False
pub.publish(twist)
twist = Twist()
pub.publish(twist)
rate.sleep()
|
The Javascript (Block functionality)¶
The Blockly web interface needs a javascript file that can link the python script of our custom block and to describe the fields of the block. For instance, SLOW, NORMAL and FAST are one of the fields of a block.
$ cd ~/turtlebot3_blockly/frontend/blockly/generators/python/dabit-turtlebot3.js
Once the dabit-turtlebot3.js
file opens, look for the particular code section written to link the move_forward block. It should look something similar to this image below.
The Javascript (Look and feel of the block)¶
In addition to the previous dabit-turtlebot3.js
file there is one more with the same name inside the blocks/ directory. Here we describe the look and feel of the block along with few other features - for instance, whether the block connects to any previous or future block(s).
$ cd ~/turtlebot3_blockly/frontend/blockly/blocks/dabit-turtlebot3.js
The HTML¶
Update the blockly.html
file to reflect the changes of our custom block in the Blockly web interface.
The <category>
tag contains the block details and below is an image that shows the contents of it.
Now that you have an idea of what files to edit, let’s look at the specifics of a block creation in the next page.