Wemos D1 mini Projekt: Relais per Webseite schalten

Auf dieses Projekt bin ich von einem Leser meines Blogs aufmerksam geworden.

Dieser möchte gerne eine kleine Webseite mit einer Schaltfläche haben, um dort per Tastendruck ein Relais (oder mehrere) zu schalten. Dieses Relais soll dann nach 5 Sekunden wieder abfallen.

Teileliste

Für dieses Projekt benötigen wir folgende Teile:

• Wemos D1 mini
• Relaisshield (für den Wemos D1 mini)

Zusätzlich benötigen wir ein WLAN Netzwerk, zu welchem wir uns verbinden können (SSID & Passwort müssen bekannt sein).

Es gibt den Mikrocontroller Wemos D1 auch als größere Bauform (im Format des Arduino UNOs) dieser bietet dann mehr digitale Pins.

Aufbau & Schaltung

Wenn man den Wemos D1 mini und das passende Relaisshield sein Eigen nennt, so ist der Aufbau relativ simple, denn diese beiden Bauelemente werden einfach aufeinander gesteckt.

Beachte dabei aber die korrekte Pinbelegung da sonst der Microcontroler und-/oder das Shield beschädigt werden kann.

Möchte man die nachfolgenden Schaltungen jedoch mit einer größeren Relaisplatine betreiben, so reicht der Wemos D1 mini & Wemos D1 R3 nicht mehr aus.

Hier empfehle ich den Arduino Mega mit einem ESP8266 Chip.

Dieser Microcontroller besitzt 54 digitale Ein/Ausgänge und dieses reicht für 3x 16 Relais (48Stck.) Jedoch würde ich empfehlen die Spannungsversorgung für die Relaisplatinen über ein externes 5V Netzteil zu realisieren.

Aufbau der Schaltung mit dem Wemos D1 mini

Nun möchte ich beschreiben wie man das Relaisshield am Wemos D1 mini mithilfe einer kleinen Webseite betreibt.

Der Wemos D1 mini hat genügend Speicherplatz um einen Sketch (inkl. Bibliotheken) und eine Webseite zu speichern. 

Die Webseite wird hier als String im Sketch abgelegt und bei einem Aufruf (Request) ausgeliefert.

Hier nun der Sketch wie man eine Verbindung zu einem bestehenden WiFi Netzwerk aufbaut.

#include <ESP8266WiFi.h>
 
const char* ssid = ""; //SSID aus dem Router
const char* password = ""; //Passwort für den Zugang zum WLAN
 
WiFiServer server(80); //Port auf welchem der Server laufen soll.
 
void setup() {
  Serial.begin(115200); //Baudrate für die Serielle Geschwindigkeit.
  delay(10); 
   
  Serial.print("Aufbau der Verbindung zu: "); //Ausgabe der SSID auf der Seriellen Schnittstelle.
  Serial.println(ssid);
  
  WiFi.begin(ssid, password); //Initialisieren der Wifi Verbindung.
 
  while (WiFi.status() != WL_CONNECTED) { //Warten bis die Verbindung aufgebaut wurde.
    delay(500);
    //Einen Punkt auf der Seriellen Schnittstelle ausgeben so das der Benutzer erkennt dass, das Sketch noch läuft.
    Serial.print("."); 
  }
  //Bei erfolgreicher Verbindung wird der folgende Text ausgeben.
  Serial.println("");
  Serial.print("Mit ");
  Serial.print(ssid);
  Serial.print(" erfolgreich verbunden!");
   
  server.begin(); // Starten des Servers.
  Serial.println("");
  Serial.println("Server gestartet"); //Ausgabe auf der Seriellen Schnittstelle das der Server gestartet wurde.
  Serial.println("");
  
  // Ausgabe der IP Adresse 
  Serial.print("Adresse : http://");
  Serial.print(WiFi.localIP());
  Serial.println("/");
}
  
void loop() {
  //Prüfen ob sich ein Client verbunden hat, wenn nicht die Loop "verlassen"
  WiFiClient client = server.available();
  if (!client) {
    return;
  }
 
  // Wenn sich ein Client verbunden hat solange warten bis Daten gesendet werden.
  Serial.println("Neuer Client verbunden.");
  while(!client.available()){
    delay(1);
  }
  
  delay(1); //1ms. Pause
}

