ESP8266 Μετεωρολογικός σταθμός που εμφανίζει δεδομένα σε έναν ιστότοπο: 7 βήματα

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

Σημείωση: Μέρη αυτού του σεμιναρίου ενδέχεται να είναι διαθέσιμα σε μορφή βίντεο στο κανάλι μου στο YouTube - Tech Tribe

Σε αυτό το διδακτικό, θα δείξω πώς να φτιάξετε έναν μετεωρολογικό σταθμό που στέλνει άμεσα δεδομένα στον ιστότοπό σας. Επομένως, θα χρειαστείτε τον δικό σας τομέα (Π.χ.: msolonko.net). Για να ξεκινήσετε, εδώ είναι τα υλικά που θα χρειαστείτε:

Στοιχεία:

Feather Huzzah (16,95 $)

Καλώδιο Micro USB με δεδομένα (1,99 $)

Πακέτο μπαταρίας ($ 25): Θα συζητήσω αργότερα ποια χωρητικότητα χρειάζεστε για πόσο χρονικό διάστημα χωρίς επαναφόρτιση, ώστε να μπορείτε να επιλέξετε τη χωρητικότητα που θέλετε. Αυτός είναι ένας σύνδεσμος προς αυτόν που χρησιμοποίησα. Μπορείτε επίσης απλά να το τροφοδοτήσετε από μια πρίζα.

1 Φωτοαντίσταση

Κάποιες άλλες αντιστάσεις - συζητήθηκαν αργότερα

Σύρμα

Perf Board (5,59 $) - Πακέτο 20

BME280 Αισθητήρας θερμοκρασίας, πίεσης και υγρασίας (9,99 $)

Κάποιο είδος κουτιού? μπορείτε να εκτυπώσετε ένα και θα σας δείξω το σχέδιό μου.

Webhosting και domain, εάν θέλετε να ακολουθήσετε εντελώς με το σεμινάριο

Εργαλεία:

Κόφτης καλωδίων

Συγκολλητικό σίδερο

Βήμα 1: Κωδικός φτερού Huzzah

Ο κωδικός θα γραφτεί στο Arduino IDE, το οποίο μπορείτε να κατεβάσετε εδώ. Πριν ξεκινήσουμε, ακολουθήστε τις οδηγίες εδώ για να ρυθμίσετε το Arduino IDE για να συνεργαστεί με το φτερό σας Huzzah. Επίσης, ακολουθήστε αυτές τις οδηγίες για να κατεβάσετε τις απαραίτητες βιβλιοθήκες για να λειτουργήσει ο αισθητήρας BME. Το αρχείο κώδικα επισυνάπτεται και όλος ο κώδικας σχολιάζεται ώστε να μπορείτε να τον κατανοήσετε. Μόλις το δείτε, προχωρήστε στο επόμενο βήμα όπου θα εξετάσουμε τον κώδικα που λαμβάνει τα δεδομένα του αισθητήρα.

Βήμα 2: Λήψη δεδομένων από το φτερό Huzzah

Μέχρι τώρα, ελπίζουμε να έχετε καταλάβει πώς λειτουργεί ο κώδικας Arduino. Εάν όχι, επιστρέψτε στον κώδικα και διαβάστε τα σχόλιά μου (σχολίασα σχεδόν κάθε γραμμή). Τώρα θα γράψουμε τον κωδικό που λαμβάνει τα δεδομένα. Όπως και πριν, όλα αυτά σχολιάζονται. Η γλώσσα προγραμματισμού που χρησιμοποιείται για αυτό είναι η PHP, για την οποία μπορείτε να διαβάσετε περισσότερα εδώ.

Τα δεδομένα μας θα αποθηκευτούν σε μια βάση δεδομένων MySQL, για την οποία μπορείτε να διαβάσετε περισσότερα εδώ. Τα δεδομένα αποθηκεύονται σε πίνακες που έχουν γραμμές και στήλες. Πριν γράψουμε τον κώδικα, θα πρέπει να φτιάξουμε τη δομή του πίνακα μας στο cPanel φιλοξενίας μας. Χρησιμοποιώ το Arvixe Hosting, οπότε το cPanel μπορεί να φαίνεται διαφορετικό. Ανατρέξτε σε μία από τις εικόνες για να δείτε πώς μοιάζει το τμήμα μου. Πρώτον, θέλετε να δημιουργήσετε μια νέα βάση δεδομένων MySQL εάν δεν έχετε ήδη. Μπορείτε να χρησιμοποιήσετε τον οδηγό για αυτό. Υπάρχουν άφθονες διαδικτυακές πηγές για αυτό εάν χρειάζεστε βοήθεια.

Μόλις ρυθμίσετε μια βάση δεδομένων, μεταβείτε στο phpMyAdmin και επιλέξτε τη βάση δεδομένων σας. Δημιουργήστε έναν πίνακα με το όνομα weather_data με 9 στήλες. Συμβουλευτείτε μία από τις παραπάνω εικόνες μου για να δείτε τι πρέπει να είναι κάθε στήλη (αντιγράψτε το όνομα, τον τύπο δεδομένων και όλα τα άλλα ακριβώς αν θέλετε να χρησιμοποιήσετε τον κωδικό μου). Ο μετρητής θα είναι το κύριο κλειδί και το αναγνωριστικό θα μας βοηθήσει να προσδιορίσουμε ποια ημέρα κάνουν τα δεδομένα που αφορούν (1: σήμερα, 2: χθες, 3: όλα τα άλλα). Δεδομένου ότι θα έχουμε πολλά δεδομένα, θα σβήσουμε μερικά από αυτά καθώς μεγαλώνει. Αυτός είναι ο λόγος για τον οποίο χρειαζόμαστε τη στήλη id. Οι υπόλοιπες στήλες είναι αρκετά αυτονόητες. Αυτή τη στιγμή, ο πίνακας σας στη βάση δεδομένων σας θα πρέπει να μοιάζει ακριβώς με τον δικό μου.

Τώρα, κατεβάστε τον συνημμένο κώδικα και διαβάστε τον και τα σχόλιά μου. Όταν τελειώσετε, προχωρήστε στο επόμενο βήμα.

Σημείωση: όταν κάνετε λήψη του κώδικα, μετονομάστε τον σε esp.php. Για κάποιο λόγο, έλαβα ένα σφάλμα όταν προσπάθησα να ανεβάσω ένα αρχείο PHP.

Βασικά έτσι θα λειτουργήσει ο κώδικας.

1. Συλλέξτε δεδομένα κάθε 10 λεπτά και εμφανίστε τα

2. Μόλις περάσει η ημέρα, υπολογίστε κατά μέσο όρο κάθε 6 τιμές (για εξοικονόμηση χώρου DB), έτσι ώστε να υπάρχει ένα σημείο δεδομένων για κάθε ώρα

3. Μόλις περάσει μια άλλη ημέρα, υπολογίστε κατά μέσο όρο όλα τα υπόλοιπα δεδομένα για εκείνη την ημέρα και αποθηκεύστε τα ως ένα μόνο σημείο δεδομένων

Με αυτόν τον τρόπο, θα είμαστε σε θέση να δούμε διακυμάνσεις στο φως, τη θερμοκρασία κ.λπ. κατά τη διάρκεια των μηνών χωρίς να αρχίσουμε να αποσπούνται από τις καθημερινές διακυμάνσεις της θερμοκρασίας, του φωτός κ.λπ.

Βήμα 3: Ανάκτηση δεδομένων από τη βάση δεδομένων στην οθόνη

Τώρα λοιπόν έχουμε βρει πώς να συλλέγουμε δεδομένα καιρού και να τα ανεβάζουμε στη βάση δεδομένων μας. Τώρα πρέπει να είμαστε σε θέση να το ανακτήσουμε σε εύχρηστη μορφή. Όπως και πριν, επισυνάπτω ένα αρχείο PHP getWeatherData.txt που πρέπει να αποθηκεύσετε στον κεντρικό υπολογιστή σας και να αλλάξετε την επέκταση ονόματος αρχείου σε.php αντί για.txt. Όλος ο κωδικός σχολιάζεται. Διαβάστε το για να το καταλάβετε και προχωρήστε μόλις νομίζετε ότι το έχετε πάρει. Εάν έχετε ερωτήσεις, μη διστάσετε να ρωτήσετε παρακάτω.

