Créer des cartes personalisées?

Ah zut c’est avec Zigbee2MQTT, j’arrive pas à le faire fonctionner chez moi :(.

tu as c’est carte qui assemble toutes les cartes en une seule.

ou

avec stack in card, tu as plusieurs options de style.

exemple:

type: custom:stack-in-card
mode: vertical    
keep:
  box_shadow: true
  margin: true
  border_radius: true
  background: true
  outer_padding: false
cards:
  - type: entities

Tu peux éditer la carte


Après pour ajouter le capteur en yaml du doit pouvoir le rajouter
Tu utilise quel module pour tes volets ?

des modules Fibaro 222

J’ai tenté de grouper des cards dans le code des mushroom mais çà veut pas.

Regarde la solution de @WarC0zes à l’air d’être la solution a ton problème.
Les fibaro sont en zwave et comme ce sont des modules universel cela doit être pour cela que tu n’as pas la fonction pour inverser l’état
Il y a peu etre cette carte qui pourrai aller Slider entity row
https://forum.hacf.fr/t/partage-carte-lovelace-volets/8081/19?u=oli_34

carte mushroom sans stack in card
mush no stack

carte mushroom avec stack in card
mush stack

le code stack in card:

type: custom:stack-in-card
mode: vertical
keep:
  box_shadow: false
  margin: true    # tu peu mettre sur false pour enlever la marge
  border_radius: true
  background: true
  outer_padding: false
cards:
  - type: custom:mushroom-fan-card
    entity: fan.mi_smart_standing_fan_2
  - type: custom:mushroom-fan-card
    entity: fan.mi_smart_standing_fan_2

j’ai réussi à faire çà :

double card

avec une fonction d’origine (il me semble)

C’est dommage qu’on puisse pas modifier la largeur de chaque card à l’intérieur, j’aurais pu agrandir la zone de réglage et raccourcir la zone d’indication DO.

mush hrz

voila le code, adapte le.

type: horizontal-stack
cards:
  - type: custom:mushroom-fan-card
    entity: fan.mi_smart_standing_fan_2
    style: |
      ha-card {
        width: 350px;
      }
  - type: custom:mushroom-fan-card
    entity: fan.mi_smart_standing_fan_2
    style: |
      ha-card {
        margin-left: 125px;
        width: 100px;
      }

il te faut card_mod.

bon, moi et ma chance, mon HA ne fonctionne plus…

Ah mince tu as un backup ?

oui, c’est quand j’ai tenté de relancer zigbee2mqtt je pense, j’ai du débrancher mon dongle zigbee pour pouvoir arriver à reboot HA intégralement et puis j’ai remis la save.

J’ai encore mal fait un truc je pense^^.

je n’ai pas d’erreur visible, mais cela ne modifie par la taille.

type: horizontal-stack
cards:
  - type: custom:mushroom-cover-card
    entity: cover.volet_salon_rue_4
    name: Terasse
    fill_container: true
    show_position_control: true
    show_buttons_control: false
    tap_action:
      action: call-service
      service: cover.set_cover_position
      data:
        position: 100
      target:
        entity_id: cover.volet_salon_rue_4
    hold_action:
      action: call-service
      service: cover.set_cover_position
      data:
        position: 1
      target:
        entity_id: cover.volet_salon_rue_4
    double_tap_action:
      action: call-service
      service: cover.set_cover_position
      data:
        position: 89
      target:
        entity_id: cover.volet_salon_rue_4
    primary_info: none
    secondary_info: none
    layout: horizontal
  - type: entities
    entities:
      - entity: binary_sensor.do_sonoff_1_iaszone
        name: ' Terrasse :'
    show_header_toggle: false
    state_color: true
card_mod:
  style: |
    ha-card {
      width: 100px;
    }

Ca devrais être bon la. Ta pas besoin du card_mod:.

type: horizontal-stack
cards:
  - type: custom:mushroom-cover-card
    entity: cover.volet_salon_rue_4
    name: Terasse
    fill_container: true
    show_position_control: true
    show_buttons_control: false
    tap_action:
      action: call-service
      service: cover.set_cover_position
      data:
        position: 100
      target:
        entity_id: cover.volet_salon_rue_4
    hold_action:
      action: call-service
      service: cover.set_cover_position
      data:
        position: 1
      target:
        entity_id: cover.volet_salon_rue_4
    double_tap_action:
      action: call-service
      service: cover.set_cover_position
      data:
        position: 89
      target:
        entity_id: cover.volet_salon_rue_4
    primary_info: none
    secondary_info: none
    layout: horizontal
  - type: entities
    entities:
      - entity: binary_sensor.do_sonoff_1_iaszone
        name: ' Terrasse :'
    show_header_toggle: false
    state_color: true
    style: |
      ha-card {
        width: 100px;
      }

J’ai fais un test, a voir ce que ca donne chez toi et adapté la largeur peu être ( j’ai pas de volet roulant, j’ai mis une autre entité pour la photo).
mush test

type: horizontal-stack
cards:
  - type: custom:mushroom-cover-card
    entity: cover.volet_salon_rue_4
    name: Terasse
    fill_container: true
    show_position_control: true
    show_buttons_control: false
    tap_action:
      action: call-service
      service: cover.set_cover_position
      data:
        position: 100
      target:
        entity_id: cover.volet_salon_rue_4
    hold_action:
      action: call-service
      service: cover.set_cover_position
      data:
        position: 1
      target:
        entity_id: cover.volet_salon_rue_4
    double_tap_action:
      action: call-service
      service: cover.set_cover_position
      data:
        position: 89
      target:
        entity_id: cover.volet_salon_rue_4
    primary_info: none
    secondary_info: none
    layout: horizontal
    style: |
      ha-card {
        width: 285px;
      }
  - type: entities
    entities:
      - entity: binary_sensor.do_sonoff_1_iaszone
        name: 'Terrasse :'
    show_header_toggle: false
    state_color: true
    style: |
      ha-card {
        margin-left: 60px;
        width: 160px;
      }

Le card_mod est conseillé voire indispensable dans les dernières versions, donc ça c’est bon. Par contre, tu l’as mis complètement désindenté, donc il s’applique à la carte horizontal-stack qui est justement une des rares cartes qui n’est pas directement modifiable avec card_mod parce que ce n’est pas une ha-card (il y a un moyen de contourner ça dans card_mod mais tu n’en as pas besoin).

La bonne solution est de mettre ta directive card_mod au même niveau d’indentation que la type: xxxx dont tu veux changer la largeur (AFAIU la deuxième). Selon moi il suffit donc que tu indentes tout le bloc card_mod de 4 espaces.

En définitive, comme dans la réponse de @WarC0zes mais sans retirer le card_mod

@frnchfrgg

Ah, alors, j’ai rien compris^^.

@WarC0zes, le 2e code fonctionne, pas contre je n’arrive pas à afficher un nom à l’entité, du coup, je ne sais pas quel volet est quel card.

Oui, avec la carte entité c’est pas la mieux adapter car elle affiche que en horizontal. Il te faudrait un carte qui peu afficher en vertical, ca serai mieux adapter.

J’ai tester avec mushroom-entity-card, mais avec button-card ca serais pas mal aussi.
test soso

Le code:

type: horizontal-stack
cards:
  - type: custom:mushroom-cover-card
    entity: cover.volet_salon_rue_4
    name: Terasse
    fill_container: true
    show_position_control: true
    show_buttons_control: false
    tap_action:
      action: call-service
      service: cover.set_cover_position
      data:
        position: 100
      target:
        entity_id: cover.volet_salon_rue_4
    hold_action:
      action: call-service
      service: cover.set_cover_position
      data:
        position: 1
      target:
        entity_id: cover.volet_salon_rue_4
    double_tap_action:
      action: call-service
      service: cover.set_cover_position
      data:
        position: 89
      target:
        entity_id: cover.volet_salon_rue_4
    primary_info: none
    secondary_info: none
    layout: horizontal
    style: |
      ha-card {
        width: 295px;  #Largeur de la carte
      }
  - type: custom:mushroom-entity-card
    entity: binary_sensor.do_sonoff_1_iaszone
    name: 'Terrasse :'
    style: |
      ha-card {
        margin-left: 70px;  #Marge gauche de la carte (Obligé de décaler la carte)
        width: 153px;   #Largeur de la carte
      }

Avec button-card.
test soso2

Le code:

type: horizontal-stack
cards:
  - type: custom:mushroom-cover-card
    entity: cover.volet_salon_rue_4
    name: Terasse
    fill_container: true
    show_position_control: true
    show_buttons_control: false
    tap_action:
      action: call-service
      service: cover.set_cover_position
      data:
        position: 100
      target:
        entity_id: cover.volet_salon_rue_4
    hold_action:
      action: call-service
      service: cover.set_cover_position
      data:
        position: 1
      target:
        entity_id: cover.volet_salon_rue_4
    double_tap_action:
      action: call-service
      service: cover.set_cover_position
      data:
        position: 89
      target:
        entity_id: cover.volet_salon_rue_4
    primary_info: none
    secondary_info: none
    layout: horizontal
    style: |
      ha-card {
        width: 300px;  #Largeur de la carte
      }
  - type: custom:button-card
    entity: binary_sensor.do_sonoff_1_iaszone
    name: 'Terrasse :'
    layout: icon_name_state2nd
    show_state: true
    show_icon: true
    size: 55%
    state:
      - value: 'on'
        icon: mdi:motion-sensor
        styles:
          state:
            - color: red
          icon:
            - color: red
      - value: 'off'
        icon: mdi:motion-sensor-off
        styles:
          state:
            - color: green
          icon:
            - color: green
    styles:
      card:
        - padding: 0.2em
        - height: 66px  #Hauteur carte
        - width: 150px  #Largeur carte
      name:
        - font-size: 0.90em
      state:
        - font-size: 0.85em
    style: |
      ha-card {
        margin-left: 70px;  #Marge gauche de la carte (Obligé de décaler la carte)
      }

Je dis juste que les solutions de @WarC0zes sont globalement bonnes, sauf son indication qu’on n’a pas besoin de mettre card_mod: dans le YAML. Depuis la version 3 de card_mod c’est (sensé être) obligatoire: « Cards are styled by adding a card_mod parameter to the card configuration. »

Dans cette même partie juste en dessous, Thomas Lovelen explique qu’on ne peut pas (facilement) mettre des styles aux cartes qui n’ont pas de ha-card c’est-à-dire conditional, grid et compagnie. Mais c’est rarement un problème car il suffit de styler les cartes à l’intérieur et c’est pour ça que @WarC0zes et moi on te propose des solutions où le style: est au niveau des cartes mushroom ou button ou entities au lieu de tout en bas à gauche.

Ah, il faut faire comme ca maintenant ?

card_mod:
  style: |
    ha-card {

hier soir, en relisant, j’ai réussi à faire çà :

Mais c’est pas top^^

Puis ca rend pas pareil sur PC/Mobile/Tablettes…

Ici sur PC y a beaucoup d’espaces vides, sur mon smartphone l’espace vide n’est pas, c’est plus ‹ propre ›