BlockPy – Introductory Python Programming Blockly Environment

Whilst looking around to see what sorts of graphical editors there are out there for teaching introductory python programming, I ran a search for blockly python. If you haven’t come across Blockly before, it’s a library for building browser based graphical programming interfaces, based on interlocking blocks, with a Scratch style aesthetic: blockly.

I already knew that Blockly could be customised to generate Python code but the BlockPy environment from Virginia Tech’s Software Innovations Lab is even richer:

BlockPy

For a start, the environment is set up for working with small data sets, and can display small tabular datasets as well as plot them. (You may remember we also used data to motivate programming for the FutureLearn Learn To Code (a line at a time) course.) The language is a subset of Python 2.7 (the environment uses the Skulpt client side Python interpreter; I’m not sure if the turtle demo works!).

The environment also supports blocks-to-code as well as code-to-blocks translations, so you can paste a chunk of code into the text view, and then display the blocks equivalent. (I think this is done by parsing the Python into AST and then using that as the bridge to the blocks view?)

Alternatively, it you’re happier with the blocks, you can write a programme graphically and then grab the code version. Or you can flip between the two…

BlockPy2

As well as the blocks/code view, there is a pseudo-code view that maps the code into more explanatory language. This feature is under active development, I think…

To aid debugging – and learning – the environment allows you to step through the code a line at a time, previewing the current state in the panels on the right hand side.

BlockPy3

If you get an error, an error prompt appears. This seems to be quite friendly in some cases, though I suspect not every error or warning is trapped for (I need to explore this a bit more; I can’t help thinking than an “expert” view to show the actual error message might also be useful if the environment is being used as a stepping stone to text-based Python programming.)

BlockPy4

The code is available on Github, and I made a start on putting it into a docker container until my build broke (Kitematic on my machine doesn’t seem to like Java at the moment – a known issue – which seems to be required as part of the build process)…

The environment is also wrapped up in a server side environment, and on the Virginia Tech is wrapped in a login-if-you-want-to environment. I didn’t see any benefit from logging in, though I was hoping to be able to name and save my own programmes. (I wonder if it’s also possible to serialise and encode a programme into a URL so it can be shared?)

You can also embed the environment – prepopulated with code, if required, though I’m not sure how to to that? – inline in a web page, so we could embed it in course materials, for example. Being able to hooks this into an auto-marking tool could also be interesting…

All in all, a really nice environment, and one that I think we could explore for OUr own introductory computing courses.

I also started wondering about how BlockPy might be able to work with a Jupyter server/IPython kernel, or be morphed into an IPyWidget…

In the first case, BlockPy could be used to fire up an IPython process via a Jupyter server, and handle code execution and parsing (for AST-block conversion?) that way rather then using the in-browser Python Skulpt library. Having a BlockPy front end to complement Jupyter notebooks could be quite interesting, I think?

On the widget front, I can imagine running BlockPy within a Jupyter notebook, using it to generate code that could be exported into a code cell, for example, though I’m not really clear what benefit this would provide?

So – anyone know if there is any work anywhere looking at taking the BlockPy front-end and making it a standalone Jupyter client?! :-)

Running Blockly On An EV3 Brick

Based on WasabiFan/blockly-ev3dev, it seems we can run blockly from a Lego EV3 brick.

Downloads_—_robot_ev3dev____blockly_—_ssh_—_58×29_and_Hello_World
I managed to see blockly on default port 8000 by copying the following files from WasabiFan‘s repo into the same directory in a EV3 folder (Sharing Files With a Lego EV3 Brick Over Wifi Using Filezilla), and then running python server.py in that directory:

blockly_compressed.js (from .)
blocks_compressed.js (from .)
en.js (from msg/js)
index.html (from server/)
index.js (from server/)
python_compressed.js (from .)
server.py (from server/)

At the moment it only runs a motor command (and note that the speed setting is not a speed setting, it’s a sp_duty_cycle, so needs to be in range 0..100).

Hello_World_ev3_blockly

The run button saves the program as a python file (my_file.py) in the folder user_code and then executes it:

robot@ev3dev:~/blockly$ more user_code/my_file.py 
import ev3dev.ev3 as ev3

outAMotor = ev3.Motor('outA')
outAMotor.reset()

If we can save this as an executable file with a #!/user/bin/python hashbang, the file could then be launched from the brick file browser.