Βήμα 4: Ρύθμιση βιβλιοθηκών και ορισμένα άλλα πράγματα

Για αυτό το έργο, ένα από τα πλαίσια που θα χρησιμοποιήσουμε είναι το AngularJS, το οποίο θα μας βοηθήσει να επικοινωνήσουμε με τη βάση δεδομένων και να δημιουργήσουμε ένα SPA (Εφαρμογή μίας σελίδας). Για να αποκτήσετε τη βιβλιοθήκη, μεταβείτε σε αυτόν τον σύνδεσμο και κάντε λήψη μιας έκδοσης 1.64 ή νεότερης. Για αυτό το σεμινάριο, χρησιμοποίησα 1.64, αλλά συχνά κυκλοφορούν νέες εκδόσεις, ώστε να μπορείτε να χρησιμοποιήσετε διαφορετική. Βρείτε έναν σύνδεσμο σε αυτήν τη σελίδα που τελειώνει ως εξής: /VERSION/angular.min.js

Αντιγράψτε τον σύνδεσμο και αποθηκεύστε τον σε ασφαλές μέρος. Μόλις πήραμε έναν σύνδεσμο για τη βιβλιοθήκη AngularJS. Θα το χρειαστείτε για το επόμενο βήμα. Τώρα, στην ίδια σελίδα βρείτε έναν σύνδεσμο που μοιάζει με αυτόν και αντιγράψτε τον επίσης: /VERSION/angular-route.min.js

Η γωνιακή διαδρομή θα μας βοηθήσει να διαχειριστούμε το SPA και να χειριστούμε την εναλλαγή προβολών στη σελίδα.

Θέλουμε να μπορούμε να εμφανίζουμε όμορφα γραφήματα των δεδομένων μας. Για αυτό θα χρησιμοποιήσουμε μια βιβλιοθήκη που ονομάζεται ChartJS. Μεταβείτε εδώ, επιλέξτε την πιο πρόσφατη έκδοση και αποθηκεύστε έναν σύνδεσμο που τελειώνει έτσι: VERSION/Chart.bundle.min.js

Τέλος, θα χρησιμοποιήσουμε μια βιβλιοθήκη για να σχεδιάσουμε τις σελίδες που ονομάζονται Bootstrap. Μεταβείτε σε αυτόν τον σύνδεσμο για τη Γρήγορη εκκίνηση και αφήστε το προς το παρόν ανοιχτό. Μόλις αρχίσουμε να γράφουμε τον κωδικό πελάτη, θα μπορείτε να αντικαταστήσετε τους παλιούς συνδέσμους μου με τη νεότερη έκδοση.

Τώρα, θα πρέπει να ορίσουμε τις διαφορετικές προβολές για την εφαρμογή μας. Στον κατάλογο του κεντρικού υπολογιστή σας όπου έχετε τα δύο προηγούμενα αρχεία (esp.php και getWeatherData.php), δημιουργήστε έναν νέο φάκελο που ονομάζεται weather_views. Εδώ, θα βάλουμε όλες τις σελίδες μας που θα αντιστοιχούν σε κάθε ένα με ένα αναγνωριστικό από τη βάση δεδομένων μας (1, 2 ή 3).

Στο φάκελο, δημιουργήστε 3 αρχεία (day.html, old.html και Yesterday.html). Κατεβάστε τον συνημμένο κώδικα και τοποθετήστε τον σε αυτά τα αρχεία. Ο κώδικας για το DAY. HTML σχολιάζεται ώστε να καταλάβετε τι συμβαίνει. Ο κώδικας για τις άλλες 2 σελίδες είναι βασικά ο ίδιος (διαφορετικό μέρος στο παλιό. Html σχολιάζεται).

Μόλις τελειώσετε με αυτό το βήμα, προχωρήστε στο επόμενο, το οποίο είναι το πιο δύσκολο βήμα προγραμματισμού.

Βήμα 5: Κύριο αρχείο HTML

