Introduction

Mates Studio’s Genius environment provides users with the ability to not only design their own widget and page layouts but also to write their own program to directly control how the widgets in the display will behave. This also allows users to design custom features/functionality that they need which Commander and Architect environments are not able to provide.

Saved widget configurations can be loaded and used in Architect, Genius and Builder projects. Saved page configurations can also be used in Commander environment.

Unlike Commander and Architect environments, this environment does not include the Mates Serial Command protocol.
To create a new or open a Genius project, please refer to Mates Studio User Guide.

Application Menus

This section briefly discusses the menus available for the Genius environment.

The following are the menu groups:

  • File
  • Edit
  • Graphics
  • Project
  • Tools
  • Help

Edit Menu

The File Menu group includes items that can be used for file management. It includes the following:

Item Description
New Opens the Setup Window to create new project
Open… Opens a window prompting to select a project file to open
Open Recent Provides a list of recently opened projects
Project Book Provides a list of projects found in the default save location
Examples Provides a list of examples included with Mates Studio
Close Closes the current project
Save Saves the project
Save As… Saves the project to a different location and/or filename
Exit Exits Mates Studio

File Menu

The Edit Menu group includes items that can be used with the code/text editor of the Genius environment. This includes basic editing functionalities such as copying and pasting, undo and redo, etc.

Item Description
Undo Cancel previous text editor action
Redo Redo previously cancelled text editor action
Cut Copies the highlighted text for moving to another location
Copy Copies the highlighted text for pasting
Paste Adds previously copied text to the current cursor position
Select All Select all text available in the text editor
Find Opens the search tool of the text editor
Find Next Moves to the next occurrence of the text
Find Previous Moves to the previous occurrence of the text

Graphics Menu

The Graphics Menu group includes items that can be used for managing the UI design. This includes page and widget management tools and options as shown:

 

Item Description
Capture Snapshot Saves a snapshot of the selected page as an image file
Add Page Opens a Select Page Template window
Copy Page Copies the selected page for pasting
Paste Page Pastes the recently copied page to the current project
Delete Page Deletes the selected page
Save Page Saves the active page as a configuration file
Add Widget Opens a Select Widget window
Cut Widget Copies the selected widget for moving to another page
Copy Widget Copies the selected widget for pasting
Paste Widget Pastes the recently copied widget
Delete Widget Deletes the selected widget
Save Widget Saves the selected widget as a configuration file

Project Menu

The Project Menu group includes items that can be used for managing the project itself. This includes project compilation, upload and project settings as shown:

Item Description
Compile Compiles the project to check for errors
Upload Compiles and upload the project if there are no errors
Export Compiled Files Compiles and exports project files if there are no errors
Module Provides option to change target module
Orientation Provides option to change module orientation
Page Transition Provides option to select transitioning effect
Show Project Folder Opens the location of the project

Tools Menu

The Tools Menu group includes helpful items that can be utilized during development.

 

Item Description
Port Provides the option to scan and select COM port to use
Open Controller Opens the Controller window for testing the commands
Get Module Info Checks the module connected in the selected port
Load PmmC Opens the Load PmmC window for updating firmware
Activate License Provides the option to activate full version of the environment

Help Menu

TO BE ADDED

Genius Environment Areas

Project Toolbar

The project toolbar includes graphical buttons that can be used like each of their Menu Item counter parts. The toolbar is as shown below:

From left to right, the buttons are described in the table below:

 

Item Description
Compile Compiles the project to check for errors
Upload Compiles and upload the project if there are no errors
New Project Opens the Setup Window to create new project
Open Project Opens a window prompting to select a project file to open
Save Project Saves the project

Graphics Toolbar

The Graphics toolbar includes graphical buttons and dropdown menu that can be used like each of their Menu Item counter parts. The toolbar is as shown below:

From left to right, the buttons are described in the table below:

 

