Pagpapakita sa Data ng Transportasyon Sa Google Map: 6 Mga Hakbang

2024 May -akda: John Day | [email protected]. Huling binago: 2024-01-30 13:13

Karaniwan naming nais na maitala ang iba't ibang mga data sa panahon ng pagbibisikleta, sa oras na ito gumamit kami ng bagong Wio LTE upang subaybayan ang mga ito.

Hakbang 1: Mga Bagay na Ginamit sa Project na Ito

Mga bahagi ng pag-iingat

• Wio LTE Bersyon ng EU v1.3- 4G, Cat.1, GNSS, Espruino Tugma
• Grove - Sensor sa Rate ng Puso na-tainga sa Tainga
• Grove - 16 x 2 LCD (Itim sa Dilaw)

Mga software app at serbisyong online

• Arduino IDE
• PubNub Publish / Subscribe API
• mapa ng Google

Hakbang 2: Kwento

Hakbang 3: Koneksyon sa Hardware

I-install ang mga antena ng GPS at LTE sa Wio LTE at isaksak dito ang iyong SIM card. Ikonekta ang Ear-clip Heart Rate Sensor at 16x2 LCD sa Wio LTE's D20 at I2C port.

Maaari mong baguhin ang Ear-clip Heart Rate Sensor sa iba pang mga sensor na gusto mo. Mangyaring tingnan ang pagtatapos ng artikulong ito.

Hakbang 4: Pag-configure sa Web

Bahagi 1: PubNub

Mag-click dito mag-login o magrehistro ng isang PubNub account, ginagamit ang PubNub upang magpadala ng real-time na data sa mapa.

Buksan ang Demo Project sa PubNub Admin Portal, makikita mo ang isang I-publish ang Susi at isang Susi ng Pag-subscribe, alalahanin ang mga ito para sa software ng software.

Bahagi 2: Google Map

Mangyaring sundin dito upang makakuha ng isang Google Map API Key, gagamitin ito sa pag-program din ng sofware.

Hakbang 5: Programming ng Software

Bahagi 1: Wio LTE

Dahil walang library ng PubNub para sa Wio LTE, maaari naming ipadala ang aming data mula sa kahilingan sa HTTP, tingnan ang PubNub REST API Document.

Upang makagawa ng isang koneksyon sa HTTP sa pamamagitan ng iyong naka-plug na SIM card sa Wio LTE, dapat mo munang itakda ang iyong APN, kung hindi mo alam iyon, mangyaring makipag-ugnay sa iyong mga mobile operator.

At pagkatapos, itakda ang iyong PubNub Publish Key, Subscribe Key at Channel. Ang channel dito, ay ginagamit upang makilala ang mga Publisher at Subscriber. Halimbawa, gumagamit kami ng channel bike dito, ang lahat ng Mga Subcriber sa channel bike ay makakatanggap ng mga mensahe na nai-publish namin.

Ang mga setting sa itaas, hindi namin naka-pack sa klase, upang mas madali mong mabago ang mga ito sa bike.ino, maaari mong i-download ang mga code na ito mula sa pagtatapos ng artikulong ito.

Bahagi 2: PubNub

Pindutin nang matagal ang Boot0 key sa Wio LTE, ikonekta ito sa iyong computer sa pamamagitan ng isang USB cable, i-upload ang programa sa Arduino IDE, pindutin ang I-reset ang key sa Wio LTE.

Pagkatapos ay lumiko sa PubNub, i-click ang Debug Console sa Demo Project, punan ang pangalan ng iyong channel sa Default Channel, i-click ang Magdagdag ng Client.

Kapag nakita mo ang [1, "Naka-subscribe", "bisikleta"] sa console, matagumpay na naidagdag ang Subscriber. Maghintay para sa isang sandali, makikita mo ang data ng Wio LTE na lilitaw sa console.

Bahagi 3: Google Map

Ang ENO Maps ay mga real-time na mapa na may PubNub at MapBox, maaari mo ring magamit para sa PubNub at Google Map, maaari mo itong i-download mula sa GitHub.

