一. 概述
世平集團 ATU 伊布小編 (一部) 團隊針對 i.MX 相關技術整理了一系列博文，這篇文章會對 GUI Guider 進行介紹及使用說明，希望能夠透過這些博文協助大家更了解 i.MX 的相關技術，未來 ATU 伊布小編 (一部) 團隊也會持續更新此系列的相關博文還懇請支持！
1.1 GUI Guider 介紹
GUI Guider 是基於 LVGL（Light and Versatile Graphics Library）圖形庫所構建的圖形使用者介面開發工具，IDE 開發環境中，使用者可以使用拖放工具來進行嵌入式設備上的圖形應用程序的 UI 設計，同時也可以模擬環境中運行測試，從而加速開發過程。
1.2 OP-Gyro 介紹
OP-Gyro 是世平集團使用 NXP i.MX93 為核心設計製作的 SBC 方案，其 SOC 規格包含了 Arm® Cortex®-A55 與 Arm® Cortex®-M33 兩種核心的處理器，這種多核心架構 ARM 處理器讓系統實現高效且即時的應用，如想了解更多關於 OP-Gyro 方案或 i.MX 的相關技術，可以透過 ATU 伊布小編 (一部) 團隊整理的系列博文索引來查找。
二. 編譯環境建置
2.1 建立 BSP
首先使用 Yocto Project 建立 BSP，更多詳細資訊請參考 Github 或【ATU Book-i.MX9系列】OP-Gyro (i.MX93) Linux 開發環境架設這篇博文。
$ mkdir <release> && cd <release>
$ repo init -u https://github.com/WPI-ATU-1/wpi-manifest.git -b imx-linux-mickledore -m imx-6.1.55-2.2.0.xml && repo sync
$ DISTRO=fsl-imx-xwayland MACHINE=opgyro source imx-setup-release.sh -b build
$ bitbake <image recipe>
2.2 安裝 Yocto toolchain
編譯完成後，至 tmp/deploy/sdk 下執行 Script 安裝 Yocto toolchain。
$ ./fsl-imx-xwayland-glibc-x86_64-imx-image-multimedia-armv8a-imx93evk-toolchain-6.1-mickledore.sh
2.3 安裝 ninja utility
$ sudo apt install ninja-build
三. GUI-Guider 建置
3.1 下載
接著至 NXP 官網下載 GUI-Guider Installer，在此使用 Ubuntu 環境的軟體進行示範。
3.2 安裝
至編譯環境下進行安裝。
$ sudo apt install ./Gui-Guider-Setup-1.7.0-GA.deb
四. GUI-Guider IDE
4.1 創建新專案
安裝完成後，就可以直接啟動程式，在此將示範如何創建一個 Buttom Example。
選擇 LVGL v8.3.5 版本。
選擇 i.MX93 開發板。
選擇 ButtonCounter 範例專案，使用者可自行參考研究各個範例中的 function 使用方式。
選擇完成後，設定專案相關資訊，名稱、路徑或 Panel Size等。
最後就可以在 IDE 中進行各項編輯，製作屬於自己的 GUI 程式。
4.2 專案編譯
當編輯完成後，就要編譯出 GUI 的執行檔，如果使用者與筆者同樣使用 Ubuntu 環境進行開發，編譯可使用方法一及方法二，若是使用 windows 或 Mac 的軟體，則也可以參考方法二的做法，將 meta layer 導出至 BSP 中。
4.2.1 方式一: Project Build
方法一是使用 GUI Guider 中軟體自帶的編譯功能來進行編譯，點選 Project > Build > Yocto 程式便會開始執行並生成執行檔。
編譯完成後，可以從 log 中看到，gui_guider 執行檔被生成在 build/ 下，使用者可以參考 5.2 複製 GUI-Guider 的步驟，將執行檔複製至所需的位置即可。
4.2.2 方式二: 導出 Yocto layer
方法二是從 IDE 點選 Project > Export Code > Yocto 導出 Gui-Guider 的 meta layer。
將產生的 meta layer 複製至 Yocto BSP source 當中，並新增 layer 至編譯項目中。
$ bitbake-layers add-layer ../sources/meta-gui-guider
編譯 gui-guider，並將其加進 Image 當中。
$ bitbake gui-guider
$ bitbake imx-image-multimedia
gui_guider 執行檔會在 tmp/work/armv8a-poky-linux/gui-guider/1.7.0-r0/images/usr/bin/ 中生成
五. 燒錄
5.1 燒錄至 SD Card
目前 NXP 所採用的映像檔格式為 wic 檔案，至開發環境中的 <Yocto Build>/tmp/deploy/images/<machine> 查看是否有 .wic 或 .wic.zst 檔案，在此以 SD Card 作為儲存裝置的燒錄方式為範例，想了解其他儲存裝置，請參考 【ATU Book-i.MX9系列】OP-Gyro ( i.MX93 ) 系統燒錄介紹這篇文章。
$ sudo dd if=<.wic> of=</dev/sdx> bs=1M stutas=progress conv=sync
5.2 複製 GUI-Guider
不管使用方法一或二編譯產生的 gui_guider 皆可放直接 copy 至 /usr/bin 目錄下，系統開機後便可直接執行。
$ cp gui_guider /mount/root/usr/bin/
六. 執行 GUI
最後將 OP-Gyro 接上 LVDS Panel 開機並執行 gui-guider，就可以看到 GUI 畫面了。
$ ./gui_guider
七. 結論
本篇文章會對 GUI Guider 進行介紹及使用說明，希望本篇文章的內容可以幫助到各位讀者更了解 OP-Gyro ( i.MX93 ) ，也懇請各位讀者多多支持 【ATU Book-i.MX9系列】OP-Gyro ( i.MX93 ) 的系列博文。若未來讀者們有 i.MX 的相關問題歡迎隨時與世平集團做討論。
八. 參考資料
[1] https://www.nxp.com/design/software/development-software/gui-guider:GUI-GUIDER
[2] https://docs.nxp.com/bundle/GUIGUIDERUG_1.7.0/page/topics/welcome.html
[3] https://community.nxp.com/t5/i-MX-Processors-Knowledge-Base/Build-GUI-Guider-projects-for-iMX93-BSP-6-1-1-1-1-0/ta-p/1707656
評論