Demande de widget Time Tile

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.

Salut,

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

2 J'aimes

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>

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:
Multistate

cocher la case Time widget
test = #value#
Résultat = #value# #unite#
1 J'aime

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 :laughing:
widget_time_5
Sinon c’est déjà très bien comme cela.
Merci encore.

@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

Effectivement ça manque, je viens donc de faire une demande d’ajout @Loic:
https://github.com/jeedom/core/pull/1500

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

1 J'aime

Merci bien !

@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

Salut @Bello65,

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

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

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 ?

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();
			}

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

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>

@Salvialf

trop fort !!

Merci

@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 :grinning:

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

exemple :

avec

velux2

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

@Salvialf

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

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