前言

近期，恩智浦中國(guó)官方賬號(hào)在國(guó)內(nèi)知名視頻平臺(tái)"B站"推出了嵌入式GUI開(kāi)發(fā)特訓(xùn)營(yíng)系列視頻教程:

https://www.bilibili.com/video/BV1gC4y1A7XN/?spm_id_from=333.999.0.0&vd_source=a3d6b60f0a54fab9b46c82c027fe76e1加入恩智浦“嵌入式GUI特訓(xùn)營(yíng)”，讓你的GUI技能分分鐘與高手并肩！說(shuō)到嵌入式GUI，那可真是有太多的東西可以聊。在此開(kāi)啟一個(gè)系列話(huà)題，講述NXP的嵌入式圖形世界。今天為大家?guī)?lái)第一講：NXP圖形策略及GUI Guider/LVGL介紹。

嵌入式圖形趨勢(shì)

隨著電子信息工業(yè)的飛速發(fā)展，現(xiàn)在日常生活中出現(xiàn)越來(lái)越多擁有用戶(hù)界面的電子產(chǎn)品。曾經(jīng)常見(jiàn)的旋鈕式洗衣機(jī)、微波爐，按鍵式電話(huà)、汽車(chē)中控臺(tái)都漸漸被交互式界面所取代，各家產(chǎn)品也在界面交互這一塊發(fā)力，做出更能讓客戶(hù)眼前一亮的產(chǎn)品。從而，嵌入式圖形這一領(lǐng)域展現(xiàn)出如下的技術(shù)趨勢(shì)：

• 越來(lái)越多的產(chǎn)品配備用戶(hù)交互界面；

• 越來(lái)越強(qiáng)的圖形界面功能與外觀；

• 越來(lái)越快的用戶(hù)界面開(kāi)發(fā)速度。

NXP在用戶(hù)界面這一市場(chǎng)做了大量的工作，為市場(chǎng)提供了完備的圖形策略。

NXP的圖形策略

當(dāng)前市場(chǎng)主流的用戶(hù)界面從低到高可分為：分辨率較低、配置簡(jiǎn)單圖形元素、有限動(dòng)畫(huà)、顏色單一的入門(mén)級(jí)用戶(hù)界面；高分辨率、多控件與屏幕切換、復(fù)雜動(dòng)畫(huà)、顏色飽滿(mǎn)并使用專(zhuān)用圖形加速硬件的高級(jí)用戶(hù)界面。在NXP針對(duì)圖形界面的微控制器MCU中，同樣根據(jù)前面的分類(lèi)配備了一系列產(chǎn)品。

? ? ? ? ? ? ? ? ??圖1. NXP圖形界面MCU分類(lèi)

從Cortex-M0+低功耗的產(chǎn)品到Cortex-M7高達(dá)1GHz并且配有專(zhuān)用硬件圖形加速器的高性能（跨界）MCU，用戶(hù)都可以在NXP的微控制器家族中找到適合自己圖形界面的產(chǎn)品來(lái)進(jìn)行開(kāi)發(fā)。

除了在硬件產(chǎn)品上的全覆蓋策略，NXP在軟件生態(tài)方面也是“火力全開(kāi)“。NXP當(dāng)前的圖形生態(tài)中，涵蓋了大部分市面上常見(jiàn)的圖形庫(kù)，從輕量級(jí)的圖形庫(kù)LVGL到較為專(zhuān)業(yè)的Qt等，都已經(jīng)在NXP微控制器中進(jìn)行了部署，并且許多的圖形界面應(yīng)用已經(jīng)加入了我們的SDK中。

? ? ? ? ? ? ? ? ? ? ? 圖2. NXP圖形生態(tài)系統(tǒng)

除了圖中的幾個(gè)圖形庫(kù)，還有例如MicroEJ等公司也在嵌入式圖形界面領(lǐng)域與NXP有所合作，對(duì)NXP的部分微控制器有所支持。

近些年，國(guó)內(nèi)圖形庫(kù)也正在快速發(fā)展。NXP同樣看到了這一點(diǎn)，拓展了自己的圖形生態(tài)系統(tǒng)。比如致遠(yuǎn)電子的開(kāi)源圖形庫(kù)AWTK，支持了包括LPC以及i.MXRT的部分產(chǎn)品；基于國(guó)產(chǎn)RTOS的RT-THREAD柿餅UI，同樣支持了包括LPC以及i.MXRT的部分產(chǎn)品等。

GUI GUIDER/LVGL介紹

前文中介紹了NXP的圖形策略，現(xiàn)在來(lái)重點(diǎn)講一講LVGL這個(gè)特殊的圖形庫(kù)。為什么說(shuō)其特殊？因?yàn)镹XP甚至為L(zhǎng)VGL推出了一個(gè)上位機(jī)界面設(shè)計(jì)軟件GUI Guider。

LVGL介紹

LVGL全稱(chēng)Lightand Versatile Graphics Library。從名字可以看出這是一個(gè)致力于輕量級(jí)的圖形庫(kù)，不過(guò)隨著時(shí)間的推移，這個(gè)輕量級(jí)的圖形庫(kù)功能卻越來(lái)越強(qiáng)大。其主要特點(diǎn)有：

1. 1. 免費(fèi)且開(kāi)源

2. 2. 硬件獨(dú)立，不依賴(lài)于任何微控制器

3. 3. 硬件要求低，當(dāng)前大部分能夠驅(qū)動(dòng)顯示器的MCU都可以運(yùn)行LVGL

4. 4. 豐富的開(kāi)發(fā)工具，包括了字體以及圖像轉(zhuǎn)換器

5. 5. 強(qiáng)大的界面設(shè)計(jì)功能（后續(xù)介紹）

GUI Guider介紹

GUI GUIDER是一個(gè)使用方便的圖形用戶(hù)界面開(kāi)發(fā)工具，確保用戶(hù)可以基于LVGL圖形庫(kù)快速開(kāi)發(fā)高質(zhì)量的顯示界面。GUI Guider工具是為了客戶(hù)在使用NXP產(chǎn)品開(kāi)發(fā)基于LVGL的用戶(hù)界面工程時(shí)，能有一個(gè)更方便的開(kāi)發(fā)體驗(yàn)從而由NXP的軟件團(tuán)隊(duì)開(kāi)發(fā)的。用戶(hù)可以免費(fèi)使用此工具進(jìn)行NXP微控制器的界面開(kāi)發(fā)。GUI Guider有如下幾個(gè)特點(diǎn)：

• 通過(guò)拖拽方式進(jìn)行界面設(shè)計(jì)，所見(jiàn)即所得的設(shè)計(jì)理念；

• 可免費(fèi)與NXP設(shè)備一起使用；

• 包含LVGL 庫(kù)和自定義小部件；

• 支持導(dǎo)入圖像和自定義字體；

• 能夠方便的添加事件、動(dòng)作和動(dòng)畫(huà)；

• 可以通過(guò)模擬器進(jìn)行界面設(shè)計(jì)的仿真；

• 支持視頻解碼、LottieFiles 動(dòng)畫(huà)；

• 可以使用NXP設(shè)備中的PXP以及GPU硬件加速；

• 工程支持 C 和 MicroPython兩種語(yǔ)言；

• MCUXpresso IDE、IAR 和Keil的直接項(xiàng)目輸出；

• RT-Thread 和 Zephyr 的項(xiàng)目導(dǎo)出。

支持的設(shè)備系列包括：

• i.MX RT
• MX

• KW

• RW

• MCX

GUI Guider還有一個(gè)很大的特色，則是用戶(hù)們可以通過(guò)GUI Guider Community提出對(duì)工具使用時(shí)碰到的問(wèn)題以及對(duì)工具一些改進(jìn)的建議，我們的工程師會(huì)在community上面及時(shí)予以溝通回應(yīng)。GUI Guider從2021年首次發(fā)布的v1.0.0版本順利推進(jìn)到如今的v1.6.1版本，也得益于廣大用戶(hù)的積極提問(wèn)和建議。

? ? ? ? ? ? ? ? ? 圖3. GUI Guider開(kāi)啟界面

GUIGuider生成的工程結(jié)構(gòu)如下所示，custom文件夾為用戶(hù)自定義代碼存放區(qū)；generated文件夾為界面以及事件設(shè)計(jì)生成文件存放區(qū)；import文件夾為用戶(hù)導(dǎo)入資源存放區(qū)；lib文件夾則存放工程需要用到的工具庫(kù)；lvgl文件夾則是LVGL圖形庫(kù)源碼；lvgl-simulator為模擬器存放區(qū)；ports文件夾是為工程在linux和qnx下運(yùn)行的工具文件；sdk則是包含了生成的程序源碼以及IDE的工程文件；temp則是一些樣例文件。而“.guiguider“文件則是GUI Guider的工程文件，若要使用工具導(dǎo)入工程，就是導(dǎo)入此文件。

? ? ? ? ? ? ? ? ? ? ? 圖4. GUI Guider生成的工程

小結(jié)

此篇文章為GUI GUIDER特訓(xùn)營(yíng)系列第一篇，介紹了NXP的圖形策略以及GUI GUIDER工具的由來(lái)與發(fā)展。后續(xù)我會(huì)帶大家直接上手GUI GUIDER工具，來(lái)設(shè)計(jì)自己的GUI 界面工程。

END

更多恩智浦AI-IoT市場(chǎng)和產(chǎn)品信息，邀您同時(shí)關(guān)注“NXP客?！蔽⑿殴娞?hào)

? ? ?

NXP客棧

恩智浦致力于打造安全的連接和基礎(chǔ)設(shè)施解決方案，為智慧生活保駕護(hù)航。

長(zhǎng)按二維碼，關(guān)注我們

恩智浦MCU加油站

這是由恩智浦官方運(yùn)營(yíng)的公眾號(hào)，著重為您推薦恩智浦MCU的產(chǎn)品信息、開(kāi)發(fā)技巧、教程文檔、培訓(xùn)課程等內(nèi)容。

?

長(zhǎng)按二維碼，關(guān)注我們