Heimautomatisierung mit Captive Portal - Gunook

2024 Autor: John Day | [email protected]. Zuletzt bearbeitet: 2024-01-30 07:17

Hier werden wir ein sehr interessantes Projekt der Captive Portal-basierten Hausautomation mit nodeMCU von Grund auf neu erstellen.

Schritt 1: Ersterklärungen

Deklarieren Sie die IO-Pins von nodeMCU, um Aktion, Header-Dateien und Code zum Erstellen des DNS-Servers auszuführen.

Schritt 2: Html-Code für Frontend, d.h. Loginseite

Wie in der Abbildung gezeigt, deklarieren Sie den HTML-Code in einer String-Variablen, die wir zur Validierung des Zugriffscodes an den Endbenutzer senden.

*Um die hier vom Benutzer eingegebenen Daten abzufangen, verwenden wir das Ankerfenster und das href-Tag

*Grundsätzlich wird das Anchor-Tag verwendet, um eine weitere Webseite innerhalb der Webseite hinzuzufügen, und das href-Tag definiert das Ziel des Links.

*Hier erhalten wir jedoch die vom Benutzer im Feld Zugriffscode eingegebenen Daten über das Ankerfenster und das href-Tag…

Wie, ich werde zwei Methoden erwähnen, um die Eingabe von der Webschnittstelle zu unserem Mittelprogrammierer zu erfassen.

Schritt 3: Verwendung der Methoden WebServer.arg() und WebServer.on()

Wie ich im vorherigen Schritt erwähne, werde ich Ihnen zwei verschiedene Methoden nennen.

1) Mit der Methode webServer.arg():

Hier geben wir das Autofokus-Attribut zusammen mit dem Element an, wie im Bild gezeigt, Was Autofokus macht, ist, dass es ein boolesches Attribut ist, wenn es wahr ist, bedeutet es vorhanden, es stellt sicher, dass das Eingabeelement beim Laden der Seite fokussiert wird.

und dann rufen wir die Methode args() für das Serverobjekt auf. Diese Methode gibt die Anzahl der Abfrageparameter zurück, die über HTTP übergeben wurden, und wendet bedingte Anweisungen an, um entsprechende Aktionen auszuführen.

2) Durch Verwenden und href-Attribut:

Hier spezifizieren wir unsere Kontrollelemente (wie Schaltflächen) darin und weisen einen String, char, link zu, den Sie mit bedingten Anweisungen validieren möchten, und rufen dann webServer.on() auf, um die Eingabe für die Validierung zu erhalten.

Wie gezeigt..

Schritt 4: Wenn der Benutzer falsche Anmeldeinformationen eingibt

Was ich getan hatte, änderte einfach den vorhandenen Code der Anmeldeseite und fügte eine neue Kopfzeile hinzu, die darüber informiert, dass der Benutzer falsche Anmeldeinformationen eingegeben hatte.

Überprüfen Sie zuerst die Anmeldeinformationen, wenn sie falsch sind, und leiten Sie den Benutzer auf die neu bearbeitete Anmeldeseite mit einer Fehlermeldung weiter.

Wie gezeigt..

Schritt 5: So fügen Sie Ihrer Webseite ein Bild hinzu

Es ist sehr einfach, denn hier speichern wir unsere Bilder nicht in einem physischen Speicher, so dass wir einen Pfad zum Abrufen dieses Bildes bereitstellen, wie wir es normalerweise bei einer HTML-Seite tun.

Also konvertieren wir einfach unsere Bilder in base64 und fügen sie wie gezeigt in unseren Seitencode ein.

Schritt 6: Welche Komponenten wir benötigen

1)- KnotenMCU

2) - Arduino IDE zum Flashen von nodeMCU

3)-Überbrückungsdrähte (F-2-F)

4)-Relaismodul

5)-Ein WLAN-fähiges Smartphone oder Laptop zum Testen

Schritt 7: Verbindungen

Relaismodul zu deklarierten IO-Pins im Code hinzufügen.

Verbinden Sie das Relais wie in der Abbildung gezeigt mit den elektrischen Geräten, die Sie steuern möchten.

Schritt 8: Jetzt testen und genießen

Schritt 9: Code ist hier

Bitte schreiben Sie Ihre wertvollen Kommentare..