Let's code!

First, open CircuitBlocks and connect your Wheelson to your computer's USB port.

random image
random image

CircuitBlocks should now say "Wheelson connected".

random image

If CircuitBlocks didn't recognize your Wheelson, please check if the USB cable is plugged in properly and if you are using a working USB port on your computer.

If you still cannot get CircuitBlocks to recognize your Wheelson, something possibly went wrong with the driver installation on your computer. Drivers are these little programs that help your computer communicate with Wheelson and they sometimes act funny. Reach out to us via email at contact@circuitmess.com if you cannot get your computer to recognize your Wheelson.


Let's make your Wheelson’s lights blink

In computer programming, a variable is a storage location that contains a value.
Every variable has a specific name and you can store and change the value of a variable.

Let's create our first variable. Find the section named "Variables" and press the "Create variable..." button.

random image

A new window will appear asking you to name your variable. Let’s name it "blinkTime" and click "Save".

random image

After you save the variable, this will create new variables that you can now use.
They will look like this.

random image

Find the variable “set ‘blinkTime’ to” and drag and drop the block into the turquoise block that's already in the drawing area.

random image

When we create a variable, it's undefined - it has no value. We must set a value for every variable when our computer program starts. That's why you'll need the "set variable" block.

Put this block in the "Arduino run first:" branch.

random image

Now you need to define the value that we want to set the variable to.

Find the “Time” section on the left side of the screen and from there take the “current elapsed Time (milliseconds)” block.

random image

Take the “current elapsed Time (milliseconds)” block and drag it into the empty spot on the right side of the “set” variable.

random image

Now, we have to create a new variable that will help us set the RGB colors to the ones we want. Go back to the “Variables” section on the left side and click on “Create variable…” to create a new variable just like we did a few moments ago. Let’s name this variable “RBGcolor”. Once you enter the name, save your variable.

This will generate a few new variables that we can now play around with. For this step, we need the “set ‘RGBcolor’ to” variable.

random image

Drag and drop the "RGBcolor" variable right below the previous variable. Take a look at the photo below to see how this should look like.

random image

Wheelson’s RGB has 7 different colors and we want to show all of them off.
We’ll start from the first color and move our way to the last one. Our first color will be set to ‘0’ so let’s add that value to the variable. Drag and drop the "set" variable from the "Variables" section just below the first "set" variable we added. 

random image

After dragging the "set" variable to the drawing board, find a block named "123" in the "Math" section. This block is a numerical value block, and you can type in the numerical value you want once you drop it onto the drawing area.

random image

Drag and drop it into the empty space right next to the “RGBcolor” on the right side of the set variable. Click on the “123” numbers, delete them, and set the numerical value of the block to “0”. You can do this by simply typing the number 0 (zero) on your keyboard. This is what it should look like:

Now click on the block and type in the value. Set the numerical value of the block to 0.

random image

Good job so far! What you have to do next is find the “Vision” section on the left side of the screen. From there we’ll choose the “fetch camera frame” block. 

random image

Drag and drop the “fetch camera frame” block right below the text saying “Arduino loop forever”.

random image

Now would be a good time to save your program so you don’t lose the progress you’ve made so far. Click on the “Save” icon in the top left corner of the screen.

random image

Pick a name for your program and click "Save".

random image

Remember to save your progress every so often to prevent accidentally losing parts of your code. 

Ok, now that we’ve saved our progress, let’s move on to the next step.

From the “Vision” section on the left of the screen drag and drop the “draw camera frame” block right below the “fetch camera frame” we placed previously.

random image
random image

So far everything we’ve done is stored in Wheelson’s clipboard - a special place in Wheelson’s memory. This means that we cannot see what we’ve programmed without adding a block that will display what we’ve programmed on the screen. 

For that, we need the “draw sprite to display” block from the “Display” section on the left side of the screen. Take that block and drop it below the “draw camera frame” block.

random image

random image

Now let’s create a function. Find the “Functions” section on the left side of the screen and click on the “Create a Function” button.

random image

This will open the “Edit Function” window. There we’ll name our function “checkBlink”. To do that, delete the text that says “do_something” and type in “checkBlink” instead. Then click the “Done” button in the bottom right corner.

random image

Once you do that, the function will automatically be added to the drawing board.
Just like this:

random image

Now we’ll define what this function does. Let’s add some logic to it. From the “Logic” section on drag and drop the “if” block inside of the “checkBlink” function.
random image

In the “True” slot drag and drop the comparison block that looks something like
this from the “Logic” section. Change the comparison symbol in the middle to the greater than or equal to symbol (≥) from the drop-down menu.

random image

Then, from the “Math” section add the block with the ‘-’ symbol between the two numbers.

random image

random image

After that, we’ll go to the “Time” section on the left of the screen and select the “current elapsed Time (miliseconds)” block and add it to the left slot of the “Math” block we just dropped.

