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 :
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 :
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.
1 « J'aime »
Salut,
Si tu partages les codes je dois pouvoir te faire ça assez rapidement
2 « J'aime »
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:
cocher la case Time widget
test = #value#
Résultat = #value# #unite#
1 « J'aime »
@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 :
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:
1 « J'aime »
Bello65
Novembre 17, 2019, 12:56
10
@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:
<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à …
<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 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
Peux t on également avoir ensemble la durée et le date/heure ?
exemple :
avec
1 « J'aime »
Utilises direct le widget MultiOuvrants (et IconInfo pour les commandes binaire) ce sera plus simple !
@Salvialf
ok merci je regarderai demain … le market est inaccessible ce soir …
system
A fermé ce sujet ()
Novembre 19, 2019, 9:18
21
Ce sujet a été automatiquement fermé après 24 heures suivant le dernier commentaire. Aucune réponse n’est permise dorénavant.