Bonjour,
J’essaye de faire un widget pour mettre en forme un virtuel de ma pompe à chaleur.
une info 0 / 1 ou 2 avec une image de fond qui correspond à l’état OFF / ON ou ERREUR, la température ambiante et la température de l’eau chaude.
Je me suis basé sur le widget Linky de @Salvialf j’ai bien appliqué le widget à mes commandes avec les bons noms mais je n’ai que l’image qui fonctionne. En faite j’arrive à le faire fonctionner sur chaque commande séparément mais pas avec les 3 en même temps je sais pas si je me suis bien exprimé 
voici le code :
<div class="cmd cmd-widget #history# widget-daikin" data-type="info" data-subtype="numeric" data-template="Daikin" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#" title="#collectDate#">
<div class="daikin-background#id#" id="imgDaikinID#id#"></div>
<div class="daikin-data#id# history" data-type="temperature">
<! -- Etat Pompe -->
<div class="daikin-dataInfo#id#" data-type="info">
<span class="etatPompe#id# fontDigital value"></span>
</div>
<! -- Temperature Ambiante -->
<div class="daikin-dataChauffage#id#" data-type="temperature">
<span class="intNumTemp#id# fontDigital value"></span>
<span class="decNumTemp#id# fontDigital value"></span>
<span class="uniteTemp#id# fontDigital value"></span>
</div>
<! -- Temperature Eau -->
<div class="daikin-dataEau#id#" data-type="temperature">
<span class="intNumTempEau#id# fontDigital value"></span>
<span class="uniteTempEau#id# fontDigital value"></span>
</div>
</div>
<style>
@font-face {
font-family: "Digital-7";
src: url("data/customTemplates/dashboard/cmd.info.numeric.Daikin/font/digital-7.eot?") format("eot"),
url("data/customTemplates/dashboard/cmd.info.numeric.Daikin/font/digital-7.woff") format("woff"),
url("data/customTemplates/dashboard/cmd.info.numeric.Daikin/font/digital-7.ttf") format("truetype"),
url("data/customTemplates/dashboard/cmd.info.numeric.Daikin/font/digital-7.svg#Digital-7") format("svg");
font-weight:normal;
font-style:normal;
}
div.widget-daikin{
width:220px;
height:220px;
position:relative;
}
.widget-daikin span.fontDigital{
position:absolute;
font-family: "Digital-7";
color: #C4C4C4;
}
.widget-daikin span.fontDigital.value{
transform : scale(0.7,1);
-webkit-transform:scale(0.7,1);
-moz-transform:scale(0.7,1);
-ms-transform:scale(0.7,1);
-o-transform:scale(0.7,1);
}
.widget-daikin span.etatPompe#id# {
font-size:37px;
letter-spacing: 6px;
top: 20px;
right: 2px;
}
.widget-daikin span.intNumTempEau#id# {
font-size:37px;
letter-spacing: 6px;
top: 105px;
right: 2px;
}
.widget-daikin span.decNumTempEau#id# {
font-size:22px;
top: 110px;
right: -20px;
}
.widget-daikin span.uniteTempEau#id# {
font-size:15px;
font-weight: bold;
top: 110px;
right: -35px;
}
.widget-daikin span.intNumTemp#id# {
font-size:37px;
letter-spacing: 6px;
top: 105px;
}
.widget-daikin span.decNumTemp#id# {
font-size:22px;
top: 110px;
right: -20px;
}
.widget-daikin span.uniteTemp#id# {
font-size:15px;
font-weight: bold;
top: 110px;
right: -35px;
}
.widget-daikin div.daikin-background#id# {
width:220px;
height:220px;
position:absolute;
z-index:1;
#background-color:red;
}
.widget-daikin div.daikin-data#id# {
width:220px;
height:220px;
position:absolute;
z-index:2;
#background-color:green;
}
.widget-daikin div.daikin-dataInfo#id# {
width:220px;
height:220px;
position:absolute;
z-index:3;
#background-color:blue;
}
.widget-daikin div.daikin-dataChauffage#id# {
width:220px;
height:220px;
position:absolute;
z-index:4;
#background-color:orange;
}
.widget-daikin div.daikin-dataEau#id# {
width:220px;
height:220px;
position:absolute;
z-index:5;
#background-color:grey;
}
img.daikin-background#id# {
width:220px;
height:220px;
position:relative;
z-index:1;
#background-color:yellow;
}
</style>
<script>
jeedom.cmd.update['#id#'] = function(_options){
// VARIABLES
var valeur = parseFloat(_options.display_value);
var widget = $('.cmd[data-cmd_id=#id#]').closest('.eqLogic').find('.widget-daikin:first');
var srcImgURL = 'data/customTemplates/dashboard/cmd.info.numeric.Daikin/';
var srcImg = 'Pac_Daikin_Madoka_NOK.png';
// ETAT POMPE
if('#name#' == 'Etat Pompe'){
if (valeur != '') { // Si valeur différente de vide
if (valeur == 0) { // Si valeur = 0 pour OFF
var srcImg = 'Pac_Daikin_Madoka_OFF.png';
}
else if (valeur == 1) { // Si valeur = 1 pour ON
var srcImg = 'Pac_Daikin_Madoka_OK.png';
}
else if (valeur == 2) { // Si valeur = 2 pour ERROR
var srcImg = 'Pac_Daikin_Madoka_NOK.png';
}
}
widget.find('.daikin-background#id#').empty().append('<img src="' + srcImgURL + srcImg + '" class="daikin-background#id#" id="imgDaikinID#id#"/>');
}
// TEMPERATURE EAU CHAUDE
if('#name#' == 'Temperature Eau'){
var n = parseFloat(_options.display_value).toFixed(1);
var _int = n.split('.')[0];
var _dec = n.split('.')[1];
widget.find('.intNumTempEau#id#').text(_int+".").attr('title','Valeur du '+_options.valueDate+', collectée le '+_options.collectDate);
widget.find('.decNumTempEau#id#').text(_dec);
widget.find('.uniteTempEau#id#').text('#unite#');
}
// TEMPERATURE CHAUFFAGE
if('#name#' == 'Temperature Chauffage'){
var n = parseFloat(_options.display_value).toFixed(1);
var _int = n.split('.')[0];
var _dec = n.split('.')[1];
widget.find('.intNumTemp#id#').text(_int+".").attr('title','Valeur du '+_options.valueDate+', collectée le '+_options.collectDate);
widget.find('.decNumTemp#id#').text(_dec);
widget.find('.uniteTemp#id#').text('#unite#');
}
}
jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#'});
setTimeout(function(){
if($('.cmd[data-cmd_id=#id#]').closest('.eqLogic').find('.widget-daikin').length > 1){
$('.cmd[data-cmd_id=#id#]').closest('.eqLogic').find('.widget-daikin:not(:first)').hide();
}
},100)
</script>
</div>
Les images :
et le rendu final devrait être à quelque chose prêt :
l’image de fond qui change selon l’état avec la temperature et plus tard j’aimerais rendre cliquable le rond pour switcher entre température ambiante et température de l’eau.
si quelqu’un peu m’aider.
PS : merci à @JAG de m’avoir donner un peu de son temps
PS 2 : je suis pas développeur je bidouille uniquement mais je pense que le soucis viens de la :
var widget = $('.cmd[data-cmd_id=#id#]').closest('.eqLogic').find('.widget-daikin:first');
--------------------------------
setTimeout(function(){
if($('.cmd[data-cmd_id=#id#]').closest('.eqLogic').find('.widget-daikin').length > 1){
$('.cmd[data-cmd_id=#id#]').closest('.eqLogic').find('.widget-daikin:not(:first)').hide();
}
Merci
sujet sur la pompe daikin atherma 3 pour ceux qui en ont une : PAC DAIKIN Altherma et plugin daikin controler
