Discution pour un widget fenêtre et volet

[slobberbone]

Bon qui a un dépôt public pour travailler sur le sujet ? Je peux m'en occuper si vous voulez ?

[virux]

Je viens de penser et tester un truc pour "simplifier" la gestion des paramétrés car tout séparé avec des ; ça va vite devenir compliqué...

Dans le Virtuel on créer autant d'info que de paramétres a passer (ou pas si il sont optionnel) que l'on affiche

Parametres

Screenshot_20170310_092335.png (36.41 Kio) Consulté 1701 fois

et on applique un widget qui n'affiche rien mais inclus dans le container du widget de l'eqlogic le code :

Code : Tout sélectionner

<span class="tilevar #name_display# " data-cmd_id="#id#" data-cmd_uid="#uid#" data-value="#state#"></span>

dans le widget qui gere l'affichage on peux recuperer les valeurs avec

Code : Tout sélectionner

...
<script>
	var $wrp = $('#iconCmd#id#');
        var $eqLogic =  $wrp.closest('.eqLogic-widget');
      	var etatFenetre = $eqLogic.find('.tilevar.EtatFenetre').data('value')|| '2';
        var etatVolet = $eqLogic.find('.tilevar.EtatVolet').data('value')|| null;
...

qu'en pensez vous ?

[Patator33]

Je suis avec attention ce post même si je n'ai pas les capacités de vous aider.
Je voulais juste savoir s'il est possible d'avoir le stateduration affiché (choix par option) histoire de savoir depuis combien de temps c'est ouvert ou fermé ?

[virux]

@Patator33

c'est vrai que j'utilise aussi cette donné ( pour savoir si c'est trop ou pas assez aérer par exemple), par contre je me demande comment on peu récupérer le #valueDate# dans le widget comme c'est un virtuel ?

[cyrilphoenix]

@Patator33
J'y avais pensé mais faudrait savoir si on peu faire :

Code : Tout sélectionner

var date = "#collectDate#"

avec valueDate

@virux
Bonne idée mais c'est pas du plug and play.
Apres j'ai comme idée de gerer multiple state :
- dans le code je regarde si state contient des point virgule alors je deconcatene et gere les different états
- si state contient pas de point virugule je gere etat fenetre et volet avec la formule (StoreState * 10) + WindowsState
- je pourrais donc rajouter en amont si commande StateWindow et StateVolet présente alors gerer les etats comme ca
ca donnerais 3 possibilité d'utiliser le widget
- le state "A;B;C;D;E"
- le state 281 = 28% volet et fenetre ouverte
- les commande StateWindow StateStore etc..

J'ai aussi prevu de faire de la conversion d'etat automatique de sorte qu'on puisse avoir par exemple "ouvert" dans le stateWindow

Parcontre tout ne sera pas parfait si je resoud pas ce probleme :
Quand on creer un virtuel ou qu'on veut appliquer notre widget sur une commande de type binaire, numerique ou autre il faut choisir un widget du meme type.
Ca m'oblige donc a creer 3 widget pour chaque type (ce que j'ai fait dans ma premiere version)
Quelqu'un saurait-il comment permettre a un widget "d'appartenir" aux 3 categories ? (car dans le code je gere tous etats possible (binaire, num, string)

[virux]

@cyrilphoenix pourquoi tu veux donner un type ? tu peux mettre autre dans tout les cas, non ? puisqu'on applique le widget sur une info du virtuel.

En tout cas bonne idée la gestion de multiple façon de paramétrer!

Pour #valueDate# il nous faut un pro des plugin ou aller voir ds le code pour savoir si on peu récupérer correctement la valeur, car comme ds le virtuel on a plusieurs équipement physique ( volet, fenêtre) du coup on aussi plusieurs #valueDate# possible.

[cyrilphoenix]

En fait j'aimerais que le widget soit utilisable aussi sur des commandes autre que virtuel par exemple etat capteur xiaomi et la on peut pas choisir de wdget string.
Pas faux pour le value date

[Masterfion]

Hey les gars, pourquoi vous n'en faites pas un plugin plutôt qu'un "Widget qui tu sa mère" associé à un virtuel ?
Dans un plugin, les commandes d'état seraient sélectionnées tout comme les options visuelles désirées.

[virux]

Pas bête @Masterfion, mais ça demande (1) un peu plus de temps et (2) de connaissance de l’environnement de dev Jeedom( qui dépend aussi du point 1 ) .

[cyrilphoenix]

Oui je préfère rester sur un widget
Sinon pas mal codé ce matin mais je galère un peu lol

Avec mon pouce depuis mon Mi4c

[cyrilphoenix]

@slobberbone j'y connaît rien en dépôt lol
Et je veux bien tes images sources car moi 128x128

