Bricolaje: oscurecimiento inteligente - servidor web - parte 3

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

0 comentario

En el parte anterior Ya se ha integrado un botón para el control manual, con el fin de permitir el manejo básico del sistema. Ahora se pretende ampliar el control con posibilidades adicionales.

En esta parte, la estructura existente se complementa con un servidor web integrado, a través del cual se pueden manejar cómodamente las funciones del sistema en la red local mediante un navegador.

software

1 servidor web

Hasta ahora, los horarios de apertura y cierre estaban codificados de forma fija en el programa, lo que significa que, para modificarlos, era necesario volver a cargar todo el código en el microcontrolador a través de USB. Para ello, el servidor web ofrece una solución mediante un formulario HTML.

El siguiente archivo html ofrece la posibilidad de introducir las horas y botones para el control:

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

Puede descargar el archivo html aquí Descargar, descomprimir y abrir en el navegador para ver la presentación final. Se recomienda utilizar Google Chrome, Firefox o un navegador basado en Chrome.

Explicación:

En el cabeza contiene los comandos CSS para el diseño de la página, lo que incluye principalmente la disposición de los elementos. Encontrará instrucciones sobre estos comandos para personalizar el aspecto del sitio web, por ejemplo, en aquí en los documentos para desarrolladores de Mozilla.

Bajo .grid-container pueden con plantilla-de-cuadrícula-columnas el ancho de las columnas en el contenedor y, por lo tanto, el Ancho de la columna de entrada de tiempo y de la columna de botones, se puede ajustar.

El parámetro brecha coloca aquí el distancia entre las dos columnas.

Con brecha debajo de .bloque-formulario puede el distancia vertical entre los botones de control.

Con los dos selectores de atributos CSS se puede Tamaño del texto y el Distancia a los bordes del bloque.

Con .time-input-container etiqueta o entrada poder Distancias entre los elementos se puede configurar en la configuración de la hora.

Para poder ajustar los parámetros en tiempo real, se recomienda utilizar la consola de desarrollo del navegador. Puede acceder a ella fácilmente mediante la combinación de teclas Ctrl+Mayús+i acceder.

Figura 1: Sitio web con la herramienta de desarrollo abierta

El cuerpo del código html contiene la lógica de los tres formularios. La respuesta del servidor al pulsar el botón «Enviar» es la siguiente:
/setTime?time1=7%3A56&time2=21%3A56

Aquí se pueden leer las dos horas ajustadas:

hora 1: 7:56

hora 2: 21:56

Estos pueden ser leídos y procesados posteriormente por el microcontrolador.

2 microcontroladores

El microcontrolador necesita los denominados métodos de devolución de llamada, que se activan al modificar la URL, es decir, al pulsar uno de los tres botones:

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

Explicación:

En el HTML se han establecido los valores predeterminados para la hora con los valores guardados. Esto se realiza insertando las cadenas time1 y 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();
}

Explicación:

El método auxiliar lee la hora de una cadena con formato HH:MM y la escribe en el tm Estructura.

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

Explicación:

Este método de devolución de llamada se invoca cuando se ha ajustado la nueva hora y se ha cambiado la dirección a /setTime con el botón «Enviar».

Los parámetros transmitidos están disponibles como cadena. A continuación, se convierten en los parámetros de las estructuras tm mediante la función convertTime().

A continuación, ambos tiempos se guardan en la memoria del ESP32 para poder recuperarlos cuando se vuelva a encender.

Por último, el servidor vuelve a restablecerse al encabezado estándar.

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

Explicación:

Estos métodos se invocan cuando se pulsa uno de los dos botones de control. Dependiendo de si se ha pulsado el botón Abrir o Cerrar, se establece la posición de destino correspondiente en el método abrir().

Las secciones loop() y setup() no se han incluido arriba, ya que solo contienen la configuración del servidor, como la llamada a los métodos de devolución de llamada, y en loop() una rutina repetitiva para actualizar el servidor.

Aquí puede descargar el código completo. En él se encuentran todos los constructores de los objetos y también la configuración en setup().

Además, se modificó el método de desenrollado de tal manera que, al apagar el controlador del motor paso a paso, también se desactiva el servomotor, ya que, de lo contrario, este se dirigiría constantemente a la posición de destino, lo que provocaría un mayor consumo de energía y ruido.

Para abrir el servidor en el navegador, solo tiene que introducir la dirección IP del ESP en el navegador.
La dirección IP se muestra en setup() en el monitor serie, pero también se puede determinar a través de la página de configuración de su router.

Conclusión

Con la integración del servidor web, ahora se dispone de una cómoda opción para el manejo local. En el siguiente paso, el control no solo se realizará a nivel local, sino también en todos los sistemas, gracias a la integración del protocolo MQTT, que permite una conexión sencilla a plataformas de hogares inteligentes como Home Assistant u OpenHAB.

¡Que disfrutes recreándolo! :)