Accueil | ESP8266 - ESP32 | Bootstrap : donner un aspect moderne à l’interface Web de vos projets ESP8266

Bootstrap : donner un aspect moderne à l’interface Web de vos projets ESP8266

Dans le tutoriel précédent, nous avons vu comment créer un interface web pour accéder au serveur web d’un ESP8266. Dans ce tutoriel, je vous propose de découvrir comment utiliser le framework Bootstrap pour donner un aspect moderne à l’interface Web de vos projets d’objets connectés à base d’ESP8266. Nous n’allons pas aller très loin dans la programmation HTML, il y a de quoi tenir un blog entier sur le sujet. L’objectif de ce tutoriel est de mettre en place le framework et tester quelques éléments (bouton, table, badge, interaction avec le code Arduino depuis l’interface Web). Pour aller plus loin dans l’HTML, voici quelques blogs très bien fait : Alsa Création (en Français), w3schools.

Remarque. Vous pouvez suivre la même démarche si vous utilisez un Shield Ethernet ou WiFi pour Arduino. Les librairies sont identiques

Bootstrap, c’est quoi ?

Bootstrap est un framework HMTL responsive, c’est à dire que l’affichage s’adapte à la dimension de l’écran. Bootstrap est un projet Open Source très populaire chez les concepteurs de sites internet et webapp (il a été le projet le plus populaire sur GitHub en 2014). Il a été initié par un développeur travaillant chez Tweeter.

bootstrap esp8266 arduino

Cela peut paraître difficile à première vue mais en fait c’est très simple à mettre en oeuvre. N’oubliez pas que la puissance d’un ESP8266 est très limitée, on ne va pas faire des interfaces très compliquée. L’essentielle de la “programmation” HTML va être d’indiquer les classes (class en anglais) que le moteur de rendu doit utiliser pour afficher un élément.

Prenons l’exemple d’un bouton. Pour afficher un bouton, on doit faire comme ceci en HTML

Ce qui donne ceci. Pas difficile de faire mieux !

Maintenant, allez sur le site de bootstrap et descendez jusqu’aux exemples de la section glyphicon. Pour modifier l’aspect d’un élément HTML, il faut lui attribuer des classes Bootstrap.

Par exemple ici, on va lui adjoindre les classes btn, btn-success (couleur verte), btn-lg (large). Voici ce que ça donne. Plus sympa non !

Voilà, rien de très compliqué. Ce qui est le plus difficile, c’est d’avoir une vue d’ensemble de toutes les classes disponibles et du rendu obtenu. Heureusement, il y a des sites qui permettent de faire des maquettes en ligne.

Comment réaliser un maquette d’interface en ligne ?

En googlelisant boostrap builder online, vous allez trouver de nombreux sites qui permettent de réaliser des maquettes et d’obtenir le code HTML. Impossible de tous les tester, j’ai testé layouit!. Vous pouvez également lire cet article qui présente rapidement 7 solutions en ligne.

Layouit! est simple et efficace, on dépose les éléments sur la page. C’est un service gratuit, il est donc assez limité. Tous les éléments ne sont pas configurables. Par exemple, il est impossible de changer le nombre de lignes et de colonne d’une table, ajouter un badge dans une cellule… Il faudra le faire à la main au moment du codage.

bootstrap layoutit builder design page esp8266 arduino

Pour chaque élément, les différents styles disponibles sont accessibles depuis des menus et options à cocher

Une fois votre maquette terminée, pour récupérer le code HTML, cliquez sur Download (dans la barre supérieure) puis Continue non logged. Inutile de récupérer le code et les ressources puisqu’on va les télécharger directement sur internet. Copiez simplement le code dans le presse papier.

bootstrap layoutit download html code esp8266 arduino

Attention, vous n’allez pas obtenir le code HTML tout fait pour votre application, simplement la structure avec les classes qui correspondent à vos choix. Ensuite il faudra adapter le code et “peupler” les éléments avec vos données.

Comment adapter le code HTML pour le programme Arduino ?

Voici un petit exemple d’interface composée uniquement d’un jumbotron, un cadre contenant titre, un résumé et un bouton d’action.

bootstrap layoutit jumbotron

Voici le code HTML généré par layoutit!

Je rappel que l’idée est de construire en dynamique le code HTML (une simple chaine teste) de la page en y intégrant la valeur des variables.

Le mieux est de créer des chaines qui contiennent des éléments récurrents, ce n’est pas obligatoire et peu rendre la mise au point plus difficile car il est plus difficile de conserver l’arborescence du code. Il faudra également remplacer tous les double guillemets (“) par un simple (‘).

Il ne reste plus qu’à assembler la chaine en y incluant la variable de température. On peut compacter certaines chaines, mais il faut garder à l’esprit qu’en cas de modification ou ajout d’élément, ce sera plus difficile à mettre au point. Toute balise ouverte devant être refermée, il est préférable de garder une certaine arborescence pour s’y retrouver.

Comment ajouter le framework Bootstrap à un projet ESP8266 Arduino

Nous allons maintenant rentrer un peu plus dans le vif du sujet.

Il y a deux façons de procéder pour ajouter le framework Bootstrap à un projet Arduino/ESP8266. La première est d’embarquer tout le nécessaire dans la mémoire de l’ESP8266. Ce sera le thème du prochain tutoriel sur le sujet. Ici, nous allons récupérer les sources depuis internet. Cela oblige l’ESP8266 a être connecté à internet. Pour que cela fonctionne, on ne pourra donc pas l’utiliser comme un point d’accès.

On va donc indiquer dans l’entête de la page HTML les ressources à télécharger sur internet.

Remarque. Il n’y a que la feuille de style bootstrap.min.css qui est obligatoire,mais si vous avez besoin de créer des interactions avec le code Arduino ou utiliser certains composants de Bootstrap avec du Javascript, il faut tout installer.

Si la sécurité est une obsession, vous pouvez même ajoutez un contrôle d’intégrité des sources.

Ensuite, il faut indiquer au navigateur internet que le site est adapté pour le mobile. Tous les autres réglages sont expliqués ici (paragraphe Mobile First).

C’est terminé pour l’entête. Passons au body de la page HTML. Tout le contenu de la page doit être inclus dans un container. On va donc ajouter une div et indiquer la classe container-fluid . L’option fluid signifie que la page prend toute la place disponible à l’écran

Bootstrap a été conçu pour gérer les blocs d’affichage sous la forme de grille. On peut avoir par exemple un affichage sur trois colonnes. En fonction du type d’écran, ou si on redimensionne la fenêtre du navigateur, les colonnes vont commencer par se réduire puis se placer l’une en dessous de l’autre (sur un smartphone). Pour cela, on doit créer un ligne (row) dans laquelle on placera nos éléments, par exemple une table.

Ici, je vous propose de créer un ligne qui contient

  • Un titre pour la page (h1)
  • Un sous-titre (h3) pour le bloc station météo
  • Une barre de navigation pour afficher la valeur courante de température, humidité et pression atmosphérique. Le premier bouton est actif (classe active), il aura donc un fond coloré. Un badge est placé à droite de l’étiquette (classes badge, pull-right) à l’aide une balise span
  • Une table avec composée de 4 colonne : capteur, mesure, valeur actuelle, valeur précédente (voir le code dans le projet final en bas de page)

Le code HTML qui permet d’afficher. Il reste à intégrer les mesures dans le code final.

Interaction avec le code Arduino depuis l’interface web

Il y a trois grandes méthodes pour interagir avec le code Arduino. La première méthode consiste à ajouter du code javascript dans la page HTML. C’est une très bonne solution mais vous devrez maîtriser un language supplémentaire. On va donc laisser de coter cette solution.

La seconde solution consiste à passer les paramètres dans une URL, cela revient donc à brancher une fonction qui surveille la page concernée. Dans le cas présent, cette solution n’est pas très bien adaptée car il va falloir gérer le rechargement de la page principale, ci qui ne va pas donner quelque de très élégant.

On va donc utiliser la troisième méthode qui consiste à envoyer une requête HTTP de type POST. Dit comme ça, c’est du chinois, mais en fait c’est assez simple. Les requêtes POST sont envoyés par exemple lorsqu’on appel la fonction submit (déjà utilisée dans le précédent tutoriel). C’est la fonction qui est appelée lorsqu’on valide le remplissage d’un formulaire (création de compte, paiement par carte bancaire…). On peut très facilement voir ce qui se passe en ouvrant les outils de développement proposés par Chrome (l’équivalent existe sur tous les navigateurs).

bootstrap esp8266 webserver google chrome outils developpement

On va donc commencer par modifier les éléments avec lesquels ont souhaite interagir dans le code Arduino. Ce sont surtout les boutons en général. Pour qu’un bouton puisse “poster” une information, il faut l’inclure dans un formulaire. Le formulaire a deux paramètres :

  • action = ‘/’
  • method = ‘POST’

Ensuite pour un bouton, on lui ajoute le type submit. Pour changer l’état d’une sortie, on donnera le même nom aux deux boutons (ON et OFF), et on chargera la value (valeur). Ce qui donne le code suivant.

Dans les outils de développement, allez sur l’onglet Network et appuyez sur un bouton ON qui active la sortie D6 pour voir la requête envoyée par la page. La section Form Data en bas de page contient les données envoyées par la page lorsqu’on appuie sur le bouton.

bootstrap chrome post http bouton off

Et lorsqu’on la désactive

bootstrap chrome post http bouton on

Maintenant coté Arduino, on doit faire 3 choses :

  • Brancher un méthode lorsque l’argument est reçu de la page web. C’est la méthode hasArg(String nomArgument) qui permet de le faire
  • Récupérer la valeur de l’argument avec arg(nomArgument)
  • Réaliser le traitement attendu, du code Arduino classique

Dans la fonction handleRoot, on ajoute un test qui vérifie la présence de l’argument D6. S’il est présent, on exécute la fonction handleD6.

On récupère la valeur de l’argument et on lance le traitement associé

Affichage des caractères accentués ou spéciaux

Si vous utilisé Firefox ou Safari (sur iOS) vous allez très certainement rencontrer des problèmes d’affichage des caractères accentués. j’ai pas mal cherché comment résoudre le problème aussi bien du coté ESP8266 (paramètres lang et charset) que du coté du navigateur (option d’affichage des caractères accentués), sans succès. La seule solution qui fonctionne (je suis preneur si vous trouvez autre chose) est d’utiliser le code HTML correspondant au caractère accentué ou spécial. Voici un petit tableau avec les plus courants. Il y a plein de sources sur internet.

Code HTMLCaractère
àà
ââ
éé
èè
êê
ùù
ûû
çç
°°

Ce qui donne par exemple pour température, Température . Le mieux est de faire un chercher / remplacer lorsque tout est terminé.

Assemblage du projet

Il est temps de passer aux choses sérieuses et réaliser notre première interface.

Matériel utilisé

Pour cette démo, j’ai simplement assemblé un DHT22 et un BMP180 pour récupérer des mesures. J’ai également branché des Led pour simuler l’activation des GPIO.

esp8266 Wemos D1 miniModule ESP8266 ESP-12. Par exemple Wemos D1 Mini
chargeur raspbery pi 3 5v 3000maAlimentation 5/3A micro-usb
BMP180Capteur de pression atmosphérique

BMP180

Broches DHT22Capteur de température et d’humidité

DHT11 ou DHT22

jumper dupontJumper Dupont
breadboardBreadboard

Câblage

Voici un tableau de repérage et de correspondance des broches entre Arduino et ESP8266. Vous pouvez également ajouter un écran OLED SDSD1306.

ComposantBrochesRepérage ArduinoEquivalence ESP8266 (Wemos D1 mini)
DHT22VCC5V5V
GNDGNDG
DataGPIO-14D4
BMP180VCC5V5V
GNDGNDG
SDAGPIO-4D2
SCKGPIO-5D1

Code du projet

Voici le code final du projet qu’il vous suffit de coller dans un nouveau sketch Arduino. Il faut définir les variables ssid et password pour accéder à votre réseau WiFi.

Voici l’interface que vous allez obtenir en saisissant l’adresse IP de la Wemos D1 Mini. La page est configurée pour s’actualiser automatiquement toutes les 60 secondes (paramètre content=’60’ dans l’entête de la page).

demo webserver esp8266 arduino bootstrap bouton table badge code html

Il reste encore énormément à découvrir, il est impossible de tout détailler dans un tutoriel, mais vous avez maintenant les clés pour réaliser de belles interfaces HTML pour vos projets 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).

  • gandolfi

    Salut,

    Bravo quel travail !!!!! je ne sais pas où tu trouves le temps et toutes ces compétences.

    Il y a tellement de possibilités que je voudrais résumer ce que j’ai compris.

    Quand on utilises l’ESP8266 comme SERVEUR WEB
    – on le code comme Arduino (pas de nodemcu ou espeasy) ?
    – il communique directement avec les GPIO ou PWM dans les 2 sens ?
    – on peut se passer de MQTT, Open HAB et Node-RED pour afficher les infos des sondes et interagir sur les appareils reliés (moteur, servo, led…) comme dans ton tuto mqtt- nodered- espeasy ?

    Si c’est le cas c’est beaucoup plus léger pour le meme résultat non ?

    Mais il manque le coté “simple” de node-red pour relier les sondes, agir sur les objets connectés et faire des affichages

    Merci.

    Ps: Il y a tellement de possibilités et de manière que ce n’est pas évident de faire le tri.
    il faut presque un tuto pour informer sur les différents “combo logiciel + technique” possible avec ESP8266.

    • Bonsoir. Merci beaucoup. Pour le moment j’essai de tester toutes les technos à notre disposition pour nos projets DIY. Pour répondre à tes questions :
      – On le code comme Arduino (pas de nodemcu ou espeasy) ? => comme un Arduino. ESP Easy est un programme de configuration qui permet de communiquer avec un serveur domotique ou un dashboard (tableau de bord) en ligne
      – il communique directement avec les GPIO ou PWM dans les 2 sens ? C’est du code Arduino classique. C’est à nous de tout faire. Les prochains tutos iront beaucoup plus loin. Sinon oui, dans les 2 sens. Le PWM c’est un peu différent, c’est un train d’impulsions qui permet de controler un moteur ou une Led.
      – on peut se passer de MQTT, Open HAB et Node-RED pour afficher les infos des sondes et interagir sur les appareils reliés (moteur, servo, led…) comme dans ton tuto mqtt- nodered- espeasy ? => Absolument mais disons plutot que c’est complémentaire. Ca permet de faire une mini-interface d’administration / controle
      – Si c’est le cas c’est beaucoup plus léger pour le meme résultat non ? => idem, c’est complémentaire. Avec un serveur domotique tu vas pourvoir controler beaucoup d’appareils et créer des scénarios complexes (en fonction du language disponible). Sur l’ESP, l’avantage c’est qu’on peut faire des traitements locaux. A la limite il n’y a pas besoin de serveur domotique. Par exemple un système d’irrigation, un portail électrique…
      Mais il manque le coté “simple” de node-red pour relier les sondes, agir sur les objets connectés et faire des affichages => tu as raison. Node-RED est vraiment top pour ça. Par contre pour des gros projets, Avec Node-RED, ça va vite devenir une usine à gaz. Un peu comme avec Labview (si tu connais).
      il faut presque un tuto pour informer sur les différents “combo logiciel + technique” possible avec ESP8266. => Oui, c’est vrai. Je suis en train de réfléchir à des articles plus généraux mais il faut déjà que je termine tout ce qui est en cours. Peut être un livre sur le sujet l’année prochaine si ça vous dit ?
      Bonne soirée

  • qcvictor

    Excellent comme d’habitude, j’essaie de piloter deux carte relai qui contrôle un moteur. j’envoie un url http://192.168.1.111/control?cmd=GPIO,0,0 pour l’ouvrir puis un autre pour le fermer http://192.168.1.111/control?cmd=GPIO,0,1
    J’ai fait un bouton avec mousedown et mouseup pour qu’il reconnaisse l’appuie sur le bouton fonctionne bien avec la souris mais pas avec les tablet/telephone.
    Connais tu une fonction du bootstrap qui ferait cela ?

    • Bonsoir Victor. Merci beaucoup. Effectivement, c’est possible que ça ne fonctionne pas sur smartphone ou tablette car il n’y a pas de souris donc les commandes ne sont pas gérées. Si tu as absolument besoin d’utiliser cette fonction, il faut “bricoler” (ça tombe bien !) une solution de contournement. J’ai trouvé cette solution http://stackoverflow.com/questions/24025165/simulating-a-mousedown-click-mouseup-sequence-in-tampermonkey. Sinon, le plus facile est encore d’utiliser le déclencheur onClick. Il faut regarder du coté jQuery ou Javascript pour la gestion des événements. Bootstrap s’occupe surtout de l’habillage J’espère avoir bien répondu à ta question,. Si j’ai mis à coté, n’hésite pas à m’envoyer un morceau de code. Bonne soirée.