DIY: Slim verduisteren - Webserver - Deel 3

DIY: Smarte Verdunkelung - Webserver - Teil 3 - AZ-Delivery

Deel

0 Reacties

In vorige deel Er is al een knop voor handmatige bediening geïntegreerd om de basisbediening van het systeem mogelijk te maken. Nu moet de bediening worden uitgebreid met extra mogelijkheden.

In dit deel wordt de bestaande opbouw aangevuld met een geïntegreerde webserver, waarmee de functies van het systeem gemakkelijk via een browser in het lokale netwerk kunnen worden bediend.

software

1 webserver

Tot nu toe waren de openings- en sluitingstijden hard gecodeerd in het programma, wat betekent dat om deze aan te passen, de volledige code opnieuw via USB naar de microcontroller moet worden geladen. Hiervoor moet de webserver, door middel van een HTML-formulier, een oplossing bieden.

Het volgende html-bestand biedt invoermogelijkheden voor de tijden en knoppen voor de bediening:

<!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>

U kunt het html-bestand hier downloaden en uitpakken en door het openen in de browser in de definitieve weergave laten zien. Als browser wordt Google Chrome, Firefox of een op Chrome gebaseerde browser aanbevolen.

Uitleg:

In hoofd bevinden zich de css-commando's voor de styling van de pagina, dit omvat voornamelijk de indeling van de elementen. Een handleiding voor deze commando's om het uiterlijk van de website aan te passen, vindt u bijvoorbeeld hier in de Mozilla-ontwikkelaarsdocumenten.

Onder .grid-container kunnen met grid-template-columns de breedte van de kolommen in de container, en daarmee de Breedte van de tijdinvoerkolom en knopkolom, worden ingesteld.

De parameter gap legt hier de afstand tussen de twee kolommen vast.

Met gap onder .form-block kan de verticale afstand tussen de bedieningsknoppen worden ingesteld.

Met de twee CSS-attribuutselectoren kan de Tekstgrootte en de Afstand tot de randen van het blok worden gekozen.

Met .time-input-container label resp. input kunnen Afstanden tussen de elementen worden ingesteld in de tijdconfiguratie.

Om de parameters live aan te passen, raden we je aan om de ontwikkelaarsconsole van de browser te gebruiken. Je kunt deze eenvoudig openen met de sneltoets Ctrl+Shift+I oproepen.

Afbeelding 1: Website met geopende ontwikkelaarstool

De logica van de drie formulieren bevindt zich in de body van de html-code. Het antwoord van de server bij het indrukken van de verzendknop ziet er als volgt uit:
/setTime?time1=7%3A56&time2=21%3A56

Hieruit kunnen de twee ingestelde tijden worden afgelezen:

tijd1: 7:56

tijd 2: 21:56

Deze kunnen later door de microcontroller worden uitgelezen en verwerkt.

2 microcontrollers

De microcontroller heeft zogenaamde callback-methoden nodig, die worden aangeroepen wanneer de URL wordt gewijzigd, d.w.z. wanneer een van de drie knoppen wordt ingedrukt:

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

Uitleg:

In de HTML zijn hier nog de standaardwaarden voor de tijd met de opgeslagen waarden ingesteld. Dit wordt gerealiseerd door de strings time1 en time2 in te voegen.

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

Uitleg:

De hulpfunctie leest de tijd uit een string in HH:MM-formaat en schrijft deze naar de via pointer doorgegeven 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);
}

Uitleg:

Deze callback-methode wordt aangeroepen wanneer de nieuwe tijd is ingesteld en het adres met de knop 'Verzenden' is gewijzigd in /setTime.

De overgedragen parameters zijn beschikbaar als string. Deze worden vervolgens met de functie convertTime() omgezet in de parameters van de tm-structs.

Vervolgens worden beide tijden opgeslagen in het geheugen van de ESP32, zodat ze bij het opnieuw inschakelen opnieuw kunnen worden opgeroepen.

Ten slotte wordt de server weer teruggezet naar de standaardheader.

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

Uitleg:

Deze methoden worden aangeroepen wanneer een van de twee bedieningsknoppen wordt ingedrukt. Afhankelijk van of de knop Openen of Sluiten is ingedrukt, wordt de overeenkomstige doelpositie ingesteld in de methode abrollen().

De secties loop() en setup() zijn hierboven niet vermeld. Deze bevatten alleen de configuratie van de server, zoals het aanroepen van de callback-methoden, en in loop() een zich herhalende routine om de server te actualiseren.

Hier kunt u de volledige code downloaden. Hierin staan alle constructors van de objecten en ook de configuratie in setup().

Verder werd de afrolmethode zodanig aangepast dat bij het uitschakelen van de stappenmotoraandrijving ook de servomotor wordt gedeactiveerd, omdat deze anders continu naar de doelpositie zou blijven sturen, wat zou leiden tot een hoger stroomverbruik en meer geluidsoverlast.

Om de server in de browser te openen, voert u gewoon het IP-adres van de ESP in de browser in.
Het IP-adres wordt weergegeven in setup() in de seriële monitor, maar kan ook worden bepaald via de configuratiepagina van uw router.

Conclusie

Met de integratie van de webserver is er nu een comfortabele mogelijkheid voor lokale bediening beschikbaar. In de volgende stap moet de besturing niet alleen lokaal, maar ook systeemoverschrijdend plaatsvinden – door de integratie van het MQTT-protocol, dat een eenvoudige koppeling met smart home-platforms zoals Home Assistant of OpenHAB mogelijk maakt.

Veel plezier met het namaken :)

Deel