lvgl 使用記錄

###### tags: `Embedded` # lvgl 使用記錄 [TOC] 如何在實際的硬體上部署？~~請參考 https://hackmd.io/@st9540808/NUCLEO-H755ZI-Q#LVGL-%E4%B8%AD%E6%96%87%E5%AD%97%E9%AB%94~~ 請參考底下 ## 安裝 simulator (MacOS 系統) 首先需要安裝 Eclipse IDE for C/C++ Developers 下載 [lvgl/lv_port_pc_eclipse](https://github.com/lvgl/lv_port_pc_eclipse)，可參考 github 中的教學，下載完之後在 eclipse 裡面使用 import 匯入整個剛剛下載的資料夾。 > 目前 simulator 搭載的 lvgl 版本為 8.3.3 > [time=Fri, Dec 9, 2022 10:53 AM] 安裝 SDL2 ``` brew install SDL2 ``` 安裝完 SDL2 之後，在專案上點右鍵選取 properties，之後把下列路徑加到 includes 跟 libraries 的設定中。 :warning: 以下 sdl2, libpng 版本號碼需要使用者自己手動確認 ``` /opt/homebrew/Cellar/sdl2/2.26.1/include /opt/homebrew/Cellar/libpng/1.6.39/include /opt/homebrew/Cellar/libpng/1.6.39/lib /opt/homebrew/Cellar/sdl2/2.26.1/lib ``` 如下圖所示 ![](https://i.imgur.com/xstpRFD.jpg) ![](https://i.imgur.com/gW3CZgM.jpg) ### simulator 實際運行到 Debug 目錄中點擊 lv_sim_eclipse_sdl，如下圖 ![](https://i.imgur.com/Buxy7sG.png) 點擊後就會執行 simulator，同時會開啟終端機顯示輸出 (解析度已經改成 800x480) ![](https://i.imgur.com/o2LBGaB.jpg) 當人機專案很大時，可能需要在 lv_conf.h 調整動態記憶體大小： ```c #define LV_MEM_SIZE (156 * 1024U) /*[bytes]*/ ``` 如果滑動很 lag，可開啟編譯器最佳化例如 `-O2`。 ## 安裝 simulator (Windows 系統) 目前已不推薦在 Windows 上使用 Eclipse IDE，是用了很久仍然沒辦法完整編譯，因此轉而使用 Visual Studio 建置的專案。下載 [lvgl/lv_port_win_visual_studio ](https://github.com/lvgl/lv_port_win_visual_studio) > 目前 simulator 搭載的 lvgl 版本為 8.3.3 > [time=Fri, Dec 10, 2022 10:53 AM] 實際測試可以用 Visual Studio 2022 Community 開啟 https://visualstudio.microsoft.com/zh-hant/vs/ 下載完之後用 Visual Studio 開啟 lv_port_win_visual_studio資料夾中的 sln 檔，並將 LVGL.Simulator 設成啟動專案，如下圖 ![](https://i.imgur.com/2H9lvXr.png) 按下 "本機 Windows 偵錯工具啟動" simulator ![](https://i.imgur.com/l5vg3xR.png) ### simulator 實際運行 ![](https://i.imgur.com/XLW4PmQ.png) ## 真實硬體部屬使用 MCU 為 STM32H755，設定核心頻率為 480 Mhz，並開啟 I-Cache 與 D-Cache，編譯器最佳化使用 `-O1` ## 移植 ```c void SysTick_Handler(void) { /* USER CODE BEGIN SysTick_IRQn 0 */ /* USER CODE END SysTick_IRQn 0 */ HAL_IncTick(); #if (INCLUDE_xTaskGetSchedulerState == 1 ) if (xTaskGetSchedulerState() != taskSCHEDULER_NOT_STARTED) { #endif /* INCLUDE_xTaskGetSchedulerState */ xPortSysTickHandler(); #if (INCLUDE_xTaskGetSchedulerState == 1 ) } #endif /* INCLUDE_xTaskGetSchedulerState */ /* USER CODE BEGIN SysTick_IRQn 1 */ lv_tick_inc(1); /* USER CODE END SysTick_IRQn 1 */ } ``` ## benchmark ```c #include "lv_port_disp.h" #include "lv_port_indev.h" #include "lvgl.h" ... lv_init(); lv_port_disp_init(); lv_port_indev_init(); lv_demo_benchmark(); while (1) { lv_task_handler(); osDelay(2); } ``` ### pixel-by-pixel benchmark 若不使用 DMA，則繪圖跟傳輸像素無法平行，測出來的 FPS 也會變低 ![](https://i.imgur.com/vfIYjGd.jpg) ### MDMA benchmark 使用 MDMA 讓 lvgl 繪圖跟傳輸像素平行執行 ![](https://i.imgur.com/nWph90B.jpg) ### Application benchmark - `LV_DEF_REFR_PERIOD`: 9.0.0 之後的更新週期 - `LV_USE_PERF_MONITOR`: CPU 使用率, FPS - `LV_USE_MEM_MONITOR`: 記憶體使用率 ## 字體 ascii ```! !"#$%&\'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\\]^_`abcdefghijklmnopqrstuvwxyz{|}~ ``` 標點、特殊符號 ``` ，。、？㎜ ``` 中文 https://github.com/kaienfr/Font/blob/master/learnfiles/chinese%E7%AE%80%E7%B9%81%E5%B8%B8%E7%94%A8%E5%AD%97%E8%A1%A8.txt 特殊符號 https://docs.lvgl.io/master/overview/font.html?highlight=font#add-new-symbols ```c /*------------------------------- * Symbols from "normal" font *-----------------------------*/ #if !defined LV_SYMBOL_BULLET #define LV_SYMBOL_BULLET "\xE2\x80\xA2" /*20042, 0x2022*/ #endif /*------------------------------- * Symbols from FontAwesome font *-----------------------------*/ /*In the font converter use this list as range: 61441, 61448, 61451, 61452, 61453, 61457, 61459, 61461, 61465, 61468, 61473, 61478, 61479, 61480, 61502, 61507, 61512, 61515, 61516, 61517, 61521, 61522, 61523, 61524, 61543, 61544, 61550, 61552, 61553, 61556, 61559, 61560, 61561, 61563, 61587, 61589, 61636, 61637, 61639, 61641, 61664, 61671, 61674, 61683, 61724, 61732, 61787, 61931, 62016, 62017, 62018, 62019, 62020, 62087, 62099, 62189, 62212, 62810, 63426, 63650 */ ``` ### `notosans_24` 1. notosans-TC medium: 简繁常用字、標點 2. NotoSans-CondensedSemiBold: abc123、特殊符號 3. FontAwesome5-Solid+Brands+Regular: Symbols from FontAwesome font ## 多國語言 i18n 如何在 lvgl 的介面中使用兩種以上的語言？答案是使用 [lvgl/lv_i18n](https://github.com/lvgl/lv_i18n) 這個專案，使用上不需要 clone 下來！首先在 wsl 中安裝 nodejs 跟 npm ```bash $ sudo apt install nodejs npm ``` 接下來安裝 lvgl/lv_i18n，`-g` 代表全域安裝 ``` $ sudo npm i lv_i18n -g ``` 最後只需要兩個命令就能使用多國語言！ ``` . └──translations ├── en.yml └── zh-TW.yml ``` ```awk! awk -v FS="" -v OFS="\t" '{for(i=1;i<=NF;i++) char[$i]++} END { for(i in char) printf("%c",i)}' BuildAllTargets.cmd ./LVGL.Simulator/translations/zh-TW.yml ``` ## Visual Studio 小技巧在解決方案中加入檔案 ![](https://i.imgur.com/uDOnGBo.png) 在解決方案中加入新的 include path https://stackoverflow.com/questions/19415521/cannot-open-include-file-with-visual-studio ![](https://i.imgur.com/Z2Ht27l.png)

Read more

NUCLEO-H755ZI-Q 開發紀錄

STM32F4 開發紀錄

STM32H7 開發紀錄

influxDB + OpenTelemetry