Button-card - Monter le texte

Entraide Home Assistant
9

Tu n’est pas en face de la documentation… :wink:

En clair, tu n’indique pas où se trouve ton champ personnalisé temp représentant la température…

Mets toi en face de la documentation et tout va rentrer dans l’ordre :+1:

- grid-template-areas: '"i temp" "n n" "cpu cpu" "ram ram" "sd sd"'

Pour la petit explication en français :

  • ``grid-template-areas : définition de la position des champs (indique le nombre de colonne et le nombre de ligne

Ce qui pour ton icone pour donner un autre exemple :

image

type: 'custom:button-card'
entity: mailbox.demomailbox
icon: 'mdi:raspberry-pi'
name: Pi4 8Go
styles:
  card:
    - height: 130px
    - width: 120px
    - background-color: '#243665'
    - 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: end
      - '--text-color-sensor': '[[[ if (states["mailbox.demomailbox"].state > 80) return "red"; ]]]'
    sd:
      - align-self: middle
      - margin-left: '-5px'
      - justify-self: start
      - '--text-color-sensor': '[[[ if (states["mailbox.demomailbox"].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['mailbox.demomailbox'].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['mailbox.demomailbox'].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['mailbox.demomailbox'].state}%</span></span>`
    ]]]
2 « J'aime »