Grille dans une grille?

Spl4sh · Octobre 17, 2023, 7:00

Mon problème

Bonjour à tous, je suis nouveau sur Home Assistant que je découvre de jour en jour ! J’ai une question qui est peut être bête, mais je n’arrive pas à faire cela (la partie entourée en vert sur l’image jointe)

Faut-il faire une grille dans une grille ? Ou une grille dans un horizontal_stack ?

Merci d’avance pour votre aide !

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.21-v8
arch	aarch64
timezone	Europe/Paris
config_dir	/config

Home Assistant Community Store

GitHub API	ok
GitHub Content	ok
GitHub Web	ok
GitHub API Calls Remaining	5000
Installed Version	1.33.0
Stage	running
Available Repositories	1311
Downloaded Repositories	7

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	28.5 GB
disk_used	3.5 GB
healthy	true
supported	true
board	rpi3-64
supervisor_api	ok
version_api	ok
installed_addons	Terminal & SSH (9.7.1), File editor (5.6.0)

Dashboards

dashboards	2
resources	5
views	4
mode	storage

Recorder

oldest_recorder_run	8 octobre 2023 à 07:04
current_recorder_run	16 octobre 2023 à 11:25
estimated_db_size	29.89 MiB
database_engine	sqlite
database_version	3.41.2

___

jerome6994 · Octobre 17, 2023, 7:52

Bonjour

Je ne suis pas un spécialiste du lovelace et du jeu de configuration des cartes mais voici ce que je viens de faire pour te répondre

Exemple

type: horizontal-stack
cards:
  - type: vertical-stack
    cards:
      - type: horizontal-stack
        cards:
          - show_name: false
            show_icon: true
            show_state: true
            type: button
            tap_action:
              action: toggle
            entity: sensor.syno_maison_923_utilisation_de_la_memoire_reelle
          - show_name: false
            show_icon: true
            show_state: true
            type: button
            tap_action:
              action: toggle
            entity: sensor.syno_maison_923_utilisation_du_processeur_totale
      - type: horizontal-stack
        cards:
          - show_name: false
            show_icon: true
            show_state: true
            type: button
            tap_action:
              action: toggle
            entity: sensor.syno_maison_923_volume_1_volume_utilise
          - show_name: false
            show_icon: true
            show_state: true
            type: button
            tap_action:
              action: toggle
            entity: sensor.syno_maison_923_volume_1_espace_utilise
  - type: vertical-stack
    cards:
      - type: gauge
        entity: sensor.syno_maison_923_temperature
        max: 100
        severity:
          green: 0
          yellow: 60
          red: 80
        needle: true
        min: 0
        unit: °C
        name: T° Synology

avec le visuel :

AlexHass · Octobre 17, 2023, 8:14

Salut,

Grille de grilles, ou un empilement de piles, ça marche
C’est après juste une question de rendu à l’affichage, pour des histoires de conservation ou non de forme et dimensions.
Et après aussi faut pas se perdre dans le dédale que peut devenir l’interface de config de la carte

Spl4sh · Octobre 17, 2023, 9:53

Merci beaucoup ! J’ai de quoi faire avec toutes ces ressources

Spl4sh · Octobre 17, 2023, 10:55

Dernière petite question, comment faire pour que la hauteur de la carte de droite tombe pile poil avec la hauteur des 4 cartes de gauche ? Merci d’avance !

jerome6994 · Octobre 17, 2023, 11:27

Je ne sais pas du tout mais surement en jouant avec du CSS

AlexHass · Octobre 17, 2023, 4:32

C’est ce que j’entendais pas dimensions qui changent, normalement la grille à un réglage qui devrait permettre ça

anon41081891 · Octobre 17, 2023, 4:37

Sinon, tu as layout-card qui permet de faire ça assez facilement. Ou alors une button-card et des custom_fields…

Spl4sh · Octobre 18, 2023, 6:29

Je vais chercher, merci

anon41081891 · Octobre 18, 2023, 9:24

Un visuel qui colle à ta demande :

type: custom:layout-card
layout_type: custom:grid-layout
layout:
  grid-template-columns: 25% 25% 50%
  grid-template-rows: 50% 50%
  grid-template-areas: |
    "zone1 zone3 zone5"
    "zone2 zone4 zone5"
