Spisu treści:

Wizualizacja danych transportowych za pomocą mapy Google: 6 kroków
Wizualizacja danych transportowych za pomocą mapy Google: 6 kroków

Wideo: Wizualizacja danych transportowych za pomocą mapy Google: 6 kroków

Wideo: Wizualizacja danych transportowych za pomocą mapy Google: 6 kroków
Wideo: Tableau - Wizualizacja danych na mapach cz. 1 2024, Lipiec
Anonim
Wizualizacja danych transportowych z Google Map
Wizualizacja danych transportowych z Google Map

Zazwyczaj podczas jazdy na rowerze chcemy rejestrować różne dane, tym razem do ich śledzenia wykorzystaliśmy nowe Wio LTE.

Krok 1: Rzeczy użyte w tym projekcie

Komponenty sprzętowe

  • Wio LTE EU Wersja v1.3- 4G, Cat.1, GNSS, kompatybilna z Espruino
  • Grove - klips na ucho czujnik tętna
  • Grove - 16 x 2 LCD (czarny na żółty)

Aplikacje i usługi online

  • IDE Arduino
  • PubNub Publikuj/Subskrybuj API
  • mapy Google

Krok 2: Historia

Image
Image

Krok 3: Połączenie sprzętowe

Konfiguracja sieciowa
Konfiguracja sieciowa

Zainstaluj anteny GPS i LTE do Wio LTE i podłącz do niego kartę SIM. Podłącz zaczep na ucho czujnik tętna i wyświetlacz LCD 16x2 do portu D20 i I2C Wio LTE.

Możesz zmienić czujnik tętna z klipsem na ucho na inne czujniki, które Ci się podobają. Zobacz koniec tego artykułu.

Krok 4: Konfiguracja sieciowa

Część 1: PubNub

Kliknij tutaj zaloguj się lub zarejestruj konto PubNub, PubNub służy do przesyłania danych w czasie rzeczywistym do mapy.

Otwórz projekt demonstracyjny w portalu administracyjnym PubNub, zobaczysz klucz publikowania i klucz subskrypcji, zapamiętaj je do programowania oprogramowania.

Część 2: Mapa Google

Kliknij tutaj, aby uzyskać klucz Google Map API Key, będzie on również używany w programowaniu oprogramowania.

Krok 5: Programowanie oprogramowania

Programowanie oprogramowania
Programowanie oprogramowania

Część 1: Wio LTE

Ponieważ nie ma biblioteki PubNub dla Wio LTE, możemy wysyłać nasze dane z żądania HTTP, patrz dokument PubNub REST API.

Aby nawiązać połączenie HTTP za pomocą karty SIM podłączonej do Wio LTE, należy najpierw ustawić swój APN, jeśli tego nie wiesz, skontaktuj się z operatorami komórkowymi.

Następnie ustaw klucz publikacji PubNub, klucz subskrypcji i kanał. Kanał tutaj służy do rozróżniania wydawców i subskrybentów. Na przykład używamy tutaj roweru kanału, wszyscy abonenci w rowerze kanału otrzymają opublikowane przez nas wiadomości.

Powyższe ustawienia nie spakowaliśmy klasowo, aby łatwiej było je modyfikować w bike.ino, te kody można pobrać z końca tego artykułu.

Część 2: PubNub

Naciśnij i przytrzymaj klawisz Boot0 w Wio LTE, podłącz go do komputera kablem USB, wgraj program w Arduino IDE, naciśnij klawisz Reset w Wio LTE.

Następnie przejdź do PubNub, kliknij Debug Console w Demo Project, wpisz nazwę swojego kanału w Default Channel, kliknij Add Client.

Gdy zobaczysz [1, „Subskrybowany”, „rower”] w konsoli, Abonent został pomyślnie dodany. Poczekaj chwilę, w konsoli pojawią się dane Wio LTE.

Część 3: Mapa Google

