Skip to content

Mates Studio Code Editor


The Genius environment provides more control of the module by allowing users to write custom code/program directly to it. This removes the need for another host controller device such as an Arduino, Raspberry Pi, etc.


It is always advised to complete the user interface before moving into writing any code for a project. This gives a development workflow that will lead to faster overall development.

Writing the Application

After finalizing the graphics, writing the application can be started by simply generating the required code for the widgets and pages being used. From there, the designed program flow can be written into the code.

The example below shows a simple application which includes two gauges which are animated by increasing and decreasing their values.

Increment and Decrement Gauge Values

var val0 := 0;
var val1 := 100;
var inc  := -1;

* User Setup Function
func setup()


* User Loop Function
func loop()
    setWidgetValue(GaugeA0, val0);
    setWidgetValue(GaugeA1, val1);

    if (val0 >= 100 || val0 <= 0)
        inc *= -1;

    val0 += inc;
    val1 -= inc;

For more example projects, refer to the projects list.

Programming Language

Mates Studio compatible products from Breadboard Mates runs 4DGL. This is a simple-to-use programming language developed by 4D Systems for their graphical processors.

For a detailed discussion of the programming language and its syntax, refer to 4DGL Programmer’s Reference Manual.

Internal Functions

Breadboard Mates devices as powered by 4D Systems graphics processors and therefore can be programmed to use the internal functions provided by the processor.

Please refer to the product datasheet for information regarding the processor used. Refer to the following documentation for the internal functions available for each 4D Systems processor.

Code Generation

Writing code for each page and widget is made easier by the Paste Code option. This allows users to generate a code template for activating a page or updating a non-static widget.

To use this feature, first, place the text editor’s blinking cursor to the location you want the code to be in.

Initial Code

After placing the cursor to the desired position, select the target page or widget.

Select Page or Widget

Finally, click the Paste Code button.

Paste Code

This will generate a piece of code that can be edited and used to update the widget selected.

Generate Widget Code

If the page itself was selected when paste code is pressed, the code generated can be used to activate the page.


Static widgets which don’t change in value won’t generate any code.

Shortcut Keys

The following items discusses useful shortcut keys that the code editor accepts.


Highlights all text in the editor


Copies the highlighted text


Cut the highlighted text


Paste the copied/cut text


Find text in code editor. If used while some text is highlighted, the search will automatically use the highlighted text


Find and replace text in code editor. If used while some text is highlighted, the search will automatically use the highlighted text. Items will only be replaced when the Replace (Enter) or Replace All (Ctrl+Enter) button is clicked (or the indicated shortcut key is pressed)