Gần đây, tôi đã trải nghiệm một Màn hình Vàng Giá Rẻ (Cheap Yellow Display – CYD) sử dụng ESP32. Chỉ với khoảng 20 đô la, bạn có một bo mạch ESP32 kết nối với màn hình, tích hợp khe cắm thẻ SD và các chân GPIO mở rộng để tùy chỉnh. Mặc dù ESPHome có sẵn một số công cụ khá tốt để tạo giao diện người dùng (UI), nhưng gần đây, nó đã bổ sung hỗ trợ cho Thư viện Đồ họa Nhẹ và Đa năng (Light and Versatile Graphics Library – LVGL). Đây là một thư viện đồ họa với các widget được xây dựng sẵn, mang lại giao diện đẹp mắt hơn nhiều so với bất kỳ thứ gì tôi có thể tự tạo trong ESPHome.
Tôi đã xây dựng một dashboard theo dõi PC với ESP32 để điều khiển các thiết bị nhà thông minh cục bộ bằng LVGL. Ban đầu, nó chỉ dùng để điều khiển đèn và phát lại đa phương tiện trong nhà tôi, nhưng giờ đây đã phát triển thành một dashboard theo dõi máy tính cá nhân. Vì màn hình này luôn nằm trên bàn làm việc của tôi, cạnh PC, nên việc tích hợp thêm tính năng này là hoàn toàn hợp lý. Giờ đây, tôi có thể xem thời gian khởi động cuối cùng, cửa sổ đang hoạt động, mức sử dụng bộ nhớ RAM và CPU, tất cả đều hiển thị trên màn hình nhỏ gọn này.
Tất nhiên, việc hiển thị cửa sổ đang hoạt động có thể không thực sự hữu ích khi máy tính của tôi nằm ngay trước mặt. Tuy nhiên, đây chỉ là một bằng chứng về khái niệm, cho thấy loại dữ liệu mà bạn có thể trích xuất và hiển thị. Trong bối cảnh của tôi, nó có thể không tối ưu, nhưng đối với bạn, độc giả, có thể có lý do để bạn muốn kéo thông tin cửa sổ đang hoạt động trên PC và hiển thị nó trên một dashboard tùy chỉnh. Hơn nữa, việc này yêu cầu một cách hiển thị dữ liệu hơi khác so với một số cảm biến khác, là cơ hội để trình bày một phương pháp hiển thị văn bản mới trên màn hình.
Để thực hiện dự án này, tôi sử dụng HASS.Agent trên Windows để gửi dữ liệu đến một máy chủ MQTT, cùng với ESPHome dưới dạng tiện ích bổ trợ trong Home Assistant. Khi kết hợp lại, dữ liệu sẽ di chuyển từ PC của tôi đến máy chủ MQTT, sau đó đến Home Assistant, và cuối cùng là đến CYD. Quá trình này khá ấn tượng, và khả năng tích hợp của Home Assistant và ESPHome dường như là vô tận.
Cơ chế hoạt động của các đoạn mã trong ESPHome
Và cách triển khai nút nhấn đầu tiên của chúng ta
Để thiết lập dashboard này, chúng ta sẽ giả định rằng bạn đã cài đặt HASS.Agent, đã kết nối nó với một MQTT broker, và bạn đã cài đặt ESPHome như một tiện ích bổ trợ cho Home Assistant. Nếu bạn đang sử dụng Home Assistant Container (thay vì HAOS), bạn có thể cài đặt ESPHome như một container riêng biệt, sau đó cài đặt tích hợp ESPHome trong Home Assistant để liên kết mọi thứ.
Màn hình Cheap Yellow Display hiển thị dashboard theo dõi CPU, RAM, và thời gian khởi động PC qua ESPHome và Home Assistant.
Nền tảng của dự án này sử dụng dự án ESPHome LVGL của Ryan Ewen trên GitHub. Dự án này đã chứng minh giá trị vô cùng to lớn trong việc giúp tôi học LVGL và hỗ trợ đáng kể trong suốt quá trình phát triển dashboard. Tôi đã tích hợp điều khiển đèn và điều khiển đa phương tiện, và bước tiếp theo là lấy dữ liệu từ Home Assistant để hiển thị trong các “thẻ” như bạn thấy ở trên. Các chỉ số này được hiển thị trên một trang riêng, và tôi có thể sử dụng các phím mũi tên ở phía dưới để di chuyển giữa các trang.
Đọc và hiển thị thời gian khởi động cuối cùng (Last Boot Time)
Để đọc thời gian khởi động cuối cùng, tôi tạo một text_sensor trong ESPHome đọc cảm biến “lastboot” từ thực thể MQTT của tôi. Nó có cấu trúc như sau, hãy đảm bảo bạn sử dụng đúng cấu trúc thụt lề:
- platform: homeassistant
id: pc_last_boot_raw
entity_id: sensor.desktop_73d9nef_lastboot
internal: true
on_value:
then:
- lvgl.widget.refresh: pc_last_boot_raw_onĐoạn mã này khá dễ hiểu, ngoại trừ phần “lvgl.widget.refresh”. Việc này được thực hiện vì màn hình sẽ vẽ các phần tử trước khi chúng được cung cấp các giá trị thực tế, do thiết bị khởi động nhanh hơn và hiển thị màn hình chính nhanh hơn so với việc kết nối mạng. Phần mã đó đảm bảo rằng nó sẽ làm mới widget “pc_last_boot_raw_on”, mà tôi sẽ giải thích tiếp theo.
widgets:
- button:
width: 232
height: 75
widgets:
- label:
id: pc_last_boot_raw_on
text: !lambda |-
if (id(pc_last_boot_raw).state.length() < 19)
return std::string("");
std::string ts = id(pc_last_boot_raw).state;
std::string date = ts.substr(0, 10);
std::string time = ts.substr(11, 8);
return date + "n" + time;
text_font: roboto_md
align: CENTER
- label:
id: pc_last_boot_raw_off
text: "PC off"
text_font: roboto_md
align: BOTTOM_LEFT
hidden: trueĐoạn mã trên có thể hơi khó theo dõi, vì vậy tôi sẽ giải thích cách nó hoạt động từ đầu đến cuối. “width” và “height” được lấy từ các widget nút nhấn 320×240 của Ewen, vì chúng đã được tính toán sẵn để vừa với một “nút nhấn rộng” trên màn hình này, cho phép ba hàng nút. Tiếp theo, chúng ta tạo một widget lồng nhau chứa hai nhãn riêng biệt: pc_last_boot_raw_on và pc_last_boot_raw_off. Tôi chưa tích hợp đúng logic cho nhãn thứ hai (và “hidden: true” ẩn nó khỏi màn hình), nhưng tôi sẽ giải thích chức năng của nó sau khi giải thích pc_last_boot_raw_on.
Trong pc_last_boot_raw_on, chúng ta sử dụng !lambda để xử lý văn bản từ text_sensor. Trong khi các cấu hình ESPHome được viết bằng YAML, các lambda báo cho ESPHome biết rằng khối văn bản tiếp theo là mã C++. Đây cũng là lý do chúng ta sử dụng |-, vì nó báo cho ESPHome coi khối thụt lề tiếp theo là văn bản thuần túy. Lambda rất mạnh mẽ trong ESPHome, vì bạn có thể cấu hình mọi thứ mình muốn bằng cú pháp YAML, sau đó chèn mã C++ bên trong các khối cụ thể để tùy chỉnh hành vi hoặc thay đổi động các phần tử.
Lambda này kiểm tra xem độ dài của khối có ngắn hơn 19 ký tự hay không. Đây là một cách “hack” nhỏ mà tôi có thể tối ưu hơn, nhưng HASS.Agent báo cáo thời gian khởi động theo định dạng 2025-06-20T10:12:29, có độ dài 19 ký tự. Về cơ bản, chúng ta đang kiểm tra tính hợp lệ của phản hồi để đảm bảo nó khớp với độ dài của kết quả mong đợi. Tốt hơn là nên thay đổi trạng thái bên ngoài khối và phản ứng phù hợp, nhưng cách này vẫn hoạt động và đặt khối thành "" nếu chúng ta nhận được một giá trị không mong muốn, giữ cho nó trống.
Màn hình ESP32 CYD hiển thị chính xác ngày giờ khởi động cuối cùng của PC được định dạng qua mã lambda trong ESPHome.
Tuy nhiên, nếu nó vượt qua kiểm tra, chúng ta sao chép giá trị của text_sensor (trạng thái “state”) vào một chuỗi tạm thời nội bộ, được gọi là ts. Trong C++ (và trong C), một chuỗi là một mảng ký tự động, vì vậy chúng ta có thể sao chép các phần tử của mảng vào một chuỗi khác (bằng cách tạo một chuỗi con substring) để tái tạo các phần mà chúng ta muốn giữ. Chúng ta cũng biết, vì chuỗi sẽ luôn có độ dài chuẩn, các vị trí của các ký tự chúng ta muốn trong mọi trường hợp. Chúng ta sử dụng phương thức “substr” để tạo một chuỗi con, yêu cầu nó bắt đầu từ vị trí 0 và lấy 10 ký tự tiếp theo để lưu vào chuỗi ngày date của chúng ta. Chúng ta làm tương tự để lấy thời gian, yêu cầu substring bắt đầu từ vị trí 11 (bỏ qua ký tự “T” trong chuỗi) và lấy 8 ký tự tiếp theo để lưu vào chuỗi thời gian time của chúng ta.
Cuối cùng, chúng ta trả về:
date + "n" + time"n" là một ký tự xuống dòng, và chúng ta phân tách date và time mà không có dấu ngoặc kép vì các biến đó đã đại diện cho các chuỗi. Dấu ngoặc kép biểu thị một chuỗi mà bạn đang nhập vào mã, vì vậy đoạn mã trên về cơ bản có nghĩa là “lấy biến từ date, nối một ký tự xuống dòng vào đó, sau đó nối biến từ time vào chuỗi tổng thể.”
Vì tất cả những điều này nằm trong khối “text”, ESPHome về cơ bản tạo nút với thông tin nói rằng, “tạo nút này, đặt giá trị ‘text’ mà nút yêu cầu thành đầu ra của bất kỳ đoạn mã này thực hiện.” Bằng cách này, chúng ta có thể hiển thị văn bản một cách động, thay vì cần đặt các giá trị tĩnh hoặc cố gắng đặt các giá trị động từ bên ngoài nơi chúng được tạo ban đầu.
Nhưng còn lvgl.widget.refresh: pc_last_boot_raw_on thì sao? Chúng ta đã đặt nhãn cho nút là “pc_last_boot_raw_on”, vì vậy về cơ bản chúng ta sẽ vẽ lại nút nếu nhận được một giá trị mới. Điều này cho phép nó cập nhật sau khi khởi động và hoạt động tốt với các cảm biến khác mà chúng ta sẽ nói đến tiếp theo.
Cảm biến ngày và giờ khởi động là cảm biến phức tạp nhất trong số tất cả chúng, vì vậy nếu bạn đã theo dõi đến đây, mọi thứ sẽ dễ dàng hơn nhiều.
Cấu hình theo dõi RAM, CPU và cửa sổ đang hoạt động
Những phần này đơn giản hơn
Chúng ta định nghĩa các text_sensor trong ESPHome để kéo dữ liệu từ Home Assistant chính xác theo cách chúng ta đã làm để kéo ngày và giờ khởi động, vì vậy bạn chỉ cần sửa đổi text_sensor đó để lấy các biến khác mà bạn cần. Khi bạn đã tạo một cảm biến cho RAM, CPU và cửa sổ đang hoạt động (tham chiếu đến các thực thể chính xác), chúng ta có thể chuyển sang tạo các nút.
Giao diện cấu hình ESPHome hiển thị các sensor Home Assistant để theo dõi RAM, CPU và cửa sổ ứng dụng đang hoạt động của PC.
- button:
width: 114
height: 75
widgets:
- label:
id: pc_mem_on
text: !lambda |-
std::string mem = id(pc_mem_raw).state;
return "Mem: " + mem + "%";
text_font: roboto_md
align: CENTER
- label:
id: pc_mem_off
text: "PC off"
text_font: roboto_md
align: BOTTOM_LEFT
hidden: trueChúng ta đã xem xét hầu hết những điều này, với những thay đổi duy nhất bên ngoài khối lambda là độ rộng của nút để cho phép hai nút trên một hàng. Trong lambda của chúng ta, chúng ta chỉ cần sao chép giá trị của pc_mem_raw vào biến “mem” của chúng ta. Cuối cùng, chúng ta trả về "Mem: " + mem + "%". Bạn có thể thấy cú pháp của câu lệnh trả về của chúng ta hoạt động như thế nào, và lưu ý khoảng cách sau dấu hai chấm. Nó sẽ trả về chính xác những gì bạn đưa cho nó, vì vậy nếu bạn không đặt khoảng cách bên trong dấu ngoặc kép, nó sẽ dán giá trị của mem trực tiếp bên cạnh ký tự dấu hai chấm.
Chúng ta có thể lặp lại điều tương tự cho CPU và cửa sổ đang hoạt động, mặc dù cửa sổ đang hoạt động chỉ là một lệnh trả về thông thường mà không cần nối chuỗi nào. Cửa sổ đang hoạt động trong ví dụ của tôi cũng là một nút rộng hơn như nút thời gian khởi động của chúng ta.
ESPHome vô cùng mạnh mẽ
Bạn có thể làm bất cứ điều gì
Tôi vẫn đang học cách sử dụng ESPHome, và các thư viện như LVGL hoàn toàn mới đối với tôi. Đây có thể không phải là cách tốt nhất để đạt được những gì tôi đã xây dựng, nhưng nó hoạt động, và tôi có thể lặp lại và cải thiện nó trong tương lai. Những gì ESPHome đã giúp tôi xây dựng một cách dễ dàng, từ trình duyệt của tôi, với các bản cập nhật có thể được gửi không dây, thực sự rất tuyệt vời, và tôi rất ấn tượng với trải nghiệm liền mạch này.
Tổng quan về màn hình Cheap Yellow Display (CYD) hoạt động với ESPHome, cho thấy tiềm năng hiển thị đa dạng thông tin.
Tất nhiên, có những cách khác để gửi dữ liệu giám sát đến Home Assistant, nhưng tôi đã sử dụng HASS.Agent, và dữ liệu tôi nhận được ở đây đủ để hiển thị một nguyên mẫu hoạt động của loại dữ liệu mà tôi có thể thu thập và hiển thị. Nếu bạn thiết lập điều này và sau đó quyết định muốn thay đổi nguồn dữ liệu của mình, bạn chỉ cần thay đổi text_sensor để kéo dữ liệu từ thực thể mới. Bạn không cần phải đại tu toàn bộ, trừ khi định dạng dữ liệu thay đổi đáng kể để ảnh hưởng đến các lambda của bạn.
Nếu bạn có một số thiết bị ESP32 đang nằm không, bạn có thể bắt đầu sử dụng ESPHome ngay lập tức. Kết nối nó với PC của bạn, mở trình tạo thiết bị ESPHome và nhấn cài đặt. Nó sẽ đẩy một thiết lập cơ bản, mặc định sẽ kết nối ESP32 với Wi-Fi của bạn và bật cập nhật OTA (qua mạng). Từ đó, bạn có thể làm bất cứ điều gì bạn muốn, và những thiết bị nhỏ bé này có thể làm mọi thứ từ hiển thị thông tin thực sự hữu ích đến cho phép bạn vỗ bàn để bật PC. Thật thú vị và bạn sẽ học được rất nhiều điều.
