Χριστουγεννιάτικο δέντρο ελεγχόμενο από τον ιστότοπο (Ο καθένας μπορεί να το ελέγξει): 19 βήματα (με εικόνες)

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

Θέλετε να μάθετε πώς μοιάζει το χριστουγεννιάτικο δέντρο που ελέγχεται από έναν ιστότοπο;

Εδώ είναι το βίντεο που δείχνει το έργο μου για το χριστουγεννιάτικο δέντρο μου. Η ζωντανή ροή έχει τελειώσει μέχρι τώρα, αλλά έκανα ένα βίντεο, καταγράφοντας τι συνέβαινε:

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

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

"Τι θα έκανα αν έκανα φωτάκια χριστουγεννιάτικου δέντρου που ΚΑΝΕΙΣ θα μπορούσε να ελέγξει μέσω μιας διεπαφής ιστότοπου;"

(εισάγετε δύο εβδομάδες άγρυπνες νύχτες)

Έτσι τα κατάφερα.

Ένα χριστουγεννιάτικο δέντρο με είκοσι LED RGB συνδεδεμένο στο διαδίκτυο μέσω του ESP8266 Arduino.

Ένας φίλος μου (ευχαριστώ JP) με βοήθησε να δημιουργήσω έναν ιστότοπο (αφού δεν είμαι άπταιστος προγραμματιστής για θέματα που σχετίζονται με τον ιστότοπο).

Και δημιουργήσαμε μια ζωντανή ροή στο δέντρο μου 24/7 στο youtube, ώστε να μπορείτε να βλέπετε τι ενεργοποιείτε ή απενεργοποιείτε ανά πάσα στιγμή.

Αυτό το έργο είναι ιδανικό για φέτος, αφού πολλοί από εμάς βρισκόμασταν στο κλείδωμα, ανίκανοι να συναντηθούμε και να συναναστραφούμε με φίλους και συγγενείς. Γιατί να μην ενωθείτε μέσω του χριστουγεννιάτικου δέντρου:)

Σε αυτό το Instructable θα εξηγήσω λεπτομερώς πώς έγινε αυτό το έργο.

Βήμα 1: Επίπεδο δεξιοτήτων

Αυτό το έργο είναι περισσότερο προσανατολισμένο στο λογισμικό. Αλλά μην φοβάστε Κάποια τύχη και βοήθεια του θείου Google θα βοηθήσουν πάρα πολύ:)

Θα χρειαστεί να έχετε ένα σύνολο 3 δεξιοτήτων (ή θα τις μάθετε χωρίς ανησυχία): ένα τμήμα διακομιστή ιστού, το μέρος Arduino και το χριστουγεννιάτικο δέντρο φυσικά!

Συνιστώμενη γνώση:

• Βασικές δεξιότητες υπολογιστών και προγραμματισμού

• Βασικές γνώσεις τερματικού Linux

• Βασικές γνώσεις δικτύωσης υπολογιστών

• Βασικές γνώσεις ηλεκτρονικών

• Δεξιότητες χρήσης Google και άλλων "ειδικών" ικανοτήτων

• Πρέπει να ξέρει πώς να στήσει ένα χριστουγεννιάτικο δέντρο:)

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

Βήμα 2: Εργαλεία και εξαρτήματα

Από την πλευρά του χριστουγεννιάτικου δέντρου, θα χρειαστείτε: • Χριστουγεννιάτικο δέντρο (d'oh…)

• Μια πλακέτα μικροελεγκτή NodeMCU

(μπορείτε επίσης να χρησιμοποιήσετε ESP32 ή άλλους πίνακες με δυνατότητα Wi-Fi ή Ethernet)

• Απευθυνόμενη RGB λωρίδα LED. Η διευθυνσιοδοτούμενη λωρίδα led RGB θα εξοικονομήσει πολλά GPU του Arduino (https://www.sparkfun.com/products/11020)

• Λογισμικό για το NodeMCU (παρέχεται σε αυτό το εγχειρίδιο)

Από την πλευρά του διακομιστή θα χρειαστείτε:

• Εικονικός ιδιωτικός διακομιστής με δημόσια IP. Εδώ παίρνετε 100 $ δωρεάν στο DigitalOcean

• Ένας τομέας (προαιρετικός) μπορείτε να εγγραφείτε σε οποιονδήποτε οργανισμό καταχωρητή, για παράδειγμα

• Αφιερωμένος κωδικός (παρέχεται με αυτό το εγχειρίδιο)

Βήμα 3: Διαμόρφωση εικονικής μηχανής (υπολογιστή) ΜΕΡΟΣ 1

Πάμε κατευθείαν στην κωδικοποίηση:)

Χρειαζόμαστε έναν διακομιστή, ο οποίος θα επικοινωνεί με τον ιστότοπο και το NodeMCU.

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

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

Τώρα μπορείτε να δημιουργήσετε την εικονική σας μηχανή (εικονικός υπολογιστής με πρόσβαση από απόσταση) κάνοντας κλικ στο "Ξεκινήστε με ένα σταγονίδιο" (το οποίο είναι βασικά το όνομα του DigitalOcean για μια εικονική μηχανή).

Θα εμφανιστεί μια σελίδα διαμόρφωσης και μπορείτε να παραμείνετε με μια προεπιλογή: εικόνα Ubuntu, βασικό σχέδιο και χωρίς αποθήκευση μπλοκ (5 $ /μήνα)

Βήμα 4: Διαμόρφωση εικονικής μηχανής (υπολογιστή) ΜΕΡΟΣ 2

Μια περιοχή κέντρου δεδομένων είναι το μέρος που θα δημιουργηθεί ο διακομιστής σας.

Επιλέξτε το πλησιέστερο σε εσάς και τους πιθανούς χρήστες σας. Αυτό θα παρέχει τον χαμηλότερο χρόνο απόκρισης.

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

Στην ενότητα Ολοκλήρωση και δημιουργία, διατηρήστε την προεπιλογή 1 σταγονιδίου, επιλέξτε ένα όνομα κεντρικού υπολογιστή (πάλι χριστουγεννιάτικο δέντρο), επιλέξτε το έργο σας που δημιουργήθηκε προηγουμένως, αν δεν έχει επιλεγεί από προεπιλογή και κάντε κλικ στην επιλογή Δημιουργία σταγονιδίου. Αυτό θα διαρκέσει λίγα λεπτά. Κάνοντας κλικ στο έργο σας στην ενότητα πλοήγησης στα αριστερά, θα δείτε το σταγονίδιο σας.

Βήμα 5: Διαμόρφωση εικονικής μηχανής (υπολογιστή) ΜΕΡΟΣ 3

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

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

Ωστόσο, όλα μπορούν να γίνουν μέσω μιας διεπαφής κονσόλας.

Δεν είναι τόσο τρομακτικό όσο φαίνεται:)

Βήμα 6: Διαμόρφωση εικονικής μηχανής (υπολογιστή) ΜΕΡΟΣ 4

Δημιουργήσατε με επιτυχία τη δική σας εικονική μηχανή σε σύννεφο DigitalOcean.

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

Κάντε λήψη του προγράμματος-πελάτη Filezilla εδώ https://filezilla-project.org/download.php?platfo… (ή βρείτε έκδοση 32bit για λειτουργικό σύστημα 32bit) και εγκαταστήστε την. Είναι πελάτης FTP (Πρωτόκολλο μεταφοράς αρχείων).

Θα μπορείτε να έχετε πρόσβαση και να μεταφέρετε αρχεία από και προς την εικονική σας μηχανή.

Μόλις εγκατασταθεί, κάντε κλικ στο αρχείο manager διαχειριστής τοποθεσίας → νέος ιστότοπος και εισαγάγετε δεδομένα όπως σε μια παραπάνω εικόνα.

Πρωτόκολλο: SFTP (πρωτόκολλο ασφαλούς μεταφοράς αρχείων)

Host: IP του διακομιστή σας, βρείτε στο έργο DigitalOcean.

Ο χρήστης είναι root και ο κωδικός πρόσβασης είναι αυτός που έχετε ορίσει στη δημιουργία του σταγονιδίου σας.

Κάντε κλικ στο κουμπί OK και συνδεθείτε στην εικονική μηχανή σας.

Θα ειδοποιηθείτε, το κλειδί κεντρικού υπολογιστή είναι άγνωστο. Ακολουθήστε τη δεύτερη εικόνα.

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

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

Βήμα 7: Εγκατάσταση διακομιστή Web

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

Καθώς δεν έχουμε γραφική διεπαφή, χρησιμοποιούμε εντολές για τον έλεγχο της εικονικής σας μηχανής. Ακολουθούν μερικές κοινές εντολές που θα χρησιμοποιήσετε στο Ubuntu (Linux):

• pwd - εκτύπωση του τρέχοντος καταλόγου μου

• ls - λίστα αρχείων και φακέλων στον τρέχοντα κατάλογό μου

• cd / - μετακίνηση στον / κατάλογο (φάκελος, ο οποίος περιλαμβάνει βασικούς καταλόγους Linux, κ.λπ., bin, boot, dev, root, home, var και ούτω καθεξής)

Με το τρέξιμο, εννοώ, εισάγετε την εντολή και πατήστε enter.

Τώρα, θα τρέξουμε το apt -get update -y για να ενημερώσουμε το σύστημα.

Εκτελέστε apt install apache2 -y για να εγκαταστήσετε διακομιστή Ιστού Apache.

Η οθόνη υποδοχής του Apache θα πρέπει να είναι προσβάσιμη στο https:// virtual-machine-ip από το πρόγραμμα περιήγησής σας.

Αντικαταστήστε την εικονική μηχανή-ip με την εικονική μηχανή σας, για παράδειγμα 165.12.45.123. Μπορείτε επίσης να παραλείψετε το https:// καθώς θα προστεθεί αυτόματα.

Συγχαρητήρια!

Σημείωση:

Αν θέλετε ο ιστότοπός σας να είναι προσβάσιμος μέσω ενός ονόματος και όχι μέσω διεύθυνσης IP (όπως χρησιμοποίησα το https://blinkmytree.live/), μεταβείτε στον ιστότοπο παροχής τομέα GoDaddy ή παρόμοιο (namecheap.com κ.λπ..) και ακολουθήστε τις οδηγίες εδώ:

Ορισμένα ονόματα τομέα είναι πολύ φθηνά. Ο τομέας μου κόστισε μόνο 2 $ ετησίως. Σίγουρα αξίζει τα λεφτά του:)

Βήμα 8: Εγκαταστήστε ένα πλαίσιο εφαρμογής Ιστού

Επιστροφή στην κονσόλα μας. Μη φοβάσαι:)

Χρησιμοποιήστε το Filezilla για να δημιουργήσετε ένα φάκελο με όνομα app inside /home, οπότε το /home /app θα είναι ο φάκελός σας

Εκτελέστε cd /home /app για να μεταβείτε στον εσωτερικό φάκελο της εφαρμογής.

Εκτελέστε apt install npm -y, για να εγκαταστήσετε τον διαχειριστή πακέτων npm. Αυτό θα διαρκέσει λίγα λεπτά.

Εκτελέστε το npm init -y για να δημιουργήσετε ένα αρχείο package.json, το οποίο θα παρακολουθεί/θυμάται τα σημαντικά πακέτα δεδομένων μιας εφαρμογής.

Εκτέλεση npm -αποθήκευση εγκατάστασης cors express για εγκατάσταση μονάδων cors, express

Το Cors είναι ενότητα για τη διαμόρφωση πρόσβασης μεταξύ ιστότοπων και το express είναι πλαίσιο εφαρμογών ιστού.

Το Npm είναι διαχειριστής πακέτων που χρησιμοποιήσαμε και θα χρησιμοποιήσουμε το node.js JavaScript runtime για να προγραμματίσουμε τη διεπαφή προγραμματισμού εφαρμογών (API), η οποία, σε συνδυασμό με διακομιστή http, θα δέχεται αιτήματα HTTP για την εφαρμογή χρωμάτων σε LED, θα επισημαίνει τις τιμές τους (χρώματα) στη μνήμη και μεταφέρετε τις τιμές στο NodeMcu, όταν το ζητήσει.

Σημείωση: Ο κόμβος στο NodeMcu δεν έχει καμία σχέση με τον κόμβο στο node.js. Το NodeMcu θα μπορούσε να αντικατασταθεί με οποιονδήποτε συνδεδεμένο στο Διαδίκτυο πίνακα ανάπτυξης arduino, πίνακα ανάπτυξης NXP ή προσαρμοσμένο Microchip/NXP/Renesas/STM/Atmel PCB. Το Node.js θα μπορούσε επίσης να αντικατασταθεί με. Net framework, PHP ή οποιαδήποτε άλλη πλατφόρμα. Αλλά για απλότητα, χρησιμοποιούμε NodeMCU και Node.js.

Τώρα, ας κάνουμε μια δοκιμή, αν μπορούμε να τρέξουμε ένα μικρό πρόγραμμα στο node.js

Δημιουργήστε ένα αρχείο με όνομα index.js με σημειωματάριο/σημειωματάριο ++ ή άλλο πρόγραμμα επεξεργασίας ή ενσωματωμένο περιβάλλον ανάπτυξης που χρησιμοποιείτε (Visual Studio Code https://code.visualstudio.com/) στον τοπικό σας φάκελο.

Βάλε αυτόν τον κωδικό:

var http = απαιτεί ('http');

http.createServer (συνάρτηση (απαιτ., res) {

res.writeHead (200, {'Content-Type': 'text/plain'});

res.end ('Hello World!');

}). Ακούστε (8080);

Αποθηκεύστε το και μεταφέρετέ το στο φάκελο/home/app ως index.js με διπλό κλικ/drag-drop στο αρχείο στο FileZilla.

Εκτελέστε τον κόμβο index.js και αφήστε τον σε λειτουργία.

Τώρα, μπορούμε να έχουμε πρόσβαση στη σελίδα μας στη διεύθυνση https:// virtual-machine-ip: 8080 από το πρόγραμμα περιήγησής μας. Θα εμφανιστεί μια λευκή σελίδα με κείμενο Hello World.

Συγχαρητήρια, μόλις δημιουργήσατε έναν διακομιστή ιστού στο node.js!

Βήμα 9: Προετοιμάστε το Λογισμικό

Μεταβείτε στην κονσόλα και σταματήστε το πρόγραμμα πατώντας ctrl+C.

Αντικαταστήστε το αρχείο index.js στο/home/app/και αντικαταστήστε το με το index.js στο.

Μπορείτε να κατεβάσετε όλα τα αρχεία για τον ιστότοπο εδώ:

drive.google.com/file/d/1oIFdipoJxg6PF5klO…

Αντιγράψτε τον κωδικό δέντρου Chrismas από το φάκελο html στον απομακρυσμένο κατάλογο/var/www/html/με το Filezilla. Θα χρειαστεί λίγος χρόνος. Αν σας ζητήσει, αντικαταστήστε το index.html με νέο.

Τοποθετήστε ξανά την IP σας στο αγαπημένο σας πρόγραμμα περιήγησης.

Μόλις διαθέσατε τη διαδικτυακή εφαρμογή web front-end σας διαθέσιμη στο https:// virtual-machine-ip.

Βήμα 10: Κατανόηση του κώδικα Back-end και λειτουργία του

Σημείωση: ο κωδικός back-end είναι στο /home /app

Θυμηθείτε, αφού επεξεργαστείτε τον κωδικό σας τοπικά, μην ξεχάσετε να τον ανεβάσετε στον διακομιστή σας χρησιμοποιώντας το FileZilla και επανεκκινήστε την εφαρμογή κόμβου (κονσόλα: ctrl+c, βέλος προς τα επάνω (εμφανίζει τον τελευταίο κόμβο εντολών index.js), εισαγάγετε)

Για να λειτουργήσει ο κώδικας, θα πρέπει πρώτα να εισαγάγετε μερικά δεδομένα.

Πρώτον, θα χρειαστεί να αλλάξετε τη μεταβλητή ονόματος κεντρικού υπολογιστή στο index.js στον δικό σας τομέα ή IP, (κάτι που μοιάζει με: 165.13.45.123).

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

Μπορείτε να δείτε στο αρχείο index.js, ότι δημιουργούμε μια εφαρμογή χρησιμοποιώντας τη λειτουργική μονάδα express. Στη συνέχεια, εφαρμόζουμε τους κανόνες CORS, προσθέτουμε τα API και ξεκινάμε έναν διακομιστή http. Αυτός ο διακομιστής δεν θα εξυπηρετεί μια ιστοσελίδα μέσω αιτημάτων GET http, αλλά θα εξυπηρετεί καταστάσεις led μέσω αιτήματος GET http και ενημερώνει καταστάσεις led σε ληφθέντα αιτήματα PUT

Τα API είναι κοινή πρακτική για την ανταλλαγή πληροφοριών μεταξύ εφαρμογών. Τα πιο συνηθισμένα που χρησιμοποιούμε είναι τα REST API που χρησιμοποιούμε μόνοι μας. Είναι απάτριδες και δεν έχουν επίμονη σύνδεση (shorturl.at/aoBC3, Τα αιτήματα PUT απλώς ενημερώνουν τις καταστάσεις led στη μεταβλητή πίνακα εφαρμογών (μνήμη), τα αιτήματα GET απλώς στέλνουν καταστάσεις led σε έναν πελάτη.

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

Βήμα 11: Κατανόηση του κώδικα Front-end και λειτουργία του ΜΕΡΟΣ 1

Σημείωση: ο κωδικός πρόσβασης είναι στο/var/www/html

Θυμηθείτε, αφού επεξεργαστείτε τον κωδικό σας τοπικά, μην ξεχάσετε να τον ανεβάσετε στον διακομιστή σας χρησιμοποιώντας το FileZilla. Σε αντίθεση με το node.js, το Apache επανεκκινείται αυτόματα, αλλά θα πρέπει να φορτώσετε ξανά τη σελίδα σας στο πρόγραμμα περιήγησής σας. Χρησιμοποιήστε το ctrl+f5 για ανανέωση και διαγραφή της προσωρινής μνήμης της σελίδας σας επίσης.

Για να λειτουργήσει ο κώδικας, θα χρειαστεί να εισαγάγετε λίγα δεδομένα. Αρχικά, θα χρειαστεί να αλλάξετε τη μεταβλητή url στη συνάρτηση send_request εντός του index.html από το blinkmytree.live στον δικό σας τομέα ή IP, για παράδειγμα: 165.13.45.123.

Δεύτερον, θα σας καθοδηγήσω μέσω κώδικα για να τον καταλάβετε. Βεβαιωθείτε ότι δεν παραλείπετε τα σχόλια που έκανα στον κώδικα. Η σελίδα είναι ένα έγγραφο HTML. Αφήνοντας όλους τους κανόνες CSS (στυλ σελίδας και θέση περιεχομένου) στην άκρη, θα εξετάσουμε το λειτουργικό σημαντικό περιεχόμενο. Για να μάθετε περισσότερα σχετικά με το CSS, ανατρέξτε στη διεύθυνση

Θέλαμε αυτά τα κύρια χαρακτηριστικά (οι ειδικοί στις ευέλικτες μεθόδους θα έλεγαν ιστορίες χρηστών) στη σελίδα:

• Ζωντανό βίντεο ενσωματωμένο στη σελίδα

• Ένα LED με δυνατότητα κλικ σε ένα χριστουγεννιάτικο δέντρο, το οποίο χειρίστηκε στο πρόγραμμα επεξεργασίας εικόνας Gimp (https://www.gimp.org/).

• Πραγματική επικοινωνία με διακομιστή, αναμονή για αλλαγή των καταστάσεων led.

Βήμα 12: Κατανόηση του κώδικα Front-end και λειτουργία του ΜΕΡΟΣ 2

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

Στο HTML5, το νεότερο πρότυπο HTML, υπάρχει κάτι που ονομάζεται χάρτης εικόνας. Μας επιτρέπει να ορίσουμε περιοχές σε μια εικόνα, στις οποίες μπορούμε να εφαρμόσουμε ακροατές δράσης σε αυτήν.

Καθώς έχουμε πολλές περιοχές να ορίσουμε, χρησιμοποιήσαμε ένα διαδικτυακό εργαλείο https://www.image-map.net/ για να καθορίσουμε αυτές τις περιοχές και αντιγράψαμε τον κώδικα HTML στη σελίδα μας.

Μόλις το κάνουμε αυτό, μπορούμε να τοποθετήσουμε το onclick συμβάν με μια λειτουργία που καλεί και παράμετρο ενός αριθμού LED σε κάθε μία από αυτές τις περιοχές. Δείτε το στιγμιότυπο οθόνης παραπάνω.

Βήμα 13: Κατανόηση του κώδικα Front-end και λειτουργία του ΜΕΡΟΣ 3

Μέσα στο τέλος του σώματος HTML, σε μια περιοχή, βάζουμε κάποια JavaScript, για να ορίσουμε τις συναρτήσεις που καλούμε σε συμβάντα onclick. Σε παγκόσμιο επίπεδο, ορίζουμε ένα XMLHttpRequest, το οποίο χρησιμοποιούμε για να στείλουμε ένα αίτημα PUT

Έχουμε δύο λειτουργίες:

συνάρτηση set_color (val)

συνάρτηση send_quest (id)

Για τον έλεγχο αιτήματος API, συνιστώ ένα εργαλείο λογισμικού που χρησιμοποιείται συνήθως, το οποίο ονομάζεται Postman https://www.postman.com/. Μας επιτρέπει απλώς να στείλουμε αίτημα API στο διακομιστή, χωρίς δεξιότητες προγραμματισμού. Επιτρέπει τον χλευασμό ενός διακομιστή και την αποδοχή αιτημάτων επίσης.

Βήμα 14: Κατανόηση του κώδικα Front-end και λειτουργία του ΜΕΡΟΣ 4

Η εφαρμογή σας λειτουργεί.

Λάβετε υπόψη ότι οι αριθμοί αντιστρέφονται, δηλαδή το 20 είναι 1 και το 1 είναι 20, αυτό συμβαίνει επειδή οι λυχνίες LED στο δέντρο ξεκινούν από το κάτω μέρος, αλλά για καλύτερη εμπειρία χρήστη, βάζουμε μια αρχή που οδηγεί στην κορυφή.

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

Βήμα 15: Ο κώδικας Arduino

Το ESP8266 εκτελεί ένα βασικό σκίτσο παραδείγματος HTTP Client που είναι ελαφρώς τροποποιημένο, λαμβάνοντας τα δεδομένα από τον ιστότοπό μου μέσω μιας κλήσης API.

Θα χρειαστεί επίσης να εγκαταστήσετε βιβλιοθήκες για τον έλεγχο της λωρίδας LED εάν θέλετε να χρησιμοποιήσετε την ίδια διεύθυνση RGB ταινίας με αυτήν που έκανα εγώ.

github.com/adafruit/Adafruit-WS2801-Librar…

Στο σκίτσο που επισυνάπτω, θα χρειαστεί να εισαγάγετε το όνομα wi-fi και τον κωδικό πρόσβασής σας ένα url στον ιστότοπό σας (δείτε τα σχόλια)

Ουσιαστικά μετατρέπουμε μια απόκριση http σε συμβολοσειρά τύπου C, ώστε να μπορούμε να χρησιμοποιήσουμε τη συνάρτηση C strtok για να χωρίσουμε τη συμβολοσειρά με κόμματα και να γεμίσουμε τον πίνακα leds με τιμές που διαβάζονται από έναν διακομιστή. Στη συνέχεια, καλούμε μια συνάρτηση όπου περνάμε από τον πίνακα και με βάση τις τιμές, αλλάζουμε το σωστό χρώμα που περιμένει ο χρήστης.

Αυτο ειναι!

Συγχαρητήρια, τα καταφέρατε!

Βήμα 16: Αλυσίδα LED RGB

Ωχ. Τώρα ήρθε η ώρα να κάνουμε ένα μικρό διάλειμμα από όλη την κωδικοποίηση:)

Δεδομένου ότι το ESP8266 δεν έχει πολλές καρφίτσες GPIO για τον έλεγχο των LED μεμονωμένα, χρησιμοποίησα αυτήν την αλυσίδα RGB LED με δυνατότητα διεύθυνσης:

www.sparkfun.com/products/11020

Με αυτόν τον τρόπο, και τα 20 led RGB (συνολικά 60 led) μπορούν να ελεγχθούν μόνο με δύο ακίδες - "δεδομένα" και "ρολόι" και ισχύ 5V απευθείας από το ESP8266.

Η σύνδεση της λωρίδας στο NodeMcu είναι εύκολη. 5V έως Vin στο NodeMcu (5V από USB), κίτρινο σύρμα στο pin 12, πράσινο σύρμα στο pin 14, γείωση με γείωση.

Μπορείτε να ορίσετε μεμονωμένο χρώμα RGB και φωτεινότητα. Με λίγη ανάμειξη χρωμάτων, μπορείτε να παράγετε ΠΟΛΛΑ χρώματα για κάθε LED.

Υπάρχει επίσης μια πολύ δροσερή βιβλιοθήκη για όλα τα είδη δροσερών εφέ FX με αυτά τα LED. Δοκιμάστε το αν σας αρέσει:

github.com/r41d/WS2801FX

Βήμα 17: Διακοσμήστε το Χριστουγεννιάτικο Δέντρο

Κάντε το όμορφο και βεβαιωθείτε ότι όλες οι λυχνίες LED είναι ορατές και έχουν απλωθεί όμορφα πάνω στο δέντρο.

Βήμα 18: Τελικές πινελιές

Όταν έχετε το δέντρο έτοιμο, τραβήξτε μια ωραία φωτογραφία και επαναλάβετε το βήμα για τη δημιουργία του χάρτη εικόνας των θέσεων με δυνατότητα κλικ (θέσεις LED)

Αυτός είναι ο πιο διαισθητικός τρόπος διασύνδεσης με τα LED.

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

Θα πρέπει επίσης να ξεκινήσετε μια ζωντανή ροή του δέντρου σας στο YouTube (αν θέλετε να παρακολουθήσετε τι συμβαίνει σε πραγματικό χρόνο) και να ενσωματώσετε τη ροή στον ιστότοπό σας.

Βήμα 19: Θαυμάστε τον ιστότοπό σας

Είστε φοβεροί αν τα καταφέρατε μέχρι τώρα:) Προσκαλέστε τους φίλους σας (και εμένα φυσικά: P) και κάντε τους να κάνουν κλικ στο δέντρο σας όσο το δυνατόν περισσότερο:)

ν

Αυτό ήταν ένα πολύ μακροχρόνιο εκπαιδευτικό, για ένα αρκετά περίπλοκο έργο. Αλλά αξίζει τον κόπο στο τέλος: D

Σας ευχαριστώ! Αν θέλετε να μείνετε σε επαφή με αυτό που δουλεύω:

Μπορείτε να εγγραφείτε στο κανάλι μου στο YouTube:

www.youtube.com/c/JTMakesIt

Μπορείτε επίσης να με ακολουθήσετε στο Facebook και το Instagram

www.facebook.com/JTMakesIt

www.instagram.com/jt_makes_it

για σπόιλερ σε αυτό που δουλεύω αυτήν τη στιγμή, στα παρασκήνια και άλλα πρόσθετα! ΥΓ:., Αν ΠΡΑΓΜΑΤΙΚΑ, ΠΡΑΓΜΑΤΙΚΑ σας άρεσε, μπορείτε επίσης να μου αγοράσετε έναν καφέ εδώ, οπότε θα έχω περισσότερη ενέργεια για μελλοντικά έργα (αυτό μου πήρε 2 εβδομάδες ύπνου μακριά μου, αφού πήρα αυτήν την ιδέα πολύ αργά):)

www.buymeacoffee.com/JTMakesIt

Και μην ξεχάσετε να ψηφίσετε αυτό το Instructable στο διαγωνισμό "Anything Goes":)