Widget custom "Action / Liste"

Bonjour,

Quelqu’un sait il comment créer un widget custom pour une commande de type action sous-type liste ?

Je demande car j’ai une clim qui fait chauffage et ventilation (+ 2 3 autres trucs dont je ne me sers pas).
Au final sur l’affiche j’ai une liste déroulante qui s’affiche et je voudrais le même principe mais avec des icones au lieu des écritures.

Si quelqu’un sait faire ou a un tuto, je suis preneur :slight_smile:

Bonne journée

Bonsoir,

J’ai crée ce widget pour gérer mes actions de type list.

image

Tu peux essayer si cela te convient.

  1. Créer un Virtuel selon exemple suivant :
    (la commande ModeLabel est optionnelle)

image

  1. En utilisant l’exlorateur de fichier de Jeedom, créer un fichier avec le chemin :
html/data/customTemplates/dashboard/cmd.action.select.ListSelect.html
  1. Copier / Coller le contenu du fichier avec le code suivant :
<div class="cmd cmd-widget reportModeHidden #history#" data-type="action" data-subtype="select" data-version="#version#" data-eqLogic_id="#eqLogic_id#" data-eqLogic_uid="#uid#" data-cmd_id="#id#" data-cmd_uid="#uid#">

<!-- file: /var/www/html/data/customTemplates/dashboard/cmd.action.select.ListSelect.html -->
<!-- @Eridani78 2022 06 03 -->

<!-- Mode Set list : 0|Awake;1|Asleep; -->

	<div class="title #hide_name#">
		<div class="cmdName">#name_display#</div>
	</div>
	<div class="value">
		<span class="timeCmd#uid# timeCmd label label-default value"></span>
	</div>

	<div class="mainContainer#uid#">
		<div class="row1">
			<div id="selectedMode"></div>
			<div id="coloredStrip"></div>
		</div>
		<div class="colA colA1">
			<div class="rowA" id="indexindexValue">
				<div class="colB1">
					<div class="LEDIndicator"></div>
				</div>
				<div class="colB2"></div>
 				<div class="colB3"></div>
			</div>
		</div>
		<div class="freeSpace"></div>
	</div>

	<script>
		jeedom.cmd.update['#id#'] = function(_options){
			let cmd = $('.cmd[data-cmd_id=#id#]');
			if('#_time_widget_#' == '1'){
				jeedom.cmd.displayDuration(_options.valueDate,  cmd.find('.timeCmd'));
			}else{
				cmd.find('.timeCmd').parent().remove();
			}
			cmd.attr('title','Date de valeur : '+_options.valueDate+'<br/>Date de collecte : '+_options.collectDate+'<br/>Valeur : '+_options.display_value+'#unite#');
			switch('#Theme#') {
				case('light'):
					var imgTheme = "light";
					break;
				case('dark'):
					var imgTheme = "dark";
					break;
			default:
					var imgTheme = "light";
			}
			// Screen resolution 
			var screenWidth 		= screen.width;
			var screenHeight 		= screen.height;

			// Processing
			$(".mainContainer#uid#").find(".colA1").empty();

			// Widget value or string value 
			let inputValue 		= _options.display_value;
			let modeValue 		= inputValue;
			var inputString 	= '#listValue#'.toString();		// Do not use "#xxx#", use '#xxx#'
			const regex1		= /(<option value=(?:.*?)>(?:.*?)<\/option>)/g;
			var listArray		= inputString.match(regex1);
			var listLength		= listArray.length-1;			// [0]="Aucun", [1]="Option1", [2]="Option2", ..., [3]="", [?]=undefined
			var optionArray 	= new Array();
			var optionValue 	= new Array();
			var optionSelected 	= new Array();
			var optionText 		= new Array();

			for (let i = 0; i < listLength; i++) {
				let indexValue 		= i.toString();
				const regex2 		= /<option value="(.*)"(?:\s*)(.*)>(.*)<\/option>/ig;
				optionArray[i] 		= regex2.exec(listArray[i]);						// [0]=Full string
				optionValue[i]		= optionArray[i][1];								// [1]=Option Value
				optionSelected[i]	= optionArray[i][2];								// [2]='' or selected
				optionText[i]		= optionArray[i][3];								// [3]=Option Text

				let divrowAa = '<div class="rowA" id="index';
				let divrowAb = '"><div class="colB1"><div class="LEDIndicator"></div></div><div class="colB2">';
				let divrowAc = '</div><div class="colB3">';
				let divrowAd = '</div></div>';
				let divrowA  = divrowAa+indexValue+divrowAb+optionValue[i]+divrowAc+optionText[i]+divrowAd;

				let optionInt 		= parseInt(optionValue[i], 10);
				let selectedColor 	= "White"; 

				$('.mainContainer#uid#').find('.colA1').append(divrowA);
				if (optionValue[i] == modeValue) {
					$('.mainContainer#uid#').find('#index'+indexValue).find('.colB1').find('.LEDIndicator').css('background-color','#00fe00');
					$('.mainContainer#uid#').find('#coloredStrip').css('background-color', selectedColor);
					$('.mainContainer#uid#').find('#selectedMode').css('border', '1px solid '+selectedColor);
					$('.mainContainer#uid#').find('#selectedMode').empty().append(optionText[i]);
				}
			}
		}

		// Click handling - Set value
		$('.mainContainer#uid#').on( 'click', '.rowA', onclickAction );
		function onclickAction( event ) {
			jeedom.cmd.execute({id: '#id#', value: {select: $(this).find('.colB2').html()}});
		}

		// Widget update
		jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});  
		// Theme change
		$('body').on('changeThemeEvent', function (event, theme) {
			$('.cmd[data-cmd_id=#id#]').trigger('changeThemeEventCmd',theme);
		});
	</script>

	<style>
	@media (hover: hover) {
		.mainContainer#uid# .colB3:hover {
			background-color: Grey;
			font-size: 1.2em;
		}
	}
	.mainContainer#uid# {
		background-color: var(--form-bg-color) !important;
		min-width : max-content;
		display: grid;
		grid-template-columns: repeat(1,1fr);
		grid-template-rows: auto auto auto;
		grid-template-areas:
			"row1"
			"colA1"
			"freeSpace";
		grid-column-gap: 0px;
		grid-row-gap: 6px;
		position: relative;
	}
	.mainContainer#uid# .row1 {
		background-color: var(--form-bg-color);
		grid-area: row1;
		height: 24px;
		border-radius: 5px;
		display: grid;
		align-content: center; /* ^v start, center or end */
		justify-content: center; /* <-> start, center or end */
		position: relative;
		z-index: 1;
	}
	.mainContainer#uid# #selectedMode {
		background-color: var(--form-bg-color) !important;
		width: 180px;
		height: 20px;
		font-size: 1.3em;
		font-weight: 500;
		color: inherit;
		border-radius: 10px;
		display: grid;
		align-content: center; /* ^v start, center or end */
		justify-content: center; /* <-> start, center or end */
		position: relative;
		z-index: 2;
	}
	.mainContainer#uid# #coloredStrip {
		width: 100%;
		height: 4px;
		border-radius: 5px;
		align-self: center; /* ^v start, center or end */
		justify-self: center; /* <-> start, center or end */
		position: absolute;
		z-index: 1;
	}
	.mainContainer#uid# .colA {
		display: grid;
		grid-auto-rows: 24px;
		grid-row-gap: 6px;
		position: relative;
	}
	.mainContainer#uid# .rowA {
		background-color : transparent;
		font-size: inherit;
		font-weight: inherit;
		color: inherit;
		display: grid;
		grid-template-columns: 12px 24px 1fr;
		column-gap: 6px;
		position: relative;
	}
	.mainContainer#uid# .colB1 {
		display: grid;
		align-content: center;
		justify-content: right;
		border-radius: 5px;
	}
	.mainContainer#uid# .colB2 {
		display: grid;
		align-content: center;
		justify-content: center;
		background-color : Grey;
		border-radius: 5px;
	}
	.mainContainer#uid# .colB3 {
		display: grid;
		align-content: center;
		justify-content: left;
		padding-left: 10px;
		padding-right: 20px;
		background-color: rgba(80, 80, 80, 0.4);
		border-radius: 5px;
		color: var(--link-color) !important;
	}
	.mainContainer#uid# .LEDIndicator {
		width: 6px;
		height: 20px;
		border: 1px solid Grey;
		border-radius: 5px;
	}
	.mainContainer#uid# .freeSpace {
		grid-area: freeSpace;
		height: 6px;
	}
	</style>
  1. Affecter le widget créé a la commande Mode Set

