Let's code!

CircuitBlocks should now say "Wheelson connected".

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.

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.

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

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

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

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.

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.

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

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.

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.

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. 

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.

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.

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. 

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

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.

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

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.

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.

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.

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.

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

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.

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.

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

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: 

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.

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.

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’.

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: 

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

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.

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’. 

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:

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

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.

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:

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.

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

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.

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

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:

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.

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

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.

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

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.

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

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.

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.