Custom Graphical Interfaces
Using the Node-red
In the Logic Buildertutorial presented the Logic Builder tool as a low-code programming feature that allows the user to develop their own 16gb of programming and thus expand the functionalities of their application.
Among the various development possibilities, with Logic Builder we have the construction of custom graphical interfaces. In this tutorial we will present the initial steps for the user to start building their own interfaces and use them inside the applications or even externally on the platform.
Installation
It is necessary to check, through the "Manage Pallete" menu, whether the "node-red-contrib mdashboard" library is installed in LogicBuilder. If the library is not available, it is necessary to install it, following the steps:
Access the "Manage Palette" menu.
2. After accessing the "Manage palette" menu, under "Palette" in the "Install" option search for "mdashboard" and click on "install". Wait for the installation process. Once completed you can return to the node and logic creation page.
3. If the installation is correct, the mdashboard features highlighted below will appear in the node palette:
The tool will be ready to use.
"We" from mdashboard library
The "we" available in the mdashboard library are:
• Button
• Dropdown
• Switch
• Slider
• numeric
• Text Input
• Date Picker
• Colour picker
• Form
• Text
• Gauge
• Chart
• Audio out
• Notification
• Ui control
• Template
For more information about library usage and how to configure nodes, visit the link: https://www.npmjs.com/package/node-red-contrib-mdashboard
About the "dashboard" library
The mdashboard library is derived fromthe dashboard library. It brings important resources for the creation of graphical interfaces. One of these features is multi-user.
When you change the state of a widget in the dashboard library, that state becomes unique to the source of the socketid that caused the change. For example, if two users are simultaneously manipulating the same widget, only the user who made the changes will have the feature updated in their window.
In practical terms, the feature supports multiple individual users when used. The uniqueness of states per user occurs by the "msg.socketid" object. With each new change the widget will send a new message with a specific "socketid" for each user.
For more details on the socket id feature, visit the link: https://www.npmjs.com/package/node-red-contrib-mdashboard
Configuring the in-app graphical interface
To view the graphical interface created in Logic Builder after its creation and for its configuration, use the "Empty Template" widget. The Main internal widgets of the APP document explains how to use this feature.
Accessing the widget configuration in the 'Tools' tab, go to "source code" and add the code referring to the "lframe" of your graphical interface. The following is an example of configured code:
Line 5 of the code calls the URL where the graphical interface is configured in the logic builder. Parameter "5" of the example and in which position its interface is located. It is necessary to identify in the logic builder which position your interface is in, as shown in figure 7. To do this, go to mdashboard in the logic builder and see the order in "tabs and links" of your interface.
Additional parameters can be passed by adding a question mark (?), followed by the name of the parameter in the URL. For example, if you want to pass to Logic Builder the string "Test Parameters" using a parameter called "to" the new URL would be:
../logicBuilder/MUI/#!/5param=DeTeste parameter
The parameter can be retrieved in the "msg.params" object available in the output of the "ui control" node.
Author: Pedro Henrique
Last updated
