SBC‑TLT153 工控单板图形用户界面开发指南（下）

1.6image_display案例

案例说明

本案例基于Qt框架实现加载图片文件并输出至屏幕显示的功能。

程序支持自动按比例缩放图片，以确保图片能够完整地显示；支持常规的PNG和JPG图片格式。

wKgZO2g5ZKeACNEjAABEZVCyGdA939.png

案例测试

进入单板机系统，将ARM端Qt程序镜像拷贝至单板机系统任意目录下，同时将image_display工程bin目录下文件名为test.jpg的JPG格式图片拷贝至相同路径。请在Qt程序镜像所在路径下执行如下命令。

查看程序运行参数

Target# ./image_display

参数解释

image path：图片路径。

rotation：该参数为1，则竖屏显示。

wKgzfWrn8VSAMQ07AAAPfuJ6ktM203.png

桌面环境测试

横屏显示图片

执行如下命令，显示屏将显示如下图像，在调试串口终端按"Ctrl + C"或通过鼠标点击屏幕"Exit"按钮退出程序。

Target# ./image_display ./test.jpg

wKgzfWrn8WqASpFYAAAGbfhe8vg479.png

wKgzfWrn8FWAMpiSABGEIvbmois130.png

竖屏显示图片

执行如下命令，显示屏将显示如下图像，在调试串口终端按"Ctrl + C"或通过鼠标点击屏幕"Exit"按钮退出程序。

Target# ./image_display ./test.jpg 1

wKgzfmrn8a6AY6ohAAAGkhW6dKM310.png

wKgzfmrn8biAeaqlAAU9elJao4A948.png

非桌面环境测试

请参考“Qt显示与触摸说明“章节的“非桌面环境测试”小节完成操作。

横屏显示图片

执行如下命令，显示屏将显示如下图像，按"Ctrl + C"退出程序。

Target# ./image_display ./test.jpg --platform linuxfb --plugin tslib

wKgzfWrn8cWAfwKfAAAJ-uUQEyM020.png

wKgzfmrn8dCAVkKFABNmSMTtbO0654.png

竖屏显示图片

执行如下命令，显示屏将显示如下图像，按"Ctrl + C"退出程序。

Target# ./image_display ./test.jpg 1 --platform linuxfb --plugin tslib

wKgzfWrn8dqAaQYcAAAKAp-kmJA979.png

wKgzfmrn8eSAQQDmAAUtlv71skU463.png

关键代码

生成Makefile文件。

wKgzfWrn8e2AI0f9AADJTpZO4y8049.png

参数检查。

wKgzfmrn8faAO3ObAAA9VSszmqo288.png

图片加载。

wKgzfWrn8gGAXdiBAADMmcoThTw357.png

wKgzfmrn8gGAWhxxAAA3JS78kuQ910.png

窗口大小调整与图片缩放。

wKgzfWrn8g-AUe7dAABbXb7UFJk343.png

1.7led_control案例

案例说明

本案例基于Qt开发框架实现通过显示屏界面控制LED亮灭的功能。程序默认全屏显示。

wKgZPGg5ZeKAekeCAAAliLnxAoo764.png

案例测试

进入单板机系统，将ARM端Qt程序镜像拷贝至单板机系统任意目录下，请在Qt程序镜像所在路径下执行以下命令。

桌面环境测试

执行如下命令，可观察到显示屏显示LED控制界面，可通过点击界面控制LED亮灭，按"Ctrl + C"或通过点击屏幕"Exit"按钮退出程序。

Target# ./led_control

wKgzfWrn8iKACLmwAAAE_eaXldc604.png

点击屏幕的按钮即可控制对应LED的亮灭。左上角的"Exit"按钮可用于退出程序。

wKgzfWrn8jKALvO4ABOH9GfNE5Q673.png

非桌面环境测试

请参考“Qt显示与触摸说明“章节的“非桌面环境“小节完成操作。

执行如下命令，显示屏将显示如下图像，按"Ctrl + C"退出程序。

Target# ./led_control --platform linuxfb --plugin tslib

wKgzfWrn8jyAO23gAAAI4AvWCdI761.png

wKgzfmrn8keARdy6ABQIpMZf4k8642.png

关键代码

生成Makefile文件。

wKgzfmrn8k6AKPJ1AADNH7KJvF8232.png

获取主屏信息（分辨率），设置窗口大小。

wKgzfWrn8lqAbqSnAAAwXfkG2qk383.png

获取LED当前亮灭状态。

wKgzfWrn8mOANXTHAABoZlxlFB4490.png

设置LED亮灭。

wKgzfWrn8myAK-zgAABEGZDfc18380.png

2 LVGL开发说明

LVGL（Light and Versatile Graphics Library，轻巧而多功能的图形库），是一个免费开源嵌入式图形库，主要用于在嵌入式系统上创建图形用户界面(GUI)。它是用C语言编写的，旨在高效和可定制，因此在各种微控制器平台和显示硬件上开发用户界面时备受欢迎。

LVGL具备如下特性：

轻量级：LVGL旨在轻量且高效，适用于资源受限的嵌入式系统，这些系统具有有限的内存和处理能力。

高度可定制：LVGL允许开发人员根据项目要求定制GUI元素的外观和行为。

小部件库：它提供了各种预设计的图形小部件，如按钮、标签、滑块、列表等，以简化交互式用户界面的创建。

事件驱动：LVGL是事件驱动的，这意味着它会响应用户输入和其他事件以触发操作或状态更改。

硬件支持：LVGL支持各种显示和输入硬件，包括不同类型的显示器（TFT、OLED等）和输入设备（触摸屏、按钮等）。

积极的社区：LVGL有一个积极而支持性的社区，为其开发提供了资源并提供开发人员帮助。

跨平台：LVGL可以在各种微控制器平台上使用，适用于各种嵌入式系统。

更多详情请查看：https://lvgl.io/、LVGL Forum - Q&A about LVGL。

请先参考《开发环境搭建》和《系统开发手册》安装、编译LinuxSDK或参考《应用开发手册》安装sysroot。

LVGL案例相关资料位于产品资料“4-软件资料Demoplatform-demoslvgl_demos”目录下，具体说明如下：

wKgzfWrn8naADDVAAAAzv5Kubm4188.png

lvgl_led_control案例

案例说明

案例功能：程序通过LVGL的button控件控制LED硬件的亮灭，并实时更新label控件显示当前状态。

程序原理：

基于LVGL框架。

通过创建按钮，设置点击事件，调用回调函数，控制LED的亮灭。

使用label来显示颜色及文本表示LED的状态。

程序流程如下图所示。

wKgzfmrn8oGAa26PAADQyzImY20889.png

案例测试

单板机默认支持LVDS显示，请通过DVI线将LVDS电阻屏或LVDS电容屏与单板机LVDS OUT接口连接，将鼠标接至单板机USB 2.0任一接口。

备注：如需替换为其他显示，请根据《SBC-TLT153工业单板机使用说明书》文档进行硬件连接、替换对应显示方式的镜像，并使用对应的可执行程序。

lvgl_led_control测试

进入单板机系统，将lvgl_led_control可执行程序拷贝至单板机系统任意目录下。执行如下命令，关闭桌面。

Target# systemctl stop lightdm

wKgzfWrn8oyAAv1IAAAIT9qbkM0819.png

本次演示触摸功能，执行如下命令，查看触摸事件节点。

Target# cat /proc/bus/input/devices

wKgzfmrn8pWAYYnQAACnxKBBGG4760.png

备注：不同类型的屏幕对应触摸节点如下表所示：

wKgzfmrn8p6ALfyDAAAp6aRVa90201.png

执行如下命令，链接节点至"/dev/input/mouse0"，运行程序，可观察到LVDS显示屏显示LED控制界面，可通过触摸点击界面控制LED亮灭。

Target# ln -s /dev/input/event1 /dev/input/mouse0

Target# ./lvgl_led_control

wKgzfmrn8qaACzLqAAASeDjjYgk229.png

lvgl_led_control_lvds_res_lcd测试

进入单板机系统，将lvgl_led_control_lvds_res_lcd可执行程序拷贝至单板机系统任意目录下。执行如下命令，关闭桌面。

Target# systemctl stop lightdm

wKgzfWrn8oyAAv1IAAAIT9qbkM0819.png

本次通过鼠标进行功能演示。执行如下命令，查看鼠标节点。

Target# cat /proc/bus/input/devices

wKgzfWrn8rmAILTzAADP8kN0IlA417.png

备注：由于LVGL程序代码中已预设"/dev/input/mouse0"作为事件节点，该节点无法同时处理鼠标与触摸事件，因此需根据实际需要将鼠标或触摸功能的对应节点链接至"/dev/input/mouse0"。

wKgzfWrn8sWAcXvhAACKpftPaV0461.png

lv_drv_conf.h

执行如下命令，链接节点至"/dev/input/mouse0"，运行程序，可观察到LVDS显示屏显示LED控制界面，可通过鼠标点击界面控制LED亮灭。

Target# ln -s /dev/input/event3 /dev/input/mouse0

Target# ./lvgl_led_control_lvds_res_lcd

wKgzfWrn8tGAWFr5AAAThZ0DI9M811.png

wKgzfWrn8t-AAKP3ABlfd39rLPw901.png

wKgzfWrn8uCAMhLVABh7-DAKjKU182.png

由于篇幅过长等原因，部分内容均不逐一展示，如需获取完整版详细资料，请关注创龙科技，或者评论区留言，感谢您的支持！嵌入式