Demande de widget Time Tile

geomium · Novembre 15, 2019, 6:53

Bonjour à tous,

j’utilise beaucoup les widgets avec la fonction « Time » ce qui me permet de voir depuis quand la valeur a changé en un coup d’œil sur mes designs.
Exemple :
widget_time_1

En V3 je m’étais bricolé deux widgets Time Tile en partant des widgets du core, une version numérique et une version autre pour du texte :
widget_time_2

Malheureusement je n’y arrive pas sur la V4.
Est-ce que l’un de vous pourrai m’aider ?
Et mieux une petite intégration au core un de ces 4.

Merci par avance.
Gérôme.

Salvialf · Novembre 15, 2019, 6:57

Salut,

Si tu partages les codes je dois pouvoir te faire ça assez rapidement

geomium · Novembre 15, 2019, 7:11

Super merci de répondre aussi rapidement.

Voici les codes en V3 :

Widget TimeTile Numérique :

<div style="min-width:90px;min-height:60px;margin-right: 5px;margin-left: 5px;padding:0px !important;" class="cmd #history# container-fluid tooltips cmd cmd-widget" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#">
	<center>
		<div style="font-weight: bold;font-size : 12px;#hideCmdName#">#name_display#</div>
		<span style="font-weight: bold;" class="pull-right">#unite#</span>
		<span style="font-size: 2em;font-weight: bold;" class="state"></span><br/>
		<div style="#displayHistory# font-size: 0.8em;" class="col-xs-12 center-block">
			<span title='Min' class='tooltips'>#minHistoryValue#</span>|<span title='Moyenne' class='tooltips'>#averageHistoryValue#</span>|<span title='Max' class='tooltips'>#maxHistoryValue#</span> <i class="#tendance#"></i>
          	
		</div>
      	<span class="timeCmd#uid# timeCmd label label-default" style="background-color:#cmdColor# !important;"></span>
	</center>
	<script>
		jeedom.cmd.update['#id#'] = function(_options){
          	jeedom.cmd.displayDuration(_options.valueDate,  $('.cmd[data-cmd_id=#id#] .timeCmd'));
			$('.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#',alertLevel:'#alertLevel#'});
	</script>
</div>

Widget TimeTile String :

<div style="min-width:90px;min-height:60px;" class="cmd #history# tooltips cmd-widget" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#">
	<center>
		<div style="font-weight: bold;font-size : 12px;#hideCmdName#">#name_display#</div>
		<span style="font-size: 2em;font-weight: bold;margin-top: 5px;" class="state"></span><br/>
		<span style="color: #666666;font-weight: bold;">#unite#</span>
      	<span class="timeCmd#uid# timeCmd label label-default" style="background-color:#cmdColor# !important;"></span>
	</center>
	<script>
		jeedom.cmd.update['#id#'] = function(_options){
          	jeedom.cmd.displayDuration(_options.valueDate,  $('.cmd[data-cmd_id=#id#] .timeCmd'));
			$('.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#',alertLevel:'#alertLevel#'});
	</script>
</div>

Salvialf · Novembre 15, 2019, 9:19

Alors après vérification en V4, tu n’as pas besoin de faire un widget spécifique car tu peux arriver à tes fins à l’aide de l’outil widget intégré et du template Multistate.

Exemple:

cocher la case Time widget
test = #value#
Résultat = #value# #unite#

geomium · Novembre 15, 2019, 11:59

Génial je te remercie 1000 fois. Ça parait si simple que je me demande comment je n’ai pas pu trouver tout seul.
C’est parfait :
widget_time_4
widget_time_3

Aller je me permets de te solliciter encore un peu, est-il possible d’afficher les statistiques en plus ?
J’ai essayé le tag #statistic# au hasard mais c’est pas ça
widget_time_5
Sinon c’est déjà très bien comme cela.
Merci encore.

Bello65 · Novembre 16, 2019, 8:46

@geomium merci pour ton post et @Salvialf car je cherchai a faire la même chose en ligne dans le php. Et ce sera nickel car je voulais faire le window time mais avec mes volets (simple ouvert/ferme)
Je pense que pour ajouter les stats, il faut ouvrir le php du widget et ajouter ceci :


<div class="cmdStats #hide_history#">
    	<div class="col-xs-12 center-block">
      		<span title='Min' class='tooltips'>#minHistoryValue#</span>|<span title='Moyenne' class='tooltips'>#averageHistoryValue#</span>|<span title='Max' class='tooltips'>#maxHistoryValue#</span> <i class="#tendance#"></i>
    	</div>
	</div>

Regardes un php widget pour savoir où le mettre

Salvialf · Novembre 16, 2019, 1:02

