Visualisasi Data Pengangkutan Dengan Peta Google: 6 Langkah

2024 Pengarang: John Day | [email protected]. Diubah suai terakhir: 2024-01-30 11:10

Kami biasanya ingin merakam pelbagai data semasa berbasikal, kali ini kami menggunakan Wio LTE baru untuk mengesannya.

Langkah 1: Perkara Yang Digunakan dalam Projek Ini

Komponen Hareware

• Wio LTE EU Versi v1.3- 4G, Cat.1, GNSS, Espruino Sesuai
• Grove - Sensor Denyut Jantung klip telinga
• Grove - LCD 16 x 2 (Hitam pada Kuning)

Aplikasi perisian dan perkhidmatan dalam talian

• Arduino IDE
• API Penerbitan / Langgan PubNub
• Peta Google

Langkah 2: Cerita

Langkah 3: Sambungan Perkakasan

Pasang antena GPS dan LTE ke Wio LTE dan pasangkan kad SIM anda ke dalamnya. Sambungkan Sensor Denyut Jantung klip telinga dan LCD 16x2 ke port D20 dan I2C Wio LTE.

Anda boleh menukar Sensor Denyut Jantung klip telinga ke sensor lain yang anda suka. Sila baca akhir artikel ini.

Langkah 4: Konfigurasi Web

Bahagian 1: PubNub

Klik di sini log masuk atau daftar akaun PubNub, PubNub digunakan untuk menghantar data masa nyata ke peta.

Buka Projek Demo di Portal Admin PubNub, anda akan melihat Kunci Penerbitan dan Kunci Langgan, mengingatnya untuk pengaturcaraan perisian.

Bahagian 2: Peta Google

Ikuti di sini untuk mendapatkan Google Map API Key, ia juga akan digunakan dalam program perisian.

Langkah 5: Pengaturcaraan Perisian

Bahagian 1: Wio LTE

Oleh kerana tidak ada perpustakaan PubNub untuk Wio LTE, kami dapat mengirim data kami dari permintaan HTTP, lihat Dokumen API PubNub REST.

Untuk membuat sambungan HTTP melalui kad SIM anda yang disambungkan ke Wio LTE, anda harus menetapkan APN anda terlebih dahulu, jika anda tidak tahu, sila hubungi operator mudah alih anda.

Dan kemudian, tetapkan PubNub Publish Key, Subscribe Key dan Channel anda. Saluran di sini, digunakan untuk membezakan Penerbit dan Pelanggan. Sebagai contoh, kami menggunakan basikal saluran di sini, semua Pelanggan dalam basikal saluran akan menerima mesej yang kami terbitkan.

Tetapan di atas, kami tidak mengemas dalam kelas, supaya anda dapat mengubahnya dalam basikal.ino dengan lebih mudah, anda boleh memuat turun kod ini dari akhir artikel ini.

Bahagian 2: PubNub

Tekan dan tahan kekunci Boot0 di Wio LTE, sambungkan ke komputer anda melalui kabel USB, muat naik program di Arduino IDE, tekan kekunci Reset di Wio LTE.

Kemudian beralih ke PubNub, klik Debug Console in Demo Project, isi nama saluran anda di Default Channel, klik Add Client.

Apabila anda melihat [1, "Berlangganan", "basikal"] di konsol, Pelanggan berjaya ditambahkan. Tunggu sebentar, anda akan melihat data Wio LTE muncul di konsol.

Bahagian 3: Peta Google

Peta ENO adalah peta masa nyata dengan PubNub dan MapBox, ia juga boleh digunakan untuk PubNub dan Peta Google, anda boleh memuat turunnya dari GitHub itu.

Anda hanya boleh menggunakan contoh bernama google-draw-line.html dalam folder contoh, cukup ubah Publish Key, Subscribe Key, Channel dan Google Key pada baris 29, 30, 33 dan 47.

PEMBERITAHUAN: Sila komen baris 42, atau ia akan menghantar data simulasi ke PubNub anda.

