{"id":395,"date":"2020-05-10T16:40:09","date_gmt":"2020-05-10T16:40:09","guid":{"rendered":"https:\/\/marcjuneau.ca\/?p=395"},"modified":"2020-05-10T16:40:09","modified_gmt":"2020-05-10T16:40:09","slug":"serveur-esp32-et-e-s","status":"publish","type":"post","link":"https:\/\/marcjuneau.ca\/?p=395","title":{"rendered":"Serveur ESP32 et E\/S"},"content":{"rendered":"

Dans cet article, nous allons ajouter des fonctionnalit\u00e9s \u00e0 notre ESP32. Ce dernier va maintenant afficher l’\u00e9tat d’une LED, d’un bouton et d’un potentiom\u00e8tre en plus de permettre de changer l’\u00e9tat de la LED.<\/p>\n

<\/p>\n

Assurez-vous de lire l’article Serveur Web sur le ESP32<\/a> avant de d\u00e9buter cette partie.<\/p>\n

Attention : le ESP32 n’est pas tol\u00e9rant au 5V sur les E\/S. Utilisez le 3.3V pour comme alimentation pour vos circuits.<\/strong><\/p>\n

1 – Lecture des entr\u00e9es<\/h4>\n

La lecture d’une broche num\u00e9rique s’effectue via la fonction digitalRead<\/em>. Sur le montage, le bouton sera sur la broche 23 donc il sera possible d’afficher l’\u00e9tat du bouton avec un simple test.<\/p>\n

if(digitalRead(23))\n\u00a0 client.print(\"off\");\nelse\n  client.print(\"on\");<\/pre>\n
La lecture du potentiom\u00e8tre utilise la fonction analogRead<\/em>. Sur le montage, le potentiom\u00e8tre sera reli\u00e9 \u00e0 la broche 34 (ADC1:6). L’affichage de la valeur du potentiom\u00e8tre sera affich\u00e9e directement.<\/p>\n
client.print(analogRead(34));<\/pre>\n
2 – \u00c9criture des sorties<\/h4>\n
Pour modifier l’\u00e9tat de la LED, nous allons utiliser la fonction digitalWrite<\/em>. La LED sera connect\u00e9e sur la broche 15 avec une r\u00e9sistance de 1kohms en s\u00e9rie. La cathode de la LED sera reli\u00e9e au GND.<\/p>\n
Pour recevoir la commande d’\u00e9tat \u00e0 partir du navigateur, nous allons ajouter un bouton dans notre code html. Le bouton provoquera une requ\u00eate html vers \u00a0un URL qui contiendra l’adresse IP du ESP32, ainsi que l’\u00e9tat d\u00e9sir\u00e9e du LED.<\/p>\n
Ajout du bouton dans le code HTML.<\/p>\n
if (led1State)
  client.println(\"<p><a href=\\\"\/LED1\/off\\\"><button>ON<\/button><\/a><\/p>\");
else
  client.println(\"<p><a href=\\\"\/LED1\/on\\\"><button>OFF<\/button><\/a><\/p>\");<\/pre>\n
Dans le code pr\u00e9c\u00e9dent, \u00a0on ajoute un bouton dans la page html qui affiche l’\u00e9tat actuel du bouton, et qui appel \u00a0le URL avec le IP plus le text \/LED1\/X o\u00f9 X est le nouvel \u00e9tat d\u00e9sir\u00e9.<\/p>\n
Pour r\u00e9cup\u00e9rer l’information dans le URL, il faudra dans un premier temps conserver la requete html re\u00e7ue, puis analyser celle-ci pour voir si l’on y retrouve la commande GET avec un des deux href configurer dans le bouton.<\/p>\n
 \/\/ ajout de la r\u00e9cup\u00e9ration de la requ\u00eate http compl\u00e8te
char rxData = client.read(); 
rxHttpRequest+=rxData;
\/\/ Ajout de l'analyse de la requ\u00eate, lorsque qu'elle est re\u00e7ue au complet
if (rxHttpRequest.indexOf(\"GET \/LED1\/on\") >= 0) 
{
  \u00a0 digitalWrite(15,1); \/\/ gestion de la sortie
\u00a0\u00a0  led1State=1; \/\/ gestion de la variable d'\u00e9tat pour modifier le bouton
}
if (rxHttpRequest.indexOf(\"GET \/LED1\/off\") >= 0) 
{
\u00a0 digitalWrite(15,0); \/\/ gestion de la sortie
\u00a0\u00a0 led1State=0; \/\/ gestion de la variable d'\u00e9tat pour modifier le bouton
}<\/pre>\n
Il faudra aussi activer la LED en sortie dans la fonction setup avec la fonction pinMode.<\/p>\n
pinmode(15,OUTPUT);<\/pre>\n
Finalement, lorsque l’on ferme la connexion avec le client, il faut vider la requ\u00eate http. Voici donc le code complet pour le moment.\u00a0<\/p>\n
#include <Arduino.h>
#include <WiFi.h>
\/\/ Informations sur le r\u00e9seau Wi-Fi
\/\/ Vous devez remplacer les informations pas celles de votre r\u00e9seau
const char* ssid = \"devRouteur\";
const char* password = \"#1234#fafa\";
\/\/ Cr\u00e9er un serveur sur le port 80
WiFiServer serveur(80);
\/\/ Cr\u00e9er une string pour conserver la requ\u00eate http
String rxHttpRequest = \"\";
\/\/Variable pour conserver l'\u00e9tat du LED
boolean led1State = 0;

void setup() 
{
 \u00a0\/\/ Nous allons utiliser la console pour afficher des informations
  Serial.begin(9600);
  \/\/D\u00e9but de la connexion au r\u00e9seau
  Serial.print(\"Connection au r\u00e9seau \");
  Serial.println(ssid);
  WiFi.disconnect();
  WiFi.begin(ssid, password);

  \/\/ Tant que le status n'est pas connect\u00e9, attendre...
  while (WiFi.status() != WL_CONNECTED) 
  {
    delay(500);
\u00a0 \u00a0 Serial.print(\".\");
\u00a0 }
\u00a0 \/\/ Une fois connect\u00e9, on affiche l'adresse IP du ESP32
\u00a0 Serial.println(\"\");
\u00a0 Serial.println(\"Connect\u00e9 au Wi-fi\");
\u00a0 Serial.println(\"Adresse IP = \");
\u00a0 Serial.println(WiFi.localIP());
\u00a0 serveur.begin();
\u00a0 pinMode(15,OUTPUT);
}<\/pre>\n
void loop() 
{
  \/\/ Regarde s'il y a un client sur le serveur
\u00a0 WiFiClient client = serveur.available();
\u00a0 if(client)
\u00a0 {
\u00a0   Serial.println(\"Nouveau Client.\");
\u00a0 \u00a0 \/\/ rester dans la boucle tant que le client est connect\u00e9
\u00a0 \u00a0 while (client.connected()) 
\u00a0 \u00a0 { 
\u00a0 \u00a0  \u00a0if (client.available()) \/\/ V\u00e9rifie si le client a envoy\u00e9 des donn\u00e9es
\u00a0 \u00a0  \u00a0{
\u00a0 \u00a0 \u00a0\u00a0\u00a0 char rxData = client.read();
\u00a0 \u00a0 \u00a0 \u00a0 rxHttpRequest+=rxData; 
\u00a0\u00a0   \u00a0 \u00a0Serial.write(rxData); 
\u00a0 \u00a0  \u00a0 \u00a0if (rxData == '\\n') \/\/ si c'.est la fin de la commande re\u00e7ue
\u00a0 \u00a0  \u00a0 \u00a0{
          \/\/analyse de la commande re\u00e7ue
          if (rxHttpRequest.indexOf(\"GET \/LED1\/on\") >= 0)
          {
            digitalWrite(15,1); \/\/ gestion de la sortie
            led1State=1; \/\/ gestion de la variable d'\u00e9tat pour modifier le bouton
          }
          if (rxHttpRequest.indexOf(\"GET \/LED1\/off\") >= 0)
          {
            digitalWrite(15,0); \/\/ gestion de la sortie
            led1State=0; \/\/ gestion de la variable d'\u00e9tat pour modifier le bouton
          }
          Serial.println(\"\");
          Serial.println(\"Charge page HTML\");
          client.println(\"HTTP\/1.1 200 OK\"); \/\/send new page
          client.println(\"Content-Type: text\/html\");
          client.println();
          client.println(\"<html>\");
          client.println(\"<body>\");
          client.print(\"<p>Bouton=\");
          if(digitalRead(23))
            client.print(\"off\");
          else 
            client.print(\"on\");
          client.println(\"<\/p>\");
          client.print(\"<p>Potentiometre=\");
          client.print(analogRead(34));
          client.println(\"<\/p>\");
          if (led1State)
            client.println(\"<p><a href=\\\"\/LED1\/off\\\"> <button>ON<\/button><\/a><\/p>\");
          else
            client.println(\"<p><a href=\\\"\/LED1\/on\\\"><button>OFF<\/button><\/a><\/p>\");

          client.println(\"<\/body>\");
          client.println(\"<\/html>\");
          client.stop();
          rxHttpRequest = \"\";
        }
      }
    }
  }
}<\/pre>\n
Voici le r\u00e9sulta que vous devriez obtenir au navigateur.<\/p>\n
\"\"<\/p>\n
Si le montage est compl\u00e9t\u00e9, vous devriez obtenir la lecture du bouton et du potentiom\u00e8tre, en plus de pouvoir contr\u00f4ler la LED.<\/p>\n
Notez que vous devez rafra\u00eechir le navigateur afin de voir les changements pour le bouton et le potentiom\u00e8tre. Vous pouvez ajouter la commande suivante dans l’ent\u00eate html afin de provoquer le rafra\u00eechissement automatique aux 2s.<\/p>\n
<meta http-equiv=\"refresh\" content=\"2\"><\/pre>\n
Aussi, nous pourrions am\u00e9liorer l\u2019esth\u00e9tique de notre page en utilisant les styles CSS. Le code suivant permet d’ajouter un style pour le bouton et le texte en g\u00e9n\u00e9ral.<\/p>\n
 <style>
html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;} 
.button1 { background-color: #d1c819; border:2px solid #d1c819;color: white; width: 100px;border-radius: 12px;padding-top: 10px;padding-bottom: 10px;
transition-duration: 0.1s; text-decoration: none; font-size: 30px; margin: 2px; cursor: pointer;}
.button1:hover { background-color: white; color:black ;border: 2px solid #d1c819;}
.buttonoff {background-color: #27282e;border:2px solid #27282e;}
.buttonoff:hover { background-color: white; color:black ;border: 2px solid #27282e;}
<\/style><\/pre>\n
Pour appliquer le style \u00e0 notre site, il suffit ajouter ce code \u00e0 notre ent\u00eate html et de modifier l’appel du bouton comme suit :<\/p>\n
if (led1State)
  client.println(\"<p><a href=\\\"\/LED1\/off\\\"><button class=\\\"button1\\\">ON<\/button><\/a><\/p>\");
else
  client.println(\"<p><a href=\\\"\/LED1\/on\\\"><button class=\\\"button1 buttonoff\\\">OFF<\/button><\/a><\/p>\");<\/pre>\n
Pour simplifier l’ajout de code html dans l’ent\u00eate, il est possible d’utiliser un tableau de caract\u00e8res constant et de d\u00e9finir son contenu comme litt\u00e9ral. \u00c7a \u00e9vite d’avoir \u00e0 mettre les \\ partout devant les \u00a0\u00bb ou \u00e0 la fin des lignes.<\/p>\n
Voici le code complet avec le style. Notez que le site \u00e0 un titre et m\u00eame un icone.<\/p>\n
#include <Arduino.h>
#include <WiFi.h>
\/\/ Informations sur le r\u00e9seau Wi-Fi
\/\/ Vous devez remplacer les informations pas celles de votre r\u00e9seau
const char* ssid = \"devRouteur\";
const char* password = \"#1234#fafa\";
\/\/ code html de l'ent\u00eate\u00a0
const char pageHeadHtml[] = R\"(
HTTP\/1.1 200 OK
Content-Type: text\/html
Connection: close

<!DOCTYPE html>
<html> 
<meta http-equiv=\"refresh\" content=\"2\"> 
<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">
<title>ESP32 Serveur<\/title>
<link rel=\"icon\" href=\"https:\/\/www.iconsdb.com\/icons\/download\/red\/online-16.png\"> 
<style>
html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;} 
.button1 { background-color: #d1c819; border:2px solid #d1c819;color: white; width: 100px;border-radius: 12px;padding-top: 10px;padding-bottom: 10px;
transition-duration: 0.1s; text-decoration: none; font-size: 30px; margin: 2px; cursor: pointer;}
.button1:hover { background-color: white; color:black ;border: 2px solid #d1c819;}
.buttonoff {background-color: #27282e;border:2px solid #27282e;}
.buttonoff:hover { background-color: white; color:black ;border: 2px solid #27282e;}
<\/style>
<\/head> 
<body><h1> Serveur ESP32 <\/h1> 
)\";
\/\/ Cr\u00e9er un serveur sur le port 80
WiFiServer serveur(80);
\/\/ Cr\u00e9er une string pour conserver la requ\u00eate http
String rxHttpRequest = \"\";
\/\/Variable pour conserver l'\u00e9tat du LED
boolean led1State = 0;<\/pre>\n
void setup() 
{
 \/\/ Nous allons utiliser la console pour afficher des informations
 Serial.begin(9600);
 \/\/D\u00e9but de la connexion au r\u00e9seau
 Serial.print(\"Connection au r\u00e9seau \");
 Serial.println(ssid);
 WiFi.disconnect();
 WiFi.begin(ssid, password);
 \/\/ Tant que le status n'est pas connect\u00e9, attendre...
 while (WiFi.status() != WL_CONNECTED) 
 {
  delay(500);
  Serial.print(\".\");
  }
 \/\/ Une fois connect\u00e9, on affiche l'adresse IP du ESP32
 Serial.println(\"\");
 Serial.println(\"Connect\u00e9 au Wi-fi\");
 Serial.println(\"Adresse IP = \");
 Serial.println(WiFi.localIP());
 serveur.begin();
 pinMode(15,OUTPUT);
}<\/pre>\n
void loop() 
{
 \/\/ Regarde s'il y a un client sur le serveur
 WiFiClient client = serveur.available();
 if(client)
 {
  Serial.println(\"Nouveau Client.\");
  \/\/ rester dans la boucle tant que le client est connect\u00e9
  while (client.connected()) 
  { 
   if (client.available()) \/\/ V\u00e9rifie si le client a envoy\u00e9 des donn\u00e9es
   {
     char rxData = client.read();
     rxHttpRequest+=rxData; 
     Serial.write(rxData); 
     if (rxData == '\\n') \/\/ si c'.est la fin de la commande re\u00e7ue
     {
       \/\/analyse de la commande re\u00e7ue
       if (rxHttpRequest.indexOf(\"GET \/LED1\/on\") >= 0)
       {
        digitalWrite(15,1); \/\/ gestion de la sortie
        led1State=1; \/\/ gestion de la variable d'\u00e9tat pour modifier le bouton
       }
       if (rxHttpRequest.indexOf(\"GET \/LED1\/off\") >= 0)
       {
        digitalWrite(15,0); \/\/ gestion de la sortie
        led1State=0; \/\/ gestion de la variable d'\u00e9tat pour modifier le bouton
       }
       client.print(pageHeadHtml);
       client.print(\"<p>Bouton=\");
       if(digitalRead(23))
        client.print(\"off\");
       else 
        client.print(\"on\");
       client.println(\"<\/p>\");
       client.print(\"<p>Potentiometre=\");
       client.print(analogRead(34));
       client.println(\"<\/p>\");
       if (led1State)
         client.println(\"<p><a href=\\\"\/LED1\/off\\\"><button class=\\\"button1\\\">ON<\/button><\/a><\/p>\");
       else
        client.println(\"<p><a href=\\\"\/LED1\/on\\\"><button class=\\\"button1 buttonoff\\\">OFF<\/button><\/a><\/p>\");

       client.println(\"<\/body>\");
       client.println(\"<\/html>\");

       client.stop();
       rxHttpRequest = \"\";
    }
   }
  }
 }
}<\/pre>\n\n","protected":false},"excerpt":{"rendered":"
Dans cet article, nous allons ajouter des fonctionnalit\u00e9s \u00e0 notre ESP32. Ce dernier va maintenant afficher l’\u00e9tat d’une LED, d’un bouton et d’un potentiom\u00e8tre en plus de permettre de changer l’\u00e9tat de la LED.Continue Reading<\/a><\/span><\/p>\n","protected":false},"author":1,"featured_media":396,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[20,22],"tags":[25,23,26,24],"class_list":["entry","author-mjuneau","has-more-link","post-395","post","type-post","status-publish","format-standard","has-post-thumbnail","category-esp32_cat","category-esp32-projets","tag-css","tag-esp32","tag-html","tag-web-server"],"_links":{"self":[{"href":"https:\/\/marcjuneau.ca\/index.php?rest_route=\/wp\/v2\/posts\/395","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/marcjuneau.ca\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/marcjuneau.ca\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/marcjuneau.ca\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/marcjuneau.ca\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=395"}],"version-history":[{"count":14,"href":"https:\/\/marcjuneau.ca\/index.php?rest_route=\/wp\/v2\/posts\/395\/revisions"}],"predecessor-version":[{"id":412,"href":"https:\/\/marcjuneau.ca\/index.php?rest_route=\/wp\/v2\/posts\/395\/revisions\/412"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/marcjuneau.ca\/index.php?rest_route=\/wp\/v2\/media\/396"}],"wp:attachment":[{"href":"https:\/\/marcjuneau.ca\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=395"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/marcjuneau.ca\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=395"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/marcjuneau.ca\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=395"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}