Créer et centrer des informations dans un tableau de mise en forme sous Jeedom

texte alternatif

Suite à mon post Facebook, je rédige un article pour profiter d’une meilleure mise en page.
Mais également, pour que cela apporte une meilleure visibilité pour aider un maximum de personnes.

Les tableaux sous Jeedom

Jeedom permet de créer des tableaux pour organiser ses données. Cela est très pratique. On peut choisir de rendre le tableau transparent pour l’utilisateur en masquant ses lignes.

Comment créer un tableau sous Jeedom ?

Pour chaque équipement (ou virtuel), il existe un bouton configuration avancé en haut à droite.

Présentation

Il faut alors se rendre dans l’onglet disposition
Dans la liste déroulante « Disposition », il faut alors sélectionner Tableaux.

Exemple de tableau

Lorqu’on sélectionne tableau de nouveaux apparaissent.
Il demande le nombre de ligne du Tableau et le nombre de colonnes.

La mise en forme du Tableau

Après avoir défini le nombre de lignes et de colonnes, dès que l’on clique sur enregistrer, les cases correspondent apparaissent dans la page.
Ici : 2 colonnes et 3 lignes

Mise en forme

Pour chaque case, on peut mettre :

du texte (case : Texte de la case)

  • glisser/déposer les différentes infos/commandes visibles de l’équipement (ici : état, haut, bas ; stop, positionnement)
  • décider de la mise en forme de la case avec le langage CSS ( couleur de l’écriture,police d’écriture, couleur de fond de la case, mise en gras ……)
Mise en forme

Résultat :

Visu

Centrer le titre

Quand je regarde mon tableau, j’aimerais centrer le titre de celui-ci.
Jeedom ne propose pas nativement de solution pour faire ça (surprenant même), comment faire ?
Dans le dashboard, quand on va en modification (petit bouton en haut à droite ) :
Les cases du tableau apparaissent temporairement.

Mise en forme d’un titre

On voit bien que le titre prend toute la cellule.
Il faudrait soit :
– que le titre chevauche les deux cellules du haut
– soit fusionner les cellules pour en faire qu’une seule
1ère solution : Chevaucher le texte sur les 2 cellules :
On ajuste en pixel : la position du titre
position: relative; top: 0px; left: 90px;
Ici, on dit que le texte commence à 90 pixels du bords
(il faut changer la valeur 90 pour ajuster en tâtonnant)

Exemple

Résultat (pas parfait, faut peut-etre que je mette 89,88,87 …. 84 etc .. à tester) :

Rendu sur le dashboard

Résultat avec les lignes du tableau (on voit le chevauchement) :

Rendu au format édition

Avantage :
faciliter de mise en œuvre (1 ligne dans une case)
Inconvénient :
la configuration se fait à la vue (en tâtonnant sur le nombre de pixels)
si on utilise Jeedom sur plusieurs appareils avec des résolutions différentes : le résultat ne sera pas le même
si pour X raison, je vais changer la taille de mes colonnes : je dois tâtonner de nouveau pour trouver le centrage parfait

2ème solution : fusionner les cellules et centrer le texte dedans :
C’est une solution plus technique mais qui est plus efficace.
1ère étape :
Ajouter du code CSS dans le texte que l’on veut centrer :
text-align: center;column-span:all;

2ème : configuration avancée
Il faudra ajouter du code Javascript qui va supprimer les cases inutiles et étendre la case sur tout le tableau

Personnalisation avancée
Personnalisation avancée

$(window).on(‘load’, function() {

// code here

var test = addColspan($(“TD”)) ;

});

function addColspan(Tabobjets) {

Tabobjets.each(function(objet) {

if ($(this).css(“column-span”) != undefined)

{

if ($(this).css(“column-span”) === ‘all’)

{

console.log(‘test’);

var nbtd = $(this).siblings().length + 1;

$($(this).siblings()).remove();

$(this).attr(‘colspan’,nbtd);

}

}

});

};

En n’oubliant pas d’enregister les changements

3ème étape : raffraichir le cache du navigateur

Rendez vous sur votre dashboard. Avec votre clavier :
Faire touche CTRL + F5 ( ou CTRL + Maj + R), la page va se recharger et prendre en compte les changements.
Résultats:

Rendu après application
Rendu après application

Avantage :
– s’adapte à toutes les résolutions
– on est sûr que notre titre est bien centré
– on peut modifier la taille des colonnes, le texte restera centrer
Inconvénient :
– fastidieux à mettre en œuvre la 1ère fois

Bonus : Comprendre le code Javascript

$(window).on(‘load’, function() {

// code here

var test = addColspan($(“TD”)) ;

});

Au chargement de la page, on appelle la fonction addColspan($(“TD”)) (on aurais pu l’appeler comme on veut).
$(“TD”) : veut dire qu’on lui passe un tableu avec toutes les balises TD HTML de la page (ces balises définissent les cases d’un tableau).

unction addColspan(Tabobjets) {

Tabobjets.each(function(objet) {

if ($(this).css(“column-span”) != undefined)

{

if ($(this).css(“column-span”) === ‘all’)

{

console.log(‘test’);

var nbtd = $(this).siblings().length + 1;

$($(this).siblings()).remove();

$(this).attr(‘colspan’,nbtd);

}

}

});

};

Dans cette fonction, on récupère ce fameux tableau qu’on appelle TabOjets
Tabobjets.each(function(objet) => on parcourt chaque ligne de ce tableau.

if ($(this).css(“column-span”) != undefined)
Dans chaque ligne, on ne prend que les lignes ou il y a la propriété column-span (celle que je vous ais fait ajouter plus haut)

if ($(this).css(“column-span”) === ‘all’)
On vérifie ensuite si la valeur de column-span est bien all

Si les 2 conditions sont réunies :

console.log(‘test’); => ne sert à rien … c’est juste un test

var nbtd = $(this).siblings().length + 1; => on regarde le nombre de cases qu’il y a dans cette même ligne (siblings veut dire : frère et sœurs … pour le coup, on rajoute +1 pour compter la case en elle-même)

$($(this).siblings()).remove(); => on supprime tous les frèeres et soeurs de cette case ( en gros, toutes les cases d’à coté)

$(this).attr(‘colspan’,nbtd); => on dit que notre case va prendre la place du nombre de cases calculé juste au dessus.

Cette article provient d’Oliver Loks membre du groupe Entraide Jeedom

Nullam lectus ipsum Praesent ut vel,