串口屏解决方案：大彩串口屏在智智能家居彩灯上的应用

一、适用范围

 

本文档适合大彩物联型、M系列的串口屏产品使用。

 

二、开发环境版本

 

1. VisualTFT软件版本：V3.0.1.1111及以上的版本。

版本查看：

1) 打开VisualTFT软件启动页面，右上角会显示的软件版本号；

 

2) 打开VisualTFT，在软件右下角可以查看软件版本图2-2软件版本，最新版本可登录大彩官网进行下载。

图2-2软件版本

 

2. 串口屏硬件版本：物联型固件 >= V3.0.731.0，M系列固件 >= V6.1.199.00。

版本查看：

1) 查看屏幕背面版本号贴纸；

2) VisualTFT与屏幕联机成功后，右下角显示的版本号。

 

 

三、概述

 

随着社会的不断发展，科技的不断进步，人们在视觉方面，不满足于一种光，对物体的周边装饰越来越看重。其中，彩灯、色温灯的应用更为之广泛，在家庭、商场、橱窗、舞厅、咖啡厅、公共广场等场所的摆设、装饰、广告、环境净化与美化。

本文介绍大彩串口屏在彩灯的应用，实现对色盘取色，并发送通知到用户主板。

 

四、参考资料

 

1. 《LUA 脚本API V1.4》可通过以下链接下载物联型开发包获取:

http:/www.gz-dc.com/index.php?s=/List/index/cid/19.html

2. 《LUA基础学习》可通过以下链接下载物联型开发包获取:

http:/www.gz-dc.com/index.php?s=/List/index/cid/19.html

3. LUA脚本初学者可以通过下面链接进行学习。

http://www.runoob.com/lua/lua-arrays.html

 

 

 

五、教程实现

 

本文主要将以下2点进行说明：

1. 准备工程素材；

2. 配置串口屏工程；

 

5.1 准备工程素材

5.1.1 准备工程素材

在实现例程前需要作以下3个准备：

1. 硬件平台；

2. 软件平台；

3. UI素材；

该例程使用大彩W系列4寸串口屏DC48480W040_1111_0T为验证开发平台。如图5-1所示；

图5-1  W系列4寸串口屏

 

其他尺寸、M系列的串口屏均可借鉴此教程。

 

5.1.2 软件平台

使用大彩自主研发的上位机软件VisualTFT配置工程。如图5-2所示；

图5-2下载软件

 

5.2 配置串口屏工程

本文主要介绍以下2点：

1. 取色

2. MCU/服务器设置颜色

注意：屏幕为RGB565，16位色，若用户设备是24位色，则传输过程需要转化

 

5.2.1 取色

用户在触摸屏上选择某一个颜色，并通过网络（物联网：WIFI、M系列：4G）发送至服务器或通过串口发送指令到客户MCU。

注意：本文只示意通过串口发送至用户MCU

 

1. 画面配置

在画面ID0中，添加一个按钮控件（控件ID1）、一个图标控件（控件ID2）和1个文本控件（控件ID3），其中控件ID1为色盘，供用户选色；控件ID2为选中效果，用户点击色盘后，控件ID移动到当前位置并显示‘白色的圈’，表示当前选中的颜色；控件ID3为显示固件版本号。如图5-3所示：

图5-3 画面配置

 

2. LUA脚本编辑

本例程中，用户点击色盘或拖动，右上角有显示预览的效果，当松开后，通过串口发送选中颜色值到用户单片机。代码如程序清单 1所示：

 

程序清单 1 取颜色值 

 

核心API函数

1) on_draw(screen)

当界面的显示内容需要更新时，系统自动调用此函数，用户在此函数中添加自定义的绘图操作。用户绘制的内容叠加在画面内容之上。

 

• screen：当前触发on_draw()API的画面ID

 

注意：此函数为系统回调函数，用户不要直接调用。

   下面几种情况会触发此函数：

 

• 界面有动画播放、视频播放、RTC时间显示的动态刷新；
• 用户操作屏幕控件控件；
• 通过LUA脚本或串口指令更新控件；
• 通过执行redraw；

 

   总之，界面上有任何变化，都会触发此回调函数。

 

2) redraw()

发送重绘请求，触发on_draw的执行。

 

3) set_pen_color(color)

设置画笔的颜色，RGB565，用于指定线、矩形、圆等的颜色。

 

4) draw_image(image_id,frame_id,dstx,dsty,width,height,srcx,srcy)

绘制图片

 

• image_id图片资源的ID
• frame_id对应图标，可以设置帧ID，其他图片固定为0
• dstx图片显示X坐标
• dsty图片显示Y坐标
• width图片显示宽度
• height图片显示高度
• srcx图片裁剪X坐标
• srcy图片裁剪Y坐标

 

 

5) draw_circle(x,y,r,fill)

绘制圆形

 

• x,y圆的中心坐标
• r圆的半径
• fill为0不填充，1填充

 

 

基本思路：当用户触摸色盘区域时候，过滤合法坐标、背景色（本例程为黑色）和距离圆心的距离，当条件成立后，计算出‘选择效果（白色圈）’的显示位置，并提取相应的颜色值。通过redraw（）申请绘图，画出选中效果以及选中的颜色，并通过串口发送选中的颜色到用户MCU。

 

5.2.2 MCU/服务器设置颜色

当用户MCU主板或App（服务器）主动更新彩灯的颜色值后，需要同步到屏幕的右上角显示当前颜色，并将‘白色选中圈’同步到对应位置。

本文阐述两个方案：

注意：本例程不处理本章节的功能

 

1. 屏幕遍历颜色值

屏幕端，根据色盘的坐标和颜色值，在LUA脚本中建立一个颜色-坐标对照表，如创建一个local color_pointXY = {}的表，如下程序清单 2所示

 

程序清单 2 创建颜色-坐标对照表

当接收到MCU/App(服务器)的指令后，遍历检索color_pointXY表，获取‘白色选中圈’的坐标，如下程序清单 3所示

 

程序清单 3 检索颜色值

特别说明：当由屏幕检索颜色值，得出坐标的时候，屏幕遍历过程会耗时，且和色盘的大小有关。如本例程中，色盘大小380*380，则遍历次数最大可达到380*380。若MCU或App（服务器）可选的颜色是比较少的，可考虑屏幕遍历处理。

 

2. 服务器/MCU遍历

当如后台MCU或服务器检索颜色值时，则将检索出来的坐标(x，y)+color颜色值通过串口/网络通知给屏幕，屏幕根据（x，y）画出‘白色选中圈’的位置，且显示当前的颜色值，大大提高屏幕的流畅性。

 

5.3 下载工程

在我司的上层软件Visual TFT中集成了LUA程序的编译器，可以实现在编译工程的同时将LUA脚本程序一起编译，并且将编译后的图片和程序集合在一个名为DCIOT.PKG的文件中。编译后只需要把DCIOT.PKG文件拷贝到U盘中，插入串口屏并重新上电即可将图片和程序下载到屏中。

 

5.3.1 下载

工程编译成功后在输出窗口会提示编译成功，如所示。编译成功后打开工程目录，找到output文件夹，将文件夹中的DCIOT.PKG文件拷贝到U盘中，如图 5-4和图 5-5所示；接上串口屏重新上电，等到提示烧录工程成功后，拔掉U盘重新上电即可。

图 5-4 编译成功图 5-5 拷贝

 

（温馨提示：因平台限制无法上传视频，色盘取色演示视频请移步大彩官网相关栏目进行查看，感谢您的关注。）