The basics
Now that we are ready to start coding, we should become familiar with the user interface and the block sections.
On the top of the screen, there is a toolbar with a few buttons.
The block selection bar is located on the far left - you can take the blocks from there and drop them into the "drawing" area in the middle of the screen.
In the middle of the screen is where you’ll be “drawing” your code with colorful blocks.
On the right side of the screen, you will see code written in MicroPython appear magically by itself when you drag and drop the colorful blocks.
Here, you can drag and drop colorful blocks that represent parts of code and see what your program would look like in MicroPython. When you get skilled enough, you will be able to switch directly to textual coding in MicroPython without the need for colorful blocks.
Toolbar
Here's a short explanation of what the buttons in the window toolbar do:
- Back to the main menu – returns you to the home screen without saving
- Save/Save As – saves your sketch, make sure to press this button from time to time, and before closing CircuitBlocks
- Chatter 2.0 connection indicator - the red dot turns green if your Chatter 2.0 is connected to your computer via a USB cable
- Serial monitor - this button opens a window that we call the "Serial monitor". "Serial" is a nickname for a type of communication that is happening between Chatter and your computer. In this window, you will later be able to see the messages sent from Chatter to your computer via the USB port.
- Hide code editor - to hide the right side of the user interface showing the code in MicroPython.
- More options - you can click here to enter Sprite Editor, Device Connection Info, Soft Reboot, Restore Stock Firmware, and to Log out.
- Run - This button will translate the code you have constructed in CircuitBlocks to machine code that Chatter understands (beep boop beep boop 1011100101) and send the code to your Chatter via the USB port
Let's go over that three dots button.
The first thing you can enter is the Sprite editor that looks like this:
This is what it looks like when you start creating your own sprite:
3. Eraser - to erase any unwanted mistakes.
4. Paint bucket - used to paint a selected area with a specific color or to paint an uncolored area with a specific color.
5. Color dropper - this tool is used to match any color in an image.
6. Color picker - to select a color you want to use.
7. Resolution of the sprite - this is the size of the sprite and it is measured in pixels. A pixel is the smallest controllable element of a picture represented on the screen.
8. Sprite name - you can give your sprite whatever name you want.
9. Close - for exiting the drawing area and saving the sprite.
10. Save indicator - this indicates whether or not the sprite or changes you made to the sprite were saved. After you save the sprite, it will appear in the My Sprites section.
Here you can choose from a variety of different premade sprites or create your own sprite.
Also, if you click on one of the premade sprites, you can change it!
This is what it looks like when you start creating your own sprite:
Let's see what each icon means:
1. Drawing section - the section in which you will draw your sprite.
2. Paint brush - tool for drawing your sprite.
3. Eraser - to erase any unwanted mistakes.
4. Paint bucket - used to paint a selected area with a specific color or to paint an uncolored area with a specific color.
5. Color dropper - this tool is used to match any color in an image.
6. Color picker - to select a color you want to use.
7. Resolution of the sprite - this is the size of the sprite and it is measured in pixels. A pixel is the smallest controllable element of a picture represented on the screen.
8. Sprite name - you can give your sprite whatever name you want.
9. Close - for exiting the drawing area and saving the sprite.
10. Save indicator - this indicates whether or not the sprite or changes you made to the sprite were saved. After you save the sprite, it will appear in the My Sprites section.