Button-card - Monter le texte

Bonjour,
Voilà j’ai un p’tit problème d’affichage.
Pas moyen de trouver comment remonter la température en haut à droite :thinking: :pensive:

Screenshot_20210526-141736

Salut,

Sans le nom et le contenu de la carte, je pense que les spécialistes vont avoir un peu de mal à proposer un début de piste…

1 « J'aime »

Un petit tour vers la documentation officielle ?

Sinon il y a aussi :

https://forum.hacf.fr/t/mon-dashboard-journaldethomas/4017/23?u=clemalex

sinon je pense un :

custom_fields:
      topright:
        card:
          type: 'custom:button-card'
          entity: sensor.xxxxxxxxx

A adapter bien sur par tes besoins

C’est fait. J’ai même copié le code de ton lien…
Et il reste en bas à droite…

Ok je vais essayer.
Merci

Il reste toujours le plus important comme te l’a signalé @Pulpy-Luke : ton code:upside_down_face:

C’est étonnant :

:sweat_smile:

Le voilà

type: 'custom:button-card'
entity: sensor.cpu_temp
icon: 'mdi:raspberry-pi'
name: Pi4 8Go
style: |
  ha-card {
    --paper-card-background-color: 'rgba(11, 11, 11, 0.00)';
    box-shadow: 2px 2px rgba(0,0,0,0.0);
    border-radius: 15px;
  }
aspect_ratio: 1/1
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 i" "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
    - 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 'deepskyblue';
          if (entity.state >= 60 && entity.state < 80) return 'orange';
          else return 'red';
          ]]]
    - width: 70%
    - margin-top: '-10%'
    - animation: |
        [[[ if (entity.state == 'on') return 'blink 2s ease infinite'; ]]]
  custom_fields:
    temp:
      - align-self: middle
      - justify-self: start
    cpu:
      - padding-bottom: 2px
      - align-self: middle
      - justify-self: start
    ram:
      - padding-bottom: 2px
      - align-self: middle
      - justify-self: start
      - '--text-color-sensor': >-
          [[[ if (states["sensor.memory_use_percent"].state > 80) return "red";
          ]]]
    sd:
      - align-self: middle
      - justify-self: start
      - '--text-color-sensor': >-
          [[[ if (states["sensor.disk_use_percent_config"].state > 80) return
          "red"; ]]]
custom_fields:
  temp: |
    [[[
      return `<ha-icon
        icon="mdi:thermometer"
        style="width: 12px; height: 12px; color: yellow;">
        </ha-icon><span>${entity.state}°C</span>`
      ]]]
  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>`
    ]]]
  sd: |
    [[[
      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_config'].state}%</span></span>`
    ]]]

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 »

Argggg effectivement. Tout rentre dans l’ordre !!!

Merci à toi