0
  • 聊天消息
  • 系统消息
  • 评论与回复
登录后你可以
  • 下载海量资料
  • 学习在线课程
  • 观看技术视频
  • 写文章/发帖/加入社区
会员中心
创作中心

完善资料让更多小伙伴认识你,还能领取20积分哦,立即完善>

3天内不再提示

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

迪文智能屏 ? 2023-12-09 08:13 ? 次阅读
加入交流群
微信小助手二维码

扫码添加小助手

加入工程师交流群

——来自迪文开发者论坛

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


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

数据收发Tab页面

c2545c8e-9627-11ee-9788-92fbcf53809c.jpg

图标交互Tab页面

c25c62ee-9627-11ee-9788-92fbcf53809c.jpg基本信息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界面设计 c26a636c-9627-11ee-9788-92fbcf53809c.jpg 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;

}

}

}

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

    关注

    15

    文章

    1591

    浏览量

    80241
  • 浏览器
    +关注

    关注

    1

    文章

    1040

    浏览量

    36404
  • 迪文屏
    +关注

    关注

    3

    文章

    83

    浏览量

    5821
收藏 人收藏
加入交流群
微信小助手二维码

扫码添加小助手

加入工程师交流群

    评论

    相关推荐
    热点推荐

    什么是T5L

    ` 本帖最后由 ZXC_1 于 2019-2-21 16:10 编辑 T5L文科技针对AIoT应用需求而设计的低功耗、高性价比双核8051 人机界面专用ASIC。T5L ASIC特点:a.
    发表于 02-20 15:44

    Node-Red是什么?如何去学习Node-Red

    Node-Red是什么?如何去学习Node-Red?有哪些方法可以去学习Node-Red
    发表于 07-02 06:11

    怎么实现基于STM32F407与串口T5L系列的串口通信?

    怎么实现基于STM32F407与串口T5L系列的串口通信?
    发表于 12-06 07:11

    使用T5L系列单片机时某个控件总是引起系统复位

    在使用T5L系列单片机的时候,点击某个控件总是引起系统复位,通过监控,单片机并没有程序跑飞或者独立看门狗复位,经过仔细对比发现是STM32F4单片机的接收中断函数在进入之后未清除标志位引起,具体
    发表于 12-13 07:04

    COF结构智能试用体验】基本开发流程

    可以通过SD卡的方式更新到,也可以通过串口下载的方式下载到
    发表于 04-08 14:23

    运用 Node-RED 开发 LoRa 应用

    在之前的课程LoRa G-IoT模块基础应用中,我们已经知道如何将从LoRa得到的数值上传服务,本文我们将学习撰写Node-RED,将数据传送到自己设计的网页监测接口。
    的头像 发表于 12-25 17:54 ?1109次阅读

    T5L串口的CFG文件该如何配置

    常见的DEMO显示横改竖显示,数据上传,背光配置,波特率更改,触摸、液晶参数设置等。 CFG文件采用16进制编制编译,以T5L系列的串口
    发表于 01-13 13:15 ?3174次阅读
    <b class='flag-5'>迪</b><b class='flag-5'>文</b><b class='flag-5'>T5L</b><b class='flag-5'>串口</b><b class='flag-5'>屏</b>的CFG文件该如何配置

    基于Node-RED的优易通串口服务器应用实例

    以实例的方式,详细介绍了基于Node-RED的优易通串口服务器采集Modbus-RTU水位传感数据,并将数据可视化的过程。
    的头像 发表于 05-29 21:15 ?2957次阅读
    基于<b class='flag-5'>Node-RED</b>的优易通<b class='flag-5'>串口服务器</b>应用实例

    T5L系列ASIC

    文科技针对典型人机交互应用设计了T5L系列芯片,芯片性能贴合应用实际,通过定向的性能增强、裁剪,实现整体方案的高性价比。T5L系列ASIC是GUI和应用高度整合的高性价比双核芯片。T5L
    的头像 发表于 04-07 11:05 ?3523次阅读
    <b class='flag-5'>迪</b><b class='flag-5'>文</b><b class='flag-5'>T5L</b>系列ASIC

    Node-RED安装本地教程

    Node-RED是一个基于流的开发工具,广泛应用于物联网(IoT)、家庭自动化和其他数据驱动的应用程序。它通过图形化的编程界面,使得非专业程序员也能轻松上手。本文将介绍如何在本地环境中安装Node-RED,帮助你快速开始项目开发。
    的头像 发表于 06-24 12:10 ?3816次阅读
    <b class='flag-5'>Node-RED</b>安装本地教程

    Node-RED如何制作漂亮的界面

    Node-RED深度融合(如成都的纵横智控和苏州稳联科技将Node-RED与物联网网关深度融合,打造可视化、硬件加持的物联网开发平台,使用者无需编码即可快速实现各类应用,开拓物联网无
    的头像 发表于 06-26 16:50 ?7906次阅读
    <b class='flag-5'>Node-RED</b>如何制作漂亮的界面

    【开源获奖案例】基于T5L智能的EQ均衡效果

    ——来自开发者论坛本期为大家推送开发者论坛获奖开源案例——基于T5L智能的EQ均衡效果
    的头像 发表于 02-14 11:27 ?558次阅读
    【开源获奖案例】基于<b class='flag-5'>T5L</b>智能<b class='flag-5'>屏</b>的EQ均衡效果<b class='flag-5'>器</b>

    【干货】什么是Node-RED?一带你了解!

    一什么是Node-RED?首先我们来认识一下什么是Node-REDNode-RED是一个基于Node.js的开源可视化编程工具,于2013年由IBM公司推出。它可以通过
    的头像 发表于 03-13 19:32 ?922次阅读
    【干货】什么是<b class='flag-5'>Node-RED</b>?一<b class='flag-5'>文</b>带你了解!

    【开源获奖案例】基于T5L智能的FM收音机

    ——来自开发者论坛本期为大家推送开发者论坛获奖开源案例——基于T5L智能的FM收音机。
    的头像 发表于 03-28 15:39 ?449次阅读
    【开源获奖案例】基于<b class='flag-5'>T5L</b>智能<b class='flag-5'>屏</b>的FM收音机

    【开源获奖案例】基于T5L智能的音乐播放与歌词显示方案

    ——来自开发者论坛本期为大家推送开发者论坛获奖开源案例——基于T5L智能的音乐播放与歌
    的头像 发表于 05-08 09:52 ?297次阅读
    【开源获奖案例】基于<b class='flag-5'>T5L</b>智能<b class='flag-5'>屏</b>的音乐播放与歌词显示方案