Ma solution pour un bouton 3 états (et +) dans le Dashboard

Bonjour à tous,

Je suis toujours en mode questionner, jamais en mode solution dans la communauté.

Aujourd’hui fera exception. J’ai trouvé une façon d’avoir, visuellement parlant, un bouton qui passe par 3 états à chaque fois que l’on clique dessus. Et je suis dans le Dashboard! :grin:

À noter d’ailleurs, que ma méthode peut être étendue à autant d’états que vous voulez. Mais le côté lourdingue de ma solution n’en sera que plus évident.

Bon ok. J’en ai un peu honte car elle est quasiment hérétique. Mais aux grands maux les grands remèdes.

Alors voilà. À chercher dans les sujets, j’ai vu que c’était une frustration récurrente qu’un bouton action soit limité à deux états alors qu’une info peut être multi états. Grrrrrrr. Oui @Salvialf avait une approche intéressante en partant du curseur. Mais je n’y trouvais pas vraiment mon compte … ou je n’ai pas vu.

Alors, on y va, c’est parti ! :
-1- Voici mes 3 boutons qui serons utilisés dans un virtuel:

Poussoir_Off Poussoir_ON_Brille Poussoir_Mode_On_Manuel

Pour votre info:

  • le 1er empêche l’exécution de tous les scénarios liés.
  • le 2ième, ils peuvent s’exécuter. Donc mode auto.
  • le 3ième, Je by pass les automatismes pour qu’une pompe continue de fonctionner malgré tout. Donc l’équivalent d’un mode manuel.

Dans mon virtuel j’ai même un bouton qui est comme un disjoncteur général qui me permet de tout désactiver pour l’hiver. Alors mon bouton deviendra:

Poussoir_Mode_Inactif

C’est là que les pros ne vont pas m’aimer :scream:

-2- Créer autant de widgets action que de boutons :woozy_face:

Comme vous pouvez le noter:

  • Le nom du widget est incrémenté. Ici il s’appelle Bouton 4 états_1. Donc vous vous doutez qu’il existe le …_2 et le …_3. Pour vous y retrouver, respectez l’ordre séquentiel d’apparition.
  • Oui, vous ne rêvez pas, j’ai mis la même image pour le ON et le OFF parce qu’on exploitera pas l’état du bouton. En revanche JS vous dira merci de ne pas laisser une des lignes vide.

-3- Voyons du côté du virtuel que j’ai fait pour l’exemple:


Très simple !

  • Autant de commandes action que de boutons.
  • Vous associez à chaque un des widgets créé précédemment.
  • Vous ajoutez une commande info qui ne doit pas être visible (dans mon cas aucun intérêt). Elle sera de type numérique.
  • Comme vous le remarquez, chaque action lui enverra l’index associé (1, 2, 3). C’est ce qui servira dans les scénarios que vous créerez puisqu’on a scrapé le concept de ON / OFF.
    À votre choix, vous ne laissez qu’une seule commande action visible.

-4- Faire un scénario très très très compliqué ! :rofl:

  • Créez un nouveau scénario
  • Donnez lui un nom générique (vous comprendez après), genre Gest_État_Boutons par exemple. Je pense même que je vais me le déplacer dans une catégorie genre Outils dans les scénarios.
  • Pas besoin de déclencheur.
  • Creez un bloc code et collez ceci (Un gros merci à la collaboration de ChatGPT pour le code :slightly_smiling_face:):

Code bouton multi état.txt (1,4 Ko)

  • Vous pouvez sauvegarder le scénario, c’est fini.

-5- Retourner dans le virtuel et compléter les commandes action:

  • Avant de commencer, notez les ID de vos actions en respectant l’ordre chronologique d’apparition.
  • Pour chaque commande faite exactement ceci. Il n’y a rien à adapter d’une commande à l’autre:
    • Ouvrir la configuration;
    • Allez dans l’onglet configuration
    • À Action après exécution de la commande, ajouter une action
    • tapez scénario
    • allez chercher le scénario des boutons.
    • Associez l’action Démarrer
    • Dans Tags, ajoutez cela en remplaçant mes IDs par les vôtres: ID1=3758 ID2=3761 ID3=3762

Maintenant vous comprenez pourquoi je vous disais de prendre un nom générique pour le scénario. Car vous pourrez l’appeler depuis d’autres virtuels qui auraient le même besoin. Vous avez juste à changer les IDs des tags à chaque fois.

C’est tout, c’est opérationnel! Amusez-vous bien !

2 « J'aime »

