Vertical stack - custom:mod-card soucis

Entraide Home Assistant
1

Bonjour, j’aimerais avoir ce type de carte :

image
image528×612 9.02 KB

son code :

type: custom:mod-card
style: |
  ha-card {
    box-shadow: 0px 0px 5px 1px; #bordure relief carte principale
  }
card:
  square: false
  type: vertical-stack
  cards:
    - show_name: false
      show_icon: true
      type: button
      tap_action:
        action: toggle
      entity: switch.relai_2
    - show_name: false
      show_icon: true
      type: button
      tap_action:
        action: toggle
      entity: switch.relai_2
  columns: 1
  title: toto

avec à la place des 2 interrupteurs les cartes suivantes :
image
et dessous
image
voici le code de la 1ère

type: custom:mod-card
style: |
  ha-card {
    box-shadow: 0px 0px 2px 1px; #bordure relief carte principale
  }
card:
  square: false
  type: grid
  cards:
    - type: custom:auto-entities
      show_empty: false
      card:
        type: custom:mushroom-chips-card
        view_layout:
          grid-area: chips
        alignment: center
      card_param: chips
      filter:
        template: >
          {% set ns = namespace(select=[],entity="input_select.relai_1") %} {%
          for opt in state_attr(ns.entity, 'options') %}
            {% set icon = iif(opt== 'on', 'mdi:power-on', icon) %}
            {% set icon = iif(opt== 'off', 'mdi:power-off', icon) %}
            {% set icon = iif(opt== 'auto', 'mdi:water-sync', icon) %}
            {% set ns.select = ns.select + [
              {
                "type": "template",
                "icon": icon,
                "entity": ns.entity,
                "icon_color": '{{ iif(is_state("input_select.relai_1", "' ~ opt ~ '"), "red", "disabled") }}',
                "tap_action": {
                  "action": "call-service",
                  "service": "input_select.select_option",
                  "service_data": {
                    "entity_id": ns.entity,
                    "option": opt
                  }
                },
                "card_mod": {
                  "style": 'ha-card {
                      {% if is_state( "' ~ ns.entity ~ '" , "' ~ opt ~ '" ) %}
                         --chip-background: rgba(var(--mush-rgb-state-entity), 0.3);
                      {% else %}
                        --chip-background: rgba(var(--rgb-grey), 0.1);
                      {% endif %}
                    }'
                }
              }
            ] %}
          {% endfor %} {{ ns.select }}
    - square: false
      type: grid
      cards:
        - type: custom:mushroom-entity-card
          entity: input_number.arrosage_p1_v1
          layout: horizontal
        - type: custom:mushroom-entity-card
          entity: timer.minuteur
          state_color: true
      columns: 2
  columns: 1
  title: Tomates1

le code le la seconde et similaire avec des entity différentes.

J’ai beau modifier dans tous les sens je n’y arrive pas.
Quelqu’un pourrait il me dire si c’est possible et si oui comment :slightly_smiling_face:, j’ai lu et regardé pas mal de posts est vidéos, mais HA est plus fort que moi :stuck_out_tongue_winking_eye:

2

Bonjour, je ne vois pas du tout ce que tu voudrais comme résultat mais si tu arrives à montrer exactement ce que tu veux, ça doit pouvoir se faire sans problème avec une custom:button-card (pour la partie graphique)

3

j’aimerais comme le visuel de la première carte avec à la place des deux cartes des interrupteurs les cartes tomates 1 et tomates 2en gros ça :

image
image534×610 20.9 KB

en conservant les bordures

4

D’accord, je pense que j’ai compris. Je te propose un exemple demain soir si tu veux.

5

trop cool, merci d’avance @anon51798830.
bonne soirée

6

image

Voilà ce que ça donne avec une custom:button-card.
Il y a une carte avec deux custom_fields (un pour la zone Tomates1 et un pour la zone Tomates2)
Chacun de ces custom_fields est composé des éléments de base (nom, bordure, ombrage, couleur de fond, etc.) et de cinq custom_fields, un par bouton dans la zone (3 boutons ronds et 2 boutons rectangulaires). Tu peux ajouter une action sur chaque bouton.
Le code yaml de la carte fait 430 lignes car tout est paramètrable (les couleurs, la transparence des fond, la taille de chaque élément, etc.).

