Forum Communauté Jeedom

par défit ça m'a pris moin de temps à tester que de te le détaillé

fait f12
tu y verras 2 class en pointant sur un chiffre
highcharts-yaxis-labels
highcharts-axis-labels
et les chiffres commence toujour par <text>
donc
.highcharts-xaxis-labels text
le html descriptif couleur brut

Code : Tout sélectionner

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
  <div class="line one">Nord</div>
  <div class="line two">Sud</div>
  <div class="line three">Serre</div>
<style>
.line {
  height:3px;
  width:250px;
  color: black;
  margin-bottom:10px;
  position: absolute;    
	border-radius : 10px;
box-shadow: 0px 0px 10px 4px rgba(119, 119, 119, 0.75);
-moz-box-shadow: 0px 0px 10px 4px rgba(119, 119, 119, 0.75);
-webkit-box-shadow: 0px 0px 10px 4px rgba(119, 119, 119, 0.75);
}
.one {
   background: blue;
  width:50px;
  bottom:0;
  top: 0px;


}
.two {
   background: yellow;
  width:50px;
  bottom:10;
  top: 20px;

}
.three {
   background: orange;
  width:50px;
  bottom:10;
  top: 40px;
}

.highcharts-xaxis-labels text {
    stroke: #7cb5ec;
  stroke-width: 0.5px;
}
.highcharts-yaxis-labels text {
    stroke: red;
  stroke-width: 0.5px;
}

  tspan {
    font-family:oboto-Light,Helvetica Neue,Arial,sans-serif;
font-size:12pt;
}
   /**  
  {stroke:#000!important;stroke-width: 0.5px; font-family:oboto-Light,Helvetica Neue,Arial,sans-serif; font-size:12pt;}

	fill: #7cb5ec;
    https://www.highcharts.com/docs/chart-design-and-style/style-by-css
  
  .highcharts-plot-band {
    fill: none;
 }
  .highcharts-plot-background {
     fill:#900909;
  }

.highcharts-button-box {
	display: none;
}

  .highcharts-yaxis-grid .highcharts-grid-line,
.highcharts-yaxis-grid .highcharts-minor-grid-line {
	display: none;
}


.highcharts-plot-border {
    stroke-width: 2px;
    stroke: green;
}

  .highcharts-plot-background {
     fill:none;
  }

  .highcharts-plot-band {
    fill: #90094c;
 }

  **/

</style>
<!--
[data-plan_id="461"] tspan
-->

parfois il est préférable de supprimé sa personnalisation afin de s'assurer quelle ne bloque pas ses essais

pour info en joignant les pseudo-classes structurelles le comportement couleur zoom non zoom peux changé

Super, merci beaucoup

J'avais bien été dans l'inspecteur de Chrome et trouvé le bon élément, mais c'est le " text" qui me manquait.

Donc la propriété "stroke" que tu utilise ajoute une espèce de contour à l'objet (ici le texte). Ca fonctionne bien.
Mais du coup, j'obtiens un texte flou, quelle que soit la taille du stroke que je mets :

: Annotation 2019-06-04 185409.jpg (723.38 Kio) Consulté 4587 fois

Il ne semble pas possible de modifier directement la couleur ("color" ou "fill"), c'est bien ça ?

winhex a écrit : ↑

04 juin 2019, 16:59

[...]

Code : Tout sélectionner

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
  <div class="line one">Nord</div>
  <div class="line two">Sud</div>
  <div class="line three">Serre</div>
<style>
.line {
  height:3px;
  width:250px;
  color: black;
  margin-bottom:10px;
  position: absolute;    
	border-radius : 10px;
box-shadow: 0px 0px 10px 4px rgba(119, 119, 119, 0.75);
-moz-box-shadow: 0px 0px 10px 4px rgba(119, 119, 119, 0.75);
-webkit-box-shadow: 0px 0px 10px 4px rgba(119, 119, 119, 0.75);
}
.one {
   background: blue;
  width:50px;
  bottom:0;
  top: 0px;


}
.two {
   background: yellow;
  width:50px;
  bottom:10;
  top: 20px;

}
.three {
   background: orange;
  width:50px;
  bottom:10;
  top: 40px;
}

.highcharts-xaxis-labels text {
    stroke: #7cb5ec;
  stroke-width: 0.5px;
}
.highcharts-yaxis-labels text {
    stroke: red;
  stroke-width: 0.5px;
}

  tspan {
    font-family:oboto-Light,Helvetica Neue,Arial,sans-serif;
font-size:12pt;
}
   /**  
  {stroke:#000!important;stroke-width: 0.5px; font-family:oboto-Light,Helvetica Neue,Arial,sans-serif; font-size:12pt;}

	fill: #7cb5ec;
    https://www.highcharts.com/docs/chart-design-and-style/style-by-css
  
  .highcharts-plot-band {
    fill: none;
 }
  .highcharts-plot-background {
     fill:#900909;
  }

.highcharts-button-box {
	display: none;
}

  .highcharts-yaxis-grid .highcharts-grid-line,
.highcharts-yaxis-grid .highcharts-minor-grid-line {
	display: none;
}


.highcharts-plot-border {
    stroke-width: 2px;
    stroke: green;
}

  .highcharts-plot-background {
     fill:none;
  }

  .highcharts-plot-band {
    fill: #90094c;
 }

  **/

</style>
<!--
[data-plan_id="461"] tspan
-->

En "bricolant" à partir de ton code, j'ai mis ça :

Code : Tout sélectionner

<style>
  tspan {
    color: white;
    fill: white;
  }
  .highcharts-xaxis-labels text {
    stroke: white;
    stroke-width: 0;
  }
  .highcharts-yaxis-labels text {
    stroke: white;
    stroke-width: 0;
  }
</style>

et ça me donne un texte parfait pour l'axe X, mais ça ne marche pas du tout pour l'axe Y : ce dernier reste uniquement avec le contour (stroke), la couleur interne n'est pas modifiée par le "span" qui marche pourtant sur l'axe X.

Et comme je n'y connais strictement rien en programmation web, le peu que j'arrive à comprendre grâce à Google, ben ça ne suffit pas à me dépanner, désolé

remplace et joue avec
c'est brut beaucoup de truc à supprimer (car inutile)
une simple copie du code js demo (avec modif css background et plot bland)
https://www.highcharts.com/demo/line-basic/dark-unica

: highcharts.png (58.48 Kio) Consulté 4563 fois

Code : Tout sélectionner

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
  <div class="line one">Nord</div>
  <div class="line two">Sud</div>
  <div class="line three">Serre</div>
<style>
.line {
  height:3px;
  width:250px;
  color: black;
  margin-bottom:10px;
  position: absolute;    
	border-radius : 10px;
box-shadow: 0px 0px 10px 4px rgba(119, 119, 119, 0.75);
-moz-box-shadow: 0px 0px 10px 4px rgba(119, 119, 119, 0.75);
-webkit-box-shadow: 0px 0px 10px 4px rgba(119, 119, 119, 0.75);
}
.one {
   background: blue;
  width:50px;
  bottom:0;
  top: 0px;


}
.two {
   background: yellow;
  width:50px;
  bottom:10;
  top: 20px;

}
.three {
   background: orange;
  width:50px;
  bottom:10;
  top: 40px;
}
     .highcharts-background {
  fill: #2a2a2b!important;

       }
 .highcharts-plot-band  
{
 //     display:none;
  //       fill: transparent;
        fill: none;
}
   /**  
.highcharts-xaxis-labels text {
    stroke: #7cb5ec;
  stroke-width: 0.5px;
}
.highcharts-yaxis-labels text {
    stroke: red;
  stroke-width: 0.5px;
}

  tspan {
    font-family:oboto-Light,Helvetica Neue,Arial,sans-serif;
font-size:12pt;
}

  {stroke:#000!important;stroke-width: 0.5px; font-family:oboto-Light,Helvetica Neue,Arial,sans-serif; font-size:12pt;}
https://la-cascade.io/combinateurs-et-pseudo-classes-css/
	fill: #7cb5ec;
    https://www.highcharts.com/docs/chart-design-and-style/style-by-css
  
  .highcharts-plot-band {
    fill: none;
 }
  .highcharts-plot-background {
     fill:#900909;
  }

.highcharts-button-box {
	display: none;
}

  .highcharts-yaxis-grid .highcharts-grid-line,
.highcharts-yaxis-grid .highcharts-minor-grid-line {
	display: none;
}


.highcharts-plot-border {
    stroke-width: 2px;
    stroke: green;
}

  .highcharts-plot-background {
     fill:none;
  }

  .highcharts-plot-band {
    fill: #90094c;
 }

  **/

</style>
<script>
  Highcharts.createElement('link', {
    href: 'https://fonts.googleapis.com/css?family=Unica+One',
    rel: 'stylesheet',
    type: 'text/css'
}, null, document.getElementsByTagName('head')[0]);
  
  Highcharts.theme = {
    colors: ['#2b908f', '#90ee7e', '#f45b5b', '#7798BF', '#aaeeee', '#ff0066',
        '#eeaaee', '#55BF3B', '#DF5353', '#7798BF', '#aaeeee'],
    chart: {

        style: {
            fontFamily: '\'Unica One\', sans-serif'
        },
        plotBorderColor: '#606063'
    },
    title: {
        style: {
            color: '#E0E0E3',
            textTransform: 'uppercase',
            fontSize: '20px'
        }
    },
    subtitle: {
        style: {
            color: '#E0E0E3',
            textTransform: 'uppercase'
        }
    },
    xAxis: {
        gridLineColor: '#707073',
        labels: {
            style: {
                color: '#E0E0E3'
            }
        },
        lineColor: '#707073',
        minorGridLineColor: '#505053',
        tickColor: '#707073',
        title: {
            style: {
                color: '#A0A0A3'

            }
        }
    },
    yAxis: {
        gridLineColor: '#707073',
        labels: {
            style: {
                color: '#E0E0E3'
            }
        },
        lineColor: '#707073',
        minorGridLineColor: '#505053',
        tickColor: '#707073',
        tickWidth: 1,
        title: {
            style: {
                color: '#A0A0A3'
            }
        }
    },
    tooltip: {
        backgroundColor: 'rgba(0, 0, 0, 0.85)',
        style: {
            color: '#F0F0F0'
        }
    },
    plotOptions: {
        series: {
            dataLabels: {
                color: '#B0B0B3'
            },
            marker: {
                lineColor: '#333'
            }
        },
        boxplot: {
            fillColor: '#505053'
        },
        candlestick: {
            lineColor: 'white'
        },
        errorbar: {
            color: 'white'
        }
    },
    legend: {
        itemStyle: {
            color: '#E0E0E3'
        },
        itemHoverStyle: {
            color: '#FFF'
        },
        itemHiddenStyle: {
            color: '#606063'
        }
    },
    credits: {
        style: {
            color: '#666'
        }
    },
    labels: {
        style: {
            color: '#707073'
        }
    },

    drilldown: {
        activeAxisLabelStyle: {
            color: '#F0F0F3'
        },
        activeDataLabelStyle: {
            color: '#F0F0F3'
        }
    },

    navigation: {
        buttonOptions: {
            symbolStroke: '#DDDDDD',
            theme: {
                fill: '#505053'
            }
        }
    },

    // scroll charts
    rangeSelector: {
        buttonTheme: {
            fill: '#505053',
            stroke: '#000000',
            style: {
                color: '#CCC'
            },
            states: {
                hover: {
                    fill: '#707073',
                    stroke: '#000000',
                    style: {
                        color: 'white'
                    }
                },
                select: {
                    fill: '#000003',
                    stroke: '#000000',
                    style: {
                        color: 'white'
                    }
                }
            }
        },
        inputBoxBorderColor: '#505053',
        inputStyle: {
            backgroundColor: '#333',
            color: 'silver'
        },
        labelStyle: {
            color: 'silver'
        }
    },

    navigator: {
        handles: {
            backgroundColor: '#666',
            borderColor: '#AAA'
        },
        outlineColor: '#CCC',
        maskFill: 'rgba(255,255,255,0.1)',
        series: {
            color: '#7798BF',
            lineColor: '#A6C7ED'
        },
        xAxis: {
            gridLineColor: '#505053'
        }
    },

    scrollbar: {
        barBackgroundColor: '#808083',
        barBorderColor: '#808083',
        buttonArrowColor: '#CCC',
        buttonBackgroundColor: '#606063',
        buttonBorderColor: '#606063',
        rifleColor: '#FFF',
        trackBackgroundColor: '#404043',
        trackBorderColor: '#404043'
    },

    // special colors for some of the
    legendBackgroundColor: 'rgba(0, 0, 0, 0.5)',
    background2: '#505053',
    dataLabelsColor: '#B0B0B3',
    textColor: '#C0C0C0',
    contrastTextColor: '#F0F0F3',
    maskColor: 'rgba(255,255,255,0.3)'
};

