Créer un bouton combinant un output et un input différent

Bonjour,

Je me permets de vous contacter, car après pas mal de recherche je n’arrive pas à trouver une solution au problème suivant;

Mon objectif est de domotiser les lumières chez moi via home assistant. La maison est équipée d’un système électrique domotique rudimentaire. C’est-à-dire que je peux contrôler n’importe quel éclairage à partir de n’importe quel interrupteur. Mais par contre, je ne peux pas récupérer les informations ou contrôle les interrupteurs à distance directement via ce système.
Pour arriver à mon objectif, j’ai créé deux circuits séparés à base d’ESP32 pour (1) contrôler l’éclairage et (2) récupéré l’état de la lumière. Ces deux circuits fonctionnent très bien et j’arrive à contrôler via home assistant les lumières et à avoir le statut allumé ou éteint de ces même lumières.

Mon problème est que j’aimerais combiner dans Home Assistant ces deux éléments sur un seul bouton. J’aimerais qu’en appuyant sur ce bouton je puisse allumer ou éteindre une lumière et en même temps que ce même bouton reprenne l’état de la lumière (allumé ou éteint).
J’ai cherché après des solutions du côté des templates mais je ne suis pas certain de chercher dans la bonne direction.

Pourriez vous m’indiquer dans quelle direction je dois chercher ?

je vous remercie d’avance

Salut,

j’ai fait ça pour ma porte de garage, l’icone du bouton change en fonction de l’état d’un capteur :

Quelques pistes ici:

Les solutions proposées par @WarC0zes et moi sont tout à fait adaptées à ton cas.

Attention les solutions les plus simples comme la carte button classique et la carte tuile ne marcherons pas directement car il faut aller chercher l’état sur une autre entité.
Mais les mushroom template ou custom-button card via HACS permettent de faire ce que tu veux en dissociant l’affichage de l’effet des appuis.

En revanche, les solutions simples comme la carte button ou les tuiles fonctionnerons si tu réalise la manip donnée par @nZAngel car de ce fait tu aura « customisé » l’icone directement au niveau de l’entité et pas juste dans une carte.

Merci beaucoup pour votre aide. :grinning:

Bonjour,

J’essaye depuis plusieurs jours de suivre vos conseils mais je n’arrive pas encore à la solution désirée.
J’ai donc installer custom-button card et créer un bouton.
Voici le code

type: custom:button-card
action:
  target:
    entity_id: switch.esphome_web_cef3ec_100ohm
name: LUMIERE
show_state: true
entity: sensor.test_sensorstemplate
state:
  - value: 'ON'
    color: yellow
    icon: mdi:ceiling-light
  - value: 'OFF'
    color: black
    icon: mdi:ceiling-light-outline

la couleur du bouton change bien en fonction de mon détecteur mais par contre lorsque je clique dessus mon switch ne fonctionne pas.
Avez vous une idée de comment corriger mon code ?

Je vous remercie d’avance
Julien

Je ne connais pas la button-card mais a mon avis dans la partie action il manque quelquechose.

Du code que je vois là tu lui dit bien d’agir sur switch.esphome_web_cef3ec_100ohm mais tu lui dit pas quoi faire.

1 « J'aime »

Il faut que tu mettes en entité ton switch et tu n’auras pas besoin de mettre une action.

Un exemple :
Prise éteinte :


Prise allumée :

