Aide pour origine appel fonction toHtml

Bonjour à tous, j’ai un souci d’affichage pour un de mes plugins entre un design et le dashboard, est ce qu’il est possible de savoir l’origine de l’appel de la fonction toHtml? Pour résumer, lorsque j’affiche l’équipement du plugin sur un design au premier affichage l’équipement occupe bien la zone définie dans le design mais au rafraichissemnt de l’équipement (pas de la page) là il reprend la taille qu’il occupe sur le dashboard. J’ai trouvé la solution de mettre replace['#width#'] = '100%'; et replace['#height#'] = '100%'; mais là c’est pour le dashboard que ça ne va plus.

Merci d’avance

Salut,

Le paramètre de la fonction n’aide pas?

toHtml($_version = 'dashboard')

ou ce n’est pas ca que tu cherches? pas sur d’avoir compris

que tu appelles toHtml depuis un design ou depuis le dashboard c’est toujours la version ‹ dashboard › qui est utilisée (ou ‹ mobile › bien sûr).

Pour essayer d’être plus clair, si je pose l’équipement sur le dashboard et que re règle sa zone d’affichage sur largeur 500 et hauteur 500 par exemple. Je pose aussi cet équipement sur un design mais cette fois en 800 * 600 par exemple. Au premier affichage l’équipement sur le design occupe bien 800600 mais si j’utilise le refresh alors l’équipement va occuper une zone de 500500 dans la zone 800*600 car le refresh exécute $this->refreshWidget(); pour mettre à jour et en conséquence dans le remplace on retrouve les valeurs du display du dashboard: replace['#width#'] = '500px'; et replace['#height#'] = '500px';

Pour illustrer, ci dessous le desgn à 800*600 au 1er chagement:

Et si je clique sur le refresh (l’équipement sur le dashboar dest à environ 500*500):

Pour info voici le premier <div du fichier template:

<div class="eqLogic eqLogic-widget allowResize allowReorderCmd jeeHistoGraph #eqLogic_class# #class#"
     data-eqType="#eqType#"
     data-eqLogic_id="#id#"
     data-eqLogic_uid="#uid#"
     data-version="#version#"

     style="width:#width# !important; height:#height# !important; #style#;
            position: absolute; top:0; left:0; right:0; bottom:0;
            display: flex; flex-direction: column; overflow: hidden;">

ce qui me surprend c’est que le preToHtml dans les 2 cas (dashboard et design) sont exactement identique:

Pour le design:

0000|[2026-01-14 11:29:22] DEBUG  Generating HTML for equipment: 'compare' (ID: 29) version: dashboard replace: Array
0001|(
0002|[#id#] => 29
0003|[#name#] => compare
0004|[#name_display#] => compare
0005|[#eqLink#] => index.php?v=d&p=jeeHistoGraph&m=jeeHistoGraph&id=29
0006|[#category#] =>
0007|[#translate_category#] =>
0008|[#style#] =>
0009|[#logicalId#] =>
0010|[#object_name#] => test 2
0011|[#height#] => 494px
0012|[#width#] => 506px
0013|[#uid#] => eqLogic29__2017647637__
0014|[#refresh_id#] => 718
0015|[#version#] => dashboard
0016|[#alert_name#] =>
0017|[#alert_icon#] =>
0018|[#eqType#] => jeeHistoGraph
0019|[#custom_layout#] =>
0020|[#tags#] =>
0021|[#generic_type#] =>
0022|[#isVerticalAlign#] =>
0023|[#class#] =>
0024|[#divGraphInfo#] =>
0025|[#panelLink#] =>
0026|)

et pour le dashboard:

0030|[2026-01-14 11:29:24] DEBUG  Generating HTML for equipment: 'compare' (ID: 29) version: dashboard replace: Array
0031|(
0032|[#id#] => 29
0033|[#name#] => compare
0034|[#name_display#] => compare
0035|[#eqLink#] => index.php?v=d&p=jeeHistoGraph&m=jeeHistoGraph&id=29
0036|[#category#] =>
0037|[#translate_category#] =>
0038|[#style#] =>
0039|[#logicalId#] =>
0040|[#object_name#] => test 2
0041|[#height#] => 494px
0042|[#width#] => 506px
0043|[#uid#] => eqLogic29__1835343051__
0044|[#refresh_id#] => 718
0045|[#version#] => dashboard
0046|[#alert_name#] =>
0047|[#alert_icon#] =>
0048|[#eqType#] => jeeHistoGraph
0049|[#custom_layout#] =>
0050|[#tags#] =>
0051|[#generic_type#] =>
0052|[#isVerticalAlign#] =>
0053|[#class#] =>
0054|[#divGraphInfo#] =>
0055|[#panelLink#] =>
0056|)

Salut,

Ça remonte mais lors du développement de solcast j’avais du me poser des questions autour de ça aussi.

J’avais fouillé dans le code et de mémoire autant on a un distingo pour savoir si on est sur un mobile, autant il me semble bien que j’avais trouvé que la distinction entre dashboard et design avait été shunté.

Autrement dit, un jour il a dû être prévu de savoir si on appelait depuis dashboard ou design, autant maintenant ce n’est plus le cas

Oui c’est bien le problème auquel je suis confronté. Je tourne en rond… En fait lorsque tu refresh que ce soit depuis un design ou le dashboard ça rafraîchi les 2 en même temps donc si tu appliques une option qui fonctionne pour l’un ça casse l’autre…

Hello,

A ce que je vois la taille de la tuile est bien respectée ? on dirait plutôt que c’est dans le container du Highcharts qu’il y a un soucis.

oui pour la tuile il n’y a pas de problème si je laisse style="width:#width# !important; height:#height# !important; mais alors la taille sur le design reprend celle du dashboard au premier refresh mais c’est peut être un comportement normal ou voulu…

Comme dit par @Bison il y a sans doute eu un jour l’intention de faire une différence dans les version mais maintenant tout est ramené à ‹ dashboard ›

	public static function versionAlias($_version, $_lightMode = true) {
		if ($_version == 'mview') {
			return 'mobile';
		}
		if ($_version == 'dview' || $_version == 'dplan' || $_version == 'plan' || $_version == 'view') {
			return 'dashboard';
		}
		return $_version;
	}

J’ai un peu de mal a comprendre :grin:
width:#width# !important; height:#height# !important; sont de toute façon obligatoire dans le div du template, sinon tu risque d’avoir des surprise sur le dashboard et il me semble que le !important n’est pas initialisé donc pas besoin.

Dans ton toHtml, est-ce que tu fais un replace de #width# et #height# ?

Je suis autodidacte donc certaines notions dont tu parles ne me causent pas beaucoup…

non parce qu’ils sont déjà dans le preToHtml (voir log ci dessous)

0041|[#height#] => 494px
0042|[#width#] => 506px

Je suis parti sur le principe d’afficher un template sans fixer de valeur c’est sans doute une erreur car dans ce cas là, d’après ce que je déduis de mes constatations, seul la taille du dashboard que l’on trouve donc dans le preToHtml est prise en compte. Je vais sans doute devoir passer par une commande template en y appliquant un cmd.info… pour m’en sortir mais je ne sais pas trop par quel bout le prendre.

On va reprendre a 0 :wink:

C’est pas un erreur, dans ton template il faut simplement avoir la présence de
width:#width#; height:#height#; #style#;

C’est vrai si tu affiche le dashboard, par contre en design (plan) c’est le script js qui vient remplacer les tailles , ces tailles tu les trouveras pas dans la config de l’équipement car elles sont save dans la base « plan » :

Il ne faut pas que tu ajoutes des style custo dans la div de l’eqLogic

position: absolute; top:0; left:0; right:0; bottom:0;
            display: flex; flex-direction: column; overflow: hidden;

tu risque de casser l’affichage, c’est une div qui est « gérée » par le core, si tu as des custom a faire, il faudrait plutot le faire dans un « sous-div ».
D’ailleur le top et left doivent déja casser la position en design je pense, si tu déplace la tuile et que tu refresh elle doit revenir en haut a gauche.

oui ça c’est ok :wink:

ok c’est enlevé

non y a rien qui bouge

oui je les avais bien trouvés dans la base plan mais comment récupérer ces valeurs pour remplacer celles déjà en #width# et #height#?

Pourquoi vouloir les remplacer ? si tu regarde en console de dev, normalement elle seront bien présentent.

et celles-ci correspondent normalement a ce que tu as dans la base « plan »

verifies si celles-ci sont identiques a l’initialisation et après refresh (refreshWidget)

parce que lorsque tu affiches pour la première fois tu as bien:

<div class="eqLogic eqLogic-widget allowResize allowReorderCmd jeeHistoGraph #eqLogic_class# jeedomAlreadyPosition noResize" data-eqtype="jeeHistoGraph" data-eqlogic_id="29" data-eqlogic_uid="eqLogic29__2010797978__" data-version="dashboard" style="position: absolute; inset: 0px; display: flex; flex-direction: column; overflow: hidden; width: 800px; height: 600px;" data-plan_id="14" data-zoom="1">

donc 800*600 et j’ai mon highcharts-container qui fait la bonne taille (il y en a 2 en hauteur donc c’est ok pour le 275px):

<div id="highcharts-0i148ud-0" dir="ltr" class="highcharts-container " style="position: relative; overflow: hidden; width: 784px; height: 275px; text-align: left; line-height: normal; z-index: 0; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); user-select: none; touch-action: manipulation; outline: none;">

mais quand je refreshWidget alors mon highcharts-container devient:

<div id="highcharts-plbw6u9-4686" dir="ltr" class="highcharts-container " style="position: relative; overflow: hidden; width: 495px; height: 222px; text-align: left; line-height: normal; z-index: 0; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); user-select: none; touch-action: manipulation; outline: none;" aria-hidden="false" tabindex="0">

Donc c’est bien ce que je disais :

Tu peux partager plus de ligne de ton template stp ?

pas de soucis, ci dessous c’est celui que je « bidouille » pas mal pour essayer de trouver une solution:


<div class="eqLogic eqLogic-widget allowResize allowReorderCmd jeeHistoGraph #eqLogic_class# #class#"
     data-eqType="#eqType#"
     data-eqLogic_id="#id#"
     data-eqLogic_uid="#uid#"
     data-version="#version#"

     style="width:#width# !important; height:#height# !important; #style#;
            position: absolute; top:0; left:0; right:0; bottom:0;
            display: flex; flex-direction: column; overflow: hidden;">
    <center class="widget-name" style="flex: 0 0 auto; font-size: 0.9em;">
        <span class="reportModeVisible">#name_display# <span class="object_name">#object_name#</span></span>
        <a href="#eqLink#" class="reportModeHidden">#name_display# <span class="object_name">#object_name#</span></a>
        <span class="cmd refresh pull-right cursor" data-cmd_id="#refresh_id#" title="Rafraîchir">
            <i class="fas fa-sync"></i>
        </span>
    </center>

<style>
    .jeeHistoGraph .graphs-container { 
        flex: 1; min-height: 0; overflow: hidden; 
        display: grid; gap: 8px; padding: 4px; box-sizing: border-box; 
    }

    /* Layout automatique */
    .jeeHistoGraph .graphs-container.layout-auto { grid-template: 1fr / 1fr; }
    .jeeHistoGraph .graphs-container.layout-auto[data-nb-graphs="2"] { grid-template: 1fr 1fr / 1fr; }
    .jeeHistoGraph .graphs-container.layout-auto[data-nb-graphs="3"] { grid-template: 1fr 1fr / repeat(2, 1fr); }
    .jeeHistoGraph .graphs-container.layout-auto[data-nb-graphs="3"] > div:nth-child(1) { grid-area: 1 / 1; }
    .jeeHistoGraph .graphs-container.layout-auto[data-nb-graphs="3"] > div:nth-child(2) { grid-area: 1 / 2; }
    .jeeHistoGraph .graphs-container.layout-auto[data-nb-graphs="3"] > div:nth-child(3) { grid-area: 2 / 1 / 3 / 3; }
    .jeeHistoGraph .graphs-container.layout-auto[data-nb-graphs="4"] { grid-template: 1fr 1fr / 1fr 1fr; }

    /* Layouts personnalisés */
    .jeeHistoGraph .graphs-container.layout-1col[data-nb-graphs="1"]{ grid-template: 1fr / 1fr; }
    .jeeHistoGraph .graphs-container.layout-1col[data-nb-graphs="2"]{ grid-template: repeat(2, 1fr) / 1fr; }
    .jeeHistoGraph .graphs-container.layout-1col[data-nb-graphs="3"]{ grid-template: repeat(3, 1fr) / 1fr; }
    .jeeHistoGraph .graphs-container.layout-1col[data-nb-graphs="4"]{ grid-template: repeat(4, 1fr) / 1fr; }
    .jeeHistoGraph .graphs-container.layout-1row[data-nb-graphs="1"]{ grid-template: 1fr / 1fr; }
    .jeeHistoGraph .graphs-container.layout-1row[data-nb-graphs="2"]{ grid-template: 1fr / repeat(2, 1fr); }
    .jeeHistoGraph .graphs-container.layout-1row[data-nb-graphs="3"]{ grid-template: 1fr / repeat(3, 1fr); }
    .jeeHistoGraph .graphs-container.layout-1row[data-nb-graphs="4"]{ grid-template: 1fr / repeat(4, 1fr); }
    .jeeHistoGraph .graphs-container.layout-2x2 { grid-template: 1fr 1fr / 1fr 1fr; }

    /* 1 grand + 2 petits */
    .jeeHistoGraph .graphs-container.layout-1big-2small {grid-template: 1fr 1fr / 1fr 1fr; }
    .jeeHistoGraph .graphs-container.layout-1big-2small > div:nth-child(1) { grid-area: 1 / 1 / 2 / 3; }
    .jeeHistoGraph .graphs-container.layout-1big-2small > div:nth-child(2) { grid-area: 2 / 1; }
    .jeeHistoGraph .graphs-container.layout-1big-2small > div:nth-child(3) { grid-area: 2 / 2; }

    /* 2 petits + 1 grand */
    .jeeHistoGraph .graphs-container.layout-2small-1big {grid-template: 1fr 1fr / 1fr 1fr; }
    .jeeHistoGraph .graphs-container.layout-2small-1big > div:nth-child(1) { grid-area: 1 / 1; }
    .jeeHistoGraph .graphs-container.layout-2small-1big > div:nth-child(2) { grid-area: 1 / 2; }
    .jeeHistoGraph .graphs-container.layout-2small-1big > div:nth-child(3) { grid-area: 2 / 1 / 3 / 3; }

    /* 3 graphiques : 2 en haut, 1 centré en bas */
    .jeeHistoGraph .graphs-container.layout-3grid {grid-template: 1fr 1fr / repeat(4, 1fr); }
    .jeeHistoGraph .graphs-container.layout-3grid > div:nth-child(1) { grid-area: 1 / 1 / 1 / 2; }
    .jeeHistoGraph .graphs-container.layout-3grid > div:nth-child(2) { grid-area: 1 / 3 / 1 / 4; }
    .jeeHistoGraph .graphs-container.layout-3grid > div:nth-child(3) { grid-area: 2 / 2 / 2 / 3; }

</style>
    <script src="/3rdparty/highstock/modules/timeline.js"></script>
    <script src="/3rdparty/highstock/modules/exporting.js"></script>
    <script src="/3rdparty/highstock/modules/export-data.js"></script>
    <script src="/3rdparty/highstock/modules/accessibility.js"></script>
    <script src="/3rdparty/highstock/highcharts-more.js"></script>
    <script src="/3rdparty/highstock/highcharts-3d.js"></script>
    <div class="graphs-container layout-#graphLayout#" data-layout="#graphLayout#" data-nb-graphs="#nbGraphs#" style="flex: 1; min-height: 0; overflow: hidden; display: grid; gap: 6px; padding: 0;">
        #graph_containers#
    </div>
    <div style="flex: 0 0 auto; text-align: right; font-size: 0.8em; padding: 2px 6px; color: #888;">
        <span>Powered by jeeHistoGraph v#coreVersion# for #version# #message#</span>
    </div>

<script>
        try {
            //Highcharts.setOptions({ time: { useUTC: false } });

            const uid = '#uid#';
            const nbGraphs = parseInt('#nbGraphs#') || 0;
            const now = Date.now();

            window.charts = window.charts || {};
            #chart_scripts#

        } catch(e) { 
            console.error('Erreur Highcharts jeeHistoGraph:', e); 
        }

        var urlParams = new URLSearchParams(window.location.search);
        var pageParam = urlParams.get('p');
        var isDesign = (pageParam === 'plan');  // 'plan' = Design, 'dashboard' = Dashboard

        if (isDesign) {
            // $('.eqLogic[data-eqLogic_uid=#uid#] .graphs-container > div').css('width', '100%').css('height', '100%');
        }

       
        if ('#refresh_id#' != '') {

            // Log pour debug (visible dans console navigateur)
            console.log('jeeHistoGraph: Mode détecté = ' + (isDesign ? 'Design (plan)' : 'Dashboard'));

            $('.eqLogic[data-eqLogic_uid=#uid#] .refresh').on('click', function () {
                    jeedom.cmd.execute({ id: '#refresh_id#' , value: { mode: isDesign ? 'design' : 'dashboard' } });
                }
            });
        } else {
            $('.eqLogic[data-eqLogic_uid=#uid#] .refresh').remove();
        }

    </script>
</div>

et #graph_containers# c’est ça:

$containerId = "graphContainer{$uid}_{$g}";
$graphContainers .= "<div id=\"{$containerId}\" style=\"height: 100%; width: 98%; margin: 0 1% 0 1%;\"></div>";

petite précision, si dans ma fonction toHtml je remplace les valeur des #width# et #height# du preToHtml par ‹ 100% › dans replace là ça fonctionne et ça redessine bien les graph du design sur toute la place disponible. Par contre ça rend l’affichage de l’équipement sur le dashboard complétement hs

si tu ajoute simplement width: 100% !important; dans le .graphs-container

.jeeHistoGraph .graphs-container { 
        flex: 1; min-height: 0; overflow: hidden; 
        display: grid; gap: 8px; padding: 4px; box-sizing: border-box;
        width: 100% !important;
    }

Merci mais ça ne fonctionne pas, le div de class hicharts-container continue à se redimensionner aux width et height de l’équipement du dashboard.