Basics
Basics
Interface
Starting CB will open a window like this.
It’s pretty simple – starting a new project (sketch) 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.
Whenever you encounter an error, press the 'Send error report' at the bottom of the main screen. You'll get the report and the error number - you can use that in the CircuitMess community forum so that our team members can help you more efficiently.
Starting a new sketch
When starting a new sketch you'll get an option to choose from a Ringo project and a Nibble project, as well as a code project and a block project.
Since this tutorial is going to be focused on Nibble, we're going to be selecting a Nibble project.
We've added a whole new layer to the CircuitBlocks - you don’t have to use the blocks anymore, but rather can write whole games by using C/C++ just like in Arduino IDE.
However, we're going to focus on the block building, rather than code writing.
What you can also do, is to make part of your game using blocks and then transfer it to the coding version to add some additional code, like buzzer sounds. This will allow you to use the easier way of coding (via blocks) most of the time and in the end, just add a few details to top it off.
You can always copy the code from the block version and switch it to the coding version. However, you cannot go from the coding version back to the block version. That’s why we encourage you to use the block version whenever you can.
Code project is pretty much the same thing you'll get in Arduino IDE - straight up Arduino C/C++ that will run your programs based on the code you've written.
On the other hand, block projects are the real ones here. There you'll be able to generate program code from the blocks that you drag-and-drop. This is a real
Scratch-like experience and it is highly recommended to everyone beginning their programming career or learning the ins and outs of the Nibble library. The code that is generated can then be copied and modified in the code project.
We advise that you start the block project regardless of your programming skills just so you can get to know the device better!
This is the main interface you will be looking at most of the time.
On the top of the screen, there is a toolbar from which you can access main program functionalities.
The block selection tool is located on the left side.
In the middle of the screen is where you’ll be “drawing” your code with the blocks.
On the right is where those drawings will be translated into code. It is the same code editor used in the VS Code, but it is not editable. If you want to edit the code, you have to copy it and transfer it to a new code based project.
If you don’t like the dark mode (blasphemy if you ask us!), you can easily switch it by pressing the light bulb button in the top right corner of the code editor.
Toolbar
There are seven main components here:
- Back to the main menu – returns to the main menu without saving
- Save/Save As… – saves the file in the default sketch directory
- Nibble connected indicator – indicates whether the console is connected or not
- Export to binary – creates .bin file of the code which can be directly uploaded to the console
- Open serial - open Serial port
- Close Code – closes the code editor to expand the ‘drawing’ area
- Run – compiles and uploads the code to your console
When the console is not connected, the red ‘Run’ button will turn grey and the indicator will say ‘Nibble disconnected’ with the red dot instead of a green one.
While a code you’ve written is being uploaded, a progress bar will appear right below the toolbar which indicates how much data has been compiled/uploaded so far.
When it reaches 50% it means that the compilation is over and when it reaches 100% it means that the upload to the console is finished.
- Main code screen – this is where the blocks will appear in the textual format, code words are colored while the regular text is white
- Light mode switch – switch the background of the code editor between black and white
- Expand – stretches the code editor over the whole window
- Close – closes the code editor, same functionality as ‘Close Code’ button from the toolbar
The ‘Drawing board’ is the most complex part of the IDE. It’s where all the magic happens. It is divided into two main sections. On the left is a board where you select the blocks and on the right is a board where you place them. Each type of block has its own color so it’s easily recognizable.
- Search bar – dynamic search bar with which you can easily find any component you’re looking for
- Component selector – divided into categories by names and colors
- Drawing board – a place where you create your programs by placing the components in a certain order
- Center icon - places your blocks in the center of the board
- Zoom buttons - zoom in and out of the board
Each of the components will be explained in detail and come with a few examples of how to use them together.