Kazalo:

Domača avtomatizacija z zapornim portalom: 9 korakov
Domača avtomatizacija z zapornim portalom: 9 korakov

Video: Domača avtomatizacija z zapornim portalom: 9 korakov

Video: Domača avtomatizacija z zapornim portalom: 9 korakov
Video: Home Assistant. Урок 8.3 Scene Изучаем сцены, применяем для управления освещением 2024, November
Anonim
Domača avtomatizacija z uporabo Captive Portala
Domača avtomatizacija z uporabo Captive Portala
Domača avtomatizacija z uporabo Captive Portala
Domača avtomatizacija z uporabo Captive Portala
Domača avtomatizacija z uporabo Captive Portala
Domača avtomatizacija z uporabo Captive Portala

Tukaj bomo ustvarili zelo zanimiv projekt domače avtomatizacije na osnovi Captive Portal z uporabo nodeMCU od začetka … Torej, začnimo..

1. korak: Začetne izjave

Začetne izjave
Začetne izjave

Razglasite zatiče IO nodeMCU za izvajanje dejanj, datotek z glavo in kodo za ustvarjanje strežnika DNS … prikazano na sliki.

2. korak: Html koda za sprednji konec, tj. Stran za prijavo

Html koda za front end I.e. Stran za prijavo
Html koda za front end I.e. Stran za prijavo

Kot je prikazano na sliki, razglasite html kodo v spremenljivki niza, ki jo pošljemo končnemu uporabniku za potrditev kode za dostop.

*Za ulov podatkov, ki jih vnese uporabnik, uporabljamo sidrno podokno in oznako href

*V bistvu se sidrna oznaka uporablja za dodajanje druge spletne strani na spletno stran, oznaka href pa določa cilj povezave.

*Toda tukaj prejemamo podatke, ki jih je uporabnik vnesel v polje Koda za dostop prek sidrnega podokna in oznake href …

kako, omenil bom približno dve metodi lovljenja vnosa iz spletnega vmesnika na našo programsko opremo.

3. korak: Uporaba metod WebServer.arg () in WebServer.on ()

Uporaba metod WebServer.arg () in WebServer.on ()
Uporaba metod WebServer.arg () in WebServer.on ()
Uporaba metod WebServer.arg () in WebServer.on ()
Uporaba metod WebServer.arg () in WebServer.on ()

Kot sem omenil v prejšnjem koraku, vam bom povedal dve različni metodi.

1) Z uporabo metode webServer.arg ():

Tu določimo atribut samodejnega ostrenja skupaj z elementom, kot je prikazano na sliki, Kaj samodejno ostrenje naredi, je, da je logični atribut, ko je res, pomeni, da je prisoten, da zagotavlja, da se vhodni element osredotoči, ko se stran naloži.

in nato na strežniškem objektu pokličemo metodo args (). Ta metoda bo vrnila število parametrov poizvedbe, ki so bili posredovani na HTTP, in uporabila pogojne stavke za ustrezno izvajanje dejanj.

2) Z uporabo atributa in href:

Tu določimo naše kontrolne elemente (kot so gumbi) in dodelimo niz, char, povezavo, ki jo želite preveriti s pogojnimi stavki, nato pa pokličemo webServer.on (), da prejmemo vnos za preverjanje.

Kot je prikazano..

4. korak: če uporabnik vnese napačne poverilnice

Če uporabnik vnese napačne poverilnice
Če uporabnik vnese napačne poverilnice

Kar sem naredil, preprosto spremenite obstoječo kodo strani za prijavo in dodajte novo glavo, ki obvešča, da je uporabnik vnesel napačno poverilnico.

Najprej potrdite poverilnice, če so napačne, usmerite uporabnika na novo urejeno stran za prijavo, ki prikazuje sporočilo o napaki.

Kot je prikazano..

5. korak: Kako dodati sliko na svojo spletno stran

Kako dodati sliko na svojo spletno stran.
Kako dodati sliko na svojo spletno stran.

To je zelo preprosto, saj tukaj ne shranjujemo svojih slik v fizični pomnilnik, zato da zagotovimo pot do te slike, ki jo običajno naredimo v primeru strani html.

zato naše slike preprosto pretvorimo v base64 in jih prilepimo v kodo naše strani.

6. korak: Katere komponente potrebujemo

1)- vozliščeMCU

2)- Arduino IDE za bliskovno vozliščeMCU

3) premostitvene žice (F-2-F)

4)-Relejni modul

5)-Pametni telefon ali prenosni računalnik, ki podpira WiFi

7. korak: Povezave.

Povezave.
Povezave.

Dodani relejski modul deklariranim IO zatičem v kodi.

Priključite rele na električno opremo, ki jo želite upravljati, kot je prikazano na sliki.

8. korak: Zdaj preizkusite in uživajte

Zdaj preizkusite in uživajte.
Zdaj preizkusite in uživajte.
Zdaj preizkusite in uživajte.
Zdaj preizkusite in uživajte.
Zdaj preizkusite in uživajte.
Zdaj preizkusite in uživajte.
Zdaj preizkusite in uživajte.
Zdaj preizkusite in uživajte.

9. korak: Koda je tu

Prosim, napišite svoje dragocene pripombe..

Priporočena: