Explications sur le nouveau codage des widgets

[HerveL]

Salut,

il manque le #id# à la fin de "iconCmd".

Ah yes !
Merci beaucoup
Je me doutais bien que ça tournait autour des classes; mais je ne voyais pas où

[Claude69]

Hello
Petite question aux spécialistes widgets V3.
J'avais lors de la mise en place de mon Riiot sur la piscine, récupéré les widgets de Bello65

Code : Tout sélectionner

<div style="min-width:115px;min-height:100px;position: relative; top : -7px;padding:0px !important;" class="cmd tooltips cmd-widget cursor container-fluid history" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" title="Valeur du #valueDate#, collectée le #collectDate#" >
		<div class="cmdName" style="margin-top:7px;font-size : 13px;">#name#</div>
  		<div class="iconCmd#uid#" style="margin-bottom:-10px;font-size: 3.3em;"><i class="fa fa-flask"></i></div>
  		<div>
        <span style="font-size: 15px;font-weight: bold;color: white">#state# #unite#</span>
  		</div>
		<div class="" style=" font-size: 0.7em;#displayHistory#">
				<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>
</div>

Ils fonctionnent toujours, mais pouvez vous me dire si ils sont 100% compatibles V3 ou si ils doivent être modifiés

[Claude69]

Hello
Petite question aux spécialistes widgets V3.
J'avais lors de la mise en place de mon Riiot sur la piscine, récupéré les widgets de Bello65

Code : Tout sélectionner

<div style="min-width:115px;min-height:100px;position: relative; top : -7px;padding:0px !important;" class="cmd tooltips cmd-widget cursor container-fluid history" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" title="Valeur du #valueDate#, collectée le #collectDate#" >
		<div class="cmdName" style="margin-top:7px;font-size : 13px;">#name#</div>
  		<div class="iconCmd#uid#" style="margin-bottom:-10px;font-size: 3.3em;"><i class="fa fa-flask"></i></div>
  		<div>
        <span style="font-size: 15px;font-weight: bold;color: white">#state# #unite#</span>
  		</div>
		<div class="" style=" font-size: 0.7em;#displayHistory#">
				<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>
</div>

Ils fonctionnent toujours, mais pouvez vous me dire si ils sont 100% compatibles V3 ou si ils doivent être modifiés

Hello
Je retente ma question. Les spécialistes @jag, @salvialf. Si vous passez par ici
Pas

[Antoinekl1]

Hello
Petite question aux spécialistes widgets V3.
J'avais lors de la mise en place de mon Riiot sur la piscine, récupéré les widgets de Bello65

Code : Tout sélectionner

<div style="min-width:115px;min-height:100px;position: relative; top : -7px;padding:0px !important;" class="cmd tooltips cmd-widget cursor container-fluid history" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" title="Valeur du #valueDate#, collectée le #collectDate#" >
		<div class="cmdName" style="margin-top:7px;font-size : 13px;">#name#</div>
  		<div class="iconCmd#uid#" style="margin-bottom:-10px;font-size: 3.3em;"><i class="fa fa-flask"></i></div>
  		<div>
        <span style="font-size: 15px;font-weight: bold;color: white">#state# #unite#</span>
  		</div>
		<div class="" style=" font-size: 0.7em;#displayHistory#">
				<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>
</div>

Ils fonctionnent toujours, mais pouvez vous me dire si ils sont 100% compatibles V3 ou si ils doivent être modifiés

Hello
Je retente ma question. Les spécialistes @jag, @salvialf. Si vous passez par ici
Pas

Bonjour, si le code du widget est complet, alors non il ne prend pas en compte les nouvelles règles de la V3, ou alors il manque toute la partie SCRIPT

j'avais fait ce post : viewtopic.php?f=29&t=44201&hilit=information+widget
qui devrait vous permettre de rajouter la partie manquante pour l'adaptation V3

[Salvialf]

Bonjour @Claude,

Étant donné qu'il n'y a pas de javascript dans le code du widget, il n'est pas concerné par la nouvelle fonction d'update.

[Antoinekl1]

Bonjour @Claude,

Étant donné qu'il n'y a pas de javascript dans le code du widget, il n'est pas concerné par la nouvelle fonction d'update.

Oui, mais il y a quand même le #state#, donc la vignette ne se mettra pas à jour sans refresh manuel
idem pour les autres infos changeantes d'ailleurs

[Salvialf]

Ah oui j'avais pas vu le state de bon matin... Donc ça ne doit pas se mettre à jour automatiquement à l'heure actuelle @Claude.

tu peux essayer ça:

Code : Tout sélectionner

<div style="min-width:115px;min-height:100px;position: relative; top : -7px;padding:0px !important;" class="cmd tooltips cmd-widget cursor container-fluid history #history# #displayHistory#" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" title="Valeur du #valueDate#, collectée le #collectDate#" >
		<div class="cmdName" style="margin-top:7px;font-size : 13px;">#name#</div>
  		<div class="iconCmd#uid#" style="margin-bottom:-10px;font-size: 3.3em;"><i class="fa fa-flask"></i></div>
  		<div>
        <span style="font-size: 15px;font-weight: bold;color: white" class="state#id#"></span>
  		</div>
		<div style=" font-size: 0.7em;#displayHistory#;">
				<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>
  <script>
  jeedom.cmd.update['#id#'] =function(_options){
        $('.cmd[data-cmd_id=#id#] .state#id#').empty().html(_options.display_value + '#unite#');
                                                             
      $('.cmd[data-cmd_id=#id#]').attr('title','Valeur du '+_options.valueDate+', collectée le '+_options.collectDate)
  }
  jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
  </script>
</div>

[Claude69]

Merci pour vos réponse
Les infos étants rafraîchies seulement 20 fois par jour, il m'est difficile de savoir si elles s'actualisaient sans F5.
J'ai fait la modif avec ton code et ca a l'air de fonctionner.
Merci

[Claude69]

Je profite de votre présence pour une question
J'ai 5 fois ce widget avec pour seule difference l'icone utilisée.

Code : Tout sélectionner

<div class="iconCmd#uid#" style="margin-bottom:-10px;font-size: 3.3em;"><i class="fa fa-flask"></i></div>

Serait il possible de faire un if name= pH then icone=fa-flask elseif name = Salinité then icone= xxxx

PS: @antoinekl1 : Je vais étudier avec soins ton post sur le codage

[winhex]

j'ai le même widget icon info/action depuis la 1er v2 (supprimé du forum + 1 ans)
après avoir bien paramétré la place j'ai défini en param avancé
icon_on/off
la couleur
la taille
la hauteur (top : à faire comme size)
certains icon on une taille ou positionnement différent

ça permet de ne pas duppliqué x/fois le widget

Screenshot_20190427-125215_Chrome.jpg (32.09 Kio) Consulté 1705 fois

cellule portail n'est qu'une info, lastvalue dessous est une commande qui si je clic dessus mène à l'historique "un paramètre avancé sur id etat)
si tu veux gardé le même comportement :
clic sur info mène à ton historique
ajout en 1er ligne la class #history#

Code : Tout sélectionner

<div style="width:90px;min-height:62px;" class="cmd tooltips cmd-widget" data-type="info" data-subtype="binary" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#">
  <center>
    <div style="font-weight: bold;font-size : 12px;#hideCmdName#">#name_display#</div>
      <span style="padding : 3px;border-radius: 4px;font-size: #size#;font-weight: bold;margin-top:-5px;position:relative;top:-6px;" class="iconCmd"></span><br />


  </center>
  <script>
    jeedom.cmd.update['#id#'] = function(_options){
     $('.cmd[data-cmd_id=#id#]').attr('title','Valeur du '+_options.valueDate+', collectée le '+_options.collectDate)
     if (_options.display_value == '1') {
       $('.cmd[data-cmd_id=#id#] .iconCmd').empty().append('<i class="icon #icon-off#"></i>').css('color', '#color-off#');
     }else {
      $('.cmd[data-cmd_id=#id#] .iconCmd').empty().append('<i class="icon #icon-on#"></i>').css('color', '#color-on#');
    }
  }
  jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
</script>
</div>

Screenshot_20190427-125835_Chrome.jpg (138.37 Kio) Consulté 1705 fois

garde en mémoire qu'en v4 ça risque de changer, donc un if/else te compliquera l'adaptation.

[chanchan]

Bonjour @ tous.
Comme beaucoup ici, je suis en train d'adapter les quelques Widgets que j'utilise et grâce à ce post, j'ai réussi sauf pour un.
C'est un widget de type "Info Numéric" qui permet d'afficher un arc de cercle avec différentes couleur suivant si la valeur est proche du min ou du max. A l'origine, ce widget s'appelait "Puissance" mais n'est plus disponible sur le Market.

Si quelqu'un peu m'aider à l'adapter, ça serait super

Voici le code d'origine :

Code : Tout sélectionner

