Φόρτωση της ιστοσελίδας διαμόρφωσης Arduino/ESP από το σύννεφο: 7 βήματα

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

Κατά τη δημιουργία ενός έργου Arduino / ESP (ESP8266 / ESP32), μπορείτε απλά να κωδικοποιήσετε τα πάντα. Τις περισσότερες φορές όμως κάτι εμφανίζεται και θα καταλήξετε ξανά να συνδέσετε ξανά τη συσκευή σας IoT στο IDE. Or απλά έχετε περισσότερους ανθρώπους που έχουν πρόσβαση στη διαμόρφωση και θέλετε να παρέχετε ένα UI αντί να περιμένετε να κατανοήσουν την εσωτερική λειτουργία.

Αυτό το διδακτικό θα σας πει πώς να τοποθετήσετε το μεγαλύτερο μέρος της διεπαφής χρήστη στο cloud αντί για το Arduino / ESP. Με αυτόν τον τρόπο θα εξοικονομήσετε χώρο και χρήση μνήμης. Μια υπηρεσία που παρέχει δωρεάν στατικές ιστοσελίδες είναι ιδιαίτερα κατάλληλη ως "cloud", όπως οι σελίδες GitHub, αλλά πιθανότατα θα λειτουργήσουν και άλλες επιλογές.

Η δημιουργία της ιστοσελίδας με αυτόν τον τρόπο απαιτεί από το πρόγραμμα περιήγησης του χρήστη να περάσει από 4 βήματα:

1. Ζητήστε το url ρίζας από το Arduino / ESP
2. Λάβετε μια πολύ απλή ιστοσελίδα, λέγοντας:
3. Ζητήστε ένα αρχείο JavaScript από το cloud
4. Λάβετε τον κώδικα που δημιουργεί την πραγματική σελίδα

Αυτό το Instructable θα εξηγήσει επίσης τον τρόπο αλληλεπίδρασης με το Arduino / ESP μόλις η σελίδα είναι έτοιμη σύμφωνα με τα παραπάνω βήματα.

Ο κώδικας που δημιουργήθηκε σε αυτό το εκπαιδευτικό μπορεί να βρεθεί και στο GitHub.

Προαπαιτούμενα

Αυτό το διδακτικό υποθέτει ότι έχετε πρόσβαση σε ορισμένα υλικά και ορισμένες προηγούμενες γνώσεις:

• Ένα Arduino (με πρόσβαση στο δίκτυο) / ESP
• Ένας υπολογιστής στον οποίο μπορείτε να επισυνάψετε τα παραπάνω
• Πρόσβαση WiFi συνδεδεμένη στο διαδίκτυο
• Εγκατεστημένο το Arduino IDE (επίσης για το ESP32)
• Ξέρετε πώς να ανεβάζετε ένα σκίτσο στη συσκευή σας IoT
• Ξέρετε πώς να χρησιμοποιείτε το Git & GitHub

Βήμα 1: Ξεκινώντας με ένα απλό σκίτσο διακομιστή ιστοσελίδων

Θα ξεκινήσουμε όσο το δυνατόν πιο απλά και αφήστε το να μεγαλώσει από εδώ και πέρα.

#περιλαμβάνω

