Vervoerdatavisualisering met Google Map: 6 stappe
Vervoerdatavisualisering met Google Map: 6 stappe

INHOUDSOPGAWE:

Anonim
Vervoerdatavisualisering met Google Map
Vervoerdatavisualisering met Google Map

Ons wil gewoonlik verskillende data tydens fietsry opneem, hierdie keer het ons nuwe Wio LTE gebruik om dit op te spoor.

Stap 1: Dinge wat in hierdie projek gebruik word

Hareware -komponente

  • Wio LTE EU-weergawe v1.3- 4G, Cat.1, GNSS, versoenbaar met Espruino
  • Grove - oorklem hartklop sensor
  • Grove - 16 x 2 LCD (swart op geel)

Sagteware -programme en aanlyndienste

  • Arduino IDE
  • PubNub publiseer/teken in
  • Google kaarte

Stap 2: Verhaal

Image
Image

Stap 3: Hardewareverbinding

Webkonfigurasie
Webkonfigurasie

Installeer GPS- en LTE -antennas op Wio LTE en koppel u SIM -kaart daaraan. Koppel die oorklem-hartklopsensor en 16x2 LCD aan die D20- en I2C-poort van Wio LTE.

U kan die oorklem-hartklopsensor verander na ander sensors waarvan u hou. Sien die einde van hierdie artikel.

Stap 4: Webkonfigurasie

Deel 1: PubNub

Klik hier om aan te meld of registreer 'n PubNub-rekening; PubNub word gebruik om intydse data na die kaart te stuur.

As u 'n demo -projek in die PubNub Admin Portal oopmaak, sien u 'n publiseer -sleutel en 'n intekeningsleutel, onthou dit vir sagteware -programmering.

Deel 2: Google Map

Volg hier om 'n Google Map API -sleutel te kry; dit sal ook in sagteware -programmering gebruik word.

Stap 5: sagteware programmering

Programmatuurprogrammering
Programmatuurprogrammering

Deel 1: Wio LTE

Omdat daar geen PubNub -biblioteek vir Wio LTE is nie, kan ons ons data vanaf HTTP -versoek stuur, sien PubNub REST API -dokument.

Om 'n HTTP -verbinding te maak via u Wio LTE -SIM -kaart, moet u eers u APN instel. As u dit nie weet nie, kontak asseblief u selfoonoperateurs.

Stel dan u PubNub -publiseringsleutel, intekeningsleutel en kanaal in. Die kanaal hier word gebruik om uitgewers en intekenare te onderskei. Ons gebruik byvoorbeeld kanaalfiets hier; alle intekenaars op kanaalfiets sal boodskappe ontvang wat ons gepubliseer het.

Bogenoemde instellings het ons nie in die klas ingepak nie, sodat u dit makliker in bike.ino kan verander, en u kan hierdie kodes aan die einde van hierdie artikel aflaai.

Deel 2: PubNub

Hou die Boot0 -sleutel in Wio LTE ingedruk, verbind dit met u rekenaar via 'n USB -kabel, laai die program op in Arduino IDE, druk die reset -sleutel in Wio LTE.

Gaan dan na PubNub, klik op Ontfoutkonsole in demonstrasieprojek, vul die naam van u kanaal in die standaardkanaal, klik op Voeg kliënt by.

As u [1, "ingeteken", "fiets"] in die konsole sien, is die intekenaar suksesvol bygevoeg. Wag 'n rukkie, u sien Wio LTE -data in die konsole verskyn.

Deel 3: Google Map

ENO Maps is intydse kaarte met PubNub en MapBox, dit kan ook gebruik word vir PubNub en Google Map; u kan dit aflaai vanaf die GitHub.

U kan eenvoudig 'n voorbeeld met die naam google-draw-line.html in die gids met voorbeelde gebruik, net Publiseer sleutel, Teken sleutel, Kanaal en Google Sleutel in reël 29, 30, 33 en 47 aan.

KENNISGEWING: lewer kommentaar op reël 42, anders stuur dit simulasiedata na u PubNub.

As u die hartklopgrafiek in die regterkantste hoekvenster wil vertoon, kan u Chart.js gebruik, dit kan van die webwerf afgelaai word, in die wortelmap van ENO Maps geplaas word en by die kop van google-draw-line.html ingesluit word.

En voeg 'n doek in 'n div om die grafiek te vertoon:

Skep dan twee skikkings om grafiekdata te bewaar

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

Onder hulle word chartLabels gebruik om liggingsdata te bewaar, chartData word gebruik om hartklopdata te hou. As boodskappe kom, stuur nuwe data na hulle en verfris die grafiek.

//… var map = eon.map ({message: function (message, timetoken, channel) {//… chartLabels.push (obj2string (message [0].latlng)); chartData.push (message [0].data); var ctx = document.getElementById ("grafiek"). getContext ('2d'); var chart = nuwe grafiek (ctx, {tipe: 'lyn', data: {labels: chartLabels, datastelle: [{label: " Hartklop ", data: chartData}]}}); //…}});

Alles klaar. Probeer dit die volgende keer saam met u fietsry.

Stap 6: Hoe om te werk met ander Sensor Grove?

In die Wio LTE -program kan u een en meer persoonlike data neem om in die grafiek te vertoon of meer te doen. Die volgende artikel wys hoe u die program kan aanpas om dit te bereik.

Die eerste ding wat u moet weet, is dat die json wat u aan PubNub wil publiseer, url-gekodeer moet wees. Gekodeerde json is hardgekodeer in die BikeTracker-klas, dit lyk so:

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

Dit is dus maklik om een aangepaste data te neem, of u kan hulpmiddels vir url-kode gebruik om u eie json te maak om meer data te neem.

Hierdie keer probeer ons I2C High Accracy Temp & Humi Grove gebruik om Heart Rate Grove te vervang. Omdat die LCD Grove ook I2C gebruik, gebruik ons 'n I2C Hub om Temp & Humi Grove en LCD Grove aan Wio LTE te koppel.

Voeg dan die hooflêer by BickTracker.h, en voeg 'n veranderlike en 'n metode by die BikeTracker -klas om die temperatuur op te slaan en te meet.

/// BikeTracker.h

//… #sluit die "Seeed_SHT35.h" klasprogram in: BikeTracker: toepassing:: koppelvlak:: IApplication {// … proteced: // … SHT35 _sht35; vlot _temperatuur; //… void MeasureTemperature (leeg); } /// BikeTracker.cpp // … // BikeTracker:: BikeTracker (leeg) //: _ethernet (Ethernet ()), _gnss (GNSS ()) {} // 21 is die SCL -speldommer BikeTracker:: BikeTracker (void): _ethernet (Ethernet ()), _gnss (GNSS ()), _sht35 (SHT35 (21)) {} //… void BikeTracker:: measureTemperature (void) {float temperature, humiditeit; as (_sht35.read_meas_data_single_shot (HIGH_REP_WITH_STRCH, & temperatuur, & humiditeit) == NO_ERROR) {_temperature = temperatuur; }} //…

As u wil, kan u die LCD -skerm in Loop () -metode verander:

// sprintf (line2, "Heart Rate: %d", _heartRate);

MeasureTemperature (); sprintf (reël2, "Temp: %f", _temperatuur);

Maar hoe kan u dit op PubNub publiseer? U moet die parameters van die gekodeerde json- en sprintf () -funksie verander in die PublishToPubNub () -metode, laat dit so lyk:

// 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);

Dan kan u die temperatuur in PubNub -ontfoutingskonsole sien.