Skip to Content
Last modified by Herong Lu on 2022/05/19 16:49
From version 42.1
edited by Herong Lu
on 2022/05/19 16:31
Change comment: Uploaded new attachment "image-20220519163141-37.png", version {1}
To version 43.1
edited by Herong Lu
on 2022/05/19 16:35
Change comment: There is no comment for this version

Summary

Details

Page properties
Content
... ... @@ -14,11 +14,11 @@
14 14  
15 15  [[image:image-20220519134346-4.png]]
16 16  
17 -== Drag UDP in to the arrow area ==
17 +== Drag UDP into the editing area ==
18 18  
19 19  [[image:image-20220519134533-5.png]]
20 20  
21 -== Drag the function and debug to the blank area in the same way as above ==
21 +== The same method as above, drag and drop functions and debug into the editing area ==
22 22  
23 23  [[image:image-20220519134850-6.png]]
24 24  
... ... @@ -53,3 +53,71 @@
53 53  
54 54  
55 55  [[image:image-20220519150455-15.png]]
56 +
57 +== If you need data visualization, please refer to the following ==
58 +
59 +[[image:image-20220519152802-16.png]]
60 +
61 +~1. Click Install
62 +2. Search the dashboard
63 +3. Click Install
64 +
65 +[[image:image-20220519152956-17.png]]
66 +
67 +After the installation is successful, nodered will show the following node icon
68 +
69 +[[image:image-20220519153335-19.png]]
70 +
71 +== Below I use the line chart as an example ==
72 +
73 +Drag the line chart to the editing area
74 +
75 +Just drag and drop as many as you need, or you can copy
76 +
77 +The demo uses 3 kinds. Voltage, temperature, humidity
78 +
79 +[[image:image-20220519154521-20.png]]
80 +
81 +Double-click the function to set it
82 +
83 +[[image:image-20220519154640-21.png]]
84 +
85 +Adjusted to 3, because we need to display 3 charts
86 +
87 +[[image:image-20220519154812-22.png]]
88 +
89 +== Below are the chart settings ==
90 +
91 +Double-click while setting up the node as above
92 +
93 +[[image:image-20220519160314-23.png]]
94 +
95 +[[image:image-20220519160412-24.png]]
96 +
97 +[[image:image-20220519160759-27.png]]
98 +
99 +[[image:image-20220519161326-30.png]]
100 +
101 +[[image:image-20220519161431-31.png]]
102 +
103 +[[image:image-20220519161650-32.png]]
104 +
105 +After the display interface is defined for the first time, subsequent charts can directly select the display interface
106 +
107 +[[image:image-20220519162039-34.png]]
108 +
109 +[[image:image-20220519162214-35.png]]
110 +
111 +Connect graph nodes to functions with lines
112 +
113 +Click to deploy
114 +
115 +[[image:image-20220519162412-36.png]]
116 +
117 +Enter the server public IP + port 1880/ui
118 +
119 +example：[[http:~~/~~/xxx.xx.xx.xx:1880/ui>>http://119.91.62.30:1880/ui/#!/18?socketid=WY1MCE0RFEKHey8KAADj]]
120 +
121 +[[image:image-20220519163141-37.png]]
122 +
123 +At this point, the basic demonstration of nodered is completed. If you need to beautify the chart and various visualizations, you can go to the official documentation of nodered for further understanding.