Einfache Arduino Code mit Kommentaren für beliebige Wifi Relaismodule auf Basis von ESP8266 Modulen.
Smart Home / Internet der Dinge (IOT) im Eigenbau.

Oben sehen Sie 2 Versionen der Steuerungswebseite WebSchalter3.1 mit Buttons und WebSchalter3.2 mit Schiebeschalter.

Diese Version des Arduino Sketches für die intelligente WIFI Steckdose habe ich als Beispiel für Programmierung des ESP8266 Relais Modules konzipiert. Möglichst einfach gehalten und alles ist kommentiert.
Hier wird WLAN Name und Passwort direkt im Arduino Sketch eingetragen, wegen der Einfachheit und Übersichtlichkeit der Code.
Zu Kommunikation zwischen der Steuerung Webseite und des ESP8266 WiFi Relais wird AJAX Technologie verwendet. Dass macht zwar die HTML – Code der Steuerungswebseite komplizierter, ermöglicht aber die Steuerung und Statusabfrage des WiFi Relaismoduls sehr schnell und ohne neu laden der Webseite durchzuführen.
Das Bedeutet, das die Webseite wird einmal vom WiFi Relais geladen und dann kommuniziert die im Hintergrund über AJAX-Objekt und JavaScript mit dem WiFi Relais.

Übrigens Steuerungswebseite muss nicht unbedingt von dem ESP8266 Wifi Relaismodul geladen werden. Die Steuerungswebseite kann zum Beispiel von dem Raspberry Pi oder bei einem Hoster im Internet abgerufen werden. Wichtig ist nur das diese AJAX Steuerungswebseite die IP Adresse des WiFi Relais kennt.

In diesem Beispiel Arduino Sketch habe ich alle meine neuen Erkenntnissen Angewendet.
HTML lässt sich jetzt direkt im Arduino Sketch eingeben. Das sieht so aus:

Ich habe 2 Designs an WiFi Relais Steuerungswebseite ausprobiert. Einmal mit Buttons EIN / AUS / Umschalten. Und mit einem Checkbox, der als Schiebeschalter mit Hilfe von CSS getarnt ist.
Der aktueller Schaltzustand des Wifi Relais wird jede Sekunde (ist einstellbar) aktualisiert und als Farbe des Buttons oder der Position und Farbe des Schiebeschalters angezeigt. Wenn Wifi Relais über den Taster oder über Steuerungswebseite umgeschaltet wird, wird innerhalb einer Sekunde der neue Schaltzustand an allen geöffneten Steuerungswebseiten angezeigt. Auch wenn diese Webseite an andere Ende der Welt gerade auf einem Bildschirm ist.

Fertige Wi-Fi Relaismodule IOT Smart Home mit ESP8266

Eigene Arduino Sketch für Sonoff

Sonoff Wifi Wireless Smart Switch

Taster und Netzteil integriert

#define RelaisPin 12
#define TasterPin 0
int active_low = 0;
Schaltplan
Arduino Sketch für WiFi Relais Beispiel

ESP-01 Relaismodul

Relais Modul für ESP-01 Uin 5V

#define RelaisPin 0
#define TasterPin 2
int active_low = 1;
Beispiel Arduino Sketch für WiFi Relais

ESP-01 Relaismodul

Relais Modul Uin 7V...30V

#define RelaisPin 4
#define TasterPin 5
int active_low = 1;
Schaltplan

Viele IOT Relais Module, die angeboten werden, haben bereits eigene Firmware am Bord. Ich traue der Firmware nicht.
Manche davon arbeiten mit irgendwelchen langsamen Servern im Internet (aus Erfahrungsbericht von Amazon). Und überhaupt ESP8266 eignen sich gut für Spionage.
Die ESP8266 mit fremder Software können Ihre WLAN Zugangsdaten irgendwohin senden. Ihre Standort auf 20 Meter genau, anhand umliegenden WiFi-Netzwerken, bestimmen. Und die ESP8266 können über Internet vom Firmware Hersteller auf neue, eventuell Schädliche oder Spy Firmware upgedatet werden. Das alles ohne Ihren Wissen und Zustimmung. Ich bin sicher das Deutsche Hersteller machen sowas nicht. Aber viele Smart Home Module werden aus China importiert.

Besonders ärgert mich das die zwingen uns eine bestimmte app auf das Handy zu installieren.

Funktionsweise des Beispiel Sketches für WiFi Relais

Wenn die IP des WIFI Relais im Browser aufgerufen wurde, dann sendet ESP8266 Modul die Index Webseite.