Le nombre d’éléments de la liste n’est pas limité par le widget.
Je te laisse adapter le code pour le visuel selon ton usage.

Enjoy :slightly_smiling_face:

EDIT 2022 0603
Code mis a jour pour tenir compte de la remarque constructive de @Phpvarious
Merci a lui.

2 J'aime

Bonjour,
Sympa le widget :wink:,
Petit détail, dans le code ne commence jamais pas un commentaire, mais par le 1er div avant tout.
Car actuellement en design, si tu passe par « ajouter une commande », celui-ci ne fonctionnera pas.

Bonne journée

2 J'aime

Salut,

Merci beaucoup, je regarde ce que ça donne et je te redis :slight_smile:

Je dois être trop nul :slight_smile:

image

Le code est top, il faudrait juste me dire comment faire pour afficher le petit ventilateur vert en lieu et place de « ventilation » dans l’encadré du haut ?

Si j’arrive à faire ça, ce sera parfait :slight_smile: (d’ailleurs il ne m’écrit pas le mode auto qui a pour valeur 7, ne me demandez pas pourquoi 7, c’est le plugin qui fait pas moi :slight_smile: )

Bonjour,
Pour le ventilateur vert, aucune idée car je ne sais pas d’ou il sort (comment il est créé) mais a priori, le widget est générique pour une liste donc pas adapté a inclure un symbol.
Pour le mode auto (7), je ne vois pas la raison pour laquelle il ne s’affiche pas ? Tu as bien agrandi la tuile par le bas ?

image

Oui j’ai bien agrandi pour voir :slight_smile:

Pour le ventilateur, c’est une icone (comme tu peux en mettre un peu partout sur tous les objets :slight_smile: )

Pas d’idée ? Je n’arrive pas à lire le code (enfin je ne comprends pas ce qu’il fait :’()

Bonjour,
Pour le ventilateur, désolé, je ne peux rien pour toi.
Pour le mode auto (7), essaye de créer un nouveau virtuel avec la liste des actions sur lequel tu appliques le widget, pas intégré dans une tuile multiple et tu verras si le 7 est bien affiché.

D’accord, merci :slight_smile:

Bonjour, pour le mode auto ne pas oublié de finir la liste par « ; »

Dans le plugin?

Non dans la liste de la commande action
b0341ce046b0ed35c7836fa45181d812bf946d73

image

J’ai pas ça :slight_smile: