Shulou(Shulou.com)06/01 Report--

This article mainly introduces what dashboard is in node-red. It is very detailed and has certain reference value. Friends who are interested must finish reading it.

Node-red supports custom nodes, as well as custom graphical nodes. There are also excellent developers who share their graphical nodes for free. Here is an example of a stock interface to show you what a good node-red interface can do.

7.1 installation and introduction of dashboard 7.1.1 installation of dashboard

Our commonly used graphical nodes are called dashboards, dashboard, which can also make good interfaces, such as

Dashboard also has some other controls, such as

The installation of the dashboard is similar to the serial port. Type "dashboard" in the input box of the installation node, find the control named "node-red-dashborad" and click install.

After installation, there will be many new controls on the left side of the screen.

7.1.2 verify installation results

We randomly choose one of the controls to verify that the installed control can be used. Find the "date picker" control in the deshboard control area, drag it into the workspace, double-click the node, click the edit button behind the Group input box, and name the Group node and Tab node Group and Tab, respectively, as shown in the figure.

Drag into a debug node and connect to the deployment. Enter the address http://localhost:1880/ui in the browser to open this web page correctly, which means that the installation is successful. Then you can see a line called date.

We can choose any date, such as the opening of the Beijing Olympic Games.

You can see a timestamp under the debugging window.

The convenience of dashboard is that you can easily build a web page that looks good with a single control.

7.1.3 introduction to the dashboard

Look at the brief introduction of the dashboard after you have already used it, it is not easy to be confused.

Dashboard is mainly used to quickly create real-time data dashboards. It requires a node-red version of 0.14 or higher.

The layout of the dashboard depends on the Tab and Group properties. Tab can be understood as a page, and Group is a grouping. Tab can contain Group. In the picture on the day we chose the "Beijing opening ceremony", there was a group called Group. The default width of the element for each group is 6 units. The default width of each unit is 48PX, with a spacing of 6PX. There can be multiple groups on a page, and it is recommended that you use multiple groups instead of one large group. Because node-red can dynamically adjust the position of groups according to the size of the page.

When using the dashboard node, there will be a small label named dashborad next to the "debug window" on the right side of the screen, with three options Layout,Theme and Site below.

Layout means layout. In Layout, you can rearrange Tab,Group and controls and edit their properties. You can also add other web pages to Tab.

Theme means theme. You can choose bright, dark, or custom.

Site means address, you can set the UI of the title, or select the title bar. You can also set the basic graphics of the grid layout in pixels, that is, the "unit" that just mentioned that the default is 48 pixels, or set the size of the control or group separately.

Dashboard controls can generally set Label or name, and Label and name can also be specified or modified by passing in the properties of the message. In fact, the content of the control can be configured with messages, which belongs to higher-level usage. For those who are interested, please refer to https://github.com/node-red/node-red-dashboard/blob/master/config-fields.md.

An introduction to the controls that come with Dashboard is shown in the following table.

Name Chinese name details

The button button can be clicked to send a msg

The dropdown drop-down menu can specify the relationship between the label and the value

Switch switch adds a switch to the user interface, and the switch changes can produce a msg

Slider slider horizontal slider, variable step size

Numeric Digital selection Digital input Control with up and Down buttons

Text input text input text with optional tags, and can also support passwords, email and color modes

The date picker date selector is used to select a date

Colour picker Color Picker is used to select colors

A form form is a widget that can be made up of multiple child widgets. When submitted, all values are submitted as a single message.

Text text is a read-only control that can configure Label and Value

The gauge instrument has four modes, standard, doughnut, compass and waveform. You can specify the color range of the standard instrument or doughnut meter

Chart charts have broken line, bar and pie chart patterns, and you can use date formatter strings to customize X-axis labels

Audio out audio output is used to play audio or send text to voice clients

Notification notifications create alerts for users, which can be a pop-up window or an alarm box

Ui control UI control allows dynamic control of the dashboard

The template template node allows users to create their own widgets within the framework using HTML,Javascript.

7.2 Common applications of input dashboard controls

As can be seen from the profile of the dashboard, there are two types of dashboard controls: one is the input type, which is similar to the inject control and is used to generate msg. The other is the display type, or output type, which is similar to the debug control and is used to display some data. This section only deals with input controls.

7.2.1 introduction to Button button

