Niveau:3

Introduction:

Dans ce chapitre, nous allons travailler sur l’interface web. Par exemple: Traduction en français de l’interface, et fonctionnement sur un ordinateur ou un smartphone.

Traduction de l’interface de la bibliothèque WS2812FX:

Télécharger les sources de la librairie depuis https://github.com/kitesurfer1404/WS2812FX ou sur mon site WS2812FX-master.zip.

Décompresser l’archive dans un répertoire puis renommer le répertoire en WS2812FX-fr et le fichier WS2812FX.h en WS2812FX_fr.h.

Editer le fichier WS2812FX_fr.h avec Notepad++

Modifier la ligne ci-dessous et traduire les textes de chaque fonction.

#ifndef WS2812FX_fr_h
#define WS2812FX_fr_h

Exemple:

  _name[FX_MODE_STATIC] = F("Fixe");

Editer le fichier WS2812FX.cpp avec Notepad++

Modifier la ligne ci-dessous.

#include "WS2812FX_fr.h"

Editer le fichier WS2812FX_fr_h avec Notepad++ keywords.txt

Modifier la ligne ci-dessous.Cela permet d’avoir une coloration de la déclaration de la bibliothèque

WS2812FX_fr KEYWORD1

Faire une sauvegarde et compresser le répertoire dans un fichier Zip (WS2812FX-fr.zip).

Voici ma bibliothèque avec ma traduction et les exemples modifier WS2812FX-fr-master.zip  ou sur mon site WS2812FX-fr-master.zip

Ensuite ouvrir votre IDE pour installer la bibliothèque.

Dans les anciens sketch (programme) changer l’inclusion de la bibliothèque #include <WS2812FX.h> en #include <WS2812FX_fr.h>

Modification du client web:

Nous allons utiliser un composant de sélecteur de couleur Web nommé jscolor  car celui de notre interface ne fonctionne pas très bien avec les smartphones. Nous allons modifier la partie css pour changer l’apparence de notre page et créer une liste déroulante pour les modes. Les fichiers index.html.h et main.js.h sont a effacé car ils proviennent de l’ancienne version de la bibliothèque.

Déplacement des fonctions de vitesse et de luminosité:

Déplacer le code suivant en dessous de <div id=’controls’>

<ul id='brightness'>
 <li><a href='#' class='b' id='-'>&#9788;</a></li>
 <li><a href='#' class='b' id='+'>&#9728;</a></li>
 </ul>

<ul id='speed'>
 <li><a href='#' class='s' id='-'>&#8722;</a></li>
 <li><a href='#' class='s' id='+'>&#43;</a></li>
 </ul>

Changement du sélecteur de couleur:

Dans index.html.cpp:

Insérer le chargement du script jscolor dans la page après la ligne <script type=’text/javascript’ src=’main.js’></script.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jscolor/2.0.4/jscolor.js"></script>

Supprimer les lignes ci-dessous.

<canvas id='colorbar' width='75' height='1080'></canvas>

 #colorbar {
 float:left;
 }

Ajouter:

Une chaîne de saisie qui sera cachée pour mémoriser la valeur de la couleur. Je l’ai placé sous le titre <h1>WS2812FX Controle</h1>

<input type="hidden" id="ValeurCol" onchange=change(value) value="Exemple" /><br />

Un bouton pour lancer le script Jscolor qui sera placé après la fonction vitesse  <ul id=’speed’>…..</ul>

  <input type="button"
 class="jscolor {onFineChange:'update(this)', valueElement:null,value:'66ccff'}"
 id="bouton"
 value="Choix de la couleur"
 onclick="mouseUp()"
 style="width:240px; height:54px;"><br /><br />

Voila pour la partie HTML.

Dans main.js.cpp:

Supprimer les lignes ci-dessous.

window.addEventListener('resize', drawColorbar);

function drawColorbar(rgb = [0, 0, 0]) {
 can = document.getElementById('colorbar');
 ctx = can.getContext('2d');
 can.width = document.body.clientWidth * 0.25;
 var h = can.height / 360;
 
 var hsl = rgbToHsl(rgb[0], rgb[1], rgb[2]);
 
 for(var i=0; i<=360; i++) {
 ctx.fillStyle = 'hsl('+i+', 100%, 50%)';
 ctx.fillRect(0, i * h, can.width/2, h);
 ctx.fillStyle = 'hsl(' + hsl[0] * 360 + ', 100%, ' + i * (100/360) + '%)';
 ctx.fillRect(can.width/2, i * h, can.width/2, h);
 }
}

