前 言

本文主要說(shuō)明Qt的圖形用戶界面(GUI)開發(fā)流程，包括Qt程序自啟動(dòng)配置與案例介紹，旨在幫助開發(fā)者完成產(chǎn)品開發(fā)與測(cè)試。

開發(fā)環(huán)境

Windows開發(fā)環(huán)境：Windows10 64bit

Linux開發(fā)環(huán)境：VMware16.2.5、Ubuntu22.04.4 64bit

LinuxSDK開發(fā)包：LinuxSDK-[版本號(hào)]（基于RK3506_LINUX6.1_SDK_Release_V1.1.0_20241128）

評(píng)估板系統(tǒng)版本：U-Boot-2017.09、Linux-6.1.99、Buildroot-2024.02

Qt版本：Qt-5.15.11

備注：本文基于256MByteNAND FLASH、256MByteDDR3配置核心板進(jìn)行演示。

術(shù)語(yǔ)表

為便于閱讀，下表對(duì)文檔出現(xiàn)的關(guān)鍵術(shù)語(yǔ)進(jìn)行解釋；對(duì)于廣泛認(rèn)同釋義的術(shù)語(yǔ)，在此不做注釋。

Qt組件支持

Qt組件支持情況如下，詳情請(qǐng)查看產(chǎn)品資料“4-軟件資料LinuxFilesystembuildroot-feature-support”文件。

注意事項(xiàng)

本文檔默認(rèn)使用HDMI顯示，使用USB TO UART0作為調(diào)試串口。

進(jìn)行本文檔操作前，請(qǐng)先按照《開發(fā)環(huán)境搭建》文檔，安裝VMware虛擬機(jī)、Ubuntu系統(tǒng)、SecureCRT串口調(diào)試終端等相關(guān)軟件。

評(píng)估板簡(jiǎn)介

創(chuàng)龍科技TL3506-EVM是一款基于瑞芯微RK3506J/RK3506B處理器設(shè)計(jì)的3核ARMCortex-A7+ ARM Cortex-M0國(guó)產(chǎn)工業(yè)評(píng)估板，主頻高達(dá)1.5GHz。評(píng)估板由核心板和評(píng)估底板組成，核心板CPU、ROM、RAM、電源、晶振等所有元器件均采用國(guó)產(chǎn)工業(yè)級(jí)方案，國(guó)產(chǎn)化率100%。同時(shí)，評(píng)估底板大部分元器件亦采用國(guó)產(chǎn)工業(yè)級(jí)方案，國(guó)產(chǎn)化率約為99%（按元器件數(shù)量占比，數(shù)據(jù)僅供參考）。核心板經(jīng)過(guò)專業(yè)的PCB Layout和高低溫測(cè)試驗(yàn)證，支持選配屏蔽罩，質(zhì)量穩(wěn)定可靠，可滿足各種工業(yè)應(yīng)用環(huán)境要求。

評(píng)估板接口資源豐富，引出2路Ethernet、3路USB2.0、2路CAN-FD、RS485、RS232等通信接口，同時(shí)引出LVDS OUT、MIPI DSI、HDMI OUT、TFT LCD、HP OUT/MIC IN等音視頻多媒體接口。評(píng)估板板載WiFi模塊，支持選配4G模塊、PLP斷電保護(hù)模塊，并可選配外殼直接應(yīng)用于工業(yè)現(xiàn)場(chǎng)，方便用戶快速進(jìn)行產(chǎn)品方案評(píng)估與技術(shù)預(yù)研。

評(píng)估板硬件資源圖解1

評(píng)估板硬件資源圖解2

Qt開發(fā)說(shuō)明

Qt開發(fā)環(huán)境主要包括Qt Creator工具、X86端Qt環(huán)境、ARM端Qt環(huán)境、交叉編譯工具鏈等。當(dāng)用戶使用Qt Creator工具和X86端Qt環(huán)境編寫并編譯Qt工程后，生成的Qt程序鏡像僅可在X86端運(yùn)行。必須使用適配評(píng)估板的ARM端Qt環(huán)境、交叉編譯工具鏈編譯Qt工程，生成的Qt程序鏡像方可在ARM端（即評(píng)估板）上正常運(yùn)行。

