If you’ve never heard of Blockly and Webduino Bit, you’re not alone. Although they’re pretty popular in Asia, they haven’t really made it to the West yet. But when I was recently introduced to this educational dev board, I thought that they were such a great alternative to BBC’s micro:bit, that I bought one and wrote this review about two Webduino boards.
Besides a few extra onboard components, the main selling point of the Webduino Bit is that once connected to the internet via WiFi, any board can be controlled from anywhere in the world via the Blockly editor. However, instructions for Blockly in English are scarce.
Not that Blockly is hard to use. It is basically just a Scratch clone after all. Though, for people like me that don’t have much experience with Scratch, it would be nice to have some help. So in this article, I am going to introduce some basics of Blockly.
In this guide, we’ll cover a basic for in range loop, how to increment a variable, and how to use the LED matrix. First though, a look at the editor.
Don’t have a Webduino Bit?
No board? No problem. In this guide, we are going to use a simulated Webduino Bit in the Blockly editor. Then, you are going to use mine! You can view my board via Maker WS’s live cam.
The Blockly editor doesn’t work too well on mobile, so you will need a computer. Also, Webduino recommends that you use Chrome, but since most browsers are based on Chromium nowadays anyways, others should be OK too.
To start, navigate to the Blockly website. That link should open a new tab for you. Next, let’s look at what makes up the Blockly editor.
Basic parts Blockly for Webduino Bit editor
- These are the blocks. Just like in Scratch, they are color-coordinated. However, there are so many different kinds of blocks that many of the colors are duplicated.
- You can toggle between blocks and JavaScript. Unfortunately, you can’t edit the JavaScript code, it’s only there for reference.
- This is where you “build” your code. Just click or drag blocks to this area and you will be able to manipulate them. There is a trashcan below for blocks you don’t want anymore.
- If you don’t have a Webduino Bit, Blockly can simulate one for you. The buttons are pressable and if you use blocks like the light sensor, a light bulb will show up here when you run your code.
- The run button will, you guessed it, run your code. It’s important to remember that whenever you’ve made any changes in Blockly, you need to hit the stop button and the run button again or the Webduino Bit won’t receive the changes.
- These four monsters can be programmed to do various things. Sometimes they mysteriously disappear. Don’t worry, there is a refresh button above the blue monster that will make them reappear (there’s one for the board too, but I’ve never had to use that one).
Using the simulated board
Unless you just want to play with the monsters, every Blockly Webduino Bit program starts with a board block. It’s easy to find as it’s the only block in the Board section.
By default, it is set to Simulator mode and that’s what we want so don’t change it. Now, let’s pull a monster talks block from the Monster section. You can change which monster is talking or what it says, but I’m just going to stick with the default.
Technically, you don’t need to put Monster blocks inside a Board block. They will work independently, but I just wanted to show you how the blocks fit together. To get the monster to talk, we need to hit the Run button.
And that’s it! If you see something like the monster below, you have just completed a simple Hello World program with Blockly. Where’s the Webduino Bit though? We’re not quite there yet. First, we need to play around with variables.
Working with variables
I told my nephews that variables are like boxes that hold data for us. They then stared at me blankly as they often do. Anyways, Blockly is running JavaScript behind the scenes, so its variables are dynamically typed and pretty easy to work with.
Let’s get a monster to tell us what’s inside a variable. First, pull the monster talks block out of our board block. Then, take a set variable block from the Variables section and connect it to the board block.
I’m going to rename my variable counter because we’ll be using this to count loop iterations later. You rename yours too by selecting New variable... from the dropdown menu.
Now to get the monster to tell us the value of the variable. Throw the yellow block that is connected to the monster talks block into the trash. Put a counter variable block from the Variables section in its place. Then connect the monster talks block to the set variable block.
Hit run and you should see the monster saying 0. Up next, we’ll finally get to use the simulated board right after we make a simple for loop.
Loops in Blockly with Webduino Bit
There are a few different kinds of loops to use with the Blockly and Webduino Bit. My goal is to display the numerals zero through nine on the LED matrix. The ideal loop to use would be this one from the Loops section:
However, in this guide, we’re going to manually increment our counter. To increment a variable in Blockly, use this block from the Variables section:
While many of the blocks in Blockly use English that’s a little different from the English I use, the function of the blocks is usually pretty clear. This block, however, threw me for a loop. I checked Scratch and it’s exactly the same there! After thinking about it for a while though, I couldn’t really think of any better way to phrase the block.
The change block just adds a value to the variable. So, you can increment an integer by appending a positive number or decrement it by appending a negative number. We will increment the variable in this example:
Don’t forget to put the wait block in the loop or the numbers will go by too quickly for you to see.
The code above will display 0 – 9 on the simulated board, but how do we run the code on a physical board? Let’s see in the next section.
Using a real board
Using the core feature of the Webduino Bit, control via the internet, with Blockly is super simple. Just select Wi-Fi from the drop-down menu on the board block. Then, enter the ID of the Bit that you want to control.
If you don’t have a Webduino Bit, you can use mine by entering the ID bit43370. Watch the Bit on Maker WS’s live camera (opens in new tab).
Your complete code should look like this:
Conclusion
This has just been a glimpse at some of the most basic functions of Blockly and Webduino Bit. There are many more blocks to explore, so make sure you check back here at Maker WS soon for the next guide!