// Apply the theme
Highcharts.setOptions(Highcharts.theme);
 
</script>
<!--
[data-plan_id="461"] tspan
-->

ça fait pas de moi un pro
parfois faut tenté pour voir et surtout avoir un peu de chance

grace à toi

: perso highchart.png (66.03 Kio) Consulté 4549 fois

C'est bon, j'ai réussi, merci pour l'aide

J'ai fait comme tu as dit, j'ai recopié tout le code et supprimé bout par bout, jusqu'à ce que je tombe sur les deux éléments permettant de jouer sur les texte des axes.
Du coup il suffit de mettre ces 8 petites lignes dans son code HTML pour revenir à un texte standard et en fixer la couleur :

Code : Tout sélectionner

<script> // Modifie le texte des axes X et Y, s'applique sur la page entière
  Highcharts.theme = {
    xAxis: {labels: {style: {color: 'white'}}},
    yAxis: {labels: {style: {color: 'white'}}},
  };
  // Applique le thème :
  Highcharts.setOptions(Highcharts.theme);
</script>

J'ai toujours pas compris pourquoi le code de mon post précédent modifiait bien le texte de l'axe X, mais pas du tout celui de l'axe Y par contre

Par curiosité, si quelqu'un sait, je suis preneur de l'info ...

PS : à quoi sert le

SVP ?

J'ai modifié pour mettre l'ID de mon design, mais je n'ai pas constaté de différences avant ou après cette modif.

Salut,

Jef73 a écrit : ↑
05 juin 2019, 11:28
PS : à quoi sert le

SVP ?

J'ai modifié pour mettre l'ID de mon design, mais je n'ai pas constaté de différences avant ou après cette modif.

A rien, en HTML tous ce qui est entre  sont des commentaires
@+GargouilleBL

reste de test permetant de dissocier pour plusieurs graphique sur un design

jai gardé plus de chose pour mon besoin
pop up "tooltip" sur fond noir, petite barre au axe "tick",..

Code : Tout sélectionner

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
  <div class="line one">Nord</div>
  <div class="line two">Sud</div>
  <div class="line three">Serre</div>
<style>
.line {
  height:3px;
  width:250px;
  color: white;
  margin-bottom:10px;
  position: absolute;    
	border-radius : 10px;
box-shadow: 0px 0px 10px 4px rgba(119, 119, 119, 0.75);
-moz-box-shadow: 0px 0px 10px 4px rgba(119, 119, 119, 0.75);
-webkit-box-shadow: 0px 0px 10px 4px rgba(119, 119, 119, 0.75);
}
.one {
   background: blue;
  width:50px;
  bottom:0;
  top: 0px;


}
.two {
   background: yellow;
  width:50px;
  bottom:10;
  top: 20px;

}
.three {
   background: orange;
  width:50px;
  bottom:10;
  top: 40px;
}

 .highcharts-plot-band  
{fill: none;}
     /**  
  .highcharts-button
  {display:none;}
  
    
     .highcharts-background {
  fill: #2a2a2b!important;

       }
  
   /**  
.highcharts-xaxis-labels text {
    stroke: #7cb5ec;
  stroke-width: 0.5px;
}
.highcharts-yaxis-labels text {
    stroke: red;
  stroke-width: 0.5px;
}
**/
  tspan {
    font-family:oboto-Light,Helvetica Neue,Arial,sans-serif;
   // fill:white;
font-size:12pt;
}
/**
  
  {stroke:#000!important;stroke-width: 0.5px; font-family:oboto-Light,Helvetica Neue,Arial,sans-serif; font-size:12pt;}
https://la-cascade.io/combinateurs-et-pseudo-classes-css/
	fill: #7cb5ec;
    https://www.highcharts.com/docs/chart-design-and-style/style-by-css
  
  .highcharts-plot-band {
    fill: none;
 }
  .highcharts-plot-background {
     fill:#900909;
  }

.highcharts-button-box {
	display: none;
}

  .highcharts-yaxis-grid .highcharts-grid-line,
.highcharts-yaxis-grid .highcharts-minor-grid-line {
	display: none;
}


.highcharts-plot-border {
    stroke-width: 2px;
    stroke: green;
}

  .highcharts-plot-background {
     fill:none;
  }

  .highcharts-plot-band {
    fill: #90094c;
 }

  **/

</style>
<script>

 

  Highcharts.createElement('link', {
    href: 'https://fonts.googleapis.com/css?family=Unica+One',
    rel: 'stylesheet',
    type: 'text/css'
}, null, document.getElementsByTagName('head')[0]);
  
  Highcharts.theme = {

    xAxis: {

        labels: {
            style: {
                color: '#E0E0E3', // color bas
            }
        },
        lineColor: '#30ffad', // barre du bas

        tickColor: '#30ffad', // petit tick bas

    },
    yAxis: {
        gridLineColor: '#30ffad', // barre
        labels: {
            style: {
                color: '#e0e0e3', // color droite

            }
        },

        tickColor: '#30ffad', // petit tick droite
        tickWidth: 1,

    },
    tooltip: {
        backgroundColor: 'rgba(0, 0, 0, 0.85)',
        style: {

            color: '#F0F0F0',


        }
    },

    navigation: {
        buttonOptions: {
            theme: {
                fill: 'none'
            }
        }
    },

}



// Apply the theme
Highcharts.setOptions(Highcharts.theme);
 
 
</script>
<!--
[data-plan_id="461"] tspan
-->

le graphe à l'option transparence
derrier un simple html avec une couleur gradient
https://mycolor.space/gradient?ori=circ ... EB12&sub=1

Code : Tout sélectionner

<div style="height:100%;background-image: linear-gradient(to right top, #051937, #004d7a, #008793, #00bf72, #a8eb12);"> <!-- Modifiez height pour régler la hauteur du cadre -->
</div>

vu que je fais disparaître le graphe pour faire apparaître un résumé

: 20190605_163054.jpg (122.72 Kio) Consulté 4493 fois

pour moi
tu ouvres ta pages
le design se construit dont le graphe par défaut
ton html modifie le visuel
.
le graphe s'actualise via script/api et il doit calculé pour avoir un axe toujours optimum au rendu visuel tes barres non trop petite ou trop grande
donc l'actualisation réforme le design par défaut

Et pour ceux qui ont coché la case "fond transparent" mais se heurtent à l'affichage "jour" qui ajoute quand même des rectangles blanchâtres sur les données du jour :

Code : Tout sélectionner

<style>
  .highcharts-plot-bands-0 {
    display:none;} /* Masque les bandes pour le jour actuel si affichage "jour" */
</style>

j avais des 2 côtés la bande blanche
c'est du code plus haut
.highcharts-plot-band
{fill: none;}

Oui c'est ça : une bande fine sur la gauche et une autre plus large à droite (sur le jour actuel en fait).
La ligne que j'ai mise masque tout ça aussi.

C'est bien pratique cette possibilité de personnalisation d'un peu tout et n'importe quoi

Merci pour cette citation de post, je ne l'avais pas vue et c'est super pratique

Nota : tu as un lien "bizarre" dans le début de ton post

Hello, j'ai suivi ce fil super utile pour créer une petite interface perso. Elle fonctionne bien mais j'ai quelques widgets qui ne se rafraichissent pas en temps réel. Obligé de recharger la page pou mettre à jour leur état. Une idée de ce que je devrais faire pour résoudre ce petit souci?
Merci!!!

c'est normal car c'est à la lecture de la page que le css s'actualise

sinon pour la couleur d'un widget (core) badge

: badge couleur.png (11.82 Kio) Consulté 3995 fois

Code : Tout sélectionner

[data-cmd_id="2550"] .label-info {
    background-color: rgba(255,0,0,1)!important;
}

les couleurs rgb
https://www.w3schools.com/colors/colors_picker.asp
pour le rgba c'est le dernier chiffre pour l'opacité,transparence 1 ou 0.xx

donc du transparant avec une police rouge donnerai

Code : Tout sélectionner

[data-cmd_id="2550"] .label-info {
    background-color: rgba(255,0,0,0)!important;
  color:red;
}

changeons pour arrondir fond beige et police rouge comme l'image

Code : Tout sélectionner

[data-cmd_id="2550"] .label-info {
    background-color: rgba(255,230,153,1)!important;
  border-radius:2em;
  color:red;
}

Bonjour,

Quelqu'un saurait me dire si il est possible d'intégrer le résultat d'un js (url externe) dans un widget qui lui offrirait la scrollbar car le résultat du js sera plus grand que le param de hauteur du widget ?

Le js en question (jai mis le data-height à 1070 et mon widget serait limité à 300px par exemple) :

Code : Tout sélectionner

<a class="widget-tv" href="https://tv-programme.com" data-type="ce-soir" data-color="#dff0d8" data-width="300px" data-height="1070px">Programme TV</a><script async type="text/javascript" src="https://tv-programme.com/widget.js"></script>

Merci

bonjour si je comprend ta question
via style overflow
https://developer.mozilla.org/fr/docs/Web/CSS/overflow
tu as un exemple avec nos log
overflow: auto
viewtopic.php?f=30&t=45196#p733755

Bonjour @winhex
oui tu as bien compris.

Si je fais juste un html avec tes infos :

Code : Tout sélectionner

<div>
  <p style="overflow: auto; display: inline-block; width: 20em; height: 16em; border: dotted;">
    <a class="widget-tv" href="https://tv-programme.com" data-type="ce-soir" data-color="#dff0d8" data-width="300px" data-height="1700px">Programme TV</a>
    <script async type="text/javascript" src="https://tv-programme.com/widget.js"></script>
  </p>
</div>

Et que je le charge sur mon navigateur, c'est bien ce que je veux :

: Html.png (24.88 Kio) Consulté 3799 fois

Mais pour l'instant je n'ai pas réussi à le mettre dans un widget jeedom pour que ça scroll :

: WidgetGuide.png (34.8 Kio) Consulté 3799 fois

Donc c'est moi qui ne comprend pas

Et si tu l'encadrais dans un iframe en forçant la taille et l’ascenseur vertical ?

J'ai inspecté le virtuel résultat sur mon dash et je vois :

: zoneresult.png (28.22 Kio) Consulté 3756 fois

Apparemment ça force le overflow proposé par winhex à hidden et un param scrolling forcé aussi à no.

