Aller au contenu


ESP01 Contrôle des diodes WS2812 à l’aide de l’IDE Arduino-Part6

Niveau:3

Introduction:

Dans cette article, nous allons mettre en place un minuteur pour l’arrêt programmé de notre bandeau LED. Nous partirons de la version esp8266_webinterface_1.5.2.zip et nous créerons une deuxième page pour la configuration du minuteur et du choix de la couleur.

Ajout du client NTP:

Nous allons utiliser les bibliothèques suivantes:

<TimeLib.h> : https://github.com/PaulStoffregen/Time

<NTPClient.h> : https://github.com/arduino-libraries/NTPClient

et ajout des fonctionnalités wifiUdp.

#include <WiFiUdp.h> //Inclusion bibliothèque pour la gestion de l'User Datagram Protocol
#include <NTPClient.h> //Inclusion bibliothèque gestion serveur NTP
#include <TimeLib.h> //Inclusion bibliothèque gestion des fonctionnalités de chronométrage

Affichage de la date et de l’heure dans le client web:

Dans notre programme:

Nous allons ajouter une variable globale pour stocker la valeur de la date et de l’heure. Cette variable sera transmise au client web pour l’afficher dans la page web.

String DateHeure = "";

La varaible doit être ajouter après l’ensemble des définitions.

Maintenant nous allons initialisé nos bibliothèques avec leurs paramètres.

WiFiUDP ntpUDP;
// You can specify the time server pool and the offset (in seconds, can be
// changed later with setTimeOffset() ). Additionaly you can specify the
// update interval (in milliseconds, can be changed using setUpdateInterval() ).
NTPClient timeClient(ntpUDP, "europe.pool.ntp.org", 3600, 60000);

Ajouter l’initialisation après l’initialisation de la bibliothèque du serveur web (ESP8266WebServer server = ESP8266WebServer(HTTP_PORT);)

Dans le sous-programme setup ajouter les lignes suivantes:

server.on("/DateHeure", srv_handle_dateheure);

Au-dessus du démarrage du serveur web (server.begin();).

timeClient.begin();

A la fin du sous-programme setup.

Nous allons créer un sous-programme Date_Heure qui se mettra à jour dans le programme sous-programme loop.

void Date_Heure(){
 String temp="Date: ";
 timeClient.update();
 if (day()<10){
 temp+="0";
 temp+=day();
 }else temp+=day();
 temp+="/";
 if (month()<10){
 temp+="0";
 temp+=month();
 }else temp+=month();
 temp+="/";
 temp+=year();
 temp+=" Heure: ";
 DateHeure =temp+timeClient.getFormattedTime();
 setSyncProvider(getNtpTime);
}

Puis la fonction getNtpTime.

/*-------- NTP code ----------*/
time_t getNtpTime(){
 return (timeClient.getEpochTime()); 
}

Et dans le sous-programme loop,nous ajoutons l’appel à DateHeure.

Date_Heure();

Dans la partie du programme serveur web nous ajoutons l’envois de la chaîne dateheure.

void srv_handle_dateheure() {
 server.send(200,"text/plain", dateheure);
}

Notre programme est terminé. Nous allons modifier notre client web pour afficher la date et l’heure. Vous pouvez envoyer le programme vers votre ESP.

Dans notre client web:

Dans le fichier index.html, nous ajoutons la ligne ci dessous en dessous du titre.

 <h2 id="dateheure"></h2><br />

Puis nous ajoutons le style H2 dans l’entête.

 h2 {
 color:#454545;
 text-align:center;
 font-size: 100%; 
 }

Dans le fichier main.js, nous ajoutons une fonction qui viendra lire la valeur à intervalle régulier avec le code ci dessous.

function rafraichir() { 
 var date = new Date(),secondes = date.getSeconds(); 
 
 /* Fonction ' SECONDES ' */
 if (secondes <= 9) {
 secondes = '0' + secondes;
 }
 
 ntp();
 }

setInterval(rafraichir, 1000);

function ntp() {
 var xhttp = new XMLHttpRequest();
 xhttp.onreadystatechange = function() {
 if (xhttp.readyState == 4 && xhttp.status == 200) {
 document.getElementById('dateheure').innerHTML = xhttp.responseText;
 }
 };
 xhttp.open('GET', 'DateHeure', true);
 xhttp.send();
}

Maintenant vous pouvez envoyer le client web vers votre ESP.

Fichier et copie d’écran:

Voici le fichier source de ce chapitre: esp8266_webinterface_1.6.0_alpha.zip

Création de la page de configuration:

Dans cette partie, nous allons créer un fichier css pour regrouper les styles de nos pages, modifier la page index.html et main.js; puis créer le fichier config.html. J’ai profité de ces modifications pour rationaliser mes pages. Je ne rentrerai pas dans les détails des modifications car cela prendrait un peu de temps, alors je vous mets juste les copies d’écrans et le fichier compressé source.

