CircuitBlocks Tutorial

 

 

CircuitBlocks Tutorial #1 – Basics

by

Welcome to the CircutBlocks tutorial!

Here is where you learn basic CircuitBlocks functionalities as well as start working on your first programs.

If you don’t know, CircuitBlocks is a Scratch-based (a visual block programming language) IDE in which you can easily and effectively create and upload your projects to the Ringo phone.

This tutorial is going to be broken down in several chapters, each representing one of the important aspects of the IDE.

NOTE: CircuitBlocks will be referred to as CB in the future

Installation

CB is supported on all major platforms. Installation process is really easy as you just need to download the file and install it just like you would with any other program on your preferred platform.

Click on the tab of your OS to see the details.

  • Go to the CircuitBlocks release page
  • Download the latest version *Windows.exe (ex. CircuitBlocks-1.0.1-Windows.exe)
  • Double-click the file to run the executable
  • CB will automatically install and create a new desktop shortcut

 

 

There are two ways of installing CB on Linux

Installation:

  • Go to the CircuitBlocks release page
  • Download the latest version *Linux_amd64.deb (ex. CircuitBlocks-1.0.1-Linux_amd64.deb)
  • Double-click the file to run the installation (Ubuntu)
  • Write inside a terminal sudo dpkg -i  <path to the downloaded file .deb>  (Other Linux distros)
  • CB will automatically install and create a desktop entry

Stand-alone (AppImage):

  • Go to the CircuitBlocks release page
  • Download the latest version *Linux.AppImage (ex. CircuitBlocks-1.0.1-Linux.AppImage)
  • Right-click on the file and select ‘Properties’
  • Go to Permissions and tick ‘Allow executing file as program’
  • Double-click the file and the installation will complete automatically

  • Go to the CircuitBlocks release page
  • Download the latest version *Mac.dmg (ex. CircuitBlocks-1.0.1-Mac.dmg)
  • Move the files in ‘Applications’ folder
  • CB will be installed automatically

 

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.

Starting a new sketch

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.

Starting a new sketch

There are six main components here:

  1. Back to main menu – returns to the main menu without saving
  2. Save/Save As… – saves the file in the default sketch directory
  3. Makerphone/Ringo connected indicator – indicates whether the phone is connected or not
  4. Export to binary – creates .bin file of the code which can be directly uploaded to the phone
  5. Close Code – closes the code editor to expand the ‘drawing’ area
  6.  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 ‘Makerphone 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.

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.

  1. Main code screen – this is where the blocks will appear in the textual format, code words are colored while regular text is white
  2. Light mode switch – switch the background of the code editor between black and white
  3. Expand – stretches the code editor over the whole window
  4. Close – closes the code editor, same functionality as ‘Close Code’ button from the toolbar
  1. Search bar – dynamic search bar with which you can easily find any component you’re looking for
  2. Component selector – divided into categories by names and colors
  3. Drawing board – a place where you create your programs by placing the components in a certain order
  4. Trash can – used to discard a componing by dragging it and dropping on an icon

Each of the components will be explained in detail and come with a few examples on how to use them together.

  1. Main code screen – this is where the blocks will appear in the textual format, code words are colored while regular text is white
  2. Light mode switch – switch the background of the code editor between black and white
  3. Expand – stretches the code editor over the whole window
  4. Close – closes the code editor, same functionality as ‘Close Code’ button from the toolbar

Now, let's learn some more!

There are some different blocks...
#2 - Types of Blocks

Subscribe To Our Newsletter

 

Join our mailing list to receive the latest news and updates from our team.

You have Successfully Subscribed!

You have Successfully Subscribed!