Otthoni automatizálás a Captive Portal használatával: 9 lépés

2024 Szerző: John Day | [email protected]. Utoljára módosítva: 2024-01-30 09:41

Itt egy nagyon érdekes projektet fogunk létrehozni a Captive Portal alapú otthoni automatizálásról a nodeMCU használatával a semmiből. Tehát kezdjük.

1. lépés: Kezdeti nyilatkozatok

Nyilvánítsa a nodeMCU IO -csapjait, hogy végrehajtsák a műveletet, a fejlécfájlokat és a DNS -kiszolgáló létrehozásához szükséges kódot.

2. lépés: HTML -kód a kezelőfelülethez, pl. Bejelentkezési oldal

A képen látható módon deklarálja a html kódot egy karakterlánc változóban, amelyet elküldünk a végfelhasználónak a hozzáférési kód érvényesítéséhez.

*A felhasználó által itt megadott adatok rögzítéséhez horgonyablakot és href címkét használunk

*Alapvetően a horgonycímke egy másik weboldal hozzáadására szolgál a weboldalon belül, és a href címke határozza meg a link célját.

*De itt megkapjuk a felhasználó által a Belépőkód mezőben a horgonyablakon és a href címkén keresztül megadott adatokat.

hogyan, megemlítek két módszert, amellyel a webes felületről érkező adatokat a programozóink befejezik.

3. lépés: A WebServer.arg () és a WebServer.on () metódusok használata

Amint az előző lépésben említettem, két különböző módszert fogok elmondani.

1) A webServer.arg () módszer használatával:

Itt megadjuk az autofókusz attribútumot az elemmel együtt, ahogy a képen látható, az autofókusz az, hogy ez egy logikai attribútum, ha igaz, azt jelenti, hogy biztosítja, hogy a bemeneti elem fókuszáljon az oldal betöltésekor.

majd hívjuk az args () metódust a szerver objektumon. Ez a módszer visszaadja a HTTP -n átadott lekérdezési paraméterek számát, és feltételes utasításokat alkalmaz a megfelelő műveletek végrehajtásához.

2) A és a href attribútum használatával:

Itt megadjuk a vezérlőelemeinket (például gombokat), és hozzárendelünk egy karaktersorozatot, char -t, amelyet feltételes utasításokkal szeretnénk érvényesíteni, majd hívjuk a webServer.on () fájlt, hogy megkapjuk az érvényesítést.

Az ábrán látható módon..

4. lépés: Ha a felhasználó hibás hitelesítő adatokat ír be

Amit tettem, egyszerűen módosítsa a meglévő bejelentkezési oldal kódját, és adjon hozzá egy új fejlécet, amely tájékoztatja, hogy a felhasználó rossz hitelesítő adatokat adott meg.

Először ellenőrizze a hitelesítő adatokat, ha helytelen, irányítsa a felhasználót egy új, szerkesztett bejelentkezési oldalra, amely hibaüzenetet jelenít meg.

Az ábrán látható módon..

Lépés: Kép hozzáadása a weboldalhoz

Ez nagyon egyszerű, mert itt nem tároljuk képeinket fizikai tárolóra, hogy elérési utat biztosítsunk a kép lekéréséhez, amit általában html oldal esetén szoktunk.

Tehát egyszerűen csak konvertáljuk képeinket base64 -be, és illesszük be az oldalkódunkba.

6. lépés: Milyen összetevőkre van szükségünk

1)- nodeMCU

2)- Arduino IDE a nodeMCU villanásához

3) jumper vezetékek (F-2-F)

4) -Relay modul

5)-WiFi tesztelésre alkalmas okostelefon vagy laptop

7. lépés: Csatlakozások

Adja hozzá a relé modult a deklarált IO csapokhoz a kódban.

Csatlakoztassa a relét a vezérelni kívánt elektromos berendezésekhez a képen látható módon.

8. lépés: Most tesztelje és élvezze

9. lépés: Itt a kód

Kérem írja meg értékes megjegyzéseit..