SBC‑TLT153 工控单板图形用户界面开发指南（上）
前言本文档提供基于单板机/工控机的Qt和LVGL图形用户界面(GUI)开发说明。其中Qt开发包含基于命令行和Qt Creator的开发方式，以及Qt程序的开机自启动方法；LVGL开发仅提供基于命令行的开发方式。备注：本文适用于SBC-TLT153单板机及EPC-TLT153工控机系列（由SBC-TLT153单板机搭配扩展板与外壳组成），文中Qt开发基于512MByte DDR3 + 8GByte eMMC硬件配置的单板机开展，LVGL开发基于512MByte DDR3 + 512MByte NAND FLASH硬件配置的单板机开展。Qt和LVGL在跨平台支持和开源特性上有相似之处，但在目标平台、资源占用、编程语言、功能丰富度、授权方式和应用场景等方面存在明显差异，具体如下。https://file1.elecfans.com/web3/M00/74/D3/wKgzfWrkE6-AZJuYAAB7Pq74kIQ734.png
开发环境Windows开发环境：Windows10 64bitLinux开发环境：VMware16.2.5、Ubuntu22.04.4 64bitLinuxSDK开发包：LinuxSDK-[版本号]（基于aiot-t153-linux-v1.0）系统版本：Tronlong-Desktop 22.04（类Ubuntu）、Linux-5.10.198、U-Boot 2023.04-rc4Qt版本：Qt-5.15.8LVGL版本：8.3.1
术语表为便于阅读，下表对文档出现的关键术语进行解释；对于广泛认同释义的术语，在此不做注释。
https://file1.elecfans.com/web3/M00/74/D4/wKgzfmrkE8-AZq_ZAAAyJaQ3rJU188.png
Qt组件支持我司提供的Linux系统对Qt组件支持情况如下，详情请查看产品资料“4-软件资料\Linux\Filesystem\roofts-feature-support”文件。备注：目前仅eMMC配置单板机支持Qt组件，NAND FLASH配置单板机暂不支持。
https://file1.elecfans.com/web3/M00/74/D3/wKgzfWrkE9iAaihLAABRERkdcB8239.png
LVGL组件支持我司提供的Linux系统对LVGL组件支持情况如下：
https://file1.elecfans.com/web3/M00/74/D3/wKgzfWrkE-KADzRpAACN-9hIZSA660.png
注意事项无特殊说明情况下，本文默认使用欣瑞达的T070YTA23R_A6 LVDS电阻屏作为显示实处，使用DEBUG作为调试串口。如需使用网络调试Qt工程，请将单板机通过路由器与PC机进行网络连接，并确保上位机Ubuntu系统可正常访问互联网。
https://file1.elecfans.com/web3/M00/74/D8/wKgzfWrkLp2AH0IxADfjFSs2CAg112.png1 Qt开发说明Qt开发环境主要包括Qt Creator工具、X86端Qt环境、ARM端Qt环境、交叉编译工具链等。当用户使用Qt Creator工具和X86端Qt环境编写并编译Qt工程后，生成的Qt程序镜像仅可在X86端运行。必须使用适配单板机的ARM端Qt环境、交叉编译工具链编译Qt工程，生成的Qt程序镜像方可在ARM端（即单板机）上正常运行。我司提供的t153-Tronlong-Desktop-22.04-sysroot-[版本号]-xxxx.tar.gz压缩包已提供适配单板机的ARM端Qt环境(Qt-5.15.8)，请先参考《应用开发手册》的“开发环境搭建说明”章节安装应用开发交叉编译工具链、sysroot压缩包。可基于命令行或Qt Creator工具对已有Qt工程进行编译，生成ARM端Qt程序镜像。我司提供的Qt工程位于产品资料“4-软件资料\Demo\qt-demos\”目录下，其中src目录下包含Qt工程源码，bin目录下包含ARM端Qt程序镜像。请将整个qt-demos文件夹拷贝至Ubuntu工作目录下，如下图所示。
https://file1.elecfans.com/web3/M00/74/D4/wKgzfmrkE_eARx94AABN9CVV5cM714.png
1.1基于Qt Creator开发1.1.1安装Qt Creator工具Qt Creator是一款专为Qt框架设计的跨平台集成开发环境(IDE)，提供代码编辑、调试、项目管理和界面设计等功能，支持高效开发Qt应用程序。执行如下命令，安装Qt Creator。Host# sudo apt install qtcreator
https://file1.elecfans.com/web3/M00/74/D4/wKgzfmrkFAeAVFDUAAFEHP54WJE998.png
https://file1.elecfans.com/web3/M00/74/D3/wKgzfWrkFAOAUFsfAAGM9QlF7pw924.png
执行如下命令，查看Qt Creator版本。Host# qtcreator -version
https://file1.elecfans.com/web3/M00/74/D4/wKgzfWrkFBOAcoh3AAFkXcggJN4109.png
https://file1.elecfans.com/web3/M00/74/D4/wKgzfmrkFBKAeE6IAAEixupRydc638.png
执行如下命令，安装GNU调试器。Host# sudo apt install gdb-multiarch
https://file1.elecfans.com/web3/M00/74/D4/wKgzfWrkFCCALeXTAABuLWWCXe0123.png
执行如下命令，查看调试器版本。Host# gdb-multiarch --version
https://file1.elecfans.com/web3/M00/74/D4/wKgzfWrkFCiAJkYwAAB8-QK1a90293.png
1.1.2配置交叉编译工具链执行如下命令，启动Qt Creator。Host# qtcreator
https://file1.elecfans.com/web3/M00/1C/A6/wKgZO2g5YMKAQfm_AAAv_a6U81A666.png
启动Qt Creator工具后，点击菜单栏"Tools -> Options…"。
https://file1.elecfans.com/web3/M00/74/D4/wKgzfmrkFDmASwIyAAFyXCji1DM142.png
点击"Kits"，打开配置选择页面。
https://file1.elecfans.com/web3/M00/1C/A6/wKgZO2g5YN2AcuiXAAEadNXKFRQ796.png
点击"Compilers -> Add -> GCC -> C++ -> Browse…"，选择平台交叉编译工具链中的arm-linux-gnueabihf-g++，然后点击Open确认。具体路径为：/usr/bin/arm-linux-gnueabihf-g++
https://file1.elecfans.com/web3/M00/74/D4/wKgzfmrkFEyADRNAAAICp2IkW7g995.png
https://file1.elecfans.com/web3/M00/74/D4/wKgzfmrkFEyAX-f_AAIvIUFRllY553.png
选择后，Name修改为"T153-GCC"，ABI选择"arm-linux-generic-elf-32bit"，再点击Apply，如下图所示。
https://file1.elecfans.com/web3/M00/74/D4/wKgzfWrkFFiAHsR0AAIG43Aj-NI021.png
1.1.3配置Debuggers点击"Debuggers -> Add -> Browse…"，选择GNU调试器，然后点击Open确认。具体路径为：/usr/bin/gdb-multiarch https://file1.elecfans.com/web3/M00/74/D4/wKgzfmrkFGGAUMD2AAF6YsLTowM646.png
https://file1.elecfans.com/web3/M00/74/D4/wKgzfWrkFGGACejnAAIRGHqisxU769.png
选择后，Name修改为"gdb-multiarch"，再点击Apply，如下图所示。
https://file1.elecfans.com/web3/M00/74/D4/wKgzfmrkFG-AYRz9AAGIgaDQjmk981.png
1.1.4配置Qt Versions点击"Qt Versions -> Add"，选择平台qmake，然后点击Open确认。具体路径为：/home/tronlong/T153/sysroots/x86_64-linux/bin/qmake
https://file1.elecfans.com/web3/M00/1C/91/wKgZPGg5YReAbE8QAAE3dQZ0z60412.png
https://file1.elecfans.com/web3/M00/74/D4/wKgzfWrkFHqAYoeGAAC8poB0V0w722.png
选择后，Version name修改为"T153-qt5"再点击Apply，如下图所示。
https://file1.elecfans.com/web3/M00/74/D4/wKgzfWrkFIaAXp0tAAGMfZ6swmg458.png
1.1.5配置Kits请参照下图配置Kits各选项。点击"Kits -> Add"，将Name修改为"T153"，Device type选择"Generic Linux Device"，Compiler的C++选择"T153-GCC"，Debugger选择"gdb-multiarch"，Qt version选择"T153-qt5"，点击Apply，然后点击OK完成配置。
https://file1.elecfans.com/web3/M00/74/D4/wKgzfmrkFJCARr4EAAM0nZ-Wfpo402.png
1.1.6编译Qt工程本章节以led_control案例为例，演示基于Qt Creator工具开发Qt程序的方法。备注：进入Qt Creator界面前，需先配置交叉编译工具链环境变量。Host# source /home/tronlong/T153/environmentHost# qtcreator
https://file1.elecfans.com/web3/M00/74/D4/wKgzfWrkFKCAFlqUAAArf0YBPiA745.png
请在Qt Creator界面，点击Open。
https://file1.elecfans.com/web3/M00/1C/A6/wKgZO2g5YUeAMdQlAAEvpIQ1EnM736.png
选中Qt工程源码目录中led_control.pro文件，点击Open。
https://file1.elecfans.com/web3/M00/74/D4/wKgzfWrkFLWAOtWEAAC9Kt0LkWo904.png
勾选T153平台Kits，点击"Browse…"选择Qt程序镜像生成的路径，选择好后点击Open，如下图所示。
https://file1.elecfans.com/web3/M00/74/D4/wKgzfmrkFMOAbmPLAAG2MnPIkbU478.png
https://file1.elecfans.com/web3/M00/74/D4/wKgzfWrkFMOALxJWAAB2O6zuD7I929.png
点击"Configure Project"进行工程配置，如下图所示。
https://file1.elecfans.com/web3/M00/74/D4/wKgzfWrkFNCANfBrAAG5Hskn-F4441.png
右击Qt工程，点击Build进行Qt工程编译，生成可在单板机上正常运行的ARM端Qt程序镜像，如下图所示。
https://file1.elecfans.com/web3/M00/1C/A6/wKgZO2g5YYKAUYT0AAIovIBfpHw711.png
https://file1.elecfans.com/web3/M00/74/D4/wKgzfWrkFNmAMgxVAALja7iuMQc873.png
编译完成后，将生成可在单板机上运行的ARM端Qt程序镜像，如下图所示。
https://file1.elecfans.com/web3/M00/74/D4/wKgzfmrkFOWAMvy2AABQkG3hNZA418.png
页:
[1]