【2023.11.29获奖项目】浏览器网页与T5L迪文屏串口深度扩展

dwinForumAdmin

【开源】浏览器网页与T5L迪文屏串口深度扩展(Node-RED技术)

一、简介

因平时都太忙了，受技术网友的多次催促，今天抽点休息时间来给大家分享一个技术帖，看到标题有的人可能会惊的一声，这有什么好奇的嘛，不就是一个串口通信嘛，这有什么技术含量呢，接下来我为大家揭晓答案。请大家再仔细看一看标题，是否有注意到浏览器和Node-RED技术等关键字，我相信有一部分人肯定拿串口做过各种花式应用，那它的分布方式无非就是如下几种：

• T5L迪文屏串口和硬件外设模块通信；
• T5L迪文屏串口和单片机、PLC、Arduino等微处理器通信；
• T5L迪文屏串口和PC电脑上位机通信。
  

而本帖要讲的是第4种方式，即T5L迪文屏串口和浏览器网页串口通信，是利用Node-RED技术为通道，可以把迪文屏带入到一种新的领域，只需要一个串口，迪文屏就可以进行非常广的技术拓展，可能这样讲，大家还是不能理解它的强大，我再举如下2个例子：

• 以往迪文屏是不是需要借助wifi模块才能接入到互联网或者物联网，而通过Node-RED技术，就不需要了，只需迪文屏的一个串口即可，迪文屏就可以接入到互联网，相当于把串口变成了网口的功能。
• 大多数人可能用迪文屏跟PLC做有线通信，而通过Node-RED技术，可以实现无线通信，重点的是不需要开发者去弄懂太多的PLC协议，因为它封装了内部，这对初学者来说是非常友好的，降低难度的同时也加快了开发进度。
  

那Node-RED是什么呢？它是一个“基于事件驱动的低代码编程物联网平台”，通过浏览器为交互入口，让用户以拖拽拉控件的方式进行编程，它可以运行在树莓派、arduino、Mac os、windows、Android等多种平台上，它的官网地址是：https://nodered.org/，下面是官网主页截图：

二、Node-RED网页设计

1.如何安装Node-RED开发环境

打开cmd命令窗口，执行如下命令：npm install -g --unsafe-perm node-red

2.如何进入Node-RED编程界面

打开cmd命令窗口，直接输入node-red命令运行，然后打开浏览器输入：http://localhost:1880

3.本开源项目的节点流程代码如下

就这样一幅简单的节点流程代码图它却描述了一个丰富的功能页面，其中节点的配置信息如下:

页面布局如下:

4.如何把Node-RED流程设计给运行起来看效果呢?

先点击右上角的部署按钮，如下所示：

然后在浏览器网址处输入: http://localhost:1880/ui 即可。

5.网页运行效果展示

数据收发Tab页面效果如下:

图表交互Tab页面效果如下:

基本信息Tab页面效果如下:

6.Node-RED网页示意代码如下：

1. [
   
2.     {
   
3.         "id": "09e0777eaff7fdea",
   
4.         "type": "tab",
   
5.         "label": "main_flow",
   
6.         "disabled": false,
   
7.         "info": "",
   
8.         "env": []
   
9.     },
   
10.     {
    
11.         "id": "c1661722c7db00f9",
    
12.         "type": "group",
    
13.         "z": "09e0777eaff7fdea",
    
14.         "name": "数据收发页面",
    
15.         "style": {
    
16.             "label": true,
    
17.             "label-position": "n",
    
18.             "color": "#ff0000"
    
19.         },
    
20.         "x": 294,
    
21.         "y": 39,
    
22.         "w": 672,
    
23.         "h": 322
    
24.     },
    
25.     {
    
26.         "id": "7afc705aac2feb4b",
    
27.         "type": "group",
    
28.         "z": "09e0777eaff7fdea",
    
29.         "name": "基本信息页面",
    
30.         "style": {
    
31.             "label": true,
    
32.             "color": "#ff0000",
    
33.             "label-position": "n"
    
34.         },
    
35.         "nodes": [
    
36.             "a944cadcb2b4632a",
    
37.             "b3d256b04fc627cc",
    
38.             "922612b9445f2535",
    
39.             "fa7c6de2d7cfee3d",
    
40.             "b902ed643e396df2"
    
41.         ],
    
42.         "x": 294,
    
43.         "y": 399,
    
44.         "w": 592,
    
45.         "h": 142
    
46.     },
    
47.     {
    
48.         "id": "19a36681d87b7de2",
    
49.         "type": "group",
    
50.         "z": "09e0777eaff7fdea",
    
51.         "name": "图表交互页面",
    
52.         "style": {
    
53.             "label": true,
    
54.             "label-position": "n",
    
55.             "color": "#ff0000"
    
56.         },
    
57.         "x": 294,
    
58.         "y": 579,
    
59.         "w": 792,
    
60.         "h": 322
    
61.     },
    
62.     {
    
63.         "id": "a944cadcb2b4632a",
    
64.         "type": "ui_text",
    
65.         "z": "09e0777eaff7fdea",
    
66.         "g": "7afc705aac2feb4b",
    
67.         "group": "0f7fa91d4ff14c6e",
    
68.         "order": 1,
    
69.         "width": 0,
    
70.         "height": 0,
    
71.         "name": "",
    
72.         "label": "波特率:",
    
73.         "format": "115200",
    
74.         "layout": "row-spread",
    
75.         "className": "",
    
76.         "style": false,
    
77.         "font": "",
    
78.         "fontSize": 16,
    
79.         "color": "#000000",
    
80.         "x": 380,
    
81.         "y": 440,
    
82.         "wires": []
    
83.     },
    
84.     {
    
85.         "id": "fbb314a16ea00889",
    
86.         "type": "serial in",
    
87.         "z": "09e0777eaff7fdea",
    
88.         "g": "c1661722c7db00f9",
    
89.         "name": "串口接受数据",
    
90.         "serial": "83fb45b5f4b51d61",
    
91.         "x": 390,
    
92.         "y": 140,
    
93.         "wires": [
    
94.             [
    
95.                 "685a2fb2c2dc8fba"
    
96.     },
    
97.     {
    
98.         "id": "1ba3c6e812e03e27",
    
99.         "type": "serial out",
    
100.         "z": "09e0777eaff7fdea",
     
101.         "g": "c1661722c7db00f9",
     
102.         "name": "串口发送",
     
103.         "serial": "83fb45b5f4b51d61",
     
104.         "x": 860,
     
105.         "y": 260,
     
106.         "wires": []
     
107.     },
     
108.     {
     
109.         "id": "5fb7f1d3d7425133",
     
110.         "type": "status",
     
111.         "z": "09e0777eaff7fdea",
     
112.         "g": "c1661722c7db00f9",
     
113.         "name": "监听串口状态",
     
114.         "scope": [
     
115.             "fbb314a16ea00889"
     
116.         ],
     
117.         "x": 390,
     
118.         "y": 200,
     
119.         "wires": [
     
120.             [
     
121.                 "3f18d1fdea398d35"
     
122.     },
     
123.     {
     
124.         "id": "3f18d1fdea398d35",
     
125.         "type": "function",
     
126.         "z": "09e0777eaff7fdea",
     
127.         "g": "c1661722c7db00f9",
     
128.         "name": "提取串口状态",
     
129.         "func": "let sta = msg.status.text;\nlet color = 'red';\nif (sta.indexOf('not-connected') >= 0) \n    sta = '未连接';\nelse if (sta.indexOf('connected') >= 0)\n{\n    sta = '连接成功';\n    color = 'green';\n}else\n    sta = '出现错误';\nmsg['payload'] = sta;\nmsg['color'] = color;\n\nreturn msg;",
     
130.         "outputs": 1,
     
131.         "timeout": 0,
     
132.         "noerr": 0,
     
133.         "initialize": "",
     
134.         "finalize": "",
     
135.         "libs": [],
     
136.         "x": 620,
     
137.         "y": 200,
     
138.         "wires": [
     
139.             [
     
140.                 "2ec78ff0b0b9a56f"
     
141.     },
     
142.     {
     
143.         "id": "2ec78ff0b0b9a56f",
     
144.         "type": "ui_template",
     
145.         "z": "09e0777eaff7fdea",
     
146.         "g": "c1661722c7db00f9",
     
147.         "group": "4e4db779a7b91019",
     
148.         "name": "显示串口状态",
     
149.         "order": 1,
     
150.         "width": 0,
     
151.         "height": 0,
     
152.         "format": "<div style="font-size:19px;color:#444;margin:10px;">\n    串口状态:<span style="margin-left:5px;font-weight:bold;color:{{msg.color}};">{{msg.payload}}<span>\n</div>",
     
153.         "storeOutMessages": true,
     
154.         "fwdInMessages": true,
     
155.         "resendOnRefresh": true,
     
156.         "templateScope": "local",
     
157.         "className": "",
     
158.         "x": 860,
     
159.         "y": 200,
     
160.         "wires": [
     
161.             []
     
162.     },
     
163.     {
     
164.         "id": "685a2fb2c2dc8fba",
     
165.         "type": "ui_template",
     
166.         "z": "09e0777eaff7fdea",
     
167.         "g": "c1661722c7db00f9",
     
168.         "group": "4e4db779a7b91019",
     
169.         "name": "显示接收到的串口数据",
     
170.         "order": 2,
     
171.         "width": 0,
     
172.         "height": 0,
     
173.         "format": "<div style="font-size:19px;padding:10px;color:#444;">\n    数据接受区:\n    <div style="border: 2px solid #aaa;margin-top:10px;padding:10px;min-height:120px;color:#000;">{{msg.payload}}</div>\n</div>\n\n",
     
174.         "storeOutMessages": true,
     
175.         "fwdInMessages": true,
     
176.         "resendOnRefresh": true,
     
177.         "templateScope": "local",
     
178.         "className": "",
     
179.         "x": 720,
     
180.         "y": 140,
     
181.         "wires": [
     
182.             []
     
183.     },
     
184.     {
     
185.         "id": "e87a9ff87737f4aa",
     
186.         "type": "ui_form",
     
187.         "z": "09e0777eaff7fdea",
     
188.         "g": "c1661722c7db00f9",
     
189.         "name": "",
     
190.         "label": "数据发送区:",
     
191.         "group": "4e4db779a7b91019",
     
192.         "order": 7,
     
193.         "width": 0,
     
194.         "height": 0,
     
195.         "options": [
     
196.             {
     
197.                 "label": "请输入要发送的数据",
     
198.                 "value": "payload",
     
199.                 "type": "multiline",
     
200.                 "required": true,
     
201.                 "rows": 1
     
202.             }
     
203.         ],
     
204.         "formValue": {
     
205.             "payload": ""
     
206.         },
     
207.         "payload": "",
     
208.         "submit": "发送",
     
209.         "cancel": "清空",
     
210.         "topic": "topic",
     
211.         "topicType": "msg",
     
212.         "splitLayout": false,
     
213.         "className": "",
     
214.         "x": 390,
     
215.         "y": 300,
     
216.         "wires": [
     
217.             [
     
218.                 "4e147ffdadc671a1"
     
219.     },
     
220.     //...
     
221.     {
     
222.         "id": "b902ed643e396df2",
     
223.         "type": "ui_template",
     
224.         "z": "09e0777eaff7fdea",
     
225.         "g": "7afc705aac2feb4b",
     
226.         "group": "0f7fa91d4ff14c6e",
     
227.         "name": "",
     
228.         "order": 4,
     
229.         "width": 0,
     
230.         "height": 0,
     
231.         "format": "<div style="text-align:center;margin-top:80px;">\n    <img src="https://dwin.com.cn/img/logo.png?1699842946"/>\n</div>\n",
     
232.         "storeOutMessages": true,
     
233.         "fwdInMessages": true,
     
234.         "resendOnRefresh": true,
     
235.         "templateScope": "local",
     
236.         "className": "",
     
237.         "x": 540,
     
238.         "y": 500,
     
239.         "wires": [
     
240.             []
     
241.     },
     
242.     {
     
243.         "id": "ae56c4786d0a807e",
     
244.         "type": "ui_dropdown",
     
245.         "z": "09e0777eaff7fdea",
     
246.         "g": "19a36681d87b7de2",
     
247.         "name": "",
     
248.         "label": "城市:",
     
249.         "tooltip": "",
     
250.         "place": "请选择城市",
     
251.         "group": "293748cd26b96ad4",
     
252.         "order": 2,
     
253.         "width": 0,
     
254.         "height": 0,
     
255.         "passthru": true,
     
256.         "multiple": false,
     
257.         "options": [
     
258.             {
     
259.                 "label": "北京",
     
260.                 "value": "cmd0",
     
261.                 "type": "str"
     
262.             },
     
263.             {
     
264.                 "label": "上海",
     
265.                 "value": "cmd1",
     
266.                 "type": "str"
     
267.             },
     
268.             {
     
269.                 "label": "广州",
     
270.                 "value": "cmd2",
     
271.                 "type": "str"
     
272.             }
     
273.         ],
     
274.         "payload": "",
     
275.         "topic": "topic",
     
276.         "topicType": "msg",
     
277.         "className": "",
     
278.         "x": 370,
     
279.         "y": 620,
     
280.         "wires": [
     
281.             [
     
282.                 "5a4d7b59a0b6414f"
     
283.     },
     
284.     {
     
285.         "id": "bc5c4d6a9a34ac89",
     
286.         "type": "link in",
     
287.         "z": "09e0777eaff7fdea",
     
288.         "g": "c1661722c7db00f9",
     
289.         "name": "link in 1",
     
290.         "links": [
     
291.             "5a4d7b59a0b6414f"
     
292.         ],
     
293.         "x": 555,
     
294.         "y": 260,
     
295.         "wires": [
     
296.             [
     
297.                 "1ba3c6e812e03e27"
     
298.     },
     
299.     {
     
300.         "id": "5a4d7b59a0b6414f",
     
301.         "type": "link out",
     
302.         "z": "09e0777eaff7fdea",
     
303.         "g": "19a36681d87b7de2",
     
304.         "name": "link out 1",
     
305.         "mode": "link",
     
306.         "links": [
     
307.             "bc5c4d6a9a34ac89"
     
308.         ],
     
309.         "x": 525,
     
310.         "y": 700,
     
311.         "wires": []
     
312.     },
     
313.     {
     
314.         "id": "2817f237bcdb1814",
     
315.         "type": "ui_switch",
     
316.         "z": "09e0777eaff7fdea",
     
317.         "g": "19a36681d87b7de2",
     
318.         "name": "",
     
319.         "label": "开关:",
     
320.         "tooltip": "",
     
321.         "group": "293748cd26b96ad4",
     
322.         "order": 1,
     
323.         "width": 0,
     
324.         "height": 0,
     
325.         "passthru": true,
     
326.         "decouple": "false",
     
327.         "topic": "topic",
     
328.         "topicType": "msg",
     
329.         "style": "",
     
330.         "onvalue": "cmd3",
     
331.         "onvalueType": "str",
     
332.         "onicon": "",
     
333.         "oncolor": "",
     
334.         "offvalue": "cmd4",
     
335.         "offvalueType": "str",
     
336.         "officon": "",
     
337.         "offcolor": "",
     
338.         "animate": false,
     
339.         "className": "",
     
340.         "x": 370,
     
341.         "y": 680,
     
342.         "wires": [
     
343.             [
     
344.                 "5a4d7b59a0b6414f"
     
345.     },
     
346.     {
     
347.         "id": "320c4fbe35464796",
     
348.         "type": "ui_slider",
     
349.         "z": "09e0777eaff7fdea",
     
350.         "g": "19a36681d87b7de2",
     
351.         "name": "",
     
352.         "label": "滑块:",
     
353.         "tooltip": "",
     
354.         "group": "293748cd26b96ad4",
     
355.         "order": 8,
     
356.         "width": 0,
     
357.         "height": 0,
     
358.         "passthru": true,
     
359.         "outs": "end",
     
360.         "topic": "topic",
     
361.         "topicType": "msg",
     
362.         "min": 0,
     
363.         "max": "100",
     
364.         "step": 1,
     
365.         "className": "",
     
366.         "x": 370,
     
367.         "y": 740,
     
368.         "wires": [
     
369.             [
     
370.                 "5a4d7b59a0b6414f"
     
371.     },
     
372.     {
     
373.         "id": "150c757128315052",
     
374.         "type": "ui_gauge",
     
375.         "z": "09e0777eaff7fdea",
     
376.         "g": "19a36681d87b7de2",
     
377.         "name": "",
     
378.         "group": "293748cd26b96ad4",
     
379.         "order": 8,
     
380.         "width": "4",
     
381.         "height": "5",
     
382.         "gtype": "donut",
     
383.         "title": "汽车仪表盘(类型2)",
     
384.         "label": "km/h",
     
385.         "format": "{{value}}",
     
386.         "min": 0,
     
387.         "max": "260",
     
388.         "colors": [
     
389.             "#00b500",
     
390.             "#e6e600",
     
391.             "#ca3838"
     
392.         ],
     
393.         "seg1": "80",
     
394.         "seg2": "120",
     
395.         "diff": false,
     
396.         "className": "",
     
397.         "x": 970,
     
398.         "y": 700,
     
399.         "wires": []
     
400.     },
     
401.     {
     
402.         "id": "4e4db779a7b91019",
     
403.         "type": "ui_group",
     
404.         "name": "数据收发",
     
405.         "tab": "34d769912ecacd01",
     
406.         "order": 2,
     
407.         "disp": true,
     
408.         "width": "12",
     
409.         "collapse": false,
     
410.         "className": ""
     
411.     },
     
412.     {
     
413.         "id": "293748cd26b96ad4",
     
414.         "type": "ui_group",
     
415.         "name": "图表交互",
     
416.         "tab": "20aef80442d92012",
     
417.         "order": 1,
     
418.         "disp": true,
     
419.         "width": "12",
     
420.         "collapse": false,
     
421.         "className": ""
     
422.     },
     
423.     {
     
424.         "id": "2a9f33344a20e68d",
     
425.         "type": "ui_tab",
     
426.         "name": "基本信息",
     
427.         "icon": "fa-info-circle",
     
428.         "order": 3,
     
429.         "disabled": false,
     
430.         "hidden": false
     
431.     },
     
432.     {
     
433.         "id": "34d769912ecacd01",
     
434.         "type": "ui_tab",
     
435.         "name": "数据收发",
     
436.         "icon": "fa-comments-o",
     
437.         "order": 1,
     
438.         "disabled": false,
     
439.         "hidden": false
     
440.     },
     
441.     {
     
442.         "id": "20aef80442d92012",
     
443.         "type": "ui_tab",
     
444.         "name": "图表交互",
     
445.         "icon": "fa-line-chart",
     
446.         "order": 2,
     
447.         "disabled": false,
     
448.         "hidden": false
     
449.     }

复制代码

三、GUI工程设计

素材如下:

DGUS Tool界面设计如下:

四、C51工程设计

用的是T5L迪文屏的串口2来和Node-RED网页通信的,下面给出主函数代码如下:

1. <font size="3" face="宋体">#include "sys.h"
   
2. #include "uart2.h"
   
3. #include <string.h>
   
4. #include <stdio.h>
   
5. 
   
6. u8 buff[200];
   
7. 
   
8. 
   
9. void main(void)
   
10. {   
    
11.          u16num;
    
12.          u16val;
    
13.          u16old;
    
14.          u8i;
    
15. 
    
16.          sys_init();
    
17.          uart2_init(115200);
    
18.          old= 0;
    
19. 
    
20.          while(1)
    
21.          {   
    
22.                   if(is_recv_complete)
    
23.                   {
    
24.                           uart2_buf[recv_len++]= 0;
    
25.                           uart2_buf[recv_len++]= 0;
    
26. 
    
27.                           if(strstr((char*)uart2_buf,"cmd"))
    
28.                           {
    
29.                                    num= uart2_buf[3]-'0';
    
30.                                    if(num<3)
    
31.                                    {
    
32.                                             for(i=0;i<3;i++)
    
33.                                             {
    
34.                                                      val= (num==i);
    
35.                                                      sys_write_vp(0x2300+i,(u8*)&val, 1);
    
36.                                             }
    
37.                                    }elseif(num<5)
    
38.                                    {
    
39.                                             val= (num==3);
    
40.                                             sys_write_vp(0x2200,(u8*)&val, 1);
    
41.                                    }
    
42.                           }else
    
43.                           {
    
44.                                    sys_write_vp(0x2000,uart2_buf, recv_len/2+2);
    
45.                           }
    
46. 
    
47.                           recv_len= 0;
    
48.                           is_recv_complete= 0;
    
49.                   }
    
50. 
    
51.                   sys_read_vp(0x1000,(u8*)&val, 1);
    
52.                   if(val==1)
    
53.                   {
    
54.                           sys_read_vp(0x2100,buff, 50);
    
55.                           for(i=0;i<100;i++)
    
56.                           {
    
57.                                    if(buff==0xff)
    
58.                                    {
    
59.                                             buff= 0x00;
    
60.                                             buff[i+1]= 0x00;
    
61.                                             break;
    
62.                                    }
    
63.                           }
    
64.                           u2_send_bytes(buff,strlen(buff));
    
65.                           val= 0;
    
66.                           sys_write_vp(0x1000,(u8*)&val, 1);
    
67.                   }
    
68.                   sys_read_vp(0x2400,(u8*)&val, 1);
    
69.                   if(val!=old)
    
70.                   {
    
71.                           sprintf(buff,"%d", val);
    
72.                           u2_send_bytes(buff,strlen(buff));
    
73.                           old= val;
    
74.                   }
    
75.          }
    
76. 
    
77. }</font>

复制代码

五、视频演示效果

b站视频入口地址

https://www.bilibili.com/v/jump-middle-edge/?spm_id_from=888.80997.embed_other.whitelist&mode=play&bvid=1VH4y1177H


备注说明：如需源码，请参考此链接：http://inforum.dwin.com.cn:20080/forum.php?mod=viewthread&tid=9402&_dsign=c3a34b42