Changer couleur après une action

[christo45]

bonjour,
je cherche à faire un widget, sous Jeedom V4.0.61, pour changer la couleur de fond d’un bouton de pilotage de chauffage, quand celui ci est actif.
Je suis tombé sur ce post Mode actif changement couleur background
, mais il n’est pas finit.
pourriez-vous m’aider ?

[olive]

Comme dab pas de version de jeedom …

La solution passe par la lecture de ce-ci

(la manipulation de widget n’est pas la même en V3 ou en V4)

[Mips]

Bonjour,
Il n’y a pas de possibilité de changer la couleur d’un bouton de base.
Il faut passer par des images différentes en fonction de l’état par exemple.

[Clem.Lep]

Salut, pour mon cas j’ai utilisé le widget Icon Action de @Salvialf avec une image perso (les boutons) .
Après pour avoir plusieurs « modes » j’ai un scenario qui active/désactive mon virtuel pour le widget

[kaktusatomik]

Bonjour,

J’ai fait ça pour le plugin thermostat :

Voici la procédure :

1. Créer un widget perso

<div class="cmd cmd-widget reportModeHidden" data-type="action" data-subtype="other" data-template="default" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#">
  <div class="content-xs">
    <a class="btn btn-sm btn-default action tooltips">#name_display#</a>
  </div>
  <script>   
    $('.cmd[data-cmd_uid=#uid#]:last .action').off('click').on('click', function () {
      jeedom.cmd.execute({id: '#id#', success: function(){
      	custom#id#();
      }});
    });
    if ($('.cmd[data-cmd_uid=#uid#]').last().prev().data('subtype') != undefined && $('.cmd[data-cmd_id=#id#]').last().prev().data('subtype') != 'other'
    && $('.cmd[data-cmd_uid=#uid#]').last().prev().css('display') != 'block') {
      $('.cmd[data-cmd_uid=#uid#]').last().prepend('<br/>');
    }
    if("#name#" != '#name_display#'){
      $('.cmd[data-cmd_uid=#uid#]:last .action').attr('title',"#name#")
    }    
    
    function custom#id#(){
      jeedom.cmd.execute({id:'#mode#', success: function(result){    
        if(result == "#name#"){
         $('.cmd[data-eqLogic_id=#eqLogic_id#] .action').removeClass('thermostat-current-mode');
          $('.cmd[data-cmd_uid=#uid#]:last .action').addClass('thermostat-current-mode');
        }
      }});
    }
    custom#id#();
  </script>
</div>

2. Appliquer ce widget à chaque « mode »
   

   
   
   Et ajouter un paramètre « mode » qui correspond à l’id de la commande mode du thermostat
   

3. Ajouter du CSS dans la personnalisation avancée

.eqLogic.eqLogic-widget .btn.thermostat-current-mode, #div_displayObject .btn.thermostat-current-mode{
  background-color: var(--al-success-color) !important;
  color: var(--sc-lightTxt-color) !important
}		

[christo45]

Bonsoir,

Clem.Lep
j’ai essayé avec IconAction mais tous les boutons changent de couleur, pas uniquement celui cliqué.
Je n’ai pas réussi à faire le scénario … tu peux poster une image de ton scénario stp ?

kaktusatomik
çà marche bien mais l’état du bouton ne change pas lorsque l’info est modifiée sans appuyer sur le bouton (via un autre poste ou mobile) !

[kaktusatomik]

Salut,

Tu peux modifier le widget comme ceci :

<div class="cmd cmd-widget reportModeHidden" data-type="action" data-subtype="other" data-template="default" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#">
  <div class="content-xs">
    <a class="btn btn-sm btn-default action tooltips">#name_display#</a>
  </div>
  <script>   
    $('.cmd[data-cmd_uid=#uid#]:last .action').off('click').on('click', function () {
      jeedom.cmd.execute({id: '#id#', success: function(){
      	custom#id#();
      }});
    });
    if ($('.cmd[data-cmd_uid=#uid#]').last().prev().data('subtype') != undefined && $('.cmd[data-cmd_id=#id#]').last().prev().data('subtype') != 'other'
    && $('.cmd[data-cmd_uid=#uid#]').last().prev().css('display') != 'block') {
      $('.cmd[data-cmd_uid=#uid#]').last().prepend('<br/>');
    }
    if("#name#" != '#name_display#'){
      $('.cmd[data-cmd_uid=#uid#]:last .action').attr('title',"#name#")
    }    
    $('body').on('cmd::update',function(_event,_options){
      for(var i in _options){
        if(_options[i].cmd_id==#mode#){
    		custom#id#();
        }
      }
    });
    function custom#id#(){
      jeedom.cmd.execute({id:'#mode#', success: function(result){    
        if(result == "#name#"){
         $('.cmd[data-eqLogic_id=#eqLogic_id#] .action').removeClass('thermostat-current-mode');
          $('.cmd[data-cmd_uid=#uid#]:last .action').addClass('thermostat-current-mode');
        }
      }});
    }
    custom#id#();
  </script>
</div>
    

Penses à sauvegarder ton thermostat après la modification du widget pour qu’il soit pris en compte.

Bonne journée.

[christo45]

Bonjour kaktusatomik,
je n’arrive pas à faire fonctionner ton dernier script
j’ai essayé de debug mais je ne suis pas assez calé en javaScript !

je pense qu’il faut se baser sur le retour de « info » mais je ne sais pas comment faire…
je n’utilise pas le plugin thermostat, c’est juste un virtuel avec 1 info et 4 actions

[christo45]

Bonjour Clem.Lep,
tu pourrais me faire une copie d’écran de ton scénario, stp ?
j’ai essayé avec IconAction mais tous les boutons changent de couleur, pas uniquement celui cliqué.
merci

[kaktusatomik]

Bonjour,
Pour que mon exemple fonctionne, il faut que le nom et la valeur soient identiques.
Ici ça doit fonctionner avec Eco et Confort.
Tu applique le widget fournit à toutes les commandes action en ajoutant le paramètre optionnel widget « mode » qui a pour valeur 266.
Pour que ça fonctionne avec Hors Gel, il faudrait remplacer la valeur HorsGel par « Hors Gel » et le Stop par « Arrêt »

[christo45]

Super merci Kaktusatomik, çà fonctionne enfin !

Je n’avais pas fait attention à l’id du paramètre ‹ mode › qui correspond à l’état !
J’avais mis l’id de la commande d’action !

Bonne soirée

[kaktusatomik]

Super, penses à cocher la solution pour les prochains