Avec mon pouce depuis mon Mi4c

[cyrilphoenix]

Aller c'est le weekend mais comme je suis sympa ma version 2.0 est prete à etre testée
viewtopic.php?f=94&t=25082&p=442540#p442540

Attention seule la version string est en 2.0

A vos commentaires, critiques et rapports

[slobberbone]

Bon je regarde pour faire un dépôt puis j'y mets ce que j'ai. !

[beber53]

Hey les gars, pourquoi vous n'en faites pas un plugin plutôt qu'un "Widget qui tu sa mère" associé à un virtuel ?
Dans un plugin, les commandes d'état seraient sélectionnées tout comme les options visuelles désirées.

+1 pour un plugin, sa vaut le coup je pense

[virux]

J'ai commencé a faire un plugin, je connais php, html, js et css (c'est mon boulot) mais je découvre les entrailles de Jeedom ...
Si @cyrilphoenix, @slobberbone, @masterfion sont ok je reprendrai leur travail.

[cyrilphoenix]

Pas de souci
Je continuerai a maintenir le widget ça peut être sympa
Vous avez testé ?

Avec mon pouce depuis mon Mi4c

[cyrilphoenix]

Je viens de tester chez moi en creant 2 virtuel chacun contenant 2 info avec les 2 widget et aucun souci de disparition

@masterfion je trouve la transparence de ta fenetre plus jolie que la mienne, quel parametre a tu utiliser ?

[virux]

@ cyrilphoenix,

Voici le virtuel :

Virtuel

Screenshot_20170313_111635.png (72.87 Kio) Consulté 1555 fois

le code du widget pour les "etats":

Code : Tout sélectionner

<span class="tilevar #name_display# " data-cmd_id="#id#" data-cmd_uid="#uid#" data-value="#state#"></span>

le code du widget sur fenetre:

Code : Tout sélectionner

<div style="width:98px;min-height:80px;" class="cmd #history# tooltips cmd-widget" data-type="info" data-subtype="numeric" data-cmd_id="#id#" title="#collectDate#">
	<center>
	<span style="font-size: 3.5em;position:relative" id="iconCmd#id#"></span>
	</center>
	<script>
		var $wrp = $('#iconCmd#id#');
        var $eqLogic =  $wrp.closest('.eqLogic-widget');
      

     	var infos = [];
      	infos[0] = $eqLogic.find('.tilevar.EtatFenetre').data('value')|| '2';
        infos[1] = $eqLogic.find('.tilevar.EtatVolet').data('value')|| null;
      	//console.log(infos);

		var fenetre="9";
		var volet=null;
		if((infos.length < 2) || isNaN(infos[0]) || isNaN(infos[1])){
			fenetre ="9";
		} else {
			fenetre = infos[0]==0?'2':'1';
			volet = 100-infos[1];
		}
		$wrp.empty();
		$wrp.append('<img style="position:relative;width:85px;height:85px;" src="plugins/widget/core/template/dashboard/cmd.info.string.vx_Store_and_Window2/StoreWindow-'+fenetre+'99.png"/>');
		if(volet)
			$wrp.append('<span style="position:absolute;width:85px;height:'+Math.round(85*volet/100)+'px;background-size:cover;top:-4px;left:0;background-image:url(plugins/widget/core/template/dashboard/cmd.info.string.vx_Store_and_Window2/StoreWindow-'+fenetre+'00.png)"></span>');
		jeedom.cmd.update['#id#'] = function(_options){
			$('.cmd[data-cmd_id=#id#]').attr('title','Valeur du '+_options.valueDate+', collectée le '+_options.collectDate)
			$('.cmd[data-cmd_id=#id#] .state').empty().append(_options.display_value);
		}
		jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
	</script>
</div>

De mon coté j'ai commencé a faire un plugin ( pour me faire un peu la main,a voir l'utilité/complémentarité par rapport au widget)

@++

[virux]

Tu applique le widget "etat" aux 2 infos d'etats:

Code : Tout sélectionner

<span class="tilevar #name_display# " data-cmd_id="#id#" data-cmd_uid="#uid#" data-value="#state#"></span>

et tu appliques ton widget a "Fenetre" et dans ton widget tu récupères les valeurs avec:

Code : Tout sélectionner

var $wrp = $('#iconCmd#id#');
var $eqLogic =  $wrp.closest('.eqLogic-widget');
var etatFenetre = $eqLogic.find('.tilevar.EtatFenetre').data('value')|| '2';
var etatVolet = $eqLogic.find('.tilevar.EtatVolet').data('value')|| null;

[virux]

