Innholdsfortegnelse:

Hjemmeautomatisering ved hjelp av Captive Portal: 9 trinn
Hjemmeautomatisering ved hjelp av Captive Portal: 9 trinn

Video: Hjemmeautomatisering ved hjelp av Captive Portal: 9 trinn

Video: Hjemmeautomatisering ved hjelp av Captive Portal: 9 trinn
Video: Home Assistant. Leksjon 9.4 TILLEGG – Xiaomi Gateway 3, zigbee2mqtt-integrasjon 2024, November
Anonim
Hjemmeautomatisering ved hjelp av Captive Portal
Hjemmeautomatisering ved hjelp av Captive Portal
Hjemmeautomatisering ved hjelp av Captive Portal
Hjemmeautomatisering ved hjelp av Captive Portal
Hjemmeautomatisering ved hjelp av Captive Portal
Hjemmeautomatisering ved hjelp av Captive Portal

Her skal vi lage et veldig interessant prosjekt med Captive Portal -basert hjemmeautomatisering ved hjelp av nodeMCU fra bunnen av. Så, la oss begynne..

Trinn 1: Innledende erklæringer

Innledende erklæringer
Innledende erklæringer

Erklær IO -pinnene til nodeMCU for å utføre handling, toppfiler og kode for å lage DNS -server..vises i bildet..

Trinn 2: HTML -kode for Front End I.e. Innloggingsside

HTML -kode for Front End I.e. Innloggingsside
HTML -kode for Front End I.e. Innloggingsside

Som vist på bildet, erklær html-kode i en strengvariabel som vi sender til sluttbruker for validering av tilgangskode.

*For å fange dataene som er lagt inn av brukeren her bruker vi ankerrute og href -tag

*I utgangspunktet brukes Anchor -tag for å legge til en annen webside på nettsiden, og href -taggen definerer destinasjonen for lenken.

*Men her mottar vi dataene som er angitt av brukeren i tilgangskodefeltet gjennom ankerruten og href -taggen …

hvordan, jeg vil nevne om to metoder for å fange input fra webgrensesnitt til våre midler programmerere slutter.

Trinn 3: Bruk av WebServer.arg () og WebServer.on () -metoder

Bruk av WebServer.arg () og WebServer.on () metoder
Bruk av WebServer.arg () og WebServer.on () metoder
Bruk av WebServer.arg () og WebServer.on () metoder
Bruk av WebServer.arg () og WebServer.on () metoder

Som jeg nevner i forrige trinn, skal jeg fortelle deg to forskjellige metoder.

1) Ved å bruke webServer.arg () -metoden:

Her spesifiserer vi autofokusattributt sammen med element som vist på bildet, hva autofokus gjør er at det er en boolsk attributt når det er sant betyr presentere det sikre at input elementet blir fokusert når siden lastes.

og så kaller vi args () -metoden på serverobjektet. Denne metoden vil returnere antall spørringsparametere som ble sendt på HTTP og bruke betingede setninger for å utføre handlinger tilsvarende.

2) Ved å bruke og href -attributt:

Her spesifiserer vi kontrollelementene våre (som knapper) i og tildeler en streng, char, lenke som du vil validere ved hjelp av betingede setninger, og deretter kaller vi webServer.on () for å motta input for validering.

Som vist..

Trinn 4: Hvis brukeren skriver feil legitimasjon

Hvis brukeren skriver feil legitimasjon
Hvis brukeren skriver feil legitimasjon

Det jeg hadde gjort, bare endre den eksisterende påloggingssidekoden og legg til en ny overskrift som informerer om at brukeren hadde angitt feil legitimasjon.

Valider først legitimasjonen hvis den er feil, rett brukeren til en ny redigert påloggingsside som viser feilmelding.

Som vist..

Trinn 5: Slik legger du til bilde på nettsiden din

Hvordan legge til bilde på nettsiden din
Hvordan legge til bilde på nettsiden din

Det er veldig enkelt, for her lagrer vi ikke bildene våre til en fysisk lagring, slik at vi gir en bane for å hente det bildet som vi vanligvis gjør i tilfelle html -side.

så det vi gjør er ganske enkelt å konvertere bildene våre til base64 og lime det inn i sidekoden vår Som vist..

Trinn 6: Hvilke komponenter vi trenger

1)- nodeMCU

2)- Arduino IDE til å blinke nodeMCU

3) jumper ledninger (F-2-F)

4) -Relemodul

5)-En WiFi-aktivert smarttelefon eller bærbar datamaskin for å teste

Trinn 7: Tilkoblinger

Tilkoblinger
Tilkoblinger

Legg til relemodul til deklarerte IO -pinnene i koden.

Koble reléet til elektrisk utstyr du vil kontrollere som vist på bildet.

Trinn 8: Test og nyt nå

Test nå og nyt
Test nå og nyt
Test nå og nyt
Test nå og nyt
Test nå og nyt
Test nå og nyt
Test nå og nyt
Test nå og nyt

Trinn 9: Koden er her

Skriv dine verdifulle kommentarer..

Anbefalt: