Les tableaux en LUA

[idomotique]

Bonjour, Après m'être cassé la tête pendant plusieurs jours pour arriver à formater des tableaux sur HC3 dans la zone de debug voici la solution:

 

1. Création du Tableau

local TabToPrint = {}  -- Création du tableau vide

 

2. Création de la ligne de titre

Je ne vais pas vous faire un cours HTML mais sachez que le secret sur la HC3 (ne le dites à personne hein  ) c'est que le HTML5 n'est pas supporté. Il faut donc  utiliser les balises HTML4.

Donc nous commençons par créer une ligne de titre avec la balise "<table>" qui ouvre le tableau, la balise "<tr>" qui crée une nouvelle ligne et la balise "<th>" qui ouvre un nouvel élément titre. Bien entendu sans oublier de refermer chaque balise sauf la balise "<table>" que l'on fermera à la fin du tableau.

Cette ligne est affectée à la première ligne du tableau avec  "TabToPrint[1] = "

TabToPrint[1] = "<table><tr><th>Description</th><th>Valeur</th></tr>";

on voit dans cet exemple que j'ai crée 2 colonnes "Description" et "Valeur"

 

3.Création des éléments du tableau

Nous utilisons basiquement la même commande que pour la ligne de titre au détail prêt que nous remplaçons la balise "<th>" par la balise "<td>" pour un élément de tableau. Pour être honnête cela ne change pas grand chose mais c'est plus propre et cela vous aidera à vous y retrouver dans votre code.

TabToPrint[#TabToPrint+1] = "<tr><td>Current firmware version</td><td>" data.version "</td></tr>";

Vous remarquerez le début de la ligne "TabToPrint[#TabToPrint+1]" cela permet de récupérer la dernière ligne du tableau et de rajouter notre ligne à sa suite. Vous pouvez aussi utiliser "TabToPrint[2]" et incrémenter manuellement mais vous avez de bonnes chances de faire une erreur et d'écraser des lignes.

Il est également possible d'intégrer des variables comme éléments du tableau comme dans cet exemple le "data.version"qui est une variable locale.

 

4. Impression du tableau

Lorsque vous avez crée tous vos éléments vous pouvez imprimer le tableau dans l'interface de debug avec la commande suivante.

fibaro.trace("Scene145", table.concat(TabToPrint) .. "</table>")

l'élément "table.concat() " permet de concaténer tous les éléments de votre tableau et comme expliqué au début il faut également fermer votre tableau avec la balise "</table>"

 

voila vous obtenez un premier tableau

 

Bon c'est pas bien joli pour le moment alors mettons y un peu les formes....

 

5. formater le tableau

Pour formater notre tableau nous allons utiliser des attributs tels que "bgcolor = "green"". Oui mais alors la c'est un peu délicat vu que l'on doit utiliser des guillemets pour notre attribut ce qui aura pour conséquence de fermer notre string dans la commande et lua va considérer "green" comme une variable ce qui n'est pas notre but. Pour contourner cela un 2ème petit secret: en LUA il es possible d'utiliser le caractère "\" pour que le caractère qui suit immédiatement ne soit pas interprété par lua.

En clair avec la commande "bgcolor = \"green\"" les guillemets qui entourent "green" seront considérés par le compilateur comme du texte.

 

Voici donc quelques exemples de formatage du tableau

 

Appliquer une couleur de fond

attribut: bgcolor = \"green\"

appliquer sur: table, ligne ou éléments du tableau

TabToPrint[1] = "<table bgcolor = \"green\"><tr><th>Description</th><th>Valeur</th></tr>";

résultat:

 

Ajout de bordures

attribut: border = \"1\"

appliquer sur: table

TabToPrint[1] = "<table bgcolor = \"green\" border = \"1\"><tr><th>Description</th><th>Valeur</th></tr>";

résultat:

 

Changer la couleur d'un texte:

attribut: <font color=red>

appliquer sur: texte

TabToPrint[1] = "<table bgcolor = \"green\" border = \"1\"><tr><th><font color=red>Description</th><th><font color=red>Valeur</th></tr>";

résultat:

 

vous trouverez d'autres possiblités de formattage avec les balises html ici

 

 

5. Exemple

 

Voici un exemple de formatage d'un éléments de réponse d'une requête API sur un interrupteur Dingz:

 

-- configuration des tableaux
local   styleElement= "<font color=black size=\"3\">"
local   styleTitre = "<font color= \"#E4022E\" size=\"5\">"
local   styleTableau ="bgcolor = \"#a6ff19\" border = \"1\" cellpadding = \"5\" width = \"1000\"" 
 
-- Ligne de titre
TabToPrint[1] = "<table "..styleTableau.."><tr><th>"..   styleTitre .. "Description</th><th>"..   styleTitre .. "Valeur</th></tr>";
 
-- Remplissage du tableau
TabToPrint[#TabToPrint+1] = "<tr><td>"..styleElement.. "Current firmware version</td><td>"..styleElement.. tostring(data.version) .."</td></tr>";
TabToPrint[#TabToPrint+1] = "<tr><td"..styleElement.. ">MAC address, without any delimiters</td><td>"..styleElement.. tostring(data.mac) .."</td></tr>";
TabToPrint[#TabToPrint+1] = "<tr><td>"..styleElement.. "Device type it always have value 108</td><td>"..styleElement.. tostring(data.type) .."</td></tr>";
TabToPrint[#TabToPrint+1] = "<tr><td>"..styleElement.. "SSID of the currently connected network</td><td>"..styleElement.. tostring(data.ssid) .."</td></tr>";
TabToPrint[#TabToPrint+1] = "<tr><td>"..styleElement.. "Current ip address</td><td>"..styleElement.. tostring(data.ip) .."</td></tr>";
TabToPrint[#TabToPrint+1] = "<tr><td>"..styleElement.. "Mask of the current network</td><td>"..   styleElement .. tostring(data.mask) .."</td></tr>";
TabToPrint[#TabToPrint+1] = "<tr><td>"..styleElement.. "Gateway of the current network</td><td>"..   styleElement .. tostring(data.gateway) .."</td></tr>";
TabToPrint[#TabToPrint+1] = "<tr><td>"..styleElement.. "DNS of the curent network</td><td>"..   styleElement .. tostring(data.dns) .."</td></tr>";
TabToPrint[#TabToPrint+1] = "<tr><td>"..styleElement.. "Wether or not the ip address is static</td><td>"..styleElement.. tostring(data.static) .."</td></tr>"; 
  
--impression du tableau
fibaro.trace("Scene145",  table.concat(TabToPrint) .. "</table>")  

Vous remarquerez que pour simplifier les choses j'ai crée des variables "style..." avec les attributs. cela permet de rassembler le tout à un endroit et de ne pas avoir a grailler dans vos tableau.

 

résultat:

 

Voila il je ne suis absolument pas un pro du HTML donc si vous avez des remarques ou des conseil pour faire mieux je suis volontiers preneur mais avec ces explications vous avez une base pour faire quelques tableaux.

PS: interdiction formelle de se moquer de mon sens artistique

 

 

[Lazer]

C'est green, super green

 

 

Non non je ne me moque pas

 

[pepite]

Merci pour le partage !!

 

Bon boulot.

 

VERT, couleur de l'espoir ;-)

[idomotique]

C'est green, super green
 

 
Non non je ne me moque pas
 

Ah mais le vilain :-p


Envoyé de mon SM-A516B en utilisant Tapatalk

[Lazer]

C'est surprenant, quand la HC3 est sortie avec les premiers firmwares, j'étais persuadé que Fibaro avait bloqué la possibilité d'injecter du code HTML pour mettre en forme le texte dans la zone de debug (chose qu'on pratiquait déjà courament sur la HC2)

 

Du coup je viens de réessayer, et ça fonctionne bien, donc soit j'ai rêvé, soit Fibaro a ajouté cette possibilité entre temps.

 

En tout cas, merci pour le tuto et d'avoir démontré que ça fonctionne

 

Maintenant je vais pouvoir remettre plein de couleurs dans les logs de mes QuickApps

 

[jjacques68]

ben moi aussi j'arrivai pas à mettre de l'HTML dans le debug...

donc c'est que ça a été rajouté.

[idomotique]

Le html5 ne fonctionne tjrs pas. J'ai cherché un moment car j'avais juste utilisé le code de la hc2 dans ma hc3. Il etais en html5 donc ne fonctionnais pas.

Envoyé de mon SM-A516B en utilisant Tapatalk

[Lazer]

Les balises styles=... sont bloquées

Ce qui passe, c'est le bon vieux HTML4 avec des balises font=... etc

 

Je pense que c'est le problème que j'avais, car justement j'utilisais également des balises de styles sur la HC2.

[idomotique]

Exact, les balise style sot en fait du css. J'imagine que la hc3 ne supporte pas le css

Envoyé de mon SM-A516B en utilisant Tapatalk

[Lazer]

Le problème n'est pas qu'elle supporte ou pas le CSS, car bien sûr qu'elle le supporte.

 

C'est plutôt que Fibaro bloque la possibilité d'injecter du CSS.

 

Sur la HC2, Fibaro ne le bloquait pas sur l'interface Web (zone de debug ainsi que le rendu du module virtuel lui-même, ce qui permettait par exemple d'afficher une jaquette d'album à la place d'un label en texte), mais ils le bloquaient déjà au niveau de l'application mobile, si bien que l'utilisation des styles CSS était inutile en dehors de colorer la zone de debug.

 

Pour personnaliser les QuickApps de la HC3, il faudra attendre que Fibaro nous le permette. Normalement c'est prévu, mais pour quand ?