繼上篇《基于MCU平臺(tái)的HMI開(kāi)發(fā)的性能優(yōu)化與實(shí)戰(zhàn)（上）》深入探討了提升MCU平臺(tái)HMI開(kāi)發(fā)效率和應(yīng)用性能的策略后，本文將專注于NXP i.MX RT1170 MCU平臺(tái)的儀表盤開(kāi)發(fā)實(shí)踐。我們將重點(diǎn)介紹Qt for MCUs的優(yōu)化技巧，展示如何通過(guò)實(shí)際案例應(yīng)用這些策略，以實(shí)現(xiàn)高效且性能卓越的HMI解決方案。

NXP的i.MX RT1170是一款高性能雙核MCU，集成1GHz Arm Cortex-M7和400MHz Cortex-M4內(nèi)核，提供2MB SRAM和高級(jí)安全功能。它支持多種媒體功能和實(shí)時(shí)性能，適用于消費(fèi)電子、工業(yè)和汽車應(yīng)用。

上圖展示的HMI儀表設(shè)計(jì)圖融入了豐富元素，如實(shí)時(shí)速度、導(dǎo)航、車輛與電池狀態(tài)，以及偽3D效果、動(dòng)態(tài)車道線和多圖層圖像疊加等。這些設(shè)計(jì)在MCU平臺(tái)上的精確實(shí)現(xiàn)，對(duì)HMI的高保真呈現(xiàn)構(gòu)成了挑戰(zhàn)。

我們將深入探討這一設(shè)計(jì)在實(shí)際開(kāi)發(fā)中的應(yīng)用策略。通過(guò)實(shí)施9項(xiàng)關(guān)鍵優(yōu)化，顯著降低了資源消耗并增強(qiáng)了程序性能，確保了MCU平臺(tái)上動(dòng)畫(huà)的流暢性，從而提升了用戶體驗(yàn)。

• 復(fù)用一個(gè)Text文本框達(dá)到多個(gè)Text的顯示效果

UI設(shè)計(jì)中有許多文字部分，比如說(shuō)像上圖所示的能耗部分的文字顯示，從常規(guī)思維來(lái)說(shuō) “XXX km”、“XXX wh/km”和“XX.X Kmh”三部分因?yàn)閿?shù)字和單位的文字大小不一樣，通常會(huì)用6個(gè)Text元素實(shí)現(xiàn)，但是會(huì)增加文本布局的計(jì)算開(kāi)銷，因此我們復(fù)用一個(gè)Text文本框以達(dá)到和多個(gè)Text相同的顯示效果，避免多次針對(duì)文本的布局計(jì)算。

• ?烘焙素材，考慮素材之間的層疊關(guān)系

?在HMI開(kāi)發(fā)中，為避免速度表動(dòng)畫(huà)因多圖疊加導(dǎo)致的性能問(wèn)題，我們優(yōu)化了素材的層疊處理。原先通過(guò)五張圖疊加實(shí)現(xiàn)的動(dòng)效，因頻繁像素計(jì)算而造成動(dòng)畫(huà)卡頓。我們對(duì)方案進(jìn)行了改進(jìn)，將指針、內(nèi)外光暈合并為一張圖，并僅使用上半部分。通過(guò)調(diào)整旋轉(zhuǎn)中心，實(shí)現(xiàn)指針轉(zhuǎn)動(dòng)效果，這樣既減少了圖像處理的計(jì)算量，也降低了素材數(shù)量，有效節(jié)約了資源，提升了動(dòng)畫(huà)流暢度。

• 圖片素材優(yōu)化

UI設(shè)計(jì)給出的圖片資源中有些圖片規(guī)格很大，然而并不是整張圖片的內(nèi)容都會(huì)被用到，但是沒(méi)有用到的圖片內(nèi)容在運(yùn)行時(shí)也進(jìn)行了像素計(jì)算，這部分計(jì)算就是多余的資源開(kāi)銷，此時(shí)我們就需要對(duì)圖片進(jìn)行剪切，將不需要的圖片內(nèi)容剪裁掉，避免資源浪費(fèi)。

• 降低圖片編碼渲染格式

在UI設(shè)計(jì)中，我們根據(jù)圖片的像素精細(xì)度需求，為它們分配了不同的編碼渲染格式。例如，對(duì)于像素要求較低的純色圖像，我們采用ARGB4444格式；而對(duì)于細(xì)節(jié)豐富、色彩復(fù)雜的圖像，則使用ARGB8888格式以保證質(zhì)量。更多細(xì)節(jié)，請(qǐng)參考上一期的詳細(xì)解析。

• ?使用PathSVG來(lái)替代部分圖片

?PathSVG 是一個(gè) SVG (Scalable Vector Graphics) 文件中的元素，通常用于定義矢量圖形的路徑。SVG 是一種基于 XML 的文件格式，用于描述二維矢量圖形。Path 元素是其中最重要和最常用的元素之一，可以用來(lái)繪制任意形狀的路徑，如直線、曲線和復(fù)雜的多邊形。如上圖所示為能耗突變的矩形框，我們可以使用PathSVG繪制矩形框，使用Gradient實(shí)現(xiàn)矩形框內(nèi)顏色漸變，減少了圖片渲染。

