{"id":1830,"date":"2019-04-29T13:19:07","date_gmt":"2019-04-29T11:19:07","guid":{"rendered":"https:\/\/www.nerdiy.de\/?p=1830"},"modified":"2021-12-18T17:32:07","modified_gmt":"2021-12-18T16:32:07","slug":"nodered-create-a-user-interface-with-dashboard-nodes-2-2","status":"publish","type":"post","link":"https:\/\/nerdiy.de\/en\/nodered-create-a-user-interface-with-dashboard-nodes-2-2\/","title":{"rendered":"HowTo: Node Red - Create a user interface with dashboard nodes"},"content":{"rendered":"

I don't know if dashboards are THE way to make a nerd's heart beat faster, but they are definitely a way to make a nerd's heart beat faster. For those who grew up with StarTrek and Co., dashboard-like overviews in the form of diagrams and graphics are the epitome of technology. You can now create this feeling yourself with NodeRed thanks to certain nodes.<\/p>\n\n\n\n

Because once you have your SmartHome so far that it collects all kinds of data about your own four walls, you of course want to present it. But how? After all, you can't just stick this data in a photo album like your last vacation photos.<\/p>\n\n\n\n

A simple and informative and decorative way is to present the existing data via the dashboard node for NodeRed. In addition to various display elements, this also offers the opportunity to interact with your SmartHome system. This means you can set values, flip virtual switches, trigger actions and monitor their status at the same time.<\/p>\n\n\n\n

You can find an overview of the various functions of the dashboard node in the following article<\/p>\n\n\n\n

\n\n\n\n

Requirements<\/h2>\n\n\n\n

Helpful articles:
<\/strong>So that you can install new nodes, NodeRed should of course already be installed.
How to prepare a RaspberryPi and then install NodeRed on it is described in the following articles.<\/p>\n\n\n\n

The following three articles describe what needs to be done to prepare the RaspberryPi:
RaspberryPi \u2013 setup for nerdiys!<\/a><\/strong><\/em>
RaspberryPi \u2013 The first configuration!
<\/a>RaspberryPi \u2013 Control the RaspberryPi via SSH<\/a><\/strong><\/em>
NodeRed \u2013 Installing NodeRed on the RaspberryPi<\/a>
NodeRed \u2013 Install new nodes<\/a><\/strong><\/em><\/p>\n\n\n\n

Required tool:
<\/strong>-no-<\/em><\/p>\n\n\n\n

Required material:<\/strong><\/p>\n\n\n\n

In the following list you will find all the parts you need to implement this article.<\/strong><\/p>\n\n\n\n

\n \n \n \n \n \n \n \n \n <\/colgroup>\n <\/table>\n \n \n \n<\/div>\n\n\n\n\n
\n\n\n\n

Log into the NodeRed configuration interface<\/h2>\r\n

Before you can edit your NodeRed configuration, you must - if activated - first log into the NodeRed configuration interface.<\/p>\r\n

\"\"<\/a>
View of the login dialog. Here you have to enter the login data that you specified during the configuration of the login. You can find information about this in the article NodeRed - set up user login<\/strong><\/em><\/a>.<\/figcaption><\/figure>\n\n\n\n
\n\n\n\n

Install dashboard node<\/h2>\n\n\n\n
In order to use the dashboard nodes you must have the node<\/div>\n\n\n\n
\n
node-red-dashboard<\/pre>\n<\/div>\n\n\n\n
to install.<\/div>\n\n\n\n
How your node is installed in the article NodeRed \u2013 Install new nodes<\/em><\/a> <\/strong>described.<\/div>\n\n\n\n
 <\/div>\n\n\n\n
\"\"<\/a>
View during the installation of the node \u201cnode-red-dashboard\u201d.<\/figcaption><\/figure>\n\n\n\n
\n\n\n\n
Overview of the available input and output nodes<\/h2>\n\n\n\n
By installing the dashboard nodes, you will receive a whole package of additional nodes that are suitable for displaying and entering various values. These will be displayed as usual in the node palette in the left area of the configuration menu. Details about the individual nodes are listed below.<\/p>\n\n\n\n
\"\"<\/a>
View the dashboard nodes in the node palette.<\/figcaption><\/figure>\n\n\n\n
\n\n\n\n
Button node and positioning of the elements in the dashboard<\/h2>\n\n\n\n
The first and simplest node is the \u201cbutton node\u201d. You can use this to position a button on your dashboard. This then works like a button in the real world. If it is clicked, it sends an adjustable value and an adjustable topic to the linked node.<\/p>\n\n\n\n
Button nodes, for example, can be used very well to trigger actions. For example, you can turn lamps on and off.<\/p>\n\n\n\n
Before you can use the button node, it must first be positioned on the layout grid of the dashboard.<\/p>\n\n\n\n
In addition to the functions of the actual nodes, the positioning on the layout of the later dashboard can also be configured for each. The dashboard is a separate website that can be managed centrally via the dashboard configuration.<\/p>\n\n\n\n
By installing the dashboard nodes, a new tab was added to the left configuration area. You can recognize it by the icon based on a bar chart. Click on this to open the basic configuration of the dashboard.<\/p>\n\n\n\n
Here you can see the different tabs \u201cLayout\u201d, \u201cTheme\u201d and \u201cSite\u201d at the top. To the right of it there is an arrow pointing up-right. If you click on this you will be redirected to the dashboard website.<\/p>\n\n\n\n
\"\"<\/a>
You can reach the dashboard page by clicking on the symbol marked with the mouse pointer in the dashboard tab.<\/figcaption><\/figure>\n\n\n\n
Alternatively, you can also select the dashboard page directly. To do this, all you have to do is append \u201c\/ui\/\u201d to the address of your NodeRed configuration page. For example, the address to your NodeRed configuration page is
https:\/\/ 192.168.172.5:1880<\/strong>
then the address to your dashboard is
https:\/\/ 192.168.172.5:1880\/ui\/<\/strong><\/p>\n\n\n\n
First of all, it's about dividing the layout. With its help you can position the respective input and output elements (dashboard nodes) almost freely on the dashboard. The dashboard offers the option of combining individual dashboard nodes into groups. The display order of these nodes can then be set on the dashboard. In addition, these grouped nodes can or must be assigned to a specific \u201ctab\u201d.<\/p>\n\n\n\n
In addition to the \u201cHome\u201d tab, you can create other tabs. This is practical, for example, for virtually separating the elements in different rooms in a smart home system. This means you can combine all of the sensors and actuators in the living room in a tab called \u201cLiving Room\u201d. This makes the overview easier and brings structure to the often rapidly increasing number of nodes.<\/p>\n\n\n\n
This is also what you can see and set in the \u201cLayout\u201d tab of the dashboard configuration. All tabs and their associated groups will be displayed there. In the screenshot below<\/p>\n\n\n\n
\"\"<\/a>
\u201cLayout\u201d section of the dashboard configuration. Here you can see some of the individual tabs (in this example \u201cHome\u201d, \u201cRaspi data\u201d, \u201cSettings\u201d and \u201cTasmota status\u201d). The groups can also be identified. For example, the \u201cRaspi data\u201d tab includes groups \u201c1\u201d and \u201c2\u201d. Each group then contains the actual dashboard elements assigned to it. You can make these visible by clicking on the small arrow pointing to the right.<\/figcaption><\/figure><\/div>\n\n\n\n
\"\"<\/a>
View of the \u201cTheme\u201d tab of the dashboard configuration. Here you can set the style, the base color and the font used on the dashboard.<\/figcaption><\/figure><\/div>\n\n\n\n
\"\"<\/a>
On the \u201cSite\u201d tab of the dashboard configuration you can also set the title of the dashboard page and other options.<\/figcaption><\/figure><\/div>\n\n\n\n
Another example:<\/p>\n\n\n\n
\"\"<\/a>
On this layout overview you can see that there are two tabs called \u201cSettings\u201d and \u201cHome\u201d. On the \u201cSettings\u201d tab you will find, for example, the various groups such as \u201cServer\u201d, RasPi\u201d or \u201cStatus\u201d. On the \u201cHome\u201d tab, however, you will only find the \u201cDefault\u201d group. In the opened \u201cServer\u201d group you can also see how the individual elements such as \u201cRestart server\u201d or \u201cTurn off screen\u201d are arranged.<\/figcaption><\/figure><\/div>\n\n\n\n
\"\"<\/a>
You can now find these tabs and groups on the dashboard view. In the view shown you are on the \u201cSettings\u201d tab. The first red frame marks the \u201cServers\u201d group. The \u201cLED Stripe\u201d group is marked with the second red frame. The large red arrow on the left also marks the symbol that you have to click on to switch to another tab.<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
If you click on this symbol, all available tabs \u2013 in this case \u201cSettings\u201d and \u201cHome\u201d \u2013 will be displayed.<\/figcaption><\/figure>\n\n\n\n
\n\n\n\n
The button node<\/h2>\n\n\n\n
The button node is one of the very simple nodes. You can use it to build virtual keys. To do this, drag the button node from the Node palette to the NodeRed configuration area. If you now double-click on the node, the following options can be configured.<\/p>\n\n\n\n
\"\"<\/a>
\u201cGroup\u201d determines in which group and tab the button is positioned. In this example, the button is positioned in the \u201cTestTab\u201d tab in the \u201cTestGroup\u201d group. With \u201cSize\u201d you can set the size of the button. You can see an example of different sizes further down in the post. Using the \u201cIcon\u201d setting, icons can also be displayed on the button. To get a selection of the available icons, you simply have to click on the \u201cMaterial Design icon\u201d link in the info bar on the right. \u201cLabel\u201d indicates the text of the button. \u201cWith \u201cColor\u201d and \u201cBackground\u201d you can set the color of the button and the button text. The setting for \u201cPayload\u201d and \u201cTopic\u201d defines which value (payload) is sent via which topic as soon as the button is pressed. Last but not least, a very important function: By checking or unchecking \u201cIf msg arrives on input, pass through to output.\u201d You can activate or deactivate the forwarding of a message received at the input of the button node to the output. With \u201cName\u201d you can set the name of the node for the NodeRed configuration as usual.<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
Here is the view you get when you click on the small (edit) pencil next to the group section in the previous window. Then you will come to the window in which the group and tab can be assigned to the button node (or any other dashboard node). In principle, you edit the properties of the entire group in this window. The assigned tab (under \u201cTab\u201d) and the width of the group (under \u201cWidth\u201d) can be set. You can also activate or deactivate the display of the group name and set whether it should be possible to \u201cfold\u201d the group, i.e. hide the content.<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
In the dashboard overview, all tabs included are then displayed in a fold-out page view. Here you can switch back and forth between them by clicking on the respective tab.<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
The view of the different sized buttons on the dashboard. <\/span><\/figcaption><\/figure>\n\n\n\n
\n\n\n\n
Dropdown node<\/h2>\n\n\n\n
The dropdown node is a node with which you can create a selection list on the dashboard. For example, you can create a list of available temperatures for a radiator. But you can also define all sorts of other entries with a wide variety of names and the associated values.<\/p>\n\n\n\n
To do this, drag a dropdown node from the Node palette onto the Node Red configuration interface and double-click on it.<\/p>\n\n\n\n
\"\"<\/a>
The window shown will then appear. Here, as before with the other nodes, you can set the assigned group and tab as well as the size. Also, as before, the \u201clabel\u201d. \u201cLabel\u201d in this case means the label for the dropdown list on the actual dashboard. Under \u201cPlaceholder\u201d you can configure a placeholder that will be displayed as long as no value has been selected in the drop-down list. Things only get really exciting in the \u201cOptions\u201d section. Here you can configure the available options in your dropdown list. To do this, the name for the corresponding entry is set in the right column and the value of the corresponding entry is set in the left column. You can add further entries by clicking on \u201c+option\u201d. The order of the entries can also be changed using the three small horizontal lines on the left side of each entry. To do this, simply click on the lines in the entry you want to move and hold down the mouse button. By moving the mouse pointer up or down you can now reposition the marked entry. The remaining functions shown behave in the same way as already described for the \u201cButton\u201d.<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
View the configured dropdown list on the dashboard.<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
If you now click on the selection field, you can choose between the various previously configured entries.<\/figcaption><\/figure>\n\n\n\n
\n\n\n\n
Switch node<\/h2>\n\n\n\n
The switch node basically corresponds to a virtual switch. This can be used to send switching signals or to display switching states.<\/p>\n\n\n\n
To do this, drag the switch node from the node palette onto the node red configuration interface and double-click on it.<\/p>\n\n\n\n
\"\"<\/a>
The window shown will then appear. Here, as before with the other nodes, you can set the assigned group and tab as well as the size. Also, as before, the \u201clabel\u201d. Under \u201cIcon\u201d you can select an icon that you can display as a switch symbol in front of the label or without a label at all. The remaining properties such as \u201cTopic\u201d and \u201cName\u201d are the same as with the previous nodes. The only difference here is that you can enter different payloads for the switching states \u201cOn\u201d and \u201cOff\u201d. Which makes sense, because otherwise you wouldn't be able to distinguish between the switched off and switched on states.<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
View of the switched on switch.<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
View of switched off switch.<\/figcaption><\/figure>\n\n\n\n
\n\n\n\n
Slider node<\/h2>\n\n\n\n
The slider node is ideal for setting numbers within a certain range. A good use case, for example, is to use it as a dimmer for a lamp.<\/p>\n\n\n\n
In order to use the slider node, you first have to drag it from the node palette to the Node Red configuration interface and open its settings menu by double-clicking.<\/p>\n\n\n\n
\"\"<\/a>
As usual with the other nodes, the settings window appears again after double-clicking. As before, you can set the assigned group and tab as well as the size here. Also, as before, the \u201clabel\u201d. In the \u201cRange\u201d section you can set the range of values the slider should cover. This ranges from \u201cmin\u201d=the minimum value to max=the maximum value. The step size can be adjusted using \u201cstep\u201d. The remaining properties such as \u201cTopic\u201d and \u201cName\u201d are the same as with the previous nodes. The only difference here is that the payload is of course determined by the current \u201cslider value\u201d.<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
View of the slider in the dashboard.<\/figcaption><\/figure>\n\n\n\n
\n\n\n\n
Numeric node<\/h2>\n\n\n\n
The Numeric Node is another way to pass numerical values to Node-Red for processing.<\/p>\n\n\n\n
To configure this, drag a Numeric node from the Node palette onto the Node Red configuration interface.<\/p>\n\n\n\n
\"\"<\/a>
The exciting setting options for this node - because they are different from the other nodes - are the two properties \u201cValue Format\u201d and \u201cRange\u201d. With \u201cRange\u201d you can define the possible number range and set the step size, as before with the slider node. \u201cValue Format\u201d allows you to format the display of the value. Here, for example, you can put a unit sign after \u201c{{value}}\u201d so that not only the numerical value but a numerical value plus the unit are displayed on the dashboard later. For example, you can mark a temperature information with \u201c\u00b0C\u201d as the temperature.<\/figcaption><\/figure>\n\n\n\n
\n\n\n\n
Text input node<\/h2>\n\n\n\n
The text input node is \u2013 as the name suggests \u2013 a node to enable text input.<\/p>\n\n\n\n
\"\"<\/a>
In addition to the usual setting options such as \u201cGroup\u201d, \u201cSize\u201d, \u201cLabel\u201d, \u201cTopic\u201d and \u201cName\u201d, this node allows you to set the \u201cMode\u201d and a \u201cDelay\u201d. \u201cDelay\u201d is used to set the length of time that waits after the last character entry until the characters entered in the text field are sent to the next node.<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
Under \u201cMode\u201d you can select which data should be entered into the respective field. You can choose between the various options shown and adapt the input field perfectly to the respective application.<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
(Relatively simple looking) view of the text node in the dashboard view.<\/figcaption><\/figure>\n\n\n\n
\n\n\n\n
Date picker node<\/h2>\n\n\n\n
The date picker node basically does exactly what the name suggests: you can use it to select a certain date and then pass it on to NodeRed for further processing.<\/p>\n\n\n\n
\"\"<\/a>
No other options (apart from the usual ones) can be configured for this node. After entering a date on the dashboard, it is forwarded to the connected flow via payload.<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
View of the date picker in the dashboard.<\/figcaption><\/figure>\n\n\n\n
\n\n\n\n
Color picker node<\/h2>\n\n\n\n
The Color Picker Node is ideal for setting the color of a connected RGB lamp. Of course, you can also use this to transfer colors to Node-Red for further processing in all other cases.<\/p>\n\n\n\n
\"\"<\/a>
In addition to the \u201cusual setting options\u201d, the color picker node has the \u201cformat\u201d setting option and also various checkboxes (ticks) that you can set or remove. The format of the output color can be set using the \u201cFormat\u201d property. You can choose between XXXXXXX and XX. By activating the \u201cShow hue slider\u201d or \u201cShow brightness slider\u201d property, you can also display a slider for setting the HUE or brightness value. You can also configure the permanent display of various \u201cpicker variants\u201d using the \u201cAlways show swatch\u201d, \u201calways show picker\u201d and \u201cAlways show value field\u201d checkboxes. Just try out which view you like best. \ud83d\ude42<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
This is what your color picker could look like in the dashboard.<\/figcaption><\/figure>\n\n\n\n
\n\n\n\n
Form node<\/h2>\n\n\n\n
With the form node you have the opportunity to configure a typical form. This allows different input options to be combined. This is perfect, for example, for configuring a form for entering an address or something similar.<\/p>\n\n\n\n
\"\"<\/a>
In addition to the usual setting options, you can configure the displayed form elements here in the \u201cForm elements\u201d area. You can add text fields for different content such as text or numbers. You can also store standard content or specify whether this is a mandatory field or not. Last but not least, you can also add your own text to the confirm and cancel buttons.<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
View of the test form in the dashboard.<\/figcaption><\/figure>\n\n\n\n
\n\n\n\n
Text output node<\/h2>\n\n\n\n
The text output node is ideal for simply displaying text. For example, you can display measured values from sensors. The user has no option to edit the displayed text.<\/p>\n\n\n\n
\"\"<\/a>
As a result, there is relatively little that can be set in the properties of the text output node. In addition to the \u201cValue Format\u201d in which you can expand the appearance of the text output with additional information such as unit symbols, you also have the option of editing the layout of the text output. You can choose from five different arrangements of label and text. Just try out which one suits your presentation best.<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
View of the text output node in the dashboard view.<\/figcaption><\/figure>\n\n\n\n
\n\n\n\n
Gauge node<\/h2>\n\n\n\n
The gauge node is perfect for visualizing measured values. This means that the measured values can be classified directly visually. You can also set number intervals in which the color of the displayed scale changes. For example, you can represent high\/dangerous temperatures with a red color. Temperatures in the normal range, on the other hand, are shown with a green scale. This makes it possible to get an impression at a quick glance whether the measured values displayed are OK or not. Aside from that, it just looks pretty cool (\/Star Trek-like). \ud83d\ude42<\/p>\n\n\n\n
\"\"<\/a>
In addition to the usual setting options, you can set the \u201cType\u201d, the \u201cValue format\u201d, the \u201cUnits\u201d, the \u201cRange\u201d, the \u201cColor gradients\u201d and the \u201cSectors\u201d with the Gauge node. You already know \u201cLabel\u201d and \u201cValue format\u201d from the previous nodes. The \u201cUnits\u201d property allows you to specify the displayed unit again. You can use the \u201cRange\u201d property to specify the range of values to be displayed. For example, if you want to display a humidity value, this range must be from 0 to 100%. For an outdoor temperature range, a temperature range should be selected that is normally not below or exceeded. For example -20\u00b0C to 45\u00b0C. With the \u201cColor gradient\u201d property you can now specify the colors that are displayed to match the displayed measured value. In this example, the color green is displayed for all small measurements, the color yellow for all medium measurements, and the color red for all high measurements. Normally the places where the colors merge into the next are evenly distributed. However, if you want a different scaling or even want to leave out the middle color, you can use the \u201cSectors\u201d setting to specify which colors should change.<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
Under \u201cType\u201d you can also select which gauge type you want to have displayed. You can see examples of the available types here.<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
View of the gauge type \u201cGauge\u201d in the dashboard.<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
View of the \u201cDonut\u201d gauge type in the dashboard.<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
View of the \u201cCompass\u201d gauge type in the dashboard.<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
View of the \u201cLevel\u201d gauge type in the dashboard.<\/figcaption><\/figure>\n\n\n\n
\n\n\n\n
Chart node<\/h2>\n\n\n\n
The chart node is suitable for displaying value trends. This allows you, for example, to save and display the course of a temperature over a set period of time. Unfortunately, the values are currently only saved temporarily. This means that if your NodeRed server crashes or is otherwise restarted, all previously displayed values will be lost.<\/p>\n\n\n\n
\"\"<\/a>
Compared to the previous nodes, this node offers a few more setting options. Here you can first go to \u201cType\u201d<\/strong> set the type of diagram. You can highlight the individual measured values in each display by checking the box \u201cenlarge point\u201d<\/strong> puts. You can set the resolution or duration of the data progression on the X-axis (the horizontal axis running from left to right) with the parameter \u201cX-axis label\u201d<\/strong> set. Here you can specify the length of time or how many measured values should be displayed. For example, you can choose to display either all measurements from the last two hours or the last 500 measurements. This can be matched with \u201cX-axis label\u201d<\/strong> then also set the labeling of the X-axis. With \u201cY axis\u201d<\/strong> However, only the displayed value range of the Y-axis can be set. For example, if you only want to see the value range from 0\u00b0 to 30\u00b0C for a temperature curve, you have to enter this here. Using the option \u201cLegend\u201d<\/strong> You can also configure a legend, which is particularly useful when there are several curves displayed. This means you can display a name for each curve color. The option \u201cInterpolates\u201d<\/strong> decides how the individual measured values are connected to each other. Last but not least, you can use \u201cSeries Colors\u201d to set the colors used for the curves and \u201cBlank label\u201d to set the text that should be displayed if no measured values are yet available for the curve.<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
View of the chart node in the dashboard.<\/figcaption><\/figure>\n\n\n\n
\n\n\n\n
Audio out node<\/h2>\n\n\n\n
The Audio Out Node is another one of those nodes that does exactly what its name suggests. It outputs text as spoken language.<\/p>\n\n\n\n
\"\"<\/a>
To do this, you can select the \u201cTTS Voice\u201d (=\u201dText-To-Speech\u201d voice) in the properties of the node. This allows you to adapt the voice output a little more to your style. Ultimately, this node outputs every text you send to it via voice. It is important, however, that this voice is not output locally on the Node Red server but in the browser of the user who has just opened the dashboard. If no browser window is open at the time the voice message is sent, the voice message will not be output. However, you could achieve local output on the NodeRed server via connected speakers using the \u201cEspeak\u201d program. You can find information about this in the article RaspberryPi \u2013 Install speech output with eSpeak<\/strong><\/em><\/a>.<\/figcaption><\/figure>\n\n\n\n
\n\n\n\n
Notification node<\/h2>\n\n\n\n
The notification node allows you to display notifications on the open dashboard. This can be displayed as information on the edge or centered in the middle of the screen including a confirmation button.<\/p>\n\n\n\n
\"\"<\/a>
In the settings window of the notification node you can set the position of the notification field under \u201cLayout\u201d. There is, among other things, the \u201cOK\/Cancel Dialog\u201d option, which allows you to equip the notification with two buttons. These must then be confirmed by the user. This way you can be sure that the user has definitely noticed the message. To do this, you can specify what should be on the \u201cConfirm\u201d and \u201cCancel\u201d buttons under \u201cDefault action label\u201d and \u201cSecondary action label\u201d.<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
In addition to the notification variant that the user has to confirm, there is also the option to only display the notification as a notice. To do this, select \u201cTop Right\u201d under \u201cLayout\u201d, for example. If you then send a notification to the node, it will be displayed in the upper right corner and will automatically disappear after a few seconds.<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
View of a notification that needs to be confirmed in order to make it disappear again.<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
View of a notification in the upper right corner.<\/figcaption><\/figure>\n\n\n\n
\n\n\n\n
UI control node<\/h2>\n\n\n\n
With the UI control node you can control the appearance and behavior of the dashboard view. This can be used, for example, to change the tab displayed and to \u201cfold in and out\u201d groups. You can also use this node to react to whether a user has opened or closed the dashboard.<\/p>\n\n\n\n
\"\"<\/a>
For this node, only the name can be configured in the settings window. All adjustable parameters or available information are also summarized in the information bar on the side.<\/figcaption><\/figure>\n\n\n\n
\n\n\n\n
Template node<\/h2>\n\n\n\n
The template node is a very versatile node. You can use it to integrate your own HTML code into the dashboard. This can then react individually to the messages received from the connected nodes and also send messages itself.<\/p>\n\n\n\n
\"\"<\/a>
Using the template node you can add content to the header of the page...<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
...or add nodes to groups that you have formatted as you like with your own HTML code.<\/figcaption><\/figure>\n\n\n\n
thztjz<\/p>\n\n\n\n
\"\"<\/a>
For example, you can use this node to insert links to any page on the dashboard. In this example, the link to the MagicMirror view is generated and displayed on the dashboard.<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
A link will then be visible on the dashboard which will redirect you to the MagicMirror view.<\/figcaption><\/figure>\n\n\n\n
\n\n\n\n
Further examples<\/h2>\n\n\n\n
Below you will find a small list of the articles in which I also use the dashboard nodes. Maybe there is something for you too. \ud83d\ude42<\/p>\n\n\n\n