LinuxSDK開發(fā)包中已提供適配評(píng)估板的ARM端Qt環(huán)境(5.15.11)，請(qǐng)先參考《開發(fā)環(huán)境搭建》和《Linux系統(tǒng)開發(fā)手冊(cè)》安裝、編譯LinuxSDK，構(gòu)建適配評(píng)估板的交叉編譯工具鏈和qmake工具。可基于命令行或Qt Creator工具對(duì)已有Qt工程進(jìn)行編譯，生成ARM端Qt程序鏡像。

我司提供的Qt工程位于產(chǎn)品資料“4-軟件資料Demoqt-demos”目錄下，其中src目錄下包含Qt工程源碼，bin目錄下包含ARM端Qt程序鏡像。請(qǐng)將整個(gè)qt-demos文件夾拷貝至Ubuntu工作目錄下，如下圖所示。

圖 1

基于QtCreator開發(fā)

安裝QtCreator工具

Qt Creator是一款專為Qt框架設(shè)計(jì)的跨平臺(tái)集成開發(fā)環(huán)境(IDE)，提供代碼編輯、調(diào)試、項(xiàng)目管理和界面設(shè)計(jì)等功能，支持高效開發(fā)Qt應(yīng)用程序。

執(zhí)行如下命令，安裝QtCreator。

Host# sudoaptinstallqtcreator

圖 2

圖 3

執(zhí)行如下命令，查看QtCreator版本。

Host# qtcreator -version

圖 4

執(zhí)行如下命令，加載環(huán)境變量。

Host# source /home/tronlong/RK3506/rk3506_linux6.1_release_v1.1.0/buildroot/output/rockchip_rk3506/host/environment-setup

圖 5

配置交叉編譯工具鏈

執(zhí)行如下命令，啟動(dòng)Qt Creator。

Host# qtcreator

圖 6

啟動(dòng)Qt Creator工具后，點(diǎn)擊菜單欄"Tools->Options…"。

圖 7

點(diǎn)擊"Kits"，打開配置選擇頁(yè)面。

圖 8

點(diǎn)擊"Compilers->Add->GCC->C++ ->Browse…"，選擇平臺(tái)交叉編譯工具鏈中的arm-buildroot-linux-gnueabihf-g++，然后點(diǎn)擊Open確認(rèn)。具體路徑為：

/home/tronlong/RK3506/rk3506_linux6.1_release_v1.1.0/buildroot/output/rockchip_rk3506/host/bin/arm-buildroot-linux-gnueabihf-g++

圖 9

圖 10

選擇后，Name修改為"RK3506-GCC"，ABI選擇"arm-linux-generic-elf-32bit"，再點(diǎn)擊Apply，如下圖所示。

圖 11

配置Qt Versions

點(diǎn)擊"Qt Versions->Add"，選擇平臺(tái)qmake，然后點(diǎn)擊Open確認(rèn)。具體路徑為：

/home/tronlong/RK3506/rk3506_linux6.1_release_v1.1.0/buildroot/output/rockchip_rk3506/host/bin/qmake

圖 12

圖 13

選擇后，Version name修改為"RK3506-qt5"再點(diǎn)擊Apply，如下圖所示。

圖 14

配置Kits

請(qǐng)參照下圖配置Kits各選項(xiàng)。點(diǎn)擊"Kits ->Add"，將Name修改為"RK3506"，Device type選擇"Generic Linux Device"，Compiler的C++選擇"RK3506-GCC"，Debugger選擇"None"，Qtversion選擇"RK3506-qt5"，點(diǎn)擊Apply，然后點(diǎn)擊OK完成配置。

圖 15

編譯Qt工程

本章節(jié)使用led_control案例演示編譯Qt工程。

請(qǐng)?jiān)赒tCreator界面，點(diǎn)擊"Open"。

圖 16

選中Qt工程源碼目錄中.pro文件，點(diǎn)擊Open。

圖 17

勾選RK3506平臺(tái)Kits，點(diǎn)擊"Browse…"選擇Qt程序鏡像生成的路徑，選擇好后點(diǎn)擊"Open"，如下圖所示。

圖 18

圖 19

點(diǎn)擊"Configure Project"進(jìn)行工程配置，如下圖所示。

圖 20

右擊Qt工程，點(diǎn)擊Build進(jìn)行Qt工程編譯，生成可在評(píng)估板上正常運(yùn)行的ARM端Qt程序鏡像，如下圖所示。

圖 21

圖 22

編譯完成后，將生成可在評(píng)估板上運(yùn)行的ARM端Qt程序鏡像，如下圖所示。

圖 23

基于命令行方式開發(fā)

本章節(jié)使用led_control案例進(jìn)行演示。進(jìn)入led_control工程源碼目錄，配置交叉編譯工具鏈環(huán)境變量，執(zhí)行qmake命令生成Makefile文件，再執(zhí)行make命令編譯生成可在評(píng)估板上正常運(yùn)行的ARM端Qt程序鏡像，如下圖所示。

Host# cdqt-demos/image_display/src

Host# source /home/tronlong/RK3506/rk3506_linux6.1_release_v1.1.0/buildroot/output/rockchip_rk3506/host/environment-setup

Host# qmake

Host# make

圖 24

圖 25

圖 26

Qt程序自啟動(dòng)說(shuō)明

本章節(jié)以led_control案例為例，演示Qt程序自啟動(dòng)功能。led_control案例主要實(shí)現(xiàn)圖形化界面控制LED燈亮滅的功能。

請(qǐng)將案例bin目錄下可執(zhí)行程序led_control拷貝至評(píng)估板文件系統(tǒng)"/etc/init.d/"目錄。評(píng)估板上電啟動(dòng)進(jìn)入系統(tǒng)后，執(zhí)行如下命令，賦予可執(zhí)行程序權(quán)限。

Target# chmod a+x /etc/init.d/led_control

圖 27

圖 28

執(zhí)行如下命令，新建一個(gè)開機(jī)自啟動(dòng)腳本文件。

Target# vi/etc/init.d/S99led_control

圖 29

圖 30

開機(jī)自啟動(dòng)腳本文件內(nèi)容如下：

. /etc/profile

/etc/init.d/led_control &

添加內(nèi)容后，請(qǐng)保存退出，執(zhí)行如下命令修改開機(jī)自啟動(dòng)腳本文件權(quán)限。

Target# chmoda+x/etc/init.d/S99led_control

Target# sync

圖 31

執(zhí)行如下命令，移除LVGL程序腳本，關(guān)閉rk_demo桌面顯示程序。

Target# mv /etc/init.d/pre_init/S10lv_demo ~

圖 32

請(qǐng)將評(píng)估板斷電重啟，Qt程序?qū)?huì)自啟動(dòng)。Qt程序運(yùn)行成功后，可觀察到HDMI顯示屏顯示LED控制界面，可通過(guò)鼠標(biāo)點(diǎn)擊界面控制LED。

圖 33

執(zhí)行如下命令，取消led_control程序自啟動(dòng)，并恢復(fù)rk_demo桌面顯示程序。

Target# mv /etc/init.d/S99led_control /etc/ //取消led_control程序自啟動(dòng)

Target# mv S10lv_demo /etc/init.d/pre_init/ //恢復(fù)rk_demo桌面顯示程序

圖 34

image_display案例

案例說(shuō)明

本案例基于Qt框架實(shí)現(xiàn)加載圖片文件并輸出至屏幕顯示的功能。

程序支持自動(dòng)按比例縮放圖片，以確保圖片能夠完整地顯示；支持常規(guī)的PNG和JPG圖片格式。

圖 35

案例測(cè)試

評(píng)估板默認(rèn)支持HDMI顯示，如需選用其他屏幕進(jìn)行顯示，請(qǐng)參考《評(píng)估板測(cè)試手冊(cè)》中的“顯示模塊測(cè)試”章節(jié)完成硬件連接和替換對(duì)應(yīng)的內(nèi)核鏡像，并參考本文檔“觸摸屏Qt程序測(cè)試說(shuō)明”章節(jié)進(jìn)行案例測(cè)試。

