Having fun with the STM32F411 Nucleo board was great. It got me excited to build robots based off of it. But what I really wanted was a learning platform. I had no idea if I could find good software to program the board. So I looked. And looked and looked. But none of the visual programming software that I could find did what I wanted it to. Notably, I couldn't find any software that showed a correspondence between visual blocks and code produced. 

So I thought, I wonder how hard it would be to create visual programming software? So I jumped into my favorite programming environment (Qt). I really like that Qt is built off of C++ so it is fast. I also like that it is cross platform. I can write code once and port to Linux, Windows, Mac, Android, iOS, and more. I have used Qt extensively in the past and am familiar with most of its library functions, but hadn't used the graphics class that I suspected could be very useful to making a graphical code editor before: QGraphicsScene. It handles drawing, moving, and all the basic functions of handling tons of graphics objects. So I dove in and quickly found a helpful example of the class called diagramscene.

After only about 6 hours of playing with diagramscene I had a quick a dirty prototype! I was amazed. I had code that drew various types of blocks that were expanded to fit other blocks in them based on what type they were. At that point I knew that I could create an entire visual code editor. And so over the following months that is what I did in my spare time. I worked on the software on and off throughout 2015. I kept working on the software and improving it, adding functionality, until I had a fully functioning visual code editor!

One of the main goals for the software was to make it extensible. I wanted every aspect of the visual editor to be extensible and configurable. So I made it so every block in the program comes from a configurable text file. The code that the block generates, its look, color, type, and even level, is all set in the text file. Being that the software is designed to be geared around teaching, each block is assigned a different "level" so that lessons can be designed to progressively introduce new features and concepts without overwhelming beginning students. 

One of the key features is to show students how the visual blocks correspond to code. So each block is color coded and the software automatically generates code that matches the color of the blocks. Furthermore, students can select one or multiple blocks in the visual editor, and the code editor will select those same blocks in the code so that students can see what code their visual blocks generate.

I also worked to make it a user friendly application, with common features like save/open, import/export, zoom, copy/paste, printing, comments, functions, as well as programming, pausing, reseting, and controlling the board. But more on the control software later.

Lastly, I also wanted to software to run on low cost hardware so that expensive computers wouldn't be needed to setup an entire lab. Given the fact that the software is written in native C++, this was achieved. In fact, the software runs great on a Raspberry Pi, perfect for setting up an entire low cost lab! I also didn't want the software to be dependent on the cloud, thus needing an (possibly flaky) internet connection. So all of the software run locally, enabling it to be a very responsive native app. Plus, the entire environment can be setup once, and a Raspberry Pi SD disk image can be cloned so that an entire lab can easily be setup very quickly, without having to install and maintain many traditional desktop computers.

Sample Screenshots:

A full sample program:

All the blocks currently in the system:

Sample blocks in the text configuration file:

IfElse/shapeID=DualCondition
IfElse/blockType=Statement  
IfElse/inputs="TopOfIf|MidOfIf"
IfElse/menu=1
IfElse/level=3
IfElse/code="if(|in1)|n{|n|I|block1}|i|nelse|n{|n|I|block2}|i|n"
IfElse/comment=If/Else statement

DigitalOutWrite/shapeID=Statement
DigitalOutWrite/blockType=Statement
DigitalOutWrite/menu=4
DigitalOutWrite/level=1
DigitalOutWrite/inputs="Text|UseDigitalOutVar|Bool"
DigitalOutWrite/inputStrings="Set||" 
DigitalOutWrite/comment="DigitalOut var"
DigitalOutWrite/code="|in1.write(|in2);|n"

ColorSensorGetHSV/shapeID=Statement
ColorSensorGetHSV/blockType=Statement
ColorSensorGetHSV/menu=8
ColorSensorGetHSV/level=71
ColorSensorGetHSV/inputs="Text|UseColorSensorVar|AddressOfInt|AddressOfInt|AddressOfInt"
ColorSensorGetHSV/inputStrings="Get HSV|||||"
ColorSensorGetHSV/comment="Get HSV data"
ColorSensorGetHSV/code="|in1.getHsv(|in2, |in3, |in4);|n"