LVGL và Robot Mochi: Xây dựng giao diện cảm xúc cho thiết bị nhúng - Phần 1: Sức mạnh của LVGL trong lập trình UI/UX

Trong các sản phẩm nhúng nhỏ như robot để bàn, đồng hồ thông minh, thiết bị IoT, máy đo cầm tay hay màn hình điều khiển, phần giao diện không chỉ là “hiển thị vài dòng chữ”. Một giao diện tốt giúp thiết bị dễ dùng hơn, có cảm xúc hơn và trông giống một sản phẩm hoàn chỉnh hơn.

Vậy LVGL là gì?

LVGL là viết tắt của "Light and Versatile Graphics Library". Đây là một thư viện đồ họa mã nguồn mở viết bằng C, được thiết kế để tạo giao diện người dùng cho các thiết bị nhúng như MCU, MPU, màn hình TFT, màn OLED, màn cảm ứng và nhiều loại display khác.

Có thể hình dung đơn giản thế này: nếu driver như ST7789, ILI9341, GC9A01 hay SSD1306 chịu trách nhiệm “đẩy pixel ra màn hình”, thì LVGL là lớp phía trên giúp mình xây giao diện dễ hơn. Thay vì tự vẽ từng hình chữ nhật, dòng text, nút bấm hay animation, bạn có thể dùng sẵn label, button, image, slider, list, chart, screen, style và animation.

Với người đã từng dùng Qt, có thể hình dung LVGL giống một framework UI thu nhỏ dành cho embedded. Nó không mạnh và nặng như Qt, nhưng lại phù hợp hơn cho vi điều khiển có tài nguyên hạn chế.

LVGL đem lại trải nghiệm tuyệt vời cho người sử dụng và sự thuận tiện cho lập trình viên

Vì sao lập trình UI cho chip lại khó?

Trên máy tính hoặc điện thoại, mình có hệ điều hành mạnh, RAM lớn, GPU tốt và framework UI đầy đủ. Còn trên vi điều khiển, gần như tài nguyên nào cũng phải tính kỹ hơn.

Một board ESP32, STM32 hay RP2040 thường chỉ có một lượng RAM nhất định. Màn hình có thể dùng SPI hoặc I2C; tốc độ truyền dữ liệu không quá cao. Nếu màn hình lớn hơn, ví dụ TFT 240x240, 320x240 hoặc 480x320, việc cập nhật toàn màn hình liên tục sẽ tốn nhiều tài nguyên đáng kể.

Nếu tự viết UI từ đầu, bạn sẽ phải xử lý khá nhiều thứ: vẽ text và icon, quản lý màn hình, refresh vùng thay đổi, chạy animation, đọc touch, giữ state và tối ưu bộ nhớ. Với project nhỏ thì còn ổn, nhưng chỉ cần thêm vài màn hình là code rất dễ rối.

LVGL giúp giải quyết vấn đề này bằng cách cung cấp một lớp giao diện có cấu trúc rõ ràng hơn.

LVGL nằm ở đâu trong hệ thống hiển thị?

Một hệ thống hiển thị nhúng thường có nhiều lớp.

LVGL trong hệ thống hiển thị (UI/UX)

Ở dưới cùng là phần cứng: chip điều khiển, màn hình, bus SPI/I2C/RGB/MIPI, cảm ứng, đèn nền và nguồn cấp.

Phía trên là driver màn hình. Ví dụ: ST7789, ILI9341, GC9A01, SSD1306 là các chip hoặc controller màn hình phổ biến. Driver có nhiệm vụ khởi tạo màn hình và gửi dữ liệu pixel đến đúng nơi.

Phía trên driver là lớp graphics hoặc UI. Đây là nơi LVGL hoạt động. LVGL không thay thế hoàn toàn driver màn hình. Nó cần một hàm flush để gửi vùng ảnh đã render xuống driver. Nói cách khác, LVGL tạo ra nội dung giao diện, còn driver màn hình chịu trách nhiệm đưa nội dung đó ra phần cứng thật.

Với Mochi robot, kiến trúc có thể hình dung như sau:

ESP32 / STM32 / RP2040 → Display driver, ví dụ ST7789 hoặc SSD1306 → LVGL → Mochi UI: khuôn mặt, biểu cảm, icon pin, menu, trạng thái kết nối

Cách tách lớp này giúp project dễ mở rộng hơn. Khi đổi màn hình, bạn thay driver ở dưới; khi đổi giao diện, bạn chỉnh phần LVGL ở trên.

LVGL có thể dùng với những dòng chip nào?

LVGL được thiết kế theo hướng độc lập với phần cứng, vì vậy có thể port sang nhiều dòng chip khác nhau. Những lựa chọn phổ biến gồm ESP32, STM32, NXP, Renesas, RP2040, Nordic hoặc các hệ MPU chạy Linux.

LVGL có thể tương thích cho nhiều dòng chip khác nhau

Với ESP32, LVGL thường được dùng trong các project có màn TFT màu, màn cảm ứng hoặc giao diện điều khiển nhỏ. ESP32-S3 đặc biệt phù hợp hơn ESP32-C3 nếu cần UI màu, animation mượt hơn hoặc màn hình có độ phân giải cao hơn, vì ESP32-S3 có tài nguyên tốt hơn và thường được dùng cho các ứng dụng display/AIoT.

Tuy nhiên, điều này không có nghĩa là ESP32-C3 không dùng được LVGL. Với màn hình nhỏ, UI đơn giản, ít widget và tối ưu buffer hợp lý, ESP32-C3 vẫn có thể chạy các giao diện cơ bản. Chỉ cần tránh kỳ vọng quá cao như animation phức tạp, nhiều layer, ảnh lớn hoặc refresh toàn màn hình liên tục.

LVGL có phù hợp với OLED 128x64 không?

Với màn OLED 128x64 như SSD1306, LVGL vẫn có thể dùng, nhưng cần cân nhắc cẩn thận. Nếu project chỉ hiển thị icon đơn giản, text ngắn hoặc animation bitmap, đôi khi dùng thư viện nhẹ hơn như U8g2 hoặc Adafruit SSD1306 sẽ đơn giản hơn.

Nhưng nếu bạn muốn xây dựng kiến trúc UI dài hạn cho Mochi, LVGL vẫn đáng thử. Lý do là sau này Mochi có thể không chỉ dùng OLED 128x64. Bạn có thể nâng cấp lên TFT màu 1.28 inch, 1.69 inch, 2.0 inch hoặc màn tròn GC9A01. Khi đó, LVGL sẽ có lợi thế rõ ràng hơn vì nó hỗ trợ style, screen, animation, image và input tốt hơn.

Nói ngắn gọn: với OLED nhỏ, LVGL không bắt buộc. Với Mochi phiên bản có màn màu hoặc UI phức tạp hơn, LVGL rất đáng dùng.

Đọc thêm liên quan

• LVGL và giao diện cảm xúc Mochi, phần 2
• Hiển thị GIF trên ESP32 với LVGL
• Embedded UI cho thiết bị nhỏ
• State machine cảm xúc của Mochi