Widget V4 Thermostat NETATMO

Utilisation du core de Jeedom Widgets
1

Bonjour,

J’ai installer le widget thermostat Netatmo sur ma VM V4.

Lorsque je suis sur la page dashboard, j’ai un visuel correct :
therm%20dashboard

En revanche lorsque que je bascule en vue design la valeur de consigne ne s’affiche plus et le mode non plus :
therm%20design

Auriez vous une petite idée du souci ? est ce un pb du widget ou du core V4 ?

Voici le code :

<div style="padding:0px; width:200px; height:200px;" class="cmd #history# container-fluid tooltips cmd-widget netatmodisplay" data-type="info" data-version="#version#" data-eqLogic_id="#eqLogic_id#" data-subtype="other" data-cmd_id="#id#" data-cmd_uid="#uid#">
<div style="position:relative; height:100px">
   <div style="position:absolute;z-index:1">
      <img src="data/customTemplates/dashboard/cmd.info.string.ALMY_Netatmo_therminfo/fondnetatmo.png" width="200px" />
   </div>
  <div class="value-consigneent#id#"></div>
  <div class="value-consigneoff#id#"></div>
  <div class="value-consignedec#id#" style=""></div>
  <div class="value-temperatureent#id#"></div>
  <div class="value-temperaturedec#id#" style=""></div>
  <marquee class="programmedefile#id#" style="color:black; position:absolute; top:180px; left:10px; width:130px; height:180px; z-index:2; font-size:12px"></marquee>
  <div class="programmefixe#id#" style="color:black; position:absolute; top:155px; left:0px; width:200px; height:200px; z-index:2; font-size:12px"></div>
  <img class="IMGmode#id#" src="data/customTemplates/dashboard/cmd.info.string.ALMY_Netatmo_therminfo/manual.png" />
  <img class="IMGbatterie#id#" src="data/customTemplates/dashboard/cmd.info.string.ALMY_Netatmo_therminfo/battery_min.png" />
  <img class="IMGwifi#id#" src="data/customTemplates/dashboard/cmd.info.string.ALMY_Netatmo_therminfo/wifi_null.png" />
</div>
 	 <style>
		@font-face {
    		font-family: "Square";
    		src:  url("data/customTemplates/dashboard/cmd.info.string.ALMY_Netatmo_therminfo/Square.ttf") format("truetype");
    		font-weight:normal;
    		font-style:normal;
		}
 		img.IMGmode#id# {
			width:30px;
          	height:30px;
			position:absolute;
          	top:25px;
       		left:25px;
          	z-index:2;
	  	}
       
 		img.IMGbatterie#id# {
			width:25px;
          	height:10px;
			position:absolute;
          	top:50px;
       		left:148px;  
          	z-index:2; 
	  	}    
       
  		img.IMGwifi#id# {
			width:25px;
          	height:20px;
			position:absolute;
          	top:20px;
       		left:148px;          
          	z-index:2; 
	  	} 
       
		div.value-consigneent#id# {
		    font-family: "Square"; 
          	font-size:40px;
          	font-weight:bold; 
			position:absolute;
          	top:39px;
       		left:-4px;          
          	width:200px;
          	height:200px;
          	z-index:2;          
		    letter-spacing: 2px;
		    color: 	white;
	  	}
       
    	div.value-consignedec#id# {
		    font-family: "Square"; 
          	font-size:12px;
          	position:absolute;
          	top:28px;
          	width:190px;
          	height:200px;
          	z-index:2;          
		    letter-spacing: 2px;
		    color: 	white;
	  	}
       
       div.value-consigneoff#id# {
		    font-family: "Square"; 
          	font-size:28px;
          	font-weight:bold; 
			position:absolute;
          	top:39px;
       		left:2px;          
          	width:200px;
          	height:200px;
          	z-index:2;          
		    letter-spacing: 2px;
		    color: 	white;
	  	}
       
    	div.value-temperatureent#id# {
		    font-family: "Square"; 
          	font-size:70px;
          	font-weight:bold; 
            position:absolute;
            top:111px; 
       		left:-5px; 
          	width:200px; 
            height:200px; 
            z-index:2;    
		    letter-spacing: 2px;
		    color: 	black;
	  	}
    
        div.value-temperaturedec#id# {
		    font-family: "Square"; 
          	font-size:18px;
          	font-weight:bold;
            position:absolute;
            top:91px;
          	width:210px;
            height:200px;
            z-index:2;       
		    letter-spacing: 2px;
		    color: 	black;
	  	}
       
 	 </style>    
	<script>       
		  jeedom.cmd.update['#id#'] = function(_options){ 
            	// Récupération des valeurs
              	var state = _options.display_value;
				var stateListe = state.split(",");			
				var consigne = stateListe[0];
  				var temperature = stateListe[1];
                var programme_origine = stateListe[2].replace("\"","");
           	    var programme = programme_origine.replace("\"","");
                var mode_origine = stateListe[3].replace("\"","");
                var mode =  mode_origine.replace("\"","");
                var batterie = stateListe[4];
                var wifi = stateListe[5];
                var debug = "";
            
                // TEMPERATURE
            	debug += " - temperature:"+temperature;
   				var temperatureent = Math.trunc(temperature);
           		var temperaturedec = Math.round(temperature*10-temperatureent*10);
                if ( temperature < 10 ) {
                   	$('.cmd[data-cmd_uid=#uid#] .value-temperatureent#id#').text("0"+temperatureent);
                } else {
                    $('.cmd[data-cmd_uid=#uid#] .value-temperatureent#id#').text(temperatureent);
                }
                if ( temperatureent == 11 ) {
                	$('.cmd[data-cmd_uid=#uid#] .value-temperaturedec#id#').empty().attr('style', 'left:20px;');
                } else if ( temperatureent == 21 || temperatureent == 31 ) {
                    $('.cmd[data-cmd_uid=#uid#] .value-temperaturedec#id#').empty().attr('style', 'left:31px;');
                } else if ( temperatureent >= 10 && temperatureent < 20 ) {
                	$('.cmd[data-cmd_uid=#uid#] .value-temperaturedec#id#').empty().attr('style', 'left:31px;');        
                } else {    
                    $('.cmd[data-cmd_uid=#uid#] .value-temperaturedec#id#').empty().attr('style', 'left:42px;');  
                }
           		$('.cmd[data-cmd_uid=#uid#] .value-temperaturedec#id#').text(temperaturedec);
            
      			// CONSIGNE
            	debug += " - consigne:"+consigne;
      			if ( consigne == 1 ) {
	               	$('.cmd[data-cmd_uid=#uid#] .value-consigneoff#id#').html("OFF");
	 	            $('.cmd[data-cmd_uid=#uid#] .value-consigneent#id#').hide();
		            $('.cmd[data-cmd_uid=#uid#] .value-consignedec#id#').hide();
	            } else {
	            	var consigneent = Math.trunc(consigne);
	            	var consignedec = Math.round(consigne*10-consigneent*10);
                    if ( consigne < 10 ) {
                   		$('.cmd[data-cmd_uid=#uid#] .value-consigneent#id#').html("0"+consigneent);
                    } else {
                      	$('.cmd[data-cmd_uid=#uid#] .value-consigneent#id#').html(consigneent);
                    }
	               	$('.cmd[data-cmd_uid=#uid#] .value-consigneoff#id#').hide();              
                    if ( consigneent == 11 ) {
                     	$('.cmd[data-cmd_uid=#uid#] .value-consignedec#id#').empty().attr('style', 'left:20px;');  
					} else if ( consigneent == 21 || consigneent == 31 ) {	
                		$('.cmd[data-cmd_uid=#uid#] .value-consignedec#id#').empty().attr('style', 'left:25px;');  
                    } else if ( consigneent >= 10 && consigneent < 20 ) {
                		$('.cmd[data-cmd_uid=#uid#] .value-consignedec#id#').empty().attr('style', 'left:27px;');
                	} else {    
	                    $('.cmd[data-cmd_uid=#uid#] .value-consignedec#id#').empty().attr('style', 'left:31px;');  
	                }
		            $('.cmd[data-cmd_uid=#uid#] .value-consignedec#id#').html(consignedec);
	            }
      
      			// BATTERIE
                debug += " - batterie:"+batterie;
                if ( batterie > 99 ) $('.cmd[data-cmd_uid=#uid#] .IMGbatterie#id#').empty().attr('src', 'data/customTemplates/dashboard/cmd.info.string.ALMY_Netatmo_therminfo/battery_full.png');        
                else if ( batterie > 75  ) $('.cmd[data-cmd_uid=#uid#] .IMGbatterie#id#').empty().attr('src', 'data/customTemplates/dashboard/cmd.info.string.ALMY_Netatmo_therminfo/battery_big.png');        
				else if ( batterie > 50  ) $('.cmd[data-cmd_uid=#uid#] .IMGbatterie#id#').empty().attr('src', 'data/customTemplates/dashboard/cmd.info.string.ALMY_Netatmo_therminfo/battery_medium.png');        
				else if ( batterie > 25  ) $('.cmd[data-cmd_uid=#uid#] .IMGbatterie#id#').empty().attr('src', 'data/customTemplates/dashboard/cmd.info.string.ALMY_Netatmo_therminfo/battery_small.png');        
 				else if ( batterie > 0  ) $('.cmd[data-cmd_uid=#uid#] .IMGbatterie#id#').empty().attr('src', 'data/customTemplates/dashboard/cmd.info.string.ALMY_Netatmo_therminfo/battery_min.png');        
                else  $('.cmd[data-cmd_uid=#uid#] .IMGbatterie').hide();   
      
      			// WIFI
                debug += " - wifi:"+wifi;
                if ( wifi > 80 ) $('.cmd[data-cmd_uid=#uid#] .IMGwifi#id#').empty().attr('src', "data/customTemplates/dashboard/cmd.info.string.ALMY_Netatmo_therminfo/wifi_max.png");
                else if ( wifi > 50  ) $('.cmd[data-cmd_uid=#uid#] .IMGwifi#id#').empty().attr('src', "data/customTemplates/dashboard/cmd.info.string.ALMY_Netatmo_therminfo/wifi_high.png");
				else if ( wifi > 20  ) $('.cmd[data-cmd_uid=#uid#] .IMGwifi#id#').empty().attr('src', "data/customTemplates/dashboard/cmd.info.string.ALMY_Netatmo_therminfo/wifi_medium.png");
 				else if ( wifi > 0  ) $('.cmd[data-cmd_uid=#uid#] .IMGwifi#id#').empty().attr('src', "data/customTemplates/dashboard/cmd.info.string.ALMY_Netatmo_therminfo/wifi_null.png");
                else $('.cmd[data-cmd_uid=#uid#] .IMGwifi').hide();                

      
      			// MODE
                debug += " - mode:"+mode;
 				if ( mode == "Off" ) $('.cmd[data-cmd_uid=#uid#] .IMGmode#id#').empty().attr('src', "data/customTemplates/dashboard/cmd.info.string.ALMY_Netatmo_therminfo/Off.png");
                else if ( mode == "Manuel" ) $('.cmd[data-cmd_uid=#uid#] .IMGmode#id#').empty().attr('src', "data/customTemplates/dashboard/cmd.info.string.ALMY_Netatmo_therminfo/manual.png");
      			else if ( mode == "Programme") $('.cmd[data-cmd_uid=#uid#] .IMGmode#id#').empty().attr('src', "data/customTemplates/dashboard/cmd.info.string.ALMY_Netatmo_therminfo/schedule.png");
				else if ( mode == "away" ) $('.cmd[data-cmd_uid=#uid#] .IMGmode#id#').empty().attr('src', "data/customTemplates/dashboard/cmd.info.string.ALMY_Netatmo_therminfo/away.png");
				else if ( mode == "hg" ) $('.cmd[data-cmd_uid=#uid#] .IMGmode#id#').empty().attr('src', "data/customTemplates/dashboard/cmd.info.string.ALMY_Netatmo_therminfo/hg.png");
                else $('.cmd[data-cmd_uid=#uid#] .IMGmode').hide();
      
                 // PROGRAMME
                 debug += " - programme:"+programme;
                 var programme_taille = programme.length;
            	debug += " - taille:"+programme_taille;
            	$('.cmd[data-cmd_id=#id#] .programmefixe').text(debug);
            	$('.cmd[data-cmd_uid=#uid#] .programmedefile#id#').text(programme)
                 if ( programme_taille < 25 ) {
                 	$('.cmd[data-cmd_uid=#uid#] .programmedefile#id#').hide(); 
            		$('.cmd[data-cmd_uid=#uid#] .programmefixe#id#').text(programme);
 				} else {
                    $('.cmd[data-cmd_uid=#uid#] .programmedefile#id#').text(programme);
                 	$('.cmd[data-cmd_uid=#uid#] .programmefixe#id#').hide();
                }
      					
			$('.cmd[data-cmd_id=#id#]').attr('title','Valeur du '+_options.valueDate+', collectée le '+_options.collectDate);
		}
		jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
	</script>
