LED που ελέγχεται από το Διαδίκτυο χρησιμοποιώντας διακομιστή Web βασισμένο σε ESP32: 10 βήματα
LED που ελέγχεται από το Διαδίκτυο χρησιμοποιώντας διακομιστή Web βασισμένο σε ESP32: 10 βήματα

Πίνακας περιεχομένων:

Anonim
LED που ελέγχεται από το Διαδίκτυο χρησιμοποιώντας διακομιστή Web βασισμένο σε ESP32
LED που ελέγχεται από το Διαδίκτυο χρησιμοποιώντας διακομιστή Web βασισμένο σε ESP32

Επισκόπηση έργου

Σε αυτό το παράδειγμα, θα καταλάβουμε πώς να φτιάξουμε έναν διακομιστή ιστού βασισμένο σε ESP32 για τον έλεγχο της κατάστασης LED, η οποία είναι προσβάσιμη από οπουδήποτε στον κόσμο. Θα χρειαστείτε έναν υπολογιστή Mac για αυτό το έργο, αλλά μπορείτε να εκτελέσετε αυτό το λογισμικό ακόμη και σε έναν φθηνό και χαμηλής ισχύος υπολογιστή όπως το Raspberry Pi.

Προετοιμασία του ESP32 με το Arduino IDE

Για να ξεκινήσετε τον προγραμματισμό του ESP32 χρησιμοποιώντας το Arduino IDE και τη γλώσσα προγραμματισμού Arduino, θα χρειαστείτε ένα πρόσθετο πρόσθετο. Διαβάστε πώς να προετοιμάσετε το Arduino IDE για ESP32 σε Mac OS στον παρακάτω σύνδεσμο.

Προμήθειες

Για αυτό το σεμινάριο θα χρειαστείτε τα ακόλουθα στοιχεία:

  • ESP32 πίνακας ανάπτυξης 5mm
  • Αντίσταση LED 220ohm
  • Οθόνη LCD 16x2 με μονάδα I2C
  • Breadboard
  • Καλώδια βραχυκυκλωτήρων
  • Καλώδιο Micro USB

Βήμα 1: Δημιουργία κυκλώματος

Χτίζοντας το κύκλωμα
Χτίζοντας το κύκλωμα

Εκτελέστε συνδέσεις όπως φαίνεται στο παρακάτω σχηματικό διάγραμμα παρακάτω

Ξεκινήστε συνδέοντας την έξοδο τάσης τροφοδοσίας 3V3 στον πίνακα ψωμιού ESP32 και GNDto. Συνδέστε το LED μέσω αντίστασης στο ESP32 χρησιμοποιώντας τον ακροδέκτη GPIO 23 ως ψηφιακό ακροδέκτη εξόδου. Μετά από αυτό, συνδέστε τον πείρο SDA της οθόνης LCD 16x2 στον ακροδέκτη GPIO 21 και τον SCL στον ακροδέκτη GPIO 22.

Βήμα 2: Γρήγορη επισκόπηση του συστήματος αρχείων SPIFFS

Το SPIFFS σημαίνει "Serial Peripheral Interface Flash File System", δηλαδή σύστημα αρχείων για μνήμη flash που μεταφέρει δεδομένα μέσω SPI. Κατά συνέπεια, το SPIFFS είναι ένα απλοποιημένο σύστημα αρχείων σχεδιασμένο για μικροελεγκτές με flash chips που μεταδίδουν δεδομένα μέσω του διαύλου SPI (όπως μνήμη flash ESP32).

Το SPIFFS είναι πιο χρήσιμο για χρήση με ESP32 στις ακόλουθες περιπτώσεις:

  • Δημιουργία αρχείων για αποθήκευση ρυθμίσεων
  • Μόνιμη αποθήκευση δεδομένων.
  • Δημιουργία αρχείων για αποθήκευση μικρής ποσότητας δεδομένων (αντί για κάρτα microSD για αυτό).
  • Αποθήκευση αρχείων HTML και CSS για δημιουργία διακομιστή ιστού.