Effectivement ça manque, je viens donc de faire une demande d’ajout @Loic:
add history statistics tmplmultistate by Salvialf · Pull Request #1500 · jeedom/core · GitHub

Parce que sinon il faut modifier le fichier core comme indiqué par @Bello65 mais ce sera écrasé à chaque mise à jour de Jeedom. Donc ce devrait bientôt être disponible nativement un peu de patience…

Edit: Ce que tu auras après validation du PR: PR1500

geomium · Novembre 16, 2019, 4:49

Merci bien !

Bello65 · Novembre 17, 2019, 12:56

@Salvialf bonjour, j’ai une question, j’ai bien fait le widget de mon volet, info, num, value, icon, coché time widget. Je n’arrive pas à savoir ou il s’enregistre. Je vois que pour le choisir sur le commande il se trouve avec les custom, mais dans le dossier custom, il n’y est pas. Serais tu ou il va se créer ? (pas non plus dans dossier core/template/dashboard)
Je voulais voir comment il était écrit, pour le recréer en custom et partir pour cette base pour créer d’autres widgets avec time widget et tendance.
Merci

Salvialf · Novembre 17, 2019, 1:03

Salut @Bello65,

En fait l’affichage se fait sur la base du template dont il adapte les tags pour chaque widget :

github.com

jeedom/core/blob/alpha/core/template/dashboard/cmd.info.numeric.tmplmultistate.html

<div class="cmd cmd-widget #history#" data-type="info" data-subtype="numeric" data-template="tmplmultistate" 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="iconCmd"></span>
  </div>
  <div class="value">
    <span class="timeCmd label label-default #history#" data-type="info"></span>
  </div>
  <div class="cmdStats #hide_history#">
    <span title='{{Min}}' class='tooltips'>#minHistoryValue#</span>|<span title='{{Moyenne}}' class='tooltips'>#averageHistoryValue#</span>|<span title='{{Max}}' class='tooltips'>#maxHistoryValue#</span> <i class="#tendance#"></i>
  </div>
  <template>
    <div>time : date ({{Affiche l'info time sous forme de date}})</div>
  </template>
  <script>
    jeedom.cmd.update['#id#'] = function(_options) {
      var cmd = $('.cmd[data-cmd_id=#id#]')
      if ('#_time_widget_#' == '1') {

This file has been truncated. show original

Il n’y a donc pas de fichier correspondant au widget, c’est le navigateur qui créé un widget à la volée sur la base du template

Bello65 · Novembre 17, 2019, 1:24

Ah, ok, lui je l’ai vu, mais je t’avoues que je n’ai pas trop compris comment il fonctionnait.
donc, sur ce widget, qu’elles sont les parties qui concernent le time widget ?
Je pense qu’il y en a 2 :

	<div class="value">
		<span class="timeCmd#uid# timeCmd label label-default value"></span>
	</div>

puis ça dans script :

var cmd = $('.cmd[data-cmd_id=#id#]');
			if('#_time_widget_#' == '1'){
				jeedom.cmd.displayDuration(_options.valueDate,  cmd.find('.timeCmd'));
			}else{
				cmd.find('.timeCmd').parent().remove();
			}
			var state = '';

est ce ça ?

Salvialf · Novembre 18, 2019, 10:17

Cette partie gère l’endroit où va s’afficher la durée sur la page:

<div class="value">
		<span class="timeCmd label label-default #history#" data-type="info"></span>
	</div>

Cette partie va afficher la durée ou non selon que la case "Time widget" est cochée ou pas:

if('#_time_widget_#' == '1'){
				jeedom.cmd.displayDuration(_options.valueDate,  cmd.find('.timeCmd'));
			}else{
				cmd.find('.timeCmd').parent().remove();
			}

minos71 · Novembre 18, 2019, 8:13

Salut à vous ,

je suis sous V3 (pas encore la V4 …)

Tout premièrement , pardon de poser une question qui a déja été evoquée mais suis novice sur les widgets…

je voudrais ajouter la notion de de temps sur ce widget:

velux

<div style="padding:0;width:143px;min-height:143px;" class="cmd #history# tooltips cmd-widget container-fluid" data-type="info" data-subtype="binary" data-cmd_id="#id#" data-cmd_uid="#uid#" title="#collectDate#">
	<div class="row">
		<div class="center-block col-xs-12 h5 cmdName" id="cmdName#id#" style="margin-top:0; #hideCmdName#;">#name_display#</div>
		<div class="center-block col-xs-12 iconCmd#uid#"></div>
	</div>
<!-- Ne Pas Supprimer -->
	<script class="createWidgetInfo" type="text/javascript">//<![CDATA[{"type":"1","version":"1","image1":"velux_open.png","image2":"velux_closed.png"}]]></script>
<!-- Ne Pas Supprimer -->
	<script>
		jeedom.cmd.update['#id#'] = function(_options){
			$(".iconCmd#uid#").empty();
			if (parseInt(_options.display_value) == 1) {
				$(".iconCmd#uid#").append("<img src='plugins/widget/core/template/dashboard/cmd.info.binary.Velux/velux_closed.png'>");
			} else {
				$(".iconCmd#uid#").append("<img src='plugins/widget/core/template/dashboard/cmd.info.binary.Velux/velux_open.png'>");
			}
			$('.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>

j ai vu ce code pour la notion de time , mais je n’arrive pas à avoir un rendu comme celui là …
timedoor

<div style="min-width:90px;min-height:60px;margin-right: 5px;margin-left: 5px;padding:0px !important;" class="cmd #history# container-fluid tooltips cmd cmd-widget" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#">
	<center>
		<div style="font-weight: bold;font-size : 12px;#hideCmdName#">#name_display#</div>
		<span style="font-weight: bold;" class="pull-right">#unite#</span>
		<span style="font-size: 2em;font-weight: bold;" class="state"></span><br/>
		<div style="#displayHistory# font-size: 0.8em;" class="col-xs-12 center-block">
			<span title='Min' class='tooltips'>#minHistoryValue#</span>|<span title='Moyenne' class='tooltips'>#averageHistoryValue#</span>|<span title='Max' class='tooltips'>#maxHistoryValue#</span> <i class="#tendance#"></i>
          	
		</div>
      	<span class="timeCmd#uid# timeCmd label label-default" style="background-color:#cmdColor# !important;"></span>
	</center>
	<script>
		jeedom.cmd.update['#id#'] = function(_options){
          	jeedom.cmd.displayDuration(_options.valueDate,  $('.cmd[data-cmd_id=#id#] .timeCmd'));
			$('.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#',alertLevel:'#alertLevel#'});
	</script>
</div>

merci par avance de vos retours

Minos

Salvialf · Novembre 18, 2019, 8:19

Salut,

Si j’ai bien compris ce code devrait faire l’affaire en remplacement du premier que tu as posté:

<div style="padding:0;width:143px;min-height:143px;" class="cmd #history# tooltips cmd-widget container-fluid" data-type="info" data-subtype="binary" data-cmd_id="#id#" data-cmd_uid="#uid#" title="#collectDate#">
	<div class="row">
		<div class="center-block col-xs-12 h5 cmdName" id="cmdName#id#" style="margin-top:0; #hideCmdName#;">#name_display#</div>
		<div class="center-block col-xs-12 iconCmd#uid#"></div>
	</div>
<span class="timeCmd#uid# timeCmd label label-default" style="background-color:#cmdColor# !important;"></span>
<!-- Ne Pas Supprimer -->
	<script class="createWidgetInfo" type="text/javascript">//<![CDATA[{"type":"1","version":"1","image1":"velux_open.png","image2":"velux_closed.png"}]]></script>
<!-- Ne Pas Supprimer -->
	<script>
		jeedom.cmd.update['#id#'] = function(_options){
jeedom.cmd.displayDuration(_options.valueDate,  $('.cmd[data-cmd_id=#id#] .timeCmd#uid#'));
			$(".iconCmd#uid#").empty();
			if (parseInt(_options.display_value) == 1) {
				$(".iconCmd#uid#").append("<img src='plugins/widget/core/template/dashboard/cmd.info.binary.Velux/velux_closed.png'>");
			} else {
				$(".iconCmd#uid#").append("<img src='plugins/widget/core/template/dashboard/cmd.info.binary.Velux/velux_open.png'>");
			}
			$('.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>

minos71 · Novembre 18, 2019, 8:28

@Salvialf

trop fort !!

Merci

Bello65 · Novembre 18, 2019, 8:38

@Salvialf ok merci, donc div c’est pour l’emplacement et jeedom.cmd.displayDuration(_options. .... c’est pour le calcul de la durée, à mettre dans script apres jeedom.cmd.update['#id#'] = function(_options){
parfait pour faire ces widgets custom perso

minos71 · Novembre 18, 2019, 9:02

Peux t on également avoir ensemble la durée et le date/heure ?

exemple :

avec

velux2

Salvialf · Novembre 18, 2019, 9:09

Utilises direct le widget MultiOuvrants (et IconInfo pour les commandes binaire) ce sera plus simple !

minos71 · Novembre 18, 2019, 9:18

@Salvialf

ok merci je regarderai demain … le market est inaccessible ce soir …

system · Novembre 19, 2019, 9:18

Ce sujet a été automatiquement fermé après 24 heures suivant le dernier commentaire. Aucune réponse n’est permise dorénavant.