Item Description
Copy Page Copies the selected page for pasting
Paste Page Pastes the recently copied page to the current project
Capture Page Saves a snapshot of the selected page as an image file
Delete Page Deletes the selected page
Add Widget Opens a Select Widget window
Copy Widget Copies the selected widget for pasting
Cut Widget Copies the selected widget for moving to another page
Paste Widget Pastes the recently copied widget
Delete Widget Deletes the selected widget
Load Configuration Loads a widget or page configuration file
Save Configuration Saves the selected a widget or page as a configuration file
Paste Code Pastes a code snippet for the widget/page in the current cursor position in the text editor
Page/Widget Select Lists the page and the widgets in the selected page for selection

Page Selection Column

The Page Selection column provides the ability to add pages to the project and select the active page for editing.

Page Editor Column

The Page Editor column provides the ability to select and move widgets in the active page.

Properties Column

The Properties column provides the ability to modify page and widget parameters.

Designing a Genius Project

This section discusses the common procedures when designing the user interface for a new Genius project.

Modifying Page Background

A new Genius project includes a blank page with a default black background color.

Each page can have either a background color or image.

Select the desired background Type for your page.

If the Page’s background Type is Color, the Color property can be modified with a custom color value as shown.

If the Page’s background Type is Image, the Image property can be modified by clicking the value cell and selecting an image file.

After selecting a file, this is embedded into the project and the filename is displayed as shown.

The image will be used as the background as shown in the Page Editor.

Adding a New Page

To add a new page, simply click in the Add Page button.

This will open the Select Page Template window that provides a selection of simple page background designs.

Choose a page template and click Select to proceed.

The new page will be added with the chosen design.

Deleting a Page

An extra unwanted page can be deleted by clicking the Delete Page button while the target page is selected.

A confirmation window will open. Simply click Yes to proceed or No to cancel.

Note: Deleting a Page performs an automatic page and widget renumbering. Therefore, it is best to complete the user interface design before developing code for the host controller.

Adding a New Widget

To add a widget to the active page, click the Add Widget button.

This will open the Select Widget window

This window provides the option to either select a widget with its default property values or select a pre-made template with custom designs from the BBM team and community.

Selecting a Widget

Select the widget category from the tabs on the left.

Select the widget type from the list.

Click Confirm to proceed.

Selecting a Template

Click Browse Templates to change the selection to the pre-designed widgets.

Select the template category from the tabs on the left.

Select the widget type from the list.

Click Confirm to proceed.

Modifying Widget Properties

Widget properties, including color, part count, size, minimum and maximum value, can be modified from the properties table.

Copying a Widget

Select the target widget

While the target widget is selected, press the Copy Widget button as shown. This operation can also be done using the shortcut keys Alt+C.

If the widget is to be copied to another page, navigate to the target page.

After copying a widget, press the Paste Widget button as shown. This operation can also be done using the shortcut keys Alt+V.

The widget will be copied at the same position and will be automatically selected. Drag the widget to your desired position.

Moving Widget to Another Page

Select the target widget

While the target widget is selected, press the Cut Widget button as shown. This operation can also be done using the shortcut keys Alt+X.

Navigate to the target page.

After performing a cut operation, press the Paste Widget button as shown. This operation can also be done using the shortcut keys Alt+V.

The widget will be moved to the target page at the same position and will be automatically selected. Drag the widget to your desired position.

Deleting a Widget

An extra unwanted widget can be deleted by clicking the Delete Widget button while the target widget is selected.

A confirmation window will open. Simply click Yes to proceed or No to cancel.

Note: Deleting a widget performs an automatic widget renumbering. Therefore, it is best to complete the user interface design before developing code for the host controller.

Page and Widget Configurations

Save Configuration

Select the target widget or the current page

While the target widget is selected, press the Save Configuration button as shown.

Provide a short description for the widget or page.

Click the Confirm button to confirm.

A Save Configuration window will open.

Input an appropriate filename for the configuration and click on Save button.

Load Configuration

A previously saved widget or page configuration can be loaded and added to the current project. To start simply press the Load Configuration button as shown.

