INHOUDSOPGAWE:

Tuisautomatisering met behulp van Captive Portal: 9 stappe
Tuisautomatisering met behulp van Captive Portal: 9 stappe

Video: Tuisautomatisering met behulp van Captive Portal: 9 stappe

Video: Tuisautomatisering met behulp van Captive Portal: 9 stappe
Video: Zyxel NebulaFlex NWA50AX Productbespreking 2024, November
Anonim
Tuisoutomatisering met behulp van Captive Portal
Tuisoutomatisering met behulp van Captive Portal
Tuisoutomatisering met behulp van Captive Portal
Tuisoutomatisering met behulp van Captive Portal
Tuisoutomatisering met behulp van Captive Portal
Tuisoutomatisering met behulp van Captive Portal

Hier maak ons 'n baie interessante projek van tuisautomatisering op basis van Captive Portal, met behulp van nodeMCU van nuuts af.

Stap 1: Aanvanklike verklarings

Aanvanklike verklarings
Aanvanklike verklarings

Verklaar die IO -penne van nodeMCU om aksie, koplêers en kode uit te voer vir die skep van DNS -bediener.. vertoon in beeld..

Stap 2: HTML -kode vir Front End, d.w.s. Aanmeldbladsy

HTML -kode vir front -end, d.w.s. Aanmeldbladsy
HTML -kode vir front -end, d.w.s. Aanmeldbladsy

Soos in die prentjie getoon, verklaar html-kode binne 'n stringveranderlike wat ons na die eindgebruiker stuur om die toegangskode te bekragtig.

*Om die data wat deur die gebruiker hier ingevoer is, op te vang, gebruik ons ankerpaneel en href -tag

*Basies word Anchor -tag gebruik om nog 'n webblad op die webblad by te voeg, en die href -tag definieer die bestemming van die skakel.

*Maar hier kry ons die data wat die gebruiker ingevoer het binne die veld Toegangskode deur middel van Ankervenster en href -tag …

hoe, sal ek noem oor twee metodes om die insette van die webkoppelvlak na ons programmeerders se eindpunte te haal.

Stap 3: Gebruik van WebServer.arg () en WebServer.on () metodes

Gebruik van WebServer.arg () en WebServer.on () Metodes
Gebruik van WebServer.arg () en WebServer.on () Metodes
Gebruik van WebServer.arg () en WebServer.on () Metodes
Gebruik van WebServer.arg () en WebServer.on () Metodes

Soos ek in die vorige stap noem, vertel ek u twee verskillende metodes.

1) Met behulp van webServer.arg () metode:

Hier spesifiseer ons die outofokuskenmerk saam met die element soos op die foto getoon, wat outofokus doen, is dat dit 'n booleaanse eienskap is as dit waar is, beteken dat dit verseker dat die invoerelement gefokus word wanneer bladsye laai.

en dan noem ons die args () metode op die bediener voorwerp. Hierdie metode sal die aantal navraagparameters wat op die HTTP deurgegee is, teruggee en voorwaardelike stellings toepas om aksies dienooreenkomstig uit te voer.

2) Deur die en href -kenmerk te gebruik:

Hier spesifiseer ons ons bedieningselemente (soos knoppies) binne en ken ons 'n string, char, skakel toe wat u wil bekragtig met behulp van voorwaardelike stellings, en dan bel ons webServer.on () om die insette vir validering te ontvang.

Soos aangedui..

Stap 4: As gebruikers verkeerde geloofsbriewe tik

As gebruikers tipes verkeerde geloofsbriewe tik
As gebruikers tipes verkeerde geloofsbriewe tik

Wat ek gedoen het, verander eenvoudig die bestaande aanmeldbladsykode en voeg 'n nuwe kop by waarin u weet dat die gebruiker 'n verkeerde inskrywing ingevoer het.

Bevestig eers die geloofsbrief as dit verkeerd is, stuur die gebruiker na 'n nuwe, geredigeerde aanmeldbladsy met 'n foutboodskap.

Soos aangedui..

Stap 5: Hoe om prentjie by u webblad te voeg

Hoe om 'n prentjie by u webblad te voeg
Hoe om 'n prentjie by u webblad te voeg

Dit is baie eenvoudig, want hier stoor ons nie ons beelde in 'n fisiese stoor nie, sodat ons 'n pad kan haal om die prentjie wat ons gewoonlik in die geval van html -bladsy doen, te gaan haal.

wat ons doen, is om ons beelde eenvoudig om te skakel na base64 en dit in ons bladsykode te plak, soos getoon.

Stap 6: watter komponente benodig ons

1)- nodeMCU

2)- Arduino IDE om nodeMCU te flits

3) jumper drade (F-2-F)

4) -Relaismodule

5)-'n WiFi-slimfoon of skootrekenaar om te toets

Stap 7: Verbindings

Verbindings
Verbindings

Voeg aflosmodule by verklaarde IO -penne in kode.

Koppel die relais aan die elektriese toerusting wat u wil beheer, soos in die prentjie getoon.

Stap 8: Toets en geniet dit nou

Nou toets en geniet
Nou toets en geniet
Nou toets en geniet
Nou toets en geniet
Nou toets en geniet
Nou toets en geniet
Nou toets en geniet
Nou toets en geniet

Stap 9: Kode is hier

Skryf asseblief u waardevolle kommentaar..

Aanbeveel: