(RESOLU)Couleur mode actif

[Naboleo]

Merci, j'ai pigé le truc

pizza4saisons.PNG (6.66 Kio) Consulté 2768 fois

J'en suis donc arrivé là :

Code : Tout sélectionner

<div style="min-width:90px;min-height:60px;" class="cmd #history# tooltips cmd-widget" data-type="info" data-subtype="numeric" 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="font-size: 2em;font-weight: bold;margin-top: 5px;" class="state"></span><br/>
		<span style="color: #666666;font-weight: bold;">#unite#</span>
	</center>
	<script>
      jeedom.cmd.update['#id#'] = function(_options){
        var val = _options.display_value;
		var saisons = ['Printemps','Eté','Automne','Hiver'];
		saisons.forEach(function(saison) {
			$('.cmd[data-cmd_id=#id#]').closest('.eqLogic-widget').find('a.btn.btn-sm.btn-default.action.cmdName[title='+saison+']').empty().html('<span><img src="plugins/widget/core/images/'+saison+'-nb.png" width=30 height=30/></span>');
        });
        $('.cmd[data-cmd_id=#id#]').closest('.eqLogic-widget').find('a.btn.btn-sm.btn-default.action.cmdName[title="'+val+'"]').empty().html('<span><img src="plugins/widget/core/images/'+val+'-couleur.png" width=30 height=30/></span>');
        $('.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);
        $('.cmd[data-cmd_id=#id#]').hide();

      };
      jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
	</script>
</div>

Afin de le rendre plus générique, je pense que je traiterai le tableau sous forme de paramètre optionnel dans les widgets. A moins qu'il y ai une meilleure façon de faire ?

[winhex]

oui tu as tous compris

tu recherches le nom de toutes tes actions (je voulais le testé je savais la chose faisable)
et vu que je te sent prendre le relai

Code : Tout sélectionner

 var test = $('.cmd[data-cmd_id=#id#]').closest('.eqLogic-widget').find('a.btn.btn-sm.btn-default.action.cmdName').text();
alert(test)

ça ne marche qu'a la lecture avant l'update (normal c'est le "name_display" qu'on efface via empty mais pour que tu comprenes
de là

puisque tu veux tous les noms d'actions on va cherché le popup "title" et là avant ou dans l'update (selon ton besoin)

Code : Tout sélectionner

      var textInput = $('.cmd[data-cmd_id=#id#]').closest('.eqLogic-widget').find('a.btn.btn-sm.btn-default.action.cmdName').map(function(_,el){
        return $(el).attr('title')}).get();
alert(textInput);

action1,action2,Retour mode précedent

et puisqu'on y est les #id#

Code : Tout sélectionner

      var textInput = $('.cmd[data-cmd_id=#id#]').closest('.eqLogic-widget').find('span[data-cmd_uid]').map(function(_,el){
        return $(el).data('cmd_id')}).get();
alert(textInput)

2939,2940,2933

j'arrête tu as tous pour une façon plus générique (tableau)
recherche d'image par nom et mise en place par id

tu mets 2939 à la place #id#

Code : Tout sélectionner

$('.cmd[data-cmd_id=#id# .btn]' ).empty().html('<span><img src="plugins/widget/core/images/'+val+'-couleur.png" width=30 height=30/></span>');

[Naboleo]

ça marche du tonnerre (avec le nom) ! Merci beaucoup !
De ce fait j'ai cumulé couleur de fond et image pour m'amuser....

Code : Tout sélectionner

<div style="min-width:90px;min-height:60px;" class="cmd #history# tooltips cmd-widget" data-type="info" data-subtype="numeric" 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="font-size: 2em;font-weight: bold;margin-top: 0px;margin-bottom: 0px;" class="state"></span><br/>
		<span style="color: #666666;font-weight: bold;">#unite#</span>
	</center>
	<script>
      jeedom.cmd.update['#id#'] = function(_options){
        var val = _options.display_value;
		
		var modes = $('.cmd[data-cmd_id=#id#]').closest('.eqLogic-widget').find('a.btn.btn-sm.btn-default.action.cmdName').map(function(_,el){return $(el).attr('title')}).get();
		modes.forEach(function(mode) {
			var item=$('.cmd[data-cmd_id=#id#]').closest('.eqLogic-widget').find('a.btn.btn-sm.btn-default.action.cmdName[title='+mode+']');
            item.empty().html('<span><img src="plugins/widget/core/images/'+mode+'-nb.png" width=30 height=30/></span>');
            item.css('background-color', '#cmdColor#');
        });
        
        //var modes = $('.cmd[data-cmd_id=#id#]').closest('.eqLogic-widget').find('span[data-cmd_uid]').map(function(_,el){return $(el).data('cmd_id')}).get();
		//alert(textInput);
		//$('.cmd[data-cmd_id=#id# .btn]').empty().html('<span><img src="plugins/widget/core/images/'+val+'-couleur.png" width=30 height=30/></span>');


        var item=$('.cmd[data-cmd_id=#id#]').closest('.eqLogic-widget').find('a.btn.btn-sm.btn-default.action.cmdName[title="'+val+'"]');
        item.empty().html('<span><img src="plugins/widget/core/images/'+val+'-couleur.png" width=30 height=30/></span>');
       	item.css('background-color', '#activecolor#');
        $('.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);
        $('.cmd[data-cmd_id=#id#]').hide();

      };
      jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
	</script>
</div>

Il faut que je regarde plus en détails pour le changement avec l'ID. Si j'ai bien compris, l'avantage c'est que j'ai pas besoin de repasser par un find() (donc meilleurs perfs) pour modifier l'image, d'un autre coté, ça veut dire qu'il faut nommer les images avec l'ID également (et là c'est moins parlant surtout dans 1 mois)...
En bidouillant "map(function(", il doit y a voir moyen de retourner un tableau du genre [id,nom] mais on "perds" à nouveau en perfs probablement

En tout cas, c'est top

[winhex]

pour l'id je laisse place à l'imagination mais rapidement

peut on cacher l"id "bouton" ? oui
peut on executer avec l'id ? oui

donc reconstruire un mode avec un imput list, un widget personnalisé

sans imagination
si state = lumière
1357 lumière on
sinon 1357 lumière off

tu gardes variable name et id
si tu mets ta recherches de tittle et id dans l'update
chaque changement va recherché
si tu le met avant (vu que ça change pas)
tu n'auras pas à recherche tittle et id

la perte de perf c'est minim et ça ne touche pas jeedom (le navigateur qui travaille)

prend ton dashboard comme un page d'un livre F12
dans cette page cherche les caractères gras, souligné, nos navigateurs actuel en font bien plus.

[Naboleo]

Ok, je vois bien le truc . Je garde l'idée et le code sous le coude

Dans le même genre d'idée, j'ai eu envie de faire un toggle avec un de mes modes (2 états + retour)...Si on n'affiche que le retour c'est un toggle

J'ai donc fait ça

Code : Tout sélectionner

	<script>
      jeedom.cmd.update['#id#'] = function(_options){
        var val = _options.display_value;
        var modepre='Retour mode précedent';
        
		var modes = $('.cmd[data-cmd_id=#id#]').closest('.eqLogic-widget').find('a.btn.btn-sm.btn-default.action.cmdName').map(function(_,el){return $(el).attr('title')}).get();
        alert('mode '+modes);
		modes.forEach(function(mode) {
            var item=$('.cmd[data-cmd_id=#id#]').closest('.eqLogic-widget').find('	<script>
      jeedom.cmd.update['#id#'] = function(_options){
        var val = _options.display_value;
        var modepre='Retour mode précedent';
        
		var modes = $('.cmd[data-cmd_id=#id#]').closest('.eqLogic-widget').find('a.btn.btn-sm.btn-default.action.cmdName').map(function(_,el){return $(el).attr('title')}).get();
        alert('mode '+modes);
		modes.forEach(function(mode) {
            var item=$('.cmd[data-cmd_id=#id#]').closest('.eqLogic-widget').find('a.btn.btn-sm.btn-default.action.cmdName[title='+mode+']');
			if(mode != modepre){
                alert(mode+' != '+modepre);
				item.hide();
            }else{
              	alert(mode+' == '+modepre);
                item.empty().html('<span><img src="plugins/widget/core/images/'+val+'.png" width=#width# height=#height#></span>');
                item.css('background-color', '#activecolor#');
            }
        });
      };
      jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
	</script>[title='+mode+']');
			if(mode != modepre){
                alert(mode+' != '+modepre);
				item.hide();
            }else{
              	alert(mode+' == '+modepre);
                item.empty().html('<span><img src="plugins/widget/core/images/'+val+'.png" width=#width# height=#height#></span>');
                item.css('background-color', '#activecolor#');
            }
        });
      };
      jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
	</script>

Dans la première popup j'ai bien mes 3 'tiltle' (ECSON,ECSOFF,Retour mode précedent)...
Dans la boucle fois, je vois passer ECSON et ECSOFF... Mais pas le retour, j'en conclue donc que le map()/find() ne s'applique pas de la même manière à celui-ci (d'ailleurs il est masqué dans le mode 4 saisons)....
Mais je ne vois pas trop la différence, il semble être du type "a.btn.btn-sm.btn-default.action.cmdName" contient bien un "title" avec le bon texte... Avec des espaces par contre
Une idée ?

[Naboleo]

Bon ben c'était bien les espaces qui perturbaient le script...
Voilà le code d'un toggle fonctionnel (variables width, height et activecolor à définir)

Code : Tout sélectionner

<div style="min-width:90px;min-height:60px;" class="cmd #history# tooltips cmd-widget" data-type="info" data-subtype="numeric" 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="font-size: 2em;font-weight: bold;margin-top: 5px;" class="state"></span><br/>
		<span style="color: #666666;font-weight: bold;">#unite#</span>
	</center>
	<script>
      jeedom.cmd.update['#id#'] = function(_options){
        var val = _options.display_value;
        var modepre='Retour mode précedent';
        
		var modes = $('.cmd[data-cmd_id=#id#]').closest('.eqLogic-widget').find('a.btn.btn-sm.btn-default.action.cmdName').map(function(_,el){return "'"+$(el).attr('title')+"'"}).get();
		modes.forEach(function(mode) {
            var item=$('.cmd[data-cmd_id=#id#]').closest('.eqLogic-widget').find('a.btn.btn-sm.btn-default.action.cmdName[title='+mode+']');
			if(mode !=  "'"+modepre+"'"){
				item.hide();
            }else{
                item.empty().html('<span><img src="plugins/widget/core/images/'+val+'.png" width=#width# height=#height#></span>');
                item.css('background-color', '#activecolor#');
            }
        });
      };
      jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
	</script>
</div>

[guims78]

tu vas dans la configuration avancé
bouton du haut

paramètre de [mode]
icône de droite

onglet code
activé la personnalisation et
coller le code
Screenshot_20190228-183242_Chrome.jpg
Screenshot_20190228-183308_Chrome.jpg

Hello, j'ai testé sur mon jeedom 3.3 tout frais, mais lorsque j'applique le code sur les paramètres de [mode], celui-ci ne s'affiche pas du tout.

[Naboleo]

Hello, j'ai testé sur mon jeedom 3.3 tout frais, mais lorsque j'applique le code sur les paramètres de [mode], celui-ci ne s'affiche pas du tout.

C'est voulu =>

Code : Tout sélectionner

$('.cmd[data-cmd_id=#id#]').hide();

Tu peux changer en mettant cette ligne en commentaire

Code : Tout sélectionner

//$('.cmd[data-cmd_id=#id#]').hide();

[winhex]

@Naboleo
chapeau l'artiste

[Naboleo]

@winhex, merci mais c'est toi qui a fait 99,9% du boulot

[guims78]

Hello, j'ai testé sur mon jeedom 3.3 tout frais, mais lorsque j'applique le code sur les paramètres de [mode], celui-ci ne s'affiche pas du tout.

C'est voulu =>

Code : Tout sélectionner

$('.cmd[data-cmd_id=#id#]').hide();

Tu peux changer en mettant cette ligne en commentaire

Code : Tout sélectionner

//$('.cmd[data-cmd_id=#id#]').hide();

Merci, mais en fait, je me suis mal exprimé.
En fait, la tuile qui est censée être active ne change pas de couleur.

[Naboleo]

Dommage ça ne marche plus avec la version jeedom 4.x ....