</div>

MERCI

2

S’il s’agit de mon widget : Netatmo_therminfo

Mais ce fond orange me dit rien mais c’est bien mon code

j’ai pas encore migré en V4 mais lors d’un test j’avais noté :

Dans la balise Style

value-temperatureent :

Mettre le top a 105px;

value-temperaturedec :

Mettre le top a 118px;

Dite moi si c’est suffisant, sinon je repasserai mon test en V4 pour regarder

Tu peux me dire où tu as eu ce plugin ? Sur le market ?

3

C’est bien ton code je confirme.
En revanche suite au passage en V4 l’image du thermostat était très moche. Je ne sais pas pourquoi car en v3 c’était nickel.
Bref le l’ai changé et mis en orange pour faire un peu de couleur. Et du coup j’ai retouché légèrement le code pour l’ajuster a la nouvel icône du thermostat.

Merci pour le code de base.
En revanche je n’arrive toujours pas à trouver le problème d’affichage spécifique à la V4 et uniquement en mode design

4

Yo @Almy,

Tu n’afficherai pas uniquement la commande sur le design et non l’équipement complèt (même s’il n’est constitué que d’une seule commande) ?

5

Je regarde ça demain et te confirmerai
Merci pour la piste

6

Merci @Salvialf,

L’idée était bonne mais j’affichais déja l’équipement complet.
Du coup j’ai essayé en n’affichant que la commande et la miracle ca marche.

