Open Source Browser Webpage and T5L DWIN Screen Serial Port Deep Expansion (Node-RED technology)

——From DWIN Developer Forum

In this issue, we will introduce to you an award-winning open source case of the Devin Developer Forum for the application of Divin Screen in the new field - browser webpage and T5L Divin Screen serial port in-depth expansion (Node-RED technology). Engineers use T5L smart screens to pass Node- RED technology only requires a serial port to connect to the Internet and realize data interaction between the Diwen screen and the browser web page. This solution realizes functions such as data sending and receiving, chart interaction, and basic information display between the smart screen and the web page.

1. Node-RED web page running effect display

(1) Using Node-RED technology, the browser is used as the interaction entrance, so that the browser and the screen interact through the serial port to realize the corresponding function display.

asva (1)
asva (2)

Data sending and receiving Tab page

 Icon interactive Tab page

asva (3)

Basic information Tab page effect

(2) The main reference codes for the Node-RED web client are as follows:

  {

        "id": "fbb314a16ea00889",

        "type": "serial in",

        "z": "09e0777eaff7fdea",

        "g": "c1661722c7db00f9",

        "name": "Serial port receives data",

        "serial": "83fb45b5f4b51d61",

        "x": 390,

        "y": 140,

        "wires": [

            [

                "685a2fb2c2dc8fba"

            ]

        ]

    },

    {

        "id": "1ba3c6e812e03e27",

        "type": "serial out",

        "z": "09e0777eaff7fdea",

        "g": "c1661722c7db00f9",

        "name": "Serial port sending",

        "serial": "83fb45b5f4b51d61",

        "x": 860,

        "y": 260,

        "wires": []

    },

    {

        "id": "5fb7f1d3d7425133",

        "type": "status",

        "z": "09e0777eaff7fdea",

        "g": "c1661722c7db00f9",

        "name": "Monitor serial port status",

        "scope": [

            "fbb314a16ea00889"

        ],

        "x": 390,

        "y": 200,

        "wires": [

            [

                "3f18d1fdea398d35"

            ]

        ]

    },

    {

        "id": "3f18d1fdea398d35",

        "type": "function",

        "z": "09e0777eaff7fdea",

        "g": "c1661722c7db00f9",

        "name": "Extract serial port status",

        "func": "let sta = msg.status.text;\nlet color = 'red';\nif (sta.indexOf('not-connected') >= 0) \n    sta = 'Unconnected';\nelse if (sta.indexOf('connected') >= 0)\n{\n    sta = 'connection succeeded';\n    color = 'green';\n}else\n    sta = 'error occurred';\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": "Display serial port status",

        "order": 1,

        "width": 0,

        "height": 0,

        "format": "<div style=\"font-size:19px;color:#444;margin:10px;\">\n    Serial port status:<span style=\"margin-left:5px

2.DGUS Interface Design

asva (4)

1. C51 Engineering Design

The solution uses T5L smart screen serial port 2 to communicate with the Node-RED web page. Some reference codes are as follows:

#include "sys.h"

#include "uart2.h"

#include <string.h>

#include <stdio.h>

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;

}

}

}


Post time: Dec-28-2023