Help information for button

Add a button to the user interface.

Clicking this button generates a message with a payload. If no load is specified, the node id is used.

The icon, text, and background of the button can be customized or set using message properties, such as msg.background,msg.topic. You can also use msg.enabled to enable or disable buttons.

The method that uses msg to set up uses a function node, such as using code within the function node to set msg.background to "black" and return msg. The method of using a function to set a control is not explained here.

Drag a button node into the workspace and set Tab and Group to home and control, respectively.

Drag in another debug node, connect, and deploy.

You can see the button you just set under the http://localhost:1880/ui page. Click the button and you can see the following information in the debug window.

This means that after clicking the button, the button can inject a packet into the stream.

7.2.2 use buttons to realize a simple telephone dialing interface

When we edit the button node, there are actually many options that are empty, such as size, icon, label, color, and so on. Using these options properly, you can make some interesting things even with button controls, such as a simple phone dialing interface.

Next, combining this with the dialing interface, let's talk about what parameters we have set. The following are the parameters that the button node can set.

First of all, we can see intuitively that the background of the number is different. The background of 123 is gray, and the background of 456 is light blue.

So "gray" should be filled in at the Background of the 123control.

The size of the button is also different. Generally speaking, the size of the button is automatic by default, that is, the length follows Group and the width is 1. What is the width of the Group? The default is 6, which can be modified, and the dialing interface will be changed to 3. The modified interface is under the dashboard interface on the right side of the screen:

Width is the width. By the way, the two options below are to display the name of the group, and to allow shrinking. The effect is like this:

Obviously, the width of the ordinary digital button is 1, and the width of the dial button is 2. And the color of the text is different. This is very simple, you can modify the colour, for example, the text of the number is black.

In addition, you can see that there is a small phone icon on the dial button; the size of button 0 seems to be a little larger than other numbers, which is actually an icon. How is the icon set?

In other software, setting icons may require a local picture. Node-red uses an online icon library (obviously not available when not connected to the Internet), and the address is https://material.io/tools/icons/?style=baseline

There are a lot of icons on this page. I intercepted some and put them here:

There is a name under each icon. If you need to use this icon, enter the name after Icon, such as the icon that presses 0:

Since it is a phone dial button, of course it should have the function of dialing. When we press each number button, we can send the number to the stream; when we press "CALL", we print out all the previously pressed numbers and temporarily use the debug node to display them.

After analysis, it is found that a function node is needed to save the numbers pressed before using the context function, and print them out at one time after receiving the command from CALL. The procedure of the function node is as follows:

Var temp = context.get ('num') | | "; if (msg.topic! =" call ") {temp = temp +"+ msg.payload; context.set (' num',temp);} else {msg.payload = temp; return msg;}

Set the flow as shown in the figure:

If the order of numbers is reversed in the interface of the dashboard, you can adjust the order by dragging nodes under the dashboard page on the right side of the screen:

Let's "dial" the phone number of Youdao (my company) to observe the phenomenon: when you press the number button, it does not display a single number; after pressing CALL, a string of phone numbers can be displayed.

We give an example to introduce in detail the function of each option of the button control, and the option function of other dashboard controls is similar. Smart readers should learn to draw inferences. Here is the code, import it into your node-red workspace and study it.