Merci

7

Content que cela fonctionne, je suis bloqué par le plugin suivi conso pour passe en V4 alors je suis pas trop réactif sur cette version, désolé

8

Hello @Salvialf @Almy @Nemeraud

j’essai désespérément de comprendre le widget de @Nemeraud :frowning:

J’ai téléchargé le Widget « Netatmo_therminfo », créé le virtuelle mais comment on associe les deux, j’ai pas l’option de visible …

image
image762×415 18.9 KB

Merci pour votre aide !

9

Bonjour

Je suis toujours en V3, il y aura donc des adaptations à faire pour la V4

Mais l’association ne change pas normalement, si tu avais le widget en V3, il va s’afficher en V4, mais avec des décalages

Avec une installation directement depuis la V4, je sais pas trop, puisque le système de widget a changé, il faudrait le mettre manuellement dans la partie custom

10

Arf j’avais pas vu ton retour …

Donc il n’est pas fonctionnel en V4 d’où le fait de ne pas le voir :frowning:

Je suis un grand novice qui galette déjà avec les fonctionnel alors la c’est peine perdue sans plus d’explications :face_with_hand_over_mouth:

Merci pour ton retour.

11

Il doit s’afficher mais avec des décalages

Je m’étais noté cette correction à faire lors d’un test de la V4

Widget Netatmo_therminfo.html : value-temperatureent top:105px; value-temperaturedec top:118px;

Les 2 paramètres top de la partie style à modifier

12

Certes mais je n’arrive même pas a ce point la vu que je n’arrive pas a l’associer car non visible dans la liste (d’où ma demande d’aide)

image
image762×415 18.9 KB

13

Salut,

A priori le widget attend une commande info/autre et ta commande est une info/binaire j’ai l’impression…

14

Ok merci pour ton retour je vais tester ça desuite … D’ailleurs comme savoir ce qu’il faut choisir ?

15

En fonction du résultat attendu:

  • binaire : 0 ou 1
  • numérique : n’importe quel chiffre avec virgule ou non
  • string/autre : chaîne de caractères (des mots quoi! )
16

Bingooooo merci !

image
image752×222 8.45 KB

17

Mais il faut que ta commande, en effet une info autre, contienne la liste des commandes attendues

Comme indiqué dans l’aide du plugin

Utilisation
Créer un virtuel avec une commande info de type AUTRE
et mettre les 5 commandes dans l’ordre séparées par une virgule

Consigne,Température,Statut pour mobile,Mode,Batterie,Signal Wifi

exemple :
#[Thermostat][Salon][Consigne]#,#[Thermostat][Salon][Température]#,#[Thermostat][Salon][Statut pour mobile]#,#[Thermostat][Salon][Mode]#,#[Thermostat][Salon][Batterie]#,#[Thermostat][Salon][Signal Wifi]#

18

et ton TAF est juste magnifique je tiens a le souligner !

image

19

Si tu parles de ça (dans l’autre post) pour régler le pb de décalage moi perso aucun décalage dans mon design …

20

Sur l’image que tu as posté, les températures sont trop hautes