Bonjour
Ce widget est très intéressant et esthétique
Néanmoins, il manque l’information batterie
Ceci est il prévue dans un futur proche ?
Y a t’il une solution alternative ?
Cordialement
Si ca peut t’aider
Je sais plus de quand ni ou mais moi j’ai cette version dans la quel tu déclare en widget option
battery N°cecommandeBattery
et le petit logo batterie fonctionne.
<div class="cmd #history# tooltips cmd-widget widget#id#" data-type="info" data-subtype="numeric" data-cmd_id="#id#" title="#collectDate#">
<div style="font-weight:bold; font-size:12px; #hideCmdName#">#name#</div>
<div class="conso_position#id#">
<img class="IMGihtid#id#" id="imgID#id#" src="data/customTemplates/dashboard/cmd.info.numeric.HygroThermographe_TaG/No.ext_100.png">
<span class="lcd_text stateint_temp#id#" id="intNumTemp#id#"></span>
<span class="lcd_text statedec_temp#id#" id="decNumTemp#id#"></span>
<span class="lcd_text unite_temp#id#" id="unite#id#">#unite#</span>
<span class="lcd_text humidityint_unite#id#" id="intNumHumidity#id#"></span>
<span class="lcd_text humiditydec_unite#id#" id="decNumHumidity#id#"></span>
<span class="lcd_text humidityunite#id#" id="humidityunite#id#">%</span>
</div>
<style>
@font-face {
font-family: "Digital-7";
src: url("data/customTemplates/dashboard/cmd.info.numeric.HygroThermographe_TaG/font/digital-7.eot?") format("eot"),
url("data/customTemplates/dashboard/cmd.info.numeric.HygroThermographe_TaG/font/digital-7.woff") format("woff"),
url("data/customTemplates/dashboard/cmd.info.numeric.HygroThermographe_TaG/font/digital-7.ttf") format("truetype"),
url("data/customTemplates/dashboard/cmd.info.numeric.HygroThermographe_TaG/font/digital-7.svg#Digital-7") format("svg");
font-weight:normal;
font-style:normal;
}
.lcd_text {
font-family: "Digital-7";
position: absolute;
color: #181818; /* Changemnt des couleurs des chiffres */
}
.widget#id#
{
/* pour centrer , pas joli mais ca marche*/
width: 220px;
width: calc(220px*#coefficient#);
line-height:1.42857;
}
.conso_position#id#
{
box-sizing: border-box;
width: 500px; /* taille de l'image sans scale */
transform-origin: 0 0;
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-o-transform-origin: 0 0;
/* 0.435 pour faire 220px */
transform:scale(0.435);
-webkit-transform:scale(0.435); /* Safari and Chrome */
-moz-transform:scale(0.435); /* Firefox */
-ms-transform:scale(0.435); /* IE 9+ */
-o-transform:scale(0.435); /* Opera */
transform:scale(calc(0.435*#coefficient#)) ;
-webkit-transform:scale(calc(0.435*#coefficient#)) ; /* Safari and Chrome */
-moz-transform:scale(calc(0.435*#coefficient#)); /* Firefox */
-ms-transform:scale(calc(0.435*#coefficient#)); /* IE 9+ */
-o-transform:scale(calc(0.435*#coefficient#)); /* Opera */
}
span.stateint_temp#id# {
font-size: 185px;
font-weight: bold; /* Modif bold du 10/12/19 */
letter-spacing: 6px;
top: 65px;
right: 180px;
}
span.statedec_temp#id# {
font-size:114px;
font-weight: bold; /* Modif bold du 10/12/19 */
top: 138px;
left: 322px;
text-align:left;
}
span.unite_temp#id# {
font-size: 57px;
font-weight: bold; /* Modif du 10/12/19 */
top: 111px;
left: 322px;
text-align:left;
}
div.conso#id# {
width:140px;
min-height : 140px;
}
span.humidityint_unite#id# {
font-size: 142px;
font-weight: bold; /* Modif bold du 10/12/19 */
letter-spacing: 6px;
bottom: 63px;
right: 180px;
}
span.humiditydec_unite#id# {
font-size: 71px;
font-weight: bold; /* Modif bold du 10/12/19 */
bottom: 90px;
left: 322px;
text-align:left;
}
span.humidityunite#id# {
font-size: 57px;
font-weight: bold; /* Modif bold du 10/12/19 */
bottom: 156px;
left: 322px;
text-align:left;
}
.ui-mobile-viewport span.humidityint_unite#id#, .ui-mobile-viewport span.stateint_temp#id#{
letter-spacing: -6px;
}
.ui-mobile-viewport .widget#id#
{
width: 220px;
height: 220px;
}
.ui-mobile-viewport .conso_position#id#
{
width: fit-content;
transform-origin: 0 0;
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-o-transform-origin: 0 0;
/* 0.42 pour faire 220px avec 5px de padding*/
transform:scale(0.42);
-webkit-transform:scale(0.42); /* Safari and Chrome */
-moz-transform:scale(0.42); /* Firefox */
-ms-transform:scale(0.42); /* IE 9+ */
-o-transform:scale(0.42); /* Opera */
}
</style>
<script>
jeedom.cmd.update['#id#'] = function(_options){
debug == 1 && console.log("début fonction jeedom update");
// Déclaration des variables
debug == 1 && console.log(jeedom.cmd.normalizeName('#name#'));
var humidity#id# = #humidity#;
var present#id# = #present#;
var debug = 1*'#debug#';
var battery#id# = #battery#;
var online;
var batterie;
var n = parseFloat(_options.display_value).toFixed(1)
var intNum = n.split('.')[0]
var decNum = n.split('.')[1]
// var intNum = Math.floor(_options.display_value);
// var decNum = Math.round((_options.display_value - intNum) * 10);
debug == 1 && console.log("modification valeur Température");
// on déclare directement la valeur de température, #state# contient la témpérature. Pour rappel on a associé le widget à la commande Température
$('#intNumTemp#id#').text(intNum+".");
$('#decNumTemp#id#').text(decNum);
debug == 1 && console.log("température");
debug == 1 && console.log(intNum+"."+decNum);
jeedom.cmd.execute({ // Récupération de la valeur de la commande humidité
id: humidity#id#,
success: function(valeur) {
var humidityintNum = Math.floor(valeur);
var humiditydecNum = Math.round((valeur - humidityintNum) * 10);
$('#intNumHumidity#id#').text(humidityintNum+".");
$('#decNumHumidity#id#').text(humiditydecNum);
debug == 1 && console.log("humidité");
debug == 1 && console.log(humidityintNum+"."+humiditydecNum);
}
});
jeedom.cmd.execute({ // Récupération de la valeur de la commande present (binaire)
id: present#id#,
success: function(valeur){
online = valeur;
jeedom.cmd.execute({ // Récupération de la valeur de la commande batterie
id: battery#id#,
success: function(valeur){
batterie = valeur;
debug == 1 && console.log("récup batterie : "+batterie);
debug == 1 && console.log("online : "+online);
ext_online=(online == 1 ?'':'_nobt');
root_dir='data/customTemplates/dashboard/cmd.info.numeric.HygroThermographe_TaG/';
var numero_image = '100';
if (batterie >= 60 && batterie < 80){
numero_image = '80';
}else if (batterie >= 40 && batterie < 60){
numero_image = '60';
}else if (batterie >= 20 && batterie < 40){
numero_image = '40';
}else if (batterie >= 5 && batterie < 20){
numero_image = '20';
}else if (batterie < 5){
numero_image = '0';
}
var image = root_dir+'No.ext_'+numero_image+ext_online+'.png';
var obj = $('.cmd[data-cmd_id=#id#] .IMGihtid#id#')
obj.attr('src',image);
}
});
}
});
$('.cmd[data-cmd_id=#id#]').attr('title','Valeur du '+_options.valueDate+', collectée le '+_options.collectDate);
$('.cmd[data-cmd_id=#id#] .state').empty().append(_options.display_value);
debug == 1 && console.log("fin fonction jeedom update");
}
jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#'});
</script>
</div>
1 « J'aime »
Bonjour
Je pense que j’ai un problème su le code. L’image ne s’affiche pas
Si je prends le code du Widget de TAG qui est en V3 l’image s’affiche mais avec un décalage de la position des valeurs.
Ton code est-il complet ?
MErci
Heu pardon il te manque la font et les images …cmd.info.numeric.HygroThermographe_TaG.zip.txt (3,0 Mo)
Merci
Cela fonctionne bien
Pour changer la taille du utilise bien l’option coeffcient.
Je n’arrive pas à réduire la taille
Sur un virtuel le paramètre coefficient fonctionne bien
Merci
Je suis sur des équipements bléa avec un coefficient 0.5 (pas de virtuel)
1 « J'aime »
J’utilise une sonde de température et hygrométrei Xiaomi Aqara
Cela donne
image de gauche avec le core et à droite ton code.
Cela rend bien je vais suivre dans le temps pour être sûr de la fiabilité de la communication avec la sonde
Penses tu qu’il est possible de supprimer le nom au deesus de l’image (valeur « temp » dans l’image jointe) ?
Salut,
Tu peux supprimer la seconde ligne du code:
<div style="font-weight:bold; font-size:12px; #hideCmdName#">#name#</div>
C’est la ligne qui gère l’affichage du nom mais au format V3 donc inutile sous cette forme en V4 car ne permet pas de choisir d’afficher le nom ou pas via la case Afficher le nom.
Pour avoir le choix en V4 il faut remplacer par:
<div class="title #hide_name#">
<div class="cmdName">#name_display#</div>
</div>
Merci de ton aide
Ce sujet a été automatiquement fermé après 24 heures suivant le dernier commentaire. Aucune réponse n’est permise dorénavant.