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.
One very important button is ‘Restore Ringo Firmware’. If your Ringo is connected to the computer, it will automatically detect it and allow you to restore the newest software with just a push of a button.
So any time you want to revert to the default software after working on a sketch, push that button.
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 code project and a block project.
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 Ringo 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 phone and the firmware 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 as of right now, it is read-only and non-editable.
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 eight 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
- Ringo connected indicator – indicates whether the phone is connected or not
- Export to binary – creates .bin file of the code which can be directly uploaded to the phone
- Open serial - open Serial port
- Close Code – closes the code editor to expand the ‘drawing’ area
- Minimal - Toggles minimal option
- Run – compiles and uploads the code to your phone
When the phone is not connected, the red ‘Run’ button will turn grey and the indicator will say ‘Ringo 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 phone is finished.
MINIMAL BUTTON
One important thing to know about the yellow button 'Minimal' is that it does the following - compiling it with the minimal on, your program will compile much faster, but it will not have the basic phone functions - calling, texting, main menu... This is particularly useful when developing an app and when you're fixing small bugs - we recommend using it ONLY when developing an app. 
- 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
If you are writing some more complex apps, you can copy this code and paste it to one of the other, more complex IDEs (like Arduino or VS Code) from where you will be able to edit it and write more lines.
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