Si tu as des questions ou des difficultés à l’utiliser, n’hésite pas à demander.

Le code:

type: custom:button-card
name: Titre
custom_fields:
  zone1:
    card:
      type: custom:button-card
      name: Tomates1
      custom_fields:
        zone1bouton1:
          card:
            type: custom:button-card
            icon: mdi:power-on
            show_icon: true
            styles:
              card:
                - background-color: rgba(32,32,32,1.0)
                - border-radius: 50%
                - border: 1px solid rgba(52,52,52,1.0)
                - width: 50px
                - height: 50px
              icon:
                - color: rgba(111,111,111,1.0)
                - width: 60%
            tap_action:
              action: none
            hold_action:
              action: none
        zone1bouton2:
          card:
            type: custom:button-card
            icon: mdi:power-off
            show_icon: true
            styles:
              card:
                - background-color: rgba(17,17,17,1.0)
                - border-radius: 50%
                - border: 1px solid rgba(52,52,52,1.0)
                - width: 50px
                - height: 50px
              icon:
                - color: rgba(244,67,54,1.0)
                - width: 60%
            tap_action:
              action: none
            hold_action:
              action: none
        zone1bouton3:
          card:
            type: custom:button-card
            icon: mdi:water-sync
            show_icon: true
            styles:
              card:
                - background-color: rgba(32,32,32,1.0)
                - border-radius: 50%
                - border: 1px solid rgba(52,52,52,1.0)
                - width: 50px
                - height: 50px
              icon:
                - color: rgba(111,111,111,1.0)
                - width: 60%
            tap_action:
              action: none
            hold_action:
              action: none
        zone1bouton4:
          card:
            type: custom:button-card
            layout: icon_name_state2nd
            name: Durée
            label: 0 minutes
            icon: mdi:ray-vertex
            show_icon: true
            show_label: true
            custom_fields:
              fond_icone:
                card:
                  type: custom:button-card
                  aspect_ratio: 1/1
                  styles:
                    card:
                      - background-color: rgba(30,53,72,1.0)
                      - width: 54px
                      - height: 54px
                      - border-radius: 50%
            styles:
              card:
                - background-color: rgba(32,32,32,1.0)
                - border-radius: 10px
                - border: 1px solid rgba(52,52,52,1.0)
                - width: 200px
                - height: 70px
              name:
                - color: rgba(255,255,255,0.8)
                - justify-self: start
                - font-size: 1.0em
              label:
                - color: rgba(255,255,255,0.8)
                - justify-self: start
                - font-size: 0.8em
                - padding-top: 7px
              icon:
                - color: rgba(33,150,243,1.0)
                - border-radius: 50%
                - z-index: 1
              custom_fields:
                fond_icone:
                  - position: absolute
                  - left: 11px
                  - top: 7px
                  - z-index: 0
            tap_action:
              action: none
            hold_action:
              action: none
        zone1bouton5:
          card:
            type: custom:button-card
            layout: icon_name_state2nd
            name: minuteur
            label: inactif
            icon: mdi:timer-outline
            show_icon: true
            show_label: true
            custom_fields:
              fond_icone:
                card:
                  type: custom:button-card
                  aspect_ratio: 1/1
                  styles:
                    card:
                      - background-color: rgba(30,53,72,1.0)
                      - width: 54px
                      - height: 54px
                      - border-radius: 50%
            styles:
              card:
                - background-color: rgba(32,32,32,1.0)
                - border-radius: 10px
                - border: 1px solid rgba(52,52,52,1.0)
                - width: 200px
                - height: 70px
              name:
                - color: rgba(255,255,255,0.8)
                - justify-self: start
                - font-size: 1.0em
              label:
                - color: rgba(255,255,255,0.8)
                - justify-self: start
                - font-size: 0.8em
                - padding-top: 7px
              icon:
                - color: rgba(33,150,243,1.0)
                - border-radius: 50%
                - z-index: 1
              custom_fields:
                fond_icone:
                  - position: absolute
                  - left: 11px
                  - top: 7px
                  - z-index: 0
            tap_action:
              action: none
            hold_action:
              action: none
      styles:
        name:
          - font-size: 0.9em
          - justify-self: start
          - align-self: start
          - padding-left: 10px
          - color: rgba(255,255,255,1.0)
        card:
          - background-color: rgba(17,17,17,1.0)
          - box-shadow: 4px 4px 4px 0px rgba(32,32,32,0.5)
          - border: 1px rgba(211,211,211,1.0) outset
          - width: 420px
          - height: 180px
        custom_fields:
          zone1bouton1:
            - position: absolute
            - top: 45px
            - left: 120px
          zone1bouton2:
            - position: absolute
            - top: 45px
            - left: 185px
          zone1bouton3:
            - position: absolute
            - top: 45px
            - left: 250px
          zone1bouton4:
            - position: absolute
            - top: 104px
            - left: 5px
          zone1bouton5:
            - position: absolute
            - top: 104px
            - left: 213px
      tap_action:
        action: none
      hold_action:
        action: none
  zone2:
    card:
      type: custom:button-card
      name: Tomates2
      custom_fields:
        zone2bouton1:
          card:
            type: custom:button-card
            icon: mdi:power-on
            show_icon: true
            styles:
              card:
                - background-color: rgba(32,32,32,1.0)
                - border-radius: 50%
                - border: 1px solid rgba(52,52,52,1.0)
                - width: 50px
                - height: 50px
              icon:
                - color: rgba(111,111,111,1.0)
                - width: 60%
            tap_action:
              action: none
            hold_action:
              action: none
        zone2bouton2:
          card:
            type: custom:button-card
            icon: mdi:power-off
            show_icon: true
            styles:
              card:
                - background-color: rgba(17,17,17,1.0)
                - border-radius: 50%
                - border: 1px solid rgba(52,52,52,1.0)
                - width: 50px
                - height: 50px
              icon:
                - color: rgba(244,67,54,1.0)
                - width: 60%
            tap_action:
              action: none
            hold_action:
              action: none
        zone2bouton3:
          card:
            type: custom:button-card
            icon: mdi:water-sync
            show_icon: true
            styles:
              card:
                - background-color: rgba(32,32,32,1.0)
                - border-radius: 50%
                - border: 1px solid rgba(52,52,52,1.0)
                - width: 50px
                - height: 50px
              icon:
                - color: rgba(111,111,111,1.0)
                - width: 60%
            tap_action:
              action: none
            hold_action:
              action: none
        zone2bouton4:
          card:
            type: custom:button-card
            layout: icon_name_state2nd
            name: Durée
            label: 0 minutes
            icon: mdi:ray-vertex
            show_icon: true
            show_label: true
            custom_fields:
              fond_icone:
                card:
                  type: custom:button-card
                  aspect_ratio: 1/1
                  styles:
                    card:
                      - background-color: rgba(30,53,72,1.0)
                      - width: 54px
                      - height: 54px
                      - border-radius: 50%
            styles:
              card:
                - background-color: rgba(32,32,32,1.0)
                - border-radius: 10px
                - border: 1px solid rgba(52,52,52,1.0)
                - width: 200px
                - height: 70px
              name:
                - color: rgba(255,255,255,0.8)
                - justify-self: start
                - font-size: 1.0em
              label:
                - color: rgba(255,255,255,0.8)
                - justify-self: start
                - font-size: 0.8em
                - padding-top: 7px
              icon:
                - color: rgba(33,150,243,1.0)
                - border-radius: 50%
                - z-index: 1
              custom_fields:
                fond_icone:
                  - position: absolute
                  - left: 11px
                  - top: 7px
                  - z-index: 0
            tap_action:
              action: none
            hold_action:
              action: none
        zone2bouton5:
          card:
            type: custom:button-card
            layout: icon_name_state2nd
            name: minuteur
            label: inactif
            icon: mdi:timer-outline
            show_icon: true
            show_label: true
            custom_fields:
              fond_icone:
                card:
                  type: custom:button-card
                  aspect_ratio: 1/1
                  styles:
                    card:
                      - background-color: rgba(30,53,72,1.0)
                      - width: 54px
                      - height: 54px
                      - border-radius: 50%
            styles:
              card:
                - background-color: rgba(32,32,32,1.0)
                - border-radius: 10px
                - border: 1px solid rgba(52,52,52,1.0)
                - width: 200px
                - height: 70px
              name:
                - color: rgba(255,255,255,0.8)
                - justify-self: start
                - font-size: 1.0em
              label:
                - color: rgba(255,255,255,0.8)
                - justify-self: start
                - font-size: 0.8em
                - padding-top: 7px
              icon:
                - color: rgba(33,150,243,1.0)
                - border-radius: 50%
                - z-index: 1
              custom_fields:
                fond_icone:
                  - position: absolute
                  - left: 11px
                  - top: 7px
                  - z-index: 0
            tap_action:
              action: none
            hold_action:
              action: none
      styles:
        name:
          - font-size: 0.9em
          - justify-self: start
          - align-self: start
          - padding-left: 10px
          - color: rgba(255,255,255,1.0)
        card:
          - background-color: rgba(17,17,17,1.0)
          - box-shadow: 4px 4px 4px 0px rgba(32,32,32,0.5)
          - border: 1px rgba(211,211,211,1.0) outset
          - width: 420px
          - height: 180px
        custom_fields:
          zone2bouton1:
            - position: absolute
            - top: 45px
            - left: 120px
          zone2bouton2:
            - position: absolute
            - top: 45px
            - left: 185px
          zone2bouton3:
            - position: absolute
            - top: 45px
            - left: 250px
          zone2bouton4:
            - position: absolute
            - top: 104px
            - left: 5px
          zone2bouton5:
            - position: absolute
            - top: 104px
            - left: 213px
      tap_action:
        action: none
      hold_action:
        action: none