Auf dem seriellen Monitor der Arduino IDE wird dann bei einer erfolgreichen Verbindung die zugeteilte IP-Adresse ausgegeben:

Aufbau der Verbindung zu: FRITZ!Box 7590 KV
.
Mit FRITZ!Box 7590 KV erfolgreich verbunden!
Server gestartet

Adresse : http://192.168.178.26/

Schreiben wir nun das Sketch für das Relaisshield, wir könnten nun fest das Relaisshield für den Wemos D1 mini im Quellcode verdrahten. Diese Vorgehensweise ist jedoch nicht gut da es so einige Relaisshields (1fach, 2fach, 4fach, 8fach, 16fach) auf den Markt gibt. 

Wir benötigen somit eine kleine Konfiguration, hier verwende ich ein Array von einem eigenen Typ Relais. Dieser neue Typ enthält ein Feld für eine Bezeichnung sowie für den Pin welcher angesprochen werden soll.

erzeugen der Klasse “Relais”

Um einen neue Klasse anzulegen, erzeugen wir zunächst die HEADER Datei, diese Datei beschreibt die spätere Klasse.

Datei “relais.h”

#include "Arduino.h"
class Relais {
  public:
    Relais(String bezeichnung, int pin);
	String getBezeichnung();
	int getPin();
  long getStartTime();
  void setStartTime(long startTime);
  private:
    String _bezeichnung;
    int _pin;
    long _startTime;
};

Die eigentliche Logik der Klasse kommt dann in die CPP Datei.

Datei “relais.cpp”

Zunächst müssen wir die HEADER Datei einbinden. Als Nächstes folgt nun die Programmierung des zuvor definierten Konstruktors der Klasse sowie die Funktionen für die Felder “_bezeichnung” & “_pin” sowie “_startTime” zum Speichern der Zeit wann das Relais aktiviert wurde.

#include "Arduino.h"
#include "relais.h"

Relais::Relais(String bezeichnung, int pin){
	_bezeichnung = bezeichnung;
	_pin = pin;
        _startTime = -1;
}

String Relais::getBezeichnung(){
	return _bezeichnung;
}

int Relais::getPin(){
	return _pin;
}

long Relais::getStartTime(){
  return _startTime;
}

void Relais::setStartTime(long startTime){
  _startTime = startTime;
}

Nun können wir ein Relais Objekt erzeugen und auf die Felder zugreifen:

Relais * relais =  new Relais("Test", 1);
Serial.println(relais -> getBezeichnung());
Serial.println(relais -> getPin());

Da wir jedoch Relaisshields / Relaismodule verwenden wollen, wo mehr als eines verbaut wurde, erzeugen wir ein Array mit Relais. Für eine bessere Organisation könnte man nun für jedes Relaisshield ein extra Array anlegen und dann alle Arrays zu einem Array verbinden (wir hätten dann ein mehrdimensionales Array). Dieses erhöht jedoch nicht die Lesbarkeit des Quellcodes.

Array mit Relais erzeugen

Nun wollen wir die neue Klasse verwenden, um unsere Relaisshields zu definieren. 
Ein Array erzeugt man, in dem man an den Variablennamen eine eckige Klammer anfügt. 

Relais * relais[] = {new Relais("Test", 1)};

Wir haben nun ein Array mit einem Wert erzeugt. 

Arrays beginnen immer mit dem Index “0”!

Wenn wir nun auf dieses Element in dem Array zugreifen wollen, müssen wir wieder unser Array verwenden und in den eckigen Klammern ein Index setzen.

Serial.println(relais[0] -> getBezeichnung());

Mit dem Pfeil spricht man das Element an und kann dann Operationen mit dem durchführen.

Es würde auch funktionieren:

Relais * currentRelais = relais[0];
Serial.println(currentRelais -> getBezeichnung());

Zähler

Damit wir später mit dem Array arbeiten können benötigen wir eine Zählvariable, mit dieser können wir Bsp. in der Funktion “setup” den pinMode über eine For-Schleife setzen.

Es gibt an dem Array eine Funktion, um die Länge zu ermitteln, jedoch ist dieses die Länge des Speichers. Man müsste dann das Maximum der definierten Felder (“bezeichnung”, “pin”) berechnen und dann kann man die Länge das Array verwenden. Dieses wäre jedoch viel zu kompliziert und daher bevorzuge ich eine einfache Variable:

