ESP32 開發筆記（十二）LittlevGL 添加自定義字體和物理按鍵

LittlevGL 添加自定義字體
獲取字庫 ttf 文件
可以從一些網站上獲取字庫文件，比如
請注意字體許可證

生成源文件
使用 LittlevGL 提供的字庫文件轉換工具，將 ttf 字庫文件轉換為源文件。
將生成的源文件添加到 LittlevGL 工程中，添加以下代碼聲明字體：
extern lv_font_t my_font_name;
1
或者

LV_FONT_DECLARE(my_font_name);
1
源代碼中使用這個字體可以：

style.text.font = &my_font_name;
1
或者將這個字體添加到當前使用的字體中：

lv_font_add(&my_font_name, &current_use);
1
例如：

LV_FONT_DECLARE(my_font_name);

void lv_chinese_fonts1(void)
{
/*Concatenate the fonts into one*/
// lv_font_add(&arial_cyrillic_20, &arial_ascii_20); 相同高度才可以添加到一起
// lv_font_add(&arial_math_20, &arial_ascii_20);

/* 創建一個新的樣式，並且修改新樣式的文本字體 */
static lv_style_t style1;
lv_style_copy(&style1, &lv_style_plain);
style1.text.font = &my_font_name; /* 設置自定義字體 */

/*Create a label and set new text*/
lv_obj_t * label = lv_label_create(lv_scr_act(), NULL); /* 創建標簽 */
lv_obj_set_pos(label, 10, 10); /* 設置相對位置 */
lv_label_set_style(label, &style1); /* 設置樣式 */
lv_label_set_text(label, "Hello World!\n 世界你好,我是littleVGL!"); /* 顯示漢字 */
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
LittlevGL 添加自定義符號
流程：

尋找合適的 ttf 文件（包含目標符號，可在 linux 下通過 FontForge 軟件打開 ttf 文件，查看包含那些字符）
使用 LittlevGL 提供的字庫文件轉換工具，將選中的符號轉換為 c 源文件。在轉換的頁面 Range 中輸入目標符號的 Unicode 編碼，怎么查詢可以通過百度
將源文件添加到工程中，和上面添加字體類似，首先聲明字體，然后添加到字體中或者直接使用。
定義一個宏指向這個目標符號，宏的內容需要為 UTF-8編碼，通過 Unicode和UTF編碼轉換 可以進行轉換
例如：
這樣就需要在程序中：

/* MACROS */
#define SYMBOL_TEMP "\xE2\x84\x83" // E28483

/* STATIC VARIABLES */
LV_FONT_DECLARE(tempreture_symbol_40);

/* Add font to current font */
lv_font_add(&tempreture_symbol_40, &lv_font_dejavu_40);

/* Use this symbol */
lv_label_set_text(temp_l, "21.5 "SYMBOL_TEMP);
1
2
3
4
5
6
7
8
9
10
11
LittlevGL 添加物理按鍵
注冊物理按鍵驅動：

uint8_t my_btn_read()
{
if (HAL_GPIO_ReadPin(GPIOA, GPIO_PIN_0) == 0)
{
return 1;
}
else
{
return 0;
}
}
bool my_input_read(lv_indev_data_t *data)
{
static int8_t last_btn = 0; /* Store the last pressed button */
int8_t btn_pr = my_btn_read(); /* Get the ID (0,1,2...) of the pressed button */

if (btn_pr > 0)
{ /* Is there a button press? */
last_btn = btn_pr; /* Save the ID of the pressed button */
data->state = LV_INDEV_STATE_PR; /* Set the pressed state */
}
else
{
data->state = LV_INDEV_STATE_REL; /* Set the released state */
}

data->btn = last_btn; /* Set the last button */

return false; /* No buffering so no more data read */
}
void my_button_init(void)
{
static lv_indev_t *indev;
lv_indev_drv_t indev_drv;

lv_indev_drv_init(&indev_drv);

indev_drv.read = my_input_read;
indev_drv.type = LV_INDEV_TYPE_BUTTON;
indev = lv_indev_drv_register(&indev_drv);

/*points_array: these points will be assigned to the buttons to press a specific point on the screen.*/
static lv_point_t points_array[] = {{20, 20}};
lv_indev_set_button_points(indev, points_array);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
創建一個按鍵，保證上面的點在按鈕的區域內：

static lv_obj_t *btn = lv_btn_create(lv_scr_act(), NULL);
lv_obj_set_size(btn, 40, 40);
lv_obj_set_pos(btn, 0, 0);
lv_btn_set_action(btn, LV_BTN_ACTION_CLICK, btn_click_action);
---------------------