Creating Customized Widget
When the predefined widgets does not fit your needs, it is possible to create your own custom design.
Basic Introduction
Adding a Widget
To start, right click on an empty area of the board, and select “widget”.
Widget Editor Mode
Right click on the newly created widget, and choose the option for “Open Editor” This will switch to the Widget Editor mode where you can create your own widget
When you have switched over to the Widget Editor mode, the top menu bar of the board window changes.
It is possible to change the size of the overall widget.
One of the method is by dragging the bottom right corner of the widget.
The other method is to go into the inspector and directly enter the size under the layout container.
After defining the overall size of the widget, you can now create your own design by adding different interfaces into your widget.
Please go to the Interface section to find out more about how to add interface and the different types of interfaces available.
After you have designed all of the interface elements of your widget, you can add Data Sources to connect the widget to a parameter or other parts of your project. For more information please go to the Data Source section.
Adding Data Source
Data source is the method which you can pass data into the widget to be displayed.
In the simple case, you would want to create a “Parameter” data source, which is under the Global Data Source.
There are a few different parameter type to choose from. It is a good idea to also change the name of the parameter by double clicking at the container bar.
Once there is a data source, you can link that information and be displayed in an interface element inside the widget. To do so, select the interface element, under the inspector, look for the parameter that you want to connect to, and click on the tag icon to bring up the list of parameters, and select the value for the desired parameter.
If the interface element is something that you can interact with and would be able to enter / adjust the value (so it is not just as a display only), you would want to enable the “two way” option in the parameter such that the interface element can send back the values to the parameter.
In the case that you are choosing an Enum as the parameter type, you would need to go into the parameter setting but right clicking on the Enum parameter.
A pop up window will appear and this is where you can add and change the keys and values of the Enum.
Advanced Widget Creation with Styles
Style is a specific type of data source which allows you to store things like colors and font, which can be referenced to again in another widget. This way you can have a consistent design across multiple widget and it become much easier to change multile parameters all together at the same time from one location.
For more details about the Styles data source click here.
Based on the system described above, it is possible to create a UI system that is completely different to the widgets that are shipped with Grid Studio. Below is an example of such UI interface:
Advanced Widget Creation with Expression
It is possible to link some parameters to the data source via an expression.
To access this mode, click on the token icon next to a parameter to have access to the secondary menu.
From the secondary menu, choose the Expression option.
There will be an indication next to the field for the parameter to indicate that this parameter is now in expression mode.
Similar to above, you can directly like this parameter to a data source by clicking on the token icon and choosing your data source
After choosing the desired data source, you can click on the parameter field again and edit your expression
From here, you are able to write simple python code to manipulate the data and how it is assigned to the parameter
Last updated