LVGL新增符號 (GUI Guider 1.7.0)

使用內建符號參考此處

軟體：

ARDUINO IDE 2.3.2

LVGL 8.3.11

NXP GUI Guider 1.7.0

硬體：

ESP32-C3

3.5" 480x320 TFT, ST7796U+GT911

LVGL文件連結

1. 產生符號
1-1 前往https://fontawesome.com/，搜尋要自建的符號，找了兩個測試

記下circle-info的Unnicode是f05a，另外一個是f002

1-2 下載FontAwesome.woff字型

1-3 前往https://lvgl.io/tools/fontconverter，轉換字型

Name欄位輸入一個名稱，轉換後內容會成為檔名(如my_symbol.c)，並且在.c中會用在#define和變數名，define會固定為大寫(如#define MY_SYMBOL 1)，變數名會跟著內容走(如const lv_font_t my_symbol)所以不要輸入全大寫的名稱，不然又定義又變數的，編譯時會出錯

Size欄位輸入要顯示的大小

Bpp欄位越高越清晰，但資料量也會跟著上升

1Bpp

4Bpp

TTF/WoFF file選擇剛下載的FontAwesome.woff字型

Range欄位輸入剛記下的f05a與f002，16進制加上0x，以英數逗點為分隔如0xf05a,0xf002，使用範圍為0xf05a-0xf05f，中間使用減號

按下Convert，轉換完成後自動下載my_symbol.c

2. 使用符號

2-1 前往https://www.cogsci.ed.ac.uk/~richard/utf-8.cgi，Unicode轉UTF8

輸入f05a和f002，分別得到EF 81 9A和EF 80 82

2-2 GUI Guider程式設計

使用的組件

在screen輸入自定義程式碼

宣告字型

LV_FONT_DECLARE(my_symbol) 或 extern lv_font_t my_symbol;

更換label_1使用的字型

lv_obj_set_style_text_font(ui->screen_label_1, &my_symbol, LV_PART_MAIN|LV_STATE_DEFAULT);

顯示新增的符號，帶入UTF8值

lv_label_set_text(ui->screen_label_1, "\xEF\x81\x9A" "\xEF\x80\x82");

2-3 模擬

2-4 實做

LVGL使用內建符號 (GUI Guider 1.7.0)

使用新增符號參考此處

LVGL內建符號

GUI Guider操作

1. 使用的組件

2. 在screen加入自定義程式碼

Function Code欄位加入程式碼

lv_obj_set_style_bg_img_src(ui->screen_btn_1, SET_SYMBOL, 0);

lv_label_set_text(ui->screen_label_1, SET_SYMBOL);

3. 模擬畫面

#include欄位加入程式碼

#define SET_SYMBOL LV_SYMBOL_OK

#include欄位加入程式碼

#define SET_SYMBOL LV_SYMBOL_OK "Apply"

#include欄位加入程式碼

#define SET_SYMBOL LV_SYMBOL_OK LV_SYMBOL_WIFI LV_SYMBOL_PLAY

參考：https://docs.lvgl.io/latest/en/html/overview/font.html