[Node-RED] Tạo giao diện bảng điều khiển

Ở hai bài trước, chúng ta đã biết cách cài đặt Node-RED trên RPi và một số thao tác hữu ích với Node-RED. Ở bài hôm nay, tôi sẽ hướng dẫn các bạn cách tạo giao diện của một bảng điều khiển đơn giản. Sau bài này, tôi chắc chắn các bạn sẽ muốn tạo ngay cho mình một bảng điều khiển các thiết bị điện trong nhà đấy :D 


1. Cài đặt plugin

Ngoài hỗ trợ các node được xây dựng sẵn, Node-RED còn cung cấp cho chúng ta một thư viện khổng lồ các plugins hỗ trợ. Ở bài này, chúng ta sẽ tìm hiểu cách sử dụng plugin node-red-dashboard để tạo giao diện Dashboard đơn giản.

Để cài đặt, bạn vào Menu -> Manage palette 

Các bạn nhập "node-red-dashboard" để tìm kiếm và nhấn Install để cài đặt

Quá trình cái đặt diễn ra rất nhanh, chỉ tầm vài phút là xong. Sau khi cài đặt xong, bên thanh công cụ bên trái, bạn sẽ thấy xuất hiện thêm một mục là dashboard

Bạn thử truy cập vào địa chỉ http://localhost:/ui, nếu cài đặt thành công thì bạn sẽ thấy kết quả như sau

 

2. Tạo giao diện đầu tiên

Các đối tượng trong Dashboard được phân thành 3 cấp từ lớn đến nhỏ như sau:

  • Tabs & Links: đây có thể xem nhưng từng màn hình 
  • Group: đây là các nhóm thuộc các màn hình. Bạn có thể tạo nhiều nhóm trong cùng một màn hình
  • Object: button, textbox, slider, chart, form, . . . 

Các bạn kéo thả 2 nodes button và text vào workplace để làm thực nghiệm đầu tiên:

Với mỗi đối tượng chúng ta sử dụng, các bạn cần lưu ý các điều sau:

  • Đối tượng thuộc Tab nào ?
  • Đối tượng thuộc Group nào ? 

Các bạn cấu hình node button và node text như sau: 

 

Phần payload trong cấu hình của button là giá trị mà button sẽ truyền đi khi ta click vào nó.

Các bạn bấm Deploy và truy cập http://localhost:<port>/ui để xem kết quả nhé !

Khi click button Click me !!!  thì kết quả sẽ hiện ra như sau:

 

 

3. Tạo thêm một group mới

Tiếp theo, chúng ta sẽ tạo thêm một group chứa một Slider và một Gauge. Các bạn kéo 2 nodes vào như hình:

Sau đó, ta tạo thêm một group có tên Slider trong Tab Home

Các bạn cấu hình Slider và Gauge của mình như sau:

Nhấn Deploy và xem kết quả như sau:

Bây giờ bạn hãy thử kéo Slider để xem có điều gì xảy ra nhé !

 

Như vậy là chúng ta đã có thể dễ dàng tạo một Dashboard bằng Node-RED rồi đấy. Từ giờ các bạn có thể dùng Node-RED để tạo một Dashboard và điều khiển các thiết bị mà bạn mong muốn rồi

Chúc các bạn thành công.

 

Hà Phương - Mechasolution.

Có thể bạn quan tâm ???