Bonjour,
Au fil du temps j’ai partagé différents codes de Solid Gauge pour répondre à des demandes.
Aujourd’hui je m’aperçois que tout le monde a des versions différentes car je n’ai jamais pris le temps de faire un sujet dédié pour centraliser les évolutions du code.
Voici donc la dernière version du code de mon widget Solid Gauge :
Il y a une fonction à ajouter en personnalisation avancée dans le fichier custom.js que vous trouverez ici (merci @noodom) :
Bonjour Spine,
Superbe widget que j’utilisais avant mon passage en 4.4. et que j’avais du abandonné suite a ce passage du core en 4.4, mais quel bonheur d’enfin le retrouvé avec cette mise a jour que tu as réalisé. Merci beaucoup pour ton travail.
Par contre je te remonte un problème d’affichage : je les utilisent pour ma tension (220v) et j’ai un compteur triphasé.
Quand je met une ou trois gauge en affichage c’est OK, mais si j’en met que deux il y a un probleme d’affichage (voir capture écran)
T.
Bonjour,
Merci pour le retour.
Peux-tu me faire une capture d’écran des paramètres optionnels que tu utilises ?
Peux-tu remplacer temporairement les jauges à aiguille par des widgets core pour voir si il n’y aurait pas un souci d’interaction entre les deux widgets ?
Merci mais c’était l’inverse 
, Solid Gauge sur Voltage 1 et 2 et widgets core sur les autres, ne supprimes pas les paramètres optionnels comme ça ils seront déjà configurés quand tu repasseras sur le widget custom.
Effectivement, mauvaise compréhension. J’ai donc mis des widgets core sur toute les commandes et les widget solid gauge graduated sur voltage 1 et 2
Bonjour,
J’ai testé pas mal de choses et je ne reproduis vraiment pas :
Bonjour,
il doit effectivement y avoir une « interférence » sur la tuile, en essayant sur une autre tuile avec seulement 2 gauges, c’est bon
Je vais regarder ca de mon coté.
Merci pour ce superbe widget.
T.
Salut. Excellent widget.
J’ai un problème et c’est que les unités se superposent sur le graphique.
Si j’enlève les unités, ça s’adapte parfaitement
Bonjour,
Il faut soit augmenter la taille de la jauge soit diminuer la taille de la valeur.
Une préférence ?
Je regarde ce week-end pour ajouter les paramètres nécessaires.
Je pense que ce sera mieux avec une valeur réduite. vous ne pensez pas?
Je vais essayer de gérer les deux possibilités mais j’ai d’autres priorités, je vous tiens au courant dès que possible.
Salut,
Si ça vous dit…
J’ai simplement remplacé font-size: 24px par 22px
<div class="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#">
<!-- ################ Solid gauge ################
Widget name : cmd.info.numeric.solidGauge
Author : Spine
Inspiration : https://www.highcharts.com/demo/highcharts/gauge-solid
Last Uptade : 16/04/2024
-->
<script type="text/javascript" src="3rdparty/highstock/modules/solid-gauge.js"></script>
<div class="title #hide_name#">
<div class="cmdName">#name_display#</div>
</div>
<div class="content-sm">
<div id="solidGauge#uid#"></div>
</div>
<div class="timeCmd label label-default #history#" data-type="info"></div>
<div class="cmdStats #hide_history#">
<span title="{{Minimum}}" class="tooltips">#minHistoryValue#</span>|<span title="{{Moyenne}}"
class="tooltips">#averageHistoryValue#</span>|<span title="{{Maximum}}"
class="tooltips">#maxHistoryValue#</span> <i class="#tendance#"></i>
</div>
<template>
<div>height : 140 ({{Hauteur du conteneur}})</div>
<div>size : 100 ({{Taille}})</div>
<div>spacingTop : 0 ({{Espacement supérieur}})</div>
<div>startAngle : 180 ({{Angle de départ}})</div>
<div>endAngle : 540 ({{Angle de fin}})</div>
<div>backgroundColor : var(--el-defaultColor) ({{Couleur de fond}})</div>
<div>color1 : rgb(0, 255, 0) ({{1ère couleur de remplissage}})</div>
<div>color2 : rgb(255, 255, 0) ({{2ème couleur de remplissage}})</div>
<div>color3 : rgb(255, 0, 0) ({{3ème couleur de remplissage}})</div>
<div>min : 0 ({{Valeur minimum}})</div>
<div>max : 100 ({{Valeur maximum}})</div>
<div>tickInterval : (max - min) / 4 ({{Pas des ticks}})</div>
<div>tickColor : rgb(38, 38, 38) ({{Couleur des ticks}})</div>
<div>time : duration|date|GaugeIMG ({{Affiche durée ou date de la valeur}})</div>
</template>
<script>
var height#uid# = is_numeric('#height#') ? parseFloat('#height#') : 140;
var spacingTop#uid# = is_numeric('#spacingTop#') ? parseFloat('#spacingTop#') : 0;
var size#uid# = is_numeric('#size#') ? parseFloat('#size#') : 100;
var startAngle#uid# = is_numeric('#startAngle#') ? parseFloat('#startAngle#') : 180;
var endAngle#uid# = is_numeric('#endAngle#') ? parseFloat('#endAngle#') : 540;
var backgroundColor#uid# = ('#backgroundColor#' != '#' + 'backgroundColor#') ? '#backgroundColor#' : 'var(--el-defaultColor)';
var color1#uid# = ('#color1#' != '#' + 'color1#') ? '#color1#' : 'rgb(0, 255, 0)';
var color2#uid# = ('#color2#' != '#' + 'color2#') ? '#color2#' : 'rgb(255, 255, 0)';
var color3#uid# = ('#color3#' != '#' + 'color3#') ? '#color3#' : 'rgb(255, 0, 0)';
var min#uid# = is_numeric('#min#') ? parseFloat('#min#') : 0;
var max#uid# = is_numeric('#max#') ? parseFloat('#max#') : 100;
var tickInterval#uid# = is_numeric('#tickInterval#') ? parseFloat('#tickInterval#') : (max#uid# - min#uid#) / 4;
setTimeout(function () {
if (is_numeric('#state#')) {
var solidGauge#uid# = Highcharts.chart('solidGauge#uid#', {
chart: {
style: {
fontFamily: 'Roboto'
},
type: 'solidgauge',
plotBackgroundColor: null,
plotBackgroundImage: null,
backgroundColor: null,
plotBorderWidth: 0,
plotShadow: false,
height: height#uid#,
spacingTop: spacingTop#uid#,
spacingLeft: 0,
spacingRight: 0,
spacingBottom: 0,
borderWidth: 0
},
title: null,
pane: {
center: ['50%', '50%'],
size: size#uid#,
startAngle: startAngle#uid#,
endAngle: endAngle#uid#,
background: {
innerRadius: '70%',
outerRadius: '100%',
shape: 'arc',
borderWidth: 0,
backgroundColor: backgroundColor#uid#
}
},
tooltip: {
enabled: false
},
yAxis: {
stops: [
[0.3, color1#uid#],
[0.6, color2#uid#],
[0.9, color3#uid#]
],
lineWidth: 0,
minorTickInterval: null,
tickInterval: tickInterval#uid#,
tickWidth: 4,
tickLength: 15,
tickPosition: 'inside',
labels: {
enabled: false
},
min: min#uid#,
max: max#uid#,
zIndex: 6,
title: {
text: ''
}
},
labels: {
enabled: false
},
plotOptions: {
solidgauge: {
dataLabels: {
y: 9,
borderWidth: 0,
useHTML: true
}
}
},
credits: {
enabled: false
},
exporting: {
enabled: false
},
series: [{
name: '',
data: [Math.round(parseFloat('#state#') * 10) / 10],
radius: '100%',
innerRadius: '70%',
dataLabels: {
y: -22,
format:
'<span style="color: var(--link-color); font-size: 22px;">{y}</span>' +
'<span style="color: var(--link-color); font-size: 12px; position: relative; top: -8px;">#unite#</span>'
},
}]
});
}
jeedom.cmd.addUpdateFunction('#id#', function (_options) {
if (is_object(cmd = document.querySelector('.cmd[data-cmd_uid="#uid#"]'))) {
cmd.querySelector('.content-sm').setAttribute('title', '{{Date de valeur}}: ' + _options.valueDate + '<br>{{Date de collecte}}: ' + _options.collectDate);
if (jeeFrontEnd.jeedomVersion.substr(0, 3) >= 4.4) {
if ('#time#' == 'duration' || '#time#' == 'date') {
jeedom.cmd.displayDuration(_options.valueDate, cmd.querySelector('.timeCmd'), '#time#');
} else if ('#time#' == 'GaugeIMG') {
let week = ['dim.', 'lun.', 'mar.', 'mer.', 'jeu.', 'ven.', 'sam.'];
let date = new Date(_options.valueDate.replace(' ', 'T'));
let t = _options.valueDate.split(/[- :]/);
let format = week[date.getDay()] + " " + t[2] + "/" + t[1];
let time = "à " + t[3] + ":" + t[4];
cmd.querySelector('.timeCmd').html(format + '<br>' + time).addClass('GaugeIMG');
}
} else {
let cmd = $('.cmd[data-cmd_id=#id#]');
if ('#time#' == 'duration' || '#time#' == 'date') {
jeedom.cmd.displayDuration(_options.valueDate, cmd.find('.timeCmd'), '#time#');
} else if ('#time#' == 'GaugeIMG') {
let week = ['dim.', 'lun.', 'mar.', 'mer.', 'jeu.', 'ven.', 'sam.'];
let date = new Date(_options.valueDate.replace(' ', 'T'));
let t = _options.valueDate.split(/[- :]/);
let format = week[date.getDay()] + " " + t[2] + "/" + t[1];
let time = "à " + t[3] + ":" + t[4];
cmd.find('.timeCmd').html(format + '<br>' + time).addClass('GaugeIMG');
} else {
cmd.find('.timeCmd').remove();
}
}
solidGauge#uid#.series[0].points[0].update(_options.display_value);
}
});
jeedom.cmd.refreshValue([{ cmd_id: '#id#', value: '#value#', display_value: '#state#', valueDate: '#valueDate#', collectDate: '#collectDate#', alertLevel: '#alertLevel#', unit: '#unite#' }]);
}, 250)
</script>
<style>
#solidGauge#uid# {
width: 105px;
}
[data-theme="core2019_Dark"] #solidGauge#uid# .highcharts-tick {
stroke: rgb(38, 38, 38);
}
[data-theme="core2019_Light"] #solidGauge#uid# .highcharts-tick {
stroke: rgb(249, 249, 250);
}
#solidGauge#uid# .highcharts-tick {
stroke: #tickColor# !important;
}
#solidGauge#uid# .highcharts-container .highcharts-axis-line {
stroke: transparent;
}
#solidGauge#uid# .highcharts-background {
fill: transparent !important;
}
.timeCmd.GaugeIMG {
font-size: 11px;
padding: 2px 4px 2px 4px;
margin-top: 4px;
line-height: 1em !important;
display: inline-block !important;
box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 1), 0px 1px 2px 0px rgba(172, 172, 172, 0.5) inset;
margin-bottom: 5px;
}
</style>
</div>
Il faudra penser a vider le cache widget après modification.
réglages → système → configuration → cache
Bonjour @pirracas77,
J’ai ajouté un paramètre optionnel pour configurer la taille de la valeur et l’unité (voir Changelog) :
Brillant!
@Spine
Je découvre ton code et je viens de tester → Beau boulot merci !
(Ne connaissant pas le css, j’apprécie la facilité de configuration via les lignes dans « paramètres optionnels »).
Aujourd’hui, je colorise le texte en fonction de la valeur, et j’aimerais remplacer cela par SolidGauge. Exemple avec la surveillance de la consommation instantanée EDF (Watts) :
#value# < 150 : affichage gris
#value# >= 150 && #value# < 1200 : affichage vert
#value# >= 1200 && #value# < 3500 : affichage orange
#value# >= 3500 && #value# < 6000 : affichage rouge
#value# >= 6000 : affichage magenta
Il faudrait donc pouvoir :
Est-ce que ce type d’évolution est réalisable ?
Si pas trop lourd, penses-tu pouvoir le faire à l’occasion ?
Cela permettrait de coller à encore plus d’usages.
Si non envisageable, no souci !
@+
Bonjour,
Merci pour le retour.
Alors on peut rajouter autant de couleurs qu’on veut sauf que les couleurs se mélangent automatiquement, si tu mets du jaune et du rouge, tu auras du orange entre les deux, c’est un dégradé progressif donc avec trois couleurs il y a déjà énormément de combinaisons possibles.
Idem pour les seuils de changement de couleur qui sont des coefficients qui s’adaptent en fonction de la plage de valeur de la jauge, si je mets des valeurs fixes, tout le monde devra les définir en fonction de son min et son max ce qui est moins WAF je trouve.
Je reste ouvert à la discussion et je te propose d’essayer par toi même dans un premier temps, c’est ici que ça ce passe :
A remplacer par (couleur et coefficient à adapter) :
stops: [
[0.2, 'rgb(0, 255, 0)'],
[0.4, 'rgb(0, 255, 0)'],
[0.6, 'rgb(0, 255, 0)'],
[0.8, 'rgb(0, 255, 0)'],
[0.99, 'rgb(0, 255, 0)']
],
Bonsoir,
Mince, je n’avais pas vu la transition progressives des couleurs…
Cela veut dire qu’il est impossible de faire du saut de couleur sur seuil ?
C’est sûr qu’il faut une solution facile, et qui couvre la majorité des besoins.
En amélioration, je verrais bien de nouveaux paramètres dans ce style :
Dans mon cas, je saisirais cette configuration :
Type : valeur réelle
Seuil1 : 150
Seuil2 : 1200
Seuil3 : 3500
Seuil4 : 6000
Color1 : grey
Color2 : green
Color3 : orange
color4 : red
color5 : magenta
Merci ! J’ai pu jouer avec 4 couleurs et min/max 0-6400w.
C’est fonctionnel, il y a juste la transition progressive qui me déroute … à voir :
Pour info, je fais du saut de couleur sur police via l’outil widget. Ce n’est pas fait pour ça, mais cela me dépanne bien. Du coup, dès que je dépasse 1200w, l’affichage saute à l’orange voire rouge, je sais d’un seul coup d’œil où j’en suis :
Bonjour,
Ce n’est pas le fonctionnement prévu par la lib Highcharts mais on peut toujours le surcharger.
Avec ce code, les changements de couleurs sont brusques en fonction des seuils qui sont des valeurs fixes :
<div class="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#">
<!-- ################ Solid gauge ################
Widget name : cmd.info.numeric.solidGauge
Author : Spine
Inspiration : https://www.highcharts.com/demo/highcharts/gauge-solid
Last Uptade : 04/05/2024
-->
<script type="text/javascript" src="3rdparty/highstock/modules/solid-gauge.js"></script>
<div class="title #hide_name#">
<div class="cmdName">#name_display#</div>
</div>
<div class="content-sm">
<div id="solidGauge#uid#"></div>
</div>
<div class="timeCmd label label-default #history#" data-type="info"></div>
<div class="cmdStats #hide_history#">
<span title="{{Minimum}}" class="tooltips">#minHistoryValue#</span>|<span title="{{Moyenne}}"
class="tooltips">#averageHistoryValue#</span>|<span title="{{Maximum}}"
class="tooltips">#maxHistoryValue#</span> <i class="#tendance#"></i>
</div>
<template>
<div>height : 106 ({{Hauteur du conteneur}})</div>
<div>size : 100 ({{Taille}})</div>
<div>spacingTop : 0 ({{Espacement supérieur}})</div>
<div>startAngle : 180 ({{Angle de départ}})</div>
<div>endAngle : 540 ({{Angle de fin}})</div>
<div>backgroundColor : var(--el-defaultColor) ({{Couleur de fond}})</div>
<div>threshold1 : 150 ({{1er seuil de changement de couleur}})</div>
<div>threshold2 : 1200 ({{2ème seuil de changement de couleur}})</div>
<div>threshold3 : 3500 ({{3ème seuil de changement de couleur}})</div>
<div>threshold4 : 6000 ({{4ème seuil de changement de couleur}})</div>
<div>color1 : grey ({{1ère couleur de remplissage}})</div>
<div>color2 : green ({{2ème couleur de remplissage}})</div>
<div>color3 : orange ({{3ème couleur de remplissage}})</div>
<div>color4 : red ({{4ème couleur de remplissage}})</div>
<div>color5 : magenta ({{5ème couleur de remplissage}})</div>
<div>min : 0 ({{Valeur minimum}})</div>
<div>max : 100 ({{Valeur maximum}})</div>
<div>tickInterval : (max - min) / 4 ({{Pas des ticks}})</div>
<div>valueUnitScale : 1 ({{Echelle de la valeur et l'unité}})</div>
<div>time : duration|date|GaugeIMG ({{Affiche durée ou date de la valeur}})</div>
<div>tickColor : rgb(38, 38, 38) ({{Couleur des ticks}})</div>
</template>
<script>
var height#uid# = is_numeric('#height#') ? parseFloat('#height#') : 106;
var spacingTop#uid# = is_numeric('#spacingTop#') ? parseFloat('#spacingTop#') : 0;
var size#uid# = is_numeric('#size#') ? parseFloat('#size#') : 100;
var startAngle#uid# = is_numeric('#startAngle#') ? parseFloat('#startAngle#') : 180;
var endAngle#uid# = is_numeric('#endAngle#') ? parseFloat('#endAngle#') : 540;
var backgroundColor#uid# = ('#backgroundColor#' != '#' + 'backgroundColor#') ? '#backgroundColor#' : 'var(--el-defaultColor)';
var threshold1#uid# = is_numeric('#threshold1#') ? parseFloat('#threshold1#') : 150;
var threshold2#uid# = is_numeric('#threshold2#') ? parseFloat('#threshold2#') : 1200;
var threshold3#uid# = is_numeric('#threshold3#') ? parseFloat('#threshold3#') : 3500;
var threshold4#uid# = is_numeric('#threshold4#') ? parseFloat('#threshold4#') : 6000;
var color1#uid# = ('#color1#' != '#' + 'color1#') ? '#color1#' : 'grey';
var color2#uid# = ('#color2#' != '#' + 'color2#') ? '#color2#' : 'green';
var color3#uid# = ('#color3#' != '#' + 'color3#') ? '#color3#' : 'orange';
var color4#uid# = ('#color4#' != '#' + 'color4#') ? '#color4#' : 'red';
var color5#uid# = ('#color5#' != '#' + 'color5#') ? '#color5#' : 'magenta';
var min#uid# = is_numeric('#min#') ? parseFloat('#min#') : 0;
var max#uid# = is_numeric('#max#') ? parseFloat('#max#') : 100;
var tickInterval#uid# = is_numeric('#tickInterval#') ? parseFloat('#tickInterval#') : (max#uid# - min#uid#) / 4;
setTimeout(function () {
if (is_numeric('#state#')) {
var solidGauge#uid# = Highcharts.chart('solidGauge#uid#', {
chart: {
style: {
fontFamily: 'Roboto'
},
type: 'solidgauge',
plotBackgroundColor: null,
plotBackgroundImage: null,
backgroundColor: null,
plotBorderWidth: 0,
plotShadow: false,
height: height#uid#,
spacingTop: spacingTop#uid#,
spacingLeft: 0,
spacingRight: 0,
spacingBottom: 0,
borderWidth: 0
},
title: null,
pane: {
center: ['50%', '50%'],
size: size#uid#,
startAngle: startAngle#uid#,
endAngle: endAngle#uid#,
background: {
innerRadius: '70%',
outerRadius: '100%',
shape: 'arc',
borderWidth: 0,
backgroundColor: backgroundColor#uid#
}
},
tooltip: {
enabled: false
},
yAxis: {
// stops: [
// [0.3, color1#uid#],
// [0.6, color2#uid#],
// [0.9, color3#uid#]
// ],
lineWidth: 0,
minorTickInterval: null,
tickInterval: tickInterval#uid#,
tickWidth: 4,
tickLength: 15,
tickPosition: 'inside',
labels: {
enabled: false
},
min: min#uid#,
max: max#uid#,
zIndex: 6,
title: {
text: ''
}
},
labels: {
enabled: false
},
plotOptions: {
solidgauge: {
dataLabels: {
y: 9,
borderWidth: 0,
useHTML: true
}
}
},
credits: {
enabled: false
},
exporting: {
enabled: false
},
series: [{
name: '',
data: [#state#],
radius: '100%',
innerRadius: '70%',
dataLabels: {
y: -22,
format:
'<div style="scale: #valueUnitScale#">' +
'<span style="color: var(--link-color); font-size: 24px;">{y}</span>' +
'<span style="color: var(--link-color); font-size: 12px; position: relative; bottom: 8px;">#unite#</span>' +
'</div>'
},
}]
});
}
jeedom.cmd.addUpdateFunction('#id#', function (_options) {
if (is_object(cmd = document.querySelector('.cmd[data-cmd_uid="#uid#"]'))) {
cmd.querySelector('.content-sm').setAttribute('title', '{{Date de valeur}}: ' + _options.valueDate + '<br>{{Date de collecte}}: ' + _options.collectDate);
if ('#time#' == 'duration' || '#time#' == 'date') {
jeedom.cmd.displayDuration(_options.valueDate, cmd.querySelector('.timeCmd'), '#time#');
} else if ('#time#' == 'GaugeIMG') {
let week = ['dim.', 'lun.', 'mar.', 'mer.', 'jeu.', 'ven.', 'sam.'];
let date = new Date(_options.valueDate.replace(' ', 'T'));
let t = _options.valueDate.split(/[- :]/);
let format = week[date.getDay()] + " " + t[2] + "/" + t[1];
let time = "à " + t[3] + ":" + t[4];
cmd.querySelector('.timeCmd').html(format + '<br>' + time).addClass('GaugeIMG');
}
solidGauge#uid#.series[0].points[0].update(_options.display_value);
if (_options.display_value < threshold1#uid#) {
cmd.querySelector('.highcharts-color-0').setAttribute('style', 'fill: ' + color1#uid# + ';');
} else if (_options.display_value >= threshold1#uid# && _options.display_value < threshold2#uid#) {
cmd.querySelector('.highcharts-color-0').setAttribute('style', 'fill: ' + color2#uid# + ';');
} else if (_options.display_value >= threshold2#uid# && _options.display_value < threshold3#uid#) {
cmd.querySelector('.highcharts-color-0').setAttribute('style', 'fill: ' + color3#uid# + ';');
} else if (_options.display_value >= threshold3#uid# && _options.display_value < threshold4#uid#) {
cmd.querySelector('.highcharts-color-0').setAttribute('style', 'fill: ' + color4#uid# + ';');
} else if (_options.display_value >= threshold4#uid#) {
cmd.querySelector('.highcharts-color-0').setAttribute('style', 'fill: ' + color5#uid# + ';');
}
}
});
jeedom.cmd.refreshValue([{ cmd_id: '#id#', value: '#value#', display_value: '#state#', valueDate: '#valueDate#', collectDate: '#collectDate#', alertLevel: '#alertLevel#', unit: '#unite#' }]);
}, 250)
</script>
<style>
#solidGauge#uid# {
width: 105px;
}
[data-theme="core2019_Dark"] #solidGauge#uid# .highcharts-tick {
stroke: rgb(38, 38, 38);
}
[data-theme="core2019_Light"] #solidGauge#uid# .highcharts-tick {
stroke: rgb(249, 249, 250);
}
#solidGauge#uid# .highcharts-tick {
stroke: #tickColor# !important;
}
#solidGauge#uid# .highcharts-background {
fill: transparent !important;
}
#solidGauge#uid# .highcharts-grid-line {
stroke: none !important;
}
#solidGauge#uid# .timeCmd.GaugeIMG {
font-size: 11px;
padding: 2px 4px 2px 4px;
margin-top: 4px;
line-height: 1em !important;
display: inline-block !important;
box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 1), 0px 1px 2px 0px rgba(172, 172, 172, 0.5) inset;
margin-bottom: 5px;
}
</style>
</div>
Effectivement certaines couleurs ne se mélangent pas bien, c’est la lib Highcharts qui gère cela et je n’ai pas la main dessus.
Pas trop compris, tu veux que la valeur change de couleur en même temps que la jauge ?