Visualisation de la pollution atmosphérique : 4 étapes

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

Le problème de la pollution de l'air attire de plus en plus l'attention. Cette fois, nous avons essayé de surveiller les PM2.5 avec Wio LTE et le nouveau capteur Laser PM2.5.

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

Composants matériels

• Wio LTE EU Version v1.3-4G, Cat.1, GNSS, Compatible Espruino
• Grove - Capteur laser PM2.5 (HM3301)
• Grove - 16 x 2 LCD (blanc sur bleu)

Applications logicielles et services en ligne

• IDE Arduino
• API de publication/abonnement PubNub

Étape 2: connexion matérielle

Comme sur l'image ci-dessus, nous avons coupé 2 lignes de bosquet pour la communication I2C, de sorte que Wio LTE puisse se connecter à LCD Grove et PM2.5 Sensor Grove en même temps. Vous pouvez également utiliser un hub I2C pour y parvenir.

Et n'oubliez pas, connectez l'antenne LTE à Wio LTE et branchez votre carte SIM dessus.

Étape 3: configuration Web

Cliquez ici pour vous connecter ou enregistrer un compte PubNub, il sera utilisé pour transmettre des données en temps réel.

Dans le portail d'administration PubNub, vous verrez un projet de démonstration. Entrez dans le projet, il y a 2 clés, Publish Key et Subscribe Key, mémorisez-les pour la programmation logicielle.

Étape 4: Programmation du logiciel

Partie 1. Wio LTE

Comme il n'y a pas de bibliothèque PubNub pour Wio LTE, nous pouvons publier nos données en temps réel via une requête HTTP, voir PubNub REST API Document.

Pour établir une connexion HTTP depuis votre carte SIM branchée sur Wio LTE, vous devez d'abord configurer votre APN. Si vous ne le savez pas, veuillez contacter votre opérateur mobile.

Et définissez votre clé de publication PubNub, votre clé d'abonnement et votre canal après avoir défini l'APN. Un canal ici est utilisé pour différencier les éditeurs et les abonnés, les abonnés recevront des données des éditeurs qui ont le même canal.

Appuyez et maintenez enfoncé le bouton Boot0 dans Wio LTE, connectez-le à votre ordinateur via un câble USB, téléchargez le code dans Arduino IDE dessus. Après le téléchargement, appuyez sur le bouton RST pour réinitialiser Wio LTE.

Partie 2. Page Web

Tournez-vous vers PubNub, entrez Demo Keyset et cliquez sur Debug Console sur la gauche, cela ouvrira une nouvelle page.

Remplissez le nom de votre chaîne dans la zone de texte Chaîne par défaut, puis cliquez sur le bouton Ajouter un client. Attendez un moment, vous verrez les valeurs PM1.0, PM2.5 et PM10 apparaître dans la console de débogage.

Mais ce n'est pas convivial pour nous, nous envisageons donc de l'afficher sous forme de graphique.

Tout d'abord, créez un nouveau fichier html sur votre ordinateur. Ouvrez-le par un éditeur de texte, ajoutez-y des balises html de base.

Ajoutez ensuite le script de PubNub et Chart.js à la tête, vous pouvez également ajouter un titre à cette page.

Moniteur de poussière de graines

Il devrait y avoir un endroit pour afficher un graphique, nous ajoutons donc un canevas au corps de la page.

Et ajoutez une balise de script afin que nous puissions ajouter du javascript pour souscrire des données en temps réel et dessiner le graphique.

Pour souscrire des données en temps réel à partir de PubNub, il devrait y avoir un objet PubNub, var pubnub = new PubNub({

publierKey: " ", subscribeKey: "" });

et ajoutez-y un écouteur.

pubnub.addListener({

message: fonction (msg) { } });

Le membre du message dans le paramètre msg de la fonction message correspond aux données dont nous avons besoin. Nous pouvons maintenant souscrire aux données en temps réel de PubNub:

pubnub.subscribe({

canal: ["poussière"] });

Mais comment l'afficher sous forme de graphique ? Nous avons créé 4 tableaux pour conserver les données en temps réel:

var chartLabels = new Array();

var chartPM1Data = new Array(); var chartPM25Data = new Array(); var chartPM10Data = new Array();

Parmi eux, le tableau chartLabels est utilisé pour conserver l'heure à laquelle les données ont atteint, chartPM1Data, chartPM25Data et chartPM10Data sont utilisés pour conserver les données PM1.0, PM2.5 et PM10 respectivement. Lorsque les données en temps réel arrivent, transférez-les séparément vers les tableaux.

chartLabels.push(new Date().toLocalString());

chartPM1Data.push(msg.message.pm1); chartPM25Data.push(msg.message.pm25); chartPM10Data.push(msg.message.pm10);

Affichez ensuite le graphique:

var ctx = document.getElementById("chart").getContext("2d");

var chart = new Chart(ctx, { type: "line", data: { labels: chartLabels, datasets: [{ label: "PM1.0", data: chartPM1Data, borderColor: "#FF6384", fill: false }, { label: "PM2.5", données: chartPM25Data, borderColor: "#36A2EB", fill: false }, { label: "PM10", data: chartPM10Data, borderColor: "#CC65FE", fill: false }] } });

Ouvrez maintenant ce fichier html avec un navigateur Web, vous verrez des modifications de données.