Cuprins:

Home Automation folosind Captive Portal: 9 pași
Home Automation folosind Captive Portal: 9 pași

Video: Home Automation folosind Captive Portal: 9 pași

Video: Home Automation folosind Captive Portal: 9 pași
Video: CUM TE VEDE ACUM PERSOANA CARE TE-A RĂNIT?💔Tarot Interactiv 2024, Noiembrie
Anonim
Home Automation folosind Captive Portal
Home Automation folosind Captive Portal
Home Automation folosind Captive Portal
Home Automation folosind Captive Portal
Home Automation folosind Captive Portal
Home Automation folosind Captive Portal

Aici, vom crea un proiect foarte interesant de automatizare a casei bazate pe Portal captiv, folosind nodeMCU de la zero.. Deci, să începem..

Pasul 1: Declarații inițiale

Declarații inițiale
Declarații inițiale

Declarați pinii IO ai nodeMCU pentru a efectua acțiuni, fișiere antet și cod pentru crearea serverului DNS … afișat în imagine..

Pasul 2: Cod HTML pentru Front End I.e. Pagina de logare

Cod HTML pentru Front End I.e. Pagina de logare
Cod HTML pentru Front End I.e. Pagina de logare

După cum se arată în imagine, declarați codul html într-o variabilă șir pe care o trimitem utilizatorului final pentru validarea Codului de acces.

* Pentru a prinde datele introduse de utilizator aici, folosim panoul de ancorare și eticheta href

* Practic, eticheta de ancorare este utilizată pentru a adăuga o altă pagină web în cadrul paginii web, iar eticheta href definește destinația linkului.

* Dar, aici primim datele introduse de utilizator în câmpul Cod de acces prin panoul de ancoră și eticheta href …

cum, voi menționa despre două metode de captare a intrării de la interfața web la mijloacele noastre de programare sfârșesc..

Pasul 3: Utilizarea metodelor WebServer.arg () și WebServer.on ()

Utilizarea metodelor WebServer.arg () și WebServer.on ()
Utilizarea metodelor WebServer.arg () și WebServer.on ()
Utilizarea metodelor WebServer.arg () și WebServer.on ()
Utilizarea metodelor WebServer.arg () și WebServer.on ()

Așa cum, menționez în pasul anterior, vă voi spune două metode diferite..

1) Folosind metoda webServer.arg ():

Aici, specificăm atributul de focalizare automată împreună cu elementul așa cum se arată în imagine, ceea ce face focalizarea automată este că este un atribut boolean atunci când este adevărat înseamnă prezent, asigură faptul că elementul de intrare se concentrează atunci când pagina se încarcă.

și apoi, apelăm metoda args () pe obiectul server. Această metodă va returna numărul de parametri de interogare care au fost trimiși pe HTTP și vor aplica instrucțiuni condiționale pentru a efectua acțiuni în consecință.

2) Prin utilizarea atributului și href:

Aici, specificăm elementele noastre de control (cum ar fi butoanele) din interior și atribuim un șir, char, link pe care doriți să îl validați folosind instrucțiuni condiționale și apoi apelăm webServer.on () pentru a primi intrarea pentru validare.

Așa cum se arată..

Pasul 4: dacă utilizatorul tastează acreditări greșite

Dacă utilizatorul tastează acreditări greșite
Dacă utilizatorul tastează acreditări greșite

Ceea ce am făcut, pur și simplu schimbați codul de pagină de autentificare existent și adăugați un nou antet prin care informați că utilizatorul a introdus o acreditare greșită..

Mai întâi validați acreditarea dacă este greșită, direcționați utilizatorul către o nouă pagină de conectare editată care afișează mesajul de eroare.

Așa cum se arată..

Pasul 5: Cum să adăugați o imagine pe pagina dvs. web

Cum să adăugați o imagine pe pagina dvs. web
Cum să adăugați o imagine pe pagina dvs. web

Este foarte simplu, deoarece aici nu stocăm imaginile într-un spațiu fizic, astfel încât să oferim o cale pentru a prelua acea imagine pe care o facem de obicei în cazul paginii html.

deci ceea ce facem este pur și simplu să ne convertim imaginile în base64 și să le lipim în codul paginii noastre Așa cum se arată..

Pasul 6: De ce componente avem nevoie

1) - nodeMCU

2) - Arduino IDE pentru a bloca nodeMCU

3) fire de jumper (F-2-F)

4) -Modul de reluare

5) -Un smartphone sau laptop activat WiFi pentru testare

Pasul 7: Conexiuni

Conexiuni
Conexiuni

Adăugați modulul de releu la pinii IO declarați în cod.

Conectați releul la echipamentele electrice pe care doriți să le controlați așa cum se arată în imagine..

Pasul 8: Acum testați și bucurați-vă

Acum testați și bucurați-vă
Acum testați și bucurați-vă
Acum testați și bucurați-vă
Acum testați și bucurați-vă
Acum testați și bucurați-vă
Acum testați și bucurați-vă
Acum testați și bucurați-vă
Acum testați și bucurați-vă

Pasul 9: Codul este aici

Vă rugăm să scrieți comentariile dvs. valoroase..

Recomandat: