Phần 3: Lập trình giao diện người dùng với LVGL

1. Giới thiệu về thư viện LVGL

LVGL (Light and Versatile Graphics Library) là một thư viện mã nguồn mở được thiết kế để tạo giao diện người dùng đồ họa trên các hệ thống nhúng. Thư viện này hỗ trợ nhiều loại màn hình và cảm ứng, giúp lập trình viên dễ dàng tạo ra các giao diện đẹp mắt và thân thiện với người dùng. LVGL được tối ưu hóa cho hiệu suất và bộ nhớ, phù hợp với các vi điều khiển như ESP32.

2. Cấu hình LVGL cho dự án

Để sử dụng LVGL trong dự án của bạn, trước tiên bạn cần cài đặt thư viện này. Dưới đây là các bước để cấu hình LVGL cho dự án ESP32 của bạn:

Truy cập vào thư viện LVGL trên GitHub và tải về mã nguồn:

git clone https://github.com/lvgl/lvgl.git

Thêm thư viện LVGL vào thư mục của dự án ESP32 của bạn.
Mở Arduino IDE và thêm đường dẫn đến thư viện LVGL trong phần Preferences.
Cài đặt các thư viện phụ thuộc như TFT_eSPI hoặc Adafruit_GFX, nếu cần thiết.

Sau khi đã cài đặt, bạn cần cấu hình LVGL trong mã nguồn của dự án:

#include <lvgl.h>
#include <TFT_eSPI.h>

TFT_eSPI tft = TFT_eSPI(); // Khởi tạo màn hình TFT
lv_disp_buf_t disp_buf; // Buffer cho hiển thị

Tiếp theo, khởi tạo LVGL và cấu hình màn hình:

void setup() {
    lv_init();
    tft.begin();
    tft.setRotation(1);
    lv_disp_buf_init(&disp_buf, buf1, NULL, LV_HOR_RES_MAX * 10);
    lv_disp_drv_t disp_drv;
    lv_disp_drv_init(&disp_drv);
    disp_drv.buffer = &disp_buf;
    disp_drv.flush_cb = my_flush; // Hàm vẽ
    lv_disp_drv_register(&disp_drv);
}

3. Tạo một giao diện người dùng cơ bản

Bây giờ, chúng ta sẽ tạo một giao diện người dùng cơ bản. Bạn có thể bắt đầu bằng cách tạo một màn hình đơn giản với một tiêu đề và một văn bản.

void create_basic_ui() {
    lv_obj_t * label = lv_label_create(lv_scr_act(), NULL);
    lv_label_set_text(label, "Chào mừng đến với Dashboard IoT!");
    lv_obj_align(label, NULL, LV_ALIGN_CENTER, 0, 0);
}

Gọi hàm create_basic_ui() trong hàm loop() để hiển thị giao diện.

4. Thêm các widget (nút, thanh trượt,...) vào giao diện

LVGL hỗ trợ nhiều loại widget khác nhau. Bạn có thể thêm nút và thanh trượt vào giao diện như sau:

void create_widgets() {
    lv_obj_t * btn = lv_btn_create(lv_scr_act(), NULL);
    lv_obj_set_size(btn, 120, 50);
    lv_obj_align(btn, NULL, LV_ALIGN_CENTER, 0, 40);
    lv_obj_t * btn_label = lv_label_create(btn, NULL);
    lv_label_set_text(btn_label, "Nhấn tôi!");

    lv_obj_t * slider = lv_slider_create(lv_scr_act(), NULL);
    lv_obj_set_width(slider, 200);
    lv_obj_align(slider, NULL, LV_ALIGN_CENTER, 0, 100);
    lv_slider_set_value(slider, 50, LV_ANIM_OFF);
}

Gọi create_widgets() trong hàm loop() để hiển thị các widget này.

5. Tùy chỉnh giao diện với màu sắc và kiểu dáng

Để tạo một giao diện hấp dẫn hơn, bạn có thể tùy chỉnh màu sắc và kiểu dáng cho các widget. Dưới đây là cách thay đổi màu sắc cho nút và thanh trượt:

void style_widgets() {
    static lv_style_t btn_style;
    lv_style_init(&btn_style);
    lv_style_set_bg_color(&btn_style, LV_STATE_DEFAULT, LV_COLOR_BLUE);
    lv_style_set_text_color(&btn_style, LV_STATE_DEFAULT, LV_COLOR_WHITE);
    lv_obj_add_style(btn, LV_BTN_PART_MAIN, &btn_style);

    static lv_style_t slider_style;
    lv_style_init(&slider_style);
    lv_style_set_bg_color(&slider_style, LV_STATE_DEFAULT, LV_COLOR_GRAY);
    lv_obj_add_style(slider, LV_SLIDER_PART_BG, &slider_style);
}

Gọi style_widgets() trong hàm setup() để áp dụng các kiểu dáng cho widget.

6. Lưu và tải giao diện

Để lưu và tải giao diện, bạn có thể sử dụng chức năng lưu trữ và phục hồi trạng thái của widget. Dưới đây là một ví dụ đơn giản:

void save_ui() {
    lv_obj_t * slider = lv_slider_create(lv_scr_act(), NULL);
    lv_slider_set_value(slider, 50, LV_ANIM_OFF);
    lv_obj_set_user_data(slider, (void*)50); // Lưu giá trị slider
}

void load_ui() {
    lv_obj_t * slider = lv_slider_create(lv_scr_act(), NULL);
    int saved_value = (int)lv_obj_get_user_data(slider); // Tải giá trị slider
    lv_slider_set_value(slider, saved_value, LV_ANIM_OFF);
}

Gọi save_ui() và load_ui() tại các thời điểm thích hợp trong mã của bạn.

Lưu ý: Hãy luôn kiểm tra tài liệu của LVGL để hiểu rõ hơn về các widget và cách tùy chỉnh chúng. Điều này sẽ giúp bạn tạo ra giao diện đẹp mắt và hiệu quả hơn.

Với hướng dẫn này, bạn đã có thể tạo ra một giao diện người dùng cơ bản với LVGL trên ESP32. Hãy thử nghiệm và sáng tạo thêm với các widget và kiểu dáng để làm cho dashboard IoT của bạn trở nên độc đáo và thú vị hơn!