A Load Configuration window will open.

Navigate to the configuration file and click Open to continue.

The widget will be added and will be automatically selected. Drag the widget to your desired position.

Writing Code for the Project

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.

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

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

Generating Code for Page and Widget

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.

After placing the cursor to the desired position, click the Paste Code button.

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

If the page itself was selected when paste code is pressed, the code generated can be used to activate the page.
Note: Static widgets which don’t change in value won’t generate any code.

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.

Copy to Clipboard

For more example projects, refer to the Breadboard Mates website.

Running the Project

Identifying the Correct Port

To successfully upload a project, update the firmware and control a programmed display, the correct target port needs to be selected. The easiest way to confirm if you are using the correct port is by opening Window’s Device Manager.

Before connecting the module to the computer, open Device Manager. Next, connect the module and the window will refresh.


As shown under Ports (COM & LPT), a device is now connected to COM6. If multiple devices are shown, the device recently added is the correct port.

Selecting the Target Port

After identifying the correct port, the target port for the project can be selected.

As shown above, there is no port detected. By clicking Scan, the application will search for connected ports that the target product might be using.

After the scan, Mates Studio will automatically select one of the detected COM ports. If this is not the port you need, simply select the appropriate port.

Uploading the Project

After finalizing the project, it can be uploaded to the target device specified by the selected port.
Before uploading, the following needs to be confirmed:
• The port selected is correct and the target product is connected.
• The port selected is not being used by other applications or other Mates Studio windows. (Read section Establishing Connection for a tip on how to easily confirm that the port is not busy)
After checking the items above, upload the project by clicking the Upload button.

Uploading unsaved projects will automatically open a Save Project window before the application proceeds with uploading the project to the target device.
The project will be compiled for graphical resources.

Afterwards, the project will be compiled, and the results will be shown.

The program will proceed with the upload after a successful compilation.

Simply wait for the process to finish successfully. Once it completes, the module will show the first Page of the Genius project.

Back to Resource Centre

Share this article on socials

Introduction

Mates Studio’s Genius environment provides users with the ability to not only design their own widget and page layouts but also to write their own program to directly control how the widgets in the display will behave. This also allows users to design custom features/functionality that they need which Commander and Architect environments are not able to provide.

Saved widget configurations can be loaded and used in Architect, Genius and Builder projects. Saved page configurations can also be used in Commander environment.

Unlike Commander and Architect environments, this environment does not include the Mates Serial Command protocol.
To create a new or open a Genius project, please refer to Mates Studio User Guide.

Application Menus

This section briefly discusses the menus available for the Genius environment.

The following are the menu groups:

  • File
  • Edit
  • Graphics
  • Project
  • Tools
  • Help

Edit Menu

The File Menu group includes items that can be used for file management. It includes the following:

Item Description
New Opens the Setup Window to create new project
Open… Opens a window prompting to select a project file to open
Open Recent Provides a list of recently opened projects
Project Book Provides a list of projects found in the default save location
Examples Provides a list of examples included with Mates Studio
Close Closes the current project
Save Saves the project
Save As… Saves the project to a different location and/or filename
Exit Exits Mates Studio

File Menu

The Edit Menu group includes items that can be used with the code/text editor of the Genius environment. This includes basic editing functionalities such as copying and pasting, undo and redo, etc.

Item Description
Undo Cancel previous text editor action
Redo Redo previously cancelled text editor action
Cut Copies the highlighted text for moving to another location
Copy Copies the highlighted text for pasting
Paste Adds previously copied text to the current cursor position
Select All Select all text available in the text editor
Find Opens the search tool of the text editor
Find Next Moves to the next occurrence of the text
Find Previous Moves to the previous occurrence of the text

Graphics Menu

The Graphics Menu group includes items that can be used for managing the UI design. This includes page and widget management tools and options as shown:

 

