Aide pour personnaliser une card avec des boutons, similaire à une card entities avec des climate

[Gloup]

Mon problème

Bonjour
Titre pas forcément super clair, mais je ne vois pas trop comment tourner ma requète.
Avec les images ça devrait aller très bien !
En fait dans mon Dashboard j’ai une card entities pour mes 3 fils pilotes, ils sont gérés sur un « climate », et ça marche plutot bien et ça donne ça :

J’ai aussi 3 clims réversibles, qui sont pilotés par des télécommandes IR broadlink. Pour chacune d’entre elle, j’ai fait des scripts du genre ON Chauffage => Ordre ON, pause, Ordre 20°C Chaud…
J’ai ensuite pour chaque clim fait une card pile horizontale avec 3 boutons qui lancent les scripts OFF/CHAUD/FROID. Donc j’ai 3 fois ce genre de card :

Je ne suis pas super fan du rendu, et j’aurais bien voulu faire comme la carte des fils pilote avec mes 3 clims, et les 3 boutons en forme d’icone

J’ai cherché mais je ne trouve pas comment faire quelque chose de similaire, étant donné que la clim n’est pas une entity.

Si vous pouvez m’aiguiller svp ! Merci

Ma configuration

---

System Information

version	core-2023.10.3
installation_type	Home Assistant OS
dev	false
hassio	true
docker	true
user	root
virtualenv	false
python_version	3.11.5
os_name	Linux
os_version	6.1.56
arch	x86_64
timezone	Europe/Paris
config_dir	/config

Home Assistant Community Store

GitHub API	ok
GitHub Content	ok
GitHub Web	ok
GitHub API Calls Remaining	4990
Installed Version	1.33.0
Stage	running
Available Repositories	1322
Downloaded Repositories	20

Home Assistant Cloud

logged_in	false
can_reach_cert_server	ok
can_reach_cloud_auth	ok
can_reach_cloud	ok

Home Assistant Supervisor

host_os	Home Assistant OS 11.0
update_channel	stable
supervisor_version	supervisor-2023.10.0
agent_version	1.6.0
docker_version	24.0.6
disk_total	503.3 GB
disk_used	11.0 GB
healthy	true
supported	true
board	ova
supervisor_api	ok
version_api	ok
installed_addons	Studio Code Server (5.12.0), File editor (5.6.0), Terminal & SSH (9.7.1), Let’s Encrypt (4.12.9), NGINX Home Assistant SSL proxy (3.5.0), Node-RED (14.6.2)

Dashboards

dashboards	2
resources	11
views	16
mode	storage

Recorder

oldest_recorder_run	10 octobre 2023 à 10:49
current_recorder_run	14 octobre 2023 à 19:14
estimated_db_size	187.32 MiB
database_engine	sqlite
database_version	3.41.2

___

[WarC0zes]

@Gloup

J’ai aussi 3 clims réversibles, qui sont pilotés par des télécommandes IR broadlink. Pour chacune d’entre elle, j’ai fait des scripts du genre ON Chauffage => Ordre ON, pause, Ordre 20°C Chaud…
J’ai ensuite pour chaque clim fait une card pile horizontale avec 3 boutons qui lancent les scripts OFF/CHAUD/FROID.

Bonjour,
avec multiple-entity-row, tu peu faire ca.
tu peu faire une ligne avec des icones et avec un tap_action tu appel les scripts.

exemple de la capture:

type: entities
entities:
  - entity: light.living_room
    type: custom:multiple-entity-row
    name: Icons with tap_action
    secondary_info: last-changed
    entities:
      - entity: light.living_room
        icon: mdi:palette
      - icon: mdi:lightbulb-off-outline
        state_color: true
        tap_action:
          action: call-service
          service: light.turn_off
          service_data:
            entity_id: light.living_room
      - icon: mdi:lightbulb-outline
        state_color: true
        tap_action:
          action: call-service
          service: light.turn_on
          service_data:
            entity_id: light.living_room
          confirmation:
            text: 'Are you sure?'

