Problème de dimensionnement de cartes

[stefane26]

Bonjour
J’ai créé une carte de suivi de ma piscine en mélangeant du stack_in_card, mini-graph-card et du mushroom. Le rendu me convient plutôt mais mais je souhaite agrandi longitudinalement le graphique afin qu’il prenne la place laissée par le mushroom template « piscine ». Je vous mets en dessous la carte, j’ai laissé volontairement les bordures afin de voir la place prises par chaque carte de la première ligne :

Le code YAML est le suivant :

type: custom:stack-in-card
mode: vertical
card_mod:
  style: |
    ha-card {
      border: none;
    }
cards:
  - type: custom:stack-in-card
    mode: horizontal
    card_mod:
      style: |
        ha-card {
          border: none;
        }
    cards:
      - type: custom:mushroom-template-card
        card_mod:
          style: |
            ha-card {
              border: 1;
              width: 80% !important;
            }
        primary: Piscine
        secondary: '{{ states(''sensor.blueriiot_piscine_temperature'')}}°C'
        icon: mdi:pool
        icon_color: |-
          {% if is_state('switch.filtration_piscine','on') %}
            #00dcff
            {% else %}
              #000c80
          {% endif %}
      - type: custom:mini-graph-card
        card_mod:
          style: |
            ha-card {
            border: 1;
            }
        entities:
          - sensor.blueriiot_piscine_temperature
        line_color: '#0FE6EA'
        line_width: 3
        hours_to_show: 48
        hour24: true
        animate: true
        font_size: 80
        show:
          state: false
          fill: true
          extrema: false
          icon: false
          name: false
          labels: hover
          points: false
  - type: custom:stack-in-card
    mode: horizontal
    card_mod:
      style: |
        ha-card {
          border: none;
        }
    cards:
      - type: custom:mushroom-template-card
        card_mod:
          style: |
            ha-card {
              border: none;
            }     
      - type: custom:mushroom-template-card
        card_mod:
          style: |
            ha-card {
              border: none;
            }
        primary: pH
        secondary: '{{ states (''sensor.blueriiot_piscine_ph'')}}'
        icon: ''
        tap_action:
          action: none
        hold_action:
          action: none
        double_tap_action:
          action: none
      - type: custom:mushroom-template-card
        card_mod:
          style: |
            ha-card {
              border: none;
            }
        primary: Rédox
        secondary: '{{ states (''sensor.blueriiot_piscine_redox'')}} mV'
        icon: ''
        tap_action:
          action: none
        hold_action:
          action: none
        double_tap_action:
          action: none
      - type: custom:mushroom-template-card
        card_mod:
          style: |
            ha-card {
              border: none;
            }
        primary: ''
        secondary: ''
        icon: mdi:pump
        entity: switch.filtration_piscine
        icon_color: |-
          {% if is_state('switch.filtration_piscine','on') %}
            orange
            {% else %}
              grey
          {% endif %}
      - type: custom:mushroom-template-card
        card_mod:
          style: |
            ha-card {
              border: none;
            }
        primary: ''
        secondary: ''
        icon: mdi:fountain
        entity: switch.relay_switch_1x2_5kw
        icon_color: |-
          {% if is_state('switch.relay_switch_1x2_5kw','on') %}
            #16A085
            {% else %}
              grey
          {% endif %}
      - type: custom:mushroom-template-card
        card_mod:
          style: |
            ha-card {
              border: none;
            }
        primary: ''
        secondary: ''
        entity: switch.lampe_piscine_2
        icon: mdi:car-light-high
        icon_color: |-
          {% if is_state('switch.lampe_piscine_2','on') %}
            #ffd426
            {% else %}
              grey
          {% endif %}

Si possible aussi, il serait bien que la hauteur des 2 cartes soit identique.
Merci pour votre aide.
Stéphane

[WarC0zes]

Bonjour,
tu peux tester ce code:

type: custom:stack-in-card
mode: vertical
card_mod:
  style: |
    ha-card {
      border: none;
    }
