Vizualizácia údajov o doprave pomocou mapy Google: 6 krokov
Vizualizácia údajov o doprave pomocou mapy Google: 6 krokov

Obsah:

Anonim
Vizualizácia údajov o doprave pomocou mapy Google
Vizualizácia údajov o doprave pomocou mapy Google

Bežne chceme počas bicyklovania zaznamenávať rôzne údaje, tentokrát sme na ich sledovanie použili nové Wio LTE.

Krok 1: Veci použité v tomto projekte

Hareware komponenty

  • Kompatibilné s Wio LTE EU verzia v1.3- 4G, Cat.1, GNSS, Espruino
  • Grove - snímač srdcového tepu na klip
  • Grove - 16 x 2 LCD (čierna na žltej)

Softvérové aplikácie a online služby

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

Krok 2: Príbeh

Image
Image

Krok 3: Pripojenie hardvéru

Webová konfigurácia
Webová konfigurácia

Nainštalujte si do Wio LTE antény GPS a LTE a zapojte doň svoju SIM kartu. Pripojte snímač srdcovej frekvencie do ucha a LCD monitor 16x2 k portu W20 LTE D20 a I2C.

Senzor srdcovej frekvencie klipu do ucha môžete zmeniť na iné senzory, ktoré sa vám páčia. Pozrite sa na koniec tohto článku.

Krok 4: Webová konfigurácia

Časť 1: PubNub

Kliknite sem, prihláste sa alebo si zaregistrujte účet PubNub, PubNub slúži na prenos údajov v reálnom čase do mapy.

Otvorte demo projekt na administračnom portáli PubNub, uvidíte publikačný kľúč a predplatiteľský kľúč, zapamätajte si ich pre programovanie softvéru.

Časť 2: Mapa Google

Nasledujte sem, aby ste získali kľúč API služby Google Map, ktorý sa bude používať aj v programovaní v softvéri.

Krok 5: Programovanie softvéru

Programovanie softvéru
Programovanie softvéru

Časť 1: Wio LTE

Pretože neexistuje žiadna knižnica PubNub pre Wio LTE, môžeme odosielať naše údaje z požiadavky HTTP, pozrite si dokument PubNub REST API dokument.

Ak chcete vytvoriť pripojenie HTTP prostredníctvom karty SIM zapojenej do siete Wio LTE, najskôr by ste si mali nastaviť APN. Ak to nepoznáte, kontaktujte svojich mobilných operátorov.

Potom nastavte publikačný kľúč PubNub, kľúč na prihlásenie na odber a kanál. Kanál tu slúži na rozlíšenie vydavateľov a predplatiteľov. Tu napríklad používame kanál na bicykli, všetci predplatitelia kanála na bicykli budú dostávať správy, ktoré sme zverejnili.

Vyššie uvedené nastavenia sme v triede nezbalili, aby ste ich mohli na bike.ino jednoduchšie upravovať, tieto kódy si môžete stiahnuť z konca tohto článku.

Časť 2: PubNub

Vo Wio LTE stlačte a podržte kláves Boot0, pripojte ho k počítaču pomocou USB kábla, nahrajte program do Arduino IDE, stlačte kláves Reset vo Wio LTE.

Potom sa obráťte na PubNub, kliknite na Debug Console v demo projekte, zadajte názov kanála do Predvoleného kanála a kliknite na Pridať klienta.

Keď v konzole vidíte [1, „Prihlásené na odber“, „Bicykel“], Účastník bol úspešne pridaný. Chvíľu počkajte, v konzole sa zobrazia údaje Wio LTE.

Časť 3: Mapa Google

Mapy ENO sú mapy v reálnom čase s PubNub a MapBox, dajú sa použiť aj pre PubNub a Google Map, môžete si ich stiahnuť z jeho GitHubu.

V priečinku príkladov môžete jednoducho použiť príklad s názvom google-draw-line.html, v riadkoch 29, 30, 33 a 47 jednoducho upravte kľúč publikovania, kľúč odberu, kanál a kľúč Google.

