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:

1. Back to the main menu– returns you to the home screen without saving
2. Save/Save As– saves your sketch, make sure to press this button from time to time, and before closing CircuitBlocks
3. 视频素材 connection indicator- the red dot turns green if your 视频素材 2.0 is connected to your computer via a USB cable
4. 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 视频素材 and your computer. In this window, you will later be able to see the messages sent from 视频素材 to your computer via the USB port.
5. Hide code editor- to hide the right side of the user interface showing the code in MicroPython.
6. More options- you can click here to enter Sprite Editor, Device Connection Info, Soft Reboot, Restore Stock Firmware, and to Log out.
7. Run- This button will translate the code you have constructed in CircuitBlocks tomachine codethat 视频素材 understands (beep boop beep boop 1011100101) and send the code to your 视频素材 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: 
   
   

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.