cards:
  - type: custom:stack-in-card
    mode: horizontal
    card_mod:
      style: |
        ha-card {
          border: none;
        }
    cards:
      - type: custom:mushroom-template-card
        card_mod:
          style: |
            ha-card {
              border: 1;
              width: 80% !important;
            }
        primary: Piscine
        secondary: '{{ states("sensor.blueriiot_piscine_temperature")}}°C'
        icon: mdi:pool
        icon_color: |-
          {% if is_state('switch.filtration_piscine','on') %}
            #00dcff
            {% else %}
              #000c80
          {% endif %}
      - type: custom:mini-graph-card
        card_mod:
          style: |
            ha-card {
              border: 1;
              margin-left: -100px;
            }
        entities:
          - sensor.blueriiot_piscine_temperature
        line_color: '#0FE6EA'
        line_width: 3
        hours_to_show: 48
        height: 80
        hour24: true
        animate: true
        font_size: 80
        show:
          state: false
          fill: true
          extrema: false
          icon: false
          name: false
          labels: hover
          points: false
  - type: custom:stack-in-card
    mode: horizontal
    card_mod:
      style: |
        ha-card {
          border: none;
        }
    cards:
      - type: custom:mushroom-template-card
        card_mod:
          style: |
            ha-card {
              border: none;
            }     
      - type: custom:mushroom-template-card
        card_mod:
          style: |
            ha-card {
              border: none;
            }
        primary: pH
        secondary: '{{ states ("sensor.blueriiot_piscine_ph")}}'
        icon: ''
        tap_action:
          action: none
        hold_action:
          action: none
        double_tap_action:
          action: none
      - type: custom:mushroom-template-card
        card_mod:
          style: |
            ha-card {
              border: none;
            }
        primary: Rédox
        secondary: '{{ states ("sensor.blueriiot_piscine_redox")}} mV'
        icon: ''
        tap_action:
          action: none
        hold_action:
          action: none
        double_tap_action:
          action: none
      - type: custom:mushroom-template-card
        card_mod:
          style: |
            ha-card {
              border: none;
            }
        primary: ''
        secondary: ''
        icon: mdi:pump
        entity: switch.filtration_piscine
        icon_color: |-
          {% if is_state('switch.filtration_piscine','on') %}
            orange
            {% else %}
              grey
          {% endif %}
      - type: custom:mushroom-template-card
        card_mod:
          style: |
            ha-card {
              border: none;
            }
        primary: ''
        secondary: ''
        icon: mdi:fountain
        entity: switch.relay_switch_1x2_5kw
        icon_color: |-
          {% if is_state('switch.relay_switch_1x2_5kw','on') %}
            #16A085
            {% else %}
              grey
          {% endif %}
      - type: custom:mushroom-template-card
        card_mod:
          style: |
            ha-card {
              border: none;
            }
        primary: ''
        secondary: ''
        entity: switch.lampe_piscine_2
        icon: mdi:car-light-high
        icon_color: |-
          {% if is_state('switch.lampe_piscine_2','on') %}
            #ffd426
            {% else %}
              grey
          {% endif %}

Pour mini-graph-card, j’ai rajouter height: 80 et dans card_mod margin-left: -100px;.

je t’es corriger, une petite erreur '{{ states(''sensor.blueriiot_piscine_temperature'')}}°C' , correction'{{ states("sensor.blueriiot_piscine_temperature")}}°C'.
c’est pas un ' double, mais un ".
Quand tu ecris dans l’editeur de carte '{{ states('sensor.blueriiot_piscine_temperature')}}°C' et que tu enregistre. L’editeur te l’ecrira comme telle '{{ states(''sensor.blueriiot_piscine_temperature'')}}°C' au lieu de '{{ states("sensor.blueriiot_piscine_temperature")}}°C'.

[stefane26]

Merci @WarC0zes
Ca marche très bien.
Autre question, comment mettre ne rouge la valeur du pH, par exemple, je ferai ensuite des conditions pour modifier la couleur suivant la valeur. Mais je n’ai pas trouvé le code pour seulement changer la couleur de la valeur.

[WarC0zes]

test ce code:

      - type: custom:mushroom-template-card
        card_mod:
          style:
            mushroom-state-info$: |
              .container {
                {% if states('sensor.blueriiot_piscine_ph')|float(0) > 7.4  %}
                  --card-secondary-color: red;
                {% elif states('sensor.blueriiot_piscine_ph')|float(0) < 7  %}
                  --card-secondary-color: red;          
                {% else %}
                  --card-secondary-color: green;
                {% endif %}
              }
            .: |
              ha-card {
                border: none;
              }
        primary: pH
        secondary: '{{ states ("sensor.blueriiot_piscine_ph")}}'
        icon: ''
        tap_action:
          action: none
        hold_action:
          action: none
        double_tap_action:
          action: none

[Cleya]

Salut, avec un peu de recherche, tu aurais pu tomber sur ce sujet :

Disposition graphique et esthétique

[image] Un exemple avec thème clair [image] et avec thème sombre. Sans card_mod, il n’est pas possible de fixer le fond (background) de la cutsom:mini-graph-card. Il est possible de fixer les couleurs pour chaque thème et ainsi avoir le background du custom_fields « value » qui s’adaptera automatiquement au thème, mais ce n’est pas le sujet. Le code (thème sombre) : type: custom:button-card aspect_ratio: 10/1.5 custom_fields: value: card: type: custom:button-card entity:…