<div style="width:125px;height:60px;" class="cmd #history# tooltips cmd-widget container-fluid" data-type="info" data-subtype="numeric" data-cmd_id="#id#" title="#collectDate#">
	<canvas id="myCanvas#id#" width="125px" height="60px"></canvas>
	<script>
		var canvas = document.getElementById('myCanvas#id#');
		var context = canvas.getContext('2d');
		var x = 55;
		var y = 60;
		var radius = 45;
		var startAngle = 1.0 * Math.PI;

// compute the size (between 0 and 1.0)
		var size =  (#state# - #minValue#) * (1.0/(#maxValue# - #minValue#));

		var endAngle = (1+size) * Math.PI;
		var counterClockwise = false;

		context.beginPath();
		context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
		context.lineWidth = 17;

		var puissance = Math.round('#state#');
		context.fillStyle = 'white';  // couleur de la valeur et de l'unité
		context.font = "18px Arial";  // police de la valeur
		context.fillText(puissance,27,59);  // position de la valeur

		context.font = "13px Arial"; // police de l'unitée
		context.fillText("#unite#",72,59);   // position de l'unité

// line color
// add linear gradient
		var grad=context.createLinearGradient(0,0,170,0);

		grad.addColorStop(0,'#00FF21');   // vert
		grad.addColorStop(0.1,'#FFF426');  // jaune
		grad.addColorStop(0.25,'#FF6A00');  // orange
		grad.addColorStop(0.5,'#FF0000');  // rouge

		context.strokeStyle = grad;
		context.stroke();
		context.closePath();

	</script>
</div>

@_screenshot_62.jpg (39.05 Kio) Consulté 1501 fois

Merci d'avance.

[JAG]

Salut
Recherche sur le forum, on l a mis à jour avec Salvialf la semaine dernière
Si tu ne trouves pas, dis moi le je remettrai à dispo le code


Envoyé de mon iPhone en utilisant Tapatalk

[chanchan]

Je profite de votre présence pour une question
J'ai 5 fois ce widget avec pour seule difference l'icone utilisée.

Code : Tout sélectionner

<div class="iconCmd#uid#" style="margin-bottom:-10px;font-size: 3.3em;"><i class="fa fa-flask"></i></div>

Serait il possible de faire un if name= pH then icone=fa-flask elseif name = Salinité then icone= xxxx

Je viens justement de mettre à jour un des Widget que j'utilise partout. Il me permet de choisir une image en fonction de l'info qu'il représente simplement en ajoutant un paramètre "type" et le début du nom de l'image que je veux afficher.
Le nom des images sont sous cette forme "Nom_Image_on.png" ou "Nom_Image_off.png"

Peut-être pourrais-tu adapter le code pour ton usage car le mien gère le "On" ou "Off".

Code : Tout sélectionner

<div style="padding:0px;width:auto;height:auto;" class="cmd #history# tooltips cmd-widget container-fluid" data-type="info" data-subtype="binary" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" title="#collectDate#">  
	<center>
		<span class="cmdName" style="padding-top:3px;font-weight:bold;font-size:13px;#hideCmdName#">#name_display#</span>
		<div class="iconCmd#uid#"></div>
	</center>
	<style>
		.iconCmd#uid# {
			margin:4px 4px 4px 4px;
		}
	</style>
	<script>
		jeedom.cmd.update['#id#'] = function(_options){

			var valueState	= "off";

			if (parseInt(_options.display_value) == 1) {
				valueState = "on";
			} else if (parseInt(_options.display_value) == 0) {
				valueState = "off";
			} else {
				valueState = "wrn";
			}

			var valueH = is_numeric('#hauteur#') ? parseFloat('#hauteur#'):66;
			var valueL = is_numeric('#largeur#') ? parseFloat('#largeur#'):66;
			var paramTaille = 'height='+valueH+'px width='+valueL+'px';
			var valueFile = ('#extension#' !='#'+'extension#') ? "#extension#":"png";
			var valueType = ('#type#' !='#'+'type#') ? "#type#":"defaut";
			var iconPath = "plugins/widget/core/template/dashboard/cmd.info.binary.BZH_Appareil/"+valueType+"_"+valueState+"."+valueFile;

			$('.iconCmd#uid#').empty().append('<img src="'+iconPath+'" '+paramTaille+'>');
			$('.cmd[data-cmd_id=#id#]').attr('title','Valeur du '+_options.valueDate+', collectée le '+_options.collectDate);
		}
		jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
	</script>
</div>

@_screenshot_64.jpg (93.49 Kio) Consulté 1488 fois

@_screenshot_63.jpg (242.05 Kio) Consulté 1488 fois

