Carte formatage

BLIEK · Avril 25, 2025, 7:44

Bonjour,

Je suis en train d’améliorer mon DashBoard de mon Home Assistant.
Je rencontre deux soucis et je souhaiterai mettre en place une tap_action.

Soucis:

J’aimerai pour avoir des pourcentage sur ma carte en mauve, pourtant dans les service Proxmox je les ai bien en %.
Est il possible de pouvoir centrer les 3 cartes (c’est à dire la bleue/verte/Mauve)

Possibilité:

est il possible de pouvoir avoir une « tap action », c’est à dire que j’ai créer une carte très détaillée de HAAS et je souhaiterai dès que je clique sur la carte verte je sois redirigé directement vers cette carte détaillée? Ci-joint mon code de ma carte.

type: horizontal-stack
cards:
  - type: custom:button-card
    entity: sensor.nasdamien_temperature
    icon: mdi:nas
    name: Synology
    styles:
      card:
        - height: 130px
        - width: 120px
        - background-color: "#85C1E9"
        - border-radius: 20% 5px
        - padding: 10%
        - color: "#eee"
        - font-size: 12px
        - font-weight: bold
      grid:
        - grid-template-areas: " \"n n\" \"i temp\" \"cpu cpu\" \"ram ram\" \"sd sd\""
        - grid-template-columns: 1fr 1fr
        - grid-template-rows: 1fr 3fr 1fr 1fr 1fr
      name:
        - font-weight: bold
        - font-size: 13px
        - align-self: middle
        - justify-self: start
        - padding-bottom: 4px
        - color: var(--text-color)
      img_cell:
        - justify-content: start
        - align-items: start
        - margin: none
      icon:
        - color: |
            [[[
              if (entity.state < 60) return '#eee';
              if (entity.state >= 60 && entity.state < 80) return 'orange';
              else return 'red';
              ]]]
        - width: 100%
        - margin-top: "-10%"
        - margin-left: "-10%"
        - animation: |
            [[[ if (entity.state == 'on') return 'blink 2s ease infinite'; ]]]
      custom_fields:
        temp:
          - justify-self: start
          - transform: scale(1.5)
          - margin-left: 10px
          - margin-top: "-10px"
        cpu:
          - padding-bottom: 2px
          - align-self: middle
          - margin-left: "-5px"
          - justify-self: start
        ram:
          - padding-bottom: 2px
          - margin-left: "-5px"
          - align-self: middle
          - justify-self: start
          - "--text-color-sensor": >-
              [[[ if
              (states["sensor.nasdamien_utilisation_de_la_memoire_reelle"].state
              > 80) return "red"; ]]]
        sd:
          - align-self: middle
          - margin-left: "-5px"
          - justify-self: start
          - "--text-color-sensor": >-
              [[[ if (states["sensor.nasdamien_volume_1_volume_utilise"].state >
              80) return "red"; ]]]
    custom_fields:
      temp: |
        [[[
          return `<ha-icon
            icon="mdi:thermometer"
            style="width: 12px; height: 12px; color: CCF381;">
            </ha-icon><span>${entity.state}°C</span>`
          ]]]
      cpu: |
        [[[
          return `<ha-icon
            icon="mdi:server"
            style="width: 12px; height: 12px;">
            </ha-icon><span> CPU: <span style="color: var(--text-color-sensor);">${states['sensor.nasdamien_utilisation_du_processeur_totale'].state}%</span></span>`
        ]]]
      ram: |
        [[[
          return `<ha-icon
            icon="mdi:memory"
            style="width: 12px; height: 12px;">
            </ha-icon><span> RAM: <span style="color: var(--text-color-sensor);">${states['sensor.nasdamien_utilisation_de_la_memoire_reelle'].state}%</span></span>`
        ]]]
      sd: |
        [[[
          return `<ha-icon
            icon="mdi:harddisk"
            style="width: 12px; height: 12px;">
            </ha-icon><span> SD: <span style="color: var(--text-color-sensor);">${states['sensor.nasdamien_volume_1_volume_utilise'].state}%</span></span>`
        ]]]
  - type: custom:button-card
    entity: sensor.system_monitor_utilisation_du_processeur
    icon: mdi:home-assistant
    name: HAAS
    styles:
      card:
        - height: 130px
        - width: 120px
        - background-color: "#7DCEA0"
        - border-radius: 20% 5px
        - padding: 10%
        - color: "#eee"
        - font-size: 12px
        - font-weight: bold
      grid:
        - grid-template-areas: " \"n n\" \"i temp\" \"actuel actuel\" \"dispo dispo\" \"sd sd\""
        - grid-template-columns: 1fr 1fr
        - grid-template-rows: 1fr 3fr 1fr 1fr 1fr
      name:
        - font-weight: bold
        - font-size: 13px
        - align-self: middle
        - justify-self: start
        - padding-bottom: 4px
        - color: var(--text-color)
      img_cell:
        - justify-content: start
        - align-items: start
        - margin: none
      icon:
        - color: |
            [[[
              if (entity.state < 60) return '#eee';
              if (entity.state >= 60 && entity.state < 80) return 'orange';
              else return 'red';
              ]]]
        - width: 85%
        - margin-top: "-10%"
        - margin-left: "-10%"
        - animation: |
            [[[ if (entity.state == 'on') return 'blink 2s ease infinite'; ]]]
      custom_fields:
        temp:
          - justify-self: start
          - transform: scale(1.5)
          - margin-left: 10px
          - margin-top: "-10px"
        actuel:
          - padding-bottom: 2px
          - align-self: middle
          - margin-left: "-5px"
          - justify-self: start
        dispo:
          - padding-bottom: 2px
          - margin-left: "-5px"
          - align-self: middle
          - justify-self: start
          - "--text-color-sensor": >-
              [[[ if
              (states["sensor.nasdamien_utilisation_de_la_memoire_reelle"].state
              > 80) return "red"; ]]]
        sd:
          - align-self: middle
          - margin-left: "-5px"
          - justify-self: start
          - "--text-color-sensor": >-
              [[[ if (states["sensor.nasdamien_volume_1_volume_utilise"].state >
              80) return "red"; ]]]
    custom_fields:
      temp: |
        [[[
          return `<ha-icon
            icon="mdi:memory"
            style="width: 12px; height: 12px; color: CCF381;">
            </ha-icon><span>${entity.state}%</span>`
          ]]]
      actuel: |
        [[[
          return `<ha-icon
            icon="mdi:home-assistant"
            style="width: 12px; height: 12px;">
            </ha-icon><span> Actuel: <span style="color: var(--text-color-sensor);">${states['sensor.current_version'].state}</span></span>`
        ]]]
      dispo: |
        [[[
          return `<ha-icon
            icon="mdi:home-assistant"
            style="width: 12px; height: 12px;">
            </ha-icon><span> Dispo: <span style="color: var(--text-color-sensor);">${states['sensor.home_assistant_versions'].state}</span></span>`
        ]]]
      sd: |
        [[[
          return `<ha-icon
            icon="mdi:harddisk"
            style="width: 12px; height: 12px;">
            </ha-icon><span> SD: <span style="color: var(--text-color-sensor);">${states['sensor.system_monitor_utilisation_du_disque'].state}%</span></span>`
        ]]]
  - type: custom:button-card
    entity: sensor.node_proxmox_virtual_machines_running
    icon: mdi:virtual-reality
    name: Proxmox
    styles:
      card:
        - height: 130px
        - width: 120px
        - background-color: "#D7BDE2"
        - border-radius: 20% 5px
        - padding: 10%
        - color: "#eee"
        - font-size: 12px
        - font-weight: bold
      grid:
        - grid-template-areas: " \"n n\" \"i temp\" \"cpu cpu\" \"ram ram\" \"sd sd\""
        - grid-template-columns: 1fr 1fr
        - grid-template-rows: 1fr 3fr 1fr 1fr 1fr
      name:
        - font-weight: bold
        - font-size: 13px
        - align-self: middle
        - justify-self: start
        - padding-bottom: 4px
        - color: var(--text-color)
      img_cell:
        - justify-content: start
        - align-items: start
        - margin: none
      icon:
        - color: |
            [[[
              if (entity.state < 60) return '#eee';
              if (entity.state >= 60 && entity.state < 80) return 'orange';
              else return 'red';
              ]]]
        - width: 100%
        - margin-top: "-10%"
        - margin-left: "-10%"
        - animation: |
            [[[ if (entity.state == 'on') return 'blink 2s ease infinite'; ]]]
      custom_fields:
        temp:
          - justify-self: start
          - transform: scale(1.5)
          - margin-left: 10px
          - margin-top: "-10px"
        cpu:
          - padding-bottom: 2px
          - align-self: middle
          - margin-left: "-5px"
          - justify-self: start
        ram:
          - padding-bottom: 2px
          - margin-left: "-5px"
          - align-self: middle
          - justify-self: start
          - "--text-color-sensor": >-
              [[[ if
              (states["sensor.nasdamien_utilisation_de_la_memoire_reelle"].state
              > 80) return "red"; ]]]
        sd:
          - align-self: middle
          - margin-left: "-5px"
          - justify-self: start
          - "--text-color-sensor": >-
              [[[ if (states["sensor.nasdamien_volume_1_volume_utilise"].state >
              80) return "red"; ]]]
    custom_fields:
      temp: |
        [[[
          return `<ha-icon
            icon="mdi:server"
            style="width: 12px; height: 12px; color: CCF381;">
            </ha-icon><span> ${entity.state} </span>`
          ]]]
      cpu: |
        [[[
          return `<ha-icon
            icon="mdi:server"
            style="width: 12px; height: 12px;">
            </ha-icon><span> CPU: <span style="color: var(--text-color-sensor);">${states['sensor.node_proxmox_cpu_used'].state}%</span></span>`
        ]]]
      ram: |
        [[[
          return `<ha-icon
            icon="mdi:memory"
            style="width: 12px; height: 12px;">
            </ha-icon><span> RAM: <span style="color: var(--text-color-sensor);">${states['sensor.node_proxmox_memory_used_percentage'].state}%</span></span>`
        ]]]
      sd: |
        [[[
          return `<ha-icon
            icon="mdi:harddisk"
            style="width: 12px; height: 12px;">
            </ha-icon><span> SD: <span style="color: var(--text-color-sensor);">${states['sensor.node_proxmox_disk_used_percentage'].state}%</span></span>`
        ]]]
grid_options:
  rows: 1

Je vous remercie par avance et je vous souhaite une bonne soirée.

WarC0zes · Avril 26, 2025, 4:54

Bonjour,

format a 1 chiffre après la virgule.

parseFloat(states['sensor.temperature_humidity_sensor_exterieur_av_temperature'].state).toFixed(1)

pour centrer les cartes, tu peux ajouter un margin-left sur la première.

styles:
  card:
    - margin-left: 75px

Tu peux utiliser browser-mod qui te permet d’ouvrir un popup avec ta carte détaillée.
Si c’est sur un autre onglet du dashbaord, tu peux utiliser naviguer avec le tap_action.
Exemple :

tap_action:
  action: navigate
  navigation_path: /lovelace/0/

BLIEK · Avril 26, 2025, 7:52

Bonsoir WarC0zes,

Merci bcp pour ton aide, j’ai pu tout modifier !

Bonne soirée à toi.

system · Avril 28, 2025, 7:52

Ce sujet a été automatiquement fermé après 2 jours. Aucune réponse n’est permise dorénavant.