Google Harita ile Ulaşım Verisi Görselleştirme: 6 Adım

2024 Yazar: John Day | [email protected]. Son düzenleme: 2024-01-30 13:19

Genellikle bisiklet sürerken çeşitli verileri kaydetmek istiyoruz, bu sefer onları takip etmek için yeni Wio LTE kullandık.

Adım 1: Bu Projede Kullanılanlar

Donanım bileşenleri

• Wio LTE AB Sürümü v1.3- 4G, Cat.1, GNSS, Espruino Uyumlu
• Grove - Kulak Klipsi Nabız Sensörü
• Koru - 16 x 2 LCD (Sarı Üzerine Siyah)

Yazılım uygulamaları ve çevrimiçi hizmetler

• Arduino IDE'si
• PubNub Yayınla/Abone Ol API'si
• Google Haritalar

2. Adım: Öykü

3. Adım: Donanım Bağlantısı

GPS ve LTE antenlerini Wio LTE'ye kurun ve SIM kartınızı buna takın. Kulak Klipsi Nabız Sensörünü ve 16x2 LCD'yi Wio LTE'nin D20 ve I2C bağlantı noktasına bağlayın.

Kulak Klipsi Kalp Atış Hızı Sensörünü beğendiğiniz diğer sensörlerle değiştirebilirsiniz. Lütfen bu makalenin sonuna bakın.

4. Adım: Web Yapılandırması

Bölüm 1: PubNub

Buraya tıklayın giriş yapın veya bir PubNub hesabı açın, PubNub gerçek zamanlı verileri haritaya iletmek için kullanılır.

PubNub Admin Portal'da Demo Projesi'ni açın, bir Yayınlama Anahtarı ve bir Abonelik Anahtarı göreceksiniz, bunları yazılım programlaması için hatırlayın.

2. Bölüm: Google Haritası

Bir Google Harita API Anahtarı almak için lütfen burayı takip edin, yazılım programlamasında da kullanılacaktır.

Adım 5: Yazılım Programlama

Bölüm 1: Wio LTE

Wio LTE için PubNub kitaplığı olmadığı için HTTP isteğinden verilerimizi gönderebiliriz, bkz. PubNub REST API Belgesi.

Wio LTE'ye takılı SIM kartınız üzerinden HTTP bağlantısı yapmak için öncelikle APN'nizi ayarlamalısınız, bilmiyorsanız lütfen mobil operatörlerinizle iletişime geçin.

Ardından, PubNub Yayınlama Anahtarınızı, Abone Anahtarınızı ve Kanalınızı ayarlayın. Buradaki kanal, Yayıncıları ve Aboneleri ayırt etmek için kullanılır. Örneğin, burada kanal bisikleti kullanıyoruz, kanal bisikletindeki tüm Aboneler yayınladığımız mesajları alacak.

Yukarıdaki ayarları bike.ino'da daha kolay değiştirebilmeniz için sınıfta paketlemedik, bu kodları bu makalenin sonundan indirebilirsiniz.

Bölüm 2: PubNub

Wio LTE'de Boot0 tuşunu basılı tutun, bir USB kablosuyla bilgisayarınıza bağlayın, programı Arduino IDE'ye yükleyin, Wio LTE'de Reset tuşuna basın.

Ardından PubNub'a dönün, Demo Projesinde Debug Konsolu'na tıklayın, Varsayılan Kanal'a kanalınızın adını girin, İstemci Ekle'ye tıklayın.

Konsolda [1, "Abone olundu", "bisiklet"] gördüğünüzde Abone başarıyla eklendi. Bir süre bekleyin, konsolda Wio LTE verilerinin göründüğünü göreceksiniz.

Bölüm 3: Google Haritası

ENO Haritaları, PubNub ve MapBox ile gerçek zamanlı haritalardır, PubNub ve Google Map için de kullanılabilir, GitHub'dan indirebilirsiniz.

Örnekler klasöründe google-draw-line.html adlı bir örneği kullanabilirsiniz, sadece 29, 30, 33 ve 47. satırlarda Yayınlama Anahtarı, Abone Anahtarı, Kanal ve Google Anahtarını değiştirebilirsiniz.

DİKKAT: Lütfen 42. satıra yorum yapın, yoksa simülasyon verilerini PubNub'ınıza gönderir.

Kalp atış hızı grafiğini sağ alt köşede görüntülemek istiyorsanız, Chart.js'yi kullanabilir, Web Sitesinden indirebilir, ENO Haritalar'ın kök klasörüne koyabilir ve google-draw-line.html'nin kafasına ekleyebilirsiniz..

Ve grafiği görüntülemek için bir div'e bir tuval ekleyin:

Ardından, grafik verilerini tutmak için iki dizi oluşturun

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

Bunlar arasında chartLabels konum verilerini tutmak için kullanılır, chartData kalp atış hızı verilerini tutmak için kullanılır. Mesajlar geldiğinde onlara yeni verileri iletin ve grafiği yenileyin.

// … var map = eon.map({ mesaj: 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: " Kalp Atış Hızı", veri: chartData }] } }); // … } });

Hepsi tamam. Bir dahaki sefere bisikletinizle birlikte almaya çalışın.

Adım 6: Diğer Sensör Korusu ile Nasıl Çalışılır?

Wio LTE'nin programında, grafikte görüntülemek veya daha fazlasını yapmak için bir veya daha fazla özel veri alabilirsiniz. Aşağıdaki makale, programın bunu başarmak için nasıl değiştirileceğini gösterir.

Bilmeniz gereken ilk şey, PubNub'da yayınlamak istediğiniz json'un url kodlu olması gerektiğidir. Encoding json, BikeTracker sınıfında sabit kodlanmıştır, şöyle görünür:

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

Bu nedenle, tek bir özel veri almak kolaydır veya daha fazla veri almak üzere kendi kodlanmış json'unuzu oluşturmak için url kodlama araçlarını kullanabilirsiniz.

Bu sefer Heart Rate Grove yerine I2C High Accracy Temp & Humi Grove kullanmaya çalışıyoruz. LCD Grove ayrıca I2C kullandığından, Temp & Humi Grove ve LCD Grove'u Wio LTE'ye bağlamak için bir I2C Hub kullanıyoruz.

Ardından BickTracker.h'ye head dosyasını ekleyin ve sıcaklığı depolamak ve ölçmek için BikeTracker sınıfına bir değişken ve bir yöntem ekleyin.

/// BikeTracker.h

// … #include "Seeed_SHT35.h" sınıfı application::BikeTracker: application::interface::IApplication { // … korumalı: // … SHT35 _sht35; float _temperature; // … void MeasureTemperature(void); } /// BikeTracker.cpp // … // BikeTracker::BikeTracker(void) //: _ethernet(Ethernet()), _gnss(GNSS()) { } // 21, SCL pin numarası BikeTracker::BikeTracker(void): _ethernet(Ethernet()), _gnss(GNSS()), _sht35(SHT35(21)) { } // … void BikeTracker::measureTemperature(void) { float sıcaklık, nem; if (_sht35.read_meas_data_single_shot(HIGH_REP_WITH_STRCH, &sıcaklık, &nem) == NO_ERROR) { _temperature = sıcaklık; } } // …

İsterseniz LCD'nin görüntüsünü Loop() yöntemiyle değiştirebilirsiniz:

// sprintf(line2, "Kalp Hızı: %d", _heartRate);

Sıcaklık Ölçüsü(); sprintf(line2, "Sıcaklık: %f", _sıcaklık);

Ama bunu PubNub'da nasıl yayınlarım? PublishToPubNub() yönteminde kodlanmış json ve sprintf() işlevinin parametrelerini değiştirmeniz gerekiyor, şöyle görünsün:

// sprintf(cmd, GET /yayınla/%s/%s/0/%s/0/%5b%%7b%%%22latlng%%22%3a%%5b%f%%2c%f% %5d%%2c%%22data%%22%%3a%d%%7d%%5d?store=0

// _publishKey, _subscribeKey, _channel, _latitude, _longitude, _heartRate); sprintf(cmd, "GET /yayınla/%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);

Ardından, PubNub hata ayıklama konsolunda sıcaklığı görebilirsiniz.