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

描述

——来自迪文开发者论坛
 

 

本期为大家推送一个很有创意的迪文开发者论坛获奖开源案例——浏览器网页与T5L迪文屏串口深度扩展(Node-RED技术)。工程师使用T5L智能屏,通过Node-RED技术,只需要一个串口,就可以接入互联网,实现迪文屏与浏览器网页的数据交互。该方案实现了智能屏与网页端的数据收发、图表交互、基本信息显示等功能。


  Node-RED网页端运行效果展示    (1)使用Node-RED技术,以浏览器作为交互入口,使浏览器与屏幕通过串口交互,实现相应功能展示。浏览器

数据收发Tab页面

浏览器

图标交互Tab页面

浏览器基本信息Tab页面效果

 


 

(2)Node-RED网页端主要参考代码如下:

 

{

 

    "id": "fbb314a16ea00889",

 

    "type": "serial in",

 

    "z": "09e0777eaff7fdea",

 

    "g": "c1661722c7db00f9",

 

    "name": "串口接受数据",

 

    "serial": "83fb45b5f4b51d61",

 

    "x": 390,

 

    "y": 140,

 

    "wires": [

 

        [

 

        "685a2fb2c2dc8fba"

 

        ]

 

    ]

 

},

 

{

 

    "id": "1ba3c6e812e03e27",

 

    "type": "serial out",

 

    "z": "09e0777eaff7fdea",

 

    "g": "c1661722c7db00f9",

 

    "name": "串口发送",

 

    "serial": "83fb45b5f4b51d61",

 

    "x": 860,

 

    "y": 260,

 

    "wires": []

 

},

 

{

 

    "id": "5fb7f1d3d7425133",

 

    "type": "status",

 

    "z": "09e0777eaff7fdea",

 

    "g": "c1661722c7db00f9",

 

    "name": "监听串口状态",

 

    "scope": [

 

        "fbb314a16ea00889"

 

    ],

 

    "x": 390,

 

    "y": 200,

 

    "wires": [

 

        [

 

        "3f18d1fdea398d35"

 

        ]

 

    ]

 

},

 

{

 

    "id": "3f18d1fdea398d35",

 

    "type": "function",

 

    "z": "09e0777eaff7fdea",

 

    "g": "c1661722c7db00f9",

 

    "name": "提取串口状态",

 

    "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;",

 

    "outputs": 1,

 

    "timeout": 0,

 

    "noerr": 0,

 

    "initialize": "",

 

    "finalize": "",

 

    "libs": [],

 

    "x": 620,

 

    "y": 200,

 

    "wires": [

 

        [

 

        "2ec78ff0b0b9a56f"

 

        ]

 

    ]

 

},

 

{

 

    "id": "2ec78ff0b0b9a56f",

 

    "type": "ui_template",

 

    "z": "09e0777eaff7fdea",

 

    "g": "c1661722c7db00f9",

 

    "group": "4e4db779a7b91019",

 

    "name": "显示串口状态",

 

    "order": 1,

 

    "width": 0,

 

    "height": 0,

 

   "format": "

\n    串口状态:

 

  DGUS界面设计   浏览器   C51工程设计     

方案采用T5L智能屏串口2与Node-RED网页通信,部分参考代码如下:

#include "sys.h"

 

 

#include "uart2.h"

 

 

#include

 

 

#include

 

 

u8 buff[200];

 

 

void main(void)

 

 

{

 

 

    u16num;

 

 

    u16val;

 

 

    u16old;

 

 

    u8i;

 

 

    sys_init();

 

 

    uart2_init(115200);

 

 

    old= 0;

 

 

    while(1)

 

 

    {

 

 

        if(is_recv_complete)

 

 

        {

 

 

            uart2_buf[recv_len++]= 0;

 

 

            uart2_buf[recv_len++]= 0;

 

 

            if(strstr((char*)uart2_buf,"cmd"))

 

 

             {

 

 

                num= uart2_buf[3]-'0';

 

 

                if(num<3)

 

 

                {

 

 

                    for(i=0;i<3;i++)

 

 

                    {

 

 

                        val= (num==i);

 

 

                        sys_write_vp(0x2300+i,(u8*)&val, 1);

 

 

                    }

 

 

                }elseif(num<5)

 

 

                {

 

 

                    val= (num==3);

 

 

                    sys_write_vp(0x2200,(u8*)&val, 1);

 

 

                }

 

 

            }else

 

 

            {

 

 

                sys_write_vp(0x2000,uart2_buf, recv_len/2+2);

 

 

            }

 

 

            recv_len= 0;

 

 

            is_recv_complete= 0;

 

 

        }

 

 

        sys_read_vp(0x1000,(u8*)&val, 1);

 

 

        if(val==1)

 

 

        {

 

 

            sys_read_vp(0x2100,buff, 50);

 

 

            for(i=0;i<100;i++)

 

 

            {

 

 

                if(buff==0xff)

 

 

                {

 

 

                    buff= 0x00;

 

 

                    buff[i+1]= 0x00;

 

 

                    break;

 

 

                }

 

 

            }

 

 

            u2_send_bytes(buff,strlen(buff));

 

 

            val= 0;

 

 

            sys_write_vp(0x1000,(u8*)&val, 1);

 

 

        }

 

 

        sys_read_vp(0x2400,(u8*)&val, 1);

 

 

        if(val!=old)

 

 

        {

 

 

            sprintf(buff,"%d", val);

 

 

            u2_send_bytes(buff,strlen(buff));

 

            old= val;

 

        }

 

    }

 

}

打开APP阅读更多精彩内容
声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉

全部0条评论

快来发表一下你的评论吧 !

×
20
完善资料,
赚取积分