Σε αυτό το βήμα, θα κάνετε/επεξεργαστείτε/διαβάσετε το κύριο αρχείο HTML όπου θα εμφανίζονται τα πάντα. Αποθηκεύστε το συνημμένο αρχείο (το οποίο, όπως πάντα, σχολιάζεται) ως espdata.html στον ίδιο κατάλογο με το esp.php. Ελπίζω ότι μπορείτε να κάνετε κάποιες αλλαγές σε αυτό και να καταλάβετε τι πραγματικά συμβαίνει.

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

Βήμα 6: Δοκιμή καλωδίωσης σε Breadboard

Τώρα θα ελέγξουμε ότι όλος ο κώδικας λειτουργεί με το υλικό μας. Εάν δεν το έχετε κάνει ήδη, κολλήστε τις καρφίτσες κεφαλίδας στο Feather Huzzah και τον αισθητήρα BME280. Για κάθε βήμα, επισυνάπτεται μια φωτογραφία.

1. Τοποθετήστε το φτερό στο breadboard. Συνδέστε το 3V στη σιδηροδρομική γραμμή + και το GND στη σιδηροτροχιά.

2. Συνδέστε τον αισθητήρα VIN στο + σιδηρόδρομο και το GND στη - ράγα.

3. Συνδέστε τον αισθητήρα SDA στην καρφίτσα 4 στο φτερό. Συνδέστε το SCL στο pin 5.

4. Τοποθετήστε τη φωτοαντίσταση στο ψωμί με ένα μόλυβδο να πηγαίνει στη + ράγα.

5. Συνδέστε μια αντίσταση 4,7k στο μη συνδεδεμένο καλώδιο της φωτοαντίστασης. Συνδέστε το μη συνδεδεμένο καλώδιο του 4,7k σε μια αντίσταση 2k. Συνδέστε το μη συνδεδεμένο άκρο της αντίστασης 2k στη ράγα (GND).

6. Συνδέστε την ένωση της αντίστασης 4,7k και 2k στην καρφίτσα ADC (αναλογική ακίδα). Μόλις φτιάξαμε ένα διαχωριστή τάσης που διαιρεί τη μέγιστη τάση που διαβάζεται από τον πείρο από 3.3V σε λιγότερο από 1V. Μπορείτε να παίξετε με τον δικό σας συνδυασμό αν θέλετε, αλλά λάβετε υπόψη ότι η τάση που δίνεται στον αναλογικό πείρο πρέπει να είναι μικρότερη από 1V.

7. Τέλος, συνδέστε τον πείρο RST (επαναφορά) στο φτερό με τον πείρο 16 στο φτερό (πορτοκαλί σύρμα στη φωτογραφία). Αυτή η διαμόρφωση επιτρέπει στο Feather Huzzah να εισέλθει σε κατάσταση βαθύ ύπνου για εξοικονόμηση ενέργειας.

Τώρα τελειώσατε! Ανεβάστε τον κώδικα στο huzzah του φτερού σας και ελπίζουμε ότι μπορείτε να δείτε την ενημέρωση της ιστοσελίδας σας (μόνο τη σελίδα day.html). Εάν όχι, δοκιμάστε να χρησιμοποιήσετε τη Σειριακή οθόνη για την αντιμετώπιση προβλημάτων ή ρωτήστε στα παρακάτω σχόλια.

Βήμα 7: Μόνιμο έργο (προαιρετικό)

Αν υποθέσουμε ότι όλα λειτουργούν, αν το επιθυμείτε, μπορείτε να κάνετε αυτό το έργο πιο μόνιμο. Δεν θα το δείξω εδώ, αλλά μπορείτε να κολλήσετε όλα τα εξαρτήματα σε έναν πίνακα perf και στη συνέχεια να τα κλείσετε σε ένα δοχείο. Θα επισυνάψω τα αρχεία IPT για το δοχείο 3D που χρησιμοποίησα παρακάτω και μερικές φωτογραφίες για να ξεκινήσετε. Το δοχείο προορίζεται για έμπνευση επειδή πιθανότατα θα θέλετε να το κάνετε πιο προσωπικό με διαφορετικό σχέδιο και κείμενο. Διασκεδάστε με την προσαρμογή! Καλή τύχη!