Wiki

Reso-nance numérique | Arts et cultures libres

Outils pour utilisateurs

Outils du site

Vous êtes ici: Accueil » Ateliers » ESP-Serveur web
ateliers:esp-serveur-web:accueil

Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

Les deux révisions précédentes Révision précédente
Prochaine révision 		Révision précédente
ateliers:esp-serveur-web:accueil [2020/02/07 11:40]
laurent [page statique] 		ateliers:esp-serveur-web:accueil [2020/02/17 13:48] (Version actuelle)
laurent [en pratique]
Ligne 5: Ligne 5:
   * Contexte : INIT'   * Contexte : INIT'
   * Lien : [[https://github.com/reso-nance/INITs | repo github]]   * Lien : [[https://github.com/reso-nance/INITs | repo github]]
 +
 +{{ :ateliers:esp-serveur-web:dsc00202.jpg?direct&400 |}}
  
 ===== Préparation ===== ===== Préparation =====
Ligne 19: Ligne 21:
 ===== Servir une page web ===== ===== Servir une page web =====
 ==== en pratique ==== ==== en pratique ====
-Ouvrir l'exemple **HelloServer** dans //fichier -> exemples -> ESP8266WebServer -> HelloServer// Cet exemple contient tout le code nécessaire pour se connecter à un réseau WIFI, servir une page sommaire et afficher un GIF à l'arrière plan aléatoire. Pour qu'il puisse se connecter au réseau wifi, modifier les lignes 7 et 8 en remplaçant //your-ssid// par le nom du réseau wifi auquel vous êtes connectés et //your-password// par son mot de passe. Les deux sont sensibles à la casse. Téléverser ensuite le programme et ouvrir le moniteur série. Une fois l'ESP8266 connecté, il y affiche son addresse IP.+Ouvrir l'exemple **HelloServer** dans //fichier -> exemples -> ESP8266WebServer -> HelloServer// Cet exemple contient tout le code nécessaire pour se connecter à un réseau WIFI, servir une page sommaire et afficher un GIF à l'arrière plan aléatoire. Pour qu'il puisse se connecter au réseau wifi, modifier les lignes 7 et 8 en remplaçant //your-ssid// par le nom du réseau wifi auquel vous êtes connectés et //your-password// par son mot de passe. Les deux sont sensibles à la casse. Téléverser ensuite le programme et ouvrir le moniteur série. Une fois l'ESP8266 connecté, il y affiche son adresse IP. 
 + 
 +{{ :ateliers:esp-serveur-web:ip.png?direct&400 |}}
  
 Dans un navigateur web, taper cette même adresse (ici **%%http://10.0.120.43%%**) et vous devriez voir s'afficher une page contenant le texte //hello from esp8266!//. L'adresse **%%http://10.0.120.43/gif%%** affichera un tout petit GIF représentant un smiley. Dans un navigateur web, taper cette même adresse (ici **%%http://10.0.120.43%%**) et vous devriez voir s'afficher une page contenant le texte //hello from esp8266!//. L'adresse **%%http://10.0.120.43/gif%%** affichera un tout petit GIF représentant un smiley.
 +
 +Si l'exemple HelloServer venait à disparaître, une copie est disponible sur [[ https://github.com/reso-nance/INITs/tree/master/ESP8266-ServeurWeb/HelloServer | le git de cet INIT ]]
 +{{ :ateliers:esp-serveur-web:helloserver.png?direct&400 |}}
  
 ==== comment ça marche ? ==== ==== comment ça marche ? ====
Ligne 47: Ligne 54:
 et le tour est joué. et le tour est joué.
  
 +[[https://github.com/reso-nance/INITs/tree/master/ESP8266-ServeurWeb/HelloServerLED | télécharger le code]]
 ===== lire un potentiomètre ===== ===== lire un potentiomètre =====
 ==== page statique ==== ==== page statique ====
Ligne 60: Ligne 68:
 server.on("/pot", handlePotentiometer); server.on("/pot", handlePotentiometer);
 </code> </code>
-et on visite la page **%%<ADRESSE_IP>/pot** qui nous affiche la valeur du potentiomètre. En revanche, cette valeur n'est mise à jour que lorsque qu'on la demande à nouveau au serveur en rafraîchissant la page. Pour qu'elle soit régulièrement mise à jour, il faut que le navigateur la demande régulièrement. Pour ce faire, on aura besoin d'un code javascript que le navigateur exécutera. Ce code javascript peut être directement écrit sous forme d'une chaîne de caractères dans le sketch arduino, mais il est plus commode de le stocker dans un fichier séparé. Mais comment téléverser un fichier sur l'ESP8266 ?+et on visite la page **%%<ADRESSE_IP>/pot%%** qui nous affiche la valeur du potentiomètre. En revanche, cette valeur n'est mise à jour que lorsque qu'on la demande à nouveau au serveur en rafraîchissant la page. Pour qu'elle soit régulièrement mise à jour, il faut que le navigateur la demande régulièrement. Pour ce faire, on aura besoin d'un code javascript que le navigateur exécutera. Ce code javascript peut être directement écrit sous forme d'une chaîne de caractères dans le sketch arduino, mais il est plus commode de le stocker dans un fichier séparé. Mais comment téléverser un fichier sur l'ESP8266 ? 
 + 
 +[[https://github.com/reso-nance/INITs/tree/master/ESP8266-ServeurWeb/HelloServerPOT | télécharger ce code]] 
 +==== page dynamique ==== 
 +=== le SPIFFS === 
 +Le **SPIFFS** ou //SPI FileSystem// est un moyen de stocker des fichiers et dossiers sur l'ESP8266 et de les téléverser depuis l'IDE d'arduino. Il nécessite un plugin dont l'installation est détaillée sur la page wiki d'un [[projets:serveurwebsurbatterie:accueil| précédent projet ]] Une fois le plugin installé, créer un dossier **data** dans le dossier du sketch arduino qui contiendra tous les fichier à téléverser. 
 +=== HTML === 
 +Le code javascript peut être intégré à une page HTML qui permet d'afficher la valeur du potentiomètre. Dans le dossier data, créer un fichier  texte qui contiendra le code suivant : 
 +<code html> 
 +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
 +<html lang="fr"></html> 
 +    <head> 
 +        <meta http-equiv="content-type" content="text/html; charset=utf-8"> 
 +        <title>potentiomètre</title> 
 +    </head> 
 +    <body> 
 +        <p>valeur du potentiomètre : <span id="potValue"></span></p> 
 +    </body> 
 +</html> 
 +</code> 
 +et le renommer en //index.html// On peut à présent afficher la page sur son navigateur en double cliquant dessus. 
 +=== servir la page === 
 +Pour accéder à cette page depuis l'ESP8266, il nous faut toujours une fonction et une route associée. On commence par importer la librairie qui accède au SPIFFS en haut du sketch et on ajoute //SPIFFS.begin()// en fin de setup pour l'initialiser. 
 +<code cpp>#include <FS.h> 
 +... 
 +void setup() { 
 +  ... 
 +  SPIFFS.begin() 
 +  } 
 +</code> 
 +La fonction qui sera appelée lorsqu'on visite la page **/pot** est cette fois un peu différente puisqu'elle va lire le contenu du fichier depuis le SPIFFS et l'envoyer directement depuis le serveur en //streaming// : 
 +<code cpp> 
 +void handleHTMLpage() { 
 +  File file = SPIFFS.open("/index.html", "r"); 
 +  size_t sent = server.streamFile(file, "text/html"); 
 +} 
 +</code> 
 +Comme d'habitude, on ajoute une route vers cette fonction dans le //setup// : 
 +<code cpp>server.on("/html",handleHTMLpage);</code> 
 +puis on téléverse le code, sans oublier d'envoyer au préalable le fichier contenu dans le dossier data : **outils -> ESP8266 Sketch Data Upload** 
 +La page <ADDRESSE_IP>/html affiche à présent notre page html depuis l'ESP8266 
 +=== le javascript === 
 +Pour mettre à jour la valeur du potentiomètre sans recharger la page, il nous faut envoyer régulièrement une requête au serveur et en récupérer la réponse. Pour ce faire, on utilisera la fonction **fetch** qui sera répétée toutes les 500ms par le navigateur grâce à la fonction **setInterval**. Enfin, on affiche la valeur en replaçant le texte du %%<span>%% vide par la réponse du serveur : 
 +<code javascript> setInterval(function(){ // tout ce qui se trouve ici sera répété indéfiniment 
 +                fetch("/pot") // on envoie une requête GET au serveur 
 +                .then(response => response.text()) // on récupère le texte de la réponse 
 +                .then((response) => { 
 +                    document.getElementById("potValue").textContent = response // on remplace le texte de l'élément dont l'id est potValue par celui de la réponse 
 +                    }) 
 +                .catch(err => console.log(err)) // si une erreur se produit, on l'affiche dans la console 
 +            }, 500) // à répéter toutes les 500 millisecondes (2x par seconde) 
 +</code> 
 +On peut maintenant insérer ce code javascript entre deux balises //%%<script> </script>%%// dans la page html et la téléverser sur l'ESP8266. Il ne nous reste plus qu'à modifier la fonction //handlePotentiometer// pour qu'elle ne renvoie plus que la valeur sans aucun texte autour : 
 +<code cpp> 
 +void handlePotentiometer() { 
 +  unsigned int potValue = analogRead(A0); 
 +  server.send(200, "text/plain", String(potValue)); 
 +} 
 +</code> 
 +La page **%%<ADDRESSE_IP>/html%%** est maintenant mise à jour automatiquement deux fois par secondes. Il est possible d'augmenter le taux de rafraîchissement selon la qualité du wifi.
  
-==== le SPIFFS ==== +[[https://github.com/reso-nance/INITs/tree/master/ESP8266-ServeurWeb/HelloServerPOT_HTML|télécharger ce code]]
-Le **SPIFFS** ou //SPI FileSystem// est un moyen de stocker des fichiers et dossiers sur l'ESP8266 et de les téléverser depuis l'IDE d'arduino. +
/home/resonancg/www/wiki/data/attic/ateliers/esp-serveur-web/accueil.1581072022.txt.gz · Dernière modification: 2020/02/07 11:40 de laurent

Outils de la page

GNU Free Documentation License 1.3 Valid HTML5 Driven by DokuWiki