Introduction

Mates Studio’s Architect environment provides users with the ability to design their custom page layouts using a collection of configurable graphical widgets. This allows users to create unique widget and page designs that can be saved for future use.

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

Like the Commander environment, Architect utilizes the same command protocol and host controller simulator.
To create a new or open an Architect project, please refer to Mates Studio User Guide.

Application Menus

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

The following are the menu groups:

  • File
  • Graphics
  • Project
  • Tools
  • Help

File 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

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
Baud Rate Provides option to set baud rate for communicating
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

Architect 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 an Architect Project

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

Modifying Page Background

A new Architect 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.

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, an information window containing the compilation results will be shown.

Click Proceed to continue with the upload.

The graphical resources will be uploaded, and the display will be programmed with the Architect project.

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

Controlling a Programmed Module

After uploading an Architect project, the Control window can be opened and used to control the connected display module.

The Control window provides the following:
1. Page Navigation column
2. Main Control column
3. Command Viewer column

Establishing Connection

To communicate and control the display, the application needs to first connect to the module. After confirming the selected port, click the Connect button to establish connection.

The LED indicator will display a bright color after successfully establishing connection.

It is also IMPORTANT to ensure that the module sends the ready signal before using the controls. This can be checked from the Command Viewer column as shown:

Tip: Connecting to the display can be used to ensure that the port is not busy and is safe for reprogramming. If an error occurs when trying to connect, the port is being used by another software or another Mates Studio window.

Navigating the Pages

The display will always show the first page, Page0, initially. Other pages included in the project can easily be activated by using clicking the corresponding item in the Page Navigation column.

After activating another page, the Main Control column will show the widgets present in the active form and the Command Viewer column will show the data exchanged that happened to change the active page.

Controlling the Widgets

Different control interfaces are provided for different type of widgets. Here are some of the control interfaces for the available widgets.

  1. GET
    Retrieves the current value of the widget.
  2. ANIMATE
    Starts and ends widget animation.
  3. SET
    Sends the value specified by the input box.
  1. CLR
    Clears the printed values
  2. COLOR
    Sets the font color to use in next print.
  3. ADD
    Appends the value in the input box.
  1. ANIMATE
    Starts and ends widget animation.
  2. SET
    Sends the value specified by the input box.
  1. SET
    Sends the value specified by the input box

By using the control interfaces, the project can be simulated, and the messages exchanged by the host controller and the module will be shown in the Command Viewer column for additional reference.

Resetting the Display

The Architect environment includes an option to reset a connected display. Resetting the display involves disconnecting to the display and reconnecting.

Back to Resource Centre

Share this article on socials

Introduction

Mates Studio’s Architect environment provides users with the ability to design their custom page layouts using a collection of configurable graphical widgets. This allows users to create unique widget and page designs that can be saved for future use.

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

Like the Commander environment, Architect utilizes the same command protocol and host controller simulator.
To create a new or open an Architect project, please refer to Mates Studio User Guide.

Application Menus

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

The following are the menu groups:

  • File
  • Graphics
  • Project
  • Tools
  • Help

File 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

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
Baud Rate Provides option to set baud rate for communicating
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

Architect 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 an Architect Project

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

Modifying Page Background

A new Architect 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.

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, an information window containing the compilation results will be shown.

Click Proceed to continue with the upload.

The graphical resources will be uploaded, and the display will be programmed with the Architect project.

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

Controlling a Programmed Module

After uploading an Architect project, the Control window can be opened and used to control the connected display module.

The Control window provides the following:
1. Page Navigation column
2. Main Control column
3. Command Viewer column

Establishing Connection

To communicate and control the display, the application needs to first connect to the module. After confirming the selected port, click the Connect button to establish connection.

The LED indicator will display a bright color after successfully establishing connection.

It is also IMPORTANT to ensure that the module sends the ready signal before using the controls. This can be checked from the Command Viewer column as shown:

Tip: Connecting to the display can be used to ensure that the port is not busy and is safe for reprogramming. If an error occurs when trying to connect, the port is being used by another software or another Mates Studio window.

Navigating the Pages

The display will always show the first page, Page0, initially. Other pages included in the project can easily be activated by using clicking the corresponding item in the Page Navigation column.

After activating another page, the Main Control column will show the widgets present in the active form and the Command Viewer column will show the data exchanged that happened to change the active page.

Controlling the Widgets

Different control interfaces are provided for different type of widgets. Here are some of the control interfaces for the available widgets.

  1. GET
    Retrieves the current value of the widget.
  2. ANIMATE
    Starts and ends widget animation.
  3. SET
    Sends the value specified by the input box.
  1. CLR
    Clears the printed values
  2. COLOR
    Sets the font color to use in next print.
  3. ADD
    Appends the value in the input box.
  1. ANIMATE
    Starts and ends widget animation.
  2. SET
    Sends the value specified by the input box.
  1. SET
    Sends the value specified by the input box

By using the control interfaces, the project can be simulated, and the messages exchanged by the host controller and the module will be shown in the Command Viewer column for additional reference.

Resetting the Display

The Architect environment includes an option to reset a connected display. Resetting the display involves disconnecting to the display and reconnecting.

Back to Resource Centre

Share this article on socials