Les Widgets V4
Je crée ce post, pour moi et pour d’autres, pour mettre quelques astuces de widget perso en V4
Je vais donc utliser des mots à moi (pas forcément les bons, désolé), expression aussi.
On trouve tout, ou presque, dans les widgets de base de jeedom, voir aussi la doc widget v4 :
Doc Widgets V4
On part d’abord sur le fait que dans le widget, nous devons avoir une INTRO :
<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#">
Ensuite la mise en place des ‹ trucs › visible on utilise les div et span : (bon j’ai pas encore compris la différence 
) j’appelle cela MISE EN PLACE DU VISUEL ou MeP VISUEL
<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#uid# timeCmd label label-default value"></span>
</div>
Puis la partie des actions, encadrées par script (encadré par un div bien sur ;), je l’appelle COMMANDE :
</div>
<script>
jeedom.cmd.update['#id#'] = function(_options){
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 = '';
cmd.attr('title','Date de valeur : '+_options.valueDate+'<br/>Date de collecte : '+_options.collectDate+'<br/>Valeur : '+_options.display_value+'#unite#');
#test#
cmd.find('.iconCmd').empty().append(state);
var style = '';
if(!isNaN('#_desktop_width_#')){
style = 'width:#_desktop_width_#px !important;'
}
cmd.find('.iconCmd img').attr('style',style);
cmd.off('changeThemeEvent').on('changeThemeEventCmd',function (event, theme) {
var state = '';
#change_theme#
if(state != ''){
cmd.find('.iconCmd').empty().append(state);
}
var style = '';
if(!isNaN('#_desktop_width_#')){
style = 'width:#_desktop_width_#px !important;'
}
cmd.find('.iconCmd img').attr('style',style);
});
}
jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
$('body').on('changeThemeEvent', function (event, theme) {
$('.cmd[data-cmd_id=#id#]').trigger('changeThemeEventCmd');
});
</script>
<!-- Hide parameters #_mobile_width_# -->
</div>
Dans script, très important pour la mise à jour du widget :
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#');
}
puis pour initialiser le widget (à la fin du script) :
jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
Il y a aussi des style, pour le MISE EN FORME
Ajouter la durée de l’action :
Gère l’endroit ou il va s’afficher (dans les div MeP VISUEL)
<div class="value">
<span class="timeCmd label label-default #history#" data-type="info"></span>
</div>
puis dans COMMANDE :
jeedom.cmd.displayDuration(_options.valueDate, cmd.find('.timeCmd'));
Une explication sur le Time Tile inclus dans la création simplifiée des widgets :
Widget Time Tile V4
Icon Info de Salvialf
IconInfo
Aide Passage widget simple image de V3 à V4 :
Widgets simple V3 à V4
A suivre…
