Visual programming in JupyterLab with Blockly

2022-07-29T13:12:00+00:00

Block-based programming has become ubiquitous in school curricula for early computer science education. It is an excellent means to teach basic programming concepts without having to deal with the specific syntax of a text-based programming language.

When moving from block-based programming to a more classical language like Python, students often have to switch to a completely new environment. In order to provide a smooth ramp of complexity for learners, we designed a JupyterLab extension for Blockly so that Jupyter can be used from the very first steps of their learning journey. We also used Blockly’s code generation feature to create a more integrated experience with Jupyter.

But what exactly is Blockly?

The JupyterLab-Blockly extension, running a simple loop, and the corresponding Python code in a cell.

Blockly is an open source library designed by Google to make coding easier and more accessible through block-based visual programming. It uses interlocking graphical blocks to represent coding concepts, while giving the user full creative freedom, it removes all language specific syntax requirements.

Getting started: installing the Blockly extension

To install the extension, you just need to execute the following command:

mamba install -c conda-forge jupyterlab-blockly

Once installed, you can easily open a Blockly editor directly from the launcher, and start experimenting!

Features

The UI is made primarily of the toolbox located on the left side and the canvas where you can drag and drop the blocks you want to use in your code. When you are ready, just click the run button and see how the syntactically correct converted code appears on the bottom part of your screen in the programming language of your choice along with the output!

Short demo for the JupyterLab-Blockly extension

The extension is also prepared to adapt to all your needs. The workspace is ready to generate the blocks using your selected JupyterLab kernel and modify its colors based on your individual theme, whether it’s dark, light or personalized.

JupyterLab-Blockly integrates smoothly with the rest of the Jupyter stack: by using Jupyter kernels to execute the generated code, by reusing the JupyterLab code cell component to display the generated code, etc.

In doing so, JupyterLab-Blockly remains consistent with the rest of the UI (consistent syntax highlighting, theming, and life cycle of Jupyter kernels).

Robotics education

On top of JupyterLab-Blockly, we also built another extension dedicated to operating robots with the help of visual programming — more specifically, we created a toolbox which includes the blocks necessary to control the Niryo One robot. Using ROS can be a time consuming task, but the pre-built visual blocks make it easier to experiment and faster to produce a prototype for any project you have in mind.

To install this extension you need to execute the following commands:

mamba install -c conda-forge jupyterlab-niryo-one

Then, all you need to do is switch from the ‘default’ toolbox to the ‘niryo’ one, and you will immediately gain access to forty-two new blocks, so if you have access to one of these robots, give it a try!

Short demo for the JupyterLab-NiryoOne extension

Both extensions can be found on GitHub. The JupyterLab-Blockly extension is ready to be used as a base for other projects; you can register new blocks, toolboxes and generators. Taking the JupyterLab-Niryo-One extension as an example, feel free to experiment on your own!

Controlling the Niryo-one robot with the JupyterLab-blockly extension.

You can also try out the JupyterLab-Blockly extension now, directly from your browser, using JupyterLite! Just click on the link below.

About the authors

Denisa Checiu is a Robotics working student at QuantStack. She is also currently pursuing her bachelor’s degree, majoring in Robotics and Intelligent Systems and minoring in Computer Science.