Code source
Bootswatch permet de personnaliser le thème par défaut (remplacer la feuille de style CSS par défaut) du framework Bootstrap. 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 sur bootstrapCDN.
Tutoriel actualisé le 7 août 2020
Nous allons modifier le code de l’interface HTML développé dans le tutoriel précédent.
Sommaire
Comment changer le thème par défaut de Bootstrap avec Bootswatch ?
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.
link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'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 changer le thème par une requête HTTP ?
On va profiter 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).
Et le code javascript correspondant
Choisir un théme
Pour voir ce qui se passe, ouvrez les outils de développements sur votre navigateur et sélectionnez un thème pour visualiser la requête envoyée au serveur Web de l’ESP8266.
Comment changer le thème Bootstrap dynamiquement ?
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.
if ( theme == "bootstrap" ) {
page += "";
} else {
page += "";
}Code du projet
Nous allons reprendre le code de notre petite station météo développé dans le tutoriel précédent. On récupère la température et l’humidité d’une sonde DHT22 et la pression atmosphérique d’un BMP180.
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.
#include
#include
#include
#include
#define ssid "xxx" // WiFi SSID
#define password "xxxxxxxx" // WiFi password
#define DHTTYPE DHT22 // DHT type (DHT11, DHT22)
#define DHTPIN D4 // Broche du DHT / DHT Pin
const uint8_t GPIOPIN[4] = {D5,D6,D7,D8}; // Led
float t = 0 ;
float h = 0 ;
float p = 0;
String etatGpio[4] = {"OFF","OFF","OFF","OFF"};
String theme = "bootstrap";
// Création des objets / create Objects
DHT dht(DHTPIN, DHTTYPE);
Adafruit_BMP085 bmp;
ESP8266WebServer server ( 80 );
String getPage(){
String page = "";
page += "";
if ( theme == "bootstrap" ) {
page += "";
} else {
page += "";
}
page += "ESP8266 Demo - www.projetsdiy.fr";
page += "";
page += "";
page += "";
page += "Demo Webserver ESP8266 + Bootstrap
"; page += "
Mini station météo
"; page += "
"; page += "
« ; // Tableau des relevés page += « »; //Entête page += « »; // Contenu du tableau page += « »; page += « »; page += « »; page += »
| Capteur | Mesure | Valeur | Valeur précédente |
|---|---|---|---|
| DHT22 | Température | « ; // Première ligne : température page += t; page += « °C | « ; page += « – |
| DHT22 | Humidité | « ; // 2nd ligne : Humidité page += h; page += « % | « ; page += « – |
| BMP180 | Pression atmosphérique | « ; // 3ème ligne : PA (BMP180) page += p; page += « mbar | « ; page += « – |
"; page += "
GPIO
"; page += ""; page += "
D5 "; page += ""; page += etatGpio[0]; page += "
"; page += "ON"; page += "OFF"; page += "
D6 "; page += ""; page += etatGpio[1]; page += "
"; page += "ON"; page += "OFF"; page += "
D7 "; page += ""; page += etatGpio[2]; page += "
"; page += "ON"; page += "OFF"; page += "
D8 "; page += ""; page += etatGpio[3]; page += "
"; page += "ON"; page += "OFF"; page += ""; page += ""; page += ""; page += ""; page += ""; page += ""; page += "Choisir un théme"; page += ""; page += "
"; page += ""; page += ""; page += ""; page += "
Version francaise : www.projetsdiy.fr"; page += "English version : www.diyprojects.io"; page += ""; page += ""; page += ""; page += ""; return page; } void handleRoot(){ if ( server.hasArg("theme") ) { handleTheme(); } else if ( server.hasArg("D5") ) { handleD5(); } else if ( server.hasArg("D6") ) { handleD6(); } else if ( server.hasArg("D7") ) { handleD7(); } else if ( server.hasArg("D8") ) { handleD8(); } else { server.send ( 200, "text/html", getPage() ); } } void handleTheme(){ theme = server.arg("theme"); Serial.println("Update theme : "); Serial.print(theme); server.send ( 200, "text/html", getPage() ); } void handleD5() { String D5Value; updateGPIO(0,server.arg("D5")); } void handleD6() { String D6Value; updateGPIO(1,server.arg("D6")); } void handleD7() { String D7Value; updateGPIO(2,server.arg("D7")); } void handleD8() { String D8Value; updateGPIO(3,server.arg("D8")); } void updateGPIO(int gpio, String DxValue) { Serial.println(""); Serial.println("Update GPIO "); Serial.print(GPIOPIN[gpio]); Serial.print(" -> "); Serial.println(DxValue); if ( DxValue == "1" ) { digitalWrite(GPIOPIN[gpio], HIGH); etatGpio[gpio] = "On"; server.send ( 200, "text/html", getPage() ); } else if ( DxValue == "0" ) { digitalWrite(GPIOPIN[gpio], LOW); etatGpio[gpio] = "Off"; server.send ( 200, "text/html", getPage() ); } else { Serial.println("Err Led Value"); } } void setup() { for ( int x = 0 ; x < 5 ; x++ ) { pinMode(GPIOPIN[x],OUTPUT); } Serial.begin ( 115200 ); // Initialisation du BMP180 / Init BMP180 if ( !bmp.begin() ) { Serial.println("BMP180 KO!"); while(1); } else { Serial.println("BMP180 OK"); } WiFi.begin ( ssid, password ); // Attente de la connexion au réseau WiFi / Wait for connection while ( WiFi.status() != WL_CONNECTED ) { delay ( 500 ); Serial.print ( "." ); } // Connexion WiFi établie / WiFi connexion is OK Serial.println ( "" ); Serial.print ( "Connected to " ); Serial.println ( ssid ); Serial.print ( "IP address: " ); Serial.println ( WiFi.localIP() ); // On branche la fonction qui gère la premiere page / link to the function that manage launch page server.on ( "/", handleRoot ); server.begin(); Serial.println ( "HTTP server started" ); } void loop() { // put your main code here, to run repeatedly: server.handleClient(); t = dht.readTemperature(); h = dht.readHumidity(); p = bmp.readPressure() / 100.0F; delay(1000); }
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 en testant directement depuis votre projet ESP8266.
Thème Bootstrap 3.3.7 par défaut
Thème Bootswatch Darkly
Thème Bootswatch Readable
Thème Bootswatch Superhero
Thème Bootswatch United
De quoi donner un aspect très pro et très bien fini à tous vos projets DIY ESP8266 !
Avez-vous aimé cet article ?