Vous êtes sur la page 1sur 8

Javascript et CSS

L'objectif de ce billet est d'expliquer comment servir du HTML, du Javascript et du CSS dans un
serveur web HTTP ESP8266.

Introduction

L'objectif de ce billet est d'expliquer comment servir du HTML, du Javascript et du CSS dans un
serveur web HTTP ESP8266.

Il est important de prendre en considération que HTML, Javascript et CSS sont des langages qui
sont exécutés / rendus dans la partie client [1]. Dans cet exemple, puisque nous allons faire des
requêtes HTTP à partir d'un navigateur web, il sera de sa responsabilité de rendre le HTML et le
CSS et d'exécuter le Javascript que nous allons servir.

Cela signifie que la ESP8266 n'a pas besoin de savoir comment interpréter le HTML, le CSS ou le
Javascript. Ainsi, comme nous le verrons ci-dessous, ce code sera stocké dans des chaînes de
caractères qui seront renvoyées dans les réponses HTTP, à peu près de la même manière que nous le
ferions pour renvoyer tout autre type de contenu.

Dans ce simple exemple, nous allons créer une page d'introduction en HTML, une page avec un
code Javascript qui déclenchera une fenêtre d'alerte lorsqu'un bouton sera cliqué, et une page avec
un bouton de style CSS.

Le code du serveur HTTP Arduino

Afin de créer notre serveur web, nous utiliserons exactement la même approche que celle expliquée
dans le post précédent, qui explique tous les détails de la configuration du serveur.

Ainsi, la partie la plus importante dont nous devons nous souvenir est que nous devons spécifier la
fonction de traitement pour chaque URL de notre serveur. En récupérant le code du dernier
message, nous devons déclarer une variable globale de la classe ESP8266WebServer et passer en
argument du constructeur le port où le serveur écoutera les requêtes HTTP entrantes.

Serveur ESP8266WebServer(80) ;

Ensuite, pour chaque URL, nous spécifions la fonction de traitement qui sera exécutée lorsqu'une
requête est envoyée vers ce chemin. Pour ce faire, nous appelons la méthode On sur l'objet serveur.

Pour ce tutoriel, supposons que nous déclarions la fonction de manipulation en ligne, afin de rendre
le code plus compact.

Par souci de simplicité, nous supposerons que le code HTML, Javascript et CSS que nous servons
sera statique. Cela signifie que nous pouvons le déclarer dans une chaîne de caractères et le
renvoyer simplement lorsqu'une requête HTTP est effectuée sur l'URL souhaitée.

En nous rappelant encore une fois le code du dernier message, nous appelons la méthode d'envoi sur
l'objet serveur. Comme arguments, nous lui passons le code de retour de la requête, le type de
contenu de retour et le contenu, de gauche à droite.
Ainsi, nous voulons d'abord retourner le code HTTP 200 (code OK). Ensuite, nous devons nous
assurer que nous spécifions le contenu de retour sous forme de texte/html, afin que le navigateur
sache qu'il doit être interprété et rendu comme tel. Le type de contenu sera toujours le même car,
dans le cas où nous envoyons du code CSS ou Javascript, il sera intégré dans le code HTML.

Enfin, nous passons la chaîne avec le code HTML/Javascript/CSS. Vérifiez la fonction générique
pour ci-dessous.

server.on("/anyPathWeWant", [](){ //Définir la fonction de traitement du chemin

server.send(200, "text/html", stringContainingCode) ; //Envoyer le code dans la réponse

}) ;

Le code HTML

Dans notre cas d'utilisation, nous supposerons que l'URL racine ("/") affichera un message HTML
qui comportera un message de description et 2 liens. Chacun de ces liens redirigera l'utilisateur vers
l'URL qui sert le code Javascript ou CSS. Vous pouvez vérifier le code à utiliser ci-dessous.

const char * htmlMessage = ” <!DOCTYPE html> “


“<html> “
“<body> “
“<p>This is a HTML only intro page. Please select a button bellow.</p>”
“<a href=\”/javascript\”>Javascript code</a>”
“</br>”
“<a href=\”/cssButton\”>CSS code</a>”
“</body> “
“</html> “;