Βήμα 3: Εγκατάσταση του SPIFFS Bootloader σε Mac OS

Εγκατάσταση του SPIFFS Bootloader σε Mac OS
Εγκατάσταση του SPIFFS Bootloader σε Mac OS

Μπορείτε να δημιουργήσετε, να αποθηκεύσετε και να γράψετε δεδομένα σε αρχεία που είναι αποθηκευμένα στο σύστημα αρχείων ESP32 απευθείας χρησιμοποιώντας την προσθήκη στο Arduino IDE.

Πρώτα απ 'όλα, βεβαιωθείτε ότι έχετε εγκαταστήσει την τελευταία έκδοση του Arduino IDE και, στη συνέχεια, κάντε τα εξής:

  • Ανοίξτε τον παρακάτω σύνδεσμο και κάντε λήψη του αρχείου "ESP32FS-1.0.zip"
  • Μεταβείτε στον κατάλογο Arduino IDE, ο οποίος βρίσκεται στο φάκελο Έγγραφα.
  • Δημιουργήστε ένα φάκελο εργαλείων, εάν δεν υπάρχει. Μέσα στον κατάλογο εργαλείων δημιουργήστε έναν άλλο φάκελο ESP32FS. Μέσα στο ESP32FS δημιουργήστε ένα άλλο, το οποίο ονομάζεται εργαλείο.
  • Αποσυμπιέστε το αρχείο ZIP που έχει ληφθεί στο βήμα 1 στο φάκελο εργαλείων.
  • Επανεκκινήστε το Arduino IDE.
  • Για να ελέγξετε εάν η προσθήκη εγκαταστάθηκε με επιτυχία, ανοίξτε το Arduino IDE και κάντε κλικ στο "Εργαλεία" και ελέγξτε αν υπάρχει ένα στοιχείο "ESP32 Sketch Data Upload" σε αυτό το μενού.

Βήμα 4: Εγκατάσταση Βιβλιοθηκών

Οι βιβλιοθήκες ESPAsyncWebServer και AsyncTCP σάς επιτρέπουν να δημιουργήσετε έναν διακομιστή ιστού χρησιμοποιώντας αρχεία από το σύστημα αρχείων του ESP32. Για περισσότερες πληροφορίες σχετικά με αυτές τις βιβλιοθήκες, ελέγξτε τον ακόλουθο σύνδεσμο.

Εγκαταστήστε τη βιβλιοθήκη ESPAsyncWebServer

  • Κάντε κλικ εδώ για να κατεβάσετε το αρχείο ZIP της βιβλιοθήκης.
  • Αποσυμπιέστε αυτό το αρχείο. Θα πρέπει να λάβετε τον κύριο φάκελο ESPAsyncWebServer.
  • Μετονομάστε το σε "ESPAsyncWebServer".

Εγκαταστήστε τη βιβλιοθήκη AsyncTCP

  • Κάντε κλικ εδώ για να κατεβάσετε το αρχείο ZIP της βιβλιοθήκης.
  • Αποσυμπιέστε αυτό το αρχείο. Θα πρέπει να λάβετε τον κύριο φάκελο AsyncTCP.
  • Μετονομάστε το σε "AsyncTCP".

Μετακινήστε τους φακέλους ESPAsyncWebServer και AsyncTCP στο φάκελο βιβλιοθήκες, ο οποίος βρίσκεται μέσα στον κατάλογο εγγράφων.

Τέλος, επανεκκινήστε το Arduino IDE.

Βήμα 5: Δημιουργήστε ένα αρχείο Index.html και Style.css με το ακόλουθο περιεχόμενο

Το πρότυπο HTML/CSS για κουμπί εναλλαγής έχει ληφθεί από την ακόλουθη πηγή.

Βήμα 6: Κωδικός Arduino

Κυρίως, ο κώδικας βασίστηκε στον κώδικα Arduino που ελήφθη από τον ESP32 Web Server χρησιμοποιώντας SPIFFS και τον τρόπο χρήσης I2C LCD με ESP32 στο Arduino IDE.

