Ci-dessous, les différences entre deux révisions de la page.
Les deux révisions précédentes Révision précédente Prochaine révision | Révision précédente Dernière révision Les deux révisions suivantes | ||
ateliers:esp-serveur-web:accueil [2020/02/07 11:30] laurent [lire un potentiomètre] |
ateliers:esp-serveur-web:accueil [2020/02/17 13:47] laurent [en pratique] |
||
---|---|---|---|
Ligne 5: | Ligne 5: | ||
* Contexte : INIT' | * Contexte : INIT' | ||
* Lien : [[https:// | * Lien : [[https:// | ||
+ | |||
+ | {{ : | ||
===== Préparation ===== | ===== Préparation ===== | ||
Ligne 22: | Ligne 24: | ||
Dans un navigateur web, taper cette même adresse (ici **%%http:// | Dans un navigateur web, taper cette même adresse (ici **%%http:// | ||
+ | |||
+ | Si l' | ||
+ | {{ : | ||
==== comment ça marche ? ==== | ==== comment ça marche ? ==== | ||
Ligne 47: | Ligne 52: | ||
et le tour est joué. | et le tour est joué. | ||
+ | [[https:// | ||
===== lire un potentiomètre ===== | ===== lire un potentiomètre ===== | ||
+ | ==== page statique ==== | ||
On a vu comment afficher du texte, il semble donc assez simple d' | On a vu comment afficher du texte, il semble donc assez simple d' | ||
<code cpp> | <code cpp> | ||
Ligne 59: | Ligne 66: | ||
server.on("/ | server.on("/ | ||
</ | </ | ||
- | et on visite la page **%%< | + | et on visite la page **%%< |
+ | |||
+ | [[https:// | ||
+ | ==== page dynamique ==== | ||
+ | === le SPIFFS === | ||
+ | Le **SPIFFS** ou //SPI FileSystem// | ||
+ | === HTML === | ||
+ | Le code javascript peut être intégré à une page HTML qui permet d' | ||
+ | <code html> | ||
+ | < | ||
+ | <html lang=" | ||
+ | < | ||
+ | <meta http-equiv=" | ||
+ | < | ||
+ | </ | ||
+ | < | ||
+ | < | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | et le renommer en // | ||
+ | === servir la page === | ||
+ | Pour accéder à cette page depuis l' | ||
+ | <code cpp># | ||
+ | ... | ||
+ | void setup() { | ||
+ | ... | ||
+ | SPIFFS.begin() | ||
+ | } | ||
+ | </ | ||
+ | La fonction qui sera appelée lorsqu' | ||
+ | <code cpp> | ||
+ | void handleHTMLpage() { | ||
+ | File file = SPIFFS.open("/ | ||
+ | size_t sent = server.streamFile(file, | ||
+ | } | ||
+ | </ | ||
+ | Comme d' | ||
+ | <code cpp> | ||
+ | puis on téléverse le code, sans oublier d' | ||
+ | La page < | ||
+ | === 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 %%< | ||
+ | <code javascript> | ||
+ | fetch("/ | ||
+ | .then(response => response.text()) // on récupère le texte de la réponse | ||
+ | .then((response) => { | ||
+ | document.getElementById(" | ||
+ | }) | ||
+ | .catch(err => console.log(err)) // si une erreur se produit, on l' | ||
+ | }, 500) // à répéter toutes les 500 millisecondes (2x par seconde) | ||
+ | </ | ||
+ | On peut maintenant insérer ce code javascript entre deux balises // | ||
+ | <code cpp> | ||
+ | void handlePotentiometer() { | ||
+ | unsigned int potValue = analogRead(A0); | ||
+ | server.send(200, | ||
+ | } | ||
+ | </ | ||
+ | La page **%%< | ||
+ | |||
+ | [[https:// |