// Thanks to the backup at http://axonflux.com/handy-rgb-to-hsl-and-rgb-to-hsv-color-model-c
function rgbToHsl(r, g, b){
 r = r / 255;
 g = g / 255;
 b = b / 255;
 var max = Math.max(r, g, b);
 var min = Math.min(r, g, b);
 var h, s, l = (max + min) / 2;
 if(max == min) {
 h = s = 0;
 } else {
 var d = max - min;
 s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
 switch(max) {
 case r: h = (g - b) / d + (g < b ? 6 : 0); break;
 case g: h = (b - r) / d + 2; break;
 case b: h = (r - g) / d + 4; break;
 }
 h = h / 6;
 }
 return [h, s, l];
}

function Click(e) {
 pos = getMousePos(can, e);
 rgb = ctx.getImageData(pos.x, pos.y, 1, 1).data;
 drawColorbar(rgb);
 submitVal('c', compToHex(rgb[0]) + compToHex(rgb[1]) + compToHex(rgb[2]));
}

function compToHex(c) {
 hex = c.toString(16);
 return hex.length == 1 ? '0' + hex : hex;
}

function getMousePos(can, evt) {
 r = can.getBoundingClientRect();
 return {
 x: evt.clientX - r.left,
 y: evt.clientY - r.top
 };
}

function Touch(e) {
 e.preventDefault();
 pos = {
 x: Math.round(e.targetTouches[0].pageX),
 y: Math.round(e.targetTouches[0].pageY)
 };
 rgb = ctx.getImageData(pos.x, pos.y, 1, 1).data;
 drawColorbar(rgb);
 submitVal('c', compToHex(rgb[0]) + compToHex(rgb[1]) + compToHex(rgb[2]));
}

var can = document.getElementById('colorbar');
 var ctx = can.getContext('2d');

drawColorbar();
 
 can.addEventListener('touchstart', Touch, false);
 can.addEventListener('click', Click, false);

 el.addEventListener('touchstart', handle_M_B_S, false);

Ajouter les fonction suivante:

function update(jscolor) {
 // 'jscolor' instance can be used as a string
 document.getElementById('ValeurCol').value = jscolor
 
}

function mouseUp() {
 // 'jscolor' instance can be used as a string
 
 if (document.getElementById('bouton').value=="Validation de la couleur")
 {
 document.getElementById('bouton').value = "Choix de la couleur";
 document.getElementById('bouton').jscolor.hide();
 submitVal('c', document.getElementById('ValeurCol').value);
 }
 else
 {
 document.getElementById('bouton').value = "Validation de la couleur";
 
 }
 }

Modification de la partie css pour centré le bouton:

Remplacer:

#controls {
 width:65%;
 display:inline-block;
 padding-left:5px;
}

par

#controls {
 text-align:center;
 width:100%;
 display:inline-block;
 }

Résultat:

Liste déroulante des modes de fonctionnement:

Nous allons ajouter dropdown pour mettre la liste des modes. Ajouter les lignes suivante au dessus <ul id=’mode’></ul>

<div class="dropdown">
 <button class="dropbtn">Mode du bandeau</button>
 <div class="dropdown-content">

et après <ul id=’mode’></ul>

 </div>
</div>

Ensuite nous allons ajouter la mise en forme ci-dessous dans la partie style de la page html. A Insérer au dessus de la balise </style> 

.dropbtn {
 display:block;
 margin:3px;
 padding: 16px;
 font-size: 16px;
 border:2px solid #ffffff;
 background-color:#202020;
 font-weight:bold;
 text-decoration:none;
 cursor: pointer;
 min-width: 240px;
 color:#454545;
 border-radius:5px;
}

.dropdown {
 position: relative;
 display: inline-block;
}

.dropdown-content {
 display: none;
 position: absolute;
 background-color:#202020;
 color:#454545;
 max-height:400px;
 overflow-y: scroll;

}

.dropdown-content a {
 display:block;
 margin:3px;
 padding:10px;
 border:2px solid #454545;
 border-radius:5px;
 color:#454545;
 font-weight:bold;
 text-decoration:none;
 cursor: pointer;
 min-width: 218px;

}

.dropdown-content a:hover {background-color: #909090}

.dropdown:hover .dropdown-content {
 display: block;
}

Voici le résultat.

Voici mon fichier source: esp8266_webinterface_1.3.0.zip