dashboard
Last updated
Was this helpful?
Last updated
Was this helpful?
This is the category of components for a user interface. Main common appearance properties are described for the button component (and UI element), so explore it first.
The component creates a user interface button so that a human will be able to send a command to the system. For example: open the door, stop working immediately, turn on the light, reset all the tasks, etc.
On a UI you can group the elements - by using Groups (1) and Tabs.
Choose the size of the button on UI (2).
Label the button (4) to show its function to a user. For example, 'Empty Bin'.
Specify the tip (5) that will appear when a user hovers the button with a mouse cursor.
Change the background color (7) with a hex color code, or you can simply type a color name ('blue', 'yellow', etc.)
Specify the payload of the message object (8) and its topic (9).
You can make the button get pressed each time when the component receives a message (10) - and you won`t need to use UI to test its work.
Give a name to the component (11). This name will appear on the workspace, but on the UI the button will show the Label (4) name.
The component creates a UI element with a dropdown list. Multiple options can be added.
The Placeholder (1) is an inscription on the field, that a user clicks to expand the list of options. By default, it`s Select option.
Options (2) - the list of labels from which a user chooses. The chosen label carries a message payload value. For example, the user chooses 'Use 1 robot' and the component sens the value '1'.
You can add as many options as you need (3).
You can allow choosing multiple options (4).
There is a possibility (5) to pass a message from input to output without changes.
The component creates a UI element, that allows a user to switch between two modes. For example, 'Turn On' and 'Turn Off'.
Although the component makes a UI switcher for manual switches, you can set up switching through the appropriate incoming payload (1). For example, if the component receives the payload value numeric '1' and it equals the On Payload setting (2), so the component will pass the message '1' and you`ll see 'On' mode on the UI.
You may set payload values for 'On' and "Off' modes (2). By default, it`s boolean true and false correspondently.
Creates a UI field for a user's text input.
Add a Tooltip (1) that pops up when you hover above.
Choose the input Mode (2) - and it will color in red if it is not a valid address and will return undefined.
Choose the Dalay in milliseconds - the time delay before sending the output. If you set 0, it will be sent after the user hits Enter or Tab.
You may preset the component to pass the message through to the output with no typing by the user.
We will do this in the example:
Choose the output color Format (1) - hex (in string) by default.
The color picker widget can be square and round shape (2).
Choose to display or not the hue (3) and lightness (4) sliders.
The color picker widget has elements that appear only on hover. But if the widget will be large enough you can choose to always show the swatch (5), the picker (6), and the value field (7).
The component can Send (9) the output each time when you click the picker, choose the color in the color field, and close the field by clicking the picker. Or it can sand the outputs many times while you are clicking the colors on the color field.
You can choose to send the Payload value (10) as a string or an object.
Displays a non-editable text UI field.
Specify the Value format (1) - what property of a message object to show in the text field. It must be in double curly braces. For example, {{msg.topic}} or {{msg.payload.facility}}. By default it`s {{msg.payload}}.
Choose Layout for the field (2).
Creates a gauge UI element that shows the numeric payload values.
Choose the UI representation Type (1) - Gauge, Donut, Compass, or Level.
Specify the Value representation format (2) - by default, it`s just a number. See more in Help on the sidebar.
By default, the numbers will be market as units, but you can specify it (3) - for example, as kg or mins.
Establish the Range of numbers` representation (4).
Choose the colors (5) of gradient changes when numbers go from a lower to a higher level.
Also, you can set scopes for colors (6) - for example, to signalize about some system state.
In this example, we used a UI button and a function component that generates a random number from 1 to 100 to imitate data inputs.
The component plots the input numeric values on a UI chart. If the message payload is not numeric the component tries to convert it (for example, string type '1' to numeric type '1'), and if it fails, the message is ignored.
Choose the Type of UI representation (1). To emphasize points on the chart - enlarge points (2).
Specify the length of the X-axis (3) - in time units or points.
Choose the X-axis Label format (4).
You can set up the scope of the numbers on the Y-axis (5). If you didn`t, the chart will be adjusted automatically.
If you choose to show Legend (6) the topics of all messages will appear above the chart. For example, you have two sources of data, and you want to see them both on the chart. To do this you have to specify msg.topic for each of them. Then choose Show Legend (6) and you will see which color a source got on the chart.
The Interpolate option (7) specifies which type of connections (lines) will be on the chart.
You can choose the color of lines (or bars) on the chart (8). The chart component will use them in turn: the first color for the first source (topic) and so on.
You may place some text on the chart to be there before the data arrives (9).
We will use two buttons in the example - to imitate two sources of data - and a function component that generates random numbers from 0 to 100.
To add an Icon (3) to the button appearance you may use, for example, the library. Type fa- and an icon name from the site (try fa-fire). Or library - type mi- and an icon name (e.g. mi-work).
Change the default color (6) of button text and icon. You may simply type a color name ('blue', 'yellow', etc.) or use hex-color codes (from , for example).