Maaari mo lamang gamitin ang isang halimbawa na pinangalanang google-draw-line.html sa mga folder ng mga halimbawa, baguhin lamang ang I-publish ang Key, Mag-subscribe Key, Channel at Google Key sa linya 29, 30, 33 at 47.

PAUNAWA: Mangyaring magkomento sa linya 42, o magpapadala ito ng data ng simulation sa iyong PubNub.

Kung nais mong ipakita ang tsart ng rate ng puso sa kanang kanang coener, maaari mong gamitin ang Chart.js, maaari itong mai-download mula sa Website, ilagay ito sa root folder ng ENO Maps, at isama ito sa ulo ng google-draw-line.html.

At magdagdag ng isang canvas sa isang div upang ipakita ang tsart:

Pagkatapos ay lumikha ng dalawang mga array upang mapanatili ang data ng tsart

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

Kabilang sa mga ito, ginagamit ang chartLabels upang mapanatili ang data ng lokasyon, ginagamit ang chartData upang mapanatili ang data ng rate ng puso. Kapag dumating ang mga mensahe, itulak ang bagong data sa kanila, at i-refresh ang tsart.

//… 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: {labels: chartLabels, datasets: [{label: " Rate ng Puso ", data: chartData}]}}); //…}});

Tapos na. Subukang dalhin ito sa iyong pagbibisikleta sa susunod.

Hakbang 6: Paano Magtrabaho Sa Iba Pang Sensor Grove?

Sa programa ng Wio LTE, maaari kang kumuha ng isa at maraming pasadyang data upang maipakita sa tsart o gumawa ng higit pa. Ipinapakita ng sumusunod na artikulo kung paano baguhin ang programa upang makamit ito.

Ang unang bagay na kailangan mong malaman ay, ang json na nais mong mai-publish sa PubNub, dapat na naka-encode ng url. Ang naka-encode na json ay hard-code sa klase ng BikeTracker, ganito ang hitsura:

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

Kaya madaling kumuha ng isang pasadyang data, o maaari kang gumamit ng mga tool na url-encode upang makagawa ng iyong sariling naka-encode na json upang kumuha ng mas maraming data.

Sa oras na ito ay susubukan naming gamitin ang I2C High Accracy Temp & Humi Grove upang mapalitan ang Heart Rate Grove. Dahil gumagamit din ng I2C ang LCD Grove, gumagamit kami ng I2C Hub upang ikonekta ang Temp & Humi Grove at LCD Grove sa Wio LTE.

Pagkatapos ay isama ang head file sa BickTracker.h, at magdagdag ng isang maaaring paniwalaan at isang pamamaraan sa klase ng BikeTracker upang maiimbak at sukatin ang temperatura.

/// BikeTracker.h

//… #include application na "Seeed_SHT35.h" class application:: BikeTracker: application:: interface:: IApplication {//… proteced: // … SHT35 _sht35; lumutang _temperature; //… walang bisa MeasureTemperature (walang bisa); } /// BikeTracker.cpp //… // BikeTracker:: BikeTracker (void) //: _ethernet (Ethernet ()), _gnss (GNSS ()) {} // 21 ay ang numero ng pin ng SCL na BikeTracker:: BikeTracker (void): _ethernet (Ethernet ()), _gnss (GNSS ()), _sht35 (SHT35 (21)) {} //… void BikeTracker:: measureTemperature (void) {float temperatura, halumigmig; kung (_sht35.read_meas_data_single_shot (HIGH_REP_WITH_STRCH, & temperatura, at halumigmig) == NO_ERROR) {_temperature = temperatura; }} //…

Kung nais mo, maaari mong baguhin ang pagpapakita ng LCD sa Loop () na pamamaraan:

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

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

Ngunit paano mai-publish ito sa PubNub? Kailangan mong palitan ang mga naka-encode na json at sprintf () na mga parameter ng pagpapaandar sa pamamaraang PublishToPubNub (), hayaan mong ganito ang hitsura:

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

Pagkatapos ay makikita mo ang temperatura sa PubNub debug console.