UPOZORNENIE: Napíšte komentár na riadok 42, inak odošle simulačné údaje do vášho PubNub.

Ak chcete zobraziť graf srdcového tepu v pravom dolnom rohu coeneru, môžete použiť Chart.js, ktorý si môžete stiahnuť z jeho webovej stránky, vložiť ho do koreňového priečinka ENO Maps a zahrnúť ho do hlavy google-draw-line.html.

A pridajte plátno do grafu div na zobrazenie:

Potom vytvorte dve polia na uchovanie údajov grafu

//… var chartLabels = new Array (); var chartData = nové pole (); //…

Medzi nimi sa chartLabels používa na uchovávanie údajov o polohe, chartData sa používa na uchovávanie údajov o srdcovej frekvencii. Keď prídu správy, pošlite im nové údaje a aktualizujte graf.

//… var map = eon.map ({správa: funkcia (správa, časový tok, kanál) {//… chartLabels.push (obj2string (správa [0].latlng)); chartData.push (správa [0].data); var ctx = document.getElementById ("chart"). getContext ('2d'); var chart = new Chart (ctx, {type: 'line', data: {labels: chartLabels, datasets: [{label: " Srdcová frekvencia “, údaje: chartData}]}}); //…}});

Všetko hotové. Skúste to nabudúce zobrať aj na bicykli.

Krok 6: Ako pracovať s iným senzorovým hájom?

V programe Wio LTE si môžete vziať jeden a viac vlastných údajov na zobrazenie v grafe alebo urobiť viac. Nasledujúci článok ukazuje, ako upraviť program tak, aby ho dosiahol.

Prvá vec, ktorú musíte vedieť, je, že json, ktorý chcete publikovať na serveri PubNub, by mal byť kódovaný adresou URL. Kódovaný json je v triede BikeTracker pevne zakódovaný a vyzerá takto:

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

Je teda ľahké vziať si jedno vlastné údaje, alebo môžete použiť nástroje na kódovanie adresy URL a vytvoriť si vlastný kódovaný súbor json, ktorý pojme viac údajov.

Tentokrát sa pokúsime použiť I2C High Accracy Temp & Humi Grove na nahradenie Grove srdcovej frekvencie. Pretože LCD Grove tiež používa I2C, používame I2C Hub na pripojenie Temp & Humi Grove a LCD Grove k Wio LTE.

Potom zahrňte súbor hlavy do BickTracker.h a do triedy BikeTracker pridajte premennú a metódu na ukladanie a meranie teploty.

/// BikeTracker.h

//… #include Aplikácia triedy „Seeed_SHT35.h“:: BikeTracker: application:: interface:: IApplication {//… chránené: //… SHT35 _sht35; float _temperature; //… void MeasureTemperature (void); } /// BikeTracker.cpp //… // BikeTracker:: BikeTracker (neplatné) //: _ethernet (Ethernet ()), _gnss (GNSS ()) {} // 21 je číslo PIN SCL BikeTracker:: BikeTracker (void): _ethernet (Ethernet ()), _gnss (GNSS ()), _sht35 (SHT35 (21)) {} //… void BikeTracker:: MeasTemperature (void) {teplota, vlhkosť; if (_sht35.read_meas_data_single_shot (HIGH_REP_WITH_STRCH, & teplota, & vlhkosť) == NO_ERROR) {_temperature = teplota; }} //…

Ak chcete, môžete zmeniť zobrazenie LCD metódou Loop ():

// sprintf (riadok2, „Tepová frekvencia: %d“, _heartRate);

MeasureTeplota (); sprintf (riadok2, „Teplota: %f“, _teplota);

Ako ho však publikovať na serveri PubNub? V metóde PublishToPubNub () musíte zmeniť kódované parametre funkcie json a sprintf (), nech to vyzerá takto:

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

Potom môžete vidieť teplotu v konzole ladenia PubNub.