DIY: Smarte Verdunkelung - Webserver - Teil 3

0 Kommentare

Im vorherigen Teil wurde bereits ein Taster zur manuellen Steuerung integriert, um die grundlegende Bedienung des Systems zu ermöglichen. Nun soll die Steuerung um zusätzliche Möglichkeiten erweitert werden.

In diesem Teil wird der bestehende Aufbau um einen integrierten Webserver ergänzt, über den sich die Funktionen des Systems bequem im lokalen Netzwerk per Browser bedienen lassen.

Software

1 Webserver

Bisher waren die Öffnungs- beziehungsweise Schließzeiten im Programm hardcoded, das heißt, um diese anzupassen, muss der gesamte Code erneut über USB auf den Mikrocontroller geladen werden. Hierfür soll der Webserver, durch ein HTML Formular, Abhilfe schaffen.

Folgende html Datei bietet Eingabemöglichkeit für die Uhrzeiten und Buttons zur Steuerung:

<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <title>Rolladen Zeitsteuerung</title>

      <style>
        body {
          font-family: Arial, sans-serif;
          padding: 20px;
        }
        .grid-container {
          display: grid;
          grid-template-columns: 170px 70px;
          gap: 100px;
          align-items: start;
        }
        .form-block {
          display: grid;
          flex-direction: column;
          gap: 10px
        }
        input[type="time"] {
          font-size: 1.2em;
          padding: 5px;
        }
        input[type="submit"] {
          font-size: 1.2em;
          padding: 10px;
          cursor: pointer;
        }
        .time-input-container {
          display: flex;
          flex-direction: column;
        }
        .time-input-container label {
          margin-bottom: 5px;
        }
        .time-input-container input {
          margin-bottom: 20px;
        }
      </style>
    </head>

    <body>
    <h2>Rolladen Zeitsteuerung</h2>
      <div class="grid-container">
        <div class="form-block">
          <form action="file:///setTime" method="GET">
            <div class="time-input-container">
                <label>Öffnen:   </label>
                <input type="time" name="time1" value="20" required="">
            </div>

            <div class="time-input-container">
                <label>Schließen:</label>
                <input type="time" name="time2" value="required">
            </div>

            <input type="submit" value="Uhrzeit speichern">
          </form>
        </div>
        <div class="form-block">
          <form action="/button1" method="POST">
            <button type="submit" style="height:50px; width:50px;">↥</button> 
          </form>
          <form action="/button2" method="POST">
            <button type="submit" style="height:50px; width:50px;">↧ </button>
          </form>
        </div>
      </div>


</body></html>

Die html Datei können Sie hier herunterladen und entpacken und durch das Öffnen im Browser in der finalen Darstellung anzeigen lassen. Als Browser wird Google Chrome, Firefox oder ein Chrome-basierter Browser empfohlen.

Erklärung:

Im head befinden sich die css Befehle für das Styling der Seite, dies umfasst hauptsächlich die Anordnung der Elemente. Eine Anleitung zu diesen Befehlen, um das Aussehen der Website anzupassen, finden Sie zum Beispiel hier in den Mozilla Entwickler Dokumenten.

Unter .grid-container können mit grid-template-columns die Breite der Spalten im Container, und somit die Breite der Zeit Eingabespalte und Buttonspalte, eingestellt werden.

Der Parameter gap legt hier den Abstand zwischen den beiden Spalten fest.

Mit gap unter .form-block kann der vertikale Abstand zwischen den Steuerungsbuttons festgelegt werden.

Mit den beiden CSS Attribut Selektoren kann die Textgröße und der Abstand zu den Rändern des Blocks gewählt werden.

Mit .time-input-container label bzw. input können Abstände zwischen den Elementen in der Uhrzeitkonfiguration festgelegt werden.

Um die Parameter live anpassen zu können, empfiehlt es sich, die Entwicklerkonsole des Browsers zu verwenden. Dieses können Sie einfach über die Tastenkombination strg+shift+i aufrufen.

Abbildung 1: Website mit geöffnetem Entwicklertool

Im Body des html Codes befindet sich die Logik der drei Formulare. Die Antwort des Servers beim drücken des submit Buttons sieht wie folgt aus:
/setTime?time1=7%3A56&time2=21%3A56

Hieraus können die beiden eingestellten Uhrzeiten gelesen werden:

time1: 7:56

time2: 21:56

Diese können später vom Mikrocontroller ausgelesen und verarbeitet werden.

2 Mikrocontroller

Der Mikrocontroller benötigt sogenannte Callback Methoden, welche beim Verändern der URL, also beim Drücken von einem der drei Buttons, aufgerufen werden:

