前言

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

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

嵌入式圖形趨勢

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

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

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

• 越來越快的用戶界面開發(fā)速度。

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

NXP的圖形策略

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

? ? ? ? ? ? ? ? ??圖1. NXP圖形界面MCU分類

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

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

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

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

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

GUI GUIDER/LVGL介紹

前文中介紹了NXP的圖形策略，現(xiàn)在來重點講一講LVGL這個特殊的圖形庫。為什么說其特殊？因為NXP甚至為LVGL推出了一個上位機(jī)界面設(shè)計軟件GUI Guider。

LVGL介紹

LVGL全稱Lightand Versatile Graphics Library。從名字可以看出這是一個致力于輕量級的圖形庫，不過隨著時間的推移，這個輕量級的圖形庫功能卻越來越強(qiáng)大。其主要特點有：

1. 1. 免費且開源

2. 2. 硬件獨立，不依賴于任何微控制器

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

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

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

GUI Guider介紹

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

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

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

• 包含LVGL 庫和自定義小部件；

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

• 能夠方便的添加事件、動作和動畫；

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

• 支持視頻解碼、LottieFiles 動畫；

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

• 工程支持 C 和 MicroPython兩種語言；

• MCUXpresso IDE、IAR 和Keil的直接項目輸出；

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

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

• i.MX RT
• MX

• KW

• RW

• MCX

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

? ? ? ? ? ? ? ? ? 圖3. GUI Guider開啟界面

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

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

小結(jié)

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

END

更多恩智浦AI-IoT市場和產(chǎn)品信息，邀您同時關(guān)注“NXP客棧”微信公眾號

? ? ?

NXP客棧

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

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

恩智浦MCU加油站

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

?

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