Ce Forum passera en lecture seule en janvier 2020
Image
Merci de vous rendre sur https://community.jeedom.com maintenant pour vos prochains postes ;)

(RESOLU)Couleur mode actif

Naboleo
Actif
Messages : 740
Inscription : 20 janv. 2017, 09:57

Re: (RESOLU)Couleur mode actif

Message par Naboleo » 03 avr. 2019, 23:19

Merci, j'ai pigé le truc
pizza4saisons.PNG
pizza4saisons.PNG (6.66 Kio) Consulté 520 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 ?
Pi4/4Go +SSD 32Go (Wifi et bluetooth actifs) + Clé USB Z-Wave Everspring + rfxcom (RTS) + Google Home
7 Danfoss LC-13
2 velux module DIO
7 volets RTS
3 Sonoff
IFTTT
Capteur porte, de présence, et prise intelligente...

winhex
Actif
Messages : 3781
Inscription : 23 janv. 2015, 01:41

Re: (RESOLU)Couleur mode actif

Message par winhex » 04 avr. 2019, 02:31

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
Actif
Messages : 740
Inscription : 20 janv. 2017, 09:57

Re: (RESOLU)Couleur mode actif

Message par Naboleo » 04 avr. 2019, 12:44

ç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
Pi4/4Go +SSD 32Go (Wifi et bluetooth actifs) + Clé USB Z-Wave Everspring + rfxcom (RTS) + Google Home
7 Danfoss LC-13
2 velux module DIO
7 volets RTS
3 Sonoff
IFTTT
Capteur porte, de présence, et prise intelligente...

winhex
Actif
Messages : 3781
Inscription : 23 janv. 2015, 01:41

Re: (RESOLU)Couleur mode actif

Message par winhex » 04 avr. 2019, 16:19

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
Actif
Messages : 740
Inscription : 20 janv. 2017, 09:57

Re: (RESOLU)Couleur mode actif

Message par Naboleo » 04 avr. 2019, 16:40

;) 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 ?
Pi4/4Go +SSD 32Go (Wifi et bluetooth actifs) + Clé USB Z-Wave Everspring + rfxcom (RTS) + Google Home
7 Danfoss LC-13
2 velux module DIO
7 volets RTS
3 Sonoff
IFTTT
Capteur porte, de présence, et prise intelligente...

Naboleo
Actif
Messages : 740
Inscription : 20 janv. 2017, 09:57

Re: (RESOLU)Couleur mode actif

Message par Naboleo » 06 avr. 2019, 13:12

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>
Pièces jointes
toggle.png
toggle.png (6.98 Kio) Consulté 405 fois
Pi4/4Go +SSD 32Go (Wifi et bluetooth actifs) + Clé USB Z-Wave Everspring + rfxcom (RTS) + Google Home
7 Danfoss LC-13
2 velux module DIO
7 volets RTS
3 Sonoff
IFTTT
Capteur porte, de présence, et prise intelligente...

guims78
Actif
Messages : 504
Inscription : 30 sept. 2017, 13:00

Re: Couleur mode actif

Message par guims78 » 06 avr. 2019, 16:51

winhex a écrit :
28 févr. 2019, 18:35
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
Actif
Messages : 740
Inscription : 20 janv. 2017, 09:57

Re: Couleur mode actif

Message par Naboleo » 06 avr. 2019, 18:01

guims78 a écrit :
06 avr. 2019, 16:51
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();
Pi4/4Go +SSD 32Go (Wifi et bluetooth actifs) + Clé USB Z-Wave Everspring + rfxcom (RTS) + Google Home
7 Danfoss LC-13
2 velux module DIO
7 volets RTS
3 Sonoff
IFTTT
Capteur porte, de présence, et prise intelligente...

winhex
Actif
Messages : 3781
Inscription : 23 janv. 2015, 01:41

Re: (RESOLU)Couleur mode actif

Message par winhex » 06 avr. 2019, 18:57

@Naboleo
chapeau l'artiste

Naboleo
Actif
Messages : 740
Inscription : 20 janv. 2017, 09:57

Re: (RESOLU)Couleur mode actif

Message par Naboleo » 06 avr. 2019, 20:59

@winhex, merci mais c'est toi qui a fait 99,9% du boulot
Pi4/4Go +SSD 32Go (Wifi et bluetooth actifs) + Clé USB Z-Wave Everspring + rfxcom (RTS) + Google Home
7 Danfoss LC-13
2 velux module DIO
7 volets RTS
3 Sonoff
IFTTT
Capteur porte, de présence, et prise intelligente...

guims78
Actif
Messages : 504
Inscription : 30 sept. 2017, 13:00

Re: Couleur mode actif

Message par guims78 » 06 avr. 2019, 22:13

Naboleo a écrit :
06 avr. 2019, 18:01
guims78 a écrit :
06 avr. 2019, 16:51
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
Actif
Messages : 740
Inscription : 20 janv. 2017, 09:57

Re: (RESOLU)Couleur mode actif

Message par Naboleo » 27 mai 2019, 11:21

Dommage ça ne marche plus avec la version jeedom 4.x ....
Pi4/4Go +SSD 32Go (Wifi et bluetooth actifs) + Clé USB Z-Wave Everspring + rfxcom (RTS) + Google Home
7 Danfoss LC-13
2 velux module DIO
7 volets RTS
3 Sonoff
IFTTT
Capteur porte, de présence, et prise intelligente...

Répondre

Revenir vers « [Plugin Officiel] Mode »

Qui est en ligne ?

Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 5 invités