Play with the inputs!

Play with the inputs!

Now that you know a thing or two about CircuitBlocks, it's time for a bit more advanced sketch.

Go to the Display section, and click on the "set font size to" block.

random image

Change the size to 1

random image

Now is the time to set up the font type

random image

random image

Another thing that needs to be changed is the font color.

We chose red, but you can use any color you want.

random image

random image

Here's a block we haven't used yet - a "clear the display" block.

You can find it in the display block section as well. 

random image

This block will clear the display with some color so we can clearly see the sentence (or word) you'll print.

random image

Now we get to choose what we want to put on display.

You can do it just like in the previous example. 

First, find this block: 

random image

Then write the text. 

Since we want to show you how to do cool things with CircuitPet's buttons, we'll put the text explaining what to do. 

random image

We separated the text into two blocks to fit on CircuitPet's display.

Now comes the main part - deciding which button will perform which function. 

When you press CircuitPet's buttons, we trigger a particular event.

Luckily, we have a specific block defined for that, and it's under the I/O section.
I/O stands for "Input/output". CircuitPet's buttons are the so-called input devices because they send an electrical impulse to the CircuitPet computer when triggered. CircuitPet's display is an example of an output device because
CircuitPet sends signals to it to display information.   

You need to find this purple block named "When button left gets pressed". Place the block onto the drawing area.   

random image

Look for the "clear display" and "print" blocks in the display block section.

random image

What we did here is we triggered CircuitPet so that when the left button gets pressed, the display will clear in black, and you'll be able to see the word "left" on it. 

To carry out this command, we must insert the "draw sprite to display" block!

random image

Now we have to create the same block, just for the right button

You can either repeat the steps or click duplicate and make a few changes.

Make sure that one block says left, and the other says right button. 

It should look like this:

random image

Duplicate the block once more, but this time change it to the enter button.

Make sure that the print says "Enter press," that variable "x" is set to 45, and variable "y" is set to 90.

random image

Let's make another copy of this block!

Now we have to code what will happen when we release the enter key.

Also, when you release the enter, make sure the print says "Enter release."

random image

Let's duplicate the block one last time. 

We'll code it for the back button this time.

As always, we have to put the proper text and ensure the variables are set.

random image

We're almost done!

Finally, drag and drop the "draw sprite to display" block under the "Arduino run first" section to ensure you can see everything on your CircuitPet.

In the end, your code should look like this:

random image

Hit the Run button and watch the code compile!

Yaay!

You learned how to code a slightly more difficult example.

Don't worry, there are more cool examples coming in the next chapter!