Sketch für WiFi Relais / Beispiel Arduino code ESP8266 / IOT Smart Home Modul

Menu
Hauptseite
Arduino Sketch
Steuerungswebseite HTML
Download Quellcode Sketch

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:

const char indexHTML[] PROGMEM = R"=====(

<!DOCTYPE html>

<html>

<head>

<title>Schiebeschalter</title>

<body>

</body>

</html>

)=====" ;

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

Sonoff Wifi Wireless Smart Switch

Taster und Netzteil integriert

#define RelaisPin 12
#define TasterPin 0
int active_low = 0;
Schaltplan

ESP-01 Relaismodul

Relais Modul für ESP-01 Uin 5V

#define RelaisPin 0
#define TasterPin 2
int active_low = 1;

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

100

101

102

103

#include <ESP8266WiFi.h>

#include <ESP8266WebServer.h>

#include "index_html.h" // In dieser Datei befindet sich die Steuerung Webseite

const char* ssid = "MainWlan"; // WLAN-Name,

const char* password = "Gehaim"; // WLAN-Passwort

#define RelaisPin D4 // Relais

#define TasterPin D1 // Aktiv Low (Taster zwischen TasterPin ung GND)

int active_low = 1; // "0" Relais schaltet bei +5V , "1" Relais beim schaltet bei 0V

ESP8266WebServer server(80); // Serverport hier einstellen

int val = 0; // Hier wird der Schaltzustand gespeichert

void setup()

{

pinMode(RelaisPin, OUTPUT);

pinMode(TasterPin, INPUT_PULLUP);

digitalWrite(RelaisPin, active_low);

Serial.begin(115200); // Serielle Schnittstelle initialisieren

Serial.println(""); // Neue Zeile

Serial.println("Warte auf Verbindung");

WiFi.mode(WIFI_AP); // access point modus

WiFi.softAP("astral", "12345678"); // Name des Wi-Fi Netzes und Passwort

delay(500); //Abwarten 0,5s

Serial.print("IP Adresse "); //Ausgabe aktueller IP des Servers

Serial.println(WiFi.softAPIP());

// Mit Haus WLAN Verbinden

WiFi.mode(WIFI_STA);

WiFi.begin(ssid, password);

// Warte auf verbindung

while (WiFi.status() != WL_CONNECTED)

{

delay(500);

Serial.print(".");

}

Serial.println("");

Serial.print("Verbunden mit ");

Serial.println(ssid);

Serial.print("IP address: ");

Serial.println(WiFi.localIP());

// ENDE Mit Haus WLAN Verbinden

// Bechandlung der Ereignissen anschliessen

server.on("/", Ereignis_Index);

server.onNotFound ( handleNotFound );

server.begin(); // Starte den Server

Serial.println("HTTP Server gestartet");

}

void loop()

{

server.handleClient();

if (!digitalRead(TasterPin)) // Wenn Taster betätigt "Signal 0"

{

val = !val; // Umschalten

digitalWrite(RelaisPin, active_low ^ val); // Wenn active_low - Variable ist "1", das Zustand "val" wird invertiert

Serial.println("Umschalten per Taster auf " + String(val));

delay(500); // Entprellung, Warten bis der Taster Kontakt sich beruhigt hat

while (!digitalRead(TasterPin))server.handleClient(); // warten bis der Taster los gelassen wurde

}

void Ereignis_Index() // Wird ausgeführt wenn "http://<ip address>/" aufgerufen wurde

{

if (server.args() > 0) // wenn Argumente im GET Anfrage vorhanden sind z.B http://<ip address>/?zustand=r

{

if (server.arg("relais") == "0") // prüfen ob "/?relais=0"

{

Serial.println("Aus");

val = 0; // Ausschalten

digitalWrite(RelaisPin, active_low ^ val);

}

if (server.arg("relais") == "1") // prüfen ob "/?relais=1"

{

Serial.println("Ein");

val = 1; // Einschalten

digitalWrite(RelaisPin, active_low ^ val);

}

if (server.arg("relais") == "2") // prüfen ob "/?relais=2" Toggle Funktion

{

val = !val; // Umschalten

Serial.println("Umschalten auf " + String(val));

digitalWrite(RelaisPin, active_low ^ val);

} // es wird immer Relais Zushtand mitgeteilt

server.sendHeader("Cache-Control", "no-cache"); // wichtig! damit Daten nicht aus dem Browser cach kommen

server.send(200, "text/plain", String(int(val)) ); // Antwort an Internet Browser senden nur eine Zahl ("0"/"1")

}

else // wenn keine Argumente im GET Anfrage

{

Serial.println("Sende Index.html");

server.send(200, "text/html", indexHTML); //dann Index Webseite senden (sehe Datei "index_html.h")

}

void handleNotFound()

{

server.send(404, "text/plain", "404: Not found"); // Send HTTP status 404 (Not Found)

}

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).

const char indexHTML[] PROGMEM = R"=====(

<!DOCTYPE html>

<html>

<head>

<title>Web Schalter 3.1</title>

var Url = "/";

window.onload = start; //Funktion nach dem laden des HTMLs ausführen

function start ()

{

myAjax = new XMLHttpRequest(); // Bilden anens AJAX objekts

myAjax.onreadystatechange=LesenAjax; // Wenn Ereignis vom Server kommt, wird funktion LesenAjax ausgeführt

setInterval(aktualisieren,1000); // Initialisiert das Timer-gesteuerte Ausführen von Funktion //aktualisieren();

aktualisieren (); // Relais Zustand holen beim laden der Webseite

}

function aktualisieren ()

{

myAjax.open("GET",Url+"?Zustand=r",true); // GET-Anfrage an Server senden Asynhron

myAjax.send();

}

function LesenAjax() //AJAX-Ereignis ist passiert

{

if (myAjax.readyState==4 && myAjax.status==200) // Wenn antwort volständig und OK

{ // dann

var datenstr=myAjax.responseText; // empfangene Daten als Text

if (datenstr == '0') // Button Farben ändern

{

document.getElementById('aus').style.backgroundColor = '#FFA6D9';

document.getElementById('ein').style.backgroundColor = '#7E00E2';

}

if (datenstr == '1')

{

document.getElementById('aus').style.backgroundColor = '#7E00E2';

document.getElementById('ein').style.backgroundColor = '#FFA6D9';

}

function httpGet ( sende ) // GET anfrage an Server.

{

myAjax.open ( "GET", Url + sende, true ) ;

myAjax.send() ;

}

</script>

.button {

background-color: #7E00E2;

border: 2;

color: #FFFF00;

text-align: center;

text-decoration: none;

display: inline-block;

font-size: 16px;

margin: 8px 8px;

cursor: pointer;

border-radius: 10px;

padding: 6px 6px 6px 6px;

}

</style>

</head>

<body>

<button class="button" onclick="httpGet('?relais=2')">Umschalten</button>

</p>

</body>

</html>

)=====" ;

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)) );

Beispiel Arduino Sketch für WiFi Relais

Fertige Wi-Fi Relaismodule IOT Smart Home mit ESP8266

Funktionsweise des Beispiel Sketches für WiFi Relais

Sketch

Steuerungswebseite vom index_html.h HTML JavaScript und AJAX

Download Beispiel Quellcode Arduino Sketch

Nachtrag