[JAG]

Re

Regarde sur le Market j’ai mis à dispo des widgets multi pour l action et binaire (ils sont compatible v4)

Ou regarde les widgets de Salvialf aussi


Envoyé de mon iPhone en utilisant Tapatalk

[JAG]

Pour le widget
Puissance : regarde ici viewtopic.php?f=29&t=46906&p=757722#p757562

Pour mes widgets, j'oblige a mettre le nom complet. c'est beaucoup plus simple et surtout valable pour tous les types d’icônes
voila comment je paramètre pour une commande on

Capture d’écran 2019-08-31 à 22.17.40.png (183.73 Kio) Consulté 1461 fois

Capture d’écran 2019-08-31 à 22.17.40.png (183.73 Kio) Consulté 1461 fois

Après tu es libre d'ajouter tes images dans le widgets.

A disposition pour toutes questions

[chanchan]

@JAG : Merci beaucoup d'avoir pris le temps de me répondre.
Pour le Widget "Info binaire", celui que je propose fonctionne bien (il se rafraichi tout seul dès que la valeur change) mais je vais regarder ce que je dois rajouter pour être totalement compatible avec la V4 (à ce que j'ai compris, c'est la notion d'"historique" qui est rajouté).

Concernant le Widget "Puissance", j'ai regardé le post que tu m'as donné mais il fonctionne par image. J'aurai bien aimé rester sur un arc de cercle en dégradé partant du vert au rouge qui se dessine par code mais je ne sais pas si c'est toujours faisable.

[Antoinekl1]

Re

Regarde sur le Market j’ai mis à dispo des widgets multi pour l action et binaire (ils sont compatible v4)

Ou regarde les widgets de Salvialf aussi


Envoyé de mon iPhone en utilisant Tapatalk

Bonjour

Tu pourrais me dire ce qui a changé dans le code de la V4
Je dos refaire les miens

[JAG]

Salut

Il y a bp de chose qui ont changé et vu qu’il y a un moment que je les ai mis à jour.
Je me rappelle plus beaucoup
Je sais qu’il y a un truc sur l’historique mais aussi des class qui change

Regarde un de mes widgets comme ça tu n’oublieras rien


Envoyé de mon iPhone en utilisant Tapatalk

[Antoinekl1]

Salut

Il y a bp de chose qui ont changé et vu qu’il y a un moment que je les ai mis à jour.
Je me rappelle plus beaucoup
Je sais qu’il y a un truc sur l’historique mais aussi des class qui change

Regarde un de mes widgets comme ça tu n’oublieras rien


Envoyé de mon iPhone en utilisant Tapatalk

Ok merci

[esso1]

bonjour

j'essai de comprendre un widget, qui ne ce mets pas a jour quand je clik ( je change de page et je revient, la maj est faite)
le widget et un telecharger, mais je ne le trouve plus .
j'avais utiliser le tuto pour le reveil sous jeedom .

https://www.ca-sert-a-quoi.com/articles ... ut-du-lit/

voila le code
j'ai essayé de modifier mais trop complexe

Code : Tout sélectionner

<div style="width:100%;min-height:20px;" class="cmd #history# tooltips cmd-widget" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#">
    <center>
      <span class="cursor iconCmd#uid#" style="font-size: 1.5em;">
        <span class="cmdName" style="#hideCmdName#">#valueName#</span>
        <!-- <span class="cmdName" style="#hideCmdName#">#name_display#</span> -->
      </span>

    </center>
    <script>
      jeedom.cmd.update['#id#'] = function(_options){
        $('.iconCmd#id#').empty();
        if (parseInt('#state#') > 0) {
            $('.iconCmd#uid#').append('<i class="icon nextdom2-case_ok"></i>');
            $('.iconCmd#uid#').attr('data-state', 'on');
        }else {
            $('.iconCmd#uid#').append('<i class="icon nextdom2-case"></i>');
            $('.iconCmd#uid#').attr('data-state', 'off');
        }

        $('.iconCmd#uid#').off().on('click', function() {
            if ($(this).attr('data-state') == 'on') {
                jeedom.cmd.execute({id: '#id#', value: {slider: 0}});
            } else {
                jeedom.cmd.execute({id: '#id#', value: {slider: 99}});
            }
        });
      jeedom.cmd.update['#id#'] = function(_options){
        $('.iconCmd#id#').attr('title','Valeur du '+_options.valueDate+', collectée le '+_options.collectDate)
        iconUpdate(_options.display_value);
    }}
    jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
    </script>
</div>

merci d'avance