drs
Février 2, 2025, 5:57
1
Bonjour,
Je viens de passer mon jeedom en debian 11/4.4.19, et globalement j’ai réussi à résoudre tous mes petits soucis d’affichage, sauf 1.
J’ai un widget de températures qui me résiste. Le voici:
<div class="cmd cmd-widget #history#" data-type="info" data-subtype="numeric" data-template="tile" data-cmd_id="#id#"
data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#">
<!--
Name: cmd.info.numeric.thermometer.html
Jeedom Compatibility: v4.4.5
-->
<div class="title #hide_name#">
</div>
<div class="content">
<div class="left"></div>
<div class="right">
<div class="valDetail">
<span class="value state"></span>
<br>
<span class="unit"></span>
<div class="cmdName">#name_display#</div>
</div>
<div class="cmdStats #hide_history#">
<span title="{{Minimum}}" class="tooltips">Min : #minHistoryValue#</span>
<span title="{{Moyenne}}" class="tooltips">Moy : #averageHistoryValue#</span>
<span title="{{Maximum}}" class="tooltips">Max : #maxHistoryValue#</span>
<span class="tendance" title="{{Tendance}}" class="tooltips">Tendance : <i class="#tendance#"></i></span>
</div>
</div>
</div>
<div class="timeCmd label label-default #history#" data-type="info"></div>
<template>
<div>time : duration|date ({{Affiche durée ou date de la valeur}})</div>
</template>
<style>
div.cmd.cmd-widget[data-cmd_id="#id#"][data-type="info"][data-subtype="numeric"][data-template="tile"] .state {
font-size: 1em !important;
}
[data-cmd_id="#id#"] .cmd-widget {
width: 120px;
display: block !important;
}
[data-cmd_id="#id#"] .content {
display: block !important;
padding: 0px;
width: 50px;
height: 50px;
}
[data-cmd_id="#id#"] .left {
float: left;
}
[data-cmd_id="#id#"] .right {
text-align: left;
padding-left: 0px;
}
[data-cmd_id="#id#"] .valDetail {
padding-bottom: 0px;
text-align: center !important;
width: 80px !important;
}
[data-cmd_id="#id#"] .valDetail span.value {
font-size: 15px !important;
}
[data-cmd_id="#id#"] .cmdStats span {
display: block;
}
[data-cmd_id="#id#"] .tendance {
padding-top: 1px;
}
</style>
<script>
jeedom.cmd.addUpdateFunction('#id#', function (_options) {
if (is_object(cmd = document.querySelector('.cmd[data-cmd_uid="#uid#"]'))) {
cmd.querySelector('.content').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#')
}
if (is_numeric(_options.value)) {
cmd.querySelector('.value').innerHTML = _options.display_value
cmd.querySelector('.unit').innerHTML = _options.unit
} else {
cmd.querySelector('.value').innerHTML = '<span class="label label-danger">' + _options.value + '</span>'
}
if (_options.alertLevel == 'warning') {
cmd.querySelector('.value').innerHTML = '<span class="label label-warning"><i class="fas fa-bell"></i> ' + _options.value + '</span>'
} else if (_options.alertLevel == 'danger') {
cmd.querySelector('.value').innerHTML = '<span class="label label-danger"><i class="fas fa-exclamation"></i> ' + _options.value + '</span>'
}
let valeur = (parseFloat(_options.display_value).toFixed(1) - parseInt(_options.display_value)) === 0 ? parseInt(_options.display_value) : parseFloat(_options.display_value).toFixed(1);
if (valeur <= 0) {
imgNumber = '00';
} else if (valeur > 0 && valeur <= 5) {
imgNumber = '01';
} else if (valeur > 5 && valeur <= 10) {
imgNumber = '02';
} else if (valeur > 10 && valeur <= 13) {
imgNumber = '03';
} else if (valeur > 13 && valeur <= 16) {
imgNumber = '04';
} else if (valeur > 16 && valeur <= 18) {
imgNumber = '05';
} else if (valeur > 18 && valeur <= 20) {
imgNumber = '06';
} else if (valeur > 20 && valeur <= 22) {
imgNumber = '07';
} else if (valeur > 22 && valeur <= 24) {
imgNumber = '08';
} else if (valeur > 24 && valeur <= 26) {
imgNumber = '09';
} else if (valeur > 26 && valeur <= 28) {
imgNumber = '10';
} else if (valeur > 28 && valeur <= 34) {
imgNumber = '11';
} else {
imgNumber = '12';
}
cmd.querySelector('.left').innerHTML = '<img style="height: 40px;margin-top:10px!important;width: 12px;" src="data/img/thermometer' + imgNumber + '.png"></img>';
}
})
jeedom.cmd.refreshValue([{ cmd_id: '#id#', value: '#value#', display_value: '#state#', valueDate: '#valueDate#', collectDate: '#collectDate#', alertLevel: '#alertLevel#', unit: '#unite#' }])
</script>
</div>
En image, cela donne:
C’est moche!
Je voudrais:
décaler un peu le texte sur la droite
modifier la police de EXTERIEUR (qui doit être géré par #name_display #
. J’ai crée une classe perso, mais je ne parviens pas à faire ce que je veux.
Diminuer la taille du °C
En gros, pour le rendre comme en 4.3:
Si vous voulez bien m’aider, ça serait sympa. Merci à tous.
Bonsoir,
Tu peux tester cette version :
<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#">
<!--
Name: cmd.info.numeric.thermometer.html
Jeedom Compatibility: v4.4.5
-->
<div class="content">
<div>
<div class="left"></div>
<div class="right">
<div class="valDetail">
<span class="value state"></span>
<br>
<span class="unit"></span>
<div class="title #hide_name#"><div class="cmdName ">#name_display#</div></div>
</div>
</div>
</div>
<div class="cmdStats #hide_history#">
<span title="{{Minimum}}" class="tooltips">Min : #minHistoryValue#</span>
<span title="{{Moyenne}}" class="tooltips">Moy : #averageHistoryValue#</span>
<span title="{{Maximum}}" class="tooltips">Max : #maxHistoryValue#</span>
<span title="{{Tendance}}" class="tooltips tendance">Tendance : <i class="#tendance#"></i></span>
</div>
</div>
<div class="timeCmd label label-default #history#" data-type="info"></div>
<template>
<div>time : duration|date ({{Affiche durée ou date de la valeur}})</div>
</template>
<style>
[data-cmd_id="#id#"] .content img {
height: 40px;
width: 12px;
}
[data-cmd_id="#id#"] .content > div:first-of-type {
display: inline-flex;
align-items: center;
}
[data-cmd_id="#id#"] .state {
font-size: 12px !important;
line-height: 12px !important;
}
[data-cmd_id="#id#"] .cmdName {
font-weight: 600 !important;
font-size: 10px !important;
}
[data-cmd_id="#id#"] .unit {
font-size: 10px !important;
}
[data-cmd_id="#id#"] .left, [data-cmd_id="#id#"] .right {
margin: 5px;
}
[data-cmd_id="#id#"] .cmdStats span {
display: block;
}
[data-cmd_id="#id#"] .tendance {
padding-top: 1px;
}
</style>
<script>
jeedom.cmd.addUpdateFunction('#id#', function (_options) {
if (is_object(cmd = document.querySelector('.cmd[data-cmd_uid="#uid#"]'))) {
cmd.querySelector('.content').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#')
}
if (is_numeric(_options.value)) {
cmd.querySelector('.value').innerHTML = _options.display_value
cmd.querySelector('.unit').innerHTML = _options.unit
} else {
cmd.querySelector('.value').innerHTML = '<span class="label label-danger">' + _options.value + '</span>'
}
if (_options.alertLevel == 'warning') {
cmd.querySelector('.value').innerHTML = '<span class="label label-warning"><i class="fas fa-bell"></i> ' + _options.value + '</span>'
} else if (_options.alertLevel == 'danger') {
cmd.querySelector('.value').innerHTML = '<span class="label label-danger"><i class="fas fa-exclamation"></i> ' + _options.value + '</span>'
}
let valeur = (parseFloat(_options.display_value).toFixed(1) - parseInt(_options.display_value)) === 0 ? parseInt(_options.display_value) : parseFloat(_options.display_value).toFixed(1);
if (valeur <= 0) {
imgNumber = '00';
} else if (valeur <= 5) {
imgNumber = '01';
} else if (valeur <= 10) {
imgNumber = '02';
} else if (valeur <= 13) {
imgNumber = '03';
} else if (valeur <= 16) {
imgNumber = '04';
} else if (valeur <= 18) {
imgNumber = '05';
} else if (valeur <= 20) {
imgNumber = '06';
} else if (valeur <= 22) {
imgNumber = '07';
} else if (valeur <= 24) {
imgNumber = '08';
} else if (valeur <= 26) {
imgNumber = '09';
} else if (valeur <= 28) {
imgNumber = '10';
} else if (valeur <= 34) {
imgNumber = '11';
} else {
imgNumber = '12';
}
cmd.querySelector('.left').innerHTML = '<img src="data/img/thermometer' + imgNumber + '.png"></img>';
}
})
jeedom.cmd.refreshValue([{ cmd_id: '#id#', value: '#value#', display_value: '#state#', valueDate: '#valueDate#', collectDate: '#collectDate#', alertLevel: '#alertLevel#', unit: '#unite#' }])
</script>
</div>
drs
Février 2, 2025, 7:59
3
Merci
drs
Février 3, 2025, 9:13
4
Bonjour
J’ai testé et c’est top, merci beaucoup
Dernière petite question: sur mon design, je redimensionne ma tuile pour que les images soient les unes au dessus des autres, mais j’ai des décalages. Cela vient du widget ou bien de mon virtuel directement?
Tu as un décalage car le widget s’adapte au contenu, il faudrait ajouter un min-width a la div « right »
drs
Février 3, 2025, 3:58
6
Merci à toi. Voici donc le code final (j’ai séparé les div left et right par rapport au code précédent):
<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#">
<!--
Name: cmd.info.numeric.thermometer.html
Jeedom Compatibility: v4.4.5
-->
<div class="content">
<div>
<div class="left"></div>
<div class="right">
<div class="valDetail">
<span class="value state"></span>
<br>
<span class="unit"></span>
<div class="title #hide_name#"><div class="cmdName ">#name_display#</div></div>
</div>
</div>
</div>
<div class="cmdStats #hide_history#">
<span title="{{Minimum}}" class="tooltips">Min : #minHistoryValue#</span>
<span title="{{Moyenne}}" class="tooltips">Moy : #averageHistoryValue#</span>
<span title="{{Maximum}}" class="tooltips">Max : #maxHistoryValue#</span>
<span title="{{Tendance}}" class="tooltips tendance">Tendance : <i class="#tendance#"></i></span>
</div>
</div>
<div class="timeCmd label label-default #history#" data-type="info"></div>
<template>
<div>time : duration|date ({{Affiche durée ou date de la valeur}})</div>
</template>
<style>
[data-cmd_id="#id#"] .content img {
height: 40px;
width: 12px;
}
[data-cmd_id="#id#"] .content > div:first-of-type {
display: inline-flex;
align-items: center;
}
[data-cmd_id="#id#"] .state {
font-size: 12px !important;
line-height: 12px !important;
}
[data-cmd_id="#id#"] .cmdName {
font-weight: 600 !important;
font-size: 6px !important;
}
[data-cmd_id="#id#"] .unit {
font-size: 10px !important;
}
[data-cmd_id="#id#"] .left {
margin: 5px;
}
[data-cmd_id="#id#"] .right {
margin: 5px;
min-width: 40px !important;
}
[data-cmd_id="#id#"] .cmdStats span {
display: block;
}
[data-cmd_id="#id#"] .tendance {
padding-top: 1px;
}
</style>
<script>
jeedom.cmd.addUpdateFunction('#id#', function (_options) {
if (is_object(cmd = document.querySelector('.cmd[data-cmd_uid="#uid#"]'))) {
cmd.querySelector('.content').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#')
}
if (is_numeric(_options.value)) {
cmd.querySelector('.value').innerHTML = _options.display_value
cmd.querySelector('.unit').innerHTML = _options.unit
} else {
cmd.querySelector('.value').innerHTML = '<span class="label label-danger">' + _options.value + '</span>'
}
if (_options.alertLevel == 'warning') {
cmd.querySelector('.value').innerHTML = '<span class="label label-warning"><i class="fas fa-bell"></i> ' + _options.value + '</span>'
} else if (_options.alertLevel == 'danger') {
cmd.querySelector('.value').innerHTML = '<span class="label label-danger"><i class="fas fa-exclamation"></i> ' + _options.value + '</span>'
}
let valeur = (parseFloat(_options.display_value).toFixed(1) - parseInt(_options.display_value)) === 0 ? parseInt(_options.display_value) : parseFloat(_options.display_value).toFixed(1);
if (valeur <= 0) {
imgNumber = '00';
} else if (valeur <= 5) {
imgNumber = '01';
} else if (valeur <= 10) {
imgNumber = '02';
} else if (valeur <= 13) {
imgNumber = '03';
} else if (valeur <= 16) {
imgNumber = '04';
} else if (valeur <= 18) {
imgNumber = '05';
} else if (valeur <= 20) {
imgNumber = '06';
} else if (valeur <= 22) {
imgNumber = '07';
} else if (valeur <= 24) {
imgNumber = '08';
} else if (valeur <= 26) {
imgNumber = '09';
} else if (valeur <= 28) {
imgNumber = '10';
} else if (valeur <= 34) {
imgNumber = '11';
} else {
imgNumber = '12';
}
cmd.querySelector('.left').innerHTML = '<img src="data/img/thermometer' + imgNumber + '.png"></img>';
}
})
jeedom.cmd.refreshValue([{ cmd_id: '#id#', value: '#value#', display_value: '#state#', valueDate: '#valueDate#', collectDate: '#collectDate#', alertLevel: '#alertLevel#', unit: '#unite#' }])
</script>
</div>
Et le rendu final:
Encore merci pour ton aide, c’est parfait
1 « J'aime »
system
Février 4, 2025, 3:58
7
Ce sujet a été automatiquement fermé après 24 heures suivant le dernier commentaire. Aucune réponse n’est permise dorénavant.
