Ce Forum passera en lecture seule en janvier 2020
Image
Merci de vous rendre sur https://community.jeedom.com maintenant pour vos prochains postes ;)

AtoutPOPP

Réservé à l'utilisation et la création de widgets dans JEEDOM
AlainM
Actif
Messages : 1036
Inscription : 20 mars 2016, 14:21
Localisation : Hérault

Re: AtoutPOPP

Message par AlainM » 14 nov. 2017, 12:12

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>


Avatar de l’utilisateur
Sylar
Actif
Messages : 501
Inscription : 02 mars 2016, 09:34
Contact :

Re: AtoutPOPP

Message par Sylar » 14 nov. 2017, 14:48

AlainM a écrit :
14 nov. 2017, 12:12
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
Actif
Messages : 1036
Inscription : 20 mars 2016, 14:21
Localisation : Hérault

Re: AtoutPOPP

Message par AlainM » 14 nov. 2017, 14:55

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

Avatar de l’utilisateur
GargouilleBL
Timide
Messages : 253
Inscription : 26 janv. 2017, 09:31
Localisation : Sprimont (Province de Liège - Belgique)

Re: AtoutPOPP

Message par GargouilleBL » 14 nov. 2017, 15:26

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
Jeedom V3.3.19 sur VM ProxMox - Clef Usb Z-Wave - Clef Usb RfxCom
Caméras D-Link + Reolink, Oeil Fibaro, Rubans Leds Yeelight, Variateurs Fibaro, Ampoules Led Z-Wave, Clavier RFID, Vannes Thermostat Danfoss, Ampoules IKEA, SNIPS, etc...

AlainM
Actif
Messages : 1036
Inscription : 20 mars 2016, 14:21
Localisation : Hérault

Re: AtoutPOPP

Message par AlainM » 14 nov. 2017, 16:18

oui bonne idée, merci

MarcusD
Timide
Messages : 9
Inscription : 22 janv. 2017, 15:35

Re: AtoutPOPP

Message par MarcusD » 18 févr. 2018, 09:43

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
Timide
Messages : 6
Inscription : 04 déc. 2017, 19:08

Re: AtoutPOPP

Message par Basile » 29 avr. 2018, 08:47

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).

Avatar de l’utilisateur
Chrisax
Timide
Messages : 104
Inscription : 09 oct. 2017, 15:05

Re: AtoutPOPP

Message par Chrisax » 03 mai 2018, 16:12

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
Jeedom sur nuc/proxmox + dongle Aeotec GEN5 et RfxCom
Ecran de contrôle sur Rpi 3B+ et Google Voice Kit

Basile
Timide
Messages : 6
Inscription : 04 déc. 2017, 19:08

Re: AtoutPOPP

Message par Basile » 14 mai 2018, 20:37

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

xodus_fr
Timide
Messages : 95
Inscription : 17 sept. 2017, 11:47

Re: AtoutPOPP

Message par xodus_fr » 30 oct. 2018, 10:18

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
Timide
Messages : 95
Inscription : 17 sept. 2017, 11:47

Re: AtoutPOPP

Message par xodus_fr » 31 oct. 2018, 09:06

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

paulnux
Timide
Messages : 331
Inscription : 19 juil. 2015, 11:28
Localisation : 72

Re: AtoutPOPP

Message par paulnux » 31 oct. 2018, 18:05

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
Jeedom Mini+, Zigate
Temp Xiaomi
Ouverture Xiaomi
Ampoule Ikea, Xiaomi
Détecteur mouvement Xiaomi

Pi3B+, ZStick GEN5, SENA UD100, Gateway Xiaomi
PSM02
FGMS-001
ZM1602
Ampoule Yeelight
Echo Plus
Nut mini
Balance Xiaomi
MiFlora
WorxLandroidS

Fabske
Timide
Messages : 38
Inscription : 09 juil. 2018, 09:14

Re: AtoutPOPP

Message par Fabske » 26 déc. 2018, 18:14

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
Timide
Messages : 6
Inscription : 04 déc. 2017, 19:08

Re: AtoutPOPP

Message par Basile » 11 janv. 2019, 12:42

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
Timide
Messages : 16
Inscription : 21 nov. 2018, 09:11

Re: AtoutPOPP

Message par Clemssins » 08 févr. 2019, 10:23

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

Répondre

Revenir vers « [Plugin officiel] Widgets »

Qui est en ligne ?

Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 1 invité