Mates Studio Graphics Editor
Introduction
Mates Studio provides a graphics editor for its Architect, Genius and Builder environments. This provides the ability to create custom page designs using various widgets supported by the BBM display modules. The interface is composed a graphics toolbar and three main editor tools.
-
- Page Selection
-
Provides a simple interface to add pages and select a page for editing.
-
- Visual Editor
-
Provides a drag-n-drop interface for selecting and positioning widgets.
-
- Property Editor
-
Provides an editable property table for editing page and widget parameters
Graphics Toolbar
The graphics toolbar provides buttons and dropdown menus for managing pages and widgets.
From left to right, the toolbar items 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 (only available in Genius) |
| Page/Widget Select | Lists the page and the widgets in the selected page for selection |
Designing a Project
This section discusses the common procedures when designing the user interface for Architect, Genius and Builder projects.
Styling Pages
New Mates Studio projects, excluding Commander, includes a blank page with a default black background color.
Background Type
Each page can have either a background color or image.
Select the desired background Type for your page.
Background Color
If the Page’s background Type is Color, the Color property can be modified with a custom color value as shown.
Background Image
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.
Add Pages
To add a new page, simply click in the Add Page button.
This will open the Select Template window that provides a selection of simple page background designs.
Templates are categorized into two types: Background and Application templates
Background Templates
Background templates are simple designs which helps generate basic layouts using background widgets.
Application Templates
Application templates are designs for common use cases. These designs are also available in Commander environment.
Delete Pages
Pages 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.
Add Widgets
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.
Note
Adding a widget performs an automatic widget renumbering. Therefore, it is best to complete the user interface design before developing code.
Default Styles
The Select Widget window opens with category and list of available widgets. This selection includes and creates the widgets' default styles.
Select the widget category from the tabs on the left.
Select the widget type from the list.
Click CONFIRM to proceed.
Widget Templates
Click Browse Templates to change the selection to the pre-designed widgets.
This will display available widget templates listed per category.
Select the template category from the tabs on the left.
Select the template design from the list.
Click CONFIRM to proceed.
Styling Widgets
Widget properties, including color, part count, size, minimum and maximum value, can be modified from the property editor.
Copy Widgets
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.
Move Widgets Across Pages
Besides Copy, a Cut option is also provided which allows widgets to be moved to a different 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.
Note
Moving a widget performs an automatic widget renumbering. Therefore, it is best to complete the user interface design before developing code.
Delete Widgets
Widgets 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.
Configurations Files
Pages and widgets can be saved as configuration files (matesWidget and matesPage) for future use. This allows users to reuse their designs or share it with other users or the community.
Save Configuration
Select the target widget or the current page
While the target item is selected, press the Save Configuration button as shown.
Provide a short description for the widget or page.
Click the Confirm button to confirm.
This will open the Save Configuration window.
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.
This will open a Open Configuration window.
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.
Mates Widgets Compatibility
The table below lists the available widgets that applies to setWidgetValue, getWidgetValue, setWidgetParam and getWidgetParam functions.
| Widget | Value |
|---|---|
| MATES_LED | 0 |
| MATES_RULER_GAUGE | 1 |
| MATES_ANGULAR_METER | 2 |
| MATES_GAUGE_A | 3 |
| MATES_GAUGE_B | 4 |
| MATES_LED_DIGITS | 5 |
| MATES_LABELS | 6 |
| MATES_BUTTON_A | 32 |
| MATES_SWITCH_A | 33 |
| MATES_SLIDER_B | 34 |
| MATES_KNOB | 35 |
| MATES_MEDIA_LED | 64 |
| MATES_MEDIA_COLOR_LED | 65 |
| MATES_GAUGE_C | 66 |
| MATES_GAUGE_D | 67 |
| MATES_GAUGE_E | 68 |
| MATES_GAUGE_F | 69 |
| MATES_MEDIA_GAUGE_A | 70 |
| MATES_MEDIA_GAUGE_B | 71 |
| MATES_MEDIA_GAUGE_C | 72 |
| MATES_MEDIA_GAUGE_D | 73 |
| MATES_MEDIA_THERMOMETER | 74 |
| Widget | Value |
|---|---|
| MATES_LED_SPECTRUM | 75 |
| MATES_MEDIA_SPECTRUM | 76 |
| MATES_SCOPE | 77 |
| MATES_SYMBOLS | 78 |
| MATES_ROTARY_GAUGE | 79 |
| MATES_BUTTON_B | 96 |
| MATES_SWITCH_B | 97 |
| MATES_MEDIA_BUTTON | 98 |
| MATES_SLIDER_A | 99 |
| MATES_SLIDER_C | 100 |
| MATES_SLIDER_D | 101 |
| MATES_SLIDER_E | 102 |
| MATES_SLIDER_F | 103 |
| MATES_MEDIA_SLIDER | 104 |
| MATES_MEDIA_ROTARY | 105 |
| MATES_SLIDE_SHOW | 128 |
| MATES_ANIMATION | 129 |
| MATES_FANCY_LED_A | 130 |
| MATES_FANCY_LED_B | 131 |
| MATES_FANCY_BUTTON_A | 160 |
| MATES_FANCY_BUTTON_B | 161 |
Note
Some widgets available in Mates Studio behaves differently than majority of the widgets. Such widgets doesn't apply for the common set and get widget value and parameter functions.