Domotique et objets connectés à faire soi-même

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

esp8266 weather station project pug html interface spiffs
Meilleur deal à : banggood.com

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

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

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

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.

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.

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.

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 :

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="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.0/bootstrap-table.min.css")
  script(src="http://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).

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

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='http://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

Taille réduite.

Smartphone (simulée)

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

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

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.

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

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.

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.

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

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="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.0/bootstrap-table.min.css")
      script(src="http://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='http://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="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.0/bootstrap-table.min.css">
    <script src="http://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="http://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

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.

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 !

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

Avez-vous aimé cet article ?
[Total: 2 Moyenne: 5]
Exit mobile version