const unsigned int RELAIS_COUNTER = 1;

Nehmen wir die Zeile auseinander:

const – definiert den Wert als Konstante, d.h. dieser Wert kann später nicht mehr verändert werden,
unsigned – dieser Operator besagt das nur positive Zahlen erlaubt sind,
int – ganze Zahlen
RELAIS_COUNTER – der Name der Variable
= – damit beginnt eine Zuweisung
1 – die Anzahl der Elemente in dem Array.

Konstanten schreibe ich immer groß, dieses hat den Vorteil das man später im Code erkennt das es sich um eine Konstante handelt.

setup – Funktion

Erweitern wir nun die setup Funktion um eine For-Schleife damit wir die Relais und damit die Pins als Ausgänge  (OUTPUT) setzen.

for(int i=0;i<RELAIS_COUNTER;i++){
   pinMode(relais[i] -> getPin(),OUTPUT);
}

Des Weiteren wird in der Funktion definiert was passieren soll wenn eine Bestimmte Adresse auf dem ESP8266 aufgerufen wird.

Es gibt in unserem Fall 2 Adressen einmal die ohne Parameter “http://192.168.178.26/” und einmal zum Setzen eines Status für ein Relais “http://192.168.178.26/set?btn=0”.

server.on("/", callHome);
server.on("/set", callSet);

loop – Funktion

Die Funktion “loop” wird sehr übersichtlich denn, es wird nur dem Server “gesagt” das dieser auf Clients reagieren soll. 

Zusätzlich wird in der Funktion noch geprüft, ob gesetzte Relais nach einer definierten Zeit x wieder zurückgesetzt werden soll.

void loop() {
  server.handleClient();

   for(int i=0;i<RELAIS_COUNTER;i++){
      Relais * currentRelais = relais[i];
      long startTime = currentRelais -> getStartTime();
      if(startTime > -1){
        long currentTime = millis();
        if((currentTime - MAX_ACTIVE_RELAY_TIME)> startTime){
          digitalWrite(currentRelais -> getPin(),LOW);
          currentRelais -> setStartTime(-1);
        }
      }
   } 
}

HTML Dokument erstellen

Wenn der Benutzer die Adresse “http://192.168.178.26/” aufruft, so soll eine kleine Webseite angezeigt werden.

In meinem Test habe ich den Wemos D1 mini mit dem Relaisshield verwendet, daher ist auf dieser Seite “nur” 1 Relais mit der Bezeichnung “R1” eingerichtet.

Für jedes Relais wird eine Schaltfläche angeboten.

Die Schaltflächen werden dabei ähnlich einer Tabelle positioniert. Da hier ja mehr als nur 1 Relais dargestellt werden kann, möchte ich nach einer definierbaren Zahl x einen Zeilenumbruch erzeugen. Hier lege ich zunächst eine Konstante an.

const unsigned int MAX_TABLE_COLUMNS = 3;

 Die Webseite selber wird in einem String gespeichert, hier empfiehlt es sich zunächst diese in einem Editor wie Notepad++ oder PSPad zu schreiben und dann in die Arduino IDE zu integrieren.

void callHome(){
  String content = "";
  content += "<!DOCTYPE HTML>";
  content += "<html>"; 
  content += "<head>"; 
  content += "<style>"; 
  content += ".wrapper {max-width:90%;margin:0 auto;text-align:center;}"; 
  content += ".btn {margin:15px;}";   
  content += "</style>"; 
  content += "</head>"; 
  content += "<body>"; 
  content += "<div class='wrapper'>"; 
  content += "<h2>Pyro - Entferno</h2>"; 
  content += "<h2>v3.0</h2>"; 
  content += "<br/><br/>"; 
  content += "<center>"; 
  for(int i=0;i<RELAIS_COUNTER;i++){
    Relais * currentRelais = relais[i];
    content += "<input type='button' class= 'btn' value='"+currentRelais -> getBezeichnung()+"' onClick='sendRequest("+i+")'/>"; 
    int value = (i+1) % MAX_TABLE_COLUMNS;
    if(value == 0){
      content += "<div style='clear:both;'></div>"; 
    }
  }
  String ipAddress = WiFi.localIP().toString();
  content += "</center>"; 
  content += "</div>"; 
  content += "<script>"; 
  content += "const url='http://"+ipAddress+"/set?';"; 
  content += "function sendRequest(button){"; 
  content += "  const Http = new XMLHttpRequest();";
  content += "  reqUrl=url+'btn='+button;";
  content += "  console.log(reqUrl);";
  content += "  Http.open('GET', reqUrl);";
  content += "  Http.send();";
  content += "}"; 
  content += "</script>"; 
  content += "</body>"; 
  content += "</html>"; 
   
   sendResult(content);
}