• ?數(shù)字動(dòng)畫(huà)替代Timer

?儀表界面上有許多數(shù)值是隨著時(shí)間變化而不斷變化的，通常我們會(huì)綁定value，通過(guò)調(diào)用Timer不斷改變value的數(shù)值，實(shí)現(xiàn)界面數(shù)據(jù)變化，但當(dāng)Timer正在運(yùn)行且其屬性之一發(fā)生更改時(shí)，經(jīng)過(guò)的時(shí)間會(huì)被重置，發(fā)生“臟事件”檢查，占用大量CPU，所以我們使用NumberAnimation代替Timer，增加運(yùn)行性能。

• 優(yōu)化Text寫法

如下表所示，優(yōu)化前相當(dāng)于在設(shè)置字體相關(guān)屬性之前先使用了一個(gè)Qt.font對(duì)象，隨后又對(duì)其進(jìn)行數(shù)值修改，優(yōu)化后相當(dāng)于直接構(gòu)建一個(gè)自定義的Qt.font對(duì)象。這樣的操作減少了多余的計(jì)算開(kāi)銷，在同時(shí)存在多個(gè)Text而且Text屬性需時(shí)刻相同時(shí)效果尤為明顯。

• 編譯器優(yōu)化

編譯器優(yōu)化是一個(gè)復(fù)雜的領(lǐng)域，它使用了一系列的技術(shù)和策略，可以在保持程序語(yǔ)義不變的情況下，提高程序的運(yùn)行速度并減小可執(zhí)行文件的大小。同時(shí)編譯器提供多個(gè)優(yōu)化級(jí)別，允許開(kāi)發(fā)人員在性能和可維護(hù)性之間進(jìn)行權(quán)衡，例如，GCC和Clang等編譯器提供了如下的優(yōu)化級(jí)別：

1. O0：無(wú)優(yōu)化，默認(rèn)的優(yōu)化級(jí)別，編譯器不執(zhí)行任何優(yōu)化。
2. O1：基本優(yōu)化，執(zhí)行一些基本的優(yōu)化操作，如刪除未使用的變量、內(nèi)聯(lián)簡(jiǎn)單函數(shù)等。
3. O2：中級(jí)優(yōu)化，進(jìn)行了更多的優(yōu)化操作，包括更大范圍的內(nèi)聯(lián)、循環(huán)展開(kāi)、函數(shù)調(diào)用圖優(yōu)化等。
4. O3：高級(jí)優(yōu)化，進(jìn)行了更深入的優(yōu)化操作，如更大范圍的內(nèi)聯(lián)、循環(huán)變形、自動(dòng)向量化等。

在MCU儀表的開(kāi)發(fā)中，我們采用Ofast編譯模式以確保程序運(yùn)行效率最大化。Ofast模式通過(guò)結(jié)合-O3和-ffast-math的優(yōu)化特性，提供了一種極端的優(yōu)化設(shè)置。這種設(shè)置能夠充分利用CPU的多核和向量化指令集等硬件特性，顯著提升程序的執(zhí)行速度。盡管使用這種模式會(huì)增加程序的編譯時(shí)間，但為了性能考慮這種取舍是必要的。

• 啟用圖片資源壓縮

當(dāng)處理圖片顯示時(shí)，MCU會(huì)先將圖片數(shù)據(jù)從外部ROM復(fù)制到外部RAM，經(jīng)過(guò)縮放、旋轉(zhuǎn)等處理后復(fù)制到圖像緩沖區(qū)中，其中外部ROM->外部RAM的步驟會(huì)消耗大量的運(yùn)行時(shí)間，影響程序運(yùn)行速度，為解決此問(wèn)題，我們配置了以下三個(gè)參數(shù)：

resourceCachePolicy

配置resourceCachePolicy: “OnDemand”啟用圖像緩存，此時(shí)，圖像在首次加載并使用后，并不會(huì)立刻被釋放，而是保存在一個(gè)專門的緩存空間內(nèi)，在下次使用時(shí)將直接從緩存中拿取，避免了重復(fù)加載圖像帶來(lái)的時(shí)間開(kāi)銷。

maxResourceCacheSize

設(shè)置maxResourceCacheSize: xxxxxxxx可配置最大緩存空間。

resourceCompression

配置resourceCompression: true則可以啟用對(duì)圖像的資源壓縮，盡可能的減小圖像體積，節(jié)省外部ROM空間。

應(yīng)用這些優(yōu)化策略后，我們能夠在NXP1170平臺(tái)上高效地實(shí)現(xiàn)并流暢運(yùn)行UI設(shè)計(jì)。

若您希望獲取完整的Demo源代碼或深入了解Qt for MCUs，請(qǐng)隨時(shí)聯(lián)系我們或?qū)⑿枨蟀l(fā)送至market@dotrustech.com。