Accueil | ESP8266 - ESP32 | Bootstrap (Serveur Web ESP8266) : utiliser les thèmes Bootswatch (code Arduino)

Bootstrap (Serveur Web ESP8266) : utiliser les thèmes Bootswatch (code Arduino)

Bootswatch propose des thèmes gratuits pour Bootstrap. Nous continuons la série d’articles sur la programmation de la partie Web serveur des ESP8266. Dans ce tutoriel nous allons voir comment personnaliser le thème par défaut (remplacer la feuille de style CSS par défaut) du framework Bootstrap. Si vous prenez le train en marche, dans le tutoriel précédent, nous avons vu comment ajouter le framework Bootstrap dans le code HTML pour obtenir un affichage moderne. La feuille de style (fichier CSS) de Bootstrap peut facilement être modifiée pour répondre à vos besoins mais le plus facile est encore d’utiliser les nombreux thèmes (pour la plupart gratuits) disponibles en ligne.

Comment changer le thème par défaut de Bootstrap ?

Il est possible de modifier la feuille de style CSS du framework Bootstrap ou d’ajouter de nouveaux styles en les écrivant soi-même mais c’est un peu dommage de devoir tout faire à la main alors qu’il y a de très nombreux styles de qualité disponibles sur internet (très souvent gratuitement). Impossible de tous les tester. Je vous propose d’essayer les thèmes de BootstrapCND.

Pour modifier le style de notre page, il suffit simplement de pointer vers une autre feuille de style, c’est à dire qu’on va remplacer ce lien dans le code de la page.

Tout comme Bootstrap, il n’est pas nécessaire de télécharger les fichiers en local, on va simplement pointer vers le CND (serveur de fichier) de BootstrapCND. Ce qui va donner par exemple pour le thème Cosmo le lien suivant.

BootstrapCND met également une clé pour vérifier que le fichier récupéré n’a pas été altéré (il ne contient aucun code malicieux). Je n’ai pas intégré cette vérification dans cet exemple.

BootstrapCDN met à disposition 16 thèmes que l’on trouve dans la section Bootswatch. Si vous en avez besoin, BootstrapCDN met également à disposition un lien pour récupérer les symboles de Font Awesome.

Comment envoyer la sélection du dropdown par requête HTTP ?

Je profite de ce tutoriel pour introduire un nouveau composants proposé par Bootstrap, le bouton drop down (que l’on connait aussi sous le nom combo) qui permet de créer une liste de sélection. Comme d’habitude il existe plusieurs méthodes pour envoyer la sélection faite dans la liste. Comme on ne veut pas forcément embarquer du code javascript, je vous propose de passer par une petite astuce qui consiste à créer un champ invisible dans lequel on va recopier pas possible avant d’appeler la fonction submit().

On va donc créer un formulaire (form) dans lequel sera placé le bouton drop down ainsi que le champ invisible (un champ de type input). Pour que cela fonctionne, il est important de bien nommer les éléments HTML et leur attribuer un identifiant (id). Voyons en détail comment ça fonctionne :

  • form method=’POST’ name=’selecttheme’ id=’selecttheme’ : on créé un formulaire qui possède le nom et l’id selecttheme. Ce n’est pas un problème. Les données du formulaire seront envoyée par une requête HTTP avec la méthode POST.
  • input class=’span’ id=’choixtheme’ name=’theme’ type=’hidden’ : le champ de saisie invisible (si vous voulez voir ce qui se passe, changer le type par text). le paramètre name sera la clé qui contiendra la valeur du thème sélectionné dans la liste
  • onclick=’$(\ »#choixtheme\ »).val(\ »bootstrap\ »); $(\ »#selecttheme\ »).submit()’ : pour chaque choix de la liste, on exécute une commande jquery lorqu’un click est détecté. On recopie dans le champ caché (#choixtheme) la valeur qui correspond à la section (ce sera la valeur qui sera envoyé au code Arduino). Ensuite on exécute un  submit() qui va envoyer les données du formulaire (#selecttheme).

Pour voir ce qui se passe, ouvrez les outils de développements sur votre navigateur est sélectionnez un thème pour visualiser la requête envoyée au code Arduino.

demo webserver esp8266 drop down request http post theme selected

Changer le thème en dynamique

Maintenant il ne reste plus qu’à ajouter un traitement pour actualiser la page à chaque fois que l’utilisateur sélectionne un thème. Pour cela il nous suffit de rajouter un test sur l’argument theme dans la fonction handleRoot().

Une variable theme permet de stocker la valeur sélectionnée par l’utilisateur. Ensuite, lorsqu’on créé la page HTML, il suffit de faire un test sur la valeur du thème pour savoir si l’utilisateur souhaite le thème par défaut ou un de BootstrapCDN.

Code du projet

J’ai adapté le code du tutoriel précédent qui récupère la température et l’humidité d’une sonde DHT22 et la pression atmosphérique d’un BMP180. Le matériel suivant a été utilisé.

esp8266 Wemos D1 miniWemos D1 Mini (module ESP8266 ESP-12)
chargeur raspbery pi 3 5v 3000maAlimentation 5/3A micro-usb

Une alimentation de qualité est recommandée.

BMP180Capteur de pression atmosphérique

BMP180

Broches DHT22Capteur de température et d’humidité

DHT22 (ou DHT11)

jumper dupontJumper Dupont
breadboardBreadboard

Il reste à changer le ssid ainsi que le mot de passe du réseau WiFi avant de téléverser le code dans l’ESP8266.

Profiter des nouveaux thèmes Bootswatch

Le programme démarre avec le thème Bootstrap. La liste de sélection se trouve en bas de page. A chaque changement de thème, celui-ci est téléchargé (sauf s’il est déjà en cache sur l’ESP8266) et la page est reconstruite avec la nouvelle feuille de style. Voici quelques exemples. Je vous laisse découvrir les autres thèmes par vous-même.

demo webserver esp8266 theme bootstrap
Thème Bootstrap 3.3.7 par défaut

 

demo webserver esp8266 theme bootstrapCDN darkly
Thème Bootswatch Darkly

 

demo webserver esp8266 theme bootstrapCDN readable
Thème Bootswatch Readable

 

demo webserver esp8266 theme bootstrapCDN superhero
Thème Bootswatch Superhero

 

demo webserver esp8266 theme bootstrapCDN united
Thème Bootswatch United

De quoi donner un aspect très pro et très bien fini à tous vos projets DIY ESP8266 ! N’hésitez pas à partager des impressions d’écran de vos réalisations dans les commentaires.

Remarque. Tout le tutoriel a été développé sur l’IDE Arduino 1.8.1 installé sur un Orange Pi Plus 2e (présenté ici) fonctionnant sous Armbian (Ubuntu 16.04 LTS). Suivez ce tutoriel pour savoir comment installer l’IDE Arduino sur Linux (ARM ou x86).