¶ IDE Overview
The MicroBlocks IDE can be run in a browser or in a stand-alone application. Both versions are identical visually and run the same, with the browser version maybe being a bit slower due to the browser overhead.
The picture below shows what one sees when the IDE is started, and its principal areas.
¶ Terminology
Definition of terms commonly used in MicroBlocks:
| Term | Definition |
|---|---|
| Custom Blocks | A set of scripts developed by the user to achieve specific functionality. It can also be referred to as a Custom Function. |
| Script | Single stack of blocks. |
| Library | Specific purpose scripts provided with MicroBlocks to handle various micro device features and functionalities, as well as to enhance standard capabilities of MicroBlocks. |
| Project | A combination of Scripts, Custom Blocks, and Libraries. |
¶ IDE Area Descriptions
Following are descriptions of each area highlighted.
¶ Block Categories
This area contains all the block categories that are used to program in MicroBlocks. They are grouped in nine color-coded groups. As categories are selected, corresponding blocks in that category will be listed in the Blocks Palette area next to it.
For a detailed description of all the blocks, please refer to the Block Categories in the Reference Manual section of the WIKI.
¶ Menu Bar
Displays three system menu icons, as well as the Graph Panel and Connect icons. These are described in detail below.
¶ Start / Stop Buttons
These consist of two icons, Start and Stop, that are used to control the execution of the MicroBlocks programs.
Is should be noted that MicroBlocks programs are usually always running due to the live interactive nature of the IDE.
Start button simulates a micro device power-on by executing all event driven blocks like when started and when [condition].
¶ Library List
The contents of this area reflects the various libraries that are loaded depending on the requirements of the user scripts and micro devices. It could range from totally empty to quite a few. For a detailed description, see Libraries below.
¶ Blocks Palette
As selections are made in the Block Categories area, blocks with those specific functionalities will be listed in this area. From here, the blocks are dragged and dropped onto the Scripting Area to write programs.
¶ Scripting Area
This is the main surface of the MicroBlocks environment where all the coding activities occur. Blocks are dragged and dropped onto this area to build up user scripts and custom blocks (functions).
¶ Scripting Area Operations
Since the scripting area is the most used part of the IDE, it is helpful to mention the operations and use conventions particular to this area.
¶ Block Operations
Blocks that are placed into the scripting area can be freely moved around with the mouse.
Additionally, there various operations one can perform on the blocks and scripts placed here.
¶ drag & drop
As mentioned above, drag and drop movement of the blocks is all too familiar to almost everyone who has spent some time with block based development environments (Scratch, SNAP!, MakeCode, etc).
What is different and very nice in Microblocks is that a block that is clicked on gets a nice drop shadow which highlights it against the background. This 3D effect makes it easy to perceive that the targetted block is in fact in motion, floating over the scripting area surface, even above other script blocks.
¶ block snap
As single or groups of blocks that are moved with the mouse, approach other blocks nearby, a horizontal white line will appear, designating a snapping point.
If one releases the mouse at that moment, the blocks under the mouse will snap to the blocks on the other side of the white line.
¶ block extract
One of the pitfalls of block programming is that it is rather cumbersome to manipulate individual blocks that are in the middle of a group of blocks.
MicroBlocks is one of the few IDEs that handles this very gracefully, by providing a means to extract a block from a group of blocks.
Right clicking any block within a group will display a block level menu that lists, among other options, extract block.
When clicked, the target block (or group of blocks) will be extracted and attached to the mouse pointer to be moved and placed somewhere else.
¶ block right click menu
Since the block right click menu was already mentioned, let's review the operations listed within.
¶ duplicate
Selecting it will make a copy of the single block the mouse is positioned on.
Certain blocks (C-Blocks, IF-Blocks) may contain a bunch of other blocks within.
When duplicate is applied to one of these blocks, then the entire group will be duplicated.
¶ duplicate all
This option is similar to the duplicate, with the difference being that, it duplicates all blocks below the selected one.
Based on the example we have been using, clicking on the repeat block and selecting duplicate all will duplicate the repeat block and all of the blocks under it.
Here again, the point to remember is that, if the "blocks below" are within a C-Block, then duplicate all is constrained to the C-Block.
Second example shows what happens when the first block within the repeat block is clicked.
Only the blocks within the repeat block are duplicated.
¶ copy to clipboard
This is a very handy operation that places a copy of the selected block sets to the clipboard.
These then can be pasted not only within the same project, but also between different projects.
It is even possible to copy/paste between different instances of the MicroBlocks IDE (browser version or stand-alone version).
This operation has a related pair, copy all scripts to clipboard, that is accessed when the scripting area background is clicked.
That one copies all the scripts in the project.
¶ save picture of script
Another handy operation to make an image copy of the script or block selected. The image will be saved in PNG format.
This operation has a related pair, save a picture of all scripts, that is accessed when the scripting area background is clicked.
That one makes an image of all the scripts in the project.
If the show advanced blocks in the MicroBlocks menu is selected, then the advanced version of the operation is active.
This version will display an image scale list, and let the user designate the size percentage of the image to be created (see next operation).
100% would be the size one sees on screen. All others are scaled down from there and will produce smaller versions of the image.
With or without the scale selection active, next step is where a system file dialog is displayed, and the user can designate the save location on their PC.
¶ save picture of script with result
You will see this operation only if the show advanced blocks in the MicroBlocks menu is selected.
As with the other "save picture of script" block, this one makes an image copy of the script or block selected. However, before the picture is snapshot, the block / script content is executed and the result, if displayed, is included in the snapshot. Many of the examples provided in the Reference Manual are done with this option.
Here are a sequence pictures demonstrating this operation.
After the scale selection, a system file dialog is displayed, and the user can designate the save location on their PC.
NOTE: Since this operation waits till the script execution is finished before taking the snapshop, it is NOT posible to take pictures of scripts where endless loops are active.
Check out this version of the example used so far.
Because there is a forever loop before the say display, the script never ends, the say message is never shown, and the save picture of script with result operation never gets to save the image.
REMEMBER: Both save operations described above work on the individual block level, as well as on a sequence of blocks, or entire scripts.
¶ delete block
It deletes the target block or script.
Be careful, currently it is very final.
¶ Script Area Right-Click Menu
The final menu a user can encounter while working in the scripting area is the one displayed when the surface is right-clicked.
While mostly similar to already described menus, it presents two new operations:
¶ clean up
Organizes the script segments and loose blocks on screen into a top down arrangement on the left side of the scripting area.
It cannot be undone !
¶ undrop (ctrl-Z)
Reverses the very last block movement completed. Edits (copy, delete, and paste) do not count as movements. Movements are basically restricted to block location changes done with a clicked mouse.
As a matter of fact, if there were no block or script movements done when the script area was right-clicked, the undrop option is not displayed in the menu.
¶ copy all scripts to clipboard
This is the complementary pair of the copy to clipboard operation. While the other one only copied the target block or script, this one copies all scipts on the scripting area.
It does not copy custom block definitions or libraries loaded.
¶ save a picture of all scripts
This is the complementary version of the save picture of script operation. Instead of a single block or script, this one will make an image of all the scripts in the scripting area in PNG format.
In addition to the mouse and window scroll controls, keyboard arrow keys provide scrolling support while working in this area.
¶ Menu Layout
Next section will cover the menus of the system.
¶ Main Menu Bar
The main menu items consist of: Language, MicroBlocks, and File.
There are two more icons on the main menu bar: Graph Panel and Connect. These two are actually not part of the menus.
The Graph Panel is used by the Output category GRAPH block to display images of data points to be plotted (See Graph block).
The Connect icon is used to display and connect to system USB ports that have micro devices attached to them.
The Advanced menu options with further features and functionality are accessed when the show advanced blocks in the MicroBlocks menu is selected.
¶ Start / Stop Buttons
At the rightmost end of the main menu bar are the two icons Start and Stop, that are used to control the program execution.
¶ Menu Descriptions
The TABBED sections below describe in detail all the contents and functionality of the menus.
Advanced
Advanced
 |
