M é m o - l a b .
Arduino – Esp8266 utilisé comme serveur – Affichage de données sur une page web





#include <ESP8266WebServer.h>

// Connexion WiFi
... 

// Déclaration de l'esp comme serveur web (port 80)
ESP8266WebServer webServer(80);

// Page html hébergée par l'esp
// qui s'affichera dans sur un navigateur
// en appelant l'ip configurée
// cf Mémo ESP8266 Connexion Wifi

const char index_html []PROGMEM = R"=====(
<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Mon projet</title>

  <style>
    .container {
      width: 80%;
      margin: 0 auto;
      text-align: center;
    }

    .wrap {
      margin-top: 70px;
    }
    .wrap_btn {
      margin-top: 25px;
    }

    a {
      padding: 15px;
      background: #384D48;
      text-decoration: none;
      border-radius: 10px;
      color: #fff;
      margin: 10px;
    }

    span {
      color: #429ea6;
    }
  </style>
</head>
<body>
  <main class="container">
    <h1>Mon titre</h1>

    <div class="wrap">
      <h2>
        // Température par exemple
        Affichage : <span>%valeur_a_afficher%</span>
      </h2>
    </div>
    
    <div class="wrap">
      <h2>Aération du sol</h2>
      <div class="wrap_btn">
        <a class="btn" href="/my-function1">
          Action1
        </a>
        <a class="btn" href="/my-function2">
          Action2
        </a>
      </div>
    </div>
  </main>
</body>
</html>
)=====";

void wifiConnexion()
{
  WiFi.softAPConfig(IP, gateway, subnet);
  WiFi.softAP(wifi_ssid, wifi_pwd);
}

void myFunction1()
{
  //Action à réaliser

  ...
  handleRoot();
}

void myFunction2()
{
  //Action à réaliser
  ...

  handleRoot();
}

void handleRoot()
{
  // Affichage en html des données récupérées
  String temp(reinterpret_cast<const __FlashStringHelper*>(index_html));

  grandeur_mesuree = ...; // grandeur mesurée par un capteur par exemple
  // On remplace dans le html /%valeur_a_afficher% par la grandeur mesurée 
  temp.replace("%valeur_a_afficher%", grandeur_mesuree);

  // Affichage de la page à laquelle on passe les valeurs à afficher (temp)
  // l'argument temp est optionnel 
  webServer.send(200,"text/html", temp);
}

void setup() {

  ...

  // Appel de la fonction de connexion WiFi
  wifiConnexion();

  // Routing
  webServer.on("/",handleRoot);
  webServer.on("/my-function1", myFunction1);
  webServer.on("/my-function2", myFunction2);
  webServer.begin();
}

void loop() {

  ...

  webServer.handleClient();
}