Visualisasi Data Transportasi Dengan Google Map: 6 Langkah

2024 Pengarang: John Day | [email protected]. Terakhir diubah: 2024-01-30 09:56

Kami biasanya ingin merekam berbagai data saat bersepeda, kali ini kami menggunakan Wio LTE baru untuk melacaknya.

Langkah 1: Hal-hal yang Digunakan dalam Proyek Ini

Komponen perangkat keras

• Wio LTE EU Version v1.3- 4G, Cat.1, GNSS, Kompatibel dengan Espruino
• Grove - Sensor Detak Jantung Klip Telinga
• Grove - LCD 16 x 2 (Hitam di atas Kuning)

Aplikasi perangkat lunak dan layanan online

• Arduino IDE
• PubNub Publish/Subscribe API
• Google Maps

Langkah 2: Cerita

Langkah 3: Koneksi Perangkat Keras

Pasang antena GPS dan LTE ke Wio LTE dan colokkan kartu SIM Anda ke sana. Hubungkan Sensor Detak Jantung Klip Telinga dan LCD 16x2 ke port D20 dan I2C Wio LTE.

Anda dapat mengubah Sensor Detak Jantung Klip Telinga ke sensor lain yang Anda suka. Silakan lihat akhir artikel ini.

Langkah 4: Konfigurasi Web

Bagian 1: PubNub

Klik di sini login atau daftar akun PubNub, PubNub digunakan untuk mengirimkan data real-time ke peta.

Buka Proyek Demo di Portal Admin PubNub, Anda akan melihat Kunci Publikasikan dan Kunci Berlangganan, ingatlah untuk pemrograman perangkat lunak.

Bagian 2: Peta Google

Silakan ikuti di sini untuk mendapatkan Google Map API Key, itu akan digunakan dalam pemrograman perangkat lunak juga.

Langkah 5: Pemrograman Perangkat Lunak

Bagian 1: Wio LTE

Karena tidak ada pustaka PubNub untuk Wio LTE, kami dapat mengirim data kami dari permintaan HTTP, lihat Dokumen PubNub REST API.

Untuk melakukan koneksi HTTP melalui SIM card yang dicolokkan Wio LTE sebaiknya setting APN terlebih dahulu, jika tidak mengetahuinya silahkan hubungi operator seluler anda.

Dan kemudian, atur PubNub Publish Key, Subscribe Key, dan Channel Anda. Saluran di sini, digunakan untuk membedakan Penerbit dan Pelanggan. Misalnya, kami menggunakan sepeda saluran di sini, semua Pelanggan di saluran sepeda akan menerima pesan yang kami publikasikan.

Settingan diatas tidak kami kemas dalam class, sehingga anda dapat memodifikasinya di bike.ino dengan lebih mudah, anda dapat mendownload kode-kode tersebut di akhir artikel ini.

Bagian 2: PubNub

Tekan dan tahan tombol Boot0 di Wio LTE, sambungkan ke komputer Anda melalui kabel USB, unggah program di Arduino IDE, tekan tombol Reset di Wio LTE.

Lalu masuk ke PubNub, klik Debug Console di Demo Project, isi nama channel Anda di Default Channel, klik Add Client.

Ketika Anda melihat [1, "Berlangganan", "sepeda"] di konsol, Pelanggan berhasil ditambahkan. Tunggu beberapa saat, Anda akan melihat data Wio LTE muncul di konsol.

Bagian 3: Peta Google

ENO Maps adalah peta waktu nyata dengan PubNub dan MapBox, juga dapat digunakan untuk PubNub dan Google Map, Anda dapat mengunduhnya dari GitHub.

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

PEMBERITAHUAN: Harap beri komentar pada baris 42, atau ia akan mengirimkan data simulasi ke PubNub Anda.

Jika Anda ingin menampilkan grafik detak jantung di coener kanan bawah, Anda dapat menggunakan Chart.js, dapat diunduh dari Situs Web-nya, meletakkannya di folder root ENO Maps, dan memasukkannya ke kepala google-draw-line.html.

Dan tambahkan kanvas dalam div untuk menampilkan bagan:

Kemudian buat dua array untuk menyimpan data grafik

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

Diantaranya chartLabels digunakan untuk menyimpan data lokasi, chartData digunakan untuk menyimpan data detak jantung. Saat pesan datang, masukkan data baru ke pesan tersebut, dan segarkan bagan.

// … var map = eon.map({ pesan: 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: { labels: chartLabels, dataset: [{ label: " Detak Jantung", data: chartData }] } }); // … } });

Semua selesai. Cobalah untuk membawanya dengan bersepeda Anda lain kali.

Langkah 6: Bagaimana Bekerja Dengan Sensor Grove Lainnya?

Dalam program Wio LTE, Anda dapat mengambil satu dan lebih data khusus untuk ditampilkan dalam bagan atau melakukan lebih banyak lagi. Artikel berikut menunjukkan cara memodifikasi program untuk mencapainya.

Hal pertama yang perlu Anda ketahui adalah, json yang ingin Anda publikasikan ke PubNub, harus dikodekan dengan url. json yang dikodekan dikodekan dengan keras di kelas BikeTracker, terlihat seperti ini:

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

Jadi mudah untuk mengambil satu data khusus, atau Anda dapat menggunakan alat penyandian-url untuk membuat json yang disandikan sendiri untuk mengambil lebih banyak data.

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

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

/// BikeTracker.h

// … #termasuk aplikasi kelas "Seeed_SHT35.h"::BikeTracker: application::interface::IApplication { // … dilindungi: // … SHT35 _sht35; mengapung _suhu; // … void MeasureTemperature(void); } /// BikeTracker.cpp // … // BikeTracker::BikeTracker(void) //: _ethernet(Ethernet()), _gnss(GNSS()) { } // 21 adalah nomor pin SCL BikeTracker::BikeTracker(void): _ethernet(Ethernet()), _gnss(GNSS()), _sht35(SHT35(21)) { } // … void BikeTracker::measureTemperature(void) { float suhu, kelembaban; if (_sht35.read_meas_data_single_shot(HIGH_REP_WITH_STRCH, &temperature, &humidity) == NO_ERROR) { _temperature = temperatur; } } //…

Jika mau, Anda dapat mengubah tampilan LCD dengan metode Loop():

// sprintf(baris2, "Detak Jantung: %d", _heartRate);

UkurSuhu(); sprintf(baris2, "Suhu: %f", _temperature);

Tetapi bagaimana cara mempublikasikannya ke PubNub? Anda perlu mengubah parameter fungsi json dan sprintf() yang dikodekan dalam metode PublishToPubNub(), biarkan terlihat seperti ini:

// sprintf(cmd, GET /publish/%s/%s/0/%s/0/%%5b%%7b%%22latlng%%22%%3a%%5b%f%%2c%f% %5d%%2c%%22data%%22%%3a%d%%7d%%5d?store=0

// _publishKey, _subscribeKey, _channel, _latitude, _longitude, _heartRate); sprintf(cmd, "DAPATKAN /publish/%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.