This menu item allows the user to select one of the many languages the MicroBlocks IDE is translated into. Once set, all IDE menus, messages, and code blocks will be presented in that language. Custom... option at the bottom of the menu is used when creating translations for the MicroBlocks IDE. It allows the translator to test the newly created translation file by selecting it from the system menu and applying it. |
|---|
about...
Displays information about the MicroBlocks IDE and Firmware versions.
update firmware on board
This item enables the user to load the latest version of the firmware to the micro device attached. Depending on the conditions, a device selection menu may be presented for the user to choose from. After the selection, different messages prompting for further actions will be displayed.
There are quite a few different types of devices that are supported by the MicroBlocks IDE. See Boards section for detailed information.
Here are some sample prompts for the Adafruit CLUE device:
As the firmware update proceeds, the green USB icon will be off. Upon completion of the update, the connectivity between the micro device and the USB port needs to be reestablished. See USB section.
show advanced blocks
When selected, the advanced options in the menus, as well as advanced blocks in the Block Categories will be enabled.
Once enabled, the menu item will change to hide advanced blocks.
firmware version
Displays the virtual machine firmware version for the micro device.
erase flash and update firmware on ESP board
ESP boards are a special category of boards by Espressive Corp. that feature WIFI capability. They have different technical specifications on how they can be updated. This item totally erases the board's memory content and loads the latest firmware.
A device selection menu is displayed to choose from. After the selection is made, firmware update starts. A graphic display informs of the progress.
 |
 |