J'ai tenté de récup le js mais pas certain de tout avoir et on retrouve les param forcés :
n.setAttribute("style","overflow: hidden ...
n.setAttribute("scrolling","no"),

Code : Tout sélectionner

!function(){var r=function(){this.cursor=0};r.HOST="https://tv-programme.com",r.anchor="Programme TV",r.fn=r.prototype={newId:function(){return++this.cursor},init:function(){document.querySelectorAll("a.widget-tv").forEach(function(t){var i={href:t.getAttribute("href"),type:t.getAttribute("data-type"),nbchaines:t.getAttribute("data-nb-chaines"),height:t.getAttribute("data-height")||"380px",width:t.getAttribute("data-width")||"300px",color:t.getAttribute("data-color")||""},n=i.color?"&hover_color="+encodeURIComponent(i.color):"";i.nbchaines?(i.height=35+101*i.nbchaines+"px",e="&nb_chaines="+encodeURIComponent(i.nbchaines)):e="",r.HOST==i.href&&r.anchor==t.text&&this.build(t,r.HOST+"/widget.php?type="+i.type+n+e,i)}.bind(this))},build:function(t,e,i){var n=document.createElement("iframe");n.setAttribute("id","widget-tv-"+this.newId()),n.setAttribute("src",e),n.setAttribute("style","overflow: hidden; position: static; visibility: visible; display: inline-block; width: "+i.width+"; height: "+i.height+"; padding: 0px; border: none; max-width: 100%; min-width: 300px; margin-top: 0px; margin-bottom: 0px; min-height: 200px;"),n.setAttribute("scrolling","no"),n.setAttribute("frameBorder","0"),n.setAttribute("allowTransparency","true"),n.setAttribute("allowFullscreen","true"),t.parentNode.replaceChild(n,t)}},window.Widget=r}();var widget=new Widget;window.onload=widget.init.bind(widget);

Je ne connais pas suffisamment le code js pour savoir le récupérer en local et l'adapter.
ça me semble mort.

Merci pour votre aide.

rapidement (sans test)
dans le lien plus haut un overflow sur équipement (sondes dans tableau)
donc un widget sans limite de taille width, height
le crayon pour définir la tailletaille l'équipement
et un overflow soit via la config équipement soit via custom du sujet

Forum Communauté Jeedom

[S'inspirer] Postez vos Customisations (Javascipt / CSS)

Re: [S'inspirer] Postez vos Customisations (Javascipt / CSS)

Re: [S'inspirer] Postez vos Customisations (Javascipt / CSS)

Re: [S'inspirer] Postez vos Customisations (Javascipt / CSS)

Re: [S'inspirer] Postez vos Customisations (Javascipt / CSS)

Re: [S'inspirer] Postez vos Customisations (Javascipt / CSS)

Re: [S'inspirer] Postez vos Customisations (Javascipt / CSS)

Re: [S'inspirer] Postez vos Customisations (Javascipt / CSS)

Re: [S'inspirer] Postez vos Customisations (Javascipt / CSS)

Re: [S'inspirer] Postez vos Customisations (Javascipt / CSS)

Re: [S'inspirer] Postez vos Customisations (Javascipt / CSS)

Re: [S'inspirer] Postez vos Customisations (Javascipt / CSS)

Re: [S'inspirer] Postez vos Customisations (Javascipt / CSS)

Re: [S'inspirer] Postez vos Customisations (Javascipt / CSS)

Re: [S'inspirer] Postez vos Customisations (Javascipt / CSS)

Re: [S'inspirer] Postez vos Customisations (Javascipt / CSS)

Re: [S'inspirer] Postez vos Customisations (Javascipt / CSS)

Re: [S'inspirer] Postez vos Customisations (Javascipt / CSS)

Re: [S'inspirer] Postez vos Customisations (Javascipt / CSS)

Re: [S'inspirer] Postez vos Customisations (Javascipt / CSS)

Re: [S'inspirer] Postez vos Customisations (Javascipt / CSS)