Widget perso

Eddie · Janvier 2, 2020, 7:12

Hello,

Sur la base d’un widget existant, j’ai personnalisé celui-ci sur une commande température du plugin Deconz sur un capteur Xiaomi.
Sauf que quand je l’associe à la commande c’est beugé et les images n’apparaissent pas.
Si une bonne âme pourrait me dire ou ca foire dans le code.
Merci

<div style="min-width:120px; min-height:80px;" class="cmd tooltips cmd-widget cursor container-fluid" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#">
	<center>
		<div style="font-weight: bold;font-size : 12px;#hideCmdName#">#name_display#</div>
		<span style="font-size: 2.5em;" class="iconCmd"></span>
		<div style="display:inline-block;">
			<span style="font-weight: bold;" class="pull-right">#unite#</span>
			<span style="font-size: 2em;font-weight: bold;" class="pull-right state"></span>
		</div>
		<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>
	</center>
<!-- Ne Pas Supprimer -->
	<script class="createWidgetInfo" type="text/javascript">//<![CDATA[{"type":"1","version":"1","size":"2.5","min":["-20","1","6","10","16","21","26","31","36","41","46","51"],"max":["0","5","9","15","20","25","30","35","40","45","50","52"],"images":["T01.png","T02.png","T03.png","T04.png","T05.png","T06.png","T07.png","T08.png","T09.png","T10.png","T11.png","T12.png"]}]]></script>
<!-- Ne Pas Supprimer -->
	<script>
   var srcImg = 'data/customTemplates/dashboard/cmd.info.numeric.Eddie_Temp/';
	var iconUpdate#uid# = function (state){
		$('.cmd[data-cmd_uid=#uid#] .iconCmd').empty();
		if (state >= -20 && state <= 0) {
			$('.cmd[data-cmd_uid=#uid#] .iconCmd').html('<img style="display: inline-block;" src="'+srcImg+'T01.png">');
		}
		if (state >= 1 && state <= 5) {
			$('.cmd[data-cmd_uid=#uid#] .iconCmd').html('<img style="display: inline-block;" src="'+srcImg+'T02.png">');
		}
		if (state >= 6 && state <= 9) {
			$('.cmd[data-cmd_uid=#uid#] .iconCmd').html('<img style="display: inline-block;" src="'+srcImg+'T03.png">');
		}
		if (state >= 10 && state <= 15) {
			$('.cmd[data-cmd_uid=#uid#] .iconCmd').html('<img style="display: inline-block;" src="'+srcImg+'T04.png">');
		}
		if (state >= 16 && state <= 20) {
			$('.cmd[data-cmd_uid=#uid#] .iconCmd').html('<img style="display: inline-block;" src="'+srcImg+'T05.png">');
		}
		if (state >= 21 && state <= 25) {
			$('.cmd[data-cmd_uid=#uid#] .iconCmd').html('<img style="display: inline-block;" src="'+srcImg+'T06.png">');
		}
		if (state >= 26 && state <= 30) {
			$('.cmd[data-cmd_uid=#uid#] .iconCmd').html('<img style="display: inline-block;" src="'+srcImg+'T07.png">');
		}
		if (state >= 31 && state <= 35) {
			$('.cmd[data-cmd_uid=#uid#] .iconCmd').html('<img style="display: inline-block;" src="'+srcImg+'T08.png">');
		}
		if (state >= 36 && state <= 40) {
			$('.cmd[data-cmd_uid=#uid#] .iconCmd').html('<img style="display: inline-block;" src="'+srcImg+'T09.png">');
		}
		if (state >= 41 && state <= 45) {
			$('.cmd[data-cmd_uid=#uid#] .iconCmd').html('<img style="display: inline-block;" src="'+srcImg+'T10.png">');
		}
		if (state >= 46 && state <= 50) {
			$('.cmd[data-cmd_uid=#uid#] .iconCmd').html('<img style="display: inline-block;" src="'+srcImg+'T11.png">');
		}
		if (state >= 51 && state <= 52) {
			$('.cmd[data-cmd_uid=#uid#] .iconCmd').html('<img style="display: inline-block;" src="'+srcImg+'T12.png">');
		}
		$('.cmd[data-cmd_uid=#uid#] .state').text(state);
	};
	jeedom.cmd.update['#id#'] = function(_options){
		$('.cmd[data-cmd_uid=#uid#]').attr('title','Valeur du '+_options.valueDate+', collectée le '+_options.collectDate)
		iconUpdate#uid#(_options.display_value);
	}
	jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
	</script>
</div>

JAG · Janvier 2, 2020, 7:37

Salut
Ton widget est valable pour la version 3 du core ?

Salvialf · Janvier 2, 2020, 8:19

Salut,

Tu as bien mis toutes les images (T01.png, T02.png, etc…) dans le répertoire data/customTemplates/dashboard/cmd.info.numeric.Eddie_Temp/ ?

Si tu fais un clic droit sur l’image qui n’apparaît puis « inspecter », quelle erreur est écrite dans la console du navigateur ?

Eddie · Janvier 2, 2020, 8:22

Je pense qu’à l’origine il a été dev sur la V3

Eddie · Janvier 2, 2020, 8:24

