ca te convient ca
avec les modif « en dur » dans le code j’obtient
j’ai modifié les lignes 34, 35, 90 et 100 pour la mise en forme (plus gros)
Sur les lignes 57 et 58, je peux mettre une valeur en dur mais j’aimerias avoir la variable du min et celle du max du virtuel afin de pouvoir utiliser ce widget sur plusieurs virtuels qui n’ont pas les mêmes seuils
Dernière version du rendu que je préfère
<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#"
title="Date de valeur : #valueDate#<br/>Date de collecte : #collectDate#" >
<!--
Nom : HYGRO SpineArc by Nak
inspiré d'une Création de base: Spine 20:12:2020 Qu'hommage lui soit rendu
Graphique, Couleur, Adaptation et modification NAK 13:02:2021
/-->
<div class="title #hide_name#">
<span class="cmdName">#name_display#</span>
</div>
<div class="content-sm">
<div class="solidGauge#id# cursor #history#" data-cmd_id="#id#"></div>
</div>
<div class="value">
<span class="timeCmd label label-default #history#" data-type="info"></span>
</div>
<div class="cmdStats #hide_history#">
<span title='Min' class='tooltips'>#minHistoryValue#</span>|<span title='Moyenne' class='tooltips'>#averageHistoryValue#</span>|<span title='Max' class='tooltips'>#maxHistoryValue#</span> <i class="#tendance#"></i>
</div>
<style>
.solidGauge#id# {
width: 150px;
height: 200px !important;
}
.solidGauge#id# .highcharts-grid-line {
stroke: none !important;
}
.solidGauge#id# .highcharts-container .highcharts-axis-line {
stroke: #outerBorderColor#;
}
.solidGauge#id# .highcharts-tick {
stroke: #minorTickColor#;
}
.solidGauge#id# .highcharts-minor-tick {
stroke: #tickColor#;
}
.solidGauge#id# .highcharts-axis-labels > text {
fill: #labelsColor# !important;
}
</style>
<script>
var startAngle = is_numeric('#startAngle#') ? parseFloat('#startAngle#') : -30;
var endAngle = is_numeric('#endAngle#') ? parseFloat('#endAngle#') : 90;
var min = is_numeric('#min#') ? parseFloat('#min#') : -10;
var max = is_numeric('#max#') ? parseFloat('#max#') : 50;
var tickInterval = is_numeric('#tickInterval#') ? parseFloat('#tickInterval#') : 10;
var innerBorderColor = ('#innerBorderColor#' != '#'+'innerBorderColor#') ? '#innerBorderColor#' : 'var(--link-color)';
var backgroundColor = ('#backgroundColor#' != '#'+'backgroundColor#') ? '#backgroundColor#' : 'var(--el-defaultColor)';
var A1 = ('#A1#' != '#'+'A1#') ? '#A1#' : 'darkorange';
var A2 = ('#A2#' != '#'+'A2#') ? '#A2#' : 'darkorange';
var A3 = ('#A3#' != '#'+'A3#') ? '#A3#' : 'mediumseagreen';
var A4 = ('#A4#' != '#'+'A4#') ? '#A4#' : 'royalblue';
var A5 = ('#A5#' != '#'+'A5#') ? '#A5#' : 'royalblue';
jeedom.cmd.update['#id#'] = function(_options) {
var cmd = $('.cmd[data-cmd_uid=#uid#]')
$('.cmd[data-cmd_id=#id#]').attr('title','Date de valeur : '+_options.valueDate+'<br/>Date de collecte : '+_options.collectDate)
$('.cmd[data-cmd_uid=#uid#] .solidGauge#id#').highcharts().series[0].points[0].update(_options.display_value)
if('#time#' == 'duration'){
jeedom.cmd.displayDuration(_options.valueDate, cmd.find('.timeCmd'));
}
else {
cmd.find('.timeCmd').parent().remove();
}
}
if (is_numeric('#state#')) {
$('.cmd[data-cmd_uid=#uid#] .solidGauge#id#').empty().highcharts({
chart: {
style: {
fontFamily: 'Roboto'
},
type: 'solidgauge',
plotBackgroundColor: null,
plotBackgroundImage: null,
backgroundColor: null,
plotBorderWidth: 0,
plotShadow: false,
height: 200,
spacingTop: 20,
spacingLeft: -10,
spacingRight: -10,
spacingBottom: 0,
borderWidth : 0
},
title: null,
pane: {
center: ['40%', '40%'],
size: 140,
startAngle: startAngle,
endAngle: endAngle,
background: {
backgroundColor: backgroundColor,
innerRadius: '70%',
outerRadius: '100%',
shape: 'arc',
borderWidth: 1,
borderColor: innerBorderColor
}
},
tooltip: {
enabled: false
},
yAxis: {
stops: [
[0.2, A1],
[0.3, A2],
[0.6, A3],
[0.7, A4],
[0.9, A5],
],
lineWidth: 1,
lineColor: 'var(--link-color)',
tickInterval: tickInterval,
tickWidth: 1,
tickLength: 7,
tickPosition: 'inside',
minorTickInterval: 'auto',
minorTickWidth: 0.7,
minorTickLength: 5,
minorTickPosition: 'inside',
labels: {
style: {
color: 'var(--link-color)',
fontSize: '8px'
},
enabled: true,
distance: 5,
rotation: 'auto',
step: 0
},
min: min,
max: max,
title: {
text: ''
}
},
labels : {enabled: false},
plotOptions: {
solidgauge: {
dataLabels: {
y: 5,
borderWidth: 0,
useHTML: true
}
}
},
credits: {
enabled: false
},
exporting : {
enabled: false
},
series: [{
radius: '90%',
innerRadius: '70%',
name: '',
data: [Math.round(parseFloat('#state#') * 10) / 10],
dataLabels: {
y: -30,
format: '<span style="color: var(--link-color); font-size: 20px;">{y}</span><span style="color: var(--link-color); font-size: 20px;">#unite#</span>'
},
}]
})
}
else {
$('.cmd[data-cmd_uid=#uid#] .solidGauge#id#').append('<center><span class="label label-danger">#state#</span></center>')
}
jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
</script>
</div>
Re essai celui-ci que j’ai un peu modifié
<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#" title="Date de valeur : #valueDate#<br/>Date de collecte : #collectDate#">
<div class="title #hide_name#">
<span class="cmdName">#name_display#</span>
</div>
<div class="content-sm">
<div class="solidGauge#id# cursor #history#" data-cmd_id="#id#"></div>
</div>
<div class="value">
<span class="timeCmd label label-default #history#" data-type="info"></span>
</div>
<div class="cmdStats #hide_history#">
<span title='Min' class='tooltips'>#minHistoryValue#</span>|<span title='Moyenne' class='tooltips'>#averageHistoryValue#</span>|<span title='Max' class='tooltips'>#maxHistoryValue#</span> <i class="#tendance#"></i>
</div>
<style>
.solidGauge#id# {
width: 105px;
height: 77px !important;
}
.solidGauge#id# .highcharts-grid-line {
stroke: none !important;
}
.solidGauge#id# .highcharts-container .highcharts-axis-line {
stroke: #outerBorderColor#;
}
.solidGauge#id# .highcharts-tick {
stroke: #minorTickColor#;
}
.solidGauge#id# .highcharts-minor-tick {
stroke: #tickColor#;
}
.solidGauge#id# .highcharts-axis-labels > text {
fill: #labelsColor# !important;
}
</style>
<script>
var startAngle = is_numeric('#startAngle#') ? parseFloat('#startAngle#') : -30;
var endAngle = is_numeric('#endAngle#') ? parseFloat('#endAngle#') : 90;
var min = is_numeric('#mini#') ? parseFloat('#mini#'):parseFloat('#minValue#');
var max = is_numeric('#maxi#') ? parseFloat('#maxi#'):parseFloat('#maxValue#');
var tickInterval = is_numeric('#tickInterval#') ? parseFloat('#tickInterval#') : 10;
var innerBorderColor = ('#innerBorderColor#' != '#'+'innerBorderColor#') ? '#innerBorderColor#' : 'var(--link-color)';
var backgroundColor = ('#backgroundColor#' != '#'+'backgroundColor#') ? '#backgroundColor#' : 'var(--el-defaultColor)';
var A1 = ('#A1#' != '#'+'A1#') ? '#A1#' : 'red';
var A2 = ('#A2#' != '#'+'A2#') ? '#A2#' : 'red';
var A3 = ('#A3#' != '#'+'A3#') ? '#A3#' : 'orange';
var A4 = ('#A4#' != '#'+'A4#') ? '#A4#' : 'green';
var A5 = ('#A5#' != '#'+'A5#') ? '#A5#' : 'green';
jeedom.cmd.update['#id#'] = function(_options) {
var cmd = $('.cmd[data-cmd_uid=#uid#]')
$('.cmd[data-cmd_id=#id#]').attr('title','Date de valeur : '+_options.valueDate+'<br/>Date de collecte : '+_options.collectDate)
$('.cmd[data-cmd_uid=#uid#] .solidGauge#id#').highcharts().series[0].points[0].update(_options.display_value)
if('#time#' == 'duration'){
jeedom.cmd.displayDuration(_options.valueDate, cmd.find('.timeCmd'));
}
else {
cmd.find('.timeCmd').parent().remove();
}
}
if (is_numeric('#state#')) {
$('.cmd[data-cmd_uid=#uid#] .solidGauge#id#').empty().highcharts({
chart: {
style: {
fontFamily: 'Roboto'
},
type: 'solidgauge',
plotBackgroundColor: null,
plotBackgroundImage: null,
backgroundColor: null,
plotBorderWidth: 0,
plotShadow: false,
height: 160,
spacingTop: 0,
spacingLeft: -10,
spacingRight: -10,
spacingBottom: 0,
borderWidth : 0
},
title: null,
pane: {
center: ['40%', '40%'],
size: 100,
startAngle: startAngle,
endAngle: endAngle,
background: {
backgroundColor: backgroundColor,
innerRadius: '',
outerRadius: '',
shape: 'arc',
borderWidth: 1,
borderColor: innerBorderColor
}
},
tooltip: {
enabled: false
},
yAxis: {
stops: [
[0.2, A1],
[0.3, A2],
[0.6, A3],
[0.7, A4],
[0.9, A5],
],
lineWidth: 1,
lineColor: 'var(--link-color)',
tickInterval: tickInterval,
tickWidth: 1,
tickLength: 5,
tickPosition: 'inside',
minorTickInterval: 'auto',
minorTickWidth: 0.7,
minorTickLength: 5,
minorTickPosition: 'inside',
labels: {
style: {
color: 'var(--link-color)',
fontSize: '8px'
},
enabled: true,
distance: 5,
rotation: 'auto',
step: 0
},
min: min,
max: max,
title: {
text: ''
}
},
labels : {enabled: false},
plotOptions: {
solidgauge: {
dataLabels: {
y: 5,
borderWidth: 0.7,
useHTML: true
}
}
},
credits: {
enabled: false
},
exporting : {
enabled: false
},
series: [{
radius: '95%',
innerRadius: '90%',
name: '',
data: [Math.round(parseFloat('#state#') * 10) / 10],
dataLabels: {
y: -20,
format: '<span style="color: var(--link-color); font-size: 12px;">{y}</span><span style="color: var(--link-color); font-size: 12px;">#unite#</span>'
},
}]
})
}
else {
$('.cmd[data-cmd_uid=#uid#] .solidGauge#id#').append('<center><span class="label label-danger">#state#</span></center>')
}
jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
</script>
</div>
Il dois s’adapter a tes mesure
Hello,
Tu as défini ces paramètres en paramètres optionnels de tes commandes associées ?
j’ai un écran vide
C’est la le problème, je ne l’ai jamais fait
Je ne connais pas la méthodologie
tu as actualise jeedom et ton navigateur ?
vide ton cache
j’ai fait un CTRL+F5
Je viens de trouver le problème
j’essaie de trouver une parade et je te dis rapidement
OK cela s’affiche
Je vais regarder ce que tu as fait
J’ai modifier ligne 43 et 44
Ok je vais les intégrer dans ma version afin d’éviter de tout remodifier la mise en forme
tu sélectionnes la roue dentée de ta commande, puis l’onglet Affichage et tu remplis min et max dans le menu "Paramètres optionnels widget ".
1 « J'aime »
Oui pas de problème pour cela.
Je n’avais pas compris ton message
J’ai bien une valeur mini et max su le virtuel mais c’est pour la prise en compte de ces valeurs dans le widget qui n’a pas été codé pour récupérer ces valeurs mais pour prendre des valeurs en durs dans le code
Mikael m’a envoyé la modif du code du widget qui règle ce problème
Merci
1 « J'aime »
La mise en place est faite sur ma version et c’est Nickel
Le rendu avec ta version :
Le rendu avec ma version
Les 2 sont assez sympa mais avec l’age la vue n’est plus la même
Le principal est que cela te convient a toi
Je te confirme avec l’age la vision , mdr 
Je cherche dans le code la gestion de la couleur en fonction de la valeur
je pense que c’est sur les lignes 49 à 53 de ton code où son définit les couleurs
var A1 = ('#A1#' != '#'+'A1#') ? '#A1#' : 'red';
var A2 = ('#A2#' != '#'+'A2#') ? '#A2#' : 'red';
var A3 = ('#A3#' != '#'+'A3#') ? '#A3#' : 'orange';
var A4 = ('#A4#' != '#'+'A4#') ? '#A4#' : 'green';
var A5 = ('#A5#' != '#'+'A5#') ? '#A5#' : 'green';
Mais où sont fixer les valeur pour A1, A2, A3,A4 et A5 ?
Je supposais que c’était là :
[0.2, A1],
[0.3, A2],
[0.6, A3],
[0.7, A4],
[0.9, A5],
Mais cela ne colle pas
Ce sont justement les paramètres optionnels dont je te parlais.
De la même façon, avec le widget d’origine, tu peux modifier le min et max en définissant les paramètres optionnels min et max.
La modification de @Mikael permet de récupérer par défaut les valeurs min et max définies dans la définition de la commande (options) au lieu des valeurs du code du widget définies par défaut à 0 et 100.