Taula de continguts:

Domòtica mitjançant Portal captiu: 9 passos
Domòtica mitjançant Portal captiu: 9 passos

Vídeo: Domòtica mitjançant Portal captiu: 9 passos

Vídeo: Domòtica mitjançant Portal captiu: 9 passos
Vídeo: ДРАКОН ЛЕГЕНДАРНО НЮХАЕТ ШЛЯПУ В ФИНАЛЕ ► 5 Прохождение New Super Mario Bros. Nintendo Wii 2024, De novembre
Anonim
Domòtica mitjançant Captive Portal
Domòtica mitjançant Captive Portal
Domòtica mitjançant Captive Portal
Domòtica mitjançant Captive Portal
Domòtica mitjançant Captive Portal
Domòtica mitjançant Captive Portal

Aquí crearem un projecte molt interessant de domòtica basada en Portal captiu que utilitza nodeMCU des de zero.. Així doncs, comencem …

Pas 1: declaracions inicials

Declaracions inicials
Declaracions inicials

Declareu els pins d'E / S de nodeMCU per dur a terme accions, fitxers de capçalera i codi per crear el servidor DNS … que apareixen a la imatge..

Pas 2: Codi HTML per a la interfície és a dir. Pàgina d'inici de sessió

Codi HTML per a Front End I.e. Pàgina d'inici de sessió
Codi HTML per a Front End I.e. Pàgina d'inici de sessió

Com es mostra a la imatge, declareu el codi html dins d’una variable de cadena que enviem a l’usuari final per validar el codi d’accés.

* Per capturar les dades introduïdes per l'usuari aquí, estem utilitzant el panell d'ancoratge i l'etiqueta href

* Bàsicament, l'etiqueta d'ancoratge s'utilitza per afegir una altra pàgina web a la pàgina web i l'etiqueta href defineix la destinació de l'enllaç.

* Però, aquí rebem les dades introduïdes per l'usuari dins del camp del codi d'accés mitjançant el panell d'ancoratge i l'etiqueta href …

Com, esmentaré sobre dos mètodes per captar l'entrada de la interfície web fins a la finalització dels nostres mitjans.

Pas 3: Ús dels mètodes WebServer.arg () i WebServer.on ()

Ús de mètodes WebServer.arg () i WebServer.on ()
Ús de mètodes WebServer.arg () i WebServer.on ()
Ús de mètodes WebServer.arg () i WebServer.on ()
Ús de mètodes WebServer.arg () i WebServer.on ()

Com, esmento en el pas anterior, us explicaré dos mètodes diferents …

1) Mitjançant el mètode webServer.arg ():

Aquí especifiquem l’atribut d’enfocament automàtic juntament amb l’element tal com es mostra a la imatge, el que fa l’enfocament automàtic és que és un atribut booleà quan és cert, significa que assegura que l’element d’entrada es concentra quan es carrega la pàgina.

i després, anomenem el mètode args () a l'objecte servidor. Aquest mètode retornarà el nombre de paràmetres de consulta que s'han passat a l'HTTP i aplicarà sentències condicionals per realitzar accions en conseqüència.

2) Mitjançant l'ús de l'atribut i href:

Aquí especifiquem els nostres elements de control (com els botons) dins i assignem una cadena, char, enllaç que voleu validar mitjançant sentències condicionals i després cridem a webServer.on () per rebre l'entrada per validar-la.

Com es mostra..

Pas 4: si l’usuari escriu credencials incorrectes

Si l’usuari escriu credencials incorrectes
Si l’usuari escriu credencials incorrectes

El que havia fet, simplement canvieu el codi de pàgina d'inici de sessió existent i afegiu una nova capçalera que informi que l'usuari havia introduït una credencial incorrecta.

Valideu primer la credencial si és incorrecta, dirigiu l’usuari a la nova pàgina d’inici de sessió editada que mostra un missatge d’error.

Com es mostra..

Pas 5: Com afegir una imatge a la vostra pàgina web

Com afegir una imatge a la vostra pàgina web …
Com afegir una imatge a la vostra pàgina web …

És molt senzill, perquè aquí no emmagatzemem les nostres imatges en un emmagatzematge físic, de manera que proporcionem un camí per obtenir la imatge que normalment fem en cas de pàgina html.

així que el que fem és simplement convertir les nostres imatges a base64 i enganxar-les al codi de la nostra pàgina.

Pas 6: quins components necessitem

1) - nodeMCU

2) - ID Arduino per fer flash a nodeMCU

3) cables de salt (F-2-F)

4) -Mòdul de retransmissió

5) -Un telèfon intel·ligent o portàtil habilitat per WiFi per provar

Pas 7: connexions

Connexions
Connexions

Afegiu un mòdul de relé als pins IO declarats del codi.

Connecteu el relé als equips elèctrics que vulgueu controlar, tal com es mostra a la imatge.

Pas 8: ara proveu i gaudiu

Ara prova i gaudeix
Ara prova i gaudeix
Ara prova i gaudeix
Ara prova i gaudeix
Ara prova i gaudeix
Ara prova i gaudeix
Ara prova i gaudeix …
Ara prova i gaudeix …

Pas 9: El codi és aquí

Escriviu els vostres valuosos comentaris..

Recomanat: