Dans le tutoriel précédent, nous avons vu comment créer un interface HTML pour accéder au serveur web embarqué sur un ESP8266. Dans ce tutoriel, nous allons découvrir comment utiliser le framework Bootstrap pour donner un aspect moderne à l’interface HTML. 

Tutoriel actualisé le 7 août 2020

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.

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.

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

ON

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 HTML 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.

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.

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.

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

Demo Bootstrap ESP8266

  
        
 Il fait 22°C  
        
 Nouvelle mesure  
       
      
   

L’idée est ici de construire en dynamique le code HTML 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 (‘).

String row = "";
String col_md_12 = "";

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.

String page = "";
page += "