Graphical programming interfaces for Arduino

My limited experience of graphical programming interfaces in general is that they can be quite hit and miss, particularly if you’re looking for a combination of an easy to use interface and good code complication. That said having grown up with computers that were barely capable of graphical interfaces I have never really used them in a serious way even Scratch is alien to me. When I learnt to code programming looked like this:

program HelloWorld;
uses crt;
begin writeln('Hello, World!');
readkey;
end.

Can you tell what language that is?[1]

Of course if I were teaching that now it would look more like this:

print("hello world!")

So I’m coming to searching for a Graphical Interface for Arduino with little to go on. I do however have a list of requirements which can be summed up as the interface should be easy to use and should output code which mimics normal programme structure:

  • all variables need to be initialised
  • you shouldn’t have to put things into the setup loop in order to make sure they’re created
  • the programme loop should contain neat code that mimics the structure created using the blocks
  • you should be able to create additional functions, just as you can when typing code

That doesn’t sound like much does it? It’s surprisingly hard. Here’s some of the (many, many) interfaces I tried.

TL;DR: Use Ardublockly.

S4A

The first thing I noticed about S4A is that despite it’s attempts at porting scratch to Arduino it still seems very much a games driven interface. There’s a lot of confusing stuff littered around the screen which has nothing to do with basic Arduino programming, and there was no way I was going to be able to construct my bat code using it. As a result I gave up on it pretty quickly. It’s a pity as I’m sure at least some of the kids I will be working with will have used Scratch before therefore would be comfortable using it.

Modkit Micro

I had high hopes of this one when I first came across it. Originally funded via a kickstarter, it’s totally stand alone and appears at first glance to have all of the features I want in a graphical interface. The block level code is simple to understand, it outputs simple and neat Arduino code. You don’t have to add things to the “setup” loop in order to initialise them. There’s one big problem though: it doesn’t have all the features I need (tone and pulseIn are missing, as is the Arduino Nano board) and as it isn’t open source I can’t add them myself. It’s also only free temporarily while they create a new and improved version.

Visuino

Recommended by a friend as being pretty good I didn’t actually get to try this one as it’s Windows only. I could have fired up my VM but it seemed like an awful lot of effort at the time.

Ardublock

ardublock_bat_code

This Java add on for the Arduino IDE is one of the closest I found to what I was looking for. Sadly it doesn’t appear to still be in active development (the last update was 15 Jan 2015 and there are two outstanding pull requests from January and July 2015). Similarly their sourceforge hasn’t been updated since 2014 and their website ( http://blog.ardublock.com/ ) resolves to a blank WordPress install with the Chinese for “Welcome to WordPress. This is your first post. Edit or delete it, then start writing it!” as the only text on the page.

All of this makes actually using Ardublock quite hard work. In order to use the most up-to-date copy you have to compile it yourself. This involves downloading and installing Maven which requires that you have Java 7 (I had Java 6 when I started the process, and, because I simply downloaded and installed the most up-to-date Java I now have Java 8. Neither actually works wth Maven. Once you’ve got Maven running you can mvn validate and then mvn exec:java -Dexec.mainClass="com.ardublock.Main" in order to actually run it, since this all failed spectacularly for me (mostly due to my mess up with Java) I kept poking the internet long enough to find this: (https://github.com/Makeblock-official/Ardublock_Installation_Package_by_Makeblock) which claims to only work for windows. However, if you download it as a zip file and unpack it you can extract a copy of ardublock-all.jar which when put in your sketchbook folder in the following location: [sketchbook-folder]/tools/ArduBlockTool/tool/ardublock-all.jar actually runs Ardublock for you.

That’s a lot of faffing for a tool that is meant to help children code. I did almost manage to entirely mimic my programme (wa-na-na-na bat code) using Ardublock in its current form it does however output a rather worrying almost spaghetti like version of Arduino code which is only visible when you hit “upload”.

A word of warning: do not leave a pre-existing sketch open in Arduino when you hit upload on an Ardublock programme, it doesn’t open a new sketch and will mutilate your code.

It does quite well with simple code such as blink:

void setup() { pinMode( 13 , OUTPUT); }
void loop() {
    digitalWrite( 13 , HIGH );
    delay( 1000 );
    digitalWrite( 13 , LOW );
    delay( 1000 );
}

However when you start getting more complicated it outputs things like this:

int _ABVAR_1_time2 = 0 ;
int _ABVAR_2_time1 = 0 ;
int _ABVAR_3_i = 0 ;
int _ABVAR_4_maxtime = 0 ;
int _ABVAR_5_duration = 0 ;
int _ABVAR_6_cm = 0 ;
void check_distance();
void setup() { pinMode( 12 , OUTPUT); }

void loop() {
    tone(4, 262);
    delay( 90 );
    check_distance();

    if (( ( ( _ABVAR_1_time2 - _ABVAR_2_time1 ) ) < ( 30 ) )) {
        delay( ( 60 - ( _ABVAR_1_time2 - _ABVAR_2_time1 ) ) );
    } else { delay( 30 ); }

    noTone(4);
    _ABVAR_3_i = 0 ;

    while ( ( ( _ABVAR_3_i ) < ( _ABVAR_4_maxtime ) ) ) {
        if (( ( ( _ABVAR_3_i % 60 ) ) == ( 0 ) )) {
            check_distance();
        }

        delay( 1 );
        _ABVAR_3_i = ( _ABVAR_3_i + 1 ) ;
     }
}

void check_distance() {
    _ABVAR_2_time1 = millis() ;
    digitalWrite( 12 , LOW );
    delayMicroseconds( 2 );
    digitalWrite( 12 , HIGH );
    delayMicroseconds( 10 );
    digitalWrite( 12 , LOW );
    _ABVAR_5_duration = analogRead(11) ;
    _ABVAR_1_time2 = millis() ;
    _ABVAR_6_cm = ( _ABVAR_5_duration / ( 29 % 2 ) ) ;
    _ABVAR_4_maxtime = ( _ABVAR_6_cm * 10 ) ;
}

Not only is this code fairly ugly, it hasn’t actually picked up on the correct pins to use for various things and there is, as far as I can tell, no way to measure pulseIn at all. As a tool for allowing children or adults to learn to code simply, it does fine with uncomplicated programs however it would be so much better if the code it output for more complex operations bore any resemblance to the code one might write to perform the same tasks.

Ardublockly

This works exactly the way I want it to. It outputs the code in real time as you drop the blocks in place and it is nicely formatted. My only complaint about it would be that I couldn’t copy and paste it directly from the programme although you can send it to your Arduino IDE which allows you to access it as you normally would. Sample output: blink

However, like the others, ardublockly didn’t actually have all the bits I needed in order to run the bat code. No matter, it’s open source and there are really good instructions on how to create new blocks here: (https://developers.google.com/blockly/custom-blocks/overview) this is, of course, the advantage of it being built on top of blockly.

So, I forked the repo, sat down and started creating the extra blocks that I would need to use to run the bat-code. Here’s the first one you can see the code has appeared on the right hand side because I puled the block into the code area:

It took me a significant portion of the evening but, with some work, I got to the point where I could do this:

ardublockly_bat_code

That is the whole of the bat code rendered via Ardublockly. Because of the way the individual blocks are set up, what that outputs (in real time) is this:

int scaling_factor;
int i;
int time1;
int duration;
int time2;
int cm;
int maxtime;

void check_distance() {
    time1 = millis();
    digitalWrite(12, LOW);
    delayMicroseconds(2);
    digitalWrite(12, HIGH);
    delayMicroseconds(10);
    digitalWrite(12, LOW);
    duration = pulseIn(11);
    time2 = millis();
    cm = duration / (29 / 2); maxtime = cm * scaling_factor;
}

void setup() {
    pinMode(4, OUTPUT);
    pinMode(12, OUTPUT);
    pinMode(11, INPUT);
    scaling_factor = 10;
}

void loop() {
    tone(4,262);
    delay(90);
    check_distance();

    if (time2 - time1  < 30) {
        delay((60 - (time2 - time1)));
    } else {
        delay(30);
     }

     noTone(4);
     i = 0;

     while (i < maxtime) {
         if (i % 60 == 0) {
             check_distance();
         }

         delay(1);
         i = i + 1;
     }
 }

Having proved that it was possible to use this particular tool to produce the code I needed I spent a little longer to make it compatible with the Arduino Nano and then package it back up so that it runs as a stand alone app rather than by running python start.py from the command line. So why is this my recommended solution? Because it’s Open Source and it does basically everything that I wanted from a graphical interface. If it doesn’t have the blocks you need for something you can write them (it’s mostly javascript) or, if you don’t want to/can’t you can ask me nicely and, if I have the time, I might add the block(s) for you.

[1] If you guessed Pascal, have a hypothetical cookie.

Disclosure

As an Amazon Associate I earn from qualifying purchases.