Wiki

Reso-nance numérique | Arts et cultures libres

Outils du site


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 14:38]
laurent [contrôler une LED]
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 ]] 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 49: Ligne 54:
 et le tour est joué. et le tour est joué.
  
-Ce code est également [[https://github.com/reso-nance/INITs/tree/master/ESP8266-ServeurWeb/HelloServerLED | téléchargeable ici]]+[[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 65: Ligne 70:
 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 ==== ==== page dynamique ====
 === le SPIFFS === === le SPIFFS ===
Ligne 122: Ligne 128:
 </code> </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. 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]]
/home/resonancg/www/wiki/data/attic/ateliers/esp-serveur-web/accueil.1581082733.txt.gz · Dernière modification: 2020/02/07 14:38 de laurent