tap_action:
  action: none
hold_action:
  action: none
styles:
  card:
    - box-shadow: 0px 0px 5px 1px
    - background-color: rgba(32,32,32,0.9)
    - border: 1px rgba(211,211,211,1.0) outset
    - width: 443px
    - height: 443px
  name:
    - font-size: 1.4em
    - color: rgba(255,255,255,1.0)
    - align-self: start
    - justify-self: start
    - padding-top: 0px
    - padding-left: 20px
  custom_fields:
    zone1:
      - position: absolute
      - top: 60px
      - left: 10px
    zone2:
      - position: absolute
      - top: 250px
      - left: 10px
7

:astonished: Merci @anon51798830 pour le boulot.
Pour les actions ça se situe là ?:

tap_action:
              action: none
            hold_action:
              action: none

pour les 3 boutons ronds j’utilise un imput_select donc je fais :

tap_action:
              action: call-service
              service: input_select.relai_1

mais après comment je fais pour la valeur « on », « off » pour le bouton 2 et « auto » pour le 3ème ?
Pour le « zone1bouton4 » (durée) et « zone1bouton5 » (minuteur) j’utilise sur ma carte actuelle :

     cards:
        - type: custom:mushroom-entity-card
          entity: input_number.arrosage_p1_v1
          layout: horizontal
        - type: custom:mushroom-entity-card
          entity: timer.minuteur
          state_color: true

du coup j’ai ajouté ceci :

zone1bouton4:
....
....
    tap_action:
              entity: input_number.arrosage_p1_v1
            hold_action:
              action: none
zone1bouton5:
....
....
    tap_action:
              entity: timer.minuteur
            hold_action:
              action: none

mais il ne se passe rien lorsque je clique sur Durée, alors que sur ma carte actuelle j’ai :

image
image1010×589 26.1 KB

et je peux choisir la durée.

t’as tiré le gros lot avec moi :grinning:

8

Salut, le plus simple est de faire des scripts pour chaque action et d’associer les scripts aux boutons.

9

ok, donc j’ai créé un script « relai_1_on » mais comment je fais pour le lancer, j’ai testé plusieurs actions, mais ça ne fonctionne pas

10

Tu appelles le script en passant par call-service puis service: script.[nom du script]

11

cool, j’ai testé avec le on et le off c’est ok.
Pour la Durée, j’ai créé un script qui appel

input_number.arrosage_p1_v1

mais il ne se passe rien.

12

Salut,
tu peut utilise le more-info, qui t’ouvre la fenêtre de l’entité
comme celle la:
image

tap_action:
  action: more-info
Name Type Default Supported options Description
action string toggle more-info, toggle, call-service, none, navigate, url, assist Action to perform
13

