Button-Card, impossible de reproduire l'exemple

[Greg-au-riz]

bonjour,

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

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

[Schumi]

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

[Greg-au-riz]

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

[Schumi]

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.

[Clemalex]

Merci de respecter le contexte des différents sujets

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.

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

[Greg-au-riz]

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.