Création d'un bouton 3 positions désign perso

Marcp30 · Décembre 18, 2025, 6:38

Bonjour

J’avais besoin de faire un bouton 3 positions sélectionnable pour gagner en place dans mes designs.
Design

1ere étape

1 j’ai créer un virtuel pour avoir des commandes état 0, 1, 2 qui correspond pour moi ici
Auto, Confort et Eco et qui vient synchronisé un scénario

2 j’ai créer un widget info pour les l’images des 3 positions du commutateurs (déformation professionnelle)

3 j’ai donc lié l’affichage du widget de l’état commande info du virtuel

2eme étape

1- Positionner l’équipement virtuel dans le design garder que l’état info visible
2- Ajouter du texte/html au design
3- copier/coller le code (n’oubliez pas de changer id de la commande action des 3
zones
4- S’assurer que la profondeur d’affichage soit sur niveau 1 pour l’équipement et niveau
2 pour le texte/html et que le cadre soit transparent.
5- Superposer et ajuster le cadre le texte/html sur l’équipement commutateur

Normalement vous avez 3 zones sectionnables, 1 à droite, 1 à gauche, et 1 en haut et
si vous voulez en reprenant le code vous pouvez créer une 4eme zone en bas et
même plus si vous capter bien le principe de la taille et positon des zones à sélectionner.

Ici mes images position commutateur à mettre dans la base image de votre jeedom
commut_auto
commut_conf
commut_eco

<div class="cmd cmd-widget" data-type="action" data-subtype="other" style="position: relative; width: 100%; height: 100%; overflow: hidden;">
  <!-- Image statique (à adapter selon ton besoin) à réactiver si le besoin tu en as en deplacant les -- et le > ici
  <img src="/data/img/Perso/commut_arret.png" style="width: 100%; height: 100%; object-fit: cover; display: block;" />
  -->

  <!-- Zone cliquable en haut (action id 7947) -->
  <div style="position: absolute; top: 0; left: 0; width: 100%; height: 30%; cursor: pointer; z-index: 10;"
       onclick="jeedom.cmd.execute({id: 7826});"></div> <!-- remplacer id_action par celui de la commande action voulue -->

  <!-- Zone cliquable à gauche (action id 7948) -->
  <div style="position: absolute; top: 30%; left: 0; width: 50%; height: 70%; cursor: pointer; z-index: 10;"
       onclick="jeedom.cmd.execute({id: 7832});"></div> <!-- remplacer id_action par celui de la commande action voulue -->

  <!-- Zone cliquable à droite (action id 7946) -->
  <div style="position: absolute; top: 30%; right: 0; width: 50%; height: 70%; cursor: pointer; z-index: 10;"
       onclick="jeedom.cmd.execute({id: 7827});"></div> <!-- remplacer id_action par celui de la commande action voulue -->
</div>

Et ici si la commande est égale à 1 alors j’actionne etc… pour 0 et 2