|---|
When the update is completed, you may be asked to reestablish the USB connectivity. See USB section.
disable autoloading board libraries
One of the niceties of the MicroBlocks IDE is, that it always tries to make things simpler for the users. Since every micro device has different characteristics, features, and capabilities, MicroBlocks automatically tries to supplement the basic functionalities by loading various libraries.
Here, as an example, are two libraries loaded for the micro:bit device:
When selected, this item disables this functionality; and it is up to the user to load the required libraries.
enable PlugShare when project empty
Another SUPER feature of the MicroBlocks IDE is that it will automatically load a project from the attached micro device, if there is no other project loaded into the IDE.
To enable this feature, all one has to do is select this item in the menu. Once done, the IDE will read the project from the device and then proceed to load it into the IDE.
Here are displays from a micro:bit device, autoloading a project:
 |
 |
|---|
This feature enables users to share projects amongst themselves by simply plugging their devices into he PC.
In MicroBlocks IDE, there is no project structure imposed as in some other IDE environments.
If needed, it is up to the user to implement such a hierarchical setup.
New
If there is a program loaded in the work area, it will display a message, asking for confirmation for clearing the active project.
Upon positive confirmation, starts a clean new scripting area as shown below:
Scripting area is cleared of the previous script blocks. All user added libraries are cleared out. Depending on the micro device type and the setting of the option enable autoloading board libraries, certain libraries are loaded.
If the connect icon is not green and enable PlugShare when project empty is selected, then as soon as the USB connection is established, MicroBlocks will read and load the project from the attached micro device.
Open
This is how previously saved projects on user's PC is loaded into the work area. In addition to the user's own projects, other sample projects in various categories can be loaded.
If there is an active project in the scripting area, a confirmation message is displayed. See File New above.
A file open dialog is presented:
First display is focused on the Examples category, where many MicroBlocks projects for different micro devices and hardware options are presented.
User's own PC directories can be reached by switching to the Computer tab selection on the left. This will present the standard system file open dialog, where one can select previously saved projects.
Open from board
If the connect icon is not green and enable PlugShare when project empty is selected, then this option will be visible in the file menu. It will not be visible if the USB connectivity is established and the connect icon is green.
If there is an active project in the scripting area, a confirmation message is displayed. See File New above.
Assuming the above conditions are met, then as soon as the item is selected, a message to connect the device is displayed:
When the USB connection is established, MicroBlocks will read and load the project from the attached micro device.
Save
Once a project is ready, it needs to be saved to the user's PC.
Selecting SAVE will display a system file dialog, where the user can give the program a name and save it to their PC.
There is no pre-configured file save location or option in MicroBlocks.
Designating the file locations on the PC is the user's responsibility.
export functions as library
When custom blocks are created in a project, they normally will be saved as part of the user project file with an UBP extension.
If, however, it is desirable to make a library out of the custom blocks, and save and load them independently as library code (with an UBL extension), then they will need to be exported from the script and saved into a separate file.
This selection makes that to happen.
It will display a dialog window, where the name of the library can be assigned and saved. The new file will have an UBL extension.
For further specific information on how to create a library, refer to the WIKI menu item: Creating A New Library.
As mentioned earlier, the Connect icon is used to display and connect to system USB ports that have micro devices attached to them.
When clicked, a system USB port menu is shown, with a listing of all USB attached devices on the PC. Selecting an entry and clicking Connect will establish a connection to the corresponding micro device. Upon successful connection, the USB icon will change to one with a green circular background: 
.
It is important to pay attention to the status of this icon. MicroBlocks has a lot of internal automated processes to make the user's life easier when working in the IDE. Automatic updating and synchronisation of the project code on the attached device is one of them. This is only possible when the icon is in green mode.
From time to time, for various reasons, the connection to the micro device might be severed. At these times the icon will not display the green circle. If you encounter this condition, editing of the programs should be paused and the reason for the disconnect should be investigated.
It is advisable not to develop or troubleshoot programs when the connection to the attached micro device is severed, indicated by the absence of the green circle around the USB icon.
MicroBlocks is always live; the user can click individual blocks or scripts to run them without clicking the Start button.
The main thing the Start button does is to simulate device power-on by starting all the scripts with when started and all the when <condition> scripts.
STOP icon stops the execution of the project. All variables are deallocated. All scripts with when started and when <condition> are stopped.
The project loaded onto your micro device will be intact. In fact, you can disconnect it, power it on from an external source, and execute your project apart from the IDE.