Click, click

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

The first thing we'll have to do is similar to the previous sketch.

Go to the display block section and choose the "fill frame with" block.

random image

Now we'd like to write the instructions that are shown as soon as we press the Run button.

We'll need the "write string" block for that. You can find it here:

random image

random image

As shown in the above image, we'll leave the background black and write "Push the buttons" in yellow.

Finally, we must drag the "push frame" block to ensure that the instructions appear on the display.

random image

Amazing! 

You can click Run to see if your code is working properly, and then proceed with the sketch and change what happens when a particular event is triggered.

When you press Chatter'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".

Chatter's buttons are the so-called input devices because they send an electrical impulse to Chatter's computer when triggered. Chatter's display is an example of an output device because Chatter sends signals to it to display information.   

The first block from the I/O section we'll use is "when left pressed". 

random image

Drag and drop it under the instructions part of the code. 

random image

We decided to start with the button 1, so you can change the button you're working on to keep up with us.

So, what we want to do is to write a different word on Chatter's display by clicking on different buttons, and this is how to do so: 

Since we want to write something on Chatter's display once we press the button 1, we have to clear the display in particular color

Find the "fill frame with" block and drop it inside the purple I/O block:

random image

random image

As you can see, pressing the button 1 causes the background color change to red.

Let's write something on the screen now.

First, find the following block:

random image

random image

We'll start with the word "Hello" in black and with the coordinates 60x50

After that, add the "push frame" block under the write block to ensure that your text and background color change when you press that specific button.

random image

random image

Before we can test whether pressing this specific button causes the desired event, we must first find the "loop forever" block to ensure that your buttons are being scanned at all times. Please remember to use this every time you code something with the buttons, or it will not work.

The "loop forever" button can be found here:

random image

Drag and drop it on the drawing area and look for the I/O "scan buttons" block: 

random image

Drag this I/O block inside the "loop forever" block. Just like this:

random image

You can now test everything by pressing the Run button and then clicking on button 1.

Let's now repeat these steps for three more buttons.

You can either repeat the previous steps or click the purple block to duplicate it.
This will duplicate the purple block and everything within it.

random image

This time, we want to trigger an event once we press the button 2.

We'll now change the background color to blue and write "Hi" in black letters on the same 60x50 coordinates.

Let's duplicate the I/O block two more times. 

Your code should look like this:

random image

So we chose the left and right buttons for the final two buttons.

You can see the colors and the text we wrote in the image above. 

Of course, you can now write any other word you want, as well as change the colors and coordinates.

To see the colors and text changing on the display, press the Run button and then click on the buttons 1, 2, left, and right.