type: custom:button-card
aspect_ratio: 2/1
custom_fields:
  fond:
    card:
      type: custom:button-card
      styles:
        card:
          - background-color: rgba(255,255,255,0.0)
          - border: none
      tap_action:
        action: none
      hold_action:
        action: none
  ncarte:
    card:
      type: custom:button-card
      name: Chambre sous-sol
      styles:
        name:
          - font-size: 1.4em
          - font-weight: bold
          - justify-self: start
          - color: rgba(0,0,0,0.6)
        card:
          - background-color: rgba(255,255,255,0.0)
          - border-radius: 0%
          - border: none
      tap_action:
        action: none
      hold_action:
        action: none
  temp_value:
    card:
      type: custom:button-card
      entity: sensor.chambre_sous_sol_thermometre_temperature
      show_name: false
      show_icon: false
      show_state: true
      tap_action: none
      styles:
        state:
          - font-size: 0.82em
          - font-weight: bold
          - color: dimgray
          - justify-self: end
          - padding-right: 3%
        card:
          - background-color: rgba(255,255,255,0.5)
  temp:
    card:
      type: custom:button-card
      aspect_ratio: 1/1
      show_name: false
      show_icon: false
      styles:
        card:
          - opacity: 1
          - background-image: url(/local/images/icones/temperature.png)
          - background-size: cover
          - background-position: center
          - background-color: rgba(0,0,0,0.0)
          - border: none
  hygro_value:
    card:
      type: custom:button-card
      entity: sensor.chambre_sous_sol_thermometre_humidity
      show_name: false
      show_icon: false
      show_state: true
      tap_action: none
      styles:
        state:
          - font-size: 0.82em
          - font-weight: bold
          - color: dimgray
          - justify-self: end
          - padding-right: 3%
        card:
          - background-color: rgba(255,255,255,0.5)
  hygro:
    card:
      type: custom:button-card
      aspect_ratio: 1/1
      show_name: false
      show_icon: false
      styles:
        card:
          - opacity: 1
          - background-image: url(/local/images/icones/hygrometrie.png)
          - background-size: cover
          - background-position: center
          - background-color: rgba(0,0,0,0.0)
          - border: none
  eclairage:
    card:
      type: custom:button-card
      name: 'Éclairage :'
      styles:
        name:
          - font-size: 1.0em
          - font-weight: bold
          - color: rgba(0,0,0,0.6)
          - justify-self: start
        card:
          - background-color: rgba(255,255,255,0.0)
          - border-radius: 0%
          - border: none
  nprincipal:
    card:
      type: custom:button-card
      name: Éclairage principal
      styles:
        name:
          - font-size: 0.7em
          - font-weight: bold
          - color: rgba(0,0,0,0.6)
        card:
          - background-color: rgba(255,255,255,0.0)
          - border-radius: 0%
          - border: none
      tap_action:
        action: none
      hold_action:
        action: none
  principal:
    card:
      type: custom:button-card
      size: 80%
      entity: light.chambre_sous_sol_interrupteur_principal_lumiere
      icon: phu:bulb-group-ceiling-square
      show_name: false
      state:
        - value: 'off'
          styles:
            icon:
              - color: dimgray
            card:
              - box-shadow: none
              - border-radius: 50%
              - background-color: rgba(242,242,242,0.7)
              - width: 48px
              - height: 48px
        - value: 'on'
          styles:
            icon:
              - color: rgb(255,255,128)
            card:
              - border-radius: 50%
              - box-shadow: 0px 0px 6px 3px rgba(255,255,128,0.8)
              - background-color: rgba(0,0,0,0.5)
              - width: 48px
              - height: 48px
  nchevetgauche:
    card:
      type: custom:button-card
      name: Chevet<br/>gauche
      styles:
        name:
          - font-size: 0.7em
          - font-weight: bold
          - color: rgba(0,0,0,0.6)
        card:
          - background-color: rgba(255,255,255,0.0)
          - border-radius: 0%
          - border: none
      tap_action:
        action: none
      hold_action:
        action: none
  chevetgauche:
    card:
      type: custom:button-card
      size: 90%
      entity: light.chambre_sous_sol_interrupteur_principal_lumiere_2
      icon: phu:centura-round
      show_name: false
      state:
        - value: 'off'
          styles:
            icon:
              - color: dimgray
            card:
              - box-shadow: none
              - border-radius: 50%
              - background-color: rgba(242,242,242,0.7)
              - width: 48px
              - height: 48px
        - value: 'on'
          styles:
            icon:
              - color: rgb(255,255,128)
            card:
              - border-radius: 50%
              - box-shadow: 0px 0px 6px 3px rgba(255,255,128,0.8)
              - background-color: rgba(0,0,0,0.5)
              - width: 48px
              - height: 48px
  nchevetdroit:
    card:
      type: custom:button-card
      name: Chevet<br/>droit
      styles:
        name:
          - font-size: 0.7em
          - font-weight: bold
          - color: rgba(0,0,0,0.6)
        card:
          - background-color: rgba(255,255,255,0.0)
          - border-radius: 0%
          - border: none
      tap_action:
        action: none
      hold_action:
        action: none
  chevetdroit:
    card:
      type: custom:button-card
      size: 90%
      entity: light.chambre_sous_sol_interrupteur_principal_lumiere_2
      icon: phu:centura-round
      show_name: false
      state:
        - value: 'off'
          styles:
            icon:
              - color: dimgray
            card:
              - box-shadow: none
              - border-radius: 50%
              - background-color: rgba(242,242,242,0.7)
              - width: 48px
              - height: 48px
        - value: 'on'
          styles:
            icon:
              - color: rgb(255,255,128)
            card:
              - border-radius: 50%
              - box-shadow: 0px 0px 6px 3px rgba(255,255,128,0.8)
              - background-color: rgba(0,0,0,0.5)
              - width: 48px
              - height: 48px
  nprise:
    card:
      type: custom:button-card
      name: Prise radiateur
      styles:
        name:
          - font-size: 0.7em
          - font-weight: bold
          - color: rgba(0,0,0,0.6)
        card:
          - background-color: rgba(255,255,255,0.0)
          - border-radius: 0%
          - border: none
      tap_action:
        action: none
      hold_action:
        action: none
  prise:
    card:
      type: custom:button-card
      size: 70%
      entity: switch.chambre_sous_sol_prise_principale
      show_name: false
      state:
        - value: 'off'
          icon: mdi:toggle-switch-variant-off
          styles:
            icon:
              - color: dimgray
            card:
              - box-shadow: none
              - border-radius: 50%
              - background-color: rgba(242,242,242,0.7)
              - width: 48px
              - height: 48px
        - value: 'on'
          icon: mdi:toggle-switch-variant
          styles:
            icon:
              - color: rgb(255,255,128)
            card:
              - border-radius: 50%
              - box-shadow: 0px 0px 6px 3px rgba(255,255,128,0.8)
              - background-color: rgba(0,0,0,0.5)
              - width: 48px
              - height: 48px
