Internet of ThingsIoT platformsThingsboard.io

Bài 8: Hiển thị vị trí thiết bị lên Thingsboard

Ở những bài viết trước,lophocvui.com đã hướng dẫn các bạn đọc dữ liệu từ cảm biến hiển thị lên Thingsboard. Sử dụng các tiện ích trong gói tiện ích Control để xây dựng ứng dụng điều khiển bật,tắt, điều khiển độ sáng của đèn. Trong bài viết này lophocvui.com sẽ hướng dẫn các bạn đưa vị trí của các thiết bị lên Thingsboard.

I/Giới thiệu

Trong bài viết này, chúng ta sẽ giả định rằng chúng ta có 3 cảm biến nhiệt độ độ ẩm. Mỗi cảm biến thu thập dữ liệu ở một địa điểm cụ thể(cố định) và gửi lên Thingsboard. Chúng ta sẽ viết code python để giả lập cho giá trị nhiệt độ và độ ẩm thu thập được từ các cảm biến. Chúng ta sẽ tạo ra một giao diện giống như hình dưới đây:

Khi người sử dụng click vào “Details” sẽ mở ra một trang quản lý riêng cho từng thiết bị cụ thể:

II/ Cấu hình trên Thingsboard

1.Khởi tạo các thiết bị ảo và cung cấp tọa độ

Như những bài viết trước chúng ta cần tạo ra 3 thiết bị ảo trên Thingsboard. Có tên gọi là Sensor-01,Sensor-02,Sensor-03. Bạn cần chú ý tới thể loại (Device type) của các thiết bị phải giống nhau. Việc đặt giống nhau sẽ giúp việc lấy dữ liệu cũng như tạo Dashboard hiển thị cho nhiều thiết bị dễ dàng hơn. Bạn cũng cần chú ý copy ACCESS TOKEN của mỗi device để dùng cho phần code giả lập dữ liệu.

Cung cấp tọa độ cho các thiết bị:
Trong phần ATTRIBUTES của mỗi thiết bị mới tạo ,phần entity attributes scope bạn hãy chọn Server attributes  sau đó tích vào dấu “+” để thêm vĩ độ(latitude) và kinh độ(longitude) cho thiết bị đó.

Sau đó bạn điền vĩ độ(latitude) và kinh độ(longitude) của thiết bị của bạn. Vĩ độ và kinh độ bạn sẽ vào Google Maps để lấy.

2.Xây dựng  Dashboard hiển thị

a)Tạo các trang giao diện riêng biệt cho các cảm biến(Dashboard State)

Sau khi đã cung cấp tọa độ cho các cảm biến cụ thể. Bây giờ các bạn sẽ tạo một giao diện để hiển thị ví trí trên bản đồ cũng như hiển thị các giá trị nhiệt độ độ ẩm cho mỗi thiết bị. Như đã giới thiệu bạn cần phải tạo trang giao diện cho các điều khiển các cảm biến cụ thể và trang hiển thị bản đồ. Nó được gọi là các Dashboard State.  Như vậy bạn cần tạo ra :

  • Một trang chính sẽ hiện bản đồ khi người sử dụng mới đăng nhập vàoThingsboard.
  • Ba trang khác hiển thị cho giá trị của 3 cảm biến.

Để làm như vậy trong thẻ Dashboard mà bạn tạo bạn vào Manage dashboard states nhấn dấu “+” để thêm các trang hiển thị cho  dữ liệu cảm biến.

Tuy nhiên bạn chỉ cần tạo 3 trang  state bởi vì trang chính đã được tạo khi bạn ta ra Dashboard đó rồi và nó được đánh dấu là Root state. Sau khi thêm như vậy bạn đã có 4 trang giao diện để sử dụng. Bây giờ sẽ sử dụng tiện ích để hiện ví trí lên bản đồ. Bạn cần lưu ý đến Name và State Id của các 3 Dashboard State mới tạo để dùng trong phần liên kết khi người dùng click vào chữ Details.

b)Cấu hình  để hiện vị trí lên bản đồ

Chúng ta sẽ sử dụng tiện ích OpenStreetMaps trong gói tiện ích Maps của Thingboard để hiển thị vị trí các cảm biến. Tiện ích này cần nguồn dữ liệu là một thực thể. Chúng ta sẽ đi gán bí danh cho một thực thể để làm nguồn dữ liệu cho tiện ích này như hình dưới đây:

Ở đây nguồn dữ liệu này sẽ được lọc theo loại của thiết bị. Tức là tất cả các thiết bị mà có loại là sensor thì đều sẽ được truy xuất dữ liệu. Điều đó giúp các bạn có thể hiển thị tất cả các vị trí của các cảm biến bạn có lên bản đồ. Bạn lấy tiện ích đó ra và cấu hình như sau:

Sau đó vào tab  ACTION => nhấn dấu “+” và cấu hình như sau:

Bạn hãy copy đoạn code javascript sau vào phần function:

Sau đó bạn chuyển tới tab ADVANCED tìm tới đoạn khoanh đỏ như hình:

Bạn xóa hết đi và copy đoạn code HTML sau vào đó:

rồi lưu lại. Bây giờ bạn có thể tích vào chữ Details ở các icon vị trí cảm biến của bạn và sẽ thấy nó mở ra trang giao diện dành cho cảm biến tương ứng.

c)Xây dựng các trang hiển thị dữ liệu cho các cảm biến

Tương tự như những bài trước, bạn gán bí danh cho các thực thể riêng biệt để làm nguồn dữ liệu hiển thị các dữ liệu cảm biến.

bạn có thể xem lại các bài viết trước của lophocvui.com để tạo ra các giao diện hiển thị như sau:

Các cảm biến khác nhau bạn có thể tạo các giao diện hiển thị khác nhau.

Nếu bạn đã tạo các thiết bị ảo ở phần  1 và muốn có giao diện giống như của lophocvui.com  một cách nhanh chóng: Bạn có thể tải file từ link dưới lưu lại với tên maps.json và import vào phần Dashboard của bạn:

https://Dashboard/Maps

III/ Code python giả lập dữ liệu cho các cảm biến

Chúng ta có 3 cảm biến vậy bạn sẽ tạo ra 3 file .py có nội dung như sau:

Để đơn giản các file bạn chỉ cần thay đổi ACCESS_TOKEN của cảm biến tương ứng. Sau đó bạn có thể chạy các file python này để thấy kết quả.

Như vậy là các bạn đã có thể hiển thị vị trí của các thiết bị cùng dữ liệu lên giao diện Thingsboard. Ở bài viết tiếp theo lophocvui.com sẽ hướng dẫn các bạn dùng Thingsboard để theo dõi một đội xe ô tô. Theo dõi vị trí đang di chuyển ,tốc độ,… của các xe.

lophocvui.com chúc các bạn học tập tốt và sử dụng nền tảng Thingsboard thành công.

Nguồn tham khảo:

—————————
Chi tiết liên hệ:
📌Website: lophocvui.com
☎Hotline: 0971479145//0983811938
🖌Fanpage:https://www.facebook.com/lophocvui.com/

 

Bình luận

Related Articles

Close
Close