The UI_Smart List serves as a platform for assembling prefabricated elements into a list format. It is a very powerful tool which can be used to develop advanced user-interfaces by allowing the programmer to dynamically populate rows of data dynamically. These prefabs are customizable, allowing for the inclusion of various components within each one. Crucially, each individual component within a prefab is assigned a unique identifier. This distinct identification ensures that interactions initiated by users can be accurately distinguished and processed on the backend system.
The UI_Smart List encompasses several essential fields:
The UPL_Smart Panel Prefab Database within the Assets/ParallaxControlSystem/ScriptableObject folder comprises custom prefabs duplicated within the Smart List. These prefabs are meticulously crafted UI_Elements tailored to meet the specific requirements of the project, ensuring optimal layout and functionality within the list interface.
In this example we will create the following UI_SmartList example, which is a control page for power panel. The Power Panel will be associated with rooms in a building, the user will have the ability to turn the circuit breakers on and off, as well a view the current usage in watts. In this example we will show how to wire up the UI compoents to Node-Red. This document will show how to to wire up the UI components to Node-Red.
The first step is to ensure the prefab object is setup correctly. We will review our to setup a custom prefab which will populate each row of the list.
Create a new prefab
The prefab can contain multiple UI Elements. This will be used to populate the rows of the Smart List.
UI_Text
Fill the UI_Text with data from the control system.
Set a value for the "Dynamic Text Serial Join ID" for the UI_Text component
UI_Button
Set the "Press Join ID" for the UI_Button component
UI_Slider
Set the UI_Slider value from the control system.
Set the "Analog JoinID" for the UI_Slider component:
The prefab is now completed. Drag the prefab into the UPL_Smart Panel Prefab Database so that it is available as a selection.
UPL_UI_ Smart List
Set the Dynamic Text Serial Join ID to any unique value. This value is for identifying the instance of the Smart List. If you have multiple Smart Lists on a page, just give each one a unique ID.
Set a Smart Join Prefix which is the name of the Smart List, use a descriptive name, in this case, we are making a Power Panel. This name will be included in the message sent to Node-RED.
Drag in the Smart Element Prefab Database. If you have a custom prefab, be sure to add your custom prefab to the database so that it will be available to the UI_SmartList.
Match Join ID in Node-RED Parallax set-feedback node to the value of the Dynamic Text Serial Join ID
Signal Type should be Serial
Use the Inject Node to specify the quantity of prefabs to duplicate.
The string value should be the name of the prefab, followed by a colon, followed by a number indicating how many rows to instantiate.
Inject Node > set-feedback node > mqtt out node
When the Inject node is manually triggered, the values for the Smart List wil be set to the touch panel.
