[Présentation] Bello65

Présentation et Vitrine d'installations
7

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 :wink: ) 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…

1 « J'aime »