Ca ne marche pas mieux 
il y a un truc que je n’ai pas capté…
Tu mets ton code dans Réglages/Systèmes/Personnalisation avancée, dans le cadre « java script », puis tu l’actives en haut à droite
Et ensuite , tu mets ce texte « text-align: center;column-span:all; » dans ta case que tu veux centrer :
Pour le délai, TomMary a ajouté une latence en millisecondes, ça ne corrigerait pas ton souci?
J’utilise déjà le délai, regarde la valeur… On dirait que jpi est fainéant ou trop rapide. Je verrai ça plus tard.
Il te faut activer la case personnalisation dans configuration aussi. Après oui c’est comme ça.
Édit tu as fait comment tes boutons ?
Au bout d’un moment, le bouton s’est centré, donc je dois avoir les mêmes soucis de latence
Pour le bouton, c’est le code de @nak qui Ipapy a reparté ici :
Petit à petit…
Long car je prends le temps, mais ça ressemble doucement à ce que je souhaite.
La mise en forme est loin d’être finie (couleur en fonction de l’état etc).
C’est déjà très beau 
.
Je vais encore être obligé de te copier lol 
Ca commence à prendre forme, c’est top.
Pour mettre en forme, par exemple tes icones dans le cadre Supervision, comment fais tu ? Moi j’ai créé un virtuel que je mets en forme tableau dans le dashboard et ensuite j’insère l’équipement dans mon design. Mais ça m’oblige à faire un virtuel dédié au design
J’ai effectivement un virtuel dédié au design.
Et je joue sur les CSS et les tableaux :
Par contre, je supprime peu à peu les virtuels qui n’ont plus d’intérêt.
Je prévois aussi de pouvoir ouvrir des popups pour accéder aux équipements plus facilement plutôt que d’empiler les designs à tord et à travers 
Cool, j’avais trouvé la méthode des virtuels et cadres tout seul, je progresse lol
Pour les pop-up, trop complexe encore pour moi, je verrais plus tard.
Tiens nous au courant pour la suite 
Bonjour,
est il possible de partager ton virtuel tableau special pour le design ma petite madame est en admiration de ton Tableau 
merci par avance
Il est loin d’être finalisé…
J’ai mis en place des boutons pour les futurs menus à la volée. Il manque encore la coloration…
Bonjour
dans tous le cas Pense a moi, car ton boulot est vraiment cool
l’idée d’une page de supervision me plait pas mal .je suis plus parti sur un menu avec des thémes ( fenetres, alarme,piscine …
comme ça :
la télécommande et son tv sur la principale , c’est pour le contrôle tv ( extinction, son pour les enfants plafonné… :).Tiens ça me fait penser qu’il faut que je remplisse l’agenda 2021 pour les poubelles
A la base , c’était pour contrôler les volets de la tablette que j’étais parti comme ça
le chauffage :
mais je vais quand même mettre l’idée d’une supervision dans le coin de ma tete. Seul hic, pas trop à l’aise avec html, css …meme si j’en comprends les principes
Hello et voilà, après quelques jours de réflexion, le tableau de suivi « intérieur » est fini.
Règle de base tout en gris, sauf alerte ou warning.
Si la VMC tourne, flèche tournante en orange à défaut gris.
Pour les températures, j’ai un widget qui en fonction du mode (clim,chauffage, arrêt) vérifie « intelligemment » la température. Exemple, en chauffage, je vérifie si la température est inférieure à 1° de la consigne ou 2°. L’été ce sera l’inverse, c’est à dire supérieur. Et en fonction je colorise.
De même si les splits chauffent, température en +. S’ils refroidissent ce sera le même en bleu avec -. Pour l’humidité, simple gamme de valeur pour colorer.
Les entêtes des colonnes sont cliquables pour ouvrir de futurs popups.
Salut
tu pense toujours a moi? 
Mais je ne comprends pas du tout ce que tu veux…
Ce n’est qu’un tableau avec une mise en forme adaptée et le code pour merger les colonnes données plus haut.
Dis moi exactement ce que tu as besoin car sincèrement je ne vois pas.
Salut
Précisément les etape avec les quelles tu a fait ce maguifique tablau, tu sais je suis un déboutant en jeedom et quand je vois un travail innovant je demande les détail pour élargir mes horizons jeedomien, pardon de prendre trop de ton temps.
très cordialement
Bonsoir,
Je n’avance pas forcément à la vitesse que je souhaite car je nettoie toujours.
Mais peu à peu…
Il me reste à solutionner le problème de l’icone action qui change avec l’aide de @noodom.
Faire tous les popups mais peu à peu… ça prend forme !
Je partage au cas où les icones que j’ai faites avec Photofiltre.
Le reste c’est par l’excellent plugin icones et les librairies proposées mdi, mti.
Icones Jeedom V4.txt (133,1 Ko)
A renommer en .zip (.txt).
Bonjour @nak,
En relisant tes messages, j’ai l’impression que tu te fais une montagne de beaucoup de choses. Je ne fais qu’utiliser des virtuels, en mode disposition, avancée en tableaux.
Ensuite, toutes les astuces que j’ai données sont les mêmes que celles déjà données sur mon blog puisque je joue avec width, heigth, vertical-align, text-align, background-color, color etc.
font-family:Rubik-light;vertical-align: middle;text-align:center;
background-color:ghostwhite;color: black;font-size:15px;column-span:all;
La base est ici :
La fonction column-span:all permet de fusionner toutes les colonnes d’une ligne. Voir :
Et dans les cases, je ne fais qu’appel à mes virtuels et leur état de capteurs ouverts etc. Les led viennent de là :
Pour les boutons, comme je l’ai indiqué, j’utilise ce widget et les librairies d’icones du plugin du même nom dispo en béta icones.
Je ne peux que te conseiller de partir de ce tutoriel si tu débutes et ne pas placer ta barre trop haute. J’en suis à 5 ans de Jeedom depuis la V2 après 1 an de Domoticz. Et je m’estime bien nul à côté des compétences de vrais informaticiens de métier. Donc il n’y a pas de secret. Un marathon ça se ne court pas en 4h comme ça (déjà) et il faut plusieurs semaines… comme tout !
Les widgets que j’ai créés rapidement sur la même base (mais il te faut toujours avoir les icones du plugin installées) :
Les icones « rapides » utilisent la fonction widget bien pratique :
Mais tu peux faire la même chose quand tu veux une mise en forme un peu plus poussée (exemple boite aux lettres) :
<div class="tooltips cmd cmd-widget #history#" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#" style="display: block;">
<center>
<span class="iconCmd"></span>
</center>
<script>
jeedom.cmd.update['#id#'] = function(_options){
var state = _options.display_value;
var cmd = $('.cmd[data-cmd_id=#id#]');
// 0 rien ; 1 = facteur passé ; 2 = courrier récupéré
if (state == 0 ) {
cmd.find('.iconCmd').empty().append('<i class="Mdi mdi-mailbox" style="color:#acacac;font-size:65px;"></i>');
}
else if (state == 1 ) {
cmd.find('.iconCmd').empty().append('<i class="Mdi mdi-mailbox-up" style="color:#30b455;font-size:65px;"></i>');
}
else if (state == 2 ) {
cmd.find('.iconCmd').empty().append('<i class="Mdi mdi-mailbox-open-up" style="color:#ff8c00;font-size:65px;"></i>');
}
cmd.find('.state').empty().append(' '+state);
cmd.find('.unite').empty().append(' #unite#');
if(_options.alertLevel){
$('.cmd[data-cmd_id=#id#]').removeClass('label label-warning label-danger')
if(_options.alertLevel == 'warning'){
$('.cmd[data-cmd_id=#id#]').addClass('label label-warning');
}else if(_options.alertLevel == 'danger'){
$('.cmd[data-cmd_id=#id#]').addClass('label label-danger');
}
}
}
jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
</script>
</div>
Pour avoir des couleurs sur mes virtuels exemple jaune, orange, rouge en fonction de limite.
J’utilise ce widget dont je passe les options de #color1#, #color2# par les options d’affichage du widget.
Sur le même principe, j’ai modifié ce code pour avoir des changements en fonction de la clim, chauffage etc.
<div class="cmd cmd-widget #history#" data-type="info" data-subtype="numeric" data-template="line" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#">
<div class="content-xs">
<span class="cmdNameColor#id# cmdName #hide_name#">#name_display# </span><span class="valueColor#id# value">#state#</span><span class="uniteColor#id# unite"> #unite#</span>
</div>
<style>
.cmdNameColor#id# {
font-size: 12px;
}
.valueColor#id# {
font-size: 12px;
}
.uniteColor#id# {
font-size: 12px;
}
</style>
<script>
jeedom.cmd.update['#id#'] = function(_options) {
var cmd = $('.cmd[data-cmd_id=#id#]')
//Définition des paramètres et couleurs par défaut et définition des limites par défaut
//Sinon à passer en paramètres !
var saison = is_numeric('#saison#') ? parseFloat('#saison#'):0;
var color1 = ('#color1#' != '#' + 'color1#') ? "#color1#" : "#5078aa";
var color2 = ('#color1#' != '#' + 'color1#') ? "#color2#" : "#acacac";
var color3 = ('#color1#' != '#' + 'color1#') ? "#color3#" : "#ff8c00";
var AppliedColor = ('#AppliedColor#' != '#' + 'AppliedColor#') ? "#AppliedColor#" : "#FFFFFF";
var limit = is_numeric('#limit#') ? parseFloat('#limit#'):15;
var range1 = is_numeric('#range1#') ? parseFloat('#range1#'):1;
var range2 = is_numeric('#range2#') ? parseFloat('#range2#'):2;
var valeur = parseFloat(_options.display_value).toFixed(1);
//Fonctionne sur un range +/-1 ; +/-2 ; à défaut hors range
//Chauffage = 0 on regarde si inférieur uniquement
if (saison == 0) {
var limit1 = limit-range1;
var limit2 = limit-range2;
if (valeur >= limit1) {
AppliedColor = color1;
}
else if ((valeur >= limit2) && (valeur < limit1)) {
AppliedColor = color2;
}
else {
AppliedColor = color3;
}
}
//Arrêt = 1 on regarde si inférieur et supérieur
else if (saison == 1) {
var limit1i = limit-range1;
var limit2i = limit-range2;
var limit1s = limit+range1;
var limit2s = limit+range2;
if ((limit1i <= valeur) && (valeur <= limit1s)) {
AppliedColor = color1;
} else if ((limit2i <= valeur) && (valeur <= limit2s)) {
AppliedColor = color2;
} else {
AppliedColor = color3;
}
}
//Clim = 2 on regarde si supérieur uniquement
else if (saison == 2) {
var limit1 = limit+range1;
var limit2 = limit+range2;
if (valeur <= limit1) {
AppliedColor = color1;
}
else if ((valeur > limit1) && (valeur <= limit2)) {
AppliedColor = color2;
}
else {
AppliedColor = color3;
}
}
//Debug au cas où on fixe une couleur bien lisible !
else {
AppliedColor = "#2B140E";
}
cmd.find('.cmdNameColor#id#').attr('style', 'color: ' + AppliedColor + ';');
cmd.find('.valueColor#id#').attr('style', 'color: ' + AppliedColor + ';');
cmd.find('.uniteColor#id#').attr('style', 'color: ' + AppliedColor + ';');
cmd.attr('title','Date de valeur : '+_options.valueDate+'<br/>Date de collecte : '+_options.collectDate)
cmd.find('.state').empty().append(_options.display_value);
if(_options.alertLevel){
if(_options.alertLevel == 'warning'){
cmd.find('.content-xs').addClass('label label-warning')
cmd.attr('data-alertlevel','warning');
}else if(_options.alertLevel == 'danger'){
cmd.find('.content-xs').addClass('label label-danger')
cmd.attr('data-alertlevel','danger');
}else{
cmd.find('.content-xs').removeClass('label label-warning label-danger')
cmd.attr('data-alertlevel','none');
}
}
}
jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'})
</script>
</div>
Salut à toi mon ami @benj29
Tout d’abord je voudrais te remercier vivement de cette belle réponse bien détaillée que tu viens de me faire , elle est en effet extremement pédagogique et je suis conscient du temps que tu as dû passer pour me l’élaborer.
étant débutant en matière de jeedom, mais surtout subjuguer par l’esthétique de ton projet 
que je vais mettre en pratique rapidement , cela t’expliquera les doutes qui émergent dans mon esprit, encore une fois milles merci, avec toute mon amitié
Je peux aider avec le temps que j’ai à ma disposition. Après, sincèrement, faut essayer, tenter.
J’ai perdu 4h cette après-midi pour juste faire ça…
La gestion des activités et de l’ampli multi zone. Et tout était déjà implémenté côté jeedom. Là c’est que les virtuels et les tableaux.
