Google Xəritə ilə Nəqliyyat Verilərinin Vizualizasiyası: 6 addım

2025 Müəllif: John Day | [email protected]. Son dəyişdirildi: 2025-01-23 12:54

Adətən velosiped sürərkən müxtəlif məlumatları qeyd etmək istəyirik, bu dəfə onları izləmək üçün yeni Wio LTE istifadə etdik.

Addım 1: Bu Layihədə İstifadə Edilən Şeylər

Hareware komponentləri

• Wio LTE EU Version v1.3- 4G, Cat.1, GNSS, Espruino Uyğundur
• Grove - Qulaq klipi Nəbz Sensoru
• Grove - 16 x 2 LCD (Sarıda Qara)

Proqram proqramları və onlayn xidmətlər

• Arduino IDE
• PubNub Publish/Subscribe API
• Google Xəritə

Addım 2: Hekayə

Addım 3: Avadanlıq Bağlantısı

GPS və LTE antenalarını Wio LTE -yə quraşdırın və SİM kartınızı ona qoşun. Qulaq klipsli Nəbz Sensorunu və 16x2 LCD-ni Wio LTE-nin D20 və I2C portuna qoşun.

Qulaq klipi nəbz sensörünü bəyəndiyiniz digər sensorlara dəyişə bilərsiniz. Zəhmət olmasa bu yazının sonuna baxın.

Addım 4: Veb Konfiqurasiyası

1 -ci hissə: PubNub

Buraya daxil olun və ya bir PubNub hesabını qeyd edin, PubNub xəritəyə real vaxt məlumatlarını ötürmək üçün istifadə olunur.

PubNub Admin Portalında Demo Layihəsini açın, bir Yayım Açarını və Abunəlik Açarını görəcəksiniz, proqramlaşdırma üçün xatırlayın.

2 -ci hissə: Google Xəritə

Zəhmət olmasa, Google Map API Açarını əldə etmək üçün bura baxın, proqram təminatında da istifadə ediləcək.

Addım 5: Proqram təminatı

1 -ci hissə: Wio LTE

Wio LTE üçün PubNub kitabxanası olmadığı üçün məlumatlarımızı HTTP sorğusundan göndərə bilərik, PubNub REST API Sənədinə baxın.

Wio LTE -yə qoşulmuş SİM kartınız vasitəsilə HTTP bağlantısı qurmaq üçün əvvəlcə APN -ni təyin etməlisiniz, bunu bilmirsinizsə, mobil operatorlarınızla əlaqə saxlayın.

Və sonra PubNub Nəşr Açarınızı, Abunəlik Açarınızı və Kanalınızı təyin edin. Buradakı kanal, Nəşriyyatları və Abunəçiləri fərqləndirmək üçün istifadə olunur. Məsələn, burada kanal velosipedindən istifadə edirik, kanal velosipedindəki bütün Abunəçilər dərc etdiyimiz mesajları alacaqlar.

Yuxarıdakı parametrləri sinifdə yığmadıq, buna görə də bike.inoda daha asan dəyişdirə bilərsiniz, bu kodları bu məqalənin sonundan yükləyə bilərsiniz.

2 -ci hissə: PubNub

Wio LTE -də Boot0 düyməsini basıb saxlayın, USB kabel vasitəsilə kompüterinizə qoşun, proqramı Arduino IDE -yə yükləyin, Wio LTE -də Sıfırla düyməsini basın.

Sonra PubNub -a müraciət edin, Demo Layihəsində Debug Konsolunu basın, Varsayılan Kanalda kanalınızın adını doldurun, Müştəri Əlavə et düyməsini basın.

Konsolda [1, "Abunə", "Velosiped"] gördükdə Abunəçi uğurla əlavə edildi. Bir az gözləyin, Wio LTE məlumatlarının konsolda göründüyünü görəcəksiniz.

3 -cü hissə: Google Xəritə

ENO Maps, PubNub və MapBox ilə real vaxt xəritələridir, PubNub və Google Xəritə üçün də istifadə edilə bilər, onu GitHub-dan yükləyə bilərsiniz.

Nümunələr qovluğunda google-draw-line.html adlı bir nümunə istifadə edə bilərsiniz, yalnız 29, 30, 33 və 47-ci sətirdə Nəşr Açarını, Abunə Açarını, Kanal və Google Açarını dəyişdirə bilərsiniz.

XƏBƏRDARLIQ: 42 sətirini şərh edin, yoxsa PubNub -a simulyasiya məlumatları göndərəcək.

