Différences

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

--- ateliers:esp-serveur-web:accueil [2020/02/07 12:39]
laurent [page dynamique]
+++ ateliers:esp-serveur-web:accueil [2020/02/17 13:48] (Version actuelle)
laurent [en pratique]
@@ Ligne 5: / Ligne 5: @@
   * Contexte : INIT'
   * Lien : [[https://github.com/reso-nance/INITs | repo github]]
+{{ :ateliers:esp-serveur-web:dsc00202.jpg?direct&400 |}}
 ===== Préparation =====
@@ Ligne 19: / Ligne 21: @@
 ===== Servir une page web =====
 ==== 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.
+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 ? ====
@@ Ligne 47: / Ligne 54: @@
 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 =====
 ==== page statique ====
@@ Ligne 60: / Ligne 68: @@
 server.on("/pot", handlePotentiometer);
 </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 ===
@@ Ligne 111: / Ligne 120: @@
             }, 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.
+[[https://github.com/reso-nance/INITs/tree/master/ESP8266-ServeurWeb/HelloServerPOT_HTML|télécharger ce code]]

Wiki

Outils pour utilisateurs

Outils du site

Différences

Outils de la page