AtoutPOPP

[AlainM]

Quelques lignes, pour les emplacements des objets et suppression de l'image du thermomètre et remplacement de la température

Code : Tout sélectionner

<style>
@font-face {
    font-family: danfoss;
    src: url('/plugins/widget/core/template/dashboard/cmd.info.numeric.AtoutPOPP/digital-7-italic.ttf');
}
 
div.vanne {
  	position: absolute;
  	top: 30px;
  	left: 30px;
  }
div.pending {
  	position: absolute;
	top: 30px;
  	left: 120px;
  }

div.temperature {
  	position: absolute;
  	top: 45px;
  	left: 105px;
  }

div.batterie {
  	position: absolute;
  	top: 60px;
  	left: 115px;
  }

span.batterie_label {
  	position: absolute;
  	background-color:#FFFFFF;  
  	border:1px solid #323232;
  	font-size:8px;
    color: #323232 ;
    padding:0px 2px 0px 2px;
  	top: 30px;
  	left: 5px;  	
  }

 span.temp_unite {
    font-family: danfoss;
    font-size:17px;
  	color: #323232 ;
  	position: absolute;
  	top: 22px;
  	right: 5px;
  }

 span.vanne_unite {
    font-family: danfoss;
    font-size:23px;
  	color: #323232 ;
  	position: absolute;
  	top: 25px;
  	right: 33px;
  }
span.vanne_decimal {
    font-family: danfoss;
    font-size:12px;
  	color: #323232 ;
  	position: absolute;
  	top: 35px;
  	right: 27px;
  }
span.vanne_label {
    font-family: danfoss;
    font-size:12px;
  	color: #323232 ;
  	position: absolute;
  	top: 30px;
  	right: 25px;
  }  
span.vanne_consignePending {
    font-size:12px;
   	background-color:#FFFFFF;  
  	color: #323232 ;
  	border:1px solid #323232;
  	padding:0px 2px 0px 2px;
  }  
  
</style>
<div class="cmd" data-type="action" data-subtype="slider" data-cmd_id="#id#" style="left:10px;top:0px;" >
    <div><span style="font-size: 1em;" id="iconCmd#id#"></span></div>	
    <map name="metroid#id#">
		<area id="areaMinus#id#" shape="circle" coords="10,38,15" href="">
		<area id="areaPlus#id#" shape="circle" coords="70,38,15" href="">
	</map>
    <div class="batterie">
        <img id="batterie#id#" style="width:30px;float:left;padding:-5px;" src="plugins/widget/core/template/dashboard/cmd.info.numeric.AtoutPOPP/battery-low-48.png">
        <span class="batterie_label" id="batterieLabel#id#"></span>
    </div>
  	<div class="vanne">
        <img src="plugins/widget/core/template/dashboard/cmd.info.numeric.AtoutPOPP/Danfoss.png" usemap="#metroid#id#" hidefocus="true" ismap="ismap" border="0">      		
		<span class="vanne_unite" id="intNumVanne#id#"></span>
    	<span class="vanne_decimal" id="decNumVanne#id#"></span>
      	<span class="vanne_label" id="uniteVanne#id#">°</span>
    </div>
  	<div class="pending">
          <span class="vanne_consignePending" id="consignePending#id#"></span>   
      	
	</div>    
</div>
<script>
    var poppConsignePending#id# = parseInt('#ConsignePending#');
    var poppConsigne#id# = parseInt('#Temperature#');
    var poppTemperature#id# = parseInt('#Temperature#');
    var poppCommande#id# = parseInt('#Commande#');
    var poppBatterie#id# = parseInt('#Batterie#');
    var valConsignPending#id#=0;

// Temperature  
      jeedom.cmd.execute({
      id: poppTemperature#id#,
      success:  function(valeur) {          
        var intNum = Math.floor(valeur);
        $('#intNumTemp#id#').text(intNum+"°");
  	 }
  	});      
    
    $('#intNumTemp#id#')
    .css('cursor', 'pointer')
    .click(
    function(){
        $('#md_modal').dialog({title: "Historique Temperature"});
        $("#md_modal").load('index.php?v=d&modal=cmd.history&id='+poppTemperature#id#).dialog('open');
    });

 var valConsign#id#=0;
 jeedom.cmd.execute({
      id: poppConsigne#id#,
      success:  function(valeur) 
     {              		  
   			valConsign#id#=valeur;
  	 }
  	});            	    
       
      
// Consigne Pending  
  	function getConsignePending(){
    jeedom.cmd.execute({
      id: poppConsignePending#id#,
      success:  function(valeur) {     
        valConsignPending#id#=valeur;
        if (valConsignPending#id# == ''){ valConsignPending#id# = valConsign#id#; }
        $('#consignePending#id#').text(valConsignPending#id#+'°');
  	 }
  	});            	    
    }  	
    getConsignePending();  

    $('#consignePending#id#')
    .css('cursor', 'pointer')
    .click(
    function(){
        $('#md_modal').dialog({title: "Historique Console Pending"});
        $("#md_modal").load('index.php?v=d&modal=cmd.history&id='+poppConsignePending#id#).dialog('open');
    });
      
// Batterie
   jeedom.cmd.execute({
      id: poppBatterie#id#,
      success:  function(valeur) {          
        $('#batterieLabel#id#').text(valeur+'%');
     	var batt="full";
        if (valeur > 50 && valeur <= 65) {batt='high';} 
        if (valeur > 20 && valeur <= 50) {batt='mid';} 
  		if (valeur > 0 && valeur <= 20) {batt='low';} 
  		if (valeur == 0) {batt='empty';}         
     	$('#batterie#id#').attr('src', 'plugins/widget/core/template/dashboard/cmd.info.numeric.AtoutPOPP/battery-'+batt+'-48.png');
       }
  	});            	    

     $('#batterieLabel#id#')
    .css('cursor', 'pointer')
    .click(
    function(){
        $('#md_modal').dialog({title: "Historique Batterie"});
        $("#md_modal").load('index.php?v=d&modal=cmd.history&id='+poppBatterie#id#).dialog('open');
    });

 
 // Consigne
    jeedom.cmd.execute({
      id: poppConsigne#id#,
      success:  function(valeur) {           
		var intNum = Math.floor(valeur);
	 	var decNum = Math.round((valeur - intNum) * 10);
   		$('#intNumVanne#id#').text(intNum);
  		if (decNum != 0) 
       		{
    			$('#decNumVanne#id#').text('.'+decNum);
    			$('#intNumVanne#id#.state_unite').css('left' , '25px');
    		}       
      	var areaPlus = document.getElementById("areaPlus#id#");
       	var areaMinus = document.getElementById("areaMinus#id#");
		areaMinus.onclick = function() 
        	{
           		var curVal=valConsignPending#id#;
           		if (curVal>10) { curVal=curVal - 0.5;}
				valConsignPending#id#=curVal;
          		jeedom.cmd.execute({id :poppCommande#id#, value : {slider : curVal}})                 
				$('#consignePending#id#').text(valConsignPending#id#+'°');                          
          		return false;
   			}                                      
		areaPlus.onclick = function() 
        	{          
            	var curVal=valConsignPending#id#;
            	if (curVal<30) { curVal=curVal + 0.5;}
              	valConsignPending#id#=curVal;
          		jeedom.cmd.execute({id :poppCommande#id#, value : {slider : curVal}})                
                $('#consignePending#id#').text(valConsignPending#id#+'°');
          		return false;
        	}                    
  	 }
  	});            	    
    $('#intNumVanne#id#')
    .css('cursor', 'pointer')
    .click(
    function(){
        $('#md_modal').dialog({title: "Historique Consigne"});
        $("#md_modal").load('index.php?v=d&modal=cmd.history&id='+poppConsigne#id#).dialog('open');
    });
              
    </script>

[Sylar]

Quelques lignes, pour les emplacements des objets et suppression de l'image du thermomètre et remplacement de la température

Code : Tout sélectionner

<style>
@font-face {
    font-family: danfoss;
    src: url('/plugins/widget/core/template/dashboard/cmd.info.numeric.AtoutPOPP/digital-7-italic.ttf');
}
 
div.vanne {
  	position: absolute;
  	top: 30px;
  	left: 30px;
  }
div.pending {
  	position: absolute;
	top: 30px;
  	left: 120px;
  }

div.temperature {
  	position: absolute;
  	top: 45px;
  	left: 105px;
  }

div.batterie {
  	position: absolute;
  	top: 60px;
  	left: 115px;
  }

span.batterie_label {
  	position: absolute;
  	background-color:#FFFFFF;  
  	border:1px solid #323232;
  	font-size:8px;
    color: #323232 ;
    padding:0px 2px 0px 2px;
  	top: 30px;
  	left: 5px;  	
  }

 span.temp_unite {
    font-family: danfoss;
    font-size:17px;
  	color: #323232 ;
  	position: absolute;
  	top: 22px;
  	right: 5px;
  }

 span.vanne_unite {
    font-family: danfoss;
    font-size:23px;
  	color: #323232 ;
  	position: absolute;
  	top: 25px;
  	right: 33px;
  }
span.vanne_decimal {
    font-family: danfoss;
    font-size:12px;
  	color: #323232 ;
  	position: absolute;
  	top: 35px;
  	right: 27px;
  }
span.vanne_label {
    font-family: danfoss;
    font-size:12px;
  	color: #323232 ;
  	position: absolute;
  	top: 30px;
  	right: 25px;
  }  
span.vanne_consignePending {
    font-size:12px;
   	background-color:#FFFFFF;  
  	color: #323232 ;
  	border:1px solid #323232;
  	padding:0px 2px 0px 2px;
  }  
  
</style>
<div class="cmd" data-type="action" data-subtype="slider" data-cmd_id="#id#" style="left:10px;top:0px;" >
    <div><span style="font-size: 1em;" id="iconCmd#id#"></span></div>	
    <map name="metroid#id#">
		<area id="areaMinus#id#" shape="circle" coords="10,38,15" href="">
		<area id="areaPlus#id#" shape="circle" coords="70,38,15" href="">
	</map>
    <div class="batterie">
        <img id="batterie#id#" style="width:30px;float:left;padding:-5px;" src="plugins/widget/core/template/dashboard/cmd.info.numeric.AtoutPOPP/battery-low-48.png">
        <span class="batterie_label" id="batterieLabel#id#"></span>
    </div>
  	<div class="vanne">
        <img src="plugins/widget/core/template/dashboard/cmd.info.numeric.AtoutPOPP/Danfoss.png" usemap="#metroid#id#" hidefocus="true" ismap="ismap" border="0">      		
		<span class="vanne_unite" id="intNumVanne#id#"></span>
    	<span class="vanne_decimal" id="decNumVanne#id#"></span>
      	<span class="vanne_label" id="uniteVanne#id#">°</span>
    </div>
  	<div class="pending">
          <span class="vanne_consignePending" id="consignePending#id#"></span>   
      	
	</div>    
</div>
<script>
    var poppConsignePending#id# = parseInt('#ConsignePending#');
    var poppConsigne#id# = parseInt('#Temperature#');
    var poppTemperature#id# = parseInt('#Temperature#');
    var poppCommande#id# = parseInt('#Commande#');
    var poppBatterie#id# = parseInt('#Batterie#');
    var valConsignPending#id#=0;

// Temperature  
      jeedom.cmd.execute({
      id: poppTemperature#id#,
      success:  function(valeur) {          
        var intNum = Math.floor(valeur);
        $('#intNumTemp#id#').text(intNum+"°");
  	 }
  	});      
    
    $('#intNumTemp#id#')
    .css('cursor', 'pointer')
    .click(
    function(){
        $('#md_modal').dialog({title: "Historique Temperature"});
        $("#md_modal").load('index.php?v=d&modal=cmd.history&id='+poppTemperature#id#).dialog('open');
    });

 var valConsign#id#=0;
 jeedom.cmd.execute({
      id: poppConsigne#id#,
      success:  function(valeur) 
     {              		  
   			valConsign#id#=valeur;
  	 }
  	});            	    
       
      
// Consigne Pending  
  	function getConsignePending(){
    jeedom.cmd.execute({
      id: poppConsignePending#id#,
      success:  function(valeur) {     
        valConsignPending#id#=valeur;
        if (valConsignPending#id# == ''){ valConsignPending#id# = valConsign#id#; }
        $('#consignePending#id#').text(valConsignPending#id#+'°');
  	 }
  	});            	    
    }  	
    getConsignePending();  

    $('#consignePending#id#')
    .css('cursor', 'pointer')
    .click(
    function(){
        $('#md_modal').dialog({title: "Historique Console Pending"});
        $("#md_modal").load('index.php?v=d&modal=cmd.history&id='+poppConsignePending#id#).dialog('open');
    });
      
// Batterie
   jeedom.cmd.execute({
      id: poppBatterie#id#,
      success:  function(valeur) {          
        $('#batterieLabel#id#').text(valeur+'%');
     	var batt="full";
        if (valeur > 50 && valeur <= 65) {batt='high';} 
        if (valeur > 20 && valeur <= 50) {batt='mid';} 
  		if (valeur > 0 && valeur <= 20) {batt='low';} 
  		if (valeur == 0) {batt='empty';}         
     	$('#batterie#id#').attr('src', 'plugins/widget/core/template/dashboard/cmd.info.numeric.AtoutPOPP/battery-'+batt+'-48.png');
       }
  	});            	    

     $('#batterieLabel#id#')
    .css('cursor', 'pointer')
    .click(
    function(){
        $('#md_modal').dialog({title: "Historique Batterie"});
        $("#md_modal").load('index.php?v=d&modal=cmd.history&id='+poppBatterie#id#).dialog('open');
    });

 
 // Consigne
    jeedom.cmd.execute({
      id: poppConsigne#id#,
      success:  function(valeur) {           
		var intNum = Math.floor(valeur);
	 	var decNum = Math.round((valeur - intNum) * 10);
   		$('#intNumVanne#id#').text(intNum);
  		if (decNum != 0) 
       		{
    			$('#decNumVanne#id#').text('.'+decNum);
    			$('#intNumVanne#id#.state_unite').css('left' , '25px');
    		}       
      	var areaPlus = document.getElementById("areaPlus#id#");
       	var areaMinus = document.getElementById("areaMinus#id#");
		areaMinus.onclick = function() 
        	{
           		var curVal=valConsignPending#id#;
           		if (curVal>10) { curVal=curVal - 0.5;}
				valConsignPending#id#=curVal;
          		jeedom.cmd.execute({id :poppCommande#id#, value : {slider : curVal}})                 
				$('#consignePending#id#').text(valConsignPending#id#+'°');                          
          		return false;
   			}                                      
		areaPlus.onclick = function() 
        	{          
            	var curVal=valConsignPending#id#;
            	if (curVal<30) { curVal=curVal + 0.5;}
              	valConsignPending#id#=curVal;
          		jeedom.cmd.execute({id :poppCommande#id#, value : {slider : curVal}})                
                $('#consignePending#id#').text(valConsignPending#id#+'°');
          		return false;
        	}                    
  	 }
  	});            	    
    $('#intNumVanne#id#')
    .css('cursor', 'pointer')
    .click(
    function(){
        $('#md_modal').dialog({title: "Historique Consigne"});
        $("#md_modal").load('index.php?v=d&modal=cmd.history&id='+poppConsigne#id#).dialog('open');
    });
              
    </script>

Tu crée un nouveau Widget et place ses valeurs ou bien tu remplace dans celui existant ?

encore merci

[AlainM]

j'ai remplacé dans la ligne de code du virtuel pour le moment, du coup il n'y a que celui là d'affecté.
Je ne sais pas comment je vais faire après, je pense modifier celui d'origine mais je ne sais pas ce qu'il se passe lors d'une éventuelle mise à jour, si ça va pas me remettre tout "d'usine". Mais je garderai une copie du code au pire

[GargouilleBL]

Bonjour,
Faire comme moi, prendre le widget d'origine, cliquer sur le bouton Dupliquer, choisir un nom (perso je laisse celui d'origine et je rajoute mes initiales à la fin) et ensuite remplacer le code.
Ainsi vous avez le vôtre modifié et toujours celui d'origine au cas ou il faut revenir en arrière, et aussi pas de problème en cas de mises à jour.
@+ Benoît

[AlainM]

oui bonne idée, merci

[MarcusD]

Bonjour,
Ce widget est top !
Je souhaitais en faire une copie pour l'avoir aussi sur la version mobile mais ce n'est pas aussi simple que prévu. Serait il possible d'en faire une version mobile si ce n'est pas trop de boulot ?
Merci

[Basile]

Bonjour,
personne n'a de pb avec ce widget suite a la maj 3.2 de Jeedom?
Pour moi je perds les infos sur l'update du widget dans le dahboard.
Je pense que c'est lié au changement cassant de la maj des widgets.

Code : Tout sélectionner

Suppression de l’ancien systeme de mise à jour des widget (déprécié depuis la version 3.0). 
Attention si votre widget n’utilise pas le nouveau systeme il y a des risques de dysfonctionnement 
(dédoublement de celui-ci en l’occurrence).

[Chrisax]

Bonjour Basile,

Il faut modifier le widget conformément aux directives de la v3.
Il suffit de copier/coller ceci dans le code du widget, avant la fermeture de la balise </script> par exemple

Code : Tout sélectionner

jeedom.cmd.update['#id#'] = function(_options){
	$('.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);
}
jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#'});

Après un rafraîchissement par CTRL + F5 sur ton dashboard, ça devrait fonctionner.
Cordialement

[Basile]

Oui c'est ce que j'avais fait (sans la partie "attr"). Merci Chrisax

[xodus_fr]

Bonjour,

Je suis à la peine.

Quelqu'un pourrait m'expliquer comment configurer le widget ?

Je lis bien les instructions qui disent au départ:

--
Installation :
1. Créer un virtuel dans lequel vous ajoutez une "Info virtuelle"
Nom :Temperature
Sous-Type : Info /Numérique
Valeur : votre vanne
--

Je ne vois pas comment ajouter une commande virtuelle ou une info virtuelle.
Est ce une nouvelle commande pour la vanne? je n'y vois pas l'aspect "virtuel".

Merci,
X.

[xodus_fr]

C'est bon j'ai trouvé. Je suggère de mettre à jour les instructions d'installation.
Merci.
X.

[paulnux]

Bonjour xodus_fr
Je vais bientôt acheter des thermostats
Peux tu nous faire un retour sur ta méthode d'installation du widget ? merci

[Fabske]

Hello,
Je viens de mettre en place AtoutPopp pour mes vannes devolo, ça marche nickel (bonne t°, consigne, consigne pending, si je clique ça modifie bien la consigne etc.) excepté un point: ça ne se rafraîchit pas si la consigne (pending) est màj par un autre moyen (p.ex. mode plugin thermostat).
Même en cliquant manuellement sur le bouton refresh ça ne met rien à jour. Si je fais F5, tout le dashboard se rafraîchit et alors évidement c'est OK.
Une idée d'où viendrait le problème ?

J'ai une jeedom 3.2 (smart)

[Basile]

J'ai le même soucis, au final la modif du widget sur le 3.2 ne marche que partiellement et ne met pas a jour les différents états sans un refresh complet de la page.
N'étant pas un expert PHP y aurait-il qqchose à ajouter sur le code comme la mise a jour du .text ?

Code : Tout sélectionner

jeedom.cmd.update['#id#'] = function(_options){
	$('.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);
}

[Clemssins]

Salut,

J'ai un soucis pour installer le widget , je vois les 3 widget sur le market depuis jeedom ,mais seul celui de la Batterie veut s'installer les 2 autres sont en erreur , et les zip qui sont télécharger ne se décompresse pas ..
j'ai regarder le fil de discution , qui dit qu'il ne doit plus y avoir qu'un seul widget , mais la recherche sur le nom Atoutpopp me renvoie systématiquement les 3 widgets en question
j'ai bien lut qu'il faut le Faire soi-meme a partir des 3 .. mais au vu de l'erreur , j'ai plutot rien donc on part de .. Zéro .. je suis perplexe
, pouvez vous me dire comment vous avez récup le widget pour le paramétrer, ou comment démarrer

Merci d'avance