Voici le fichier source: esp8266_webinterface_1.6.0_beta.zip

Mise en place du minuteur:

Nous utiliserons la version 1.6.0 bêta. Notre minuteur aura une valeur comprise en 0 et 255 minutes soit environ 4h30mn.

Modification du programme:

Création de nos variables globales:

String AffMinuteur = 0; // Variable globale de la valeur du minuteur pour client web
int MinuteurStop=0; // Variable globale de la valeur du minuteur 
bool CdeOnOff =0; // Variable cde marche arrêt
unsigned long HeureNow = 0; // Variable globale de l'heure du lancement de l'arrêt

Nous allons créer le programme de la minuterie dans le sous-programme date_heure:

Le programme ci-dessous permet de gérer l’arrêt et la variable d’affichage du minuteur.

 // Minuteur
 if (CdeOnOff==0){
 if ((HeureNow+MinuteurStop*60)<timeClient.getEpochTime()){
 if (EEPROM.read(ADRESS_ON_OFF)==0) {
 ws2812fx.stop(); // Arrêt du bandeau
 AffMinuteur="Minuteur temps restant: 0 s";
 HeureNow=0;
 }
 
 }
 else {
 if ((((HeureNow+MinuteurStop*60)-timeClient.getEpochTime())/60)>0){
 temp=((((HeureNow+MinuteurStop*60)-timeClient.getEpochTime())/60)+1);
 AffMinuteur="Minuteur temps restant: ";
 AffMinuteur+=temp;
 AffMinuteur+=" mn";
 }
 else{
 temp=(((HeureNow+MinuteurStop*60)-timeClient.getEpochTime()));
 AffMinuteur="Minuteur temps restant: ";
 AffMinuteur+=temp;
 AffMinuteur+=" s";
 } 
 }
}

Dans le sous-programme void srv_handle_set(), nous allons ajouter la transmission de la valeur de la minuterie (ta timer arrêt)depuis le client web vers notre programme:

if(server.argName(i) == "ta") { // Valeur de la minuterie 0-255 mn pour arrêt en minutes
 MinuteurStop=(int)strtol(&server.arg(i)[0], NULL, 10);
 }

Et modifier la commande d’arrêt sur le serveur. Voici la zone du programme à modifier.

 if(server.argName(i) == "p") { // Marche arrêt bandeau LED
 if(server.arg(i)[0] == 'm') {
 ws2812fx.start();
 EEPROM.write(ADRESS_ON_OFF,1); // Sauvegarde LED en marche
 HeureNow =0;
 CdeOnOff=1;
 } else if (server.arg(i)[0] == 'a'){
 HeureNow = timeClient.getEpochTime(); //Heure de la commande d'arrêt
 CdeOnOff=0;
 EEPROM.write(ADRESS_ON_OFF,0); // Sauvegarde LED à l'arrêt
 }
 EEPROM.commit();

Ajout de l’affichage de la valeur du minuteur pour le client web:

Ajouter la ligne ci-dessous dans le sous-programme setup();

server.on("/Minuteur", srv_handle_minuteur);

Modification du client web:

Ajouter la ligne ci-desoous au fichier de configuration config.html pour envoyer la valeur du minuteur.

 <h2>Valeur du Timer d'arrêt <input type="number" id="timer" name="ValTimer" min="0" max="255"step="1" value="0" onchange="submitVal('ta',(this.value))"> minutes</h2>

Dans le fichier index.html, ajouter la ligne ci dessous pour afficher la minuterie.

 <h2 id="minuterie"> </h2>

Dans le fichier main.js, modifier le programme comme ci-dessous:

Ajouter la fonction minuterie.

function minuterie() {
 var xhttp = new XMLHttpRequest();
 xhttp.onreadystatechange = function() {
 if (xhttp.readyState == 4 && xhttp.status == 200) {
 document.getElementById('minuterie').innerHTML = xhttp.responseText;
 }
 };
 xhttp.open('GET', 'Minuteur', true);
 xhttp.send();
}

Et modifier le rafraîchissement en fonction de la page web afficher.

function rafraichir() { 
 ntp();
 var CheminComplet = document.location.href;
 var NomDuFichier = CheminComplet.substring(CheminComplet.lastIndexOf( "/" )+1 );
 if (NomDuFichier =="index.html"){
 minuterie();
 }
}

Pour finir, j’ai modifié et rectifié quelques problème dans le client web qui n’ont que peut d’importance pour comprendre le fonctionnement de l’ensemble.

Fichier source version 1.6.0 :esp8266_webinterface_1.6.0.zip

Version avec sauvegarde du minuteur version 1.6.1 : esp8266_webinterface_1.6.1.zip

Nombre de visiteurs depuis le 07/2012: