Fai da te: oscuramento intelligente - Server web - Parte 3

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

0 commenti

Nel parte precedente È già stato integrato un pulsante per il comando manuale, al fine di consentire il funzionamento di base del sistema. Ora il comando deve essere ampliato con ulteriori possibilità.

In questa parte, la struttura esistente viene integrata con un server web integrato, tramite il quale è possibile utilizzare comodamente le funzioni del sistema nella rete locale tramite browser.

software

1 server web

Finora gli orari di apertura e chiusura erano hardcoded nel programma, ovvero per modificarli era necessario ricaricare l'intero codice sul microcontrollore tramite USB. A questo scopo è stato creato un modulo HTML sul server web.

Il seguente file html offre la possibilità di inserire gli orari e i pulsanti per il controllo:

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

Il file html può essere qui Scaricare, decomprimere e visualizzare nella versione definitiva aprendo il file nel browser. Si consiglia di utilizzare Google Chrome, Firefox o un browser basato su Chrome.

Spiegazione:

Nel head contiene i comandi CSS per lo styling della pagina, che comprendono principalmente la disposizione degli elementi. Una guida a questi comandi per personalizzare l'aspetto del sito web è disponibile, ad esempio, all'indirizzo qui nei documenti degli sviluppatori Mozilla.

Sotto .grid-container possono essere utilizzati con grid-template-columns la larghezza delle colonne nel contenitore e quindi la Larghezza della colonna di immissione dell'ora e della colonna dei pulsanti.

Il parametro gap metti qui il distanza tra le due colonne.

Con gap sotto .form-block può il distanza verticale tra i pulsanti di comando.

Con i due selettori di attributi CSS è possibile Dimensione del testo e il Distanza dai bordi del blocco.

Con .time-input-container label rispettivamente input poter Distanze tra gli elementi nella configurazione dell'ora.

Per poter modificare i parametri in tempo reale, si consiglia di utilizzare la console di sviluppo del browser. È possibile accedervi semplicemente tramite la combinazione di tasti ctrl+shift+i richiamare.

Figura 1: sito web con strumento di sviluppo aperto

Il corpo del codice html contiene la logica dei tre moduli. La risposta del server quando si preme il pulsante "Invia" è la seguente:
/setTime?time1=7%3A56&time2=21%3A56

Da qui è possibile leggere le due ore impostate:

ora1: 7:56

ora2: 21:56

Questi possono essere successivamente letti ed elaborati dal microcontrollore.

2 microcontrollori

Il microcontrollore richiede i cosiddetti metodi callback, che vengono richiamati quando si modifica l'URL, ovvero quando si preme uno dei tre pulsanti:

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

Spiegazione:

Nel codice HTML sono stati inseriti i valori predefiniti per l'ora con i valori memorizzati. Ciò è stato realizzato inserendo le stringhe time1 e time2.

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

Spiegazione:

Il metodo di supporto legge l'ora da una stringa in formato HH:MM e la scrive nel tm Struttura.

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

Spiegazione:

Questo metodo callback viene richiamato quando è stata impostata la nuova ora e l'indirizzo è stato modificato in /setTime con il pulsante di invio.

I parametri trasmessi sono disponibili come stringa. Questi vengono poi convertiti nei parametri delle strutture tm con la funzione convertTime().

Successivamente, i due tempi vengono memorizzati nella memoria dell'ESP32, in modo da poterli richiamare anche al successivo riavvio.

Infine, il server viene riportato all'intestazione standard.

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

Spiegazione:

Questi metodi vengono richiamati quando viene premuto uno dei due pulsanti di controllo. A seconda che sia stato premuto il pulsante Apri o Chiudi, la posizione di destinazione corrispondente viene impostata nel metodo scroll() .

Le sezioni loop() e setup() non sono state elencate sopra, in esse si trova solo la configurazione del server, come la chiamata dei metodi callback, e nella loop() una routine ripetitiva per aggiornare il server.

Qui è possibile scaricare il codice completo. In esso sono presenti tutti i costruttori degli oggetti e anche la configurazione in setup().

Inoltre, il metodo di scorrimento è stato modificato in modo tale che, quando si spegne il driver del motore passo-passo, anche il servomotore venga disattivato, poiché altrimenti continuerebbe a muoversi verso la posizione di destinazione, causando un aumento del consumo di energia e della rumorosità.

Per aprire il server nel browser, è sufficiente inserire l'indirizzo IP dell'ESP nel browser.
L'indirizzo IP viene visualizzato nel monitor seriale in setup(), ma può essere determinato anche tramite la pagina di configurazione del router.

Conclusione

Grazie all'integrazione del server web, ora è disponibile una comoda opzione per il controllo locale. Il prossimo passo sarà quello di rendere il controllo non solo locale, ma anche trasversale a tutti i sistemi, grazie all'integrazione del protocollo MQTT, che consente un facile collegamento a piattaforme smart home come Home Assistant o OpenHAB.

Buon divertimento con la ricostruzione :)