The basics

User interface

random image

When you open CircuitBlocks, you will see a window that looks like this.

It’s pretty simple – starting a new project (we also call them "sketches") can be done by clicking the ‘New project’ button.  

Saved sketches will appear right next to that button and you can access them at any time.

If you encounter any kind of an issue with CircuitBlocks, press the 'Send error report' at the bottom of the main screen. You'll get an error report number - please reach out to us via contact@circuitmess.com and provide your error report number.   


Creating a new project (sketch)

Press on the big "New project" button.

You'll get an option to choose the device and sketch type.

For the device, pick ByteBoi.

For the Sketch type, choose Block.

Press the Create button.

random image

You'll get a screen that looks like this: 

random image

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 C++ appear magically by itself when you drag and drop the colorful blocks.

C++ is one of the most popular programming languages, but it's fairly complex to understand if you've never coded before.

That's why we've created CircuitBlocks - here, you can drag and drop colorful blocks that represent parts of code and see what your program would look like in C++. When you get skilled enough, you will be able to switch directly to textual coding in C++ without the need for colorful blocks.


Toolbar

random image

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. ByteBoi connection indicator - the red dot turns green if your ByteBoi is connected to your computer via a USB cable  

  4. Sprite editor - for drawing characters you want to have on your ByteBoi

  5. Export to binary - saves a binary file of your code to your computer. This is a more advanced function that you won't need for now  

  6. 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 ByteBoi and your computer. In this window, you will later be able to see the messages sent from ByteBoi to your computer via the USB port.  

  7. Close code - with this button, you can close or re-open the code window on the right of the screen. This is useful if you need more screen space for seeing your colored blocks.  

  8. Run - This button will translate the code you have constructed in CircuitBlocks to machine code that ByteBoi understands (beep boop beep boop 1011100101) and send the code to your ByteBoi via the USB port  

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. Light/dark theme switch - you can toggle the background and text color of the code window with this button.   

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

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

Drawing board

random image

The drawing board is where the magic happens.

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