Visualizzazione dei dati di trasporto con Google Map: 6 passaggi

2024 Autore: John Day | [email protected]. Ultima modifica: 2024-01-30 10:02

Di solito vogliamo registrare vari dati durante la pedalata, questa volta abbiamo usato il nuovo Wio LTE per tracciarli.

Passaggio 1: cose utilizzate in questo progetto

Componenti Hareware

• Wio LTE versione UE v1.3-4G, Cat.1, GNSS, compatibile con Espruino
• Grove - Sensore di frequenza cardiaca a clip per l'orecchio
• Grove - LCD 16 x 2 (nero su giallo)

App software e servizi online

• Arduino IDE
• PubNub API di pubblicazione/sottoscrizione
• Google Maps

Fase 2: Storia

Passaggio 3: connessione hardware

Installa le antenne GPS e LTE su Wio LTE e collega la tua scheda SIM. Collega il sensore di frequenza cardiaca a clip per l'orecchio e il display LCD 16x2 alla porta D20 e I2C di Wio LTE.

Puoi cambiare il sensore di frequenza cardiaca a clip per l'orecchio con altri sensori che ti piacciono. Si prega di vedere la fine di questo articolo.

Passaggio 4: configurazione web

Parte 1: PubNub

Clicca qui accedi o registra un account PubNub, PubNub viene utilizzato per trasmettere dati in tempo reale alla mappa.

Apri il progetto demo nel portale di amministrazione PubNub, vedrai una chiave di pubblicazione e una chiave di iscrizione, ricordale per la programmazione del software.

Parte 2: Google Map

Segui qui per ottenere una chiave API di Google Maps, verrà utilizzata anche nella programmazione del software.

Passaggio 5: programmazione del software

Parte 1: Wio LTE

Poiché non esiste una libreria PubNub per Wio LTE, possiamo inviare i nostri dati dalla richiesta HTTP, vedere Documento API REST PubNub.

Per effettuare una connessione HTTP tramite la tua scheda SIM collegata a Wio LTE, devi prima impostare il tuo APN, se non lo conosci, contatta i tuoi operatori di telefonia mobile.

E poi, imposta la tua chiave di pubblicazione PubNub, la chiave di iscrizione e il canale. Il canale qui, viene utilizzato per differenziare gli editori e gli abbonati. Ad esempio, usiamo channel bike qui, tutti gli abbonati nel canale bike riceveranno i messaggi che abbiamo pubblicato.

Le impostazioni sopra, non le abbiamo impacchettate in classe, in modo che tu possa modificarle più facilmente in bike.ino, puoi scaricare questi codici dalla fine di questo articolo.

Parte 2: PubNub

Tieni premuto il tasto Boot0 in Wio LTE, collegalo al computer tramite un cavo USB, carica il programma in Arduino IDE, premi il tasto Reset in Wio LTE.

Quindi vai su PubNub, fai clic su Console di debug in Progetto demo, inserisci il nome del tuo canale in Canale predefinito, fai clic su Aggiungi client.

Quando vedi [1, "Sottoscritto", "bici"] nella console, l'abbonato è stato aggiunto con successo. Attendi qualche istante, vedrai apparire i dati Wio LTE nella console.

Parte 3: Google Map

Le mappe ENO sono mappe in tempo reale con PubNub e MapBox, possono essere utilizzate anche per PubNub e Google Map, puoi scaricarle da GitHub.

Puoi semplicemente utilizzare un esempio chiamato google-draw-line.html nella cartella degli esempi, basta modificare la chiave di pubblicazione, la chiave di iscrizione, il canale e la chiave di Google nelle righe 29, 30, 33 e 47.

AVVISO: commentare la riga 42 o invierà i dati di simulazione al tuo PubNub.

Se vuoi visualizzare il grafico della frequenza cardiaca nel coener in basso a destra, puoi usare Chart.js, può essere scaricato dal suo sito Web, inserirlo nella cartella principale di ENO Maps e includerlo nella testa di google-draw-line.html.

E aggiungi una tela in un div per visualizzare il grafico:

Quindi crea due array per conservare i dati del grafico

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

Tra questi, chartLabels viene utilizzato per conservare i dati sulla posizione, chartData viene utilizzato per conservare i dati sulla frequenza cardiaca. Quando arrivano i messaggi, invia loro nuovi dati e aggiorna il grafico.

// … 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, dataset: [{ label: " Frequenza Cardiaca", dati: chartData }] } }); // … } });

Tutto fatto. Prova a portarlo con la tua bicicletta la prossima volta.

Passaggio 6: come lavorare con altri sensori Grove?

Nel programma di Wio LTE, puoi prendere uno o più dati personalizzati da visualizzare nel grafico o fare di più. Il seguente articolo mostra come modificare il programma per realizzarlo.

La prima cosa che devi sapere è che il json che vuoi pubblicare su PubNub, dovrebbe essere codificato come url. Il json codificato è hardcoded nella classe BikeTracker, ha il seguente aspetto:

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

Quindi è facile prendere un dato personalizzato, oppure puoi usare gli strumenti di codifica url per creare il tuo json codificato per prendere più dati.

Questa volta proviamo a utilizzare I2C High Accracy Temp e Humi Grove per sostituire Heart Rate Grove. Poiché anche LCD Grove utilizza I2C, utilizziamo un hub I2C per collegare Temp & Humi Grove e LCD Grove a Wio LTE.

Quindi includi il file head in BickTracker.h e aggiungi una variabile e un metodo alla classe BikeTracker per memorizzare e misurare la temperatura.

/// BikeTracker.h

// … #include classe "Seeed_SHT35.h" application::BikeTracker: application::interface::IApplication { // … protetto: // … SHT35 _sht35; float _temperatura; // … void MeasureTemperature(void); } /// BikeTracker.cpp // … // BikeTracker::BikeTracker(void) //: _ethernet(Ethernet()), _gnss(GNSS()) { } // 21 è il numero pin SCL BikeTracker::BikeTracker(void): _ethernet(Ethernet()), _gnss(GNSS()), _sht35(SHT35(21)) { } // … void BikeTracker::measureTemperature(void) { float temperatura, umidità; if (_sht35.read_meas_data_single_shot(HIGH_REP_WITH_STRCH, &temperature, &humidity) == NO_ERROR) { _temperature = temperatura; } } // …

Se lo desideri, puoi modificare il display dell'LCD nel metodo Loop():

// sprintf(line2, "Frequenza cardiaca: %d", _heartRate);

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

Ma come pubblicarlo su PubNub? Devi cambiare i parametri della funzione json codificata e sprintf() nel metodo PublishToPubNub(), lascia che assomigli a questo:

// 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, "OTTIENI /pubblica/%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);

Quindi puoi vedere la temperatura nella console di debug di PubNub.