Expliquer les détails de la structure du HTML dépasse le cadre de ce post et seule une brève analyse
de ce que fait chaque élément du code sera effectuée.
La balise <!DOCTYPE html> indique au navigateur quelle version du HTML le document est écrit
afin que le navigateur sache à quoi s'attendre [2]. L'élément <html> représente la racine d'un
document HTML. Tous les autres éléments doivent être des descendants de cet élément [3]. La
balise <body> indique où commence le corps du document [4].
La balise <p> spécifie un paragraphe et nous l'utilisons donc pour indiquer notre message de
description.
La balise <a> nous permet de créer un hyperlien en spécifiant l'URL d'une page et le message de
l'hyperlien. Ainsi, dans l'attribut href, nous spécifions l'URL vers laquelle nous voulons que
l'utilisateur soit redirigé et, entre les deux balises, nous spécifions le message de l'hyperlien.
Dans ce cas, nous spécifions un chemin dans l'adresse actuelle, donc nous n'avons pas besoin de
mettre l'IP et le port. Ainsi, lorsqu'un utilisateur clique sur l'hyperlien, le navigateur sait qu'il devra
rediriger l'utilisateur vers http://IP:port/{href value}.
Comme nous le verrons plus tard, les chemins que nous spécifions dans la href correspondront aux
chemins où la ESP8266 sera programmée pour renvoyer le code correspondant.
la balise <br> n'est qu'un simple saut de ligne entre les hyperliens.
Une chose très importante est que nous spécifions le code HTML à l'intérieur d'une chaîne, et donc
certains détails doivent être pris en considération.
Premièrement, pour que le code reste structuré, nous devons diviser la déclaration de la chaîne en
plusieurs lignes. Pour ce faire, comme expliqué ici, nous devons mettre les guillemets doubles dans
chaque ligne afin que le compilateur sache qu'elle doit être considérée comme une seule chaîne.
Ainsi, les guillemets du code précédent ne proviennent pas du code HTML mais de la déclaration
d'une chaîne de caractères sur plusieurs lignes.
Enfin, chaque guillemet faisant partie du code HTML (par exemple, les guillemets autour des URL
dans la balise <a>) doit être échappé avec le caractère \. Ainsi, les caractères \ que nous voyons
avant les guillemets ne font pas non plus partie du code HTML mais plutôt du mécanisme
d'échappement.
Ces considérations seront les mêmes pour le reste du code décrit ci-dessous.

Le code Javascript

Pour le code Javascript, nous suivons exactement la même approche qui consiste à le déclarer sous
forme de chaîne, comme on le voit ci-dessous.

const char * javascriptCode = ” <!DOCTYPE html> “


“<html> “
“<body> “
“<p>Click the button to get a message from the ESP8266:</p> “
“<button onclick=\”buttonFunction()\”>Message</button> “
“<script>”
“function buttonFunction() { “
” alert(\”Hello from the ESP8266!\”); “
“} “
“</script>”
“</body> “
“</html> “;

Comme la plupart des étiquettes ont été expliquées dans la section précédente, nous nous
concentrerons sur les nouvelles.
La balise <button> permet de définir un bouton cliquable. Une de ses fonctionnalités nous permet
de spécifier une fonction qui est exécutée lorsque le bouton est cliqué (événement onclick). Dans ce
cas, nous assignons à cet événement l'exécution d'une fonction Javascript appelée "buttonFunction".
Nous utilisons alors la balise <script> qui nous permet de définir le code Javascript. Dans ce cas,
c'est là que nous spécifions le code de la fonction buttonFunction mentionnée. Le code spécifié
correspond à une fenêtre d'alerte qui produira le message "Hello from ESP8266".

Le code CSS

Conformément à l'approche susmentionnée, nous déclarons également le CSS comme une chaîne,
comme on peut le voir ci-dessous.

const char * cssButton =”<!DOCTYPE html>”


“<html>”
“<head>”
“<style>”
“.button {“
“background-color: #990033;”
“border: none;”
“color: white;”
“padding: 7px 15px;”
“text-align: center;”
“cursor: pointer;”
“}”
“</style>”
“</head>”
“<body>”
“<input type=\”button\” class=\”button\” value=\”Input Button\”>”
“</body>”
“</html>”;

Dans ce cas, nous avons la balise <head> qui précise où commencent les définitions des éléments
d'en-tête, un peu comme la balise <body> le fait pour les éléments body.
Ensuite, nous avons l'élément <style>, qui est l'endroit où nous spécifions comment les éléments
HTML doivent être rendus dans un navigateur [5]. Dans ce cas, nous spécifions le style d'un bouton
en changeant certains de ses attributs par défaut, comme la couleur de fond ou le type de curseur qui
apparaît lorsque la souris passe dessus. Le CSS permet de nombreuses personnalisations différentes
qui n'entrent pas dans le cadre de ce billet. Vous pouvez consulter ici quelques exemples d'attributs
permettant de manipuler l'apparence d'un bouton.
Enfin, nous avons la balise <input>, qui spécifie un champ de saisie où l'utilisateur peut entrer des
données [6]. Dans ce cas précis, nous avons défini que notre saisie sera un bouton. Ce bouton aura
les propriétés spécifiées sur le CSS de l'en-tête.
Pour mémoire, nous n'avons associé aucune fonctionnalité au bouton permettant au code de rester
compact, donc cliquer dessus ne fera rien. L'objectif était juste de démontrer la différence de style,
par rapport au bouton spécifié pour la section javascript, qui a le style par défaut.

Le code final

Le code Arduino complet nécessaire pour démarrer le serveur est indiqué ci-dessous. Seule la
déclaration des chaînes de caractères contenant le code HTML, Javascript et CSS est omise afin de
maintenir ce message à une taille réduite. N'oubliez pas de les déclarer en tant que variables
globales afin qu'elles soient accessibles dans les fonctions de traitement.
Notez que les chemins que nous avons définis pour le code CSS et Javascript sont ceux que nous
avons spécifiés dans les URL des balises <a> que nous avons définies dans le code HTML pour la
page d'introduction. Ainsi, lorsque l'utilisateur clique sur les hyperliens, il sera redirigé vers les
chemins existants et la ESP8266 lui renverra donc le contenu correct.

