Αυτοματισμός σπιτιού με χρήση του Captive Portal: 9 βήματα

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

Εδώ, θα δημιουργήσουμε ένα πολύ ενδιαφέρον έργο αυτοματισμού του σπιτιού με βάση το Captive Portal χρησιμοποιώντας το nodeMCU από την αρχή.. Έτσι, ας ξεκινήσουμε..

Βήμα 1: Αρχικές δηλώσεις

Δηλώστε τις ακίδες IO του nodeMCU για εκτέλεση Action, Header Files και κώδικα για τη δημιουργία διακομιστή DNS.. εμφανίζεται στην εικόνα..

Βήμα 2: Κώδικας Html για το Front End I.e. Σελίδα σύνδεσης

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

*Για να συλλέξουμε τα δεδομένα που εισάγει ο χρήστης εδώ, χρησιμοποιούμε παράθυρο αγκύρωσης και ετικέτα href

*Βασικά η ετικέτα Anchor χρησιμοποιείται για την προσθήκη άλλης ιστοσελίδας μέσα στην ιστοσελίδα και η ετικέτα href καθορίζει τον προορισμό του συνδέσμου.

*Όμως, εδώ λαμβάνουμε τα δεδομένα που εισάγει ο χρήστης στο πεδίο Κωδικός πρόσβασης μέσω παραθύρου αγκύρωσης και ετικέτας href…

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

Βήμα 3: Χρήση των μεθόδων WebServer.arg () και WebServer.on ()

Όπως, ανέφερα στο προηγούμενο βήμα, θα σας πω δύο διαφορετικές μεθόδους.

1) Χρησιμοποιώντας τη μέθοδο webServer.arg ():

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

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

2) Χρησιμοποιώντας και το χαρακτηριστικό href:

Εδώ, καθορίζουμε τα στοιχεία ελέγχου μας (όπως κουμπιά) μέσα και εκχωρούμε μια συμβολοσειρά, char, σύνδεσμο που θέλετε να επικυρώσετε χρησιμοποιώντας δηλώσεις υπό όρους και, στη συνέχεια, καλούμε το webServer.on () για να λάβετε την εισαγωγή για επικύρωση.

Οπως φαίνεται..

Βήμα 4: Εάν οι τύποι χρηστών πληκτρολογήσουν λανθασμένα διαπιστευτήρια

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

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

Οπως φαίνεται..

Βήμα 5: Πώς να προσθέσετε εικόνα στην ιστοσελίδα σας

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

οπότε αυτό που κάνουμε είναι απλά να μετατρέψουμε τις εικόνες μας σε base64 και να τις επικολλήσουμε στον κώδικα της σελίδας μας Όπως φαίνεται..

Βήμα 6: Τι συστατικά χρειαζόμαστε

1)- nodeMCU

2)- Arduino IDE για να αναβοσβήνει το nodeMCU

3) καλώδια βραχυκυκλωτήρων (F-2-F)

4) -Μονάδα αναμετάδοσης

5) -Ένα WiFi που ενεργοποιεί smartphone ή φορητό υπολογιστή για δοκιμή

Βήμα 7: Συνδέσεις

Προσθέστε τη μονάδα ρελέ στις δηλωμένες ακίδες IO στον κώδικα.

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

Βήμα 8: Τώρα δοκιμάστε και απολαύστε

Βήμα 9: Ο κώδικας είναι εδώ

Παρακαλώ γράψτε τα πολύτιμα σχόλιά σας..