Euh te stresse pas à ce soir (je crois que c’était l’inverse que tu voulais écrire).
Je n’en ai pas besoin, c’est plutôt au cas où… car je refais mon design suite au passage V4 
function addColspan(Tabobjets) {
//console.log('fonction');
Tabobjets.each(function(objet) {
if ($(this).css("column-span") != undefined)
{
//console.log('column-span');
if ($(this).css("column-span") === 'all')
{
//console.log('column-span== all');
var nbtd = $(this).siblings().length + 1;
$($(this).siblings()).remove();
$(this).attr('colspan',nbtd);
}
else
{
//debugger
var nb = $(this).css("column-span");
//alert(nb);
}
}
if ($(this).css("grid-column-start") != undefined)
{
var nb = $(this).css("grid-column-start");
if ($(this).css("grid-column-start") != 'auto' && $(this).css("grid-column-start") != '')
{
for(let i=0;i<nb;i++)
{
//debugger
if ($(this).next() != undefined)
{
$($(this).next()).remove();
}
}
$(this).attr('colspan',nb);
}
}
if ($(this).css("grid-row-start") != undefined)
{
var nb = $(this).css("grid-row-start");
var idCol = $(this).attr('data-column')
if ($(this).css("grid-row-start") != 'auto' && $(this).css("grid-row-start") != '')
{
var elt = $(this).parent('tr');
for(let i=0;i<nb;i++)
{
if (elt.next() != undefined)
{
elt = elt.next();
if (elt.children('[data-column=' + idCol +']') != undefined)
{
elt.children('[data-column=' + idCol +']').remove();
}
}
}
$(this).attr('rowspan',nb);
}
}
});
};
Voila, j’ai modifié.je te garantit rien.je suis un peu dans le gaz (mais je n’ai pas pu m’empêcher de regarder).
Dit moi, ce que tu en penses.
Si on arrive à une solution qui marche.
Je vais demander à un des admins de Youdom pour mettre à jour article (ou écrire un nouvel article).
cela a l’air d’intéresser pas mal de monde.
autant en faire profiter le plus grand nombre.
Je vois et te dis à l’utilisation.
Par contre, perso, j’ai des soucis en cas de refresh de virtuels, les colonnes peuvent sauter à l’affichage et il me faut forcer un refresh de la page pour avoir de nouveau le tableau bien à jour.
Une image valant plus de mille discours.
La page se charge j’ai ça (parfait) :
Au bout de quelques minutes les virtuels dedans bougeant, ça saute… et pas d’autres solutions que de faire un refresh à la main ou de manière régulière (pas top) de toute la page. (désolé c’est un impr écran d’une vidéo que j’ai faite pour Djul sur le fil JPI).
Un grand merci à toi pour ton aide! A voir sur l’utilisation mais cela fonctionne! Et je ne serais pas du tout allé sur cette logique de code donc j’y serais encore à cette heure-ci lol
1 « J'aime »
donc, à part le resfresh (même si c’est très chiant), cela a l’air de fonctionner comme tu veux ?
A première vue, on dirait qu’il reconstruit le tableau lors d’un refresh.(curieux que cela faisait pas ça sur le centrage de mes titres).
Pour le moment, j’ai pas d’idée.
Ou alors, appeler la fonction après chaque refresh.
Hello,
Ce n’est pas au refresh (à moins que l’on ne parle pas du même effectivement).
J’entends refresh le chargement de la page par JPI (c’est la fonction).
Tu dois parler de refresh dans le sens un virtuel bouge et met à jour un tableau.
Si tel est le cas, je suis très étonné de lire que tu n’observes pas ce comportement. J’ai testé dans tous les sens, dashboard, design ou simple tableau à 2 colonnes vides, j’ai toujours le même comportement.
Ce que je ne comprends pas c’est que si je modifie le code d’appel par (j’ai regardé un peu le sujet, voir modification en bas avec setInterval) :
les tableaux fusionnent leurs colonnes au premier chargement (setTimeout) mais ensuite se casse à 5 secondes (première itération). Comme si le fait de relancer la fonction une fois que la dispo était cassée était « perdue ». Si je rafraichis la page par F5, tout se reconstruit …
Je ne comprends pas pourquoi le premier appel fait le boulot et ensuite KO…
Deux approches comme tu le soulignes :
- Comment refaire un appel toutes les « secondes » par exemple ?
- Comprendre pourquoi le tableau se casse ? (et le fait que tu me dises que tu n’as pas ce comportement m’embête énormément).
$(function() {
$('body').on('jeedom_page_load', function (event) {
setTimeout(function() {
addColspan($('div.eqLogic-widget[data-plan_id] td'))
}, 200)
setInterval(function() {
addColspan($('div.eqLogic-widget[data-plan_id] td'))
}, 5000)
})
})
en fait, j’avais mal compris ton refresh.
en cliquant sur la double flèche, c’est vrai que ça reste bien.
mais en changeant d’onglets dans mon navigateur… et en revenant de temps en temps ( des fois, je n’y arrive pas)
le tableau s’est retrouvé dans sa configuration initiale.
je ne trouve pas exactement la raison.
faudrait que je regarde dans la console du navigateur quand ça arrive. si on trouve des pistes.
faudrait voir si jeedom fait un refresh ou je ne sais quoi … qui remet tout en place.
je dois t’avouer que je suis perplexe aussi.
@kiboost aurais tu une petite idée?
@benj29 tu as un tuto pour le JPI ? pour que je puisse me mettre dans les mêmes conditions que toi.
j’ai un peu de temps pour chercher
Pour afficher ? Car tu as les mêmes soucis si tu affiches un design sur chrome et que tu le laisses vivre.
Je réfléchis à mettre toutes les cases et laisser glisser le texte en trichant sur les mots par case.
Pas top, mais c’est gonflant de ne pas pouvoir fusionner et être stable.
Dis moi comment je peux t’aider.
En fait, je suis « embêté ».
Mes tableaux ne bougent pas de mon coté.
Je me demande si je n’avais pas pris un vieil onglet (c’est à dire avant d’avoir mit les column/row-start … sans avoir raffraichit) dans mes précédents tests.
Car je ne reproduit plus la mise en forme « qui saute ».
J’ai laissé mon Dashboard ouvert dans un onglet (chrome) depuis hier.
Le tableau ne bouge pas
Je viens d’ailleurs d’ouvrir un nouvel onglet.
Il me prend directement la bonne mise en page (pas besoin de faire un refresh forcé du cache).
Après, je n’ai pas de design.
C’est directement le Dashboard.
J’ai parlé de JPI car tu en as fait mention. Et je ne l’ai pas d’installé (d’ailleurs, je ne sais pas ce que c’est ^^ )
En faisant d’ailleurs une recherche, j’ai vu sur le forum ce genre de soucis :
C’est pour ça que je me demande si cela a pas un rapport.
Je voulais juste me remettre dans le mm environnement que toi, pour reproduire le soucis.
Non ce n’est pas le cas, c’est le plugin JPI qui est obsolète, fais des appels dans tous les sens.
Pas JPI en tant que tel qui se contente d’afficher. JPI est un APK et tu t’interfaces avec lui par script, le framework SC de @dJuL ou bien l’ancien plugin JPI Plugin qui faisait « sauter » le cron et Jeedom.
Pour ma part, je ne l’utilise plus depuis quelques mois car j’ai tout migré sur script.
Par contre, en y réfléchissant, je me demande si ce n’est pas le fait que mes infos « bougent » en taille et autres et du coup, le tableau change légèrement de taille au sein d’une cellule. S’il change de taille, le colspan ne s’applique plus et saute.
Tu vois l’idée ? Je ne sais pas si tu peux reproduire ?
je ne sais pas trop comment reproduire.
faudrait que tu fasses un clic droit sur ton design. Menu inspecter
et faudrait cliquer la dessus (la petite flèche) :
Et ensuite, cliquer sur ta case de tableau :
- lorsque le colspan/rowspan fonctionne
- lorsque le colspan/rowspan ne fonctionne plus
et me montrer le code HTML pour chaque situation.
On verra ainsi si le colspan saute vraiment ou pas.
OK, je m’en occupe dans le week-end.
1 « J'aime »
En y réfléchissant, je vois bien que cela ne touche que « certains » éléments de mon design.
Par exemple, je clique sur un interrupteur ou autres, il ne se passe rien ! Le titre reste bien fusionné sur les 5 ou 6 cases en long.
Par contre, certains bougent soit durant la vie, soit si j’appuie.
Exemple :
<div class="eqLogic eqLogic-widget allowResize allowReorderCmd allowLayout eqLogic_layout_table jeedomAlreadyPosition noResize hideEqLogicName context-menu-disabled" data-eqtype="virtual" data-eqlogic_id="1915" data-eqlogic_uid="eqLogic1915__814284044__" data-version="dashboard" data-translate-category="" data-category="" data-tags="" style="width: 142px; height: 157px;" data-plan_id="3785" data-zoom="1">
<center class="widget-name">
<span class="warning tooltipstered">
<i class=""></i>
</span>
<span class="cmd refresh pull-right cursor" data-cmd_id="21148">
<i class="fas fa-sync"></i>
</span>
<span class="reportModeVisible">Ouvrants <span class="object_name">Panel</span></span>
<a href="#" class="reportModeHidden">Ouvrants <span class="object_name">Panel</span></a>
</center>
<div class="verticalAlign">
<center>
<table style="width:140px;" class="tableCmd" data-line="3" data-column="2"><tbody><tr><td class="tableCmdcss" style="font-family:Rubik-light;background-color:ghostwhite;color: black;font-size:13px;column-span:all;text-align:center;" data-line="1" data-column="1" colspan="2"><center>Ouvrants & Accès</center></td></tr><tr><td class="tableCmdcss" style="font-family:Rubik-light;text-align:center;vertical-align:middle;width:70px;height:62px;" data-line="2" data-column="1"><center><!--
Widget name : multi_icon_switch_mmi
Author : geqr
Website : www.ma-maison-intelligente.fr
Tutorial : http://ma-maison-intelligente.fr/2020/04/widget-multi-icone-pour-votre-design-jeedom/
Last Update : 20200426 - update to remove root properties when parameters are passed
-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<div id="button-21164" class="cursor cmd tooltips cmd-widget container-fluid tooltipstered" onclick="jeedom.cmd.execute({id: '21164'});" data-type="action" data-cmd_id="21164" data-cmd_uid="cmd21164__814284044__">
<div class="button" style="border: 3px solid ghostwhite; border-radius: 53px; color: ghostwhite; width: 53px; height: 53px; font-size: 20px;">
<i id="icon-21164" class="jeedom-portail_ferme" style="line-height: 47px; color: ghostwhite;"></i>
</div>
</div>
<style type="text/css">
--root: {
--button_width: 60px;
--border_size: 3px;
--button_color: grey;
--icon_size:30px;
}
.button i.fa, .button i.fas, .button i.fab {
line-height:calc(var(--button_width) - var(--border_size) - var(--border_size));
color: var(--button_color);
}
.button {
box-sizing: border-box;
border: var(--border_size) solid var(--button_color);
border-radius: var(--button_width);
color: var(--button_color);
width: var(--button_width);
height: var(--button_width);
display: block;
text-align: center;
cursor: pointer;
font-size: var(--icon_size);
margin: 0;
font-weight:400;
}
</style>
<script type="text/javascript">
$(function() {
var buttonSize = is_numeric('53') ? parseFloat('53'):60;
var borderSize = is_numeric('3') ? parseFloat('3'):3;
var iconSize = is_numeric('20') ? parseFloat('20'):30;
var color = ('ghostwhite' !='#'+'couleur#') ? "ghostwhite":"white";
$("#button-21164 .button").css("border", borderSize+"px solid "+color);
$("#button-21164 .button").css("border-radius", buttonSize+"px");
$("#button-21164 .button").css("color", color);
$("#button-21164 .button").css("width", buttonSize+"px");
$("#button-21164 .button").css("height", buttonSize+"px");
$("#button-21164 .button").css("font-size", iconSize+"px");
var lineheight = buttonSize - borderSize - borderSize;
$("#button-21164 .button i.fa, #button-21164 .button i.fas, #button-21164 .button i.fab").css("line-height",lineheight+"px");
$("#button-21164 .button i.fa, #button-21164 .button i.fas, #button-21164 .button i.fab").css("color",color);
var type = ('jeedom-portail_ferme' !='#'+'type#') ? "jeedom-portail_ferme":"fa";
var icon = (''!='#'+'icone#') ? "" : "fa-lock";
$("#icon-21164").removeClass().addClass(type+" "+icon);
});
// Touch start
$("#button-21164").on("mousedown", function() {
return $(this).css({
"transform": "scale(.9)"
});
});
// Touch end
$("#button-21164").on("mouseup", function() {
return $(this).css({
"transform": "scale(1)"
});
});
</script></center></td><td class="tableCmdcss" style="font-family:Rubik-light;text-align:center;vertical-align:middle;width:70px;height:62px;" data-line="2" data-column="2"><center><!--
Widget name : multi_icon_switch_mmi
Author : geqr
Website : www.ma-maison-intelligente.fr
Tutorial : http://ma-maison-intelligente.fr/2020/04/widget-multi-icone-pour-votre-design-jeedom/
Last Update : 20200426 - update to remove root properties when parameters are passed
-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<div id="button-21165" class="cursor cmd tooltips cmd-widget container-fluid tooltipstered" onclick="jeedom.cmd.execute({id: '21165'});" data-type="action" data-cmd_id="21165" data-cmd_uid="cmd21165__814284044__">
<div class="button" style="border: 3px solid ghostwhite; border-radius: 53px; color: ghostwhite; width: 53px; height: 53px; font-size: 36px;">
<i id="icon-21165" class="jeedomapp-garage-ferme" style="line-height: 47px; color: ghostwhite;"></i>
</div>
</div>
<style type="text/css">
--root: {
--button_width: 60px;
--border_size: 3px;
--button_color: grey;
--icon_size:30px;
}
.button i.fa, .button i.fas, .button i.fab {
line-height:calc(var(--button_width) - var(--border_size) - var(--border_size));
color: var(--button_color);
}
.button {
box-sizing: border-box;
border: var(--border_size) solid var(--button_color);
border-radius: var(--button_width);
color: var(--button_color);
width: var(--button_width);
height: var(--button_width);
display: block;
text-align: center;
cursor: pointer;
font-size: var(--icon_size);
margin: 0;
font-weight:400;
}
</style>
<script type="text/javascript">
$(function() {
var buttonSize = is_numeric('53') ? parseFloat('53'):60;
var borderSize = is_numeric('3') ? parseFloat('3'):3;
var iconSize = is_numeric('36') ? parseFloat('36'):30;
var color = ('ghostwhite' !='#'+'couleur#') ? "ghostwhite":"white";
$("#button-21165 .button").css("border", borderSize+"px solid "+color);
$("#button-21165 .button").css("border-radius", buttonSize+"px");
$("#button-21165 .button").css("color", color);
$("#button-21165 .button").css("width", buttonSize+"px");
$("#button-21165 .button").css("height", buttonSize+"px");
$("#button-21165 .button").css("font-size", iconSize+"px");
var lineheight = buttonSize - borderSize - borderSize;
$("#button-21165 .button i.fa, #button-21165 .button i.fas, #button-21165 .button i.fab").css("line-height",lineheight+"px");
$("#button-21165 .button i.fa, #button-21165 .button i.fas, #button-21165 .button i.fab").css("color",color);
var type = ('jeedomapp-garage-ferme' !='#'+'type#') ? "jeedomapp-garage-ferme":"fa";
var icon = (''!='#'+'icone#') ? "" : "fa-lock";
$("#icon-21165").removeClass().addClass(type+" "+icon);
});
// Touch start
$("#button-21165").on("mousedown", function() {
return $(this).css({
"transform": "scale(.9)"
});
});
// Touch end
$("#button-21165").on("mouseup", function() {
return $(this).css({
"transform": "scale(1)"
});
});
</script></center></td></tr><tr><td class="tableCmdcss" style="font-family:Rubik-light;text-align:center;vertical-align:middle;width:70px;height:62px;" data-line="3" data-column="1"><center><!--
Widget name : multi_icon_switch_mmi
Author : geqr
Website : www.ma-maison-intelligente.fr
Tutorial : http://ma-maison-intelligente.fr/2020/04/widget-multi-icone-pour-votre-design-jeedom/
Last Update : 20200426 - update to remove root properties when parameters are passed
-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<div id="button-21168" class="cursor cmd tooltips cmd-widget container-fluid tooltipstered" onclick="jeedom.cmd.execute({id: '21168'});" data-type="action" data-cmd_id="21168" data-cmd_uid="cmd21168__814284044__">
<div class="button" style="border: 3px solid ghostwhite; border-radius: 53px; color: ghostwhite; width: 53px; height: 53px; font-size: 36px;">
<i id="icon-21168" class="mdi-window-shutter-open Mdi" style="line-height: 47px; color: ghostwhite;"></i>
</div>
</div>
<style type="text/css">
--root: {
--button_width: 60px;
--border_size: 3px;
--button_color: grey;
--icon_size:30px;
}
.button i.fa, .button i.fas, .button i.fab {
line-height:calc(var(--button_width) - var(--border_size) - var(--border_size));
color: var(--button_color);
}
.button {
box-sizing: border-box;
border: var(--border_size) solid var(--button_color);
border-radius: var(--button_width);
color: var(--button_color);
width: var(--button_width);
height: var(--button_width);
display: block;
text-align: center;
cursor: pointer;
font-size: var(--icon_size);
margin: 0;
font-weight:400;
}
</style>
<script type="text/javascript">
$(function() {
var buttonSize = is_numeric('53') ? parseFloat('53'):60;
var borderSize = is_numeric('3') ? parseFloat('3'):3;
var iconSize = is_numeric('36') ? parseFloat('36'):30;
var color = ('ghostwhite' !='#'+'couleur#') ? "ghostwhite":"white";
$("#button-21168 .button").css("border", borderSize+"px solid "+color);
$("#button-21168 .button").css("border-radius", buttonSize+"px");
$("#button-21168 .button").css("color", color);
$("#button-21168 .button").css("width", buttonSize+"px");
$("#button-21168 .button").css("height", buttonSize+"px");
$("#button-21168 .button").css("font-size", iconSize+"px");
var lineheight = buttonSize - borderSize - borderSize;
$("#button-21168 .button i.fa, #button-21168 .button i.fas, #button-21168 .button i.fab").css("line-height",lineheight+"px");
$("#button-21168 .button i.fa, #button-21168 .button i.fas, #button-21168 .button i.fab").css("color",color);
var type = ('mdi-window-shutter-open' !='#'+'type#') ? "mdi-window-shutter-open":"fa";
var icon = ('Mdi'!='#'+'icone#') ? "Mdi" : "fa-lock";
$("#icon-21168").removeClass().addClass(type+" "+icon);
});
// Touch start
$("#button-21168").on("mousedown", function() {
return $(this).css({
"transform": "scale(.9)"
});
});
// Touch end
$("#button-21168").on("mouseup", function() {
return $(this).css({
"transform": "scale(1)"
});
});
</script></center></td><td class="tableCmdcss" style="font-family:Rubik-light;text-align:center;vertical-align:middle;width:70px;height:62px;" data-line="3" data-column="2"><center><!--
Widget name : multi_icon_switch_mmi
Author : geqr
Website : www.ma-maison-intelligente.fr
Tutorial : http://ma-maison-intelligente.fr/2020/04/widget-multi-icone-pour-votre-design-jeedom/
Last Update : 20200426 - update to remove root properties when parameters are passed
-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<div id="button-21166" class="cursor cmd tooltips cmd-widget container-fluid tooltipstered" onclick="jeedom.cmd.execute({id: '21166'});" data-type="action" data-cmd_id="21166" data-cmd_uid="cmd21166__814284044__">
<div class="button" style="border: 2px solid rgb(172, 172, 172); border-radius: 45px; color: rgb(172, 172, 172); width: 45px; height: 45px; font-size: 35px;">
<i id="icon-21166" class="mdi-car-cog Mdi" style="line-height: 41px; color: rgb(172, 172, 172);"></i>
</div>
</div>
<style type="text/css">
--root: {
--button_width: 60px;
--border_size: 3px;
--button_color: grey;
--icon_size:30px;
}
.button i.fa, .button i.fas, .button i.fab {
line-height:calc(var(--button_width) - var(--border_size) - var(--border_size));
color: var(--button_color);
}
.button {
box-sizing: border-box;
border: var(--border_size) solid var(--button_color);
border-radius: var(--button_width);
color: var(--button_color);
width: var(--button_width);
height: var(--button_width);
display: block;
text-align: center;
cursor: pointer;
font-size: var(--icon_size);
margin: 0;
font-weight:400;
}
</style>
<script type="text/javascript">
$(function() {
var buttonSize = is_numeric('45') ? parseFloat('45'):60;
var borderSize = is_numeric('2') ? parseFloat('2'):3;
var iconSize = is_numeric('35') ? parseFloat('35'):30;
var color = ('#acacac' !='#'+'couleur#') ? "#acacac":"white";
$("#button-21166 .button").css("border", borderSize+"px solid "+color);
$("#button-21166 .button").css("border-radius", buttonSize+"px");
$("#button-21166 .button").css("color", color);
$("#button-21166 .button").css("width", buttonSize+"px");
$("#button-21166 .button").css("height", buttonSize+"px");
$("#button-21166 .button").css("font-size", iconSize+"px");
var lineheight = buttonSize - borderSize - borderSize;
$("#button-21166 .button i.fa, #button-21166 .button i.fas, #button-21166 .button i.fab").css("line-height",lineheight+"px");
$("#button-21166 .button i.fa, #button-21166 .button i.fas, #button-21166 .button i.fab").css("color",color);
var type = ('mdi-car-cog' !='#'+'type#') ? "mdi-car-cog":"fa";
var icon = ('Mdi'!='#'+'icone#') ? "Mdi" : "fa-lock";
$("#icon-21166").removeClass().addClass(type+" "+icon);
});
// Touch start
$("#button-21166").on("mousedown", function() {
return $(this).css({
"transform": "scale(.9)"
});
});
// Touch end
$("#button-21166").on("mouseup", function() {
return $(this).css({
"transform": "scale(1)"
});
});
</script></center></td></tr></tbody></table>
</center>
</div>
<script>
if ('21148' != ''){
$('.eqLogic[data-eqLogic_uid=eqLogic1915__814284044__] .refresh').on('click', function () {
jeedom.cmd.execute({id: '21148'});
});
}else{
$('.eqLogic[data-eqLogic_uid=eqLogic1915__814284044__] .refresh').remove();
}
</script>
</div>
Si j’appuie :
<div class="eqLogic eqLogic-widget allowResize allowReorderCmd allowLayout eqLogic_layout_table jeedomAlreadyPosition noResize hideEqLogicName context-menu-disabled" data-eqtype="virtual" data-eqlogic_id="1915" data-eqlogic_uid="eqLogic1915__1777855253__" data-version="dashboard" data-translate-category="" data-category="" data-tags="" style="width: 142px; height: 157px;" data-plan_id="3785" data-zoom="1"><center class="widget-name">
<span class="warning tooltipstered">
<i class=""></i>
</span>
<span class="cmd refresh pull-right cursor" data-cmd_id="21148">
<i class="fas fa-sync"></i>
</span>
<span class="reportModeVisible">Ouvrants <span class="object_name">Panel</span></span>
<a href="#" class="reportModeHidden">Ouvrants <span class="object_name">Panel</span></a>
</center><div class="verticalAlign">
<center>
<table style="width:140px;" class="tableCmd" data-line="3" data-column="2"><tbody><tr><td class="tableCmdcss" style="font-family:Rubik-light;background-color:ghostwhite;color: black;font-size:13px;column-span:all;text-align:center;" data-line="1" data-column="1"><center>Ouvrants & Accès</center></td><td class="tableCmdcss" style="font-family:Rubik-light;" data-line="1" data-column="2"><center></center></td></tr><tr><td class="tableCmdcss" style="font-family:Rubik-light;text-align:center;vertical-align:middle;width:70px;height:62px;" data-line="2" data-column="1"><center><!--
Widget name : multi_icon_switch_mmi
Author : geqr
Website : www.ma-maison-intelligente.fr
Tutorial : http://ma-maison-intelligente.fr/2020/04/widget-multi-icone-pour-votre-design-jeedom/
Last Update : 20200426 - update to remove root properties when parameters are passed
-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<div id="button-21164" class="cursor cmd tooltips cmd-widget container-fluid tooltipstered" onclick="jeedom.cmd.execute({id: '21164'});" data-type="action" data-cmd_id="21164" data-cmd_uid="cmd21164__1777855253__">
<div class="button" style="border: 3px solid rgb(218, 48, 55); border-radius: 53px; color: rgb(218, 48, 55); width: 53px; height: 53px; font-size: 20px;">
<i id="icon-21164" class="jeedom-portail_ouvert" style="line-height: 47px; color: rgb(218, 48, 55);"></i>
</div>
</div>
<style type="text/css">
--root: {
--button_width: 60px;
--border_size: 3px;
--button_color: grey;
--icon_size:30px;
}
.button i.fa, .button i.fas, .button i.fab {
line-height:calc(var(--button_width) - var(--border_size) - var(--border_size));
color: var(--button_color);
}
.button {
box-sizing: border-box;
border: var(--border_size) solid var(--button_color);
border-radius: var(--button_width);
color: var(--button_color);
width: var(--button_width);
height: var(--button_width);
display: block;
text-align: center;
cursor: pointer;
font-size: var(--icon_size);
margin: 0;
font-weight:400;
}
</style>
<script type="text/javascript">
$(function() {
var buttonSize = is_numeric('53') ? parseFloat('53'):60;
var borderSize = is_numeric('3') ? parseFloat('3'):3;
var iconSize = is_numeric('20') ? parseFloat('20'):30;
var color = ('#da3037' !='#'+'couleur#') ? "#da3037":"white";
$("#button-21164 .button").css("border", borderSize+"px solid "+color);
$("#button-21164 .button").css("border-radius", buttonSize+"px");
$("#button-21164 .button").css("color", color);
$("#button-21164 .button").css("width", buttonSize+"px");
$("#button-21164 .button").css("height", buttonSize+"px");
$("#button-21164 .button").css("font-size", iconSize+"px");
var lineheight = buttonSize - borderSize - borderSize;
$("#button-21164 .button i.fa, #button-21164 .button i.fas, #button-21164 .button i.fab").css("line-height",lineheight+"px");
$("#button-21164 .button i.fa, #button-21164 .button i.fas, #button-21164 .button i.fab").css("color",color);
var type = ('jeedom-portail_ouvert' !='#'+'type#') ? "jeedom-portail_ouvert":"fa";
var icon = (''!='#'+'icone#') ? "" : "fa-lock";
$("#icon-21164").removeClass().addClass(type+" "+icon);
});
// Touch start
$("#button-21164").on("mousedown", function() {
return $(this).css({
"transform": "scale(.9)"
});
});
// Touch end
$("#button-21164").on("mouseup", function() {
return $(this).css({
"transform": "scale(1)"
});
});
</script></center></td><td class="tableCmdcss" style="font-family:Rubik-light;text-align:center;vertical-align:middle;width:70px;height:62px;" data-line="2" data-column="2"><center><!--
Widget name : multi_icon_switch_mmi
Author : geqr
Website : www.ma-maison-intelligente.fr
Tutorial : http://ma-maison-intelligente.fr/2020/04/widget-multi-icone-pour-votre-design-jeedom/
Last Update : 20200426 - update to remove root properties when parameters are passed
-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<div id="button-21165" class="cursor cmd tooltips cmd-widget container-fluid tooltipstered" onclick="jeedom.cmd.execute({id: '21165'});" data-type="action" data-cmd_id="21165" data-cmd_uid="cmd21165__1777855253__">
<div class="button" style="border: 3px solid ghostwhite; border-radius: 53px; color: ghostwhite; width: 53px; height: 53px; font-size: 36px;">
<i id="icon-21165" class="jeedomapp-garage-ferme" style="line-height: 47px; color: ghostwhite;"></i>
</div>
</div>
<style type="text/css">
--root: {
--button_width: 60px;
--border_size: 3px;
--button_color: grey;
--icon_size:30px;
}
.button i.fa, .button i.fas, .button i.fab {
line-height:calc(var(--button_width) - var(--border_size) - var(--border_size));
color: var(--button_color);
}
.button {
box-sizing: border-box;
border: var(--border_size) solid var(--button_color);
border-radius: var(--button_width);
color: var(--button_color);
width: var(--button_width);
height: var(--button_width);
display: block;
text-align: center;
cursor: pointer;
font-size: var(--icon_size);
margin: 0;
font-weight:400;
}
</style>
<script type="text/javascript">
$(function() {
var buttonSize = is_numeric('53') ? parseFloat('53'):60;
var borderSize = is_numeric('3') ? parseFloat('3'):3;
var iconSize = is_numeric('36') ? parseFloat('36'):30;
var color = ('ghostwhite' !='#'+'couleur#') ? "ghostwhite":"white";
$("#button-21165 .button").css("border", borderSize+"px solid "+color);
$("#button-21165 .button").css("border-radius", buttonSize+"px");
$("#button-21165 .button").css("color", color);
$("#button-21165 .button").css("width", buttonSize+"px");
$("#button-21165 .button").css("height", buttonSize+"px");
$("#button-21165 .button").css("font-size", iconSize+"px");
var lineheight = buttonSize - borderSize - borderSize;
$("#button-21165 .button i.fa, #button-21165 .button i.fas, #button-21165 .button i.fab").css("line-height",lineheight+"px");
$("#button-21165 .button i.fa, #button-21165 .button i.fas, #button-21165 .button i.fab").css("color",color);
var type = ('jeedomapp-garage-ferme' !='#'+'type#') ? "jeedomapp-garage-ferme":"fa";
var icon = (''!='#'+'icone#') ? "" : "fa-lock";
$("#icon-21165").removeClass().addClass(type+" "+icon);
});
// Touch start
$("#button-21165").on("mousedown", function() {
return $(this).css({
"transform": "scale(.9)"
});
});
// Touch end
$("#button-21165").on("mouseup", function() {
return $(this).css({
"transform": "scale(1)"
});
});
</script></center></td></tr><tr><td class="tableCmdcss" style="font-family:Rubik-light;text-align:center;vertical-align:middle;width:70px;height:62px;" data-line="3" data-column="1"><center><!--
Widget name : multi_icon_switch_mmi
Author : geqr
Website : www.ma-maison-intelligente.fr
Tutorial : http://ma-maison-intelligente.fr/2020/04/widget-multi-icone-pour-votre-design-jeedom/
Last Update : 20200426 - update to remove root properties when parameters are passed
-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<div id="button-21168" class="cursor cmd tooltips cmd-widget container-fluid tooltipstered" onclick="jeedom.cmd.execute({id: '21168'});" data-type="action" data-cmd_id="21168" data-cmd_uid="cmd21168__1777855253__">
<div class="button" style="border: 3px solid ghostwhite; border-radius: 53px; color: ghostwhite; width: 53px; height: 53px; font-size: 36px;">
<i id="icon-21168" class="mdi-window-shutter-open Mdi" style="line-height: 47px; color: ghostwhite;"></i>
</div>
</div>
<style type="text/css">
--root: {
--button_width: 60px;
--border_size: 3px;
--button_color: grey;
--icon_size:30px;
}
.button i.fa, .button i.fas, .button i.fab {
line-height:calc(var(--button_width) - var(--border_size) - var(--border_size));
color: var(--button_color);
}
.button {
box-sizing: border-box;
border: var(--border_size) solid var(--button_color);
border-radius: var(--button_width);
color: var(--button_color);
width: var(--button_width);
height: var(--button_width);
display: block;
text-align: center;
cursor: pointer;
font-size: var(--icon_size);
margin: 0;
font-weight:400;
}
</style>
<script type="text/javascript">
$(function() {
var buttonSize = is_numeric('53') ? parseFloat('53'):60;
var borderSize = is_numeric('3') ? parseFloat('3'):3;
var iconSize = is_numeric('36') ? parseFloat('36'):30;
var color = ('ghostwhite' !='#'+'couleur#') ? "ghostwhite":"white";
$("#button-21168 .button").css("border", borderSize+"px solid "+color);
$("#button-21168 .button").css("border-radius", buttonSize+"px");
$("#button-21168 .button").css("color", color);
$("#button-21168 .button").css("width", buttonSize+"px");
$("#button-21168 .button").css("height", buttonSize+"px");
$("#button-21168 .button").css("font-size", iconSize+"px");
var lineheight = buttonSize - borderSize - borderSize;
$("#button-21168 .button i.fa, #button-21168 .button i.fas, #button-21168 .button i.fab").css("line-height",lineheight+"px");
$("#button-21168 .button i.fa, #button-21168 .button i.fas, #button-21168 .button i.fab").css("color",color);
var type = ('mdi-window-shutter-open' !='#'+'type#') ? "mdi-window-shutter-open":"fa";
var icon = ('Mdi'!='#'+'icone#') ? "Mdi" : "fa-lock";
$("#icon-21168").removeClass().addClass(type+" "+icon);
});
// Touch start
$("#button-21168").on("mousedown", function() {
return $(this).css({
"transform": "scale(.9)"
});
});
// Touch end
$("#button-21168").on("mouseup", function() {
return $(this).css({
"transform": "scale(1)"
});
});
</script></center></td><td class="tableCmdcss" style="font-family:Rubik-light;text-align:center;vertical-align:middle;width:70px;height:62px;" data-line="3" data-column="2"><center><!--
Widget name : multi_icon_switch_mmi
Author : geqr
Website : www.ma-maison-intelligente.fr
Tutorial : http://ma-maison-intelligente.fr/2020/04/widget-multi-icone-pour-votre-design-jeedom/
Last Update : 20200426 - update to remove root properties when parameters are passed
-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<div id="button-21166" class="cursor cmd tooltips cmd-widget container-fluid tooltipstered" onclick="jeedom.cmd.execute({id: '21166'});" data-type="action" data-cmd_id="21166" data-cmd_uid="cmd21166__1777855253__">
<div class="button" style="border: 2px solid rgb(172, 172, 172); border-radius: 45px; color: rgb(172, 172, 172); width: 45px; height: 45px; font-size: 35px;">
<i id="icon-21166" class="mdi-car-cog Mdi" style="line-height: 41px; color: rgb(172, 172, 172);"></i>
</div>
</div>
<style type="text/css">
--root: {
--button_width: 60px;
--border_size: 3px;
--button_color: grey;
--icon_size:30px;
}
.button i.fa, .button i.fas, .button i.fab {
line-height:calc(var(--button_width) - var(--border_size) - var(--border_size));
color: var(--button_color);
}
.button {
box-sizing: border-box;
border: var(--border_size) solid var(--button_color);
border-radius: var(--button_width);
color: var(--button_color);
width: var(--button_width);
height: var(--button_width);
display: block;
text-align: center;
cursor: pointer;
font-size: var(--icon_size);
margin: 0;
font-weight:400;
}
</style>
<script type="text/javascript">
$(function() {
var buttonSize = is_numeric('45') ? parseFloat('45'):60;
var borderSize = is_numeric('2') ? parseFloat('2'):3;
var iconSize = is_numeric('35') ? parseFloat('35'):30;
var color = ('#acacac' !='#'+'couleur#') ? "#acacac":"white";
$("#button-21166 .button").css("border", borderSize+"px solid "+color);
$("#button-21166 .button").css("border-radius", buttonSize+"px");
$("#button-21166 .button").css("color", color);
$("#button-21166 .button").css("width", buttonSize+"px");
$("#button-21166 .button").css("height", buttonSize+"px");
$("#button-21166 .button").css("font-size", iconSize+"px");
var lineheight = buttonSize - borderSize - borderSize;
$("#button-21166 .button i.fa, #button-21166 .button i.fas, #button-21166 .button i.fab").css("line-height",lineheight+"px");
$("#button-21166 .button i.fa, #button-21166 .button i.fas, #button-21166 .button i.fab").css("color",color);
var type = ('mdi-car-cog' !='#'+'type#') ? "mdi-car-cog":"fa";
var icon = ('Mdi'!='#'+'icone#') ? "Mdi" : "fa-lock";
$("#icon-21166").removeClass().addClass(type+" "+icon);
});
// Touch start
$("#button-21166").on("mousedown", function() {
return $(this).css({
"transform": "scale(.9)"
});
});
// Touch end
$("#button-21166").on("mouseup", function() {
return $(this).css({
"transform": "scale(1)"
});
});
</script></center></td></tr></tbody></table>
</center>
</div><script>
if ('21148' != ''){
$('.eqLogic[data-eqLogic_uid=eqLogic1915__1777855253__] .refresh').on('click', function () {
jeedom.cmd.execute({id: '21148'});
});
}else{
$('.eqLogic[data-eqLogic_uid=eqLogic1915__1777855253__] .refresh').remove();
}
</script></div>
Et reste comme ça ensuite, si le bouton revient à son état.
J’ai le même souci sur le tableau de suivi de confort/usage.
Un élément sur la taille des tableaux ?
Hello,
je viens de comparer les 2 codes.
En effet, on voit que le tableau saute :
<table style="width:140px;" class="tableCmd" data-line="3" data-column="2">
<tbody>
<tr>
<td class="tableCmdcss" style="font-family:Rubik-light;background-color:ghostwhite;color: black;font-size:13px;column-span:all;text-align:center;" data-line="1" data-column="1" colspan="2">
<center>
Ouvrants & Accès
</center>
</td>
</tr><tr>
<td class="tableCmdcss" style="font-family:Rubik-light;text-align:center;vertical-align:middle;width:70px;height:62px;" data-line="2" data-column="1">
<center><!--
et
<table style="width:140px;" class="tableCmd" data-line="3" data-column="2">
<tbody>
<tr>
<td class="tableCmdcss" style="font-family:Rubik-light;background-color:ghostwhite;color: black;font-size:13px;column-span:all;text-align:center;" data-line="1" data-column="1">
<center>
Ouvrants & Accès
</center>
</td>
<td class="tableCmdcss" style="font-family:Rubik-light;" data-line="1" data-column="2">
<center></center>
</td>
</tr>
<tr>
<td class="tableCmdcss" style="font-family:Rubik-light;text-align:center;vertical-align:middle;width:70px;height:62px;" data-line="2" data-column="1"><center><!--
Si on regarde les 2 codes :
On voit que le colspan=2 a sauté dans le deuxième (juste au dessus de center … au bout de la ligne).
as tu des scripts dans ta personnalisation avancée javascript?
je me demande ce que la classe « tableCmdcss » fait.
j’ai regardé le lien (dans ton code) pour le multi-icone.
je ne vois rien qui pourrait provoquer cela.
Je me souviens plus, as tu gardé la double flèche dans ton design ?
si tu cliques dessus? cela fait aussi sauter la mise en page?
On va trouver. ça doit pas être grand chose. Le plus dur, c’est de trouver la cause.
Non je n’ai pas gardé le refresh sur le virtuel affiché (dans le sens que je n’affiche pas le titre mais il est présent sur le dashboard). J’ai un CSS personnalisé pour gérer la bordure et le titre du tableau.
D’ailleurs quand cela « pête » même si je rappuie dessus, il ne se passe rien.
Sinon pour ne pas avoir le titre, je coche la case masquer le nom côté design :
Tu remarqueras que j’avais le code de bordure dans CSS avancé et non dans bordure. Je ne me souviens plus ce qui m’avait conduit à le mettre ça lors de mes essais. Je l’ai basculé dans bordure en changeant l’épaisseur à 1px pour avoir le même résultat graphique … et sans étonnement j’ai toujours le souci.
Avec
border:2px;border-style:solid;border-color:ghostwhite;vertical-align:middle;
Côté personnalisation avancée :
// Permet de fusionner les colonnes d'un tableau pour n'avoir qu'une colonne dans un tableau à plusieurs colonnes
function addColspan(Tabobjets) {
//console.log('fonction');
Tabobjets.each(function(objet) {
if ($(this).css("column-span") != undefined)
{
//console.log('column-span');
if ($(this).css("column-span") === 'all')
{
//console.log('column-span== all');
var nbtd = $(this).siblings().length + 1;
$($(this).siblings()).remove();
$(this).attr('colspan',nbtd);
}
else
{
//debugger
var nb = $(this).css("column-span");
//alert(nb);
}
}
if ($(this).css("grid-column-start") != undefined)
{
var nb = $(this).css("grid-column-start");
if ($(this).css("grid-column-start") != 'auto' && $(this).css("grid-column-start") != '')
{
for(let i=0;i<nb;i++)
{
//debugger
if ($(this).next() != undefined)
{
$($(this).next()).remove();
}
}
$(this).attr('colspan',nb);
}
}
if ($(this).css("grid-row-start") != undefined)
{
var nb = $(this).css("grid-row-start");
var idCol = $(this).attr('data-column')
if ($(this).css("grid-row-start") != 'auto' && $(this).css("grid-row-start") != '')
{
var elt = $(this).parent('tr');
for(let i=0;i<nb;i++)
{
if (elt.next() != undefined)
{
elt = elt.next();
if (elt.children('[data-column=' + idCol +']') != undefined)
{
elt.children('[data-column=' + idCol +']').remove();
}
}
}
$(this).attr('rowspan',nb);
}
}
});
};
$(function() {
$('body').on('jeedom_page_load', function (event) {
setTimeout(function() {
// addColspan($('div.eqLogic-widget[data-plan_id] td'))
addColspan($('td'))
}, 1000)
// setInterval(function() {
// addColspan($('div.eqLogic-widget[data-plan_id] td'))
// }, 5000)
})
})
Côté CSS, j’utilise quelques trucs de @dJuL (pour le background), et @kiboost pour l’affichage dashboard :
/* applique la fonte pour toutes les pages */
font-family:Rubik-light;
/* site de kiboost */
/* https://kiboost.github.io/jeedom_docs/jeedomV4Tips/Interface/fr_FR/ */
/* changement des couleurs par catégorie d'équipement */
:root {
--cat-security-color: 155, 75, 70;
--cat-heating-color: 46, 141, 205;
--cat-automatism-color: 128, 128, 128;
--cat-light-color: 243, 156, 18;
--cat-multimedia-color: 52, 73, 94;
--cat-energy-color: 46, 176, 75;
--cat-other-color: 25, 188, 156;
--cat-scenario-color: 127, 140, 141;
}
/* pour libérer la largeur des cases des tableaux et fixer directement dans le virtuel */
.eqLogic-widget .tableCmdcss div.cmd-widget {
min-width: unset;
}
.tab-content .table.table-bordered.table-condensed
{
width: calc(100% - 30px);
}
/* changement des couleurs de scénario */
:root {
--scBlocIF: rgb(65,90,110);
--scBlocElse: rgb(50,75,95);
--scBlocACTION: rgb(132,120,112);
--scBlocIN: rgb(75,128,62);
--scBlocAT: rgb(92,122,132);
--scBlocFOR: rgb(152,116,22);
--scBlocCODE: rgb(160,60,25);
--scBlocCOM: rgb(60,60,60);
--scBlocSep: rgb(35,35,35);
}
/* titre à gauche dans le dashboard */
[data-page="dashboard"] legend {
text-align: left !important;
}
/* taille du résumé */
.objectSummaryParent {
font-size: 14px;
}
/* https://community.jeedom.com/t/personnalisation-avancee-dark-sobre-light-jeedom-v4/10345/5 */
/* ajout du fond d'écran darksobre */
body[data-theme="core2019_Dark"] .backgroundforJeedom {
background-image: url("/core/themes/darksobre/background.jpg")!important;
background-size: cover;
opacity:0.9;
}
body[data-theme="core2019_Light"] .backgroundforJeedom {
background-image: url("/core/themes/darksobre/background.jpg")!important;
background-size: cover;
opacity:0.9;
}
body[data-theme="core2019_Legacy"] .backgroundforJeedom {
background-image: url("/core/themes/darksobre/background.jpg")!important;
background-size: cover;
opacity:0.9;
}
J’avais déjà le souci avec.
La question que je me pose est est-ce que la taille des cases/tableaux ne « bloquent » pas cette fusion quand les éléments de ce dernier vivent ?
J’ai réduit la taille des icones dans le tableau par exemple, de 53 à 50 soit 6 px de gagné.
Pour info, j’ai fixé en général largeur et taille du tableau pour éviter son formatage n’importe comment.
Donc plus petit :
Et si j’appuie sur un bouton et que l’icone change :
Et là je me dis … j’avais oublié !
J’utilise un code de @noodom qui change les options d’un widget (ici la couleur et l’icone !).
Le problème est peut être là !
Un scénario qui change icone/couleur :
Qui appelle un scénario code php :
Scénario de modification de paramètre d'une commande
2 paramètrages possibles pour les tags à passer au scénario (par id ou nom de commande) :
- idCommande (id de la commande info), nomParametre (nom du paramètre), valeurParametre (valeur du paramètre)
- nomCommande (nom de la commande info), nomParametre (nom du paramètre), valeurParametre (valeur du paramètre)
!! IMPORTANT !! : pour le nom de la commande, ne pas mettre les # : mettre sous forme [Objet][Equipement][Commande]
développé par @noodom, merci à @salvialf pour le code permettant de modifier un paramètre de commande
Récupération des tags passés en paramètres.
Voilà le code du scénario :
//Scénario de modification de paramètre d'une commande
// 2 paramètrages possibles pour les tags à passer au scénario (par id ou nom de commande) :
// - idCommande (id de la commande info), nomParametre (nom du paramètre), valeurParametre (valeur du paramètre)
// - nomCommande (nom de la commande info), nomParametre (nom du paramètre), valeurParametre (valeur du paramètre)
//
// !! IMPORTANT !! : pour le nom de la commande, ne pas mettre les # : mettre sous forme [Objet][Equipement][Commande]
//
// développé par @noodom, merci à @salvialf pour le code permettant de modifier un paramètre de commande
// Récupération des tags passés en paramètres.
$tags = $scenario->getTags();
// initialisation de variables locales
$tags['#erreur#'] = "";
if ((!empty($tags['#idCommande#']) || !empty($tags['#nomCommande#'])) && !empty($tags['#nomParametre#']) && isset($tags['#valeurParametre#'])) {
$scenario->setLog("- Modification du paramètre ".$tags['#nomParametre#']." de la commande ".$tags['#nomCommande#']." : ".$tags['#valeurParametre#']);
// Récupération de la commande en fonction de son id ou de son nom passés en paramètre
try {
if ($tags['#idCommande#'] != "") {
$scenario->setLog("Récupération de la commande d'id ".$tags['#idCommande#']);
$cmd=cmd::byId($tags['#idCommande#']);
if (!is_object($cmd)) {
// Commande non trouvée
$tags['#erreur#'] = "Commande non trouvée !";
$scenario->setTags($tags);
}
}
else {
$scenario->setLog("Récupération de la commande #".$tags['#nomCommande#']."#");
$cmd=cmd::byString('#'.$tags['#nomCommande#'].'#');
}
}
catch (Exception $e) {
// Commande non trouvée
$tags['#erreur#'] = "Erreur de récupération de commande !";
}
if ($tags['#erreur#'] == "") {
// Log de la valeur de la commande
//$valeurCommande=$cmd->execCmd();
//$scenario->setLog("- Valeur de la commande : ".$valeurCommande);
// Mise à jour du paramètre
$arr = $cmd->getDisplay('parameters');
$scenario->setLog("- Mise à jour du paramètre ".$tags['#nomParametre#']." : ".$tags['#valeurParametre#']);
$arr[$tags['#nomParametre#']] = $tags['#valeurParametre#'];
$cmd->setDisplay('parameters', $arr);
$cmd->save();
}
}
else {
$tags['#erreur#'] = "Pas de nom, ni d'id de commande ou pas de nom de paramètre ou pas de valeur de paramètre";
}
if ($tags['#erreur#'] != "") {
// Erreur de modification de paramètre
$scenario->setLog("*** ERREUR de modification de paramètre (".$tags['#erreur#'].") : "
."nomCommande=".$tags['#nomCommande#']
.", idCommande=".$tags['#idCommande#']
.", nomParametre=".$tags['#nomParametre#']
.", valeurParametre=".$tags['#valeurParametre#']);
}
else {
// Pas d'erreur de modification
$scenario->setLog("*** MODIFICATION OK avec les paramètres : "
."nomCommande=".$tags['#nomCommande#']
.", idCommande=".$tags['#idCommande#']
.", nomParametre=".$tags['#nomParametre#']
.", valeurParametre=".$tags['#valeurParametre#']);
}
$scenario->setTags($tags);
Hello,
Je ne pense pas que la taille joue.
on voit bien qu’il régénère l’affichage sans appeler le script javascript.
(il vire le Colspan= 2 et régénère le TD suivant (que mon code enlève normalement).
Je pense que tu tiens quelque chosé avec le code de Nodom.
Pour être sur, il faudrait temporairement décocher l’action qui appelle le scénario.
Je pense que le soucis peut venir de la (dans le code PHP) :
$cmd->setDisplay('parameters', $arr);
$cmd->save();
Il faudrait de nouveau appeler la fonction Javascript pour qu’il remette bien le tableau.
Mais je t’avoue que je ne sais pas comment faire pour le moment.
- Soit on le déclenche du PHP.
- Soit on sait qu’elle fonctionne cela lance en JS et on lance à partir de la
@noodom, ton avis ?
Merci @olivvv59, peut-être ajouté 200 ou 300ms à la fin du code php de @noodom, relancer les codes de personnalisation avancée ?
je te confirme que j’ai fait un essai si je retire le changement d’icone par le code PHP, pas de pb de tableau… sauf sur certains de mes widgets où je change quelque chose (taille d’icone par exemple en fonction de l’état).
du coup, y a t’il possibilité de faire de même dans le code d’un widget sur le refresh, appeler la fonction qui reformate le tableau ?
Faudrait que je vois avec @noodom, s’il sait comment je peux appeler la fonction JS suite à son script PHP.
- Soit appeler du JS à partir du PHP
- Soit capter un évènement particulier sur la page (refresh, …) qui nous permettrait d’appeler de nouveau la fonction JS au bon moment.
@kiboost , ne saurais tu pas sur quel évènement peut on se baser après la maj du design (ou d’une tuile) en PHP?