Oui j’ai bien un dossier avec mes images @Salvialf
Je vais checker avec la console, je te redis quoi.
En tout cas merci, tjrs là pour aider…

Salvialf · Janvier 2, 2020, 8:26

J’ai testé vite fait sur une V4 et le code est OK les images s’affichent bien donc le problème n’est pas dans le code en tout cas.

Après y’aura d’autres modifications à faire pour le rendre utilisable en V4 donc tu ferais mieux de le recréer à l’aide du template multistate directement via le menu widget V4

Eddie · Janvier 2, 2020, 8:28

Ok, vais essayer de le reprendre comme ça.

Salvialf · Janvier 2, 2020, 8:33

Attention aux comparaisons <= | >= car ça n’englobe pas toutes les décimales.

Il vaut mieux faire comme ça par exemple:

if (state >= -20 && state < 0) {
			xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
		}
		if (state >= 0 && state < 5) {
			xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
		}
		if (state >= 5 && state < 9) {
			xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
		}
		if (state >= 9 && state < 15) {

Eddie · Janvier 2, 2020, 8:34

Oui effectivement ça paraît logique…
Je check ça demain.
T’es un chef!

Eddie · Janvier 3, 2020, 5:28

J’ai créer un widget passant par la V4 en info multistate.
Comme suit:

J’ai pas d’image associé à l’info de la sonde.

Salvialf · Janvier 3, 2020, 5:30

Et ti tu recopies le résultat dans la colonne « dark » également ? Tu as bien appliqué ton nouveau widget sur la commande ?

et ctrl+F5 pour vider la cache du navigateur

Eddie · Janvier 3, 2020, 5:35

j’ai mis les memes images en dark, ré-assigné à la commande, sauvegardé, Ctl+F5= idem

J’ai cette erreur dans les evenements:
/index.php?v=d&p=widgets&id=18 11 Uncaught SyntaxError: Invalid left-hand side in assignment

Salvialf · Janvier 3, 2020, 5:37

déjà il manque les signes < sur ta 2ème condition sur chaque ligne. je t’avais mis un exemple:

if (state >= -20 && state < 0) {
			xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
		}
		if (state >= 0 && state < 5) {
			xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
		}
		if (state >= 5 && state < 9) {
			xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
		}
		if (state >= 9 && state < 15) {

Et ce n’est pas state qu’il faut tester mais #value#

github.com

jeedom/core/blob/V4-stable/docs/fr_FR/widgets.md#test

# Widgets

Un widget est la représentation graphique d'une commande. Chaque widget est spécifique au type et au sous-type de la commande sur laquelle il doit être appliqué ainsi qu'à la version à partir de laquelle on accède à Jeedom *(desktop ou mobile)*.

## Widgets par défaut

Avant de nous intéresser à la personnalisation des widgets, découvrons les possibilités offertes par certains widgets présents par défaut dans le Core Jeedom.

### Équipements

Les équipements (ou tuiles) possèdent certains paramètres de configuration accessibles via la configuration avancée de l'équipement, onglet "Affichage" → "**Paramètres optionnels sur la tuile**".

##### Paramètre(s) optionnel(s)

- **dashboard_class/mobile_class** : permet d'ajouter une class à l'équipement. Par exemple `col2` pour les équipements en version mobile va permettre de doubler la largeur du widget.

### HygroThermographe

Ce widget est un peu particulier car c'est un widget multi-commandes, c'est à dire qu'il assemble la valeur de plusieurs commandes. Ici il prend les commandes de type température et humidité. Pour le configurer il faut affecter le widget aux commandes température et humidité de votre équipement.

This file has been truncated. show original

Eddie · Janvier 3, 2020, 5:42

je suis passé par la case doc, j’ai essayé aussi value…
Je refais en remplacement state par value

Salvialf · Janvier 3, 2020, 5:43

#value# bien avec les dièses # c’est important !

Eddie · Janvier 3, 2020, 5:47

(#value# >= -20 && #value# < 0)

J’ai :Uncaught SyntaxError: Unexpected token ‹ ) ›

Avec ou sans les ( et )

Eddie · Janvier 4, 2020, 10:26

Je parviens à faire afficher mon widget, cependant il ne s’affiche pas sur toutes mes commandes de températures. Il s’était affiché sur la commande température extérieure puis par disparaître.

Salvialf · Janvier 4, 2020, 10:29

Tu n’aurais pas remis ça dans tes tests de valeur ?:

if (state >= 1 && state <= 5) {
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
}
if (state >= 6 && state <= 9) {

il faut ça:

if (state >= 1 && state <= 5) {
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
}
if (state ~~>= 6~~ > 5 && state <= 9) {

En mettant à chaque fois <= ou >= dans le cas présent tu ne prends pas en compte toutes les décimales entre 5 et 6. inférieur ou égal à 5.00 il affiche telle image, sinon supérieur ou égal à 6.00 il affiche une autre image. donc de 5.01 à 5.99 il n’y aucune image à afficher.

Eddie · Janvier 4, 2020, 10:36

Tu es le best!

Encore merci.

Salvialf · Janvier 4, 2020, 10:38

là j’y suis pour rien c’est repassé à 6.51 donc dans une fourchette de valeurs prise en compte.

surtout fais bien attention à n’avoir nulle part <= et >= sur la même ligne de test.