Bouton action plugin Mode

[goulouche]

Bonjour à tous,
Depuis ce matin, je tente désespérément de créer un widget pour le plugin Mode. J’avais réussi avec Jeedom v3 en m’inspirant ici et là mais en en v4, je n’arrive à rien. Je cherche en fait à créer un bouton unique pour passer d’un mode « LIBRE » à un mode « OCCUPÉE ».
Voici ce que j’ai actuellement :

J’aimerais avoir ceci lorsque la chambre est libre :

Et quand je clique sur le bouton « LIBRE » je voudrais passer à ceci :

Lorsque je cliquerai à nouveau sur le bouton, la chambre redeviendra « LIBRE ».
Je vous précise que je ne connais absolument rien au HTML, au CSS et au codage en général.
Si toutefois quelqu’un peut m’aider, merci d’avance.

[Ds5]

Hello
Si je comprends bien tu as créé un équipement de type Mode pour une pièce (chambre invié ?).
Tu veux avoir un widget qui affiche 2 images selon que le mode soit Libre ou Occupée.
Si en v4, il faut selon moi :

• créer un virtuel dans lequel tu vas importer l’équipement « mode chambre invité » (l’équipement mode pour moi a déjà un widget tout fait)
• dans Outils/Widget, créer un nouveau widget de type « Info/Autre/Multistate/image »
• récupérer les deux images LIBRE et OCCUPEE
• créer dans le widget 2 tests sur #value# = LIBRE et #value#=OCCUPEE et leur attribuer les images associées
• affecter le widget en affichage à la commande MODE du virtuel

Après je ne sais pas si tu veux qu’un appui sur LIBRE ou OCCUPEE bascule de l’un à l’autre mais c’est faisable en design avec une Zone au dessus de ton widget qui lancera une action de type scénario qui se chargera de faire passer de l’un à l’autre mode par ex.

PS : en faisant vite fait un widget sans tester jusqu’au bout, ca donnerait ca en syntaxe :

[mich0111]

Salut,
Ce que tu veux faire ressemble plus à un bouton sur un virtuel avec 2 commandes et une info binaire sur lequel faire jouer un widget plus qu’une véritable utilisation du plugin mode.

[goulouche]

Merci pour vos réponses. Je pensais cependant à quelque chose de plus simple. En version 3 j’avais réussi à adapter ce code tiré d’un widget de présence :

<div style="width:125px; height:48px; display: inline !important;" class="cmd reportModeHidden cmd-widget" data-type="action" data-subtype="other" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#">
	<a class="btn btn-sm btn-default action cmdName tooltips" title="#name#" style="background-color:transparent !important;border-color : transparent !important;"></a>
<!-- Ne Pas Supprimer -->
	<script class="createWidgetInfo" type="text/javascript">//<![CDATA[{"type":"1","version":"1","image1":"Occupée.png","image2":"Libre.png"}]]></script>
<!-- Ne Pas Supprimer -->
	<script>
   var srcImgOn = 'plugins/widget/core/template/dashboard/cmd.action.other.Présence/Libre.png';
	var srcImgOff = 'plugins/widget/core/template/dashboard/cmd.action.other.Présence/Occupée.png';

	if(jeedom.cmd.normalizeName('#name#') == 'LIBRE'){
	  if('#state#' != ''){
		$('.cmd[data-cmd_uid=#uid#] .btn').append('<img src="'+srcImgOff+'">');
	  }else{
		$('.cmd[data-cmd_uid=#uid#] .btn').append('<img src="'+srcImgOn+'">');
	}
	}else{
		if('#state#' != ''){
		$('.cmd[data-cmd_uid=#uid#] .btn').append('<img src="'+srcImgOn+'">');
	  }else{
		$('.cmd[data-cmd_uid=#uid#] .btn').append('<img src="'+srcImgOff+'">');
	  }
	}
	
	jeedom.cmd.update['#id#'] = function(_options){
		if(parseInt(_options.display_value) != 'NaN'){
		  if(jeedom.cmd.normalizeName('#name#') == 'LIBRE'){
			if(parseInt(_options.display_value) >= 1 ) {
				$('.cmd[data-cmd_uid=#uid#]').hide();
			}else{
				$('.cmd[data-cmd_uid=#uid#]').show();
			}
		  }else{
			if(parseInt(_options.display_value) <= 0 ) {
				  $('.cmd[data-cmd_uid=#uid#]').hide();
			  }else{
				  $('.cmd[data-cmd_uid=#uid#]').show();
			  }
		  }
		}
	}
	jeedom.cmd.update['#id#']({display_value:'#state#'});
	
	$('.cmd[data-cmd_uid=#uid#]:last .action').on('click', function () {
		jeedom.cmd.execute({id: '#id#'});
	});
	</script>
</div>

Je souhaitais l’adapter en v4 mais je n’y parviens pas.

[mich0111]

Je ne voudrais pas insister mais essaie de créer un virtuel avec 2 commandes et une info binaire au lieu d’utiliser le plugin mode.
Tu verras, ce que tu veux faire sera ultra simple avec l’outil widget.

[goulouche]

OK. Je vais essayer ça. Merci.

[Ds5]

Je rejoins @mich0111 sur l’idée d’un unique virtuel (info « état », cmd « libre », cmd « occupée »), et d’exploiter la logique des widgets v4 complètement intégré plutôt que d’adapter du code v3. Mon exemple de widget v4 reste d’ailleurs applicable à ce virtuel simple sans plugin mode

[goulouche]

Bonsoir à tous,
J’ai suivi vos recommandations et voici ce que j’obtiens en mode « LIBRE »

puis en mode « OCCUPÉE »

Ce n’est pas exactement le résultat que j’escomptais parce que ça ne change pas grand-chose par rapport à l’affichage du plugin « Mode » sans widget ni virtuel.
Mon but était de me débarrasser des boutons gris « LIBRE » et « OCCUPÉE » et que les boutons vert et rouge se substituent l’un à l’autre après un clic à la manière d’une commande « ON OFF ». Mais j’ai peut-être manqué quelque chose dans vos explications. Voici des screenshots de ce que j’ai fait :

[mich0111]

Je ne l’aurais pas fais comme ça.
Essaie quand même en décrochant les cases afficher des commandes.

[mich0111]

Tu n’as besoin que de 2 cmd et une info, rien d’autre.
Les commandes s’appelleront on et off, l’info état.
Les commandes pointant vers état.
C’est au niveau du widget que tu feras afficher libre ou occupé

[goulouche]

Youpi ! J’y aurais mis le temps mais ça marche. Merci à tous et bonne soirée.

[mich0111]

Ta satisfaction fait plaisir à voir.
Bonne soirée