Domotica con Captive Portal: 9 passaggi

2024 Autore: John Day | [email protected]. Ultima modifica: 2024-01-30 10:02

Qui, creeremo un progetto molto interessante di automazione domestica basata su Captive Portal utilizzando nodeMCU da zero. Quindi, iniziamo..

Fase 1: Dichiarazioni iniziali

Dichiarare i pin IO di nodeMCU per eseguire l'azione, i file di intestazione e il codice per la creazione del server DNS..mostrato nell'immagine..

Passaggio 2: codice HTML per front-end, ad es. Pagina di login

Come mostrato nell'immagine, dichiarare il codice html all'interno di una variabile stringa che inviamo all'utente finale per la convalida del codice di accesso.

*Per catturare i dati inseriti dall'utente qui stiamo usando il pannello di ancoraggio e il tag href

* Fondamentalmente il tag Anchor viene utilizzato per aggiungere un'altra pagina Web all'interno della pagina Web e il tag href definisce la destinazione del collegamento.

*Ma qui stiamo ricevendo i dati inseriti dall'utente all'interno del campo Codice di accesso tramite Anchor Pane e tag href …

come, menzionerò di due metodi per catturare l'input dall'interfaccia web al nostro fine programmatore di mezzi..

Passaggio 3: utilizzo dei metodi WebServer.arg() e WebServer.on()

Come, menziono nel passaggio precedente, ti dirò due metodi diversi..

1) Usando il metodo webServer.arg():

Qui, specifichiamo l'attributo di messa a fuoco automatica insieme all'elemento come mostrato nell'immagine, ciò che fa l'autofocus è che è un attributo booleano quando è vero significa che presente assicura che l'elemento di input venga messo a fuoco quando la pagina viene caricata.

e poi, chiamiamo il metodo args() sull'oggetto server. Questo metodo restituirà il numero di parametri di query che sono stati passati su HTTP e applicherà le istruzioni condizionali per eseguire le azioni di conseguenza.

2) Utilizzando l'attributo e href:

Qui, specifichiamo i nostri elementi di controllo (come i pulsanti) all'interno e assegniamo una stringa, un carattere, un collegamento che desideri convalidare utilizzando istruzioni condizionali e quindi chiamiamo webServer.on() per ricevere l'input per la convalida.

Come mostrato..

Passaggio 4: se l'utente digita credenziali errate

Quello che avevo fatto, cambia semplicemente il codice della pagina di accesso esistente e aggiungi una nuova intestazione che informa che l'utente ha inserito una credenziale errata.

Prima convalidare la credenziale se è errata indirizzare l'utente alla nuova pagina di accesso modificata che mostra un messaggio di errore.

Come mostrato..

Passaggio 5: come aggiungere un'immagine alla tua pagina Web…

È molto semplice, perché qui non memorizziamo le nostre immagini in un archivio fisico in modo da fornire un percorso per recuperare quell'immagine che di solito facciamo in caso di pagina html.

quindi quello che facciamo è semplicemente convertire le nostre immagini in base64 e incollarle nel codice della nostra pagina come mostrato..

Passaggio 6: di quali componenti abbiamo bisogno

1)- nodoMCU

2)- Arduino IDE per flashare nodeMCU

3)-fili di ponticello (F-2-F)

4)-Modulo relè

5)-Uno smartphone o laptop abilitato per il WiFi da testare

Passaggio 7: connessioni

Aggiungi il modulo relè ai pin IO dichiarati nel codice.

Collegare il relè alle apparecchiature elettriche che si desidera controllare come mostrato nell'immagine..

Passaggio 8: ora prova e divertiti

Passaggio 9: il codice è qui

Si prega di scrivere i vostri preziosi commenti..