[anon41081891]

Et sinon (j’ai toujours la même réponse) : button-card…

type: custom:mod-card
card:
  type: custom:layout-card
  layout_type: vertical
  cards:
    - type: custom:button-card
      aspect_ratio: 1/1
      custom_fields:
        fond:
          card:
            type: custom:button-card
            styles:
              card:
                - background-color: rgba(255,255,255,0.0)
            tap_action:
              action: none
            hold_action:
              action: none
            style: |
              ha-card {
                box-shadow: none;
                border: none;
              }
        rad:
          card:
            type: custom:button-card
            name: Chauffage électrique
            styles:
              name:
                - font-size: 1.6em
                - font-weight: bold
                - justify-self: start
                - color: rgba(0,0,0,0.6)
              card:
                - background-color: rgba(255,255,255,0.0)
            tap_action:
              action: none
            hold_action:
              action: none
            style: |
              ha-card {
                box-shadow: none;
                border: none;
              }
        radsdb:
          card:
            type: custom:button-card
            name: 'Radiateur SdB bas :'
            styles:
              name:
                - font-size: 0.9em
                - font-weight: bold
                - color: rgba(0,0,0,0.6)
                - justify-self: start
              card:
                - background-color: rgba(255,255,255,0.0)
            style: |
              ha-card {
                box-shadow: none;
                border: none;
              }
        power_radsdb:
          card:
            type: custom:button-card
            size: 80%
            icon: mdi:power
            show_name: false
            styles:
              icon:
                - color: red
              card:
                - box-shadow: none
                - border-radius: 50%
                - background-color: rgba(255,255,255,1.0)
                - width: 36px
                - height: 36px
            tap_action:
              action: call-service
              service: ' '
            style: |
              ha-card {
                box-shadow: none;
                border: none;
              }
        leaf_radsdb:
          card:
            type: custom:button-card
            size: 80%
            icon: mdi:leaf
            show_name: false
            styles:
              icon:
                - color: dimgray
              card:
                - box-shadow: none
                - border-radius: 50%
                - background-color: rgba(255,255,255,1.0)
                - width: 36px
                - height: 36px
            tap_action:
              action: call-service
              service: ' '
            style: |
              ha-card {
                box-shadow: none;
                border: none;
              }
        snow_radsdb:
          card:
            type: custom:button-card
            size: 70%
            icon: mdi:snowflake
            show_name: false
            styles:
              icon:
                - color: dimgray
              card:
                - box-shadow: none
                - border-radius: 50%
                - background-color: rgba(255,255,255,1.0)
                - width: 36px
                - height: 36px
            tap_action:
              action: call-service
              service: ' '
            style: |
              ha-card {
                box-shadow: none;
                border: none;
              }
        sun_radsdb:
          card:
            type: custom:button-card
            size: 70%
            icon: mdi:weather-sunny
            show_name: false
            styles:
              icon:
                - color: dimgray
              card:
                - box-shadow: none
                - border-radius: 50%
                - background-color: rgba(255,255,255,1.0)
                - width: 38px
                - height: 38px
            tap_action:
              action: call-service
              service: ' '
            style: |
              ha-card {
                box-shadow: none;
                border: none;
              }
        radgael_pri:
          card:
            type: custom:button-card
            name: 'Radiateur Ch Gael principal :'
            styles:
              name:
                - font-size: 0.9em
                - font-weight: bold
                - color: rgba(0,0,0,0.6)
                - justify-self: start
              card:
                - background-color: rgba(255,255,255,0.0)
            style: |
              ha-card {
                box-shadow: none;
                border: none;
              }
        power_gael_pri:
          card:
            type: custom:button-card
            size: 80%
            icon: mdi:power
            show_name: false
            styles:
              icon:
                - color: red
              card:
                - box-shadow: none
                - border-radius: 50%
                - background-color: rgba(255,255,255,1.0)
                - width: 36px
                - height: 36px
            tap_action:
              action: call-service
              service: ' '
            style: |
              ha-card {
                box-shadow: none;
                border: none;
              }
        leaf_gael_pri:
          card:
            type: custom:button-card
            size: 80%
            icon: mdi:leaf
            show_name: false
            styles:
              icon:
                - color: dimgray
              card:
                - box-shadow: none
                - border-radius: 50%
                - background-color: rgba(255,255,255,1.0)
                - width: 36px
                - height: 36px
            tap_action:
              action: call-service
              service: ' '
            style: |
              ha-card {
                box-shadow: none;
                border: none;
              }
        snow_gael_pri:
          card:
            type: custom:button-card
            size: 70%
            icon: mdi:snowflake
            show_name: false
            styles:
              icon:
                - color: dimgray
              card:
                - box-shadow: none
                - border-radius: 50%
                - background-color: rgba(255,255,255,1.0)
                - width: 36px
                - height: 36px
            tap_action:
              action: call-service
              service: ' '
            style: |
              ha-card {
                box-shadow: none;
                border: none;
              }
        sun_gael_pri:
          card:
            type: custom:button-card
            size: 70%
            icon: mdi:weather-sunny
            show_name: false
            styles:
              icon:
                - color: dimgray
              card:
                - box-shadow: none
                - border-radius: 50%
                - background-color: rgba(255,255,255,1.0)
                - width: 38px
                - height: 38px
            tap_action:
              action: call-service
              service: ' '
            style: |
              ha-card {
                box-shadow: none;
                border: none;
              }
        clim:
          card:
            type: custom:button-card
            name: Climatisations réversibles
            styles:
              name:
                - font-size: 1.6em
                - font-weight: bold
                - justify-self: start
                - color: rgba(0,0,0,0.6)
              card:
                - background-color: rgba(255,255,255,0.0)
            tap_action:
              action: none
            hold_action:
              action: none
            style: |
              ha-card {
                box-shadow: none;
                border: none;
              }
        clim_parent:
          card:
            type: custom:button-card
            name: 'Climatisation parents :'
            styles:
              name:
                - font-size: 0.9em
                - font-weight: bold
                - color: rgba(0,0,0,0.6)
                - justify-self: start
              card:
                - background-color: rgba(255,255,255,0.0)
            style: |
              ha-card {
                box-shadow: none;
                border: none;
              }
        power_clim_parent:
          card:
            type: custom:button-card
            size: 80%
            icon: mdi:power
            show_name: false
            styles:
              icon:
                - color: red
              card:
                - box-shadow: none
                - border-radius: 50%
                - background-color: rgba(255,255,255,1.0)
                - width: 36px
                - height: 36px
            tap_action:
              action: call-service
              service: ' '
            style: |
              ha-card {
                box-shadow: none;
                border: none;
              }
        froid_clim_parent:
          card:
            type: custom:button-card
            size: 70%
            icon: mdi:snowflake
            show_name: false
            styles:
              icon:
                - color: dimgray
              card:
                - box-shadow: none
                - border-radius: 50%
                - background-color: rgba(255,255,255,1.0)
                - width: 36px
                - height: 36px
            tap_action:
              action: call-service
              service: ' '
            style: |
              ha-card {
                box-shadow: none;
                border: none;
              }
        chaud_clim_parent:
          card:
            type: custom:button-card
            size: 70%
            icon: mdi:weather-sunny
            show_name: false
            styles:
              icon:
                - color: dimgray
              card:
                - box-shadow: none
                - border-radius: 50%
                - background-color: rgba(255,255,255,1.0)
                - width: 38px
                - height: 38px
            tap_action:
              action: call-service
              service: ' '
            style: |
              ha-card {
                box-shadow: none;
                border: none;
              }
      styles:
        custom_fields:
          fond:
            - background-image: ''
            - position: absolute
            - left: 0
            - top: 0
            - width: 100%
            - height: 100%
            - background-size: cover
            - background-position: center
            - opacity: 0.5
          rad:
            - position: absolute
            - left: 6%
            - top: 4%
          radsdb:
            - position: absolute
            - left: 6%
            - top: 20%
          power_radsdb:
            - position: absolute
            - left: 50%
            - top: 19%
          leaf_radsdb:
            - position: absolute
            - left: 58%
            - top: 19%
          snow_radsdb:
            - position: absolute
            - left: 66%
            - top: 19%
          sun_radsdb:
            - position: absolute
            - left: 74%
            - top: 19%
          radgael_pri:
            - position: absolute
            - left: 6%
            - top: 29%
          power_gael_pri:
            - position: absolute
            - left: 50%
            - top: 29%
          leaf_gael_pri:
            - position: absolute
            - left: 58%
            - top: 29%
          snow_gael_pri:
            - position: absolute
            - left: 66%
            - top: 29%
          sun_gael_pri:
            - position: absolute
            - left: 74%
            - top: 29%
          clim:
            - position: absolute
            - left: 6%
            - top: 44%
          clim_parent:
            - position: absolute
            - left: 6%
            - top: 62%
          power_clim_parent:
            - position: absolute
            - left: 50%
            - top: 62%
          froid_clim_parent:
            - position: absolute
            - left: 62%
            - top: 62%
          chaud_clim_parent:
            - position: absolute
            - left: 74%
            - top: 62%

Il te suffit de mettre tes entités pour les fils pilotes et tes scripts pour les climatiseurs

[Gloup]

Bonjour

Oui c’est bien ça. Merci.

Cependant j’ai un peu de mal à comprendre la doc sur 2 points.
Je n’ai pas d’entity pour les clims. Juste la télécommande broadlink. Je l’ai mise en entity ne sachant pas quoi mettre. Mais forcément quand je cliques sur le nom, j’ouvre la popup avec la possibilité de l’éteindre, ce que je ne veux pas. Vous savez si c’est possible de ne pas avoir cette action ?

Le second point est que je ne comprend pas comme il fait pour ne pas afficher les friendly name au dessus des icones. J’ai mis un attribut name, mais si je ne pouvais rien avoir comme l’exemple, ca n’en serai que mieux !

J’en suis la :

type: entities
entities:
  - entity: remote.clim_bureau
    type: custom:multiple-entity-row
    name: Bureau
    show_state: false
    entities:
      - icon: mdi:power-off
        state_color: true
        tap_action:
          action: toggle
        entity: script.clim_off_bureau
        name: 'OFF'
      - icon: mdi:air-conditioner
        state_color: true
        tap_action:
          action: toggle
        entity: script.clim_on_cold_19_bureau
        name: Climatisation
      - icon: mdi:radiator
        state_color: true
        tap_action:
          action: toggle
        entity: script.clim_on_heat_19_bureau
        name: Chauffage

