Let's start! Step by step!
Let's get down to business!
Before doing everything, make sure you have completed all the preceding steps: you have downloaded CircuitBlocks Agent and MicroPython, connected your device to the PC, and turned it on.
The first thing we'll learn is how to write text on Chatter's display.
You only need a Display block section to write something on Chatter's display.
It's quite simple!
It's quite simple!
Please click on the mentioned section, and choose a "fill frame with" block.
We'll use this block to choose the background color that will appear once we run this sketch.
Drag and drop the selected block into the drawing area.
You can choose whichever color you like, but this time, we chose navy.
Now, let's drag and drop the block saying "write string". This block will be used whenever you want to write anything on Chatter's display.
If you want to write some other word instead of a string, you can simply delete the string, and write the word of your choice.
You can also choose the color of the text, and the x and y mark coordinates where the text will appear on display.
We decided to write "Hello, Chatter!" on the screen, and we put both coordinates to be 40.
The last thing you need to do in this sketch is to click on a "push frame" block.
We need to use this block to ensure this code will appear on display.
When you press the big red Run button, the text will appear on Chatter's screen.
Drawing different shapes on Chatter's display
In this sketch, we added two more examples for you.
You will discover how to draw ellipses and rectangles.
We'll stay in the display block section a little bit more.
As always, it is good to start by choosing the background color. We simply duplicated the block we made for the text example to save us some time.
You can duplicate blocks by clicking on the right button on your mouse and choosing the duplicate option from the menu.
Now, go back to the display block section and choose the "draw filled rectangle" block.
As you can see, you can specify whether your rectangle will be filled or outlined, which color it will be, and determine its size and coordinates.
We decided to create a white-filled rectangle with a navy background. It will be 4 (width) x 5 (height), with coordinates of x 20 and y 20.
The only thing left to do is add the "push frame" block to ensure our rectangle appears on the screen.
Here's what your code should look like:
Click on the Run button, and check Chatter's display.
Finally, let's try drawing another shape - an ellipse.
If you drew the rectangle in the previous example successfully, this will be a piece of cake for you.
Return to the display block section and select the "fill frame with" block, or simply duplicate it as we did before.
Then, in the display block section, look for the "draw filled ellipse" block and drag it into the drawing area.
We chose navy as the background color once more.
We did, however, choose to outline the ellipse in red this time. The size and coordinates are shown in the photo above.
As you already know, one last thing left to do is to put the "push frame" button at the end of the code to make sure it will be shown on Chatter's display.
Now, click the Run button, and check out Chatter's display. Cool, right?
You can now change the shapes, colors, sizes, and text, but we're about to start a new chapter in which we'll learn how to code Chatter's buttons.