Bonjour,
Voilà j’ai un p’tit problème d’affichage.
Pas moyen de trouver comment remonter la température en haut à droite
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…
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
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…
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
- 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 :

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>`
]]]
Argggg effectivement. Tout rentre dans l’ordre !!!
Merci à toi