Bonjour,
Je viens de passer en version 4.4, hormis mon trauma de perdre le theme legacy, mais bon on va s’habituer.
J’ai un autre soucis, il y a quelques années j’avais ajouté sur mes tuiles une jauge qui passait du vert orange et rouge selon mon niveau de conso elect hebdo par rapport à un objectif de conso.
Désormais plus rien ne s’affiche.
Je suis pâs developpeur mais j’avais trouvé un truc sympa que j’avais adapté :
Dont voici le programme ma question est:
est ce que ce genre de personnalisation est encore possible desormais?
<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="FredD 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>
.FredD {
width: 105px;
height: 105px;
}
.FredD .highcharts-pane {
fill: var(--el-defaultColor);
}
[data-category=security] :not(.gauge)>.FredD .highcharts-container .highcharts-tick {
stroke: rgba(var(--cat-security-color), var(--opacity)) !important;
}
[data-category=heating] :not(.gauge)>.FredD .highcharts-container .highcharts-tick {
stroke: rgba(var(--cat-heating-color), var(--opacity)) !important;
}
[data-category=automatism] :not(.gauge)>.FredD .highcharts-container .highcharts-tick {
stroke: rgba(var(--cat-automatism-color), var(--opacity)) !important;
}
[data-category=light] :not(.gauge)>.FredD .highcharts-container .highcharts-tick {
stroke: rgba(var(--cat-light-color), var(--opacity)) !important;
}
[data-category=opening] :not(.gauge)>.FredD .highcharts-container .highcharts-tick {
stroke: rgba(var(--cat-opening-color), var(--opacity)) !important;
}
[data-category=multimedia] :not(.gauge)>.FredD .highcharts-container .highcharts-tick {
stroke: rgba(var(--cat-multimedia-color), var(--opacity)) !important;
}
[data-category=energy] :not(.gauge)>.FredD .highcharts-container .highcharts-tick {
stroke: rgba(var(--cat-energy-color), var(--opacity)) !important;
}
[data-category=''] :not(.gauge)>.FredD .highcharts-container .highcharts-tick {
stroke: rgba(var(--cat-other-color), var(--opacity)) !important;
}
:not(.gauge)>.FredD .highcharts-container .highcharts-axis-line {
stroke: transparent !important;
}
:root {
--link-colorX: white;
}
.cmd[data-cmd_uid=#uid#] .highcharts-color-0 {
fill: var(--link-colorX);
}
</style>
<script>
var tickInterval = is_numeric('#tickInterval#') ? parseFloat('#tickInterval#') : 25;
var min = is_numeric('#min#') ? parseFloat('#min#') : 0;
var max = is_numeric('#max#') ? parseFloat('#max#') : 100;
var val1 = is_numeric('#val1#') ? parseFloat('#val1#') : 50;
var val2 = is_numeric('#val2#') ? parseFloat('#val2#') : 70;
var val3 = is_numeric('#val3#') ? parseFloat('#val3#') : 90;
var color1 = ('#color1#' != '#' + 'color1#') ? '#color1#' : 'rgb(0, 255, 0)';
var color2 = ('#color2#' != '#' + 'color2#') ? '#color2#' : 'rgb(255, 255, 0)';
var color3 = ('#color3#' != '#' + 'color3#') ? '#color3#' : 'rgb(255, 128, 0)';
var color4 = ('#color4#' != '#' + 'color4#') ? '#color4#' : 'rgb(255, 0, 0)';
jeedom.cmd.update['#id#'] = function (_options) {
var cmd = $('.cmd[data-cmd_uid=#uid#]');
var cmd2 = $('.cmd[data-cmd_id=#id#] .FredD');
var val = _options.display_value;
if (val <= val1) {
cmd2.css({ '--link-colorX': color1 });
} else if (val <= val2) {
cmd2.css({ '--link-colorX': color2 });
} else if (val <= val3) {
cmd2.css({ '--link-colorX': color3 });
} else {
cmd2.css({ '--link-colorX': color4 });
}
$('.cmd[data-cmd_id=#id#]').attr('title', '{{Date de valeur}} : ' + _options.valueDate + '<br/>{{Date de collecte}} : ' + _options.collectDate)
$('.cmd[data-cmd_uid=#uid#] .FredD').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#] .FredD').empty().highcharts({
chart: {
style: {
fontFamily: 'Roboto'
},
type: 'solidgauge',
plotBackgroundColor: null,
plotBackgroundImage: null,
backgroundColor: null,
plotBorderWidth: 0,
plotShadow: false,
height: 106,
spacingTop: 0,
spacingLeft: 0,
spacingRight: 0,
spacingBottom: 0,
borderWidth: 0
},
title: null,
pane: {
center: ['50%', '50%'],
size: 100,
startAngle: 180,
endAngle: 540,
background: {
innerRadius: '70%',
outerRadius: '100%',
shape: 'arc',
borderWidth: 0,
}
},
tooltip: {
enabled: false
},
// the value axis
yAxis: {
// stops: [
// [0.3, color1],
// [0.6, color2],
// [0.9, color3]
// ],
lineWidth: 0,
minorTickInterval: null,
tickInterval: tickInterval,
tickWidth: 4,
tickLength: 15,
tickPosition: 'inside',
labels: { enabled: false },
min: min,
max: max,
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: 24px !important;">{y}</span> <span style="color: var(--link-color); font-size: 12px; position: relative; top: -8px;">#unite#</span>'
},
}]
})
} else {
$('.cmd[data-cmd_uid=#uid#] .FredD').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>
.