styles:
  custom_fields:
    fond:
      - background-image: url(/local/images/chambre_sous_sol.png)
      - position: absolute
      - left: 0
      - top: 0
      - width: 100%
      - height: 100%
      - background-size: cover
      - background-position: center
      - opacity: 0.7
    ncarte:
      - position: absolute
      - left: 10px
      - top: '-5px'
    eclairage:
      - position: absolute
      - left: 10%
      - top: 32%
    nprincipal:
      - position: absolute
      - left: 29.5%
      - top: 16%
    principal:
      - position: absolute
      - left: 36.5%
      - top: 27%
    nchevetgauche:
      - position: absolute
      - left: 58%
      - top: 9%
    chevetgauche:
      - position: absolute
      - left: 57%
      - top: 25%
    nchevetdroit:
      - position: absolute
      - left: 75%
      - top: 9%
    chevetdroit:
      - position: absolute
      - left: 74%
      - top: 25%
    nprise:
      - position: absolute
      - left: 70%
      - top: 60%
    prise:
      - position: absolute
      - left: 74%
      - top: 70%
    temp_value:
      - width: 19%
      - position: absolute
      - left: 13%
      - top: 56%
    temp:
      - width: 40px
      - height: 40px
      - position: absolute
      - left: 5%
      - top: 52%
    hygro_value:
      - width: 17%
      - position: absolute
      - left: 13%
      - top: 80%
    hygro:
      - width: 40px
      - height: 40px
      - position: absolute
      - left: 5%
      - top: 76%

La partie du code qui t’intéresse est celle-là :

  prise:
    card:
      type: custom:button-card
      size: 70%
      entity: switch.chambre_sous_sol_prise_principale
      show_name: false
      state:
        - value: 'off'
          icon: mdi:toggle-switch-variant-off
          styles:
            icon:
              - color: dimgray
            card:
              - box-shadow: none
              - border-radius: 50%
              - background-color: rgba(242,242,242,0.7)
              - width: 48px
              - height: 48px
        - value: 'on'
          icon: mdi:toggle-switch-variant
          styles:
            icon:
              - color: rgb(255,255,128)
            card:
              - border-radius: 50%
              - box-shadow: 0px 0px 6px 3px rgba(255,255,128,0.8)
              - background-color: rgba(0,0,0,0.5)
              - width: 48px
              - height: 48px
1 « J'aime »

Salut @Heos

En reprenant ton code, ça devrait être qqc comme ça :

type: custom:button-card
tap_action:
  action: call-service
  service: switch.toggle
  data:
    entity_id: switch.esphome_web_cef3ec_100ohm
name: LUMIERE
show_state: true
entity: sensor.test_sensorstemplate
state:
  - value: 'ON'
    color: yellow
    icon: mdi:ceiling-light
  - value: 'OFF'
    color: black
    icon: mdi:ceiling-light-outline

Bonjour @Herbs,

Il n’y a pas besoin de définir une action, celle ci est implicite avec une entité switch ou light (custom:button-card) :smiley:

Ouais, sauf que @Heos veut contrôler 1 switch et afficher l’état d’un sensor :wink:

L’info est dans son premier post :stuck_out_tongue:

Quelle idée saugrenue, il n’a qu’à mettre un custom_fields pour le sensor et un autre pour le switch :joy:

2 « J'aime »

Merci à tous pour votre aide. ça fonctionne parfaitement

Impec,

N’oublie pas de mettre « résolution », sur le message qui t’a aidé :wink:

1 « J'aime »