Vervoerdatavisualisering met Google Map: 6 stappe

2024 Outeur: John Day | [email protected]. Laas verander: 2024-01-30 07:26

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

Stap 3: Hardewareverbinding

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

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.