const char* ssid = "Yoursid"; const char* password = "yourpasswd"; Διακομιστής WiFiServer (80). void setup () {// Αρχικοποιήστε το σειριακό και περιμένετε να ανοίξει η θύρα: Serial.begin (115200); ενώ (! Σειριακό) {; // περιμένετε να συνδεθεί η σειριακή θύρα. Απαιτείται μόνο για εγγενή θύρα USB} WiFi.begin (ssid, password); while (WiFi.status ()! = WL_CONNECTED) {καθυστέρηση (500); Serial.print ("."); } Serial.println ("WiFi συνδεδεμένο."); Serial.println ("Διεύθυνση IP:"); Serial.println (WiFi.localIP ()); server.begin (); } void loop () {// ακρόαση για εισερχόμενους πελάτες WiFiClient client = server.available (); // ακούστε για εισερχόμενους πελάτες bool sendResponse = false; // ορίζεται σε true αν θέλουμε να στείλουμε μια απάντηση String urlLine = ""; // κάντε μια συμβολοσειρά για να κρατήσετε το URL που ζητήσατε εάν (πελάτης) // εάν αποκτήσετε έναν πελάτη, {Serial.println ("New Client"); // εκτυπώστε ένα μήνυμα από τη σειριακή θύρα String currentLine = ""; // κάντε μια συμβολοσειρά για να κρατήσει τα εισερχόμενα δεδομένα από τον πελάτη ενώ (client.connected ()) // βρόχο ενώ ο πελάτης είναι συνδεδεμένος {if (client.available ()) // εάν υπάρχουν byte για ανάγνωση από τον πελάτη, {char c = client.read (); // διαβάστε ένα byte, τότε εάν (c == '\ n') // εάν το byte είναι χαρακτήρας νέας γραμμής {// εάν η τρέχουσα γραμμή είναι κενή, έχετε δύο χαρακτήρες νέας γραμμής σε μια σειρά. // αυτό είναι το τέλος του αιτήματος HTTP -πελάτη, οπότε στείλτε μια απάντηση: if (currentLine.length () == 0) {sendResponse = true; // όλα είναι καλά! Διακοπή; // ξεσπάστε από το βρόχο while} else // αν έχετε νέα γραμμή, τότε διαγράψτε το currentLine: {if (currentLine.indexOf ("GET /")> = 0) // αυτή θα πρέπει να είναι η γραμμή URL {urlLine = currentLine ? // αποθηκεύστε το για μεταγενέστερη χρήση} currentLine = ""; // επαναφέρετε την τρέχουσα συμβολοσειρά}} αλλιώς εάν (c! = '\ r') // εάν έχετε κάτι άλλο εκτός από χαρακτήρα επιστροφής μεταφοράς, {currentLine += c; // προσθέστε το στο τέλος της τρέχουσας γραμμής}}} εάν (sendResponse) {Serial.print ("Ο πελάτης ζητήθηκε"); Serial.println (urlLine); // Οι κεφαλίδες HTTP ξεκινούν πάντα με έναν κωδικό απόκρισης (π.χ. HTTP/1.1 200 OK) // και έναν τύπο περιεχομένου, ώστε ο πελάτης να γνωρίζει τι έρχεται, και στη συνέχεια μια κενή γραμμή: client.println ("HTTP/1.1 200 OK"); client.println ("Τύπος περιεχομένου: text/html"); client.println (); εάν (urlLine.indexOf ("GET /")> = 0) // εάν η διεύθυνση URL είναι μόνο " /" {// το περιεχόμενο της απόκρισης HTTP ακολουθεί την κεφαλίδα: client.println ("Hello world!"); } // Η απάντηση HTTP τελειώνει με μια άλλη κενή γραμμή: client.println (); } // κλείστε τη σύνδεση: client.stop (); Serial.println ("Ο πελάτης αποσυνδέθηκε."); }}

Αντιγράψτε τον παραπάνω κώδικα ή κατεβάστε τον από την υπόθεση στο GitHub.

Μην ξεχάσετε να αλλάξετε το SSID και τον κωδικό πρόσβασης για να ταιριάζουν με το δίκτυό σας.

Αυτό το σκίτσο χρησιμοποιεί το γνωστό Arduino

εγκατάσταση ()

και

βρόχος()

λειτουργίες. Στο

εγκατάσταση ()

Λειτουργεί η σειριακή σύνδεση με το IDE και το WiFi. Μόλις συνδεθεί το WiFi στο εν λόγω SSID, εκτυπώνεται η IP και ξεκινά ο διακομιστής ιστού. Σε κάθε επανάληψη του

βρόχος()

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

ΠΡΟΕΙΔΟΠΟΙΗΣΗ! Αυτός ο κώδικας χρησιμοποιεί την κλάση Arduino String για να είναι απλός. Οι βελτιστοποιήσεις συμβολοσειρών δεν εμπίπτουν στο πεδίο αυτού του οδηγού. Διαβάστε περισσότερα σχετικά με αυτό που μπορείτε να μάθετε σχετικά με το Arduino String Manipulation Using Minimal Ram.

Βήμα 2: Δημιουργία απομακρυσμένης JavaScript

Το Arduino / ESP θα πει στο πρόγραμμα περιήγησης επισκεπτών να φορτώσει αυτό το ένα αρχείο. Όλα τα υπόλοιπα θα γίνουν με αυτόν τον κώδικα JavaScript.

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

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

gh-pages

κλαδί. Βάλτε τον ακόλουθο κώδικα μέσα στο α

.js

αρχείο στο αποθετήριο στον σωστό κλάδο.

var cdnjsURL = 'https://cdnjs.cloudflare.com/ajax/libs/', $? (λειτουργία () {var script = document.createElement ('script'); // δημιουργήστε ένα στοιχείο script.src = cdnjsURL + 'jquery/3.2.1/jquery.min.js'; // ορίστε το src = "" attribute script.onload = function () // συνάρτηση επανάκλησης, που καλείται μόλις φορτωθεί το αρχείο jquery {$ = window.jQuery; // κάνει το jQuery προσβάσιμο ως καθολική μεταβλητή $ init (); // κλήση της συνάρτησης init}; έγγραφο. getElementsByTagName ('head') [0].appendChild (script); // προσθέστε τη δημιουργημένη ετικέτα στο έγγραφο, αυτό θα ξεκινήσει τη φόρτωση του jQuery lib}) (); συνάρτηση init () {// Τέλος φόρτωσης jQuery, θα προσθέσει κώδικα εδώ αργότερα…}

Αντιγράψτε τον παραπάνω κώδικα ή κατεβάστε τον από την υπόθεση στο GitHub.

Ελέγξτε εάν το αρχείο σας είναι προσβάσιμο. Σε περίπτωση που οι σελίδες του GitHub μεταβείτε στη διεύθυνση https://username.github.io/repository/your-file.j… (αντικαταστήστε

όνομα χρήστη

,

αποθήκη

και

your-file.js

για τις σωστές παραμέτρους).

Βήμα 3: Φόρτωση του απομακρυσμένου αρχείου JavaScript στο πρόγραμμα περιήγησης επισκεπτών

Τώρα που έχουμε ρυθμίσει τα πάντα, ήρθε η ώρα να κάνουμε την ιστοσελίδα να φορτώσει το απομακρυσμένο αρχείο JavaScript.

Μπορείτε να το κάνετε αυτό αλλάζοντας τη γραμμή 88 του σκίτσου από

client.println ("Γεια σου κόσμο!"); τ

client.println ("");

(άλλαξε το

src

χαρακτηριστικό για να δείξετε το δικό σας αρχείο JavaScript). Αυτή είναι μια μικρή ιστοσελίδα html, το μόνο που κάνει είναι να φορτώσει το αρχείο JavaScript στο πρόγραμμα περιήγησης επισκεπτών.

Το τροποποιημένο αρχείο μπορεί επίσης να βρεθεί στην αντίστοιχη δέσμευση στο GitHub.

Ανεβάστε το προσαρμοσμένο σκίτσο στο Arduino / ESP.

Βήμα 4: Προσθήκη νέων στοιχείων στη σελίδα

Η άδεια σελίδα είναι άχρηστη, επομένως ήρθε η ώρα να προσθέσετε ένα νέο στοιχείο στην ιστοσελίδα. Προς το παρόν αυτό θα είναι ένα βίντεο YouTube. Σε αυτό το παράδειγμα θα χρησιμοποιηθούν ορισμένοι κώδικες jQuery για να επιτευχθεί αυτό.

Προσθέστε την ακόλουθη γραμμή κώδικα στο

μέσα σε αυτό()

λειτουργία:

$ (''). prop ({src: 'https://www.youtube.com/embed/k12h_FOInZg?rel=0', frameborder: '0'}). css ({πλάτος: '608px', ύψος: '342px'}). AppendTo ("σώμα");

Αυτό θα δημιουργήσει ένα

iframe

στοιχείο, ορίστε το σωστό

src

χαρακτηριστικό και ορίστε το μέγεθος χρησιμοποιώντας το css και προσθέστε το στοιχείο στο σώμα της σελίδας.

Το jQuery μας βοηθά να επιλέγουμε και να αλλάζουμε εύκολα στοιχεία στην ιστοσελίδα, μερικά βασικά πράγματα που πρέπει να γνωρίζουμε:

• $ ('σώμα')

• επιλέγει οποιοδήποτε ήδη υπάρχον στοιχείο, μπορούν να χρησιμοποιηθούν και άλλοι επιλογείς css

• $(' ')

  δημιουργεί ένα νέο

• στοιχείο (αλλά δεν το προσθέτει στο έγγραφο)

• .appendTo ('. main')

• προσαρτά το επιλεγμένο/δημιουργημένο στοιχείο σε ένα στοιχείο με κλάση css «κύρια»

• Άλλες λειτουργίες προσθήκης στοιχείων είναι

  .προσαρτώ()

  ,

  .prepend ()

  ,

  .prependTo ()

  ,

  .εισάγετε()

  ,

  .insertAfter ()

  ,

  .insertBefore ()

  ,

  .μετά()

  ,

  .πριν()

Ρίξτε μια ματιά στην αντίστοιχη δέσμευση στο GitHub εάν κάτι δεν είναι σαφές.

Βήμα 5: Διαδραστικά στοιχεία

Ένα βίντεο είναι διασκεδαστικό, αλλά ο σκοπός αυτού του οδηγού είναι να αλληλεπιδράσει με το Arduino / ESP. Ας αντικαταστήσουμε το βίντεο για ένα κουμπί που στέλνει πληροφορίες στο Arduino / ESP και περιμένει επίσης μια απάντηση.

Θα χρειαστούμε ένα

$('')

για να προσθέσετε στη σελίδα και να επισυνάψετε έναν ακροατή συμβάντων σε αυτήν. Το eventlistener θα καλέσει τη λειτουργία επανάκλησης όταν συμβεί το καθορισμένο συμβάν:

$ (''). κείμενο ('ένα κουμπί'). στο ('κλικ', λειτουργία ()

{// ο κώδικας εδώ θα εκτελεστεί όταν πατηθεί το κουμπί}). appendTo ('body');

Και προσθέστε ένα αίτημα AJAX στη λειτουργία επανάκλησης:

$.get ('/ajax', λειτουργία (δεδομένα)

{// ο κώδικας εδώ θα εκτελεστεί όταν ολοκληρωθεί το αίτημα AJAX});

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

$('

').text (δεδομένα).appendTo (' body ');

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

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

Βήμα 6: Απαντήστε στο Διαδραστικό στοιχείο

Φυσικά, το αίτημα AJAX απαιτεί απάντηση.

Για να δημιουργήσετε τη σωστή απάντηση για το

/Αϊάς

url θα πρέπει να προσθέσουμε ένα

αλλιως αν ()

αμέσως μετά την παρένθεση της δήλωσης if που ελέγχει το

/

url

else if (urlLine.indexOf ("GET /ajax")> = 0)

{client.print ("Γεια!"); }

Στη δέσμευση στο GitHub πρόσθεσα επίσης έναν μετρητή για να δείξω στο πρόγραμμα περιήγησης ότι κάθε αίτημα είναι μοναδικό.

Βήμα 7: Συμπέρασμα

Αυτό είναι το τέλος αυτού του οδηγού. Έχετε τώρα ένα Arduino / ESP που εξυπηρετεί μια μικρή ιστοσελίδα που λέει στο πρόγραμμα περιήγησης του επισκέπτη να φορτώσει ένα αρχείο JavaScript από το cloud. Μόλις φορτωθεί η JavaScript, δημιουργεί το υπόλοιπο περιεχόμενο της ιστοσελίδας παρέχοντας μια διεπαφή χρήστη για την επικοινωνία του χρήστη με το Arduino / ESP.

Τώρα εναπόκειται στη φαντασία σας να δημιουργήσετε περισσότερα στοιχεία στην ιστοσελίδα και να αποθηκεύσετε τις ρυθμίσεις τοπικά σε κάποιο είδος ROM (EEPROM / NVS / κλπ).

Σας ευχαριστούμε που διαβάσατε και μη διστάσετε να δώσετε κάποια σχόλια!