MakeXYZ Fun

[ESP32] Bắt đầu với ESP32 và LVGL: Hiển thị "Hello World"

Tony Phạm -

Bạn đã quen thuộc với Arduino và muốn nâng cấp dự án của mình lên một tầm cao mới? Hãy cùng khám phá ESP32 và thư viện đồ họa LVGL! Trong bài viết này, chúng ta sẽ tạo một ứng dụng đơn giản hiển thị "Hello World" trên màn hình, sử dụng sức mạnh của ESP32 và khả năng tạo giao diện đẹp mắt của LVGL.

ESP32: Siêu sao trong thế giới vi điều khiển

ESP32 là một bước tiến vượt bậc so với Arduino truyền thống:

  • Tốc độ xử lý lên đến 240 MHz
  • Wi-Fi và Bluetooth tích hợp
  • Nhiều GPIO và tính năng ngoại vi
  • Hỗ trợ đa nhiệm với FreeRTOS

Với những tính năng này, ESP32 mở ra vô vàn khả năng cho các dự án IoT và ứng dụng đồ họa phức tạp.

LVGL: Đồ họa đẹp mắt cho thiết bị nhúng

LVGL (Light and Versatile Graphics Library) là thư viện đồ họa mã nguồn mở, được thiết kế đặc biệt cho các vi điều khiển. Nó cung cấp:

  • Giao diện người dùng mượt mà và hấp dẫn
  • Nhiều widget sẵn có (nút bấm, biểu đồ, bàn phím,...)
  • Hỗ trợ cảm ứng
  • Khả năng tùy chỉnh cao

Các bước thực hiện

Bước 1. Chuẩn bị môi trường phát triển

Trước khi bắt đầu, hãy chuẩn bị môi trường phát triển:

  1. Cài đặt Arduino IDE từ arduino.cc
  2. Thêm hỗ trợ ESP32:
    • Mở Preferences, thêm URL: https://dl.espressif.com/dl/package_esp32_index.json
    • Vào Tools > Board > Boards Manager, tìm và cài đặt "esp32"
  3. Cài đặt thư viện:
    • Vào Sketch > Include Library > Manage Libraries
    • Tìm và cài đặt "lvgl" và "Arduino_GFX_Library"

Bước 2. Nạp code mẫu: Hello World với LVGL

Đây là code mẫu để hiển thị "Hello World" trên màn hình ILI9341 sử dụng ESP32 và LVGL:

#include <lvgl.h>
#include <Arduino_GFX_Library.h>

#define SCREEN_WIDTH 320
#define SCREEN_HEIGHT 240

static lv_disp_draw_buf_t draw_buf;
static lv_color_t buf[SCREEN_WIDTH * 10];

Arduino_ESP32SPI bus(16, 17, 18, 19); // DC, CS, SCK, MOSI
Arduino_ILI9341 display(&bus, 5); // RST

void my_disp_flush(lv_disp_drv_t *disp, const lv_area_t *area, lv_color_t *color_p) {
    uint32_t w = (area->x2 - area->x1 + 1);
    uint32_t h = (area->y2 - area->y1 + 1);

    display.startWrite();
    display.setAddrWindow(area->x1, area->y1, w, h);
    display.pushColors((uint16_t *)&color_p->full, w * h, true);
    display.endWrite();

    lv_disp_flush_ready(disp);
}

void setup() {
    Serial.begin(115200);

    display.begin();
    display.fillScreen(BLACK);

    lv_init();
    lv_disp_draw_buf_init(&draw_buf, buf, NULL, SCREEN_WIDTH * 10);

    static lv_disp_drv_t disp_drv;
    lv_disp_drv_init(&disp_drv);
    disp_drv.hor_res = SCREEN_WIDTH;
    disp_drv.ver_res = SCREEN_HEIGHT;
    disp_drv.flush_cb = my_disp_flush;
    disp_drv.draw_buf = &draw_buf;
    lv_disp_drv_register(&disp_drv);

    lv_obj_t *label = lv_label_create(lv_scr_act());
    lv_label_set_text(label, "Hello World!");
    lv_obj_align(label, LV_ALIGN_CENTER, 0, 0);
}

void loop() {
    lv_timer_handler();
    delay(5);
}

Giải thích code

  1. Khai báo và cấu hình:

    • Chúng ta sử dụng LVGL và Arduino_GFX_Library.
    • Định nghĩa kích thước màn hình (320x240 pixels).

  2. Khởi tạo buffer:

    • Tạo buffer cho LVGL với kích thước SCREEN_WIDTH * 10 pixel.

  3. Cấu hình màn hình:

    • Sử dụng Arduino_ESP32SPI và Arduino_ILI9341 cho màn hình ILI9341.
    • Hàm my_disp_flush định nghĩa cách vẽ lên màn hình.

  4. Setup:

    • Khởi tạo Serial, display và LVGL.
    • Cấu hình driver hiển thị cho LVGL.
    • Tạo label "Hello World!" và đặt ở giữa màn hình.

  5. Loop:

    • Gọi lv_timer_handler() để xử lý các tác vụ LVGL.

Kết nối phần cứng

Kết nối màn hình ILI9341 với ESP32 theo sơ đồ sau:

  • DC: GPIO 16
  • CS: GPIO 17
  • SCK: GPIO 18
  • MOSI: GPIO 19
  • RST: GPIO 5

Chạy ứng dụng

  1. Kết nối ESP32 với máy tính.
  2. Chọn board và cổng COM phù hợp trong Arduino IDE.
  3. Upload code.
  4. Mở Serial Monitor để xem thông báo debug (nếu cần).

Nếu mọi thứ đều đúng, bạn sẽ thấy dòng chữ "Hello World!" hiển thị ở giữa màn hình ILI9341.

Kết luận

Chúc mừng! Bạn đã tạo thành công ứng dụng đầu tiên sử dụng ESP32 và LVGL. Đây mới chỉ là bước đầu tiên trong hành trình khám phá thế giới của giao diện đồ họa trên các thiết bị nhúng. Trong các bài viết tiếp theo, chúng ta sẽ tìm hiểu cách tạo giao diện phức tạp hơn, xử lý tương tác người dùng và tối ưu hiệu suất cho ứng dụng của bạn.

Hãy thử nghiệm với code mẫu này và đừng ngần ngại chia sẻ kết quả của bạn trong phần bình luận nhé!