Ctrlk
ArchitectureUser CasesPlansRelease Notes
For the complete documentation index, see llms.txt. This page is also available as Markdown.

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:

  1. Access the "Manage Palette" menu.

Figure 1 – Node-Red tool menu, “Manage palette” option

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.

Figure 2 – User settings page in the "node-red-contrib-mdashboard" node installation option

3. If the installation is correct, the mdashboard features highlighted below will appear in the node palette:

Figure 3 – Featured, mdashboard library resources

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.

Figure 4 – Example of a message sent by socketid

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.

Figure 5 - Graphical interface configuration using the "Empty Template" widget

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.

Figure 6 - Graphical interface code in the "tools" option in the "Empty template" widget
Figure 7 - Featured access the dashboard ever feature to sort tabs and links.

Author: Pedro Henrique

Last updated