Sekiranya anda ingin memaparkan carta degupan jantung di coener kanan bawah, anda boleh menggunakan Chart.js, ia boleh dimuat turun dari Laman Webnya, memasukkannya ke dalam folder akar Peta ENO, dan memasukkannya ke kepala google-draw-line.html.

Dan tambahkan kanvas dalam div untuk memaparkan carta:

Kemudian buat dua tatasusunan untuk menyimpan data carta

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

Antaranya, chartLabels digunakan untuk menyimpan data lokasi, chartData digunakan untuk menyimpan data degupan jantung. Apabila mesej datang, tekan data baru kepada mereka, dan muat semula carta.

//… var map = eon.map ({message: function (message, timetoken, channel) {//… chartLabels.push (obj2string (message [0].latlng)); chartData.push (mesej [0].data); var ctx = document.getElementById ("chart"). getContext ('2d'); var chart = Chart baru (ctx, {type: 'line', data: {label: chartLabels, set data: [{label: " Denyut Jantung ", data: chartData}]}}); //…}});

Semua selesai. Cuba bawa dengan berbasikal anda lain kali.

Langkah 6: Bagaimana Bekerja Dengan Sensor Grove Lain?

Dalam program Wio LTE, anda boleh mengambil satu dan lebih data tersuai untuk dipaparkan dalam carta atau melakukan lebih banyak perkara. Artikel berikut menunjukkan cara mengubah suai program untuk mencapainya.

Perkara pertama yang perlu anda ketahui ialah, json yang ingin anda terbitkan ke PubNub, harus dikodkan url. Json yang dikodkan dikodkan keras dalam kelas BikeTracker, ia kelihatan seperti ini:

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

Oleh itu, mudah untuk mengambil satu data tersuai, atau anda boleh menggunakan alat pengekodan url untuk membuat json yang dikodkan sendiri untuk mengambil lebih banyak data.

Kali ini kami cuba menggunakan I2C High Accracy Temp & Humi Grove untuk menggantikan Heart Rate Grove. Kerana LCD Grove juga menggunakan I2C, kami menggunakan Hub I2C untuk menghubungkan Temp & Humi Grove dan LCD Grove ke Wio LTE.

Kemudian sertakan fail kepala ke BickTracker.h, dan tambahkan variabel dan kaedah ke kelas BikeTracker untuk menyimpan dan mengukur suhu.

/// BikeTracker.h

//… #termasuk aplikasi kelas "Seeed_SHT35.h":: BikeTracker: application:: interface:: IApplication {// … dilindungi: // … SHT35 _sht35; terapung _temperature; //… kekosongan Suhu Pengukuran (tidak sah); } /// BikeTracker.cpp //… // BikeTracker:: BikeTracker (void) //: _ethernet (Ethernet ()), _gnss (GNSS ()) {} // 21 adalah nombor pin SCL BikeTracker:: BikeTracker (batal): _ethernet (Ethernet ()), _gnss (GNSS ()), _sht35 (SHT35 (21)) {} //… batal BikeTracker:: MeasTemperature (void) {suhu apungan, kelembapan; jika (_sht35.read_meas_data_single_shot (HIGH_REP_WITH_STRCH, & suhu, & kelembapan) == NO_ERROR) {_temperature = suhu; }} //…

Sekiranya anda mahu, anda boleh menukar paparan LCD dalam kaedah Loop ():

// sprintf (line2, "Denyut Jantung:% d", _heartRate);

Suhu Pengukuran (); sprintf (line2, "Temp:% f", _temperature);

Tetapi bagaimana menerbitkannya ke PubNub? Anda perlu mengubah parameter fungsi json dan sprintf () yang dikodkan dalam kaedah PublishToPubNub (), biarkan seperti ini:

// sprintf (cmd, "DAPATKAN / terbitkan /% 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, "DAPATKAN / terbitkan /% 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, _temperature);

Kemudian anda dapat melihat suhu di konsol debug PubNub.