Οπτικοποίηση ατμοσφαιρικής ρύπανσης: 4 βήματα

2024 Συγγραφέας: John Day | [email protected]. Τελευταία τροποποίηση: 2024-01-30 08:36

Το πρόβλημα της ατμοσφαιρικής ρύπανσης προσελκύει όλο και περισσότερη προσοχή. Αυτή τη φορά προσπαθήσαμε να παρακολουθήσουμε το PM2.5 με Wio LTE και νέο αισθητήρα Laser PM2.5.

Βήμα 1: Πράγματα που χρησιμοποιούνται σε αυτό το έργο

Συστατικά υλικού

• Wio LTE EU Version v1.3- 4G, Cat.1, GNSS, Espruino Compatible
• Grove - Αισθητήρας PM2.5 λέιζερ (HM3301)
• Grove - 16 x 2 LCD (Λευκό σε Μπλε)

Εφαρμογές λογισμικού και διαδικτυακές υπηρεσίες

• Arduino IDE
• PubNub Δημοσίευση/Εγγραφή API

Βήμα 2: Σύνδεση υλικού

Όπως στην παραπάνω εικόνα, κόψαμε 2 γραμμές Grove για επικοινωνία I2C, έτσι ώστε το Wio LTE να μπορεί να συνδεθεί ταυτόχρονα με το LCD Grove και το PM2.5 Sensor Grove. Μπορείτε να χρησιμοποιήσετε ένα I2C Hub για να το πετύχετε.

Και μην ξεχνάτε, συνδέστε την κεραία LTE στο Wio LTE και συνδέστε την κάρτα SIM σε αυτήν.

Βήμα 3: Διαμόρφωση Ιστού

Κάντε κλικ εδώ για σύνδεση ή εγγραφή λογαριασμού PubNub, θα χρησιμοποιηθεί για τη μετάδοση δεδομένων σε πραγματικό χρόνο.

Στην πύλη διαχειριστή PubNub, θα δείτε ένα έργο επίδειξης. Εισαγάγετε το έργο, υπάρχουν 2 κλειδιά, Δημοσίευση κλειδιού και Κλειδί εγγραφής, θυμηθείτε τα για προγραμματισμό λογισμικού.

Βήμα 4: Προγραμματισμός λογισμικού

Μέρος 1. Wio LTE

Επειδή δεν υπάρχει βιβλιοθήκη PubNub για το Wio LTE, μπορούμε να δημοσιεύσουμε τα δεδομένα μας σε πραγματικό χρόνο μέσω αιτήματος HTTP, ανατρέξτε στο PubNub REST API Document.

Για να πραγματοποιήσετε σύνδεση HTTP από την κάρτα SIM σας συνδεδεμένη στο Wio LTE, θα πρέπει πρώτα να ορίσετε το APN σας. Εάν δεν το γνωρίζετε, επικοινωνήστε με την εταιρεία κινητής τηλεφωνίας σας.

Και ορίστε το PubNub Publish Key, το Subscribe Key και το Channel μετά τη ρύθμιση του APN. Ένα κανάλι εδώ, χρησιμοποιείται για τη διαφοροποίηση εκδοτών και συνδρομητών, οι συνδρομητές θα λαμβάνουν δεδομένα από εκδότες που έχουν το ίδιο κανάλι.

Πατήστε παρατεταμένα το κουμπί Boot0 στο Wio LTE, συνδέστε το στον υπολογιστή σας μέσω καλωδίου USB, ανεβάστε τον κώδικα στο Arduino IDE σε αυτό. Μετά τη μεταφόρτωση, πατήστε το κουμπί RST για να επαναφέρετε το Wio LTE.

Μέρος 2. Ιστοσελίδα

Γυρίστε στο PubNub, εισαγάγετε το Demo Keyset και κάντε κλικ στην Κονσόλα εντοπισμού σφαλμάτων στα αριστερά, θα ανοίξει μια νέα σελίδα.

Συμπληρώστε το όνομα του καναλιού σας στο πλαίσιο κειμένου Προεπιλεγμένο κανάλι και, στη συνέχεια, κάντε κλικ στο κουμπί Προσθήκη πελάτη. Περιμένετε λίγο, θα δείτε την τιμή PM1.0, PM2.5 και PM10 στην Κονσόλα εντοπισμού σφαλμάτων.

Αλλά δεν είναι φιλικό προς εμάς, οπότε θεωρούμε ότι το εμφανίζουμε ως γράφημα.

Καταρχήν, δημιουργήστε ένα νέο αρχείο html στον υπολογιστή σας. Ανοίξτε το από έναν επεξεργαστή κειμένου, προσθέστε βασικές ετικέτες html σε αυτό.

Στη συνέχεια, προσθέστε το σενάριο PubNub και Chart.js στο κεφάλι, μπορείτε επίσης να προσθέσετε έναν τίτλο σε αυτήν τη σελίδα.

Είδα το Dust Monitor

Θα πρέπει να υπάρχει ένα μέρος για την εμφάνιση ενός γραφήματος, οπότε προσθέτουμε έναν καμβά στο σώμα της σελίδας.

Και προσθέστε ετικέτα σεναρίου, ώστε να μπορούμε να προσθέσουμε javascript για εγγραφή δεδομένων σε πραγματικό χρόνο και να σχεδιάσουμε το γράφημα.

Για να εγγραφείτε σε πραγματικό χρόνο από το PubNub, θα πρέπει να υπάρχει ένα αντικείμενο PubNub, var pubnub = νέο PubNub ({

publishedKey: "", subscribeKey: ""});

και προσθέστε έναν ακροατή σε αυτό.

pubnub.addListener ({

μήνυμα: λειτουργία (msg) {}});

Το μέλος του μηνύματος στην παράμετρο msg του μηνύματος συνάρτησης είναι τα δεδομένα που χρειαζόμαστε. Τώρα μπορούμε να εγγραφούμε σε πραγματικό χρόνο από το PubNub:

pubnub.subscribe ({

κανάλι: ["σκόνη"]});

Αλλά πώς να το εμφανίσετε ως γράφημα; Δημιουργήσαμε 4 πίνακες για να διατηρούμε δεδομένα σε πραγματικό χρόνο:

var chartLabels = new Array ();

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

Μεταξύ αυτών, ο πίνακας chartLabels χρησιμοποιείται για τη διατήρηση των δεδομένων που έχουν επιτευχθεί, τα chartPM1Data, chartPM25Data και chartPM10Data χρησιμοποιούνται για τη διατήρηση δεδομένων PM1.0, δεδομένων PM2.5 και δεδομένων PM10 αντίστοιχα. Όταν φτάσουν τα δεδομένα σε πραγματικό χρόνο, ωθήστε τα σε πίνακες χωριστά.

chartLabels.push (νέα ημερομηνία (). toLocalString ());

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

Στη συνέχεια, εμφανίστε το γράφημα:

var ctx = document.getElementById ("γράφημα"). 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", data: chartPM25Data, borderColor: "#36A2EB", fill: false}, {label: "PM10", data: chartPM10Data, borderColor: "#CC65FE", fill: false}]}});

Τώρα ανοίξτε αυτό το αρχείο html με πρόγραμμα περιήγησης ιστού, θα δείτε αλλαγές δεδομένων.