Visualisation des données de transport avec Google Map : 6 étapes

2024 Auteur: John Day | [email protected]. Dernière modifié: 2024-01-30 09:08

Nous voulons généralement enregistrer diverses données pendant le vélo, cette fois nous avons utilisé le nouveau Wio LTE pour les suivre.

Étape 1: Éléments utilisés dans ce projet

Composants Hareware

• Wio LTE EU Version v1.3-4G, Cat.1, GNSS, Compatible Espruino
• Grove - Capteur de fréquence cardiaque avec clip d'oreille
• Grove - LCD 16 x 2 (noir sur jaune)

Applications logicielles et services en ligne

• IDE Arduino
• API de publication/abonnement PubNub
• Google Maps

Étape 2: Histoire

Étape 3: connexion matérielle

Installez les antennes GPS et LTE sur Wio LTE et branchez-y votre carte SIM. Connectez le capteur de fréquence cardiaque à clip d'oreille et l'écran LCD 16x2 aux ports D20 et I2C de Wio LTE.

Vous pouvez remplacer le capteur de fréquence cardiaque avec clip d'oreille par d'autres capteurs que vous aimez. S'il vous plaît voir la fin de cet article.

Étape 4: Configuration Web

Partie 1: PubNub

Cliquez ici pour vous connecter ou créer un compte PubNub, PubNub est utilisé pour transmettre des données en temps réel à la carte.

Ouvrez le projet de démonstration dans le portail d'administration PubNub, vous verrez une clé de publication et une clé d'abonnement, mémorisez-les pour la programmation logicielle.

Partie 2: Google Map

Veuillez suivre ici pour obtenir une clé API Google Map, elle sera également utilisée dans la programmation de logiciels.

Étape 5: Programmation du logiciel

Partie 1: Wio LTE

Comme il n'y a pas de bibliothèque PubNub pour Wio LTE, nous pouvons envoyer nos données à partir d'une requête HTTP, voir PubNub REST API Document.

Pour établir une connexion HTTP via votre carte SIM branchée sur Wio LTE, vous devez d'abord configurer votre APN, si vous ne le savez pas, veuillez contacter vos opérateurs mobiles.

Ensuite, définissez votre clé de publication PubNub, votre clé d'abonnement et votre canal. Le canal ici, est utilisé pour différencier les éditeurs et les abonnés. Par exemple, nous utilisons ici channel bike, tous les abonnés de channel bike recevront les messages que nous avons publiés.

Les paramètres ci-dessus, nous n'avons pas emballé en classe, afin que vous puissiez les modifier plus facilement dans bike.ino, vous pouvez télécharger ces codes à partir de la fin de cet article.

Partie 2: PubNub

Appuyez et maintenez la touche Boot0 dans Wio LTE, connectez-la à votre ordinateur via un câble USB, téléchargez le programme dans Arduino IDE, appuyez sur la touche Reset dans Wio LTE.

Ensuite, tournez-vous vers PubNub, cliquez sur Debug Console dans Demo Project, remplissez le nom de votre canal dans Default Channel, cliquez sur Add Client.

Lorsque vous voyez [1, "Abonné", "vélo"] dans la console, l'abonné a été ajouté avec succès. Attendez un moment, vous verrez les données Wio LTE apparaître dans la console.

Partie 3: Google Map

Les cartes ENO sont des cartes en temps réel avec PubNub et MapBox, elles peuvent également être utilisées pour PubNub et Google Map, vous pouvez les télécharger depuis son GitHub.

Vous pouvez simplement utiliser un exemple nommé google-draw-line.html dans le dossier des exemples, modifiez simplement la clé de publication, la clé d'abonnement, la chaîne et la clé Google aux lignes 29, 30, 33 et 47.

AVIS: Veuillez commenter la ligne 42, ou les données de simulation seront envoyées à votre PubNub.

Si vous souhaitez afficher le graphique de fréquence cardiaque dans le coin inférieur droit, vous pouvez utiliser Chart.js, il peut être téléchargé à partir de son site Web, le mettre dans le dossier racine d'ENO Maps et l'inclure dans la tête de google-draw-line.html.

Et ajoutez un canevas dans un div pour afficher le graphique:

Créez ensuite deux tableaux pour conserver les données du graphique

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

Parmi eux, chartLabels est utilisé pour conserver les données de localisation, chartData est utilisé pour conserver les données de fréquence cardiaque. Lorsque des messages arrivent, envoyez-leur de nouvelles données et actualisez le graphique.

// … 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: " Fréquence cardiaque", données: chartData }] } }); // … } });

Terminé. Essayez de l'emporter avec votre vélo la prochaine fois.

Étape 6: Comment travailler avec d'autres capteurs Grove ?

Dans le programme de Wio LTE, vous pouvez prendre une ou plusieurs données personnalisées à afficher dans le graphique ou en faire plus. L'article suivant montre comment modifier le programme pour y parvenir.

La première chose que vous devez savoir est que le json que vous souhaitez publier sur PubNub doit être codé en URL. Json codé est codé en dur dans la classe BikeTracker, il ressemble à ceci:

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

Il est donc facile de prendre une donnée personnalisée, ou vous pouvez utiliser des outils d'encodage d'URL pour créer votre propre json encodé afin de prendre plus de données.

Cette fois, nous essayons d'utiliser I2C High Accracy Temp & Humi Grove pour remplacer Heart Rate Grove. Étant donné que le LCD Grove utilise également I2C, nous utilisons un hub I2C pour connecter Temp & Humi Grove et LCD Grove à Wio LTE.

Incluez ensuite le fichier head dans BickTracker.h et ajoutez une variable et une méthode à la classe BikeTracker pour stocker et mesurer la température.

/// BikeTracker.h

// … #include "Seeed_SHT35.h" classe application::BikeTracker: application::interface::IApplication { // … protégé: // … SHT35 _sht35; float _temperature; // … void MeasureTemperature(void); } /// BikeTracker.cpp // … // BikeTracker::BikeTracker(void) //: _ethernet(Ethernet()), _gnss(GNSS()) { } // 21 est le numéro de broche SCL BikeTracker::BikeTracker(void): _ethernet(Ethernet()), _gnss(GNSS()), _sht35(SHT35(21)) { } // … void BikeTracker::measureTemperature(void) { float température, humidité; if (_sht35.read_meas_data_single_shot(HIGH_REP_WITH_STRCH, &temperature, &humidity) == NO_ERROR) { _temperature = temperature; } } // …

Si vous le souhaitez, vous pouvez modifier l'affichage de l'écran LCD dans la méthode Loop():

// sprintf(line2, "Fréquence cardiaque: %d", _heartRate);

MesureTempérature(); sprintf(ligne2, "Temp: %f", _temperature);

Mais comment le publier sur PubNub ? Vous devez modifier les paramètres des fonctions json et sprintf () encodées dans la méthode PublishToPubNub (), que cela ressemble à ceci:

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

Ensuite, vous pouvez voir la température dans la console de débogage PubNub.