NXP iMX8基于嵌入式Linux部署網絡瀏覽器
By Toradex秦海
1). 簡介
隨著嵌入式設備的發展,網絡通信在應用中越來越廣泛,而在客戶端,就需要可以方便訪問網絡服務的瀏覽器配置,本文就基于NXP iMX8平臺演示如何在嵌入式Linux BSP中集成網絡瀏覽器,包括Chromium瀏覽器和基于Qtwebenine的示例瀏覽器quicknanobrowser。
本文所演示的平臺來自于Toradex Apalis iMX8 ARM嵌入式平臺,這是一個基于NXP iMX8QM ARM處理器,支持Cortex-A72+A53和Coretex-M4架構的計算機模塊平臺。
2. 準備
a). Apalis iMX8QM 4GB WB IT ARM核心版配合Ioxra 載板,連接調試串口UART1(載板X22)到開發主機方便調試。
b). 載板連接HDMI顯示器和網絡用于顯示和聯網,USB鼠標鍵盤用于操作瀏覽器。
3). Apalis iMX8 Ycoto Linux 編譯部署以及配置
a). Apalis iMX8 Ycoto Linux 通過Ycoto/Openembedded 框架編譯,具體的配置方法請參考這里,參考如下修改后編譯Reference-Multimedia image鏡像
./ iMX8 Ycoto layer 中默認沒有包含瀏覽器的相關layer,因此首先需要通過下面修改添加相關layer
-------------------------------
### add mata-browser
$ git clone https://github.com/OSSystems/meta-browser.git
### add meta-clang
$ git clone -b dunfell https://github.com/kraj/meta-clang.git
### add meta-python2
$ git clone -b dunfell https://github.com/YoeDistro/meta-python2.git
### modify build/conf/bblayer.conf to add above extra layers
--- a/build/conf/bblayers.conf
+++ b/build/conf/bblayers.conf
@@ -24,6 +24,9 @@
${TOPDIR}/../layers/meta-openembedded/meta-python \
${TOPDIR}/../layers/meta-freescale-distro \
${TOPDIR}/../layers/meta-toradex-demos \
+ ${TOPDIR}/../layers/meta-python2 \
+ ${TOPDIR}/../layers/meta-clang \
+ ${TOPDIR}/../layers/meta-browser \
${TOPDIR}/../layers/meta-qt5 \
\
\
-------------------------------
./ 修改 local.conf,增加chromium和qtwebengine支持
-------------------------------
+IMAGE_INSTALL_append = " chromium-ozone-wayland qtwebengine qtwebengine-dev"
+ACCEPT_FSL_EULA = "1"
-------------------------------
./ 修改image和Qt5 SDK 文件
-------------------------------
// tdx-reference-multimedia-image.bb文件,增加Qt5 SDK 和中文字體支持
--- a/layers/meta-toradex-demos/recipes-images/images/tdx-reference-multimedia-image.bb
+++ b/layers/meta-toradex-demos/recipes-images/images/tdx-reference-multimedia-image.bb
@@ -3,6 +3,8 @@
SUMMARY = "Toradex Embedded Linux Reference Multimedia Image"
DESCRIPTION = "Image for BSP verification with QT and multimedia features"
+inherit populate_sdk_qt5
+
#Prefix to the resulting deployable tarball name
export IMAGE_BASENAME = "Reference-Multimedia-Image"
@@ -14,6 +16,9 @@
'', d), d)} \
"
+# add chinese fonts
+FONT_CHINESE = "ttf-droid-sans ttf-droid-sans-fallback ttf-droid-sans-mono ttf-droid-serif freetype"
+
APP_LAUNCH_WAYLAND ?= "wayland-qtdemo-launch-cinematicexperience"
APP_LAUNCH_X11 ?= "x-window-qtcinematicexperience"
@@ -33,6 +38,8 @@
packagegroup-tdx-graphical \
packagegroup-tdx-qt5 \
\
+ ${FONT_CHINESE} \
+ \
bash \
coreutils \
less \
// tdx-reference-minimal-image.bb文件,增加中文語言支持
### modify layers/meta-toradex-demos/recipes-images/images/tdx-reference-minimal-image.bb
#IMAGE_LINGUAS = "en-us"
# add chinese font support
IMAGE_LINGUAS = "en-us zh-cn"
// packagegroup-qt5-toolchain-target.bb文件,增加Qt5 SDK qtwebengine支持
--- a/layers/meta-qt5/recipes-qt/packagegroups/packagegroup-qt5-toolchain-target.bb
+++ b/layers/meta-qt5/recipes-qt/packagegroups/packagegroup-qt5-toolchain-target.bb
@@ -93,6 +93,9 @@
qtwebchannel-dev \
qtwebchannel-mkspecs \
${@bb.utils.contains('DISTRO_FEATURES', 'opengl', 'qtwebchannel-qmlplugins', '', d)} \
+ qtwebengine-dev \
+ qtwebengine-mkspecs \
+ ${@bb.utils.contains('DISTRO_FEATURES', 'opengl', 'qtwebengine-qmlplugins', '', d)} \
qtxmlpatterns-dev \
qtxmlpatterns-mkspecs \
qttranslations-qtxmlpatterns \
-------------------------------
./ 編譯image和SDK
-------------------------------
# compile Reference-Multimedia image
$ bitbake bitbake tdx-reference-multimedia-image
# compile SDK
bitbake tdx-reference-multimedia-image -c populate_sdk
-------------------------------
b). Ycoto Linux image部署
參考這里通過Toradex Easy installer將上面編譯好的image更新部署到模塊,版本為目前最新的Ycoto Linux V5.1
c). 顯示配置
./ HDMI默認即可正常顯示,如果有顯示器EDID讀取問題不能成功顯示,可以通過下面方法通過軟件firmware方式手動加載EDID,更多關于顯示的配置請參考這里
-------------------------------
# cp EDID binary file to rootfs
$ mkdir /lib/firmware/edid
$ cp 1920x1080.bin /lib/firmware/edid
# set uboot kernel command line
# setenv defargs ‘pci=nomsi drm.edid_firmware=HDMI-A-1:edid/1920x1080.bin’
# saveenv && reset
-------------------------------
d). Qt5 SDK安裝配置
請參考這里的說明安裝上面編譯好的SDK,以及配置Qtcreator交叉編譯環境
4). Chromium 瀏覽器應用測試
a). 通過下面命令啟動chromium 應用,添加 ”--in-process-gpu” 參數使應用可以在wayland環境下正常運行
-------------------------------
root@apalis-imx8:~# chromium --no-sandbox --in-process-gpu
-------------------------------
b). 運行效果如下圖,可見中文也可以正常顯示
c). 當chromium運行時查看了下CPU占用率,大概是在40% - 180% 這個區間動態變化,iMX8包含6個Cortex-A CPU核心,因此最多可以到600%的使用率。
5). QT Webengine 示例瀏覽器quicknanobrowser測試
Quick Nano Brower 示例程序是Qt5自帶的 Webengine示例程序,這是一個基于Qt Quick和 Webengine開發的精簡瀏覽器示例,本文使用版本為和Qt library匹配的5.14.2版本。
a). 使用上面配置好交叉編譯環境進行編譯,將編譯生成的可執行文件 quicknanobrower 復制到Apalis iMX8模塊 “/home/root” 目錄下
b). 配置簡單測試啟動腳本
./ test.sh,程序啟動腳本文件
---------------------------------------------------
!/bin/sh
export QT_QPA_PLATFORM=wayland-egl
/home/root/quicknanobrowser --no-sandbox &
---------------------------------------------------
c). 運行quicknanobrowser應用
---------------------------------------------------
$ /home/root/test.sh
---------------------------------------------------
d). 運行效果如下圖,中文也可以正常顯示
c). 當chromium運行時查看了下CPU占用率,大概是在50% - 200% 這個區間動態變化。
6). 總結
本文基于NXP iMX8嵌入式平臺在嵌入式linux系統下測試網絡瀏覽器部署。
*博客內容為網友個人發布,僅代表博主個人觀點,如有侵權請聯系工作人員刪除。