Button-Card, impossible de reproduire l'exemple

bonjour,

j’aurai besoin d’un petit coup de main svp. J’essaye de reproduire cette carte
custom_fields_2

mais je suis coincé, je retrouve sans rien d’affiché, meme pas un message d’erreur.
Voici le code

  title: Home
  icon: 'mdi:raspberry-pi'
  path: rasp
  cards:
    cards:
      type: custom:button-card
      entity: sensor.cpu_temp
      icon: 'mdi:raspberry-pi'
      aspect_ratio: 1/1
      name: HassOS
      styles:
        card:
          - background-color: '#000044'
          - border-radius: 10%
          - padding: 10%
          - color: ivory
          - font-size: 10px
          - text-shadow: 0px 0px 5px black
          - text-transform: capitalize
        grid:
          - grid-template-areas: '"i temp" "n n" "cpu cpu" "ram ram" "sd sd"'
          - grid-template-columns: 1fr 1fr
          - grid-template-rows: 1fr min-content min-content min-content min-content
        name:
          - font-weight: bold
          - font-size: 13px
          - color: white
          - align-self: middle
          - justify-self: start
          - padding-bottom: 4px
        img_cell:
          - justify-content: start
          - align-items: start
          - margin: none
        icon:
          - color: >
              [[[
                if (entity.state < 60) return '#F54436';
                if (entity.state >= 60 && entity.state < 80) return '#F54436';
                else return '#F54436';
              ]]]
          - width: 70%
          - margin-top: -10%
        custom_fields:
          temp:
            - align-self: start
            - justify-self: end
          cpu:
            - padding-bottom: 2px
            - align-self: middle
            - justify-self: start
            - --text-color-sensor: '[[[ if (states["sensor.raspi_cpu"].state > 80) return "#F54436"; ]]]'
          ram:
            - padding-bottom: 2px
            - align-self: middle
            - justify-self: start
            - --text-color-sensor: '[[[ if (states["sensor.raspi_cpu"].state > 80) return "#F54436"; ]]]'
          sd:
            - align-self: middle
            - justify-self: start
            - --text-color-sensor: '[[[ if (states["sensor.raspi_cpu"].state > 80) return "#F54436"; ]]]'
      custom_fields:
        temp: >
          [[[
            return `<ha-icon
              icon="mdi:thermometer"
              style="width: 12px; height: 12px; color: '#F54436';">
              </ha-icon><span>${entity.state}°C</span>`
          ]]]
        cpu: >
          [[[
            return `<ha-icon
              icon="mdi:server"
              style="width: 12px; height: 12px; color: '#F54436';">
              </ha-icon><span>CPU: <span style="color: var(--text-color-sensor);">${states['sensor.raspi_cpu'].state}%</span></span>`
          ]]]
        ram: >
          [[[
            return `<ha-icon
              icon="mdi:memory"
              style="width: 12px; height: 12px; color: '#F54436';">
              </ha-icon><span>RAM: <span style="color: var(--text-color-sensor);">${states['sensor.raspi_cpu'].state}%</span></span>`
          ]]]
        sd: >
          [[[
            return `<ha-icon
              icon="mdi:harddisk"
              style="width: 12px; height: 12px; color: #F54436;">
              </ha-icon><span>SD: <span style="color: var(--text-color-sensor);">${states['sensor.raspi_cpu'].state}%</span></span>`
          ]]]

              - template: edge
                type: 'custom:button-card'

              type: horizontal-stack

      type: vertical-stack

déjà tes sensors ne sont pas correcte. tu as les mêmes pour les trois. (cpu-ram-sd)

je sais c’est juste pour les tests et les couleurs sont toutes les même aussi

aspect_ratio: 1/1
custom_fields:
  cpu: |
    [[[
      return `<ha-icon
        icon="mdi:server"
        style="width: 12px; height: 12px; color: deepskyblue;">
        </ha-icon><span>CPU: <span style="color: var(--text-color-sensor);">${states['sensor.processor_use_percent'].state}%</span></span>`
    ]]]
  ram: |
    [[[
      return `<ha-icon
        icon="mdi:memory"
        style="width: 12px; height: 12px; color: deepskyblue;">
        </ha-icon><span>RAM: <span style="color: var(--text-color-sensor);">${states['sensor.memory_use_percent'].state}%</span></span>`
    ]]]
  ssd: |
    [[[
      return `<ha-icon
        icon="mdi:harddisk"
        style="width: 12px; height: 12px; color: deepskyblue;">
        </ha-icon><span>SD: <span style="color: var(--text-color-sensor);">${states['sensor.disk_use_percent'].state}%</span></span>`
    ]]]
  temp: |
    [[[
      return `<ha-icon
        icon="mdi:thermometer"
        style="width: 12px; height: 12px; color: yellow;">
        </ha-icon><span>${entity.state}°C</span>`
    ]]]
entity: sensor.processor_temperature
icon: mdi:raspberry-pi
name: NUC
styles:
  card:
    - background-color: null
    - border-radius: 0%
    - padding: 10%
    - color: ivory
    - font-size: 20px
    - text-shadow: 0px 0px 5px black
    - text-transform: capitalize
  custom_fields:
    cpu:
      - padding-bottom: 2px
      - align-self: middle
      - justify-self: start
      - '--text-color-sensor': >-
          [[[ if (states["sensor.memory_use_percent"].state > 80) return "red";
          ]]]
    ram:
      - padding-bottom: 2px
      - align-self: middle
      - justify-self: start
      - '--text-color-sensor': >-
          [[[ if (states["sensor.memory_use_percent"].state > 80) return "red";
          ]]]
    ssd:
      - align-self: middle
      - justify-self: start
      - '--text-color-sensor': >-
          [[[ if (states["sensor.disk_use_percent"].state > 80) return "red";
          ]]]
    temp:
      - align-self: start
      - justify-self: end
  grid:
    - grid-template-areas: '"i temp" "n n" "cpu cpu" "ram ram" "ssd ssd"'
    - grid-template-columns: 1fr 1fr
    - grid-template-rows: 1fr min-content min-content min-content min-content
  icon:
    - color: |
        [[[
          if (entity.state < 50) return 'lime';
          if (entity.state >= 50 && entity.state < 70) return 'orange';
          else return 'red';
        ]]]
    - width: 70%
    - margin-top: '-10%'
  img_cell:
    - justify-content: start
    - align-items: start
    - margin: none
  name:
    - font-weight: bold
    - font-size: 15px
    - color: white
    - align-self: middle
    - justify-self: start
    - padding-bottom: 4px
type: custom:button-card

moi c’est ce que j’ai et ca fonctionne.

:warning: Merci de respecter le contexte des différents sujets :warning:

J’ai déplacé ta question ici. Elle n’a rien a faire dans le thème de minimalist.

Merci de prendre le temps de créer un sujet.

PS: Un sujet dédié à button-card existe en plus. Merci d’utiliser la recherche.

:information_source: Le temps que les modérateurs passent à traiter ce genre de soucis est d’autant de temps qu’ils ne passent pas à aider.

Merci d’être plus attentif :+1:

:hacf:

toutes mes excuses, je me croyais à la bonne place car je n’arrive pas à l’intégrer avec les thèmes et le design des cartes minimalist.

1 « J'aime »