Trực quan hóa dữ liệu giao thông với Google Map: 6 bước

2024 Tác giả: John Day | [email protected]. Sửa đổi lần cuối: 2024-01-30 13:33

Chúng tôi thường muốn ghi lại nhiều dữ liệu khác nhau trong quá trình đạp xe, lần này chúng tôi đã sử dụng Wio LTE mới để theo dõi chúng.

Bước 1: Những thứ được sử dụng trong dự án này

Các thành phần phần mềm độc hại

• Tương thích Wio LTE phiên bản EU v1.3- 4G, Cat.1, GNSS, Espruino
• Grove - Cảm biến nhịp tim dạng kẹp tai
• Grove - LCD 16 x 2 (Đen trên Vàng)

Ứng dụng phần mềm và dịch vụ trực tuyến

• Arduino IDE
• API PubNub Xuất bản / Đăng ký
• bản đồ Google

Bước 2: Câu chuyện

Bước 3: Kết nối phần cứng

Cài đặt ăng-ten GPS và LTE vào Wio LTE và cắm thẻ SIM của bạn vào đó. Kết nối Cảm biến nhịp tim trên tai và màn hình LCD 16x2 với cổng D20 và I2C của Wio LTE.

Bạn có thể thay đổi Cảm biến nhịp tim trên tai nghe thành các cảm biến khác mà bạn thích. Vui lòng xem cuối bài viết này.

Bước 4: Cấu hình web

Phần 1: PubNub

Bấm vào đây để đăng nhập hoặc đăng ký tài khoản PubNub, PubNub được sử dụng để truyền dữ liệu thời gian thực ra bản đồ.

Mở Dự án Demo trong Cổng quản trị PubNub, bạn sẽ thấy Khóa xuất bản và Khóa đăng ký, hãy ghi nhớ chúng để lập trình phần mềm.

Phần 2: Bản đồ Google

Vui lòng theo dõi tại đây để nhận Khóa API Google Map, nó cũng sẽ được sử dụng trong lập trình phần mềm.

Bước 5: Lập trình phần mềm

Phần 1: Wio LTE

Vì không có thư viện PubNub cho Wio LTE, chúng tôi có thể gửi dữ liệu của mình từ yêu cầu HTTP, xem Tài liệu API REST PubNub.

Để tạo kết nối HTTP qua thẻ SIM được cắm vào Wio LTE, trước tiên bạn nên đặt APN của mình, nếu bạn không biết điều đó, vui lòng liên hệ với các nhà khai thác di động của bạn.

Và sau đó, đặt Khóa xuất bản PubNub, Khóa đăng ký và Kênh của bạn. Kênh ở đây, được sử dụng để phân biệt Nhà xuất bản và Người đăng ký. Ví dụ: chúng tôi sử dụng kênh xe đạp ở đây, tất cả Người đăng ký trong kênh xe đạp sẽ nhận được tin nhắn mà chúng tôi đã xuất bản.

Các cài đặt ở trên, chúng tôi không đóng gói theo lớp, để bạn có thể sửa đổi chúng trong bike.ino dễ dàng hơn, bạn có thể tải xuống các mã này từ cuối bài viết này.

Phần 2: PubNub

Nhấn và giữ phím Boot0 trong Wio LTE, kết nối nó với máy tính của bạn qua cáp USB, tải lên chương trình trong Arduino IDE, nhấn phím Reset trong Wio LTE.

Sau đó, chuyển sang PubNub, nhấp vào Bảng điều khiển gỡ lỗi trong Dự án trình diễn, điền tên kênh của bạn vào Kênh mặc định, nhấp vào Thêm khách hàng.

Khi bạn thấy [1, "Đã đăng ký", "xe đạp"] trong bảng điều khiển, tức là Người đăng ký đã được thêm thành công. Chờ một lúc, bạn sẽ thấy dữ liệu Wio LTE xuất hiện trong bảng điều khiển.

Phần 3: Bản đồ Google

Bản đồ ENO là bản đồ thời gian thực với PubNub và MapBox, nó cũng có thể được sử dụng cho PubNub và Google Map, bạn có thể tải xuống từ GitHub của nó.

Bạn có thể chỉ cần sử dụng một ví dụ có tên google-draw-line.html trong thư mục example, chỉ cần sửa đổi Khóa xuất bản, Khóa đăng ký, Kênh và Khóa Google trong dòng 29, 30, 33 và 47.

LƯU Ý: Vui lòng nhận xét dòng 42, nếu không nó sẽ gửi dữ liệu mô phỏng đến PubNub của bạn.

Nếu bạn muốn hiển thị biểu đồ nhịp tim ở hệ số dưới cùng bên phải, bạn có thể sử dụng Chart.js, nó có thể được tải xuống từ Trang web của nó, đặt nó vào thư mục gốc của ENO Maps và đưa nó vào đầu của google-draw-line.html.

Và thêm canvas trong div để hiển thị biểu đồ:

Sau đó, tạo hai mảng để giữ dữ liệu biểu đồ

//… var chartLabels = new Array (); var chartData = new Array (); //…

Trong số đó, chartLabels được sử dụng để giữ dữ liệu vị trí, chartData được dùng để giữ dữ liệu nhịp tim. Khi tin nhắn đến, hãy đẩy dữ liệu mới đến chúng và làm mới biểu đồ.

//… var map = eon.map ({message: function (message, timetoken, channel) {//… chartLabels.push (obj2string (message [0].latlng)); chartData.push (message [0].data); var ctx = document.getElementById ("chart"). getContext ('2d'); var chart = new Chart (ctx, {type: 'line', data: {label: chartLabels, datasets: [{label: " Nhịp tim ", data: chartData}]}}); //…}});

Tất cả đã được làm xong. Hãy cố gắng mang nó với xe đạp của bạn vào lần sau.

Bước 6: Làm thế nào để làm việc với Grove cảm biến khác?

Trong chương trình của Wio LTE, bạn có thể lấy một và nhiều dữ liệu tùy chỉnh để hiển thị trong biểu đồ hoặc làm nhiều hơn thế. Bài viết sau đây cho biết cách sửa đổi chương trình để đạt được nó.

Điều đầu tiên bạn cần biết là json bạn muốn xuất bản lên PubNub, phải được mã hóa url. Json được mã hóa được mã hóa cứng trong lớp BikeTracker, nó trông giống như sau:

%% 5b %% 7b %% 22latlng %% 22 %% 3a %% 5b% f %% 2c% f %% 5d %% 2c %% 22data %% 22 %% 3a% d %% 7d %% 5d

Vì vậy, thật dễ dàng để lấy một dữ liệu tùy chỉnh hoặc bạn có thể sử dụng các công cụ mã hóa url để tạo json được mã hóa của riêng bạn để lấy nhiều dữ liệu hơn.

Lần này chúng tôi cố gắng sử dụng I2C High Accracy Temp & Humi Grove để thay thế Heart Rate Grove. Vì LCD Grove cũng sử dụng I2C nên chúng tôi sử dụng Hub I2C để kết nối Temp & Humi Grove và LCD Grove với Wio LTE.

Sau đó, đưa tệp head vào BickTracker.h, đồng thời thêm biến thể và phương thức vào lớp BikeTracker để lưu trữ và đo nhiệt độ.

/// BikeTracker.h

//… #include Ứng dụng lớp "Seeed_SHT35.h":: BikeTracker: application:: interface:: IApplication {//… proteced: //… SHT35 _sht35; float _tempether; //… void MeasureTempe Heat (void); } /// BikeTracker.cpp //… // BikeTracker:: BikeTracker (void) //: _ethernet (Ethernet ()), _gnss (GNSS ()) {} // 21 là số pin SCL BikeTracker:: BikeTracker (} void if (_sht35.read_meas_data_single_shot (HIGH_REP_WITH_STRCH, & nhiệt độ, & độ ẩm) == NO_ERROR) {_tempeosystem = nhiệt độ; }} //…

Nếu muốn, bạn có thể thay đổi màn hình LCD trong phương thức Loop ():

// sprintf (line2, "Nhịp tim:% d", _heartRate);

Đo nhiệt độ(); sprintf (line2, "Nhiệt độ:% f", _tempether);

Nhưng làm thế nào để xuất bản nó lên PubNub? Bạn cần thay đổi các tham số của hàm json và sprintf () được mã hóa trong phương thức PublishToPubNub (), giống như sau:

// sprintf (cmd, "GET / Publishing /% s /% s / 0 /% s / 0 / %% 5b %% 7b %% 22latlng %% 22 %% 3a %% 5b% f %% 2c% f% % 5d %% 2c %% 22data %% 22 %% 3a% d %% 7d %% 5d? Store = 0 HTTP / 1.0 / n / r / n / r ", // _publishKey, _subscribeKey, _channel, _latitude, _longitude, _heartRate); sprintf (cmd, "NHẬN / xuất bản /% s /% s / 0 /% s / 0 / %% 5b %% 7b %% 22latlng %% 22 %% 3a %% 5b% f %% 2c% f %% 5d %% 2c %% 22data %% 22 %% 3a% f %% 7d %% 5d? Store = 0 HTTP / 1.0 / n / r / n / r ", _publishKey, _subscribeKey, _channel, _latitude, _longitude, _tempether);

Sau đó, bạn có thể thấy nhiệt độ trong bảng điều khiển gỡ lỗi PubNub.