oui tu créer un widget avec la ligne que j'ai mis, il n'affiche rien rend juste l'info disponible dans la tuile de l'eqLogic.
Si tu prend le widget deauft(core) il va afficher les valeurs sur la tuile.

Voici le rendu sur le dashboard:

Code : Tout sélectionner

<div class="eqLogic eqLogic-widget allowResize allowReorderCmd jeedomAlreadyPosition ui-draggable ui-draggable-handle ui-draggable-disabled" data-eqlogic_id="213" data-eqlogic_uid="eqLogic213____2092701312____" data-version="dashboard" style="border: none; border-radius: 4px; background-color: rgb(25, 188, 156); color: rgb(255, 255, 255); width: 124px; height: 162px; margin: 0px; padding: 0px; position: absolute; left: 0px; top: 3px;" data-category="">
	<span class="cmd refresh pull-right cursor" data-cmd_id="2091" style="margin-top: 3px;margin-right: 3px;">
		<i class="fa fa-refresh"></i>
	</span>
	<center class="widget-name">
		<a href="index.php?v=d&p=virtual&m=virtual&id=213" style="font-size : 1.5em;">TestVolet01 <span style="font-size: 0.85em;"></span></a>
	</center>
	<div class="verticalAlign">
		<center style="padding: 5px;">
			<span class="tilevar EtatFenetre " data-cmd_id="2110" data-cmd_uid="cmd2110____2092701312____" data-value="1"></span><span class="tilevar EtatVolet " data-cmd_id="2111" data-cmd_uid="cmd2111____2092701312____" data-value="68"></span><div style="width:98px;min-height:80px;" class="cmd  tooltips cmd-widget" data-type="info" data-subtype="numeric" data-cmd_id="2138" title="Valeur du 2017-03-13 11:15:03, collectée le 2017-03-13 11:15:52">
	<center>
	<span style="font-size: 3.5em;position:relative" id="iconCmd2138"><img style="position:relative;width:85px;height:85px;" src="plugins/widget/core/template/dashboard/cmd.info.string.vx_Store_and_Window2/StoreWindow-199.png"><span style="position:absolute;width:85px;height:27px;background-size:cover;top:-4px;left:0;background-image:url(plugins/widget/core/template/dashboard/cmd.info.string.vx_Store_and_Window2/StoreWindow-100.png)"></span></span>
	</center>
	<script>
		var $wrp = $('#iconCmd2138');
        var $eqLogic =  $wrp.closest('.eqLogic-widget');
      
     	var infos = [];
      	infos[0] = $eqLogic.find('.tilevar.EtatFenetre').data('value')|| '2';
        infos[1] = $eqLogic.find('.tilevar.EtatVolet').data('value')|| null;
      	//console.log(infos);

		var fenetre="9";
		var volet=null;
		if((infos.length < 2) || isNaN(infos[0]) || isNaN(infos[1])){
			fenetre ="9";
		} else {
			fenetre = infos[0]==0?'2':'1';
			volet = 100-infos[1];
		}
		$wrp.empty();
		$wrp.append('<img style="position:relative;width:85px;height:85px;" src="plugins/widget/core/template/dashboard/cmd.info.string.vx_Store_and_Window2/StoreWindow-'+fenetre+'99.png"/>');
		if(volet)
			$wrp.append('<span style="position:absolute;width:85px;height:'+Math.round(85*volet/100)+'px;background-size:cover;top:-4px;left:0;background-image:url(plugins/widget/core/template/dashboard/cmd.info.string.vx_Store_and_Window2/StoreWindow-'+fenetre+'00.png)"></span>');
		jeedom.cmd.update['2138'] = function(_options){
			$('.cmd[data-cmd_id=2138]').attr('title','Valeur du '+_options.valueDate+', collectée le '+_options.collectDate)
			$('.cmd[data-cmd_id=2138] .state').empty().append(_options.display_value);
		}
		jeedom.cmd.update['2138']({display_value:'Sert juste a appliquer le widget',valueDate:'2017-03-13 11:15:03',collectDate:'2017-03-13 11:15:52',alertLevel:'#alertLevel#'});
	</script>
</div>
		</center>
	</div>
	<span class="statusCmd" style="position : absolute;left : 5px;bottom : 0px; width : 30px;z-index: 1030;"></span>
	<script>
		if ('2091' != ''){
			$('.eqLogic[data-eqLogic_uid=eqLogic213____2092701312____] .refresh').on('click', function () {
				jeedom.cmd.execute({id: '2091'});
			});
		}else{
			$('.eqLogic[data-eqLogic_uid=eqLogic213____2092701312____] .refresh').remove();
		}
	</script>
</div>

rendu

Screenshot_20170313_114445.png (8.77 Kio) Consulté 1537 fois