請(qǐng)通過(guò)HDMI線將HDMI顯示屏與評(píng)估板HDMI OUT接口連接。進(jìn)入評(píng)估板文件系統(tǒng)，將ARM端Qt程序鏡像拷貝至評(píng)估板文件系統(tǒng)任意目錄下，同時(shí)將image_display工程bin目錄下文件名為test.jpg的JPG格式圖片拷貝至相同路徑。請(qǐng)?jiān)赒t程序鏡像所在路徑下執(zhí)行如下命令。

查看程序運(yùn)行參數(shù)

Target# ./image_display

參數(shù)解釋

imagepath：圖片路徑。

rotation：該參數(shù)為1，則豎屏顯示。

圖 36

關(guān)閉rk_demo桌面

請(qǐng)執(zhí)行以下命令關(guān)閉rk_demo，否則rk_demo將會(huì)覆蓋Qt程序。

Target# killall rk_demo

圖 37

橫屏顯示圖片

執(zhí)行以下命令，顯示屏將顯示如下圖像，在調(diào)試串口終端按"Ctrl + C"或通過(guò)鼠標(biāo)點(diǎn)擊屏幕"Exit"按鈕退出程序。

Target# ./image_display ./test.jpg

圖 38

圖 39

豎屏顯示圖片

執(zhí)行如下命令，顯示屏將顯示如下圖像，在調(diào)試串口終端按"Ctrl + C"或通過(guò)鼠標(biāo)點(diǎn)擊屏幕"Exit"按鈕退出程序。

Target# ./image_display test.jpg 1

圖 40

圖 41

關(guān)鍵代碼

生成Makefile文件。

圖 42

參數(shù)檢查。

圖 43

圖片加載。

圖 44

圖 45

窗口大小調(diào)整與圖片縮放。

圖 46

led_control案例

案例說(shuō)明

本案例基于Qt開發(fā)框架實(shí)現(xiàn)通過(guò)顯示屏界面控制LED亮滅的功能。

程序默認(rèn)全屏顯示。

圖 47

案例測(cè)試

評(píng)估板默認(rèn)支持HDMI顯示，如需選用其他屏幕進(jìn)行顯示，請(qǐng)參考《評(píng)估板測(cè)試手冊(cè)》中的“顯示模塊測(cè)試”章節(jié)完成硬件連接和替換對(duì)應(yīng)的內(nèi)核鏡像，并參考本文檔“觸摸屏Qt程序測(cè)試說(shuō)明”章節(jié)進(jìn)行案例測(cè)試。

請(qǐng)通過(guò)HDMI線將HDMI顯示屏與評(píng)估板HDMI OUT接口連接。進(jìn)入評(píng)估板文件系統(tǒng)，將ARM端Qt程序鏡像拷貝至評(píng)估板文件系統(tǒng)任意目錄下，請(qǐng)?jiān)赒t程序鏡像所在路徑下執(zhí)行以下命令。

請(qǐng)執(zhí)行以下命令關(guān)閉rk_demo，否則rk_demo將會(huì)覆蓋Qt程序。

Target# killall rk_demo

圖 48

執(zhí)行如下命令，可觀察到顯示屏顯示LED控制界面，可通過(guò)鼠標(biāo)點(diǎn)擊界面控制LED亮滅，按"Ctrl + C"或通過(guò)鼠標(biāo)點(diǎn)擊屏幕"Exit"按鈕退出程序。

Target# ./led_control

圖 49

用鼠標(biāo)點(diǎn)擊屏幕的按鈕即可控制對(duì)應(yīng)LED的亮滅。左上角的"Exit"按鈕可用于退出程序。

圖 50

關(guān)鍵代碼

生成Makefile文件。

圖 51

獲取主屏信息（分辨率），設(shè)置窗口大小。

圖 52

獲取LED當(dāng)前亮滅狀態(tài)。

圖 53

設(shè)置LED亮滅。

圖 54

?

關(guān)注微信公眾號(hào)Tronlong創(chuàng)龍科技，可獲取更多更新的干貨。

審核編輯 黃宇