Setzen eines Relais Status

Die Schaltfläche aus der Webseite erzeugt einen Request an die Adresse “http://192.168.178.26/set?btn=0” dieses bewirkt, dass, das Relais aus dem Array am Index “0” auf HIGH (aktiv) gesetzt wird.

Da wir den Index als Parameter an der URL übergeben müssen wir zunächst alle gelieferten Parameter durchlaufen um dann unseren Key “btn” zu finden und auszuwerten.

void callSet(){
  int buttonIndex = -1;
 
  for (int i = 0; i < server.args(); i++) {
      String parameterName = server.argName(i);
      String parameterValue = server.arg(i);
 
      if(parameterName == "btn"){
        buttonIndex = parameterValue.toInt();
      }
  }

  if(buttonIndex > -1){
    Relais * currentRelais = relais[buttonIndex];
    currentRelais -> setStartTime(millis());
    digitalWrite(currentRelais -> getPin(),HIGH);
    sendResult("{\"msg\": \"Das Relais mit der Bezeichnung "+currentRelais -> getBezeichnung()+" ist aktiv!\"}");
  }  
  
}

Wurde kein Index übergeben, so passiert nichts, es würde dann ein Timeout auf der JavaScript Konsole ausgegeben werden.

Schaltung & Aufbau mit Relaisshields

Wie eingangs erwähnt kann man größere Relaisshields erwerben. Diese Relaisshields gibt es in 1fach, 2fach, 4fach, 8fach sowie 16fach. Je nach Größe muss man beachten, dass ein geeigneter Mikrocontroller gewählt wird.

Für die nachfolgende Schaltung verwende ich einen Wemos D1 R3 welchen ich bereits im Tutorial WEMOS D1 – Arduino UNO kompatibles Board mit ESP8266 Chip vorgestellt habe.

Schaltung

In der nachfolgenden Schaltung habe ich einen Arduino UNO verwendet, dieser unterscheidet sich etwas zum Wemos D1 R3 jedoch sind die verwendeten Anschlüsse an den gleichen Stellen zu finden.

Aufbau

Für den Aufbau der Schaltung benötigst du:

• 9 Steckbrettkabel, männlich – weiblich, 20 cm
• 2 Steckbrettkabel, männlich – männlich, 10 cm
• 1x Steckbrett 170 Pin
• 1x 1fach Relaisshield
• 1x 4fach Relaisshield
• 1x Wemos D1 R3

An den Relaisshields sind die Pins mit jeweils

• GND für Ground
• IN1 – Relais 1
• IN2 – Relais 2
• IN3 – Relais 3
• IN4 – Relais 4
• VCC – Spannungsversorgung 5V 

gekennzeichnet.

Relaishield	Wemos D1 R3
4fach Relaishield
GND	GND
IN1	D11
IN2	D10
IN3	D9
IN4	D8
VCC	5V
1fach Relaisshield
VCC	5V
IN1	D12
GND	GND

Der Mikrocontroller besitzt “leider” nur einen Pin für 5V daher verwende ich zusätzlich ein kleines, 170 Pin Steckbrett um dort die 5V zu verteilen.

Quellcode

Im Quellcode müssen wir nur die verwendeten Pins und die Bezeichnungen anpassen:

const unsigned int RELAIS_COUNTER = 5;
Relais * relais[] = {
  new Relais("R1", D12),
  new Relais("R2", D11),
  new Relais("R3", D10),
  new Relais("R4", D9),
  new Relais("R5", D8),  
  };

Video

In diesem Video verwende ich das Relaisshield vom Wemos D1 mini da ich leider feststellen musste dass, das 1fach Relaisshield defekt ist.

Download

Hier nun der Quellcode zum Download.

Sollten Fragen bestehen, so kannst du dich gerne über das Kontaktformular oder per E-Mail an mich wenden.