Have you always wanted to learn to code, or understand how to program a microcontroller, but it all seems just a little bit out of reach? It’s not – let us show you how!

Today we are surrounded by technology, and with this submersion, it could be said that the vast majority of us are tech savvy. We all have smartphones and instant communication. Children are growing up with this as part of their everyday lives, how can we not be technologically literate? The thing is, this all just means we are consumers of technology. Being able to read does not mean we can write. In school, we are all taught to read but imagine if only the ones who wanted to become writers learned to write? The language of communication would become stifled, and imagination and creativity would be severely limited. We are not all writers but being able to write allows us to think and communicate in a way to express our creativity.

Similarly, everyone — young and old — should know how to code. Because being able to code challenges the way we think, how we solve problems, and the way we communicate. Not everyone has to go on to writing the guidance system for the Apollo moon missions (Apollo Guidance Computer and DSKY for those playing at home), but understanding how the technology that we consume works, will provide us with a rich insight into the way we communicate with each other.

THE BROAD OVERVIEW

Over the last few issues we’ve discussed, at length, the overall syntax and implementation of various languages — predominantly C++ and Python. Both these languages are used in the Makerspace with Arduino and Raspberry Pi; however, both are not without their quirks and often require a lot of dedication in order to start out. We need to find a way of presenting the concepts, ideas and fundamentals of programming in a simple, easy and fun way, without those pesky semicolons at the ends of the lines that typically frustrate and confuse.

This is where “blocks-based coding” comes into its own. “Blocks” programming was initially intended to teach kids from the age of eight years and older, to work with the concepts of coding, but without the need to be hard writing and wading through syntax. It is coding within a programming language, where instructions are mainly represented as blocks. This makes it easier to start out as the blocks contain a palette of commands, which means we do not need to memorise anything in particular. However, as the projects get more complicated, it will become slower to build and execute.

We will be examining two of the most popular of these: Scratch and ArduinoBlocks, both of which are based on Google’s Blockly technology.

Scratch is a development project for the next generation of graphical programming blocks, based on a collaboration between Google and MIT’s Scratch Team. Scratch provides a framework for building programming blocks in both vertical (text-based) and horizontal (icon-based) formats.

Most languages require you to install, but not these particular ones. While there are full install clients available, they require dependencies and setup. By using the web-based versions they become easier to get started, and save your work in the cloud to boot.

Before we continue however, let’s recap some of the basic syntax and blocks that we use when coding.

A traditional program or process has a start point and an endpoint.

SCRATCH

To start a Scratch session, we need to go to: https://scratch.mit.edu/projects/editor/#editor

The environment itself is split into a stage, palettes and panes, and the toolbar. Let’s start by examining the toolbar, which contains essential functions in Scratch. It’s here we can create a new project, save our current project, browse all of our “stuff”, upload and download files from our computer, or revert our project to its last saved state.

The main palette and panes are where we create our code or script. At the top, we find three tabs, scripts, costumes and sounds. We will be focusing on the scripts tab. The Block palette allows you to drag blocks into the scripts area, create variables, and create more blocks. When you drag a block from the Block palette, a copy of it follows the mouse until you “drop” it where you need it. There are ten sections of blocks in the Block palette. Today, we’ll also be looking at motion, events, looks and data, and operators.

On the Stage pane, we find “Scratch Cat”, also known as “Scratchy” or just “Scratch”. The Stage pane is where the magic happens, or more accurately, where the visual output of any program is displayed. Scratch Cat is our “sprite”. In video games and displays, a sprite is defined as an object that can be moved, rotated or manipulated. Often controlled by input from the user. The stage itself is a sprite and is a special kind of object, all other sprites including Scratch Cat sit on top of this. The stage has two buttons, a green flag and a red stop sign. Clicking the green flag button broadcasts to the green flag block, that the program has commenced, the red stop is used to stop all sprites in the script.

SCRATCH, HELLO WORLD!

It would not be a coding article without a good hello world, and we will not disappoint today.

Click the event palete in the scripts tab.

From here we click the green flag, “when clicked” and drop the block into the right side of the block pane. This is the start or entry point for our program.

We now click on the Looks palette.

Find the block that has “say” and then “Hello!”

Click on it and drag it over to drop under the green flag block, it will “snap” into place.

Click on the text section of the block we just dropped and add the word “world” after “Hello!”

Our program is ready to run, click the green flag button above Scratch Cat in the stage pane and we will get a “Hello World!”

VARIABLES AND EVENTS

Let’s put a little bit more functionality into our program. We need to count each time someone clicks on Scratch Cat. In order for us to do this, we need to know when a click happens (this is known as the “click event”), and we need a container to hold the number of clicks in, (referred to as a “variable”).

We will continue using the last exercise.

We need to detect when the user clicks on Scratch Cat. We go to the Events palette, and this gives us the option to detect many inputs from the keyboard, mouse and others. Today we want to detect the mouse click. Find the “when this sprite is clicked” block, and drag it out to another section of the screen. Do not try and snap it with our earlier blocks.

Click on the Data palette in the scripts tab.

Click the “make variable” button.

In the pop-up box enter “count” as the name of our variable, and then click “OK”.

We now find that we have a new selection of blocks to use.

Find the “change count by 1” block, and drag over the “when this sprite is clicked” block, snapping them into place.

You will now see a counter above Scratch Cat in the stage pane.

Click on Scratch Cat and you will see this number increment by one each time.

We have caught the click event! However, there are two things we can explore to make this more interesting:

• How do we reset the number?
• Can we get Scratch Cat to tell us the click count?

From the Data palette, select “set count to 0”, drag and snap this under “Say Hello World!” on the blocks pane.

Go back to the Looks palette and find “say hello” again, dragging it and snapping it under “change count by 1”.

Click back to the Data palette and select “count” on its own. Drag it over and drop it onto the hello section of the “say hello” block that we just placed. Our block should now be orange and purple, and say “say count”.

Click the green start flag and Scratch Cat will say “hello”.

Click on Scratch Cat and it will now say the number of the count each time.

Click the green start flag again, and the count variable will be reset, so counting starts again from 0.

You can refer to the download file provided, which contains completed exercises.

SUMMARY

Scratch is an incredibly fun tool to use and learn with. We would highly recommend taking the time to complete more tutorials, and continue the journey of coding using this fantastic piece of development software.

Scratch is designed to initiate kids into coding without too much of a challenge.

While many DIYODE projects focus on the Arduino IDE, Scratch has a thriving community too. There are hundreds of thousands of projects available to compile, modify, and play with.

Once a thorough understanding of computer logic is achieved, moving to something more complex (other visual tools, or text-based such as the Arduino IDE) is a fairly simple process.

Arduino Blocks

We are maker-based here at DIYODE, so we need to give a real-world example. The team over at ArduinoBlocks have used the Google Blockly development code to create a block-based interface for the Arduino.

Currently, it supports the Arduino UNO, NANO and MEGA. In addition to this, it supports the OTTO interface, which is used in the biped robot elsewhere in this issue. Note: You'll need a compatible Arduino board if you'd like to do the practical build at the end of this article.

To use ArduinoBlocks, there are some prerequisites that will enable you to get your code onto the Arduino Micro. We can use a plugin from the browser to send the code directly through, or the ArduinoBlocks can export a code .ino file, or we can view it and copy and paste it into a new file in the Arduino IDE.

For the purpose of this article, we will use the method of exporting out the .ino file and uploading it with the Arduino IDE. If you do not currently have the Arduino IDE installed, please go to: www.arduino.cc/en/Main/Software

Once complete head over to the ArduinoBlocks website. We need to create an account before we can use it, but this means that all of our data and information is then stored in the cloud, so there’s less chance of having corrupted files. We will start by creating a basic blink sketch – the “Hello world!” of the makerspace.

Once logged-in we can create a new project by selecting the “Projects” drop down, located to the right of the ArduinoBlocks logo. Select “New project”, then start a personal project.

We now have a few options, the first of which is to select what our target platform will be. Fill out the relevant fields and how they relate to the project.

You will be greeted with a bare-bones screen, but unlike when we used Scratch, this time you’ll see that there are two functions already in the Blocks panel. If you have experimented with an Arduino before then you will be familiar with the Setup and Loop. However if you have not, the Arduino code requires these two functions: the first – setup – is a selection of code that will be run when the unit first switches on. This may be code to set a certain variable or initialise the serial port for output. The second – the loop – is designed to loop forever. Any code in here will run through, then run through forever.

Let’s take a moment to have a look at the Arduino Code palettes that are available. They include the basics, logic, control, variables and functions. However the really exciting part is that it includes so many options to control, servos, motors, SD cards, MQTT, GPS and even Bluetooth controls! Even the best of us Arduino hardheads were excited when we saw this!

For now, we’ll focus on the basic blink sketch.

Find the Input/Output palette and drag the block that is titled “Write Digital Pin 2”.

Drag it over the loop function block until it snaps into place.

Change the pin number to pin 13, which is the built-in LED on the Arduino.

If we were to run this now, then we would simply see the LED turn on and never go off. This is because every time our main loop executes, pin 13 is set to high, which in turn switches the LED on.

To make the LED blink we need to switch on, then off and back on. If we simply added the same code as above but changed it to “off” rather than “on”, we would not see a change or the LED would simply look dim. So we need to add in a delay after each of these events.

Let’s repeat the above block this time changing the state to “off” rather than “on”.

Go to the Time palette and find the “Wait 1000 milliseconds” block.

Drag and snap it in place after the first “Write Digital Pin 13 On” and a second after the “Write Digital Pin 13 off”.

With this complete we have three options to load our program onto the Arduino UNO. The first option is direct from the browser, where there is an option up the top left of the screen titled “upload”. This is dependent on the browser plugin being installed. In addition to this, if you click on the down arrow, next to the Blocks button in the top left, you will have the option to view the code, which can then be copied and pasted into the Arduino IDE. We will use the third way, assuming you have installed the Arduino IDE, and download the .ino file. From the drop-down arrow select the download option and download the file. Open this newly created file in the Arduino IDE. You may be prompted to create a working directory, so click “yes”. Once open you will see the following piece of code:

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

If this is your first time using the Arduino IDE, go to the Tools menu and under “board”, select Arduino UNO. Make sure your board is plugged into the USB port of your computer. If this is the first time using it, you may need to wait while drivers are installed.

Go back to tools and select “port”; depending on your computer you will have a Com port or a /dev/xxx available to use, if it is not already selected. With these settings complete, go back to our main code screen and select the sketch menu item. Then select “upload”. Our code will now compile before uploading. You should not have any issues here, but we do recommend consulting the Arduino IDE pages if you get an upload error. With our code successfully uploaded, the onboard LED will blink on and off every second.

Blocks programming is a lot of fun and very easy to get started with. The advent of Blockly has given us Scratch and ArduinoBlocks, both of which can empower even the novice coder to create some impressive pieces of work.