###### 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

如下圖所示



### simulator 實際運行

到 Debug 目錄中點擊 lv_sim_eclipse_sdl，如下圖


點擊後就會執行 simulator，同時會開啟終端機顯示輸出 (解析度已經改成 800x480)


當人機專案很大時，可能需要在 lv_conf.h 調整動態記憶體大小：

    #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 設成啟動專案，如下圖


按下 "本機 Windows 偵錯工具啟動" simulator


### simulator 實際運行


## 真實硬體部屬

使用 MCU 為 STM32H755，設定核心頻率為 480 Mhz，並開啟 I-Cache 與 D-Cache，編譯器最佳化使用 `-O1`

## 移植

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

#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 也會變低


### MDMA benchmark

使用 MDMA 讓 lvgl 繪圖跟傳輸像素平行執行


### 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

/*-------------------------------
 * 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

$ sudo apt install nodejs npm

接下來安裝 lvgl/lv_i18n，`-g` 代表全域安裝

$ sudo npm i lv_i18n -g

最後只需要兩個命令就能使用多國語言！

.
└──translations
    ├── en.yml
    └── zh-TW.yml

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 小技巧

在解決方案中加入檔案


在解決方案中加入新的 include path
https://stackoverflow.com/questions/19415521/cannot-open-include-file-with-visual-studio