Comme le dit @WarC0zes ajoute une ligne dans le custom_field concerné avec ton entité et utilise more-info :

        zone1bouton4:
          card:
            type: custom:button-card
            entity: input_number.arrosage_p1_v1
            layout: icon_name_state2nd
            name: Durée
            label: 0 minutes
            icon: mdi:ray-vertex
            show_icon: true
            show_label: true
            custom_fields:
              fond_icone:
                card:
                  type: custom:button-card
                  aspect_ratio: 1/1
                  styles:
                    card:
                      - background-color: rgba(30,53,72,1.0)
                      - width: 54px
                      - height: 54px
                      - border-radius: 50%
            styles:
              card:
                - background-color: rgba(32,32,32,1.0)
                - border-radius: 10px
                - border: 1px solid rgba(52,52,52,1.0)
                - width: 200px
                - height: 70px
              name:
                - color: rgba(255,255,255,0.8)
                - justify-self: start
                - font-size: 1.0em
              label:
                - color: rgba(255,255,255,0.8)
                - justify-self: start
                - font-size: 0.8em
                - padding-top: 7px
              icon:
                - color: rgba(33,150,243,1.0)
                - border-radius: 50%
                - z-index: 1
              custom_fields:
                fond_icone:
                  - position: absolute
                  - left: 11px
                  - top: 7px
                  - z-index: 0
            tap_action:
              action: more-info
            hold_action:
              action: none
14

Merci les gars, ça fonctionne, mais dans la fenêtre qui s’ouvre je fais glisser le curseur sur 6 par exemple et quand je ferme la fenêtre ça reste sur « 0 minute »
image

image

Je pense que c’est normal vu qua dans le code il y a :

   zone1bouton4:
          card:
            type: custom:button-card
            entity: input_number.arrosage_p1_v1
            layout: icon_name_state2nd
            name: Durée
            label: 0 minutes
            icon: mdi:ray-vertex
            show_icon: true
            show_label: true

0 minutes pour le label.

Alors que sur ma carte actuelle ça passe bien à 6 minutes :

image

Je pense aussi que le souci sera le même pour le minuteur :

zone1bouton5:
          card:
            type: custom:button-card
            layout: icon_name_state2nd
            name: minuteur
            label: inactif
            icon: mdi:timer-outline
            show_icon: true
            show_label: true
15

Supprime la ligne « label: 0 minutes » et la ligne ‹ show_label: true › et remplace ‹ label: › par ‹ state: › dans ‹ styles › :

        zone1bouton4:
          card:
            type: custom:button-card
            entity: input_number.arrosage_p1_v1
            layout: icon_name_state2nd
            name: Durée
            icon: mdi:ray-vertex
            show_icon: true
            custom_fields:
              fond_icone:
                card:
                  type: custom:button-card
                  aspect_ratio: 1/1
                  styles:
                    card:
                      - background-color: rgba(30,53,72,1.0)
                      - width: 54px
                      - height: 54px
                      - border-radius: 50%
            styles:
              card:
                - background-color: rgba(32,32,32,1.0)
                - border-radius: 10px
                - border: 1px solid rgba(52,52,52,1.0)
                - width: 200px
                - height: 70px
              name:
                - color: rgba(255,255,255,0.8)
                - justify-self: start
                - font-size: 1.0em
              state:
                - color: rgba(255,255,255,0.8)
                - justify-self: start
                - font-size: 0.8em
                - padding-top: 7px
              icon:
                - color: rgba(33,150,243,1.0)
                - border-radius: 50%
                - z-index: 1
              custom_fields:
                fond_icone:
                  - position: absolute
                  - left: 11px
                  - top: 7px
                  - z-index: 0
            tap_action:
              action: more-info
            hold_action:
              action: none
16

pas mieux :
image

17

Rajoute show_state: true
Par défaut l’état est pas activer.

18

Ça marche nickel, j’ai même réussi à l’adapter pour le minuteur :
image

il me reste à ajouter 2 zones car en fait c’est pour gérer 4 électrovannes montées sur une pipe, tout cela pour arroser le jardin, j’ai le temps de me préparer vu le temps en ce moment :sweat_smile:

En tous les cas merci de ta patience.
Merci aussi à @WarC0zes

19

Voilà ce que ça donne :

image
image596×805 35.7 KB

Il va juste falloir que j’adapte un peu la largeur

20

La largeur, comme tout le reste, est modifiable directement. Passe ton sujet en résolu sur le message qui t’a apporté la solution si c’est OK pour toi.