Mapy ENO to mapy czasu rzeczywistego z PubNub i MapBox, mogą być również używane do PubNub i Google Map, możesz je pobrać z GitHub.

Możesz po prostu użyć przykładu o nazwie google-draw-line.html w folderze przykładów, po prostu zmodyfikuj klucz publikowania, klucz subskrypcji, kanał i klucz Google w wierszach 29, 30, 33 i 47.

UWAGA: Proszę o komentarz wiersz 42, w przeciwnym razie wyśle dane symulacji do Twojego PubNub.

Jeśli chcesz wyświetlić wykres tętna w prawym dolnym rogu, możesz użyć Chart.js, można go pobrać z jego strony internetowej, umieścić w folderze głównym ENO Maps i umieścić w nagłówku google-draw-line.html.

I dodaj płótno w div, aby wyświetlić wykres:

Następnie utwórz dwie tablice do przechowywania danych wykresu

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

Wśród nich chartLabels służy do przechowywania danych o lokalizacji, chartData służy do przechowywania danych o tętnie. Gdy nadejdą wiadomości, prześlij do nich nowe dane i odśwież wykres.

// … 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: { label: chartLabels, datasets: [{ label: " Tętno", dane: chartData }] } }); // … } });

Wszystko gotowe. Spróbuj następnym razem zabrać go ze sobą na rower.

Krok 6: Jak pracować z innymi czujnikami Grove?

W programie Wio LTE możesz wziąć jedną lub więcej niestandardowych danych do wyświetlenia na wykresie lub zrobić więcej. Poniższy artykuł pokazuje, jak zmodyfikować program, aby to osiągnąć.

Pierwszą rzeczą, którą musisz wiedzieć, jest to, że json, który chcesz opublikować w PubNub, powinien być zakodowany w adresie URL. Zakodowany json jest zakodowany na sztywno w klasie BikeTracker, wygląda to tak:

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

Dzięki temu łatwo jest pobrać jedno niestandardowe dane lub możesz użyć narzędzi do kodowania adresów URL, aby utworzyć własny zakodowany plik json, aby pobrać więcej danych.

Tym razem próbujemy użyć I2C High Accracy Temp & Humi Grove, aby zastąpić Heart Rate Grove. Ponieważ LCD Grove również używa I2C, używamy koncentratora I2C do połączenia Temp & Humi Grove i LCD Grove z Wio LTE.

Następnie dołącz plik nagłówka do BickTracker.h i dodaj zmienną i metodę do klasy BikeTracker, aby przechowywać i mierzyć temperaturę.

/// BikeTracker.h

// … #include "Seeed_SHT35.h" klasa application::BikeTracker: application::interface::IApplication { // … proteced: // … SHT35 _sht35; pływak _temperatura; // … void MeasureTemperature(void); } /// BikeTracker.cpp // … // BikeTracker::BikeTracker(void) //: _ethernet(Ethernet()), _gnss(GNSS()) { } // 21 to numer PIN SCL BikeTracker::BikeTracker(void): _ethernet(Ethernet()), _gnss(GNSS()), _sht35(SHT35(21)) { } // … void BikeTracker::measureTemperature(void) { float temperatura, wilgotność; if (_sht35.read_meas_data_single_shot(HIGH_REP_WITH_STRCH, &temperatura, &wilgotność) == BRAK_BŁĘDU) { _temperatura = temperatura; } } // …

Jeśli chcesz, możesz zmienić wyświetlacz LCD w metodzie Loop():

// sprintf(line2, "Tętno: %d", _heartRate);

ZmierzTemperaturę(); sprintf(linia2, "Temp: %f", _temperatura);

Ale jak to opublikować w PubNub? Musisz zmienić zakodowane parametry funkcji json i sprintf() w metodzie PublishToPubNub(), niech wygląda to tak:

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

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

Następnie możesz zobaczyć temperaturę w konsoli debugowania PubNub.

Zalecana: