Έλεγχος του Arduino σας με HTML/Javascript με τον εύκολο τρόπο: 8 βήματα

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

Αυτό το σεμινάριο σας δείχνει πώς μπορείτε να ελέγξετε ένα arduino με μια κλήση ajax πίσω από ένα adafruit Huzzah χρησιμοποιώντας μόνο λειτουργίες javascript. Βασικά μπορείτε να χρησιμοποιήσετε το javascript στη σελίδα html που θα σας επιτρέψει να γράψετε εύκολα διεπαφές html με απλές λειτουργίες javascript που χρησιμοποιούν μια κλήση ajax. Για να επιτρέψετε στο ESP8266 να επικοινωνεί με το arduino. Επομένως, όλες οι ακίδες μπορούν να οριστούν από μια συνάρτηση javascript. Ομοίως, μπορούμε επίσης να διαβάσουμε την τιμή από οποιοδήποτε pin χρησιμοποιώντας μια συνάρτηση javascript. Ελπίζω ότι αυτό θα διευκολύνει τον έλεγχο ενός arduino από ένα έγγραφο html. Σκέφτηκα ότι υπάρχουν πολλοί άνθρωποι εκεί έξω που μπορούν να γράψουν html. Οι περισσότεροι από αυτούς δεν θέλουν να ενοχλήσουν προσπαθώντας να δημιουργήσουν μια εφαρμογή κινητού τηλεφώνου με java ή xcode ή κάποιο άλλο πλαίσιο. Αυτό θα διευκολύνει πολύ τους ανθρώπους επειδή το μόνο που χρειάζεται να κάνουν είναι να χρησιμοποιήσουν μια συνάρτηση javascript για να ορίσουν και να διαβάσουν τιμές από καρφίτσες. Για παράδειγμα, δεν είναι πολύ πιο εύκολο να γράψεις

Ανάβω

Για να ενεργοποιήσετε ένα κουμπί. Η ομορφιά είναι ότι δεν υπάρχει άλλος προγραμματισμός arduino εκτός από τη δήλωση του pinMode (12, INPUT). Στη λειτουργία ρύθμισης. Όσο δηλώνεται η καρφίτσα, το javascript μπορεί να χρησιμοποιηθεί για οτιδήποτε άλλο.

document.onload = {

GetJSON ('A0', 1 'return_json')

}

Αυτό είναι το μόνο που χρειάζεται να κάνετε για να λάβετε την τιμή του αναλογικού πείρου 0 και να επιστρέψετε το αποτέλεσμα στο div. Αυτός λοιπόν θα πρέπει να είναι ένας εύκολος τρόπος για να μπορούν οι άνθρωποι να δημιουργούν σελίδες html που ελέγχουν το arduino. Εκτός από τη δημιουργία μιας διεπαφής, έτσι ώστε οι ακίδες arduino να μπορούν να ρυθμιστούν και να διαβαστούν με javascript.

Βήμα 1: Τι θα χρειαστείτε

Δημιούργησα αυτό το έργο για χρήστες που θέλουν να ελέγξουν το arduino τους με μια σελίδα html σε ένα ESP8266. Ο στόχος αυτού του έργου είναι να δημιουργήσει μια απλή μέθοδο για τον καθορισμό των τιμών των ακίδων στο arduino σας με μια συνάρτηση javascript. For examplate onclick = "Το SetPin (12, 1, 0)" θα ορίσει το Pin 12 στο arduino σας σε Υψηλό.

Για αυτό το σεμινάριο θα χρειαστείτε τα ακόλουθα στοιχεία για να ακολουθήσετε ακριβώς. Ωστόσο, υποθέτω ότι θα πρέπει να λειτουργεί στους περισσότερους συνδυασμούς arduino και ESP8266. Ωστόσο, για να ακολουθήσετε ακριβώς αυτό που έχω εδώ, θα χρειαστείτε τα ακόλουθα στοιχεία.

Arduino Uno - Θα πρέπει να λειτουργεί με οποιοδήποτε συμβατό με arduino που διαθέτει σειριακό Rx TxAdafruit Huzzah Breakout Board USB To Serial Cable 4 Analog Turpidity tester LED χαμηλής ισχύος - κάθε αναλογικός αισθητήρας που παρέχει αναλογική έξοδο θα κάνει Wire Wifi Router Cell Phone With Mobile Browser Arduino Libraries.

Βήμα 2: Προετοιμασία του Arduino ID

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

Ο κώδικας χρησιμοποιεί πολλές βιβλιοθήκες για να λειτουργήσει. Αρχικά θα επικεντρωθούμε στη ρύθμιση του arduino για το ESP8266 που χρησιμοποιώ το Adafruit Huzzah σε αυτό το παράδειγμα, επειδή θεωρώ ότι τα προϊόντα adafruit είναι τα πιο αξιόπιστα και έχουν την καλύτερη υποστήριξη. Αρκεί να μην προσπαθήσετε να λάβετε υποστήριξη από τον διακομιστή Adafruit Discord. Θα έχετε πολύ καλύτερη τύχη να λάβετε βοήθεια στα φόρουμ υποστήριξης.

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

ESP8266WiFi WiFiClient ESP8266WebServer ArduinoJSONTΑυτό δεν είναι ένα σεμινάριο για τον τρόπο λήψης και εγκατάστασης βιβλιοθηκών, ωστόσο, αυτές είναι οι βιβλιοθήκες που χρησιμοποιούνται στο HUZZAH. Βρείτε τα λοιπόν και εγκαταστήστε τα. Θα χρειαστεί επίσης να εγκαταστήσετε τους ορισμούς του πίνακα για το HUZZAH, οπότε αν μεταβείτε στο αρχείο ΑΡΧΕΙΟ> Προτιμήσεις Στο πλαίσιο που αναφέρει πρόσθετες διευθύνσεις διευθύνσεων πινάκων, προσθέστε τα ακόλουθαhttps://arduino.esp8266.com/stable/package_esp8266c… κάτι σε αυτό το πεδίο, από το να βεβαιωθείτε ότι προσθέσατε ένα κόμμα εκεί για να προσθέσετε ένα επιπλέον url πίνακα. Κάντε κλικ στο εντάξει

Εργαλεία> Πίνακας> Διαχειριστής πινάκων Αν ψάξτε για ESP8266 παρά εγκαταστήστε το ESP8266 από την ESP8266 Κοινότητα.

Εξαιρετικό τώρα ας βεβαιωθούμε ότι έχουμε όλα όσα χρειαζόμαστε για να λειτουργήσει ο κώδικας arduino. Το arduino Πέρα από το arduino χρησιμοποιεί μόνο 2 βιβλιοθήκες για αυτό το σεμινάριο.

SoftwareSerialArduinoJSONΤο οποίο θα έπρεπε να έχετε ήδη.

Βήμα 3: Προετοιμασία του ESP8266

Τώρα θα βάλουμε τον κωδικό στο ESP8266 (Adafruit HUZZAH) και θα τον προετοιμάσουμε για σύνδεση με το Arduino. Αποσυμπιέστε τον κώδικα για το HUZZAH και ανοίξτε το σκίτσο. Στις γραμμές 11 και 12 αλλάξτε το ssid και τον κωδικό πρόσβασης σε αυτόν της σύνδεσης WIFI στο τοπικό σας δίκτυο. Θα παρατηρήσετε ότι υπάρχουν 2 αρχεία το αρχείο σκίτσου και το αρχείο index.h. Το αρχείο index.h είναι το μέρος όπου είναι αποθηκευμένο το html που θα εμφανιστεί στο τηλέφωνό σας.

Αφού ορίσετε το σωστό SSID και τον κωδικό πρόσβασης στο wifi σας, μπορείτε να μεταγλωττίσετε τον κωδικό και να τον φορτώσετε στο ESP8266. Στο HUZZAH πρέπει να κρατήσετε πατημένο το κουμπί με την ένδειξη GPIO0 και στη συνέχεια να κάνετε κλικ στο κουμπί υπόλοιπο, παρά να αφήσετε το κουμπί GPIO0 για να θέσετε το τσιπ σε λειτουργία εκκίνησης. Εάν το τσιπ έχει τεθεί επιτυχώς σε λειτουργία εκκίνησης, θα ανάψει μια κόκκινη λυχνία υποδεικνύοντας ότι το τσιπ βρίσκεται σε κατάσταση εκκίνησης.

Για να συνδεθείτε στο ESP8266 θα χρειαστείτε σειριακό καλώδιο ή προσαρμογέα USB σε Serial ή τσιπ FDTI. Σε αυτή την περίπτωση χρησιμοποιώ το καλώδιο adafruit όπως σημειώνεται στις οδηγίες. Ωστόσο, μπορείτε να συνδεθείτε με το τσιπ με διάφορους τρόπους, χρησιμοποιώντας TTL στις ακίδες Tx και Rx. Αυτό ελπίζω ότι οι άνθρωποι που το βλέπουν αυτό ξέρουν πώς να συνδεθούν με το τσιπ για να φορτώσουν τον κώδικα σε αυτό. Όπως και να έχει, προχωρήστε και αναβοσβήστε το τσιπ με τον κωδικό στο αρχείο zip που επισυνάπτεται σε αυτό το βήμα.

Βήμα 4: Προετοιμασία του Arduino

Για να φορτώσετε τον κώδικα στο arduino, αλλάξτε τον ορισμό της πλακέτας σας στο Arduino/Genuino Uno. Στη συνέχεια, αποσυμπιέστε το αρχείο που επισυνάπτεται σε αυτό το βήμα. Από το να το ανεβάσετε στο ardunio. Πολύ απλό πραγματικά, όλη η σκληρή δουλειά έχει γίνει ήδη για εσάς. Έχω ήδη περάσει από μια δοκιμαστική διαδικασία σφάλματος, οπότε το μόνο που έχετε να κάνετε είναι να ανεβάσετε τον κώδικα.

Βήμα 5: Καλωδίωση όλων μαζί

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

Συνδέστε το Tx στο Huzzah με το Pin 2 στο arduino. Συνδέστε το Rx στο Huzzah με το Pin 3 στο arduino. Δημιούργησα μια άλλη σειριακή υποδοχή στις ακίδες 2 και 3 στο arduino για να ελευθερώσω την προεπιλεγμένη σειριακή κονσόλα.

Συνδέστε τα Pin V+ και En στο 5v από το arduino. - Το adafruit Huzzah έχει ενσωματωμένο ρυθμιστή τάσης 3.3v, οπότε η σύνδεση αυτών των ακίδων μπορεί να μην λειτουργήσει με όλες τις μονάδες ESP8266. Σως χρειαστεί να συνδέσετε τον δικό σας ρυθμιστή τάσης. Σας συνιστώ να χρησιμοποιήσετε το Huzzah εάν θέλετε απλά να λειτουργήσει εύκολα το αντικείμενο. Συνδέστε το GND με το GND του arduino

Στις ακίδες 12, 11, 9, 8 στο καλώδιο arduino στα LED σας χρησιμοποίησα LED χαμηλής ισχύος, επειδή αυτά που τραβούν πολύ ρεύμα ενδέχεται να τραβήξουν υπερβολική ισχύ για λόγους απλούστευσης αυτού του πειράματος.

Σε σχέση με το αναλογικό A0 Pin 0 στο arduino έχω συνδέσει τη γραμμή εξόδου του Turpitity tester. Ωστόσο, μπορείτε να συνδέσετε την έξοδο βασικά οποιουδήποτε αισθητήρα που θα σας δώσει αναλογική ανάγνωση. Αυτό είναι το μόνο που χρειάζεται να κάνετε για να το συνδέσετε.

Βήμα 6: Πρόσβαση στην Ιστοσελίδα

Τώρα που έχετε συνδέσει το arduino και έχετε φορτώσει τα πάντα στους πίνακες, πρέπει να μπορείτε να δείτε το html στο κινητό σας τηλέφωνο. Τώρα θέλω να συνδεθείτε στον ίδιο δρομολογητή wifi που έχετε ορίσει το SSID και τον κωδικό πρόσβασης στον κώδικα στο Huzzah. Στη συνέχεια, πρέπει να καταλάβετε ποια διεύθυνση IP έχει ορίσει ο δρομολογητής σας στη συσκευή σας. Συνήθως, εάν συνδεθείτε στη διαμόρφωση των δρομολογητών σας, θα πρέπει να υπάρχει μια λίστα πελατών. Αυτό δείχνει τις διευθύνσεις IP όλων των συσκευών που είναι συνδεδεμένες στη σύνδεση Wifi. Ωστόσο, εάν δεν μπορείτε να βρείτε αυτήν τη διεύθυνση IP, μπορείτε να την αποσυνδέσετε από το arduino και να την εκτελέσετε ξανά με το σειριακό καλώδιο. Εάν ανοίξετε τη σειριακή κονσόλα στη συσκευή, θα εκτυπώσει τη διεύθυνση IP στη συσκευή στη σειριακή κονσόλα σε περίπτωση που δεν μπορείτε να τη βρείτε με άλλο τρόπο. Τέλος πάντων, όταν συνδεθείτε στο ίδιο δίκτυο Wifi με το κινητό σας τηλέφωνο. Στη συνέχεια, δείξτε το πρόγραμμα περιήγησης ιστού για κινητά στη διεύθυνση IP του Huzzah. Κάτι που μάλλον μοιάζει με αυτό. https://192.168.0.107 ή κάτι πολύ παρόμοιο. Εκεί έβαλα μια βασική σελίδα που θα σας επιτρέψει να ενεργοποιήσετε και να απενεργοποιήσετε τα 4 Leds καθώς και να διαβάσετε την τιμή του αναλογικού αισθητήρα.

Βήμα 7: Χρήση Javascipt

Στο αρχείο που ονομάζεται index.h στο σκίτσο ESP8266Code θα πρέπει να εμφανίζεται ως ξεχωριστή καρτέλα στον επεξεργαστή arduino. Μπορείτε να δείτε το βασικό παράδειγμα που έφτιαξα εδώ. Βασικά ο τρόπος που λειτουργεί είναι έτσι.

SetPin (12, 1, 0); SetPin ({Pin Number}, {Value 1 High 0 Low}, {IsAnalog 1 Yes 0 No}})

Αυτό θα ορίσει την τιμή της ψηφιακής ακίδας 12 σε υψηλή

SetPin (4, 0, 0);

Αυτό θα ορίσει την τιμή του ψηφιακού pin 4 σε χαμηλή

SetPin (A2, 439, 1) Αυτό θα ορίσει την τιμή του Analog Pin 2 σε 439

Ομοίως, η συνάρτηση GetJSON θα επιστρέψει μια ζητούμενη τιμή από μια καρφίτσα και θα την τοποθετήσει σε ένα html που επιλέγεται με το καθορισμένο div Id.

GetJSON ('A0', 1, 'resp_i') GetJSON ({Pin Number}, {IsAnalog 1 Yes 0 No}, {Id Of HTML Element to return result})

Αυτό θα στείλει ένα αίτημα στο arduino ζητώντας του την τιμή του αναλογικού pin 0 και να επιστρέψει το αποτέλεσμα στο Div με ID resp_iGetJSON (12, 0, 'mydiv'). Αυτό θα ζητήσει από το arduino να πάρει την τιμή του ψηφιακού pin 0 και να επιστρέψει το αποτέλεσμα σε ένα στοιχείο html με και Id του mydiv

Βήμα 8: Υποστήριξη

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

Εάν έχετε σχόλια, μη διστάσετε να με ρωτήσετε, θα κάνω ό, τι καλύτερο μπορώ για να απαντήσω. Θα ήθελα να επεκτείνω τη λειτουργικότητά του ακόμη περισσότερο, αλλά έμεινα από χρόνο και χρήμα. Ωστόσο, εργάζομαι σε μια πιο ισχυρή εφαρμογή αυτού, που αποθηκεύει τα αρχεία σε έναν κανονικό διακομιστή ιστού και όχι στο ESP8266.

Σας ευχαριστώ που αφιερώσατε χρόνο για να δείτε τον κωδικό μου.

John AndersonEmail Me

Vermont Internet Design LLC

www.vermontinternetdesign.com