Βήμα 7: Ανεβάστε τον κώδικα και τα αρχεία Arduino χρησιμοποιώντας το φορτωτή SPIFFS

  • Ανοίξτε το φάκελο σκίτσων του κώδικα Arduino.
  • Μέσα σε αυτόν τον φάκελο, δημιουργήστε έναν νέο φάκελο που ονομάζεται "δεδομένα".
  • Μέσα στο φάκελο δεδομένων, πρέπει να βάλετε το index.html και το style.css.
  • Μεταφόρτωση κώδικα Arduino
  • Στη συνέχεια, για να ανεβάσετε τα αρχεία, κάντε κλικ στο Arduino IDE στο Tools> ESP32 Sketch Data Upload

Βήμα 8: Προσδιορίστε τη διεύθυνση IP του διακομιστή ιστού ESP32

Καθορίστε τη διεύθυνση IP του διακομιστή ιστού ESP32
Καθορίστε τη διεύθυνση IP του διακομιστή ιστού ESP32

Μπορεί να βρεθεί με δύο τρόπους.

  • Σειριακή οθόνη στο Arduino IDE (Εργαλεία> Σειριακή οθόνη)
  • Στην οθόνη LCD

Βήμα 9: Δοκιμή του τοπικού διακομιστή Web

Δοκιμή του τοπικού διακομιστή Web
Δοκιμή του τοπικού διακομιστή Web

Στη συνέχεια, ανοίξτε ένα πρόγραμμα περιήγησης ιστού της επιλογής σας και επικολλήστε την ακόλουθη διεύθυνση IP στη γραμμή διευθύνσεων. Θα πρέπει να έχετε μια έξοδο παρόμοια με το παρακάτω στιγμιότυπο οθόνης.

Βήμα 10: Πρόσβαση σε τοπικό διακομιστή Web από οπουδήποτε στον κόσμο χρησιμοποιώντας το Ngrok

Πρόσβαση σε τοπικό διακομιστή Web από οπουδήποτε στον κόσμο χρησιμοποιώντας το Ngrok
Πρόσβαση σε τοπικό διακομιστή Web από οπουδήποτε στον κόσμο χρησιμοποιώντας το Ngrok

Το Ngrok είναι μια πλατφόρμα που σας επιτρέπει να οργανώσετε απομακρυσμένη πρόσβαση σε διακομιστή ιστού ή σε κάποια άλλη υπηρεσία που εκτελείται στον υπολογιστή σας από το εξωτερικό διαδίκτυο. Η πρόσβαση οργανώνεται μέσω της ασφαλούς σήραγγας που δημιουργήθηκε στην αρχή του ngrok.

  • Ακολουθήστε αυτόν τον σύνδεσμο και εγγραφείτε.
  • Αφού δημιουργήσετε έναν λογαριασμό, συνδεθείτε και μεταβείτε στην καρτέλα "Auth". Αντιγράψτε τη γραμμή από το πεδίο "Your Tunnel Authtoken".
  • Κάντε κλικ στην καρτέλα "Λήψη" στη γραμμή πλοήγησης. Επιλέξτε την έκδοση του ngrok που ταιριάζει με το λειτουργικό σας σύστημα και κάντε λήψη του.
  • Αποσυμπιέστε το ληφθέν φάκελο και εκτελέστε τη γραμμή εντολών.
  • Συνδέστε τον λογαριασμό σας εισάγοντας την ακόλουθη εντολή

./ngrok authtoken

Ξεκινήστε μια σήραγγα HTTP στη θύρα 80

./ngrok http Your_IP_Address: 80

Εάν όλα έγιναν σωστά, τότε η κατάσταση της σήραγγας θα πρέπει να αλλάξει σε "online" και ένας σύνδεσμος ανακατεύθυνσης θα πρέπει να εμφανιστεί στη στήλη "Προώθηση". Με την εισαγωγή αυτού του συνδέσμου στο πρόγραμμα περιήγησής σας, μπορείτε να αποκτήσετε πρόσβαση στον διακομιστή ιστού από οπουδήποτε στον κόσμο.

