DIY : obscurcissement intelligent - serveur web - partie 3

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

0 commentaire

Dans le partie précédente Un bouton-poussoir a déjà été intégré pour permettre le contrôle manuel et ainsi assurer le fonctionnement de base du système. Il s'agit maintenant d'étendre les possibilités de contrôle.

Dans cette partie, la structure existante est complétée par un serveur web intégré qui permet d'utiliser facilement les fonctions du système dans le réseau local via un navigateur.

logiciel

1 serveur web

Jusqu'à présent, les heures d'ouverture et de fermeture étaient codées en dur dans le programme, ce qui signifie que pour les modifier, il fallait recharger l'intégralité du code sur le microcontrôleur via USB. Le serveur web, grâce à un formulaire HTML, devrait remédier à ce problème.

Le fichier html suivant permet de saisir les heures et comporte des boutons de commande :

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

Vous pouvez télécharger le fichier html ici Téléchargez-le, décompressez-le et ouvrez-le dans votre navigateur pour afficher la version finale. Nous recommandons d'utiliser Google Chrome, Firefox ou un navigateur basé sur Chrome.

Explication :

Dans le head contient les commandes CSS pour le style de la page, ce qui comprend principalement la disposition des éléments. Vous trouverez par exemple ici des instructions sur ces commandes pour personnaliser l'apparence du site web. ici dans les documents des développeurs Mozilla.

Sous .grid-container peuvent être utilisés avec grid-template-columns la largeur des colonnes dans le conteneur, et donc la Largeur de la colonne de saisie et de la colonne des boutons.

Le paramètre écart placez ici le distance entre les deux colonnes.

Avec écart sous .form-block peut le distance verticale entre les boutons de commande.

Les deux sélecteurs d'attributs CSS permettent de taille du texte et le Distance par rapport aux bords du bloc.

Avec .time-input-container label ou entrée pouvoir Distances entre les éléments être défini dans la configuration de l'heure.

Pour pouvoir ajuster les paramètres en direct, il est recommandé d'utiliser la console de développement du navigateur. Vous pouvez y accéder facilement à l'aide de la combinaison de touches Ctrl+Maj+I appeler.

Illustration 1 : site web avec outil de développement ouvert

Le corps du code html contient la logique des trois formulaires. La réponse du serveur lorsque vous cliquez sur le bouton « Soumettre » se présente comme suit :
/setTime?time1=7%3A56&time2=21%3A56

Les deux heures réglées peuvent être lues ici :

temps1 : 7:56

temps2 : 21:56

Celles-ci peuvent ensuite être lues et traitées par le microcontrôleur.

2 microcontrôleurs

Le microcontrôleur nécessite des méthodes dites « callback », qui sont appelées lorsque l'URL est modifiée, c'est-à-dire lorsque l'un des trois boutons est enfoncé :

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

Explication :

Les valeurs par défaut pour l'heure ont été définies dans le code HTML à l'aide des valeurs enregistrées. Cela est réalisé en insérant les chaînes time1 et 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();
}

Explication :

La méthode d'aide lit l'heure à partir d'une chaîne au format HH:MM et l'écrit dans le 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);
}

Explication :

Cette méthode de rappel est appelée lorsque la nouvelle heure a été réglée et que l'adresse a été modifiée en /setTime à l'aide du bouton « Soumettre ».

Les paramètres transmis sont disponibles sous forme de chaîne. Ceux-ci sont ensuite convertis en paramètres des structures tm à l'aide de la fonction convertTime().

Les deux heures sont ensuite enregistrées dans la mémoire de l'ESP32 afin de pouvoir les rappeler lors de la prochaine mise sous tension.

Enfin, le serveur est réinitialisé à l'en-tête 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);
}

Explication :

Ces méthodes sont appelées lorsque l'un des deux boutons de commande est actionné. Selon que le bouton « Ouvrir » ou « Fermer » a été actionné, la position cible correspondante est définie dans la méthode « dérouler() ».

Les sections loop() et setup() n'ont pas été mentionnées ci-dessus. Elles contiennent uniquement la configuration du serveur, comme l'appel des méthodes de rappel, et dans loop(), une routine répétitive pour actualiser le serveur.

Ici vous pouvez télécharger le code complet. Celui-ci contient tous les constructeurs des objets ainsi que la configuration dans setup().

De plus, la méthode de déroulement a été modifiée de manière à ce que le servomoteur soit également désactivé lors de la mise hors tension du pilote du moteur pas à pas, car sinon celui-ci continuerait à se diriger vers la position cible, ce qui entraînerait une augmentation de la consommation d'énergie et du bruit.

Pour ouvrir le serveur dans le navigateur, il suffit d'entrer l'adresse IP de l'ESP dans le navigateur.
L'adresse IP est affichée dans setup() dans le moniteur série, mais peut également être déterminée via la page de configuration de votre routeur.

Conclusion

L'intégration du serveur web offre désormais une option pratique pour l'utilisation locale. La prochaine étape consistera à permettre un contrôle non seulement local, mais aussi inter-systèmes, grâce à l'intégration du protocole MQTT, qui permet une connexion facile à des plateformes domotiques telles que Home Assistant ou OpenHAB.

Amusez-vous bien en le reproduisant :)