Merci !

[Gloup]

Merci. Je vais également regarder de ce côté.
C’est ce que je veux, mais va falloir que je décortique bien tout pour comprendre comment ça fonctionne.

Merci !

[anon41081891]

C’est relativement simple, même s’il y a beaucoup plus de lignes que l’exemple donné par WarC0zes

Pour tes climatiseurs, il suffit d’appeler ton script dans cette zone :

            tap_action:
              action: call-service
              service: ' '

en mettant : service: script.clim_off_bureau

[WarC0zes]

@Gloup

Cependant j’ai un peu de mal à comprendre la doc sur 2 points.
Je n’ai pas d’entity pour les clims. Juste la télécommande broadlink. Je l’ai mise en entity ne sachant pas quoi mettre. Mais forcément quand je cliques sur le nom, j’ouvre la popup avec la possibilité de l’éteindre, ce que je ne veux pas. Vous savez si c’est possible de ne pas avoir cette action ?

ajoute un tap_action, avec l’action none . Pas de choix que de mettre une entité, sinon la carte fonctionne pas.

@Gloup

Le second point est que je ne comprend pas comme il fait pour ne pas afficher les friendly name au dessus des icones. J’ai mis un attribut name, mais si je ne pouvais rien avoir comme l’exemple, ca n’en serai que mieux !

Faut pas mettre de name:

type: entities
entities:
  - entity: remote.clim_bureau
    type: custom:multiple-entity-row  
    name: Bureau
    show_state: false
    tap_action:
      action: none
    entities:
      - icon: mdi:power-off
        state_color: true
        tap_action:
          action: toggle
        entity: script.clim_off_bureau
      - icon: mdi:air-conditioner
        state_color: true
        tap_action:
          action: toggle
        entity: script.clim_on_cold_19_bureau
      - icon: mdi:radiator
        state_color: true
        tap_action:
          action: toggle
        entity: script.clim_on_heat_19_bureau

[Gloup]

Ok pour le action: none. C’est parfait.

Par contre, j’avais mis « name » parce que si je le retire, c’est pire. Il met le nom du script

EDIT : Non c’est moi qui ait fait une connerie avec le tap_action des icones…
Comme ça c’est OK

type: entities
entities:
  - entity: remote.clim_bureau
    type: custom:multiple-entity-row
    name: Bureau
    styles:
      width: 80px
      text-align: right
    show_state: false
    tap_action:
      action: none
    entities:
      - icon: mdi:power-off
        tap_action:
          action: call-service
          service: script.clim_off_bureau
      - icon: mdi:air-conditioner
        tap_action:
          action: call-service
          service: script.clim_on_cold_19_bureau
      - icon: mdi:radiator
        tap_action:
          action: call-service
          service: script.clim_on_heat_19_bureau

[Gloup]

Hello !
Désolé, j’ai encore besoin d’une petite aide pour finaliser.

Ca rend comme je le voulais :

Mais je me suis dit, tant qu’a faire, autant mettre les icones de droite en gris, comme sur le thermostat. Ca doit être simple ! Et non finalement…

Sur multiple-entity-row, j’ai vu qu’on pouvait utiliser l’attribut Style :

entities:
      - entity: sensor.bedroom_max_temp
        styles:
          width: 80px
          text-align: left

J’ai essayé avec un bête color: red juste pour voir si ça fonctionnait avant de mettre le gris. Ca n’a pas changé la couleur de l’icone. Par contre avec la console de développement du navigateur, je vois bien que le red est bien pris en compte, mais écrasé par un autre css.

J’ai ensuite tenté avec card-mod. J’arrive a mettre toutes les icones en couleur (donc celle de gauche également), mais pas uniquement celle de droite.

Il doit y avoir une astuce, mais je sèche un peu.

[anon41081891]

Ca serait très simple avec button-card. Là effectivement, il faudra le faire avec card-mod et voir avec la console de développement pour appliquer la couleur qu’à l’icône concernée.

[WarC0zes]

bonjour @Gloup,
tu y était presque. ajoute --paper-item-icon-color: grey dans styles.

    entities:
      - icon: mdi:power-off
        tap_action:
          action: call-service
          service: script.clim_off_bureau
        styles:
          --paper-item-icon-color: grey

@anon41081891
tu veut vraiment qui fasse avec button-card

[anon41081891]

@WarC0zes

@anon41081891
tu veut vraiment qui fasse avec button-card

Oui, c’est LA CARTE a maitriser
Tu peux presque te passer de toutes les autres avec celle là

[Gloup]

Effectivement pas loin, ça va venir avec le temps !
Merci de l’aide en tout cas.

[Gloup]

Franchement j’ai essayé les 2 en parallèle, j’ai capté les grandes lignes de ton exemple personnalisé (merci pour ça !), mais ça me parait complexe de prime abord.
Cela dit, la doc m’a montré une méthode qui me serait utile sur un dashboard secondaire que j’ai commencé pour un pi display. Je reviendrais certainement avec des questions quand je serais dessus

[WarC0zes]

@Gloup Pense a mettre ton sujet en résolu, si tout est bon pour toi.

[anon41081891]

N’hésite pas. Effectivement, button-card peut paraitre complexe (d’ailleurs, la carte l’est car les possibilités offertes sont impressionnantes)