LogoLogo
ArchitectureUser CasesPlansOther LanguagesRelease Notes
  • ☁️Welcome to the thingable wiki!
    • Where to begin?
    • Environment
    • Device
      • Create a Device
      • Metadata and Schema
      • Approved equipment
    • Application
      • How to Create an Application
      • Main internal widgets of the APP
      • Parameterization of Graphs
      • Menu Filter Structuring
      • Application Configurator
      • Custom Graphical Interfaces
      • Map Builder
      • Report Settings
    • Alarms
    • Synoptic
      • SVG Editor
      • SVG Booster
      • Synoptic Testing
    • Integrations
      • Logic Builder
      • MQTT Integration
      • FTP/SFTP Integration
      • HTTP/HTTPS Integration
      • thingable! APIs
    • Users
      • How to Create New Users and User Groups?
      • Call management in the thingable support portal!
  • 🏨Architecture
  • 🚜User Cases
  • 👥Contact Us
  • ⁉️Frequently Asked Questions
Powered by GitBook
On this page
  • "We" from mdashboard library
  • About the "dashboard" library
  • Configuring the in-app graphical interface

Was this helpful?

  1. Welcome to the thingable wiki!
  2. Application

Custom Graphical Interfaces

Using the Node-red

Last updated 2 years ago

Was this helpful?

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.

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

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.

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:

<!DOCTYPE html>
<html>
    <head> </head>
    <body>
<p><iframe src="../logicBuilder/mui/#!/5" width="100%" height="300px" frameborder="0">
</iframe></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</body>
</html>

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

For more information about library usage and how to configure nodes, visit the link:

For more details on the socket id feature, visit the link:

☁️
https://www.npmjs.com/package/node-red-contrib-mdashboard
https://www.npmjs.com/package/node-red-contrib-mdashboard
Figure 1 – Node-Red tool menu, “Manage palette” option
Figure 2 – User settings page in the "node-red-contrib-mdashboard" node installation option
Figure 3 – Featured, mdashboard library resources
Figure 4 – Example of a message sent by socketid
Figure 5 - Graphical interface configuration using the "Empty Template" widget
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.