Item Description
Capture Snapshot Saves a snapshot of the selected page as an image file
Add Page Opens a Select Page Template window
Copy Page Copies the selected page for pasting
Paste Page Pastes the recently copied page to the current project
Delete Page Deletes the selected page
Save Page Saves the active page as a configuration file
Add Widget Opens a Select Widget window
Cut Widget Copies the selected widget for moving to another page
Copy Widget Copies the selected widget for pasting
Paste Widget Pastes the recently copied widget
Delete Widget Deletes the selected widget
Save Widget Saves the selected widget as a configuration file

Project Menu

The Project Menu group includes items that can be used for managing the project itself. This includes project compilation, upload and project settings as shown:

Item Description
Compile Compiles the project to check for errors
Upload Compiles and upload the project if there are no errors
Export Compiled Files Compiles and exports project files if there are no errors
Module Provides option to change target module
Orientation Provides option to change module orientation
Page Transition Provides option to select transitioning effect
Show Project Folder Opens the location of the project

Tools Menu

The Tools Menu group includes helpful items that can be utilized during development.

 

Item Description
Port Provides the option to scan and select COM port to use
Open Controller Opens the Controller window for testing the commands
Get Module Info Checks the module connected in the selected port
Load PmmC Opens the Load PmmC window for updating firmware
Activate License Provides the option to activate full version of the environment

Help Menu

TO BE ADDED

Genius Environment Areas

Project Toolbar

The project toolbar includes graphical buttons that can be used like each of their Menu Item counter parts. The toolbar is as shown below:

From left to right, the buttons are described in the table below:

 

Item Description
Compile Compiles the project to check for errors
Upload Compiles and upload the project if there are no errors
New Project Opens the Setup Window to create new project
Open Project Opens a window prompting to select a project file to open
Save Project Saves the project

Graphics Toolbar

The Graphics toolbar includes graphical buttons and dropdown menu that can be used like each of their Menu Item counter parts. The toolbar is as shown below:

From left to right, the buttons are described in the table below:

 

Item Description
Copy Page Copies the selected page for pasting
Paste Page Pastes the recently copied page to the current project
Capture Page Saves a snapshot of the selected page as an image file
Delete Page Deletes the selected page
Add Widget Opens a Select Widget window
Copy Widget Copies the selected widget for pasting
Cut Widget Copies the selected widget for moving to another page
Paste Widget Pastes the recently copied widget
Delete Widget Deletes the selected widget
Load Configuration Loads a widget or page configuration file
Save Configuration Saves the selected a widget or page as a configuration file
Paste Code Pastes a code snippet for the widget/page in the current cursor position in the text editor
Page/Widget Select Lists the page and the widgets in the selected page for selection

Page Selection Column

The Page Selection column provides the ability to add pages to the project and select the active page for editing.

Page Editor Column

The Page Editor column provides the ability to select and move widgets in the active page.

Properties Column

The Properties column provides the ability to modify page and widget parameters.

Designing a Genius Project

This section discusses the common procedures when designing the user interface for a new Genius project.

Modifying Page Background

A new Genius project includes a blank page with a default black background color.

Each page can have either a background color or image.

Select the desired background Type for your page.

If the Page’s background Type is Color, the Color property can be modified with a custom color value as shown.

If the Page’s background Type is Image, the Image property can be modified by clicking the value cell and selecting an image file.

After selecting a file, this is embedded into the project and the filename is displayed as shown.

The image will be used as the background as shown in the Page Editor.

Adding a New Page

To add a new page, simply click in the Add Page button.

This will open the Select Page Template window that provides a selection of simple page background designs.

Choose a page template and click Select to proceed.

The new page will be added with the chosen design.

Deleting a Page

An extra unwanted page can be deleted by clicking the Delete Page button while the target page is selected.

A confirmation window will open. Simply click Yes to proceed or No to cancel.

Note: Deleting a Page performs an automatic page and widget renumbering. Therefore, it is best to complete the user interface design before developing code for the host controller.

Adding a New Widget

To add a widget to the active page, click the Add Widget button.

This will open the Select Widget window

This window provides the option to either select a widget with its default property values or select a pre-made template with custom designs from the BBM team and community.

Selecting a Widget

Select the widget category from the tabs on the left.

Select the widget type from the list.

Click Confirm to proceed.

Selecting a Template

Click Browse Templates to change the selection to the pre-designed widgets.

Select the template category from the tabs on the left.

Select the widget type from the list.

Click Confirm to proceed.

Modifying Widget Properties

Widget properties, including color, part count, size, minimum and maximum value, can be modified from the properties table.

Copying a Widget

Select the target widget

While the target widget is selected, press the Copy Widget button as shown. This operation can also be done using the shortcut keys Alt+C.

If the widget is to be copied to another page, navigate to the target page.

After copying a widget, press the Paste Widget button as shown. This operation can also be done using the shortcut keys Alt+V.

The widget will be copied at the same position and will be automatically selected. Drag the widget to your desired position.

Moving Widget to Another Page

Select the target widget

While the target widget is selected, press the Cut Widget button as shown. This operation can also be done using the shortcut keys Alt+X.

Navigate to the target page.

After performing a cut operation, press the Paste Widget button as shown. This operation can also be done using the shortcut keys Alt+V.

The widget will be moved to the target page at the same position and will be automatically selected. Drag the widget to your desired position.

Deleting a Widget

An extra unwanted widget can be deleted by clicking the Delete Widget button while the target widget is selected.

A confirmation window will open. Simply click Yes to proceed or No to cancel.

Note: Deleting a widget performs an automatic widget renumbering. Therefore, it is best to complete the user interface design before developing code for the host controller.

Page and Widget Configurations

Save Configuration

Select the target widget or the current page

While the target widget is selected, press the Save Configuration button as shown.

Provide a short description for the widget or page.

Click the Confirm button to confirm.

A Save Configuration window will open.

Input an appropriate filename for the configuration and click on Save button.

Load Configuration

A previously saved widget or page configuration can be loaded and added to the current project. To start simply press the Load Configuration button as shown.

A Load Configuration window will open.

Navigate to the configuration file and click Open to continue.

The widget will be added and will be automatically selected. Drag the widget to your desired position.

Writing Code for the Project

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.

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

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

Generating Code for Page and Widget

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.

After placing the cursor to the desired position, click the Paste Code button.

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

If the page itself was selected when paste code is pressed, the code generated can be used to activate the page.
Note: Static widgets which don’t change in value won’t generate any code.

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.

Copy to Clipboard

For more example projects, refer to the Breadboard Mates website.

Running the Project

Identifying the Correct Port

To successfully upload a project, update the firmware and control a programmed display, the correct target port needs to be selected. The easiest way to confirm if you are using the correct port is by opening Window’s Device Manager.

Before connecting the module to the computer, open Device Manager. Next, connect the module and the window will refresh.


As shown under Ports (COM & LPT), a device is now connected to COM6. If multiple devices are shown, the device recently added is the correct port.

Selecting the Target Port

After identifying the correct port, the target port for the project can be selected.

As shown above, there is no port detected. By clicking Scan, the application will search for connected ports that the target product might be using.

After the scan, Mates Studio will automatically select one of the detected COM ports. If this is not the port you need, simply select the appropriate port.

Uploading the Project

After finalizing the project, it can be uploaded to the target device specified by the selected port.
Before uploading, the following needs to be confirmed:
• The port selected is correct and the target product is connected.
• The port selected is not being used by other applications or other Mates Studio windows. (Read section Establishing Connection for a tip on how to easily confirm that the port is not busy)
After checking the items above, upload the project by clicking the Upload button.

Uploading unsaved projects will automatically open a Save Project window before the application proceeds with uploading the project to the target device.
The project will be compiled for graphical resources.

Afterwards, the project will be compiled, and the results will be shown.

The program will proceed with the upload after a successful compilation.

Simply wait for the process to finish successfully. Once it completes, the module will show the first Page of the Genius project.

Back to Resource Centre

Share this article on socials