五、Yocto集成QT5(基于Raspberrypi 4B)

Yocto集成QT5

本篇文章为基于raspberrypi 4B单板的yocto实战系列的第五篇文章：
一、yocto 编译raspberrypi 4B并启动
二、yocto 集成ros2(基于raspberrypi 4B)
三、Yocto创建自定义的layer和image
四、Yocto创建静态IP和VLAN

本章节实操代码请查看github仓库： meta-rpi-robot

一. 源码下载和编译

这一部分其实在第二节yocto集成ROS2中有涉及，但是为了连贯性和完整性本小节依然添加对应的描述，以方便只需要在yocto中集成QT的同学参考。

1.1 下载meta-qt5

进入到poky-kirkstone文件夹下执行如下指令下载meta-qt5源码：

git clone -b kirkstone https://github.com/meta-qt5/meta-qt5.git  meta-qt5

如图所示：

1.2 加入构建

修改rpi-build/conf/bblayers.conf，将meta-qt5 layer添加到构建系统中

二. Yocto集成

下面我们还需要将QT相关的组件打包到iamge里面去，在我们的rpi-robot-image.bb文件中添加如下内容：

这里只是简单添加了几个组件，如果你的QT程序很复杂依赖库较多需要都添加进来。

依赖库有了，然后还需要对需要的QT组件进行一些配置：
这里我们需要配置插件打开eglfs，打开opengl：
在recipes-qt/qt5/下面新建一个qtbase_%.bbappend文件，里面内容如下：

# Disable desktop OpenGL. Enable OpenGL ES and EGFLS.
PACKAGECONFIG_GL = "gles2 eglfs"

# Enable fontconfig to get system freetype fonts
PACKAGECONFIG_FONTS += "fontconfig"

PACKAGECONFIG:append = " eglfs examples accessibility "

然后在rpi-robot-image.bb文件中添加如下配置，移除x11 的feature：

DISTRO_FEATURES:append = " opengl"
DISTRO_FEATURES:remove = " x11"

这样在执行如下编译指令编译出来的image里面就有了QT的依赖库和运行环境了

bitbake rpi-robot-image

三. QT5 运行环境配置

上面是一些常规流程，打包出来的image启动以后确实有了QT环境，但是不代表QT程序就可以运行，这里需要配置很多的QT环境才能保证QT程序能够正常，这里踩了不少坑，这部分网上的资料也比较少，着重介绍下这部分的适配过程。
主要官方介绍：
https://doc.qt.io/qt-5/embedded-linux.html
https://doc.qt.io/Boot2Qt-5.15/qtee-meta-qt5.html
显示架构介绍参考：
https://wiki.t-firefly.com/zh_CN/Firefly-Linux-Guide/graphics.html
https://doc.embedfire.com/linux/rk356x/Qt/zh/latest/lubancat_qt/qtdemo/demo_run.html

在嵌入式Linux系统上，可以使用多个平台插件：EGLFS，LinuxFB或Wayland。但是，这些插件的可用性取决于Qt的配置方式。

• LinuxFB
  插件通过linux的FBDEV(Framebuffer Device)驱动显示，不支持硬件渲染，显示性能可能会不好。
• Wayland
  一种显示服务协议，不依赖客户端-服务器体系结构，旨在提供一个现代、 安全的的Linux和其他类Unix操作系统窗口系统取代X Window system，而Weston是Wayland开源显⽰协议的参考实现。
• EGLFS
  是 Qt 自己实现的一个 GUI 系统，不支持多窗口，eglfs使用opengles/egl进行gpu渲染后，直接送给drm去显示。
  EGLFS is the recommended plugin for modern Embedded Linux devices that include a GPU.

本小节主要介绍EGLFS显示系统来显示QT 的应用程序。
EGLFS 需要使用的环境变量有如下内容：

# 指定显示平台插件，通过QT_QPA_PLATFORM 或者-platform命令行选项指定其他设置
export QT_QPA_PLATFORM=eglfs

# 此环境变量强制执行特定的插件，QT_QPA_EGLFS_INTEGRATION 设置为eglfs_kms将使用KMS / DRM后端
export QT_QPA_EGLFS_INTEGRATION=eglfs_kms

# KMS / DRM后端还通过JSON文件支持自定义配置，QT_QPA_EGLFS_KMS_CONFIG 指定配置文件的路径
# export QT_QPA_EGLFS_KMS_CONFIG=/usr/local/qt-app/conf/cursor.json

# 指定将current选择一种分辨率与当前模式匹配的模式，QT_QPA_EGLFS_ALWAYS_SET_MODE
#export QT_QPA_EGLFS_ALWAYS_SET_MODE=1
# 默认情况下，KMS后端将使用旧版API，可以启用DRM atomic API，通过将QT_QPA_EGLFS_KMS_ATOMIC环境变量设置为1。
#export QT_QPA_EGLFS_KMS_ATOMIC=1
# 鼠标设备，
# QT_QPA_EVDEV_MOUSE_PARAMETERS
#export QT_QPA_EVDEV_MOUSE_PARAMETERS=abs
#export QT_QPA_EVDEV_MOUSE_PARAMETERS=/dev/input/event2
# hide/show cursor
#export QT_QPA_EGLFS_HIDECURSOR=1
# 键盘设备
# 触摸设备
# eglfs 启用tslib支持,QT_QPA_EGLFS_TSLIB
#export QT_QPA_EGLFS_TSLIB=1
# 字体库
#export QT_QPA_FONTDIR=/usr/share/fonts
# 界面旋转角度 0，90，180，270，（使用触摸屏幕，触摸也要旋转）
#export QT_QPA_EGLFS_ROTATION=-90

四. QT Demo验证

本章节实操代码请查看github仓库： meta-rpi-robot meta-rpi-robot/recipes-apps/sample
上面运行环境准备号以后就可以跑一个QT测试程序验证下我们的功能是否正常，这里我们创建一个简单的QT qml程序，只显示一张照片.
我们在meta-rpi-robot文件夹下面创建一个子文件夹：

mkdir -p  /recipes-apps/sample

里面结构如下：

主要看一下luncher_0.1.bb文件：

SUMMARY = "Simple Qt application with QML"
DESCRIPTION = "A basic Qt application that uses QML for the UI"
LICENSE = "MIT"
LIC_FILES_CHKSUM = "file://${COMMON_LICENSE_DIR}/MIT;md5=0835ade698e0bcf8506ecda2f7b4f302"

FILESEXTRAPATHS:prepend := "${THISDIR}/:"

DEPENDS = "qtbase qtquickcontrols2"

SRC_DIR = "luncher"
SRC_URI = "file://luncher/"

S = "${WORKDIR}/luncher"

inherit  qmake5

do_install() {
    install -d ${D}${bindir}
    install -m 0755 ${B}/qml_luncher    ${D}${bindir}
}

FILES_${PN} = "${bindir}/*"

然后将luncher 添加到image的bb文件里面：

构建rpi-image

bitbake rpi-robot-image

SD卡刷机启动以后先设置以下环境变量然后执行qml_luncher app程序：

export QT_QPA_PLATFORM=eglfs
export QT_QPA_EGLFS_NO_LIBINPUT=1
qml_luncher

效果如下：

完整代码请查看github仓库： meta-rpi-robot