Συνιστάται:

Δημιουργήστε το ρομπότ ροής βίντεο που ελέγχεται από το Διαδίκτυο με Arduino και Raspberry Pi: 15 βήματα (με εικόνες)

Δημιουργήστε το ρομπότ ροής βίντεο που ελέγχεται από το Διαδίκτυο με Arduino και Raspberry Pi: 15 βήματα (με εικόνες)

Δημιουργήστε το ρομπότ ροής βίντεο που ελέγχεται από το Διαδίκτυο με Arduino και Raspberry Pi: Είμαι @RedPhantom (γνωστός και ως LiquidCrystalDisplay / Itay), ένας 14χρονος μαθητής από το Ισραήλ που μαθαίνει στο Max Shein Junior High School for Advanced Science and Mathematics. Φτιάχνω αυτό το έργο για να μάθουν όλοι και να το μοιραστούν! Μπορεί να έχετε

Πώς να φτιάξετε ένα έξυπνο δοχείο με το NodeMCU που ελέγχεται από την εφαρμογή: 8 βήματα

Πώς να φτιάξετε ένα έξυπνο δοχείο με το NodeMCU που ελέγχεται από την εφαρμογή: 8 βήματα

Πώς να φτιάξετε ένα έξυπνο δοχείο με το NodeMCU που ελέγχεται από την εφαρμογή: Σε αυτόν τον οδηγό θα δημιουργήσουμε ένα Smart Pot που ελέγχεται από ένα ESP32 και μια εφαρμογή για smartphone (iOS και Android). Θα χρησιμοποιήσουμε το NodeMCU (ESP32) για τη συνδεσιμότητα και τη βιβλιοθήκη Blynk για το cloud IoT και την εφαρμογή στο smartphone. Τελικά εμείς

Μεγάλο ρολόι LCD Arduino με δύο συναγερμούς και οθόνη θερμοκρασίας που ελέγχεται από IR TV Τηλεχειριστήριο: 5 βήματα

Μεγάλο ρολόι LCD Arduino με δύο συναγερμούς και οθόνη θερμοκρασίας που ελέγχεται από IR TV Τηλεχειριστήριο: 5 βήματα

Μεγάλο ρολόι LCD Arduino με δύο συναγερμούς και οθόνη θερμοκρασίας Ελέγχεται από τηλεχειριστήριο IR TV: Πώς να φτιάξετε ένα ρολόι LCD με βάση Arduino με δύο συναγερμούς και οθόνη θερμοκρασίας που ελέγχονται από το τηλεχειριστήριο IR TV

Το Plotti Botti: ένα ρομπότ σχεδίασης που ελέγχεται από το Διαδίκτυο!: 10 βήματα

Το Plotti Botti: ένα ρομπότ σχεδίασης που ελέγχεται από το Διαδίκτυο!: 10 βήματα

Το Plotti Botti: ένα ρομπότ σχεδίασης που ελέγχεται από το Διαδίκτυο!: Το Plotti Botti είναι ένα σχεδιαστή XY προσαρτημένο σε έναν πίνακα, το οποίο μπορεί να ελεγχθεί από οποιονδήποτε μέσω του LetsRobot.tv

LED που ελέγχεται από το Internet χρησιμοποιώντας το NodeMCU: 6 βήματα

LED που ελέγχεται από το Internet χρησιμοποιώντας το NodeMCU: 6 βήματα

Διαδικτυακή ελεγχόμενη λυχνία με χρήση NodeMCU: Το Διαδίκτυο των Πραγμάτων (IoT) είναι ένα σύστημα αλληλένδετων υπολογιστικών συσκευών, μηχανικών και ψηφιακών μηχανών, αντικειμένων, ζώων ή ανθρώπων που διαθέτουν μοναδικά αναγνωριστικά και δυνατότητα μεταφοράς δεδομένων μέσω δικτύου χωρίς να απαιτείται ανθρώπινη