Wenn das URL eine eine GET-Anfrage beinhaltet, dann wertet das ESP8266 Modul das GET Parameter und antwortet mit dem Relais Zustand in Textform: 0 oder 1.

   http://_IP-Adresse_/?relais=0   - schaltet das WiFi-Relais aus

   http://_IP-Adresse_/?relais=1   - schaltet das WiFi-Relais ein

   http://_IP-Adresse_/?relais=2   - schaltet das WiFi-Relais um

   http://_IP-Adresse_/?irgenwas=bla   - antwortet mit dem Schalt Zustand 0 oder 1

Die Steuerung Werbeseite (Index.html) sendet, abhängig davon, was für Button betätigt wurde, diese Aufrufe an das WiFi Relais Modul. Dies geschieht mit Hilfe des JavaScript und Ajax Objektes.

Sketch


ESP8266 Relaismodul kann als AP (Access Point) arbeiten. In dem Fall erzeugt das Modul eigene WiFi Netz. Und man sollte jedes Mal im dem Netz anmelden. Oder ESP8266 Relaismodul arbeitet als Client eines bestehenden WiFi Netzes. Dann ist das Relaismodul zugänglich allen anderen Klienten des Netzwerkes.

Im Beispiel Sketch ist gerade AP Modus aktiv. WLAN Name und Passwort sind in der Zeile 25 angegeben. URL http://192.168.4.1

Eine Code die das ESP8266 Relaismodul als Client arbeiten lässt, ist im Sketsch auskommentiert.
Damit ESP8266 Relaismodul als Client arbeitet, löschen Sie die Zeilen 24-28 und aktivieren Sie die Zeilen 30-46. (/* */ entfernen). Und vergessen Sie nicht in der Zeilen 5 und 6 die Zugangsdaten Ihres WLANs anzugeben.

Steuerungswebseite vom index_html.h HTML JavaScript und AJAX

Die Quellcode unten, das ist die Steuerung Webseite Version 3.1 , mit Buttons.
Das Header ist üblich, wie beim allen Internetseiten. Dem folgt JavaScript Teil, danach style, danach HTML Code für 3 Buttons. Style bestimmen das Aussehen von Buttons. Ich möchte näher JavaScript Teil beschreiben.

Wir haben hier 4 Funktionen: function start (), function aktualisieren (), function LesenAjax(), function httpGet ( sende ).

Funktion start () -hier wird ein AJAX Objekt gebildet. -Ereignis was passieren soll, bei Empfang einer Antwort vom Server, definiert. - Ein Timer im Sekundentakt initialisiert. -und die erste Anfrage über den Relais Zustand an das Server geschickt.

Funktion aktualisieren () -sendet dem WiFi Relais Server eine GET Anfrage "?Zustand=r". Dies passiert jede Sekunde, weil diese Funktion von Timer aufgerufen wird.

Funktion LesenAjax() -wird automatisch ausgeführt, wenn eine Antwort des Servers ankommt. Der Server antwortet mit deinem Text "0" oder "1". Abhängig davon was angekommen ist, werden die Buttons gefärbt.

Funktion httpGet (sende) -wird bei Betätigung des Buttons ausgeführt. Die sendet an das Server in der Variable "sende" enthaltene GET-Anfrage. Das sind "?relais=0", "?relais=1", "?relais=2".

Wenn die Steuerung Webseite nicht vom dem WiFi Relaismodul geladen wird und sollte sich woanders befinden, dann muss man die Variable Url vom "/" auf das "http://192.168.4.1/" ändern. Bei Betrieb im Client Modus die IP sieht natürlich anders aus( fragen Sie Ihre Router, oder schauen Sie die serielle Ausgaben beim Start).


Download Beispiel Quellcode Arduino Sketch

In der ZIP-Datei befindet sich komplettes Arduino Projekt.
Download Projekt WebSchalter3.1 Beide Projekte unterscheiden sich nur im „index_html.h“-Datei
Download Projekt WebSchalter3.2 -Sketch für Arduino, es wird Bibliothek Core for ESP8266 WiFi chip benötigt


Nachtrag

Danke an den Dieter Morgenstern. Es hat einen Fehler entdeckt. Und die Lösung vorgeschlagen. Wenn die steuerungs Webseite sich auf anderem Server befindet, dann funktioniert die Steuerung nicht mehr.
Das Browser meldet folgende Fehler "Quellübergreifende (Cross-Origin) Anfrage blockiert: Die Gleiche-Quelle-Regel verbietet das Lesen der externen Ressource auf http://www.xxxx. (Grund: CORS-Kopfzeile 'Access-Control-Allow-Origin' fehlt)."

Ersetzen Sie die Zeile 90 und 91 gegen:

server.sendHeader("Cache-Control", "no-cache, no-store, must-revalidate");
server.sendHeader("pragma","no-cache");
server.sendHeader("Expires", "-1");
server.sendHeader("Access-Control-Allow-Origin","*");
server.send(200, "application/json", String(int(val)) );


Wifi Relaismodul ESP8266 mit Arduino HTML AJAX und JavaScript

Nach oben