Informations codage widget

olivvv59 · Juin 26, 2020, 8:15

Bonne idée.

Je vais regarder ça. J’ai très mal dormi. ça doit être un truc aussi con que ça

EDIT : c’est ça !!! je me focalisais sur le code. Je ne mettais pas à jours mon état dans mon virtuel. Désolé #shameonme#
merci !!

Nemeraud · Juin 26, 2020, 8:49

pas de soucis

une bonne sieste et ca repart

mortyre · Mai 4, 2021, 7:42

Bonjour

J’ai essayé de m’inspirer de ce que j’ai trouvé à droite ou à gauche mais au final mon widget ne se met pas à jour (jeedom v4.1) mais sinon il affiche bien la valeur avec la bonne police.
J’ai voulu faire un widget tout simple qui affiche une température avec une police type digitale7.
Voici mon code

<div style="min-width:120px;min-height:80px;" class="cmd #history# tooltips cmd-widget" data-type="info" data-subtype="numerique" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#">
 <div class="title #hide_name#">
    <div class="cmdName">#name_display#</div>
  </div>
    <span class="valeur#id#">#state#</span>   
 
  <style>
@font-face {
    font-family: "Digital-7";
    src:	url("data/customTemplates/dashboard/cmd.info.numeric.spa_temperature/digital-7.eot") format("eot"),
        	url("data/customTemplates/dashboard/cmd.info.numeric.spa_temperature/digital-7.woff") format("woff"),
        	url("data/customTemplates/dashboard/cmd.info.numeric.spa_temperature/digital-7.ttf") format("truetype"),
        	url("data/customTemplates/dashboard/cmd.info.numeric.spa_temperature/digital-7.svg") format("svg");
    font-weight:normal;
    font-style:normal;
}

     
span.valeur#id# {
    font-family: "Digital-7";
    font-size:88px;
  	letter-spacing: 13px;
  	color: #E64221;
    text-shadow: 1px 1px 3px #910007;
    width: 100px;
  	height: 50px;
  	position: absolute;
    text-align: right;
    top: 30px;
    left: 30px;  	
    transform : scale(0.7,1);
	-webkit-transform:scale(0.7,1); /* Safari and Chrome */
	-moz-transform:scale(0.7,1); /* Firefox */
    -ms-transform:scale(0.7,1); /* IE 9+ */
	-o-transform:scale(0.7,1); /* Opera */
}
    
  </style>
  <script>
   	/***** MAJ Automatique *****/
    jeedom.cmd.update['#id#'] = function(_options)
    {
      var cmd = $('.cmd[data-cmd_uid=#uid#]')
      cmd.find('#valeur#id#').text(parseFloat(_options.display_value).toFixed(1));      
    }
    jeedom.cmd.update['#id#']({display_value:'#state#'});
  </script>
</div>

Voilà ce qui me manque :

mise à jour des changements de valeurs automatiquement sans à rafraichir la page
une option pour que si la valeur est égale à 0 ne rien affichait

Si quelqu’un peut m’aider à comprendre là ou j’ai merdé je le remercie d’avance fortement. j’ai le plugin de @Salvialf pimp my ride mais j’ai pas réussi à reprendre correctement le code existant.

Nemeraud · Mai 5, 2021, 9:00

désolé pas trop le temps là

voici un exemple avec un code qui fonctionne

<div class="cmd cmd-widget #history#" data-type="info" data-subtype="string" data-template="badge" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#">
  <div class="title #hide_name#">
    <div  class="cmdName">#name_display#</div>
  </div>
  <div class="content-sm ">
    <span class='label label-info state'></span>
  </div>
  <script>
    jeedom.cmd.update['#id#'] = function(_options){
      $('.cmd[data-cmd_id=#id#]').attr('title','Date de valeur : '+_options.valueDate+'<br/>Date de collecte : '+_options.collectDate)
      $('.cmd[data-cmd_id=#id#] .state').empty().append(_options.display_value +' #unite#');
    }
    jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
  </script>
</div>

mortyre · Mai 5, 2021, 4:29

juste à trouver comment appliquez correctement la police voulue et les options d’affichage ou pas

Nemeraud · Mai 5, 2021, 4:44

Je te mettrais un exemple pour la police

Pour ne pas afficher, il mettre le paramètre hidden sur le classe de mémoire, je te mettrais un exemple aussi

mortyre · Mai 5, 2021, 4:44

top merci à toi !

Nemeraud · Mai 6, 2021, 5:45

Pour la police, dans le CSS

src: url("data/customTemplates/dashboard/cmd.info.string.NetatmoThermostat2/Square.ttf") format("truetype");

et pour cacher une info, un div, …

$('.cmd[data-cmd_uid=#uid#] .value-consignedec#id#').hide();

mortyre · Mai 6, 2021, 6:07

MErci j’ai essayé ton code mais rien ne s’affiche (jai change l’url de la source de police)

Nemeraud · Mai 6, 2021, 6:08

faut le modifier à ton usage, pas le coller comme tel

Nemeraud · Mai 6, 2021, 6:09

redonne ton code complet si tu veux que je regarde

mortyre · Mai 6, 2021, 6:14

voici le code que j’ai modifié avec ta partie update. j’ai bien l’affichage de la valeur numérique mais pas la mise à jour de la valeur sans rafraichissement de la page.

<div style="min-width:40px;min-height:80px;" class="cmd #history# tooltips cmd-widget" data-type="info" data-subtype="numerique" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#">
 <div class="title #hide_name#">
    <div class="cmdName">#name_display#</div>
  </div>
    <span class="valeur#id#">#state#</span>
    
 
  <style>
@font-face {
    font-family: "Digital-7";
    src:	url("data/customTemplates/dashboard/cmd.info.numeric.spa_temperature/digital-7.eot") format("eot"),
        	url("data/customTemplates/dashboard/cmd.info.numeric.spa_temperature/digital-7.woff") format("woff"),
        	url("data/customTemplates/dashboard/cmd.info.numeric.spa_temperature/digital-7.ttf") format("truetype"),
        	url("data/customTemplates/dashboard/cmd.info.numeric.spa_temperature/digital-7.svg") format("svg");
    font-weight:normal;
    font-style:normal;
}

     
span.valeur#id# {
    font-family: "Digital-7";
    font-size:58px;
  	letter-spacing: 13px;
  	color: #FFFFFF;
    text-shadow: 1px 1px 3px #808080;
    width: 120px;
  	height: 50px;
  	position: absolute;
    text-align: left;
    top: 30px;
    right: 0px;  	
    transform : scale(0.7,1);
	-webkit-transform:scale(0.7,1); /* Safari and Chrome */
	-moz-transform:scale(0.7,1); /* Firefox */
    -ms-transform:scale(0.7,1); /* IE 9+ */
	-o-transform:scale(0.7,1); /* Opera */
}
    span.RESULTunite#id# {
    font-family: "Digital-7";
    font-size:58px;
  	letter-spacing: 13px;
  	color: #FFFFFF;
    text-shadow: 1px 1px 3px #808080;
    width: 100px;
  	height: 42px;
  	position: absolute;
    text-align: left;
    top: 30px;
    left: 0px;  	
    transform : scale(0.7,1);
	-webkit-transform:scale(0.7,1); /* Safari and Chrome */
	-moz-transform:scale(0.7,1); /* Firefox */
    -ms-transform:scale(0.7,1); /* IE 9+ */
	-o-transform:scale(0.7,1); /* Opera */
}
  
  </style>
  <script>   
    
    /***** MAJ Automatique *****/
    jeedom.cmd.update['#id#'] = function(_options)
    {
      
      $('.cmd[data-cmd_id=#id#]').attr('title','Date de valeur : '+_options.valueDate+'<br/>Date de collecte : '+_options.collectDate)
      $('.cmd[data-cmd_id=#id#] .state').empty().append(_options.display_value +' #unite#');
    }
    
    jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
  </script>
</div>

Nemeraud · Mai 6, 2021, 7:00

Voici une version ok, a modifier à ta sauce

<div style="padding:10px; min-width:40px; min-height:80px;" class="cmd cmd-widget container-fluid #history#" data-type="info" data-subtype="numeric" data-template="test" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#">
    <div class="title #hide_name#">
         <div  class="cmdName">#name_display#</div>
    </div>
    <div class='DisplayInfo#uid#'>
      		<span class="ValueInfo#uid#"></span><span class="UniteInfo#uid#"></span>
    </div>
  
  <style>
	@font-face {
	    font-family: "Digital-7";
	    src:	url("data/customTemplates/dashboard/cmd.info.numeric.spa_temperature/digital-7.ttf") format("truetype"),
	    font-weight:normal;
	    font-style:normal;
	}

     
	span.ValueInfo#uid# {
    	font-family: "Digital-7";
    	font-size:58px;
  		letter-spacing: 13px;
  		color: #FFFFFF;
    	text-shadow: 1px 1px 3px #808080;
    	width: 120px;
  		height: 50px;
  		position: absolute;
    	text-align: left;
    	top: 30px;
    	right: 0px;  	
    	transform : scale(0.7,1);
		-webkit-transform:scale(0.7,1); /* Safari and Chrome */
		-moz-transform:scale(0.7,1); /* Firefox */
    	-ms-transform:scale(0.7,1); /* IE 9+ */
		-o-transform:scale(0.7,1); /* Opera */
	}
	
    span.UniteInfo#uid# {
	    font-family: "Digital-7";
	    font-size:58px;
	  	letter-spacing: 13px;
	  	color: #FFFFFF;
	    text-shadow: 1px 1px 3px #808080;
	    width: 100px;
	  	height: 42px;
	  	position: absolute;
	    text-align: left;
	    top: 30px;
	    left: 0px;  	
	    transform : scale(0.7,1);
		-webkit-transform:scale(0.7,1); /* Safari and Chrome */
		-moz-transform:scale(0.7,1); /* Firefox */
	    -ms-transform:scale(0.7,1); /* IE 9+ */
		-o-transform:scale(0.7,1); /* Opera */
	}
  
  </style>
  
  
<script>
		jeedom.cmd.update['#id#'] = function(_options){    
          	var InfoValue = _options.display_value;
			$('.cmd[data-cmd_id=#id#]').attr('title','Valeur du '+_options.valueDate+', collectée le '+_options.collectDate);
          	$('.cmd[data-cmd_uid=#uid#] .ValueInfo#uid#').text(InfoValue); 
			
          	if (InfoValue == 0) {
	          $('.cmd[data-cmd_uid=#uid#] .DisplayInfo#uid#').hide();
	        } else {
      	      $('.cmd[data-cmd_uid=#uid#] .DisplayInfo#uid#').show();        
            }
          
		}
		jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
</script>   
           


</div>

mortyre · Mai 6, 2021, 7:05

tu es un chef Nemeraud, ca fonctionne parfaitement !!! Un grand grand merci à toi

pour savoir javais merdé ou ?

Nemeraud · Mai 6, 2021, 7:06

pas de soucis

franchement, j’ai refait le code alors je peux pas te dire, surement un soucis avec mes #id# #uid#

amelyfred · Décembre 12, 2021, 8:42

Salut
Merci pour ton partage car cela m’a permis d’apprendre à créer des widgets.
Par contre, je n’ai pas pas trop compris comment fonctionnait les widgets avec plusieurs commandes.
J’essaye de créer à partir un widget à partir d’un virtuel sur lequel j’ai la température de ma maison et le mode de chauffage. J’aimerais avoir ces 2 infos sur un même virtuel. Actuellement le type de commande est différent (info et autre).
Première question : il faut forcément que les commandes soient du même type?

Sinon à quoi sert widget-AfficheurMulti et .widget-AfficheurMulti:first?

Merci d’avance pour vos éclaircissement.

Nemeraud · Décembre 13, 2021, 8:26

Bonjour

Il y a 2 méthodes

Tu crées une nouvelle commande info autre et tu ajoutes dedans tes 2 commandes, séparées par un ; et tu appliques le widget sur cette nouvelle commande et dans le code tu traites la récupération des 2 infos, elles peuvent être de n’importe quel type, même mélangé

Il existe une autre méthode que j’ai vu passer sur cette communauté m, qui permet d’aller lire directement des commandes dans le widget mais je me souviens plus.

noodom · Décembre 13, 2021, 9:28

Salut,

Voilà la solution pour la deuxième méthode :

EDIT : ou une troisième méthode

amelyfred · Décembre 13, 2021, 5:15

Salut les gars
Merci je vais aller creuser cela.

Nemeraud · Décembre 13, 2021, 5:22

Oui c’est bien une troisième méthode , je ne connaissais, Merci