Informations codage widget

sACLe · Avril 14, 2020, 5:57

Ah ok, merci, je vais donc me documenter dessus. Je n’ai jamais fais.
Je parcourais le code des classes Jeedom pour trouver un truc correspondant

Mon widget « Evénements du mois » me fait bosser sur plein de domaines inconnus.
Script php dans Jeedom
Bloc code dans les scénario Jeedom
JQuery dans le widget

Merci encore

Salvialf · Avril 14, 2020, 6:06

Je connais pas c’est quoi?

sACLe · Avril 14, 2020, 6:46

C’est un widget que je crée pour mon design du Google Hub.

Le but c’est de lire 3 calendriers différents et de remonter les événements importants entre aujourd’hui et la fin du mois.

Maison (pour le classique cas d’école « Poubelles » mais aussi d’autres tâches courantes)
Jardin (je suis mauvais jardinier donc c’est pour me rappeler quel arbre tailler selon le mois, quand traiter …)
Vacances (mais finalement DomoGeek me donne déjà l’information)

Le problème c’est qu’un calendrier (plugin Agenda) dans un virtuel puis un widget c’est très pauvre : ça remonte juste les événements du jour, pas de dates …
Donc j’utilise du code php pour lire la classe Agenda et parcourir les événements et les divers informations qui m’intéressent (nombre d’occurences, dates) … pour alimenter un virtuel puis être affiché dans un Widget.
(Pas de doc sur la classe Agenda … donc j’ai parcouru le code pour trouver une fonction qui me plait bien)

Y’a peut-être plus simple mais je tatonne et j’avance en fonction des tutos que je rencontre …

Si ça rend bien j’en ferai peut-être un tuto

olivvv59 · Juin 26, 2020, 5:44

Merci pour le tuto !!

Je vais des tests pour faire mes propres widgets.
Par contre, j’ai repris mot pour mot un des widgets par défaut.

quand je clique dessus. Ma lumière s’allume bien.

Par contre, mon icone ne change pas.
Si je reclique dessus : mon état passe de 1 à 0 rapidement pour revenir à 1 (mais la lumière reste allumé : elle ne clignote pas)

<div class="cmd cmd-widget cursor" data-type="action" data-subtype="binary" data-template="binaryDefault" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#">
  <div class="content-xs">
    <span class="iconCmd"></span>
  </div>
  <script>
    jeedom.cmd.update['#id#'] = function(_options){
           
      
      if (_options.display_value == '1' || _options.display_value == 1 || _options.display_value == '99' || _options.display_value == 99 || _options.display_value == 'on') {
        if (jeedom.cmd.normalizeName('#name#') == 'on') {
          $('.cmd[data-cmd_id=#id#]').hide()
        } else {
          $('.cmd[data-cmd_id=#id#]').show()
          $('.cmd[data-cmd_id=#id#] .iconCmd').empty().append('<i class="fas fa-check"></i>')
        }
      } else {
        if (jeedom.cmd.normalizeName('#name#') == 'off') {
          $('.cmd[data-cmd_id=#id#]').hide()
        } else {
          $('.cmd[data-cmd_id=#id#]').show()
          $('.cmd[data-cmd_id=#id#] .iconCmd').empty().append('<i class="fas fa-times"></i>')
        }
      }
      $('.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#'});
    //jeedom.cmd.update['#id#']({display_value:'#state#'})
    

    $('.cmd[data-cmd_uid=#uid#] .iconCmd').off().on('click', function () {
      jeedom.cmd.execute({id: '#id#'})
    });
  </script>
</div>

Il ne doit pas me manquer grand chose.
Qu’est ce que j’ai fait de travers (ou pas fait).

Merci

Nemeraud · Juin 26, 2020, 7:31

Bonjour

avec un widget par défaut , ca fonctionne ?

le prb est peut être dans ta commande et pas dans ton 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#