In the right slot of this same “Math” block, we’ll add the “blinkTime” variable block from the “Variables” section.

Finally, we’ll change the number ‘1’ into ‘500’ to make the lights change color ever 0.5 second. This is how it should look like: 

random image
Let’s create a new function called “cycle RGB”. Go to the “Functions” section and click on “Create a Function”. Just like the last time, choose a name for your function - let’s go with “cycleRGB” this time. Click “Done” and the function will show up on the screen.

random image

Let’s add some variables to the function.

From the “Variables” section get the “set ‘RGBcolor’ to” block and drop it in the empty slot of the “checkBlink” function.

random image

We’ll fill the empty space on the right side of the “set” function with a block from the “Math” section.

Find the “remainder of” block and drop it into the empty slot. 

By default, there are some random numbers written in the “remainder of” block.
We’ll switch the number ‘64’ with another block from the “Math” section. Find a block that has number ‘1’ on each side with a ‘+’ symbol in the middle. Then, drag and drop that block in place of the number ‘64’.

random image

Now, let’s add an “RGBColor” variable instead of the number ‘1’ on the left. Also, let’s type in number ‘8’ in the far right slot. Just like this: 

random image

Next, go to the “Logic” section and drag and drop the “if, else” block right under the variable we just created.

random image

Let’s add some comparison logic to this new block. From the “Logic” section find a block that compares whether two number values are equal to each other and drag and drop it in place of the “true” value that’s there.

random image

Let’s add the “RGBcolor” variable in the left slot of the comparison logic. To do that, open the “Variables” section and drag and drop the “RGBcolor” block right where the number ‘10’ is on the left. Let’s also change the number ‘10’ on the right into ‘0’. 

random image

Now find the “I/O” section on the left side of the screen. From there drag and drop the “set RGB LED color” block in the empty slot of the “if else” block. Just like this:

random image

Let’s do the same for all of the colors. To add a new check click on the little ‘+’ icon on the bottom left.

random image

Then, drag and drop the same comparison block as in the previous step and add the “RGBcolor” variable. This time instead of ‘0’ add the value ‘1’ and set the “RGB LED color” to “red” by selecting the red color from the drop-down menu.

random image

Repeat this same process for the remaining 6 colors. With each new block make sure to increase the value by 1 and change the color into a different one. Just like this:

random image

You’ll see that you have an empty slot at the bottom. Let’s get rid of this by clicking on the ‘-’ symbol on the right.

random image

This is how your “cycleRGB” Function should look like in the end:

random image

Now let’s go back to our “checkBlink” function. Add the “cycleRGB” function from the “Functions” section to the empty slot of the “if” logic.

random image

Next, from the “I/O” section we’ll drag drop the “set headlight” block. 

random image

From the “Logic” section we’ll drag and drop the “not” block and add the “is
headlight on” block from the “I/O” section like this:

random image

Now go to the “Variables” section and drag the “set” variable right below the purple block we just placed. We need to set the variable to “blinkTime” so select “blinkTime” from the drop-down menu.

random image

We’ll now add a block from the “Time” section. Look for the “current elapsed Time (milliseconds)” block and place it inside the variable.

random image
random image

There’s one final block we need to add. Go to the “Functions” section and drag and drop the “call checkBlink” block. Drop it right below the “draw sprite to display” block.

random image
This is how your sketch should look like in the end:

random image

This sketch will make you Wheelson's RGB light blink in different colors every 0.5 seconds and it will draw the camera on the screen. So, let’s test it out and see if it works!

First, save your sketch one more time. Same as before, click the “Save” icon in the top left corner of the screen. If you haven’t saved your sketch yet you’ll have to name it at this point however, if you’ve followed the steps closely your sketch will already have a name so you won’t have to name it again.

Let's try this code out. Find the big red “Run” button on the top right and press it.

random image

A yellow loading bar will appear on the top of the screen.

random image
Your program is now going through a process called compilation.
Code compilation (or code compiling) is the transformation from a human-readable form of code (such as the colorful blocks you are looking at) into machine code (a form of code that the computer understands - ones and zeros all squashed together).

Since this is the first time you are compiling code for your Wheelson, it might take a few minutes to compile. This is happening because CircuitBlocks needs to compile all the important core parts of the code needed for your Wheelson and save it to your computer. When this compiles for the first time, it will be saved on your computer and all of your next programs will compile much faster (yay!).

If your code was compiled and uploaded successfully, Wheelson's white LED headlights and the RGB light underneath the screen should blink in different colors every 500 milliseconds and you should be able to see the camera on the screen.

random image

Is everything ok? Great, let's move on.

Something not working? Please press the Send error report on CircuitBlocks' homepage, contact us via email at contact@circuitmess.com and provide us with your error report ID.