Sağ alt koenerdə ürək dərəcəsi cədvəlini göstərmək istəyirsinizsə, Chart.js-dən istifadə edə bilərsiniz, onu Veb saytından yükləyə, ENO Xəritələrin kök qovluğuna yerləşdirə və google-draw-line.html-in başına daxil edə bilərsiniz..

Diaqramı göstərmək üçün divə bir kətan əlavə edin:

Sonra qrafik məlumatlarını saxlamaq üçün iki sıra yaradın

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

Onların arasında chartLabels yer məlumatlarını saxlamaq üçün, chartData ürək dərəcəsi məlumatlarını saxlamaq üçün istifadə olunur. Mesajlar gəldikdə onlara yeni məlumatlar göndərin və qrafiki yeniləyin.

//… var map = eon.map ({mesaj: funksiya (mesaj, vaxt, kanal) {//… chartLabels.push (obj2string (mesaj [0].latlng)); chartData.push (mesaj [0]. Məlumat); var ctx = document.getElementById ("chart"). getContext ('2d'); var chart = new Chart (ctx, {type: 'line', data: {labels: chartLabels, data set: [{label: ") Ürək dərəcəsi ", məlumatlar: chartData}]}}); //…}});

Hər şey hazırdır. Növbəti dəfə velosipedinizlə götürməyə çalışın.

Addım 6: Digər Sensor Grove ilə necə işləmək olar?

Wio LTE proqramında, bir və ya daha çox xüsusi məlumatı cədvəldə göstərmək və ya daha çox etmək üçün götürə bilərsiniz. Növbəti məqalə, proqramı əldə etmək üçün onu necə dəyişdirəcəyinizi göstərir.

Bilməniz lazım olan ilk şey, PubNub-da yayımlamaq istədiyiniz jsonun url kodlu olmasıdır. Kodlanmış json, BikeTracker sinifində sərt kodlaşdırılmışdır, belə görünür:

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

Xüsusi bir məlumat almaq asandır və ya url kodlaşdırma vasitələrindən istifadə edərək daha çox məlumat almaq üçün öz kodlaşdırılmış jsonunuzu edə bilərsiniz.

Bu dəfə Heart Rate Grove əvəz etmək üçün I2C High Accracy Temp & Humi Grove istifadə etməyə çalışırıq. LCD Grove da I2C istifadə etdiyindən Temp & Humi Grove və LCD Grove'u Wio LTE ilə birləşdirmək üçün I2C Hub istifadə edirik.

Sonra baş faylını BickTracker.h -ə daxil edin və temperaturu saxlamaq və ölçmək üçün BikeTracker sinifinə bir dəyişkən və metod əlavə edin.

/// BikeTracker.h

//… #"Seeed_SHT35.h" sinif tətbiqini daxil edin:: BikeTracker: application:: interface:: IApplication {//… proteced: //… SHT35 _sht35; float _temperature; //… boş MeasureTemperature (boş); } /// BikeTracker.cpp //… // BikeTracker:: BikeTracker (void) //: _ethernet (Ethernet ()), _gnss (GNSS ()) {} // 21, SCL pin nömrəsi BikeTracker:: BikeTracker (boş): _ethernet (Ethernet ()), _gnss (GNSS ()), _sht35 (SHT35 (21)) {} //… boş BikeTracker:: tedTemperature (void) {üzmə temperaturu, rütubət; əgər (_sht35.read_meas_data_single_shot (HIGH_REP_WITH_STRCH, & temperatur və rütubət) == YOXSUZ) {_temperatur = temperatur; }} //…

İstəyirsinizsə, Loop () metodunda LCD ekranını dəyişə bilərsiniz:

// sprintf (line2, "Nəbz: %d", _heartRate);

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

Bəs PubNub -da necə yayımlamaq olar? PublishToPubNub () metodunda kodlanmış json və sprintf () funksiyasının parametrlərini dəyişdirməlisiniz, belə görünsün:

// sprintf (cmd, "GET/dərc et/%s/%s/0/%s/0/%% 5b %% 7b %% 22latlng %% 22 %% 3a %% 5b%f %% 2c%f% %5d %% 2c %% 22 məlumat %% 22 %% 3a%d %% 7d %% 5d? Mağaza = 0 HTTP/1.0 / n / r / n / r ", // _publishKey, _subscribeKey, _kanal, _litude, _longitude, _heartRate); sprintf (cmd, "GET/yayım/%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, _kanal, _litude, _longitude, _temperature);

Sonra PubNub ayıklama konsolunda temperaturu görə bilərsiniz.