Hjemmeautomatisering ved hjælp af Captive Portal: 9 trin

2024 Forfatter: John Day | [email protected]. Sidst ændret: 2024-01-30 08:27

Her vil vi oprette et meget interessant projekt med Captive Portal -baseret hjemmeautomatisering ved hjælp af nodeMCU fra bunden … Så lad os begynde..

Trin 1: Indledende erklæringer

Deklarere IO -benene på nodeMCU til at udføre handling, overskriftsfiler og kode til oprettelse af DNS -server..vises i billede..

Trin 2: HTML -kode til Front End I.e. Login side

Som vist på billedet, erklær html-kode inden for en strengvariabel, som vi sender til slutbruger til validering af adgangskode.

*For at fange de data, der er indtastet af brugeren her, bruger vi ankerrude og href -tag

*Grundlæggende bruges Anchor -tag til at tilføje en anden webside på websiden, og href -tag definerer destinationen for linket.

*Men her modtager vi de data, der er indtastet af brugeren inden for feltet Adgangskode via Ankerrude og href -tag …

hvordan vil jeg nævne om to metoder til at fange input fra webgrænseflade til vores midler, programmører slutter..

Trin 3: Brug af WebServer.arg () og WebServer.on () metoder

Som jeg nævner i forrige trin, vil jeg fortælle dig to forskellige metoder..

1) Ved at bruge webServer.arg () metode:

Her angiver vi autofokusattribut sammen med element som vist på billedet, hvad autofokus gør, er, at det er en boolsk attribut, når det er sandt, betyder, at det kan sikre, at inputelementet bliver fokuseret, når siden indlæses.

og derefter kalder vi args () -metoden på serverobjektet. Denne metode returnerer antallet af forespørgselsparametre, der blev videregivet på HTTP, og anvendte betingede udsagn for at udføre handlinger i overensstemmelse hermed.

2) Ved at bruge og href -attribut:

Her specificerer vi vores kontrolelementer (som knapper) inden for og tildeler en streng, char, link, som du vil validere ved hjælp af betingede udsagn, og derefter kalder vi webServer.on () for at modtage input til validering.

Som vist..

Trin 4: Hvis brugeren skriver forkerte legitimationsoplysninger

Hvad jeg havde gjort, skal du blot ændre den eksisterende login -sidekode og tilføje en ny overskrift, der informerer om, at brugeren har indtastet en forkert legitimationsoplysninger.

Valider først legitimationsoplysningerne, hvis det er forkert, direkte brugeren til en ny redigeret login -side, der viser fejlmeddelelse.

Som vist..

Trin 5: Sådan føjes billede til din webside

Det er meget enkelt, for her gemmer vi ikke vores billeder på et fysisk lager, så vi giver en sti til at hente det billede, som vi normalt gør i tilfælde af html -side.

så det vi gør er bare at konvertere vores billeder til base64 og indsætte det i vores sidekode Som vist..

Trin 6: Hvilke komponenter har vi brug for

1)- nodeMCU

2)- Arduino IDE til at blinke nodeMCU

3) jumper-tråde (F-2-F)

4) -Relæmodul

5) -en WiFi-aktiveret smartphone eller bærbar computer til test

Trin 7: Forbindelser

Tilføj relæmodul til deklarerede IO -ben i kode.

Tilslut relæet til elektrisk udstyr, du vil styre, som vist på billedet.

Trin 8: Test og nyd nu

Trin 9: Koden er her

Skriv venligst dine værdifulde kommentarer..