Code window and drawing board

Code window and drawing board

Let's go over all the buttons in the code window and drawing board!

Code window

random image


The so-called "Code window" has the following parts:

1. Main code screen - code written in C++ will appear here as you drag and drop colorful blocks on the left side of the screen.  You'll see that some parts of the code are colored in funny colors. Programmers call this syntax highlighting. Basically, what is happening is that different categories of code commands are colored differently so that programmers can understand the code more easily. 

2. Expand - stretches the code window across the entire screen. Press it again to resize it to the half-screen again.    

3. Light/dark theme switch - you can toggle the background and text color of the code window with this button.    

4. Close – closes the code window, the same functionality as the toolbar's ‘Close Code’ button.  


Drawing board

The drawing board is where the magic happens.

random image

It has the following parts:

1. Search bar - type the component's name you are looking for here.

2. Component selector – the blocks are divided into different categories here. Each category has a specific color designated to it.   

3. Drawing area – you will drag the blocks from the component selector and drop them into the drawing area. This is how code is made. Easy peasy!  

4. Center tool - if you get lost when scrolling across the drawing area, press this button, and it will center your view on the blocks you have dropped on the drawing area.  

5. Zoom buttons - to zoom in and out of the drawing area.   
Back to Resources