void handleRoot() {

String html = R"rawliteral(
    <!DOCTYPE html>
    <html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <title>Rolladen Zeitsteuerung</title>

      <style>
        body {
          font-family: Arial, sans-serif;
          padding: 20px;
        }
        .grid-container {
          display: grid;
          grid-template-columns: 230px 30px;
          gap: 100px;
          align-items: start;
        }
        .form-block {
          display: grid;
          flex-direction: column;
          gap: 30px
        }
        input[type="time"] {
          font-size: 1.2em;
          padding: 5px;
        }
        input[type="submit"] {
          font-size: 1.2em;
          padding: 10px;
          cursor: pointer;
        }
        .time-input-container {
          display: flex;
          flex-direction: column;
        }
        .time-input-container label {
          margin-bottom: 5px;
        }
        .time-input-container input {
          margin-bottom: 15px;
        }
      </style>
    </head>

    <body>
      <h2>Rolladen Zeitsteuerung</h2>
      <div class="grid-container">

        <form action="/setTime" method="GET">
          <div class="time-input-container">
              <label>Öffnen:   </label>
              <input type="time" name="time1" value=")rawliteral" + time1 + R"rawliteral(" required="">
          </div>

          <div class="time-input-container">
              <label>Schließen:</label>
              <input type="time" name="time2" value=")rawliteral" + time2 + R"rawliteral(" required="">
          </div>
          <input type="submit" value="Uhrzeit speichern">
        </form>

        <div class="form-block">
          <form action="/button1" method="POST">
            <button type="submit" style="height:50px; width:50px;">↥</button> 
          </form>
          <form action="/button2" method="POST">
            <button type="submit" style="height:50px; width:50px;">↧ </button> 

          </form>
        </div>
      </div>
    </body></html>
)rawliteral";

server.send(200, "text/html", html);
}

Erklärung:

In das HTML wurden hier noch die Vorgabewerte für die Uhrzeit mit den gespeicherten Werten gesetzt. Dies wird durch das einfügen der Strings time1 und time2 realisiert.

void convertTime(struct tm* TM, String time) {
String temp;
int index = time.indexOf(":");
temp = time.substring(0, index);
TM->tm_hour = temp.toInt();
temp = time.substring(index + 1);
TM->tm_min = temp.toInt();
}

Erklärung:

Die Hilfsmethode liest aus einem String mit HH:MM Format die Uhrzeit aus und schreibt diese in das mittels Pointer übergebene tm Struct.

void handleSetTime() {
if (server.hasArg("time1")) {
    time1 = server.arg("time1");
    Serial.println(time1);
    convertTime(&tOpen, time1);
}
if (server.hasArg("time2")) {
    time2 = server.arg("time2");
    Serial.println(time2);
    convertTime(&tClose, time2);
}

prefs.begin("time");
prefs.putString("open", time1);
prefs.putString("close", time2);
prefs.end();

server.sendHeader("Location", "/");
server.send(303);
}

Erklärung:

Diese Callback Methode wird aufgerufen, wenn die neue Uhrzeit eingestellt wurde und mit dem submit-Button die Adresse auf /setTime geändert wurde.

Die überlieferten Parameter liegen als String vor. Diese werden dann mit der convertTime() Funktion in die Parameter der tm Structs umgewandelt.

Im Anschluss werden die beiden Zeiten im Speicher des ESP32 gespeichert, um diese auch bei erneutem Einschalten wieder aufrufen zu können.

Zum Schluss wird der Server wieder auf den Standard Header zurückgesetzt.

void handleButton1() {
Serial.println("Button 1 gedrückt");
abrollen(0);
server.sendHeader("Location", "/");
server.send(303);
}

void handleButton2() {
Serial.println("Button 2 gedrückt");
abrollen(targetPosition);
server.sendHeader("Location", "/");
server.send(303);
}

Erklärung:

Diese Methoden werden aufgerufen, wenn einer der beiden Steuerungsbuttons gedrückt wurde. Je nachdem, ob der Öffnen- oder Schließen-Button gedrückt wurde, wird die entsprechende Zielposition in der abrollen() Methode gesetzt.

Der loop() und setup() Abschnitt wurden oben nicht aufgeführt, in diesen befinden sich lediglich die Konfiguration des Server, wie der Aufruf der Callback Methoden, und im loop() eine sich wiederholende Routine, um den Server zu aktualisieren.

Hier können Sie den kompletten Code herunterladen. In diesem befinden sich alle Konstruktoren der Objekte und auch die Konfiguration im setup().

Des weiteren wurde die abrollen Methode so abgeändert, dass beim Ausschalten des Schrittmotortreibers auch der Servomotor deaktiviert wird, da dieser sonst stetig die Zielposition ansteuert und dies zu erhöhten Stromverbrauch und Lärmentwicklung führen würde.

Um den Server im Browser zu öffnen, geben Sie einfach die IP-Adresse des ESP in den Browser ein.
Die IP-Adresse wird im setup() im seriellen Monitor ausgegeben, aber kann auch über die Konfigurationsseite Ihres Routers ermittelt werden.

Fazit

Mit der Einbindung des Webservers steht nun eine komfortable Möglichkeit zur lokalen Bedienung zur Verfügung. Im nächsten Schritt soll die Steuerung nicht nur lokal, sondern auch systemübergreifend erfolgen – durch die Integration des MQTT-Protokolls, das eine einfache Anbindung an Smart-Home-Plattformen wie Home Assistant oder OpenHAB ermöglicht.

Viel Spaß beim Nachbauen :)