Bonjour,
Je ne suis pas arrivé à faire fonctionner ta solution (pas bien doué), mais j’ai aussi un ami artificiel (le même d’ailleurs), qui à permis d’arriver à une solution plus simple (sans scénario, un seul virtuel) en s’inspirant du 3-state-switch de Salvialf (merci au passage) :

Sur le même principe, il faut juste un virtuel tel que :

Créer un code widget tel que :
cmd.action.slider.3state_Push_v1.html.txt (2,0 Ko)

Ajouter les images du design BP dans Jeedom et remplacer le noms des images dans le code widget :
‹ data/img/VMC_Tempo.png ›,
‹ data/img/VMC_On_30.gif ›,
‹ data/img/VMC_On_60.gif ›

Associer le code widget à la commande action du virtuel (roue crantée)

Et voila, plus qu’à ajouter le virtuel dans le design.

1 « J'aime »

Oui j’allais répondre la même chose :slight_smile:

et un seul widget custom qui gère les états :
image

Tu utilises un code widget différent vu que t’as 3 commandes dans la virtuel ?
Ajoute le stp, ça peut intéresser des utilisateurs ;). Du coup, on pourrait regrouper dans un gros tuto les différentes commandes 2+n positions (slider, rotatif, push-push). Je peux regarder pour les standardiser avec des paramètres communs ect…Voir un faire un qui regroupe tout…

1 « J'aime »

Voici le code du widget que j’utilise

<div class="cmd cmd-widget cursor autoonoff #history#" data-type="action" data-subtype="other" data-template="badge" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#">
  <div class="title #hide_name#">
    <div  class="cmdName">#valueName#</div>
  </div>
 	<div class="autoonoffDivConteneur" >
		<span class="autoonoffAction"><br/><img class="autoonoffImg" style="width: 80px;" src="" /></span>
	</div>
    <style>
      	div.autoonoff.inline {
			display: block;
			min-width: 100%;
		  }
		div.autoonoffDivConteneur.inline {
			position: relative;
			min-height: 80px;
			margin: 5px;
		}
		span.autoonoffName {
			font-weight: bold;
			font-size : 12px;
		}
		span.autoonoffName.inline {
			position: absolute;
			left: 0px;
			top:40%;
		}
		span.autoonoffAction.inline {
			position: absolute;
			right: 0px;
		}
  </style>
	<script type="text/javascript">
      	jeedom.cmd.update['#id#'] = function(_options){
            $.include(['data/customTemplates/dashboard/cmd.action.other.Commutateur3/AutoOnOff.js'], function() {
                var widget = $('div.cmd[data-cmd_uid="#uid#"]');
              
                if ('#reverse#'.trim() == '1') {
                    var sens = ['off','auto','on'];
                } else {
                    var sens = ['on','off','auto'];
                }
                if ('#nospace#'.trim() == '1') { $('span.autoonoffAction br', widget).remove(); }
                if ('#inline#'.trim() == '1') { autoonoffInline(widget); }
              
                if (autoonoffNormalize(_options.display_value.toString()) == 'auto') {
                    $('.autoonoffImg', widget).attr('src','data/customTemplates/dashboard/cmd.action.other.Commutateur3/AutoOnOffCommut_AUTO.png');
                    if (autoonoffNormalize('#name#') == 'auto' || autoonoffNormalize('#name#') == sens[0]) {
                        widget.hide();
                    } else {
                      	widget.show();
                    }
                } else if (autoonoffNormalize(_options.display_value.toString()) == 'on') {
                    $('.autoonoffImg', widget).attr('src','data/customTemplates/dashboard/cmd.action.other.Commutateur3/AutoOnOffCommut_ON.png');
                    if (autoonoffNormalize('#name#') == 'on' || autoonoffNormalize('#name#') == sens[1]) {
                        widget.hide();
                    } else {
                     	widget.show(); 
                    }
                } else {
                    $('.autoonoffImg', widget).attr('src','data/customTemplates/dashboard/cmd.action.other.Commutateur3/AutoOnOffCommut_OFF.png');
                    if (autoonoffNormalize('#name#') == 'off' || autoonoffNormalize('#name#') == sens[2]) {
                        widget.hide();
                    } else {
                     	widget.show(); 
                    }
                }
            });
        }
        
        jeedom.cmd.update['#id#']({display_value:'#state#'});
        $('.cmd[data-cmd_uid=#uid#] .autoonoffAction').off().on('click', function () {
            jeedom.cmd.execute({id: '#id#'});
        });        
	</script>
</div>