Visualització de dades de transport amb Google Map: 6 passos

2024 Autora: John Day | [email protected]. Última modificació: 2024-01-30 08:14

Normalment volem enregistrar diverses dades durant la bicicleta, aquesta vegada hem utilitzat el nou Wio LTE per fer-ne el seguiment.

Pas 1: coses utilitzades en aquest projecte

Components de Hareware

• Wio LTE Versió UE v1.3- 4G, Cat.1, GNSS, compatible amb Espruino
• Grove - Sensor de ritme cardíac amb clip auricular
• Grove - LCD de 16 x 2 (negre sobre groc)

Aplicacions de programari i serveis en línia

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

Pas 2: història

Pas 3: connexió de maquinari

Instal·leu antenes GPS i LTE a Wio LTE i connecteu-hi la targeta SIM. Connecteu el sensor de ritme cardíac amb clip auricular i la pantalla LCD de 16x2 al port D20 i I2C de Wio LTE.

Podeu canviar el sensor de ritme cardíac del clip auricular per altres sensors que vulgueu. Consulteu el final d’aquest article.

Pas 4: Configuració web

Primera part: PubNub

Feu clic aquí per iniciar sessió o registrar un compte de PubNub, PubNub s’utilitza per transmetre dades en temps real al mapa.

Obriu el projecte de demostració al Portal d’administració de PubNub, veureu una clau de publicació i una de subscripció, recordeu-les per a la programació de programari.

Part 2: Google Map

Seguiu aquí per obtenir una clau API de Google Map, que també s'utilitzarà en la programació de programari.

Pas 5: programació de programari

Primera part: Wio LTE

Com que no hi ha cap biblioteca PubNub per a Wio LTE, podem enviar les nostres dades des de la sol·licitud HTTP. Consulteu el document API PubEST REST.

Per establir una connexió HTTP mitjançant la targeta SIM connectada a Wio LTE, primer heu d’establir l’APN, si no ho sabeu, poseu-vos en contacte amb els vostres operadors de telefonia mòbil.

A continuació, configureu la clau de publicació, la clau de subscripció i el canal de PubNub. El canal aquí s’utilitza per diferenciar els editors i els subscriptors. Per exemple, aquí fem servir la bicicleta de canal, tots els subcriptors de la bicicleta de canal rebran els missatges que publiquem.

Els paràmetres anteriors no els vam incloure a classe, de manera que podeu modificar-los a bike.ino més fàcilment, podeu descarregar aquests codis al final d’aquest article.

Part 2: PubNub

Manteniu premuda la tecla Boot0 a Wio LTE, connecteu-la a l'ordinador mitjançant un cable USB, pengeu el programa a Arduino IDE i premeu la tecla Restableix a Wio LTE.

A continuació, aneu a PubNub, feu clic a Consola de depuració al projecte de demostració, empleneu el nom del canal al canal predeterminat i feu clic a Afegeix client.

Quan veieu [1, "Subscrit", "bicicleta"] a la consola, el subscriptor s'ha afegit correctament. Espereu una estona, veureu que apareixen dades de Wio LTE a la consola.

Part 3: Google Map

Els mapes ENO són mapes en temps real amb PubNub i MapBox, també es poden utilitzar per a PubNub i Google Map; el podeu descarregar des del seu GitHub.

Simplement podeu utilitzar un exemple anomenat google-draw-line.html a la carpeta d’exemples, només cal que modifiqueu la clau de publicació, la clau de subscripció, el canal i la clau de Google a les línies 29, 30, 33 i 47.

AVÍS: Si us plau, comenteu la línia 42, o bé enviarà dades de simulació al vostre PubNub.

Si voleu mostrar un gràfic de freqüència cardíaca a la part inferior dreta, podeu utilitzar Chart.js, es pot descarregar des del lloc web, posar-lo a la carpeta arrel de ENO Maps i incloure'l al cap de google-draw-line.html.

I afegiu un llenç en un div per mostrar el gràfic:

A continuació, creeu dues matrius per mantenir les dades del gràfic

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

Entre ells, chartLabels s’utilitza per conservar les dades d’ubicació, chartData s’utilitza per mantenir les dades de freqüència cardíaca. Quan arribin els missatges, envieu-hi dades noves i actualitzeu el gràfic.

// … var map = eon.map ({missatge: funció (missatge, horari, canal) {//… chartLabels.push (obj2string (missatge [0].latlng)); chartData.push (missatge [0].data); var ctx = document.getElementById ("chart"). getContext ('2d'); var chart = new Chart (ctx, {type: 'line', data: {labels: chartLabels, datasets: [{label: " Freqüència cardíaca ", dades: chartData}]}}); // …}});

Tot fet. Proveu-ho amb la vostra bicicleta la propera vegada.

Pas 6: Com treballar amb un altre sensor Grove?

Al programa de Wio LTE, podeu agafar una o més dades personalitzades per mostrar-les al gràfic o fer-ne més. L’article següent mostra com es modifica el programa per aconseguir-lo.

El primer que heu de saber és que el json que vulgueu publicar a PubNub hauria d’estar codificat per URL. El json codificat està codificat de manera dura a la classe BikeTracker, té el següent aspecte:

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

Per tant, és fàcil agafar una dada personalitzada o podeu utilitzar eines de codificació d’URL per crear el vostre propi JSON codificat per agafar més dades.

Aquesta vegada intentem utilitzar I2C High Accracy Temp & Humi Grove per substituir Heart Rate Grove. Com que el LCD Grove també utilitza I2C, fem servir un hub I2C per connectar Temp & Humi Grove i LCD Grove a Wio LTE.

A continuació, incloeu el fitxer de capçalera a BickTracker.h i afegiu una variable i un mètode a la classe BikeTracker per emmagatzemar i mesurar la temperatura.

/// BikeTracker.h

// … #include application "Seeed_SHT35.h" class:: BikeTracker: application:: interface:: IApplication {// … protecteded: // … SHT35 _sht35; float _temperature; // … void MeasureTemperature (buit); } /// BikeTracker.cpp //… // BikeTracker:: BikeTracker (void) //: _ethernet (Ethernet ()), _gnss (GNSS ()) {} // 21 és el número de PIN SCL BikeTracker:: BikeTracker (void): _ethernet (Ethernet ()), _gnss (GNSS ()), _sht35 (SHT35 (21)) {} // … void BikeTracker:: measureTemperature (void) {temperatura flotant, humitat; if (_sht35.read_meas_data_single_shot (HIGH_REP_WITH_STRCH, & temperature, & humity) == NO_ERROR) {_temperature = temperature; }} // …

Si voleu, podeu canviar la pantalla LCD mitjançant el mètode Loop ():

// sprintf (línia2, "Freqüència cardíaca:% d", _heartRate);

MeasureTemperature (); sprintf (línia2, "Temp:% f", _temperatura);

Però, com publicar-lo a PubNub? Heu de canviar els paràmetres codificats de la funció json i sprintf () al mètode PublishToPubNub (), deixeu-ho així:

// 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 HTTP / 1.0 / n / r / n / r ", // _publishKey, _subscribeKey, _channel, _latitude, _longitude, _heartRate); sprintf (cmd, "GET / 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);

A continuació, podeu veure la temperatura a la consola de depuració de PubNub.