Projet station météo ESP8266 (Partie 1). Créer l’interface HTML, stockage SPIFFS

Partager sur facebook
Partager sur twitter
Partager sur linkedin
Partager sur pinterest
Partager sur email
Partager sur telegram
logo github

Code source

Dans ce premier article consacrée à la fabrication d’une station météo avec interface Web, nous allons créer le code de l’interface HTML indépendamment du code Arduino du projet ESP8266. 

 

Dans l’article précédent, nous avons vu comment créer un serveur web sur l’ESP8266 (Web Server) qui permet d’afficher une interface HTML depuis un navigateur internet. Cette interface permet d’afficher des données (venant d’un capteur connecté à l’ESP8266) et/ou de réaliser des actions (piloter le GPIO).

A LIRE AUSSI :
ESP8266. Comprendre le code Arduino d'un serveur web avec interface HTML

Le code de l’interface HTML est intégré dans le code Arduino du projet. Cette approche devient rapidement ingérable lorsque l’interface devient complexe. Dans ce cas, il est préférable (nécessaire) de séparer le code de l’interface (code HTML, style CSS…) du code Arduino du projet.

Le code HTML a été entièrement développé à l’aide du pseudo-langage Pug. Avant de commencer, je vous conseille de lire de découverte

A LIRE AUSSI :
Découverte du langage Pug (Jade) pour développer des interfaces HTML avec VSCode ou Geany

Préparer le projet

Il existe deux librairies qui permettent de manipuler des fichiers sur un ESP8266 (presque) comme sur un ordinateur. La librairie LittleFS et FS.h qui est une implémentation de SPIFFS pour l’ESP8266. Pour ce projet, nous utiliserons la librairie FS.h.

Choisir la taille de la zone mémoire

Les modules ESP8266 disposent d’une mémoire flash (similaire aux clés USB). La mémoire flash est découpée et chaque espace est réservée pour chaque fonction :

  • Sketch code C++ du projet
  • OTA update zone tampon utilisée pour télécharger une nouvelle mise à jour du sketch
  • File System (FS) c’est ce qui nous intéresse ici
  • EEPROM une petite zone mémoire qui simule l’EEPROM de l’Arduino. On pourra y stocker des paramètres
  • WiFi config est une zone réservée pour le stockage des paramètres de connexion lorsqu’on développe directement en C++ avec le SDK ESP-IDF
|--------------|-------|---------------|--|--|--|--|--|
^              ^       ^               ^     ^
Sketch    OTA update   File system   EEPROM  WiFi config (SDK)

La taille de la mémoire flash varie d’un fabricant à un autre mais la norme est de 4Mo.

Sélectionner votre carte ESP8266 depuis le menu Outils -> Carte de développement

Puis vous pourrez choisir la quantité de mémoire flash allouée au système de fichier depuis le menu Outils -> Flash Size

Par exemple pour la LoLin – WeMos d1 Mini, il existe 4 choix possibles : aucune allocation 1Mo 2Mo ou 3Mo.

Sélectionner la dimension de la zone mémoire de l'ESP8266 depuis le menu outil de l'IE Arduino

Comment organiser les fichiers puis le transférer dans la zone SPIFFS depuis l’IDE Arduino ?

Tous les fichiers de l’interface devront être stockés dans un dossier data situé à la racine du projet (au même niveau que le fichier principal du projet). Voici un exemple d’organisation.

Dossier data d'un projet ESP8266

Il faudra téléverser manuellement les fichiers avant le premier démarrage et à chaque modification depuis l’IDE Arduino. Pour cela, il faudra installer le plugin ESP8266fs (ou ESP8266 Sketch Data Upload) qui ajoute une options au menu outil de l’IDE Arduino. Tout est expliqué dans ce tutoriel.

A LIRE AUSSI :
ESP8266. Sketch data upload pour IDE Arduino. Téléverser des fichiers vers la zone SPIFFS

Préparation de l’interface HTML

Nous allons donc utiliser le langage Pug pour préparer le code de l’interface HTML.

Entête de la page (header)

Pour créer notre interface, nous allons avoir besoin de nouvelles ressources. Dans un premier temps, nous allons simplement aller les chercher sur internet.

Nous verrons dans le prochain tutoriel qu’il est possible d’ajouter dans la zone SPIFFS toutes les ressources nécessaire.

A LIRE AUSSI :
Projet station météo ESP8266 (Partie 2). Piloter le code Arduino depuis l'interface HTML

On va donc créer une entête (Head) qui indique les ressources que doit charger le navigateur, ici jquery, bootstrap.js, bootstrap-table.js, bootstrap.css et bootstrap-table.css.