#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
ESP8266WebServer server(80); //Webserver Object
void setup() {
Serial.begin(115200); //Open Serial connection
WiFi.begin(“ssid”, “password”); //Connect to the WiFi network
while (WiFi.status() != WL_CONNECTED) { //Wait for connection
delay(500);
Serial.println(“Waiting to connect…”);
}
Serial.print(“IP address: “);
Serial.println(WiFi.localIP()); //Print the local IP
server.on(“/”, []() { //Define the handling function for root path (HTML
message)
server.send(200, “text/html”, htmlMessage);
});
server.on(“/javascript”, []() { //Define the handling function for the javascript
path
server.send(200, “text/html”, javascriptCode);
});
server.on(“/cssButton”, []() { //Define the handling function for the CSS path
server.send(200, “text/html”, cssButton);
});
server.begin(); //Start the server
Serial.println(“Server listening”);
}
void loop() {
server.handleClient(); //Handling of incoming requests
}

Important : lorsque vous copiez directement le code du blog, une erreur parasite peut se produire
lorsque vous essayez de le compiler sur Arduino. Dans mon cas, cela se produit parce que l'éditeur
suppose le mauvais type de citations. Le moyen le plus simple de corriger cela, compte tenu du
nombre de citations existantes, est de faire une recherche et de remplacer et de mettre les citations
correctes.
Exécution du code
Pour essayer le code, il suffit de le télécharger sur le ESP8266 et, après l'envoi du message "Server
listening" sur le port série, il suffit de copier l'IP imprimée auparavant et d'accéder au serveur dans
un navigateur, à l'adresse suivante, en modifiant le {IP} de votre IP :
http://{IP}/
Vous pouvez voir ci-dessous la sortie attendue dans la console série, avec l'IP à utiliser. Notez que
l'IP que vous obtiendrez sera très probablement différente, selon ce que votre routeur a attribué à
l'ESP8266 lors de l'enregistrement dans le réseau sans fil.

Figure 1 - Sortie de la console série avec l'IP du serveur web.


Ainsi, lorsque nous accédons à l'URL dans un navigateur (dans mon cas, http://192.168.1.103/),
nous arrivons à la page d'introduction HTML, comme on le voit ci-dessous. Ensuite, nous pouvons
cliquer sur un des hyperliens pour aller à la page avec Javascript ou CSS.

Figure 2 - Page d'introduction HTML.


Sur la figure 3, on peut voir la page qui contient le code Javascript. Si nous cliquons sur le bouton,
nous obtenons une boîte d'alerte avec la chaîne que nous avons définie auparavant.

Figure 3 - Page avec boîte d'alerte Javascript.

Dans l'autre page, nous avons le bouton avec un style CSS, comme on peut le voir ci-dessous.

Figure 4 - Page avec bouton stylisé en CSS.

Notes finales

Comme nous l'avons vu dans cet article, la ESP8266 offre tous les outils nécessaires pour mettre en
place un simple serveur web HTTP et commencer à servir du HTML, du Javascript et du CSS de
manière très simple. Néanmoins, nous devons prendre en considération le fait que nous travaillons
avec un microcontrôleur dont les ressources sont considérablement limitées.

Nous ne devons donc pas nous attendre à mettre en place un site web complet avec beaucoup de
fonctionnalités et de style complexes. En outre, même pour des exemples plus simples comme ceux
que nous avons présentés ici, nous ne devons pas non plus nous attendre à pouvoir répondre à des
centaines de demandes par seconde.

Personnellement, je vois ce genre de fonctionnalité pour mettre en œuvre une interface simple de
configuration ou de débogage des appareils. Par exemple, si nous mettons en œuvre un serveur de
température, nous pouvons créer une simple page web pour configurer le nombre de mesures par
seconde que nous effectuerons, entre autres configurations, et servir cette page web sur le ESP8266,
en supprimant toute dépendance externe. Naturellement, cela conviendrait mieux aux utilisateurs
techniques, car la création d'une page web attrayante pour l'utilisateur final d'un produit commercial
nécessiterait beaucoup de style et de fonctionnalités, ce qui, comme nous l'avons dit, n'est pas
pratique pour cet appareil.
Liens
ESP8266: Setting a simple HTTP webserver

References

[1]http://programmers.stackexchange.com/questions/171203/what-are-the-differences-
between-server-side-and-client-side-programming
[2] https://www.techonthenet.com/html/elements/doctype_tag.php
[3] https://developer.mozilla.org/en-US/docs/Web/HTML/Element
[4] http://www.w3schools.com/tags/tag_body.asp
[5] http://www.w3schools.com/tags/tag_style.asp
[6] http://www.w3schools.com/tags/tag_input.asp