cards:
  - type: custom:button-card
    view_layout:
      grid-area: zone1
    entity: sensor.processor_use
    name: CPU
    show_state: true
    styles:
      grid:
        - grid-template-areas: '"i" "n" "s"'
        - grid-template-rows: min-content min-content 1fr
      card:
        - aspect-ratio: 1/1
  - type: custom:button-card
    view_layout:
      grid-area: zone3
    entity: sensor.memory_use_percent
    name: Memory
    show_state: true
    styles:
      grid:
        - grid-template-areas: '"i" "n" "s"'
        - grid-template-rows: min-content min-content 1fr
      card:
        - aspect-ratio: 1/1
  - type: custom:button-card
    view_layout:
      grid-area: zone4
    entity: sensor.disk_use_percent_config
    name: Use %
    show_state: true
    styles:
      grid:
        - grid-template-areas: '"i" "n" "s"'
        - grid-template-rows: min-content min-content 1fr
      card:
        - aspect-ratio: 1/1
  - type: gauge
    entity: sensor.processor_temperature
    max: 100
    severity:
      green: 0
      yellow: 60
      red: 80
    needle: true
    min: 0
    unit: °C
    name: CPU temp
    view_layout:
      grid-area: zone5
  - type: custom:button-card
    view_layout:
      grid-area: zone2
    entity: sensor.disk_use
    name: Use Vol.
    show_state: true
    styles:
      grid:
        - grid-template-areas: '"i" "n" "s"'
        - grid-template-rows: min-content min-content 1fr
      card:
        - aspect-ratio: 1/1

Spl4sh · Octobre 18, 2023, 11:18

Merci beaucoup ! Cela ma permis de découvrir la custom:layout-card

anon41081891 · Octobre 18, 2023, 11:23

De rien

Cette carte est pratique mais regarde les possibilités qu’offre la carte button-card (c’est à mon sens LA CARTE à maitriser, si tant est qu’il soit envisageable de la maitriser tellement elle offre de possibilités)

Spl4sh · Octobre 18, 2023, 11:28

Yes ! Il y a la possibilité de mettre une carte de type gauge dans une button-card ? Effectivement je crois que c’est la carte ultime

anon41081891 · Octobre 18, 2023, 11:29

Oui, tu peux inclure n’importe quelle carte dans une button-card via les custom_fields :

J’ai réduis la taille de la gauge de 50% et son opacité à 30% juste pour te montrer

type: custom:layout-card
layout_type: custom:grid-layout
layout:
  grid-template-columns: 25% 25% 50%
  grid-template-rows: 50% 50%
  grid-template-areas: |
    "zone1 zone3 zone5"
    "zone2 zone4 zone5"
cards:
  - type: custom:button-card
    view_layout:
      grid-area: zone1
    entity: sensor.processor_use
    name: CPU
    show_state: true
    styles:
      grid:
        - grid-template-areas: '"i" "n" "s"'
        - grid-template-rows: min-content min-content 1fr
      card:
        - aspect-ratio: 1/1
  - type: custom:button-card
    view_layout:
      grid-area: zone3
    entity: sensor.memory_use_percent
    name: Memory
    show_state: true
    styles:
      grid:
        - grid-template-areas: '"i" "n" "s"'
        - grid-template-rows: min-content min-content 1fr
      card:
        - aspect-ratio: 1/1
  - type: custom:button-card
    view_layout:
      grid-area: zone4
    entity: sensor.disk_use_percent_config
    name: Use %
    show_state: true
    styles:
      grid:
        - grid-template-areas: '"i" "n" "s"'
        - grid-template-rows: min-content min-content 1fr
      card:
        - aspect-ratio: 1/1
  - type: custom:button-card
    custom_fields:
      graph:
        card:
          type: gauge
          entity: sensor.processor_temperature
          max: 100
          severity:
            green: 0
            yellow: 60
            red: 80
          needle: true
          min: 0
          unit: °C
          name: CPU temp
          style: |
            ha-card {
              box-shadow: none;
              border: none;
            }
    view_layout:
      grid-area: zone5
    styles:
      card:
        - aspect-ratio: 1/1.02
      custom_fields:
        graph:
          - position: absolute
          - left: 25%
          - top: 25%
          - width: 50%
          - height: 50%
          - opacity: 0.3
    style: |
      ha-card {
        box-shadow: none;
      }
  - type: custom:button-card
    view_layout:
      grid-area: zone2
    entity: sensor.disk_use
    name: Use Vol.
    show_state: true
    styles:
      grid:
        - grid-template-areas: '"i" "n" "s"'
        - grid-template-rows: min-content min-content 1fr
      card:
        - aspect-ratio: 1/1