Quelques remarques :

  • L’ordre n’a aucune importance
  • On récupère les versions “minifiées”, plus compactes mais difficile à comprendre
  • La balise name=’viewport’ est réservée à Bootstrap.
  • La balise http-equiv=’refresh’ qui permettait de demander au navigateur d’actualiser l’affichage régulièrement a été supprimée. Nous allons gérer l’actualisation de l’affichage autrement.
head
  meta(name='viewport')
  script(src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js')
  script(src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js')
  link(rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.0/bootstrap-table.min.css")
  script(src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.0/bootstrap-table.min.js")
  link(href='https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/superhero/bootstrap.min.css', rel='stylesheet' title="main")
  title Demo ESP8266 SPIFFS + Boostrap - www.projetsdiy.fr

Ajout d’une barre de navigation (body)

Passons au corps de la page (body). En dessous du titre du projet (balise h1), nous allons ajouter une barre de navigation qui permet de regrouper les informations par thème (mesures, graphiques GPIO, configuration).

Avec Bootstrap, elle est gérée par les classes .nav et .nav-tabs. Chaque onglet (tab) est composé d’une balise li.

L’attribut active permet d’indiquer l’onglet actif par défaut.

Une balise a permet d’indiquer le titre de l’onglet et surtout d’indiquer vers quel élément se rendre lorsqu’on clique (href=”#iddestination”).

L’attribut data-toggle rend “cliquable” l’onglet.

ul#tab.nav.nav-tabs
  li.active
    a(href="#tab_mesures" data-toggle="tab") Mesures
  li
    a(href="#tab_graphs" data-toggle="tab") Graphiques
  li
    a(href="#tab_gpio" data-toggle="tab") GPIO  
  li
   a(href="#tab_configuration" data-toggle="tab") Configuration

Ensuite il ne reste plus qu’à créer une div de classe tab-content puis une div tab-pane pour chaque onglet.

Ce qui donne par exemple

div.tab-content
  div#tab_mesures.tab-pane
    h1 Onglet Mesures
  div#tab_graphs
    h1 Onglet Graphiques

Pour rendre l’affichage plus sympa, on peut aussi ajouter une animation lorsqu’on passe d’un onglet à l’autre :

div#tab_mesures.tab-pane.fade.in

De même, on indique le premier onglet actif par défaut (pour la première ouverture de la page).

div#tab_mesures.tab-pane.fade.in.active

Il n’y a rien de plus à programmer pour créer une barre de navigation et naviguer d’un onglet à l’autre !

Ajout d’une table Bootstrap-table

Bootstrap-table est un plugin Bootstrap très connu et très puissant pour créer des tables et réaliser des opérations (page du projet sur GitHub). Elle permet entre autre d’être actualisée très facilement). Pour le moment, on va juste la poser dans l’onglet Mesures.

On créé un champ table. On va simplement placer une balise th pour chaque colonne.

On affecte à chaque colonne une source de données data-field qui sera associé à une clé du JSON envoyé par le code Arduino.

Enfin on attribue un data-formatter, c’est une fonction qui est appelée à chaque fois qu’une ligne est ajoutée au tableau et qui permet de mettre en forme le contenu.

Nous verrons dans le prochain tutoriel comment remplir cette table.

table(id='tab_mesures' data-toggle='table' data-show-colunns='true')
  thead
    tr
      th(data-field='mesure' data-align='left' data-sortable='true' data-formatter='labelFormatter') Mesure
      th(data-field='valeur' data-align='left' data-sortable='true' data-formatter='valueFormatter') Valeur
      th(data-field='precedente' data-align='left' data-sortable='true' data-formatter='vpFormatter') Valeur Précédente

Voici ce qu’on va obtenir (avec le thème Bootstrap par défaut).

esp8266 bootstrap web server nav tab barre navigation onglets

Bas de page (footer)

Fonction gadget, mais utile pour apprendre d’autres notions d’HTML, un bas de page (footer) fixé. Le bas de page ne bouge pas lorsqu’on passe d’un onglet à l’autre. Vous pouvez utiliser cette zone pour indiquer toutes sortes d’informations (date, heure, qualité de réception Wi-Fi, charge CPU…) Pour fixer le bas de page, on va juste ajouter un ligne (row) et lui donner les paramètres dans l’attribut HTML style

  • position:absolute la ligne (row) est positionnée de manière absolue
  • bottom:0, en bas de la page à 0 pixels du bords
  • width:100%, et cette ligne prend toute la largeur du navigateur disponible

Dans cette ligne on va ajouter 3 colonnes. La première va contenir une image (mon logo  🙂 ), et deux liens. Le contenu n’est pas important, ce qui est important est de voir comment rendre le contenu responsive, c’est à dire qu’il s’adapte à tous les écrans et comment on charge une image depuis la zone SPIFFS.

Pour afficher une image, on ajoute une balise img, dans la source src, on indique le chemin sous la forme repertoire/image.jpg. On peut aussi imposer la taille width=”30″(largeur de 30 pixels) et height=”30″ (hauteur).

Bootstrap utilise un système de grilles. Si on diminue la taille du navigateur, les cellules vont commencer à se réduire puis et se mettre les unes sous les autres. Pour cela, on utilise les classes col-md-x.
La somme des x ne doit pas dépasser 12 (l’écran est divisé en 12 colonnes). Pour s’adapter aux plus petits écrans (smartphone notamment), on peut par exemple combiner avec une classe col-xs-x.
C’est une approche très simpliste mais ça fonctionne et ce n’est pas l’objectif principal de l’article.

row(style="position:absolute; bottom:0; width:100%")
  .col-xs-2.col-md-2
    img(src="img/logo.png" width="30" height="30")
  .col-xs-5.col-md-5
    p
      a(href='https://www.projetsdiy.fr') Version francaise : www.projetsdiy.fr
  .col-xs-5.col-md-5
    p
      a(href='http://www.diyprojects.io') English version : www.diyprojects.io

Voici le rendu obtenu pour différentes largeurs d’écran. Taille normale

footer bas de page ecran large

Taille réduite.

 footer bas de page ecran reduit

Smartphone (simulée)

footer bas de page ecran smartphonereduit

Comment changer le thème Bootstrap sans actualiser la page

Nous allons introduire les premières notions de javascript et de jquery pour changer le thème bootstrap.

Nous allons utiliser le framework Bootstrap pour créer l’interface HTML

A LIRE AUSSI :
Interface HTML pour ESP8266. Améliorer le design avec Bootstrap

ainsi que les thèmes Bootswatch mis à disposition par BootstrapCDN pour améliorer le design de l’interface

A LIRE AUSSI :
Interface HTML pour ESP8266. Changer de thème Bootstrap avec Bootswatch et bootstrapCDN

On va commencer par modifier la liste de sélection.

Le champ caché qui servait à stocker le thème sélectionné puis envoyé au code Arduino à l’aide d’une requête HTTP de type POST n’est plus utile.

On va intercepter un clic sur la classe change-style-menu-item et on va récupérer le style sélectionné contenu dans l’attribut rel.

Le code HTML de la boite de sélection devient donc le suivant.

.btn-group
  button#labelTheme.btn.btn-default Theme
  button.btn.btn-default.dropdown-toggle(data-toggle='dropdown')
    span.caret
  ul.dropdown-menu
    li
      a.change-style-menu-item(href='#' rel='bootstrap') Boostrap
    ....

Maintenant on ajoute un script. Lorsqu’on intercepte un clic sur la classe change-style-menu-item à l’aide d’une commande jQuery.

On récupère la valeur de l’attribut rel avec la commande $(this).attr(‘rel’).

This contient l’objet qui vient d’être cliqué. On accède à l’attribut avec la méthode attr()

jQuery(function($){
  ('body').on('click', '.change-style-menu-item', function() {
    var theme_name = $(this).attr('rel');
    console.log("Changement de theme " + theme_name);
    var theme_url = get_themeUrl(theme_name);
    console.log("URL theme : " + theme_url);
    set_theme(theme_url);
  });
});

Pour comprendre et voir ce qui se passe, vous pouvez ouvrir les outils pour développeurs de votre navigateur et mettre un point d’arrêt.

esp8266 web server change theme bootstrap recupere attribut rel

Maintenant qu’on connait le thème sélectionné, on construit l’URL qui pointe vers le site internet correspondant.

On en profite pour actualiser le libellé du bouton en y incluant le nom du nouveau thème.

Enfin, si le stockage dans la base de données locale est disponible (cela va dépendre du navigateur utilisé, pas de l’ESP8266), on enregistre le thème.

function get_themeUrl(theme_name){
  $('#labelTheme').html("Thème : " + theme_name);
  var url_theme = "";
  if ( theme_name === "bootstrap" ) {
    url_theme = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css";
  } else {
    url_theme = "https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/" + theme_name + "/bootstrap.min.css";
  }
  if (supports_storage) {
    // Enregistre le theme sélectionné en local - save into the local database the selected theme
    localStorage.theme = theme_name;
  }
  return url_theme;
}

Maintenant il ne reste plus qu’à reconstruire la page avec ce thème. Pour que cela puisse fonctionner, il faut ajouter un attribut title=”main” dans le lien vers le CDN Bootstrap

link(href='https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/superhero/bootstrap.min.css', rel='stylesheet' title="main")

On modifie le href du link[title=”main”].

function set_theme(theme_url) {
  $('link[title="main"]').attr('href', theme_url);
}

Il nous reste encore deux fonctions à écrire, la première retourne vrai si le stockage en ligne est disponible

function supports_html5_storage(){
  try {
    return 'localStorage' in window && window['localStorage'] !== null;
  } catch (e) {
    return false;
  }
}

Et enfin la dernière fonction qui permet de recharger le thème s’il a été enregistré dans la base locale.

var supports_storage = supports_html5_storage();
  if (supports_storage) {
    var theme = localStorage.theme;
    console.log("Recharge le theme " + theme);
    if (theme) {
      set_theme(get_themeUrl(theme));
    }
}

Voilà, maintenant tout se passe directement sur le navigateur, l’ESP8266 n’est plus chargé de reconstruire la page à chaque changement d thème, ce rôle est dévolu au navigateur.

Code complet de la première partie

logo github

Code source

Voici les codes Arduino et HTML. Rien n’est encore fonctionnel à ce stade du développement (à l’exception du changement dynamique du thème).

Code Arduino compatible ESP8266

Créez un nouveau projet et collez le code suivant.

  • On appel la librairie FS.h qui permet d’accéder de monter le système de fichier SPIFFS
  • Pour pouvoir accéder aux fichiers stockés dans la zone SPIFFS, il faut initialiser la librairie en appelant la fonction SPIFFS.begin() dans le setup()
  • On indique au serveur les pages et les ressources statiques qui doivent être misent à disposition du navigateur, pour le moment /img et la racine du site (/) qui pointe vers la page index.html.

N’oubliez pas de changer le SSID et le PASSWORD du réseau WiFi dans le code avant de téléverser.

#include <ESP8266WebServer.h>
#include <DHT.h>
#include <Adafruit_BMP085.h>
#include <FS.h>

#define ssid      "xxxx"      // WiFi SSID
#define password  "xxxx"      // 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   pa = 0;

// Création des objets / create Objects
DHT dht(DHTPIN, DHTTYPE);
Adafruit_BMP085 bmp;
ESP8266WebServer server ( 80 );

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() );

  if (!SPIFFS.begin())
  {
    // Serious problem
    Serial.println("SPIFFS Mount failed");
  } else {
    Serial.println("SPIFFS Mount succesfull");
  }

  server.serveStatic("/img", SPIFFS, "/img");
  server.serveStatic("/", SPIFFS, "/index.html");

  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();
  pa = bmp.readPressure() / 100.0F;
  delay(100);
}

Sélectionnez l’ESP8266 (ici Wemos D1 mini) puis téléversez le projet dans l’ESP8266.

Code PUG de l’interface HTML

Avant de commencer, je vous conseille de lire ce tutoriel qui explique comment développer facilement des interfaces HTML à l’aide de Pug.

A LIRE AUSSI :
Découverte du langage Pug (Jade) pour développer des interfaces HTML avec VSCode ou Geany

Aller dans le répertoire du projet et créer un nouveau dossier data. Créer un sous dossier img

Créer un nouveau document sous Geany ou VSCode et collez le code suivant.

Enregistrer le fichier en lui donnant le nom index.pug à la racine du dossier data.

Convertir le code PUG en HTML comme ceci

  • Sur Geany, compilez le code HTML à l’aide de pug-cli en appuyant sur la touche (F8)
  • Sur VSCode :
    • Créer un nouveau fichier,
    • Coller le code PUG et
    • Enregistrer le fichier sous le nom index.html
    • Sélectionner tout le code (Ctrl + A)
    • Convoquer la palette (CMD + SHIFT + P) puis exécuter pug2html
    • Enregistrer
html(charset='UTF-8')
    head
      meta( name='viewport')
      script(src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js')
      script(src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js')
      link(rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.0/bootstrap-table.min.css")
      script(src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.0/bootstrap-table.min.js")
      link(href='https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/superhero/bootstrap.min.css', rel='stylesheet' title="main")
      title Demo ESP8266 SPIFFS + Boostrap - www.projetsdiy.fr
    body
      .container-fluid
        h1 ESP8266 Webserver + SPIFFS + Bootstrap
        ul#tab.nav.nav-tabs
          li.active
            a(href="#tab_mesures" data-toggle="tab") Mesures
          li
            a(href="#tab_graphs" data-toggle="tab") Graphiques
          li
            a(href="#tab_gpio" data-toggle="tab") GPIO  
          li
            a(href="#tab_configuration" data-toggle="tab") Configuration
        div.tab-content
        
          div#tab_mesures.tab-pane.fade.in.active          
            
            h2 Mini station m&eacute;t&eacute;o (DHT22 + BMP180)
            ul.nav.nav-pills
                li.active
                    a(href='#')
                        #temperature.span.badge.pull-right -
                        |  Temp&eacute;rature
                li
                    a(href='#')
                        #humidite.span.badge.pull-right -
                        |  Humidit&eacute;
                li
                    a(href='#')
                        #pa.span.badge.pull-right -
                        |  Pression atmosph&eacute;rique
            table(id='tab_mesures' data-toggle='table' data-show-colunns='true')
                thead
                    tr
                        th(data-field='mesure' data-align='left' data-sortable='true' data-formatter='labelFormatter') Mesure
                        th(data-field='valeur' data-align='left' data-sortable='true' data-formatter='valueFormatter') Valeur
                        th(data-field='precedente' data-align='left' data-sortable='true' data-formatter='vpFormatter') Valeur Pr&eacute;c&eacute;dente
          div#tab_graphs.tab-pane.fade
            h2 Graphs
            
          div#tab_gpio.tab-pane.fade
            h2 GPIO
            .row
                .col-xs-6.col-md-4
                  h4.text-left
                    | D5
                    #D5_etat.span.badge OFF
                .col-xs-6.col-md-4
                  #D5_On.button.btn.btn-success.btn-lg(type='button') ON
                .col-xs-6.col-md-4
                  #D5_Off.button.btn.btn-danger.btn-lg(type='button') OFF
                .col-xs-6.col-md-4
                  h4.text-left
                    | D6
                    #D6_etat.span.badge OFF
                .col-xs-6.col-md-4
                  #D6_On.button.btn.btn-success.btn-lg(type='button') ON
                .col-xs-6.col-md-4
                  #D6_Off.button.btn.btn-danger.btn-lg(type='button') OFF
                .col-xs-6.col-md-4
                  h4.text-left
                    | D7
                    #D7_etat.span.badge OFF
                .col-xs-6.col-md-4
                  #D7_On.button.btn.btn-success.btn-lg(type='button') ON
                .col-xs-6.col-md-4
                  #D7_Off.button.btn.btn-danger.btn-lg(type='button') OFF
                .col-xs-6.col-md-4
                  h4.text-left
                    | D8
                    #D8_etat.span.badge OFF
                .col-xs-6.col-md-4
                  #D8_On.button.btn.btn-success.btn-lg(type='button') ON
                .col-xs-6.col-md-4
                  #D8_Off.button.btn.btn-danger.btn-lg(type='button') OFF
          div#tab_configuration.tab-pane.fade
            h2 Configuration        

            .btn-group
              button#labelTheme.btn.btn-default Theme
              button.btn.btn-default.dropdown-toggle(data-toggle='dropdown')
                span.caret
              ul.dropdown-menu
                li
                    a.change-style-menu-item(href='#' rel='bootstrap') Boostrap
                li
                    a.change-style-menu-item(href='#' rel='cerulean') Cerulean
                li
                    a.change-style-menu-item(href='#' rel='cosmo') Cosmo
                li
                    a.change-style-menu-item(href='#' rel='cyborg') Cyborg
                li
                    a.change-style-menu-item(href='#' rel='darkly') Darkly
                li
                    a.change-style-menu-item(href='#' rel='flatly') Flatly
                li
                    a.change-style-menu-item(href='#' rel='journal') Journal
                li
                    a.change-style-menu-item(href='#' rel='lumen') Lumen
                li
                    a.change-style-menu-item(href='#' rel='paper') Paper
                li
                    a.change-style-menu-item(href='#' rel='readable') Readable
                li
                    a.change-style-menu-item(href='#' rel='sandstone') Sandstone
                li
                    a.change-style-menu-item(href='#' rel='simplex') Simplex
                li
                    a.change-style-menu-item(href='#' rel='slate') Slate
                li
                    a.change-style-menu-item(href='#' rel='spacelab') Spacelab
                li
                    a.change-style-menu-item(href='#' rel='superhero') Superhero
                li
                    a.change-style-menu-item(href='#' rel='united') United
                li
                    a.change-style-menu-item(href='#' rel='yeti') Yeti  
        .row(style="position:absolute; bottom:0; width:100%")
          .col-xs-2.col-md-2
            img(src="img/logo.png" width="30" height="30")
          .col-xs-5.col-md-5
            p
              a(href='https://www.projetsdiy.fr') Version francaise : www.projetsdiy.fr
          .col-xs-5.col-md-5
            p
              a(href='http://www.diyprojects.io') English version : www.diyprojects.io
        
      script().     
        // Un nouveau thème est sélectionné - New theme selected
        jQuery(function($){
          $('body').on('click', '.change-style-menu-item', function() {
            var theme_name = $(this).attr('rel');
            console.log("Changement de theme " + theme_name);
            var theme_url = get_themeUrl(theme_name);
            console.log("URL theme : " + theme_url);
            set_theme(theme_url);
          });
        });
        // Recupere l'adresse du theme - Get theme URL
        function get_themeUrl(theme_name){
          $('#labelTheme').html("Th&egrave;me : " + theme_name);
          var url_theme = "";
          if ( theme_name === "bootstrap" ) {
            url_theme = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css";
          } else {
            url_theme = "https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/" + theme_name + "/bootstrap.min.css";
          }
          if (supports_storage) {
            // Enregistre le theme sélectionné en local - save into the local database the selected theme
            localStorage.theme = theme_name;
          }
          return url_theme;
        }
        // Applique le thème - Apply theme
        function set_theme(theme_url) {
          $('link[title="main"]').attr('href', theme_url);
        }
        // Stockage local disponible ? - local storage available ?
        function supports_html5_storage(){
          try {
            return 'localStorage' in window && window['localStorage'] !== null;
          } catch (e) {
            return false;
          }
        }

Code HMTL de l’interface de la station météo

Vous pouvez aussi créer directement le fichier index.html dans le répertoire data et coller le code suivant. Le code ci-dessous a été généré à partir du code Pug précédent.

<!DOCTYPE html>
<html charset="UTF-8">
  <head>
    <meta name="viewport">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.0/bootstrap-table.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.0/bootstrap-table.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/superhero/bootstrap.min.css" rel="stylesheet" title="main">
    <title>Demo ESP8266 SPIFFS + Boostrap - www.projetsdiy.fr</title>
  </head>
  <body>
    <div class="container-fluid">
      <h1>Demo Webserver ESP8266 + Bootstrap</h1>
      <ul class="nav nav-tabs" id="tab">
        <li class="active"><a href="#tab_mesures" data-toggle="tab">Mesures</a></li>
        <li><a href="#tab_graphs" data-toggle="tab">Graphiques</a></li>
        <li><a href="#tab_gpio" data-toggle="tab">GPIO  </a></li>
        <li><a href="#tab_configuration" data-toggle="tab">Configuration</a></li>
      </ul>
      <div class="tab-content">
        <div class="tab-pane fade in active" id="tab_mesures">         
          <h2>Mini station m&eacute;t&eacute;o (DHT22 + BMP180)</h2>
          <ul class="nav nav-pills">
            <li class="active"><a href="#">
                <div class="span badge pull-right" id="temperature">-</div> Temp&eacute;rature</a></li>
            <li><a href="#">
                <div class="span badge pull-right" id="humidite">-</div> Humidit&eacute;</a></li>
            <li><a href="#">
                <div class="span badge pull-right" id="pa">-</div> Pression atmosph&eacute;rique</a></li>
          </ul>
          <table id="tab_mesures" data-toggle="table" data-show-colunns="true">
            <thead>
              <tr>
                <th data-field="mesure" data-align="left" datsortable="true" data-formatter="labelFormatter">Mesure</th>
                <th data-field="valeur" data-align="left" datsortable="true" data-formatter="valueFormatter">Valeur</th>
                <th data-field="precedente" data-align="left" datsortable="true" data-formatter="vpFormatter">ValeuPr&eacute;c&eacute;dente</th>
              </tr>
            </thead>
          </table>
        </div>
        <div class="tab-pane fade" id="tab_graphs">
          <h2>Graphs</h2>
        </div>
        <div class="tab-pane fade" id="tab_gpio">
          <h2>GPIO</h2>
          <div class="row">
            <div class="col-xs-6 col-md-4">
              <h4 class="text-left">D5
                <div class="span badge" id="D5_etat">OFF</div>
              </h4>
            </div>
            <div class="col-xs-6 col-md-4">
              <div class="button btn btn-success btn-lg" id="D5_On" type="button">ON</div>
            </div>
            <div class="col-xs-6 col-md-4">
              <div class="button btn btn-danger btn-lg" id="D5_Off" type="button">OFF</div>
            </div>
            <div class="col-xs-6 col-md-4">
              <h4 class="text-left">D6
                <div class="span badge" id="D6_etat">OFF</div>
              </h4>
            </div>
            <div class="col-xs-6 col-md-4">
              <div class="button btn btn-success btn-lg" id="D6_On" type="button">ON</div>
            </div>
            <div class="col-xs-6 col-md-4">
              <div class="button btn btn-danger btn-lg" id="D6_Off" type="button">OFF</div>
            </div>
            <div class="col-xs-6 col-md-4">
              <h4 class="text-left">D7
                <div class="span badge" id="D7_etat">OFF</div>
              </h4>
            </div>
            <div class="col-xs-6 col-md-4">
              <div class="button btn btn-success btn-lg" id="D7_On" type="button">ON</div>
            </div>
            <div class="col-xs-6 col-md-4">
              <div class="button btn btn-danger btn-lg" id="D7_Off" type="button">OFF</div>
            </div>
            <div class="col-xs-6 col-md-4">
              <h4 class="text-left">D8
                <div class="span badge" id="D8_etat">OFF</div>
              </h4>
            </div>
            <div class="col-xs-6 col-md-4">
              <div class="button btn btn-success btn-lg" id="D8_On" type="button">ON</div>
            </div>
            <div class="col-xs-6 col-md-4">
              <div class="button btn btn-danger btn-lg" id="D8_Off" type="button">OFF</div>
            </div>
          </div>
        </div>
        <div class="tab-pane fade" id="tab_configuration">
          <h2>Configuration        </h2>
          <div class="btn-group">
            <button class="btn btn-default" id="labelTheme">Theme</button>
            <button class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
            <ul class="dropdown-menu">
              <li><a class="change-style-menu-item" href="#" rel="bootstrap">Boostrap</a></li>
              <li><a class="change-style-menu-item" href="#" rel="cerulean">Cerulean</a></li>
              <li><a class="change-style-menu-item" href="#" rel="cosmo">Cosmo</a></li>
              <li><a class="change-style-menu-item" href="#" rel="cyborg">Cyborg</a></li>
              <li><a class="change-style-menu-item" href="#" rel="darkly">Darkly</a></li>
              <li><a class="change-style-menu-item" href="#" rel="flatly">Flatly</a></li>
              <li><a class="change-style-menu-item" href="#" rel="journal">Journal</a></li>
              <li><a class="change-style-menu-item" href="#" rel="lumen">Lumen</a></li>
              <li><a class="change-style-menu-item" href="#" rel="paper">Paper</a></li>
              <li><a class="change-style-menu-item" href="#" rel="readable">Readable</a></li>
              <li><a class="change-style-menu-item" href="#" rel="sandstone">Sandstone</a></li>
              <li><a class="change-style-menu-item" href="#" rel="simplex">Simplex</a></li>
              <li><a class="change-style-menu-item" href="#" rel="slate">Slate</a></li>
              <li><a class="change-style-menu-item" href="#" rel="spacelab">Spacelab</a></li>
              <li><a class="change-style-menu-item" href="#" rel="superhero">Superhero</a></li>
              <li><a class="change-style-menu-item" href="#" rel="united">United</a></li>
              <li><a class="change-style-menu-item" href="#" rel="yeti">Yeti  </a></li>
            </ul>
          </div>
        </div>
      </div>
      <div class="row" style="position:absolute; bottom:0; width:100%">
        <div class="col-xs-2 col-md-2"><img src="img/logo.png" width="30" height="30"></div>
        <div class="col-xs-5 col-md-5">
          <p><a href="https://www.projetsdiy.fr">Version francaise : www.projetsdiy.fr</a></p>
        </div>
        <div class="col-xs-5 col-md-5">
          <p><a href="http://www.diyprojects.io">English version : www.diyprojects.io</a></p>
        </div>
      </div>
    </div>
    <script>    
      // Changement du thème - Change current theme
      // Adapté de - Adapted from : https://wdtz.org/bootswatch-theme-selector.html
      var supports_storage = supports_html5_storage();
      if (supports_storage) {
        var theme = localStorage.theme;
        if ( typeof theme != 'undefined' ) {
          console.log("Recharge le theme " + theme);
          set_theme(get_themeUrl(theme));
        }
      }
      
      // Un nouveau thème est sélectionné - New theme selected
      jQuery(function($){
        $('body').on('click', '.change-style-menu-item', function() {
          var theme_name = $(this).attr('rel');
          console.log("Changement de theme " + theme_name);
          var theme_url = get_themeUrl(theme_name);
          console.log("URL theme : " + theme_url);
          set_theme(theme_url);
        });
      });
      // Recupere l'adresse du theme - Get theme URL
      function get_themeUrl(theme_name){
        $('#labelTheme').html("Th&egrave;me : " + theme_name);
        var url_theme = "";
        if ( theme_name === "bootstrap" ) {
          url_theme = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css";
        } else {
          url_theme = "https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/" + theme_name + "/bootstrap.min.css";
        }
        if (supports_storage) {
          // Enregistre le theme sélectionné en local - save into the local database the selected theme
          localStorage.theme = theme_name;
        }
        return url_theme;
      }
      // Applique le thème - Apply theme
      function set_theme(theme_url) {
        $('link[title="main"]').attr('href', theme_url);
      }
      // Stockage local disponible ? - local storage available ?
      function supports_html5_storage(){
        try {
          return 'localStorage' in window && window['localStorage'] !== null;
        } catch (e) {
          return false;
        }
      }
    </script>
  </body>
</html>

Téléverser le répertoire data sur le système de fichier SPIFFS

Le projet doit avoir (environ) cette arborescence

Arborescence du projet ESP8266 de station météo avec le dossier data qui contient les fichiers html de l'interface WEB à téléverser dans la zone SPIFFS

Fermer le moniteur série.

Allez dans le menu Outils et sélectionnez la vitesse d’upload speed de 921600 bauds.

Enfin, allez dans le menu Outils puis cliquez sur ESP8266 Sketch Data Upload. L’opération démarre immédiatement.

esp8266 upload spiffs sketch data ide arduino

Une fois le téléchargement achevé, repassez la vitesse d’upload à 115200 bauds et ouvrez le terminal pour vérifier que l’ESP8266 est correctement connecté au réseau WiFi.
Récupérez l’adresse IP.
Ouvrez un navigateur et saisissez l’adresse IP de l’ESP8266.

Bravo, ça fonctionne !

esp8266 spiffs wemos d1 mini web server bootstrap dht22 bmp180

En résumé, nous avons vu comment créer une interface HTML de toute pièce à l’aide du langage Pug.

On peut changer dynamiquement le thème Bootstrap et stocker le choix dans la base de données du navigateur pour le prochain chargement.

On a mis en place une barre de navigation qui permet de regrouper les éléments par thèmes.

On sait comment utiliser la zone SPIFFS pour y stocker tous les fichiers nécessaires au fonctionnement de l’interface. Il reste encore beaucoup à faire !

Accéder rapidement aux autres parties du projet

Voici les liens pour poursuivre le projet de station météo

Vous êtes ici

A LIRE AUSSI :
Projet station météo ESP8266 (Partie 1). Créer l'interface HTML, stockage SPIFFS
A LIRE AUSSI :
Projet station météo ESP8266 (Partie 2). Piloter le code Arduino depuis l'interface HTML
A LIRE AUSSI :
Projet station météo ESP8266 (Partie 3). Récupérer l'heure avec NTPClient et stockage SPIFFS
A LIRE AUSSI :
Projet station météo ESP8266 (Partie 4). ArduinoJson, charger, enregistrer des fichiers (SPIFFS)
A LIRE AUSSI :
Projet station météo ESP8266 (Partie 5). Afficher des jauges et graphiques Google Charts
Avez-vous aimé cet article ?
[Total: 2 Moyenne: 5]
Partager sur facebook
Partager sur twitter
Partager sur linkedin
Partager sur pinterest
Partager sur email
Partager sur telegram

Vous avez aimé ce projet ? Ne manquez plus aucun projet en vous abonnant à notre lettre d’information hebdomadaire!

quel modèle esp8266 choisir
Quel modèle d'ESP8266EX choisir en 2020 ?
guide choix esp32 development board
Quel ESP32 choisir en 2020 ?

Vous rencontrez un problème avec ce sujet ?

Peut-être que quelqu’un a déjà trouvé la solution, visitez le forum avant de poser votre question

16 Commentaires
  1. L’article que je cherchais, surtout la base, comment utiliser cette fameuse mémoire interne pour y stocker des pages bss ou autres.
    Le seul truc c’est que j’ai beau avoir créé 50 dossiers tools et y avoir collé le contenu de l’archive à télécharger à divers endroits possibles cette option n’apparaît jamais dans mon IDE Arduino ….

    • Bonjour Yann. Même après avoir relancé l’IDE Arduino ? Sur quel système travaillez vous (Windows, macOS ou Linux). Les Tools doivent simplement être déposés dans le dossier Arduino, le même qui est utilisé pour installer des librairies.

  2. Re, encore moi, la ligne du tableau contenant “No matching found”, elle sort d’où ? du script bootstrat-table ?

  3. Merci. J’étais en train transpirer à tout coder en char*… 😀
    Et là! paf ça envoi ^^

  4. bonjours , Merci c’est un magnifique tuto

  5. Bonjour,

    Après mise en place du tuto sur une carte wemos D1, la lecture des fichiers js, css et html depuis la zone spiffs me pose problème.
    En effet, la lecture des fichiers est très longue (plus de 30 secondes), ce qui fait que la plupart du temps, le navigateur décroche avant la fin.
    Je testé avec IE, Chrome et Firefox et c’est le même problème pour les 3.
    Dans le code de la librairie esp8266, j’ai mis à jour le code concernant la gestion de spiffs (0.3.4 -> 0.3.7) mais ça n’a rien changé !
    Une idée de l’origine du problème ?

  6. Bonjour,

    Il y a un bug dans le source publié pour l’ESP8266.
    En effet, en ligne 10, GPIOPIN est déclaré comme tableau de 4 valeurs.

    Hors, en ligne 23,le compteur x s’étend de 0 à 4 donc 5 valeurs au lieu de 4.

    Il faut remplacer x < 5 par x < 4 à la ligne 21. 10 : const uint8_t GPIOPIN[4] = {D5,D6,D7,D8}; // Led 21 : for ( int x = 0 ; x < 5 ; x++ ) { 22 : pinMode(GPIOPIN[x], OUTPUT); 23 : } Votre tutoriel m'a été très utile. Merci et bonne continuation. Thoma

  7. Hello,
    Je reprends les tutos de zéro ^^.
    J’ai un ESP8266-01 Version Noir, mais je n’ai pas réussi a trouver la taille de la mémoire :/
    Est-ce que tu connais aussi la manipulation a suivre pour supprimer les fichiers de la zone SPIFFS ?

    A plus tard, et encore congratulation pour tout le job que tu a fait et fera.

Laisser un commentaire

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.