[{"id": "e9614f74.8d223", "type": "ui_button", "z": "c1c86dfa.43a1a", "name": "", "Group": "72c43141.3520c", "order": 1, "width": "1", "height": "1", "passthru": false, "label": "1", "color": "black", "bgcolor": "gray", "icon": "," payload ":" 1 "," payloadType ":" num "," topic ":" "x": 190, "y": 60, "wires": [["cc35b265.c22d"]}, {"id": "b98d8139.972c8", "type": "ui_button", "z": "c1c86dfa.43a1a", "name": "", "Group": "72c43141.3520c", "order": 2, "width": "1", "height": "1", "passthru": false, "label": "2", "color": "black", "bgcolor": "gray" "icon": "," payload ":" 2 "," payloadType ":" num "," topic ":"," x ": 190," y": 100," wires ": [[" cc35b265.c22d "]}, {" id ":" ded462b1.c2e2b "," type ":" ui_button "," z ":" c1c86dfa.43a1a "," name ":"," Group ":" 72c43141.3520c "," order ": 3," width ":" 1 "," height ":" 1 " "passthru": false, "label": "3", "color": "black", "bgcolor": "gray", "icon": "", "payload": "3", "payloadType": "num", "topic": "," x ": 190," y ": 140," wires ": [[" cc35b265.c22d "]}, {" id ":" 857ebe34.c8d85 "," type ":" ui_button "," z ":" c1c86dfa.43a1a "," name ":" "Group": "72c43141.3520c", "order": 4, "width": "1", "height": "1", "passthru": false, "label": "4", "color": "black", "bgcolor": "light blue", "icon": "", "payload": "4", "payloadType": "num", "topic": "," x ": 190," y": 180," wires ": [[" cc35b265.c22d "]]}, {" id ":" f11b9214.04659 " "type": "ui_button", "z": "c1c86dfa.43a1a", "name": "", "Group": "72c43141.3520c", "order": 5, "width": "1", "height": "1", "passthru": false, "label": "5", "color": "black", "bgcolor": "light blue", "icon": "," payload ":" 5 "," payloadType ":" num "," topic ":", "x": 190," y ": 220 "wires": [[cc35b265.c22d "]}, {" id ":" 94ebe434.733518 "," type ":" ui_button "," z ":" c1c86dfa.43a1a "," name ":"," Group ":" 72c43141.3520c "," order ": 6," width ":" 1 "," height ":" 1 "," passthru ": false," label ":" 6 "," color ":" black "," bgcolor ":" light blue "," icon ":", "payload": "6" "payloadType": "num", "topic": "", "x": 190,260y "," wires ": [[" cc35b265.c22d "]]}, {" id ":" 4043b4bf.bcc71c "," type ":" ui_button "," z ":" c1c86dfa.43a1a "," name ":"," Group ":" 72c43141.3520c "," order ": 7," width ":" 1 "," height ":" 1 "," passthru ": false," label ":" 7 " "color": "black", "bgcolor": "orange", "icon": "," payload ":" 7 "," payloadType ":" num "," topic ":"," x ": 190," y": 300," wires ": [[" cc35b265.c22d "]]}, {" id ":" 2301a306.95065c "," type ":" ui_button "," z ":" c1c86dfa.43a1a "," name ":"," Group ":" 72c43141.3520c "," order ": 8 "width": "1", "height": "1", "passthru": false, "label": "8", "color": "black", "bgcolor": "orange", "icon": "", "payload": "8", "payloadType": "num", "topic": "x": 190,340, "wires": [["cc35b265.c22d"]]}, {"id": "aa51af93.26b73", "type": "ui_button" "z": "c1c86dfa.43a1a", "name": "", "Group": "72c43141.3520c", "order": 9, "width": "1", "height": "1", "passthru": false, "label": "9", "color": "black", "bgcolor": "orange", "icon": "", "payload": "9", "payloadType": "num", "topic": "", "x": 190, "y": 380 "wires": [[cc35b265.c22d "]}, {" id ":" 85bdbffa.6a1dc "," type ":" ui_button "," z ":" c1c86dfa.43a1a "," name ":"," Group ":" 72c43141.3520c "," order ": 0," width ":" 2 "," height ":" 1 "," passthru ": false," label ":" call "," color ":" yellow "," bgcolor ":" green "," icon ":" phone "," payload ":" 0 " "payloadType": "num", "topic": "call", "x": 190, "y": 460, "wires": [["cc35b265.c22d"]]}, {"id": "cc35b265.c22d", "type": "function", "z": "c1c86dfa.43a1a", "name": "store numbers" Dial "," func ":" var temp = context.get ('num') | |\ "\" \ nif (msg.topic! =\ "call\") {\ ntemp = temp +\ "\" + msg.payload;\ ncontext.set ('num',temp);\ n}\ nelse {\ nmsg.payload = temp;\ ncontext.set (' num',\ "\");\ n return msg \ n}\ n "," outputs ": 1," noerr ": 0," x ": 560," y": 240," wires ": [[" c96d8af2.f3a4b8 "]}, {" id ":" c96d8af2.f3a4b8 "," type ":" debug "," z ":" c1c86dfa.43a1a "," name ":"," active ": true," tosidebar ": true," console ": false," tostatus ": false," complete ":" false "," x ": 750,240" y ": "wires": []}, {"id": "d011a93b.f06a78", "type": "ui_button", "z": "c1c86dfa.43a1a", "name": "0", "Group": "72c43141.3520c", "order": 9, "width": "1", "height": "1", "passthru": false, "label": "," color ":" black "," bgcolor ":" orange "," icon ":" exposure_zero "," payload ":" 0 " "payloadType": "num", "topic": "", "x": 190,420, "wires": [["cc35b265.c22d"]]}, {"id": "72c43141.3520c", "type": "ui_Group", "z": "", "name": "phone", "tab": "aacbcc03.d359b", "disp": true, "width": "3", "collapse": true}, {"id": "aacbcc03.d359b", "type": "ui_tab" "z": "," name ":" home "," icon ":" dashboard "}]

Next, modify the button

7.2.3 use of switch switch

Switch in Dashboard can add a switch to the user interface.

Each change in the switch state results in a msg.payload with an on or off value.

The colors and icons of the switch can be configured or updated by the incoming msg, similar to button.

I have used the function control switch before, and at that time I used the "fork in the road" to describe the function control. The switch in the dashboard is a real switch that functions like a button with "on" and "off" states.

Drag directly into a switch node, modify its Group and Tab, connect to the debug node, and deploy.

You can see this switch under http://localhost:1880/ui/. Click the switch to see the output of true under the debug window.

Of course, true and false can also be changed to other loads, similar to inject nodes.

7.2.4 use of slider slider

When the phone is adjusting the brightness of the screen, there is often a horizontal line, stringing a ball, and dragging the ball can change the brightness of the screen. A slider is made up of a horizontal line and a ball. It looks a bit like Tomatoes on sticks, who has only one food left, or it's more appropriate to call it a slider.

The slider in Dashboard can help the user change the value of the setting within the range of the minimum and maximum values. Each change takes the value as the payload of the message.

Drag a slider control, modify Group and Tab, then connect to the debug node, and deploy.

The slider is shaped as follows

Drag the slider to see the value of the current slider in the debugging window.

Note that if you need to go from 0 to 3, the values of 1 and 2 will also be sent when you drag the slider. You can click directly to the location of 3.

By default, the slider ranges from 0 to 10, step 1, or you can modify it, for example, 10 to 80, step 2.

7.2.5 use of input box text input

Text input can add a text input area to the user interface, which can be regular text, e-mail, or a color picker, and so on.

The input is sent in the form of msg.payload. You can also preset the entered text by entering the load of the msg.

The Delay parameter sets the delay from the input character to the send, which defaults to 300ms. You can also set it to 0 and wait for the "Enter" or "Tab" keys to be pressed to send.

E-mail mode can use red to represent useless addresses.

The time input type returns the millisecond value starting at midnight.

Next, we will verify the function of text input through practice.

Drag into a text input node, modify Group and Tab, then connect to the debug node, and deploy.

Enter any text that can be seen in the debug window.

However, you need to type a little faster, and if the interval between two characters is greater than 300ms, you will output more than one, and you will see this result:

So I suggest setting the input delay to 0 and ending with "Enter" and "Tab".

Try other functions of the input box again, such as passwords:

We also write Label, which can be used to display some tips on the dashboard page.

When you enter a password, the prompt text becomes smaller and the password is replaced by dots.

In "number" mode, there is no way to enter other characters.

7.2.6 use the color selection function of text input to set the color for the button

There is a color selection in the text input mode, you can bring up a color palette and return the color code. When we talked about buttons, we said that we could use msg to set buttons, and this is a good time to combine the two.

First, we set the mode of text input to picker and use the debug node to see what will be output after the selected color.

Click the color input box on the dashboard page to see a color palette like this:

Let's pick a random color and click OK. Like red. Let's take a look at the debug window information.

The message received is # ff0000, which is the red number. We can also use this way on the page where the color is set. It is very convenient to use the color selector to look at the color coding and then set the color. 7.2.1 when I set the color of the button in the section, I racked my brains to come up with the words gray,orange and light blue.

Next, to improve the program, because it is relatively simple, I will directly attach the source code below, you should be able to understand the source code. It is important to note that the attribute of msg.payload is assigned to msg.colour with the change node, and then the colour in button is not empty, but {{msg.colour}}.

Background is set up directly by encoding.

The effect is that no matter what color you choose, the heart in the middle becomes what color.

You can also use this method to set the background or text dynamically, and students who are interested can study it themselves. The reference code is here:

[{"id": "1fbb5eaf.febb51", "type": "ui_text_input", "z": "7a8c632b.0c701c", "name": "", "label": "Select text or icon color", "group": "bd84de44.ae507", "order": 0, "width": 0, "height": 0, "passthru": true, "mode": "color", "delay": "300", "topic": "", "x": 220, "y": 120 "wires": ["69912933.9c62e8", "4dd666d2.d144e8"]}, {"id": "4dd666d2.d144e8", "type": "debug", "z": "7a8c632b.0c701c", "name": "", "active": true, "tosidebar": true, "console": false, "tostatus": false, "complete": "false", "x": 390, "y": 60, "wires": []}, {"id": "69912933.9c62e8", "type": "change" "z": "7a8c632b.0c701c", "name": "payload font conversion", "rules": [{"t": "move", "p": "payload", "pt": "msg", "to": "colour", "tot": "msg"}], "action": "," property ":", "from": "," to ":", "reg": false, "x": 440, "y": 120, "wires": [["b22f434.b055dc"]} {"id": "b22f434.b055dc", "type": "ui_button", "z": "7a8c632b.0c701c", "name": "", "group": "bd84de44.ae507", "order": 0, "width": "0", "height": "0", "passthru": false, "label": "", "color": "{{msg.colour}", "bgcolor": "# ff80ff", "icon": "favorite", "payload": "," payloadType ":" str " "topic": "," x ": 670,120," wires ": [[]]}, {" id ":" bd84de44.ae507 "," type ":" ui_group "," z ":", "name": "CONTROL", "tab": "aacbcc03.d359b", "disp": true, "width": "6", "collapse": false}, {"id": "aacbcc03.d359b", "type": "ui_tab", "z": "," name ":" home " "icon": "dashboard"}]

7.2.7 use of drop-down menu dropdown

The drop-down menu is a combination of an input box and a button and is often used for input with specified options. For example, which province do you live in? You can use the drop-down menu for this answer, but there may be more choices. But it can prevent the user from entering information and prevent him from making mistakes. Next, use the drop-down menu to make a simple example. As the saying goes, "Peach, three apricot, four plum, five years, eat apples and so on for eight years, dates can be sold for money that year." This sentence contains 5 key-value pairs, that is, the correspondence between keywords and values, and peach correspondence for 5 years. Jujube corresponds to one year, and we use the drop-down menu to accomplish the task: select a fruit and output the corresponding year. Drag a dropdown node and configure it as shown in the figure:

Drag in another text node. Note that it is not text input. We used to use the debug node to display information, but now we want to display the information on the dashboard page, using this node. Then make the following modifications:

Connect and deploy.

You can see such a page on the dashboard page. Click the drop-down menu to see the candidate box.

The code is as follows:

[{"id": "4989de73.41634", "type": "ui_dropdown", "z": "7a8c632b.0c701c", "name": "", "label": "what fruit trees have been planted?" , "place": "Please choose fruit", "group": "bd84de44.ae507", "order": 0, "width": 0, "height": 0, "passthru": true, "options": [{"label": "peach", "value": "3 years", "type": "str"}, {"label": "apricot", "value": "4 years", "type": "str"}, {"label": "Li", "value": "5 years" "type": "str"}, {"label": "Apple", "value": "8 years", "type": "str"}, {"label": "jujube", "value": "1 year", "type": "str"}], "payload": "topic": "x": 330, "y": 260, "wires": [["ba04c2f1.2e9c1"]]}, {"id": "ba04c2f1.2e9c1", "type": "ui_text" "z": "7a8c632b.0c701c", "group": "bd84de44.ae507", "order": 0, "width": 0, "height": 0, "name": "", "label": "how many years can it bear fruit?" , "format": "{{msg.payload}}", "layout": "row-spread", "x": 540, "y": 260, "wires": []}, {"id": "bd84de44.ae507", "type": "ui_group", "z": "", "name": "CONTROL", "tab": "aacbcc03.d359b", "disp": true, "width": "6", "collapse": false}, {"id": "aacbcc03.d359b" "type": "ui_tab", "z": "", "name": "home", "icon": "dashboard"}]

The above is all the content of this article "what is dashboard in node-red?" Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.