Hello,
I created this customized card to monitor the external temperature:
using the following code:
type: custom:button-card
thermostat:
template:
- base
show_state: false
variables:
thermostat_on: |
[[[
return ['yes'].indexOf(entity === undefined || entity.attributes.heating) !==-1;
]]]
entity_id: |
[[[ return !entity || entity.entity_id; ]]]
custom_fields:
temp: >
[[[ return '🌡️'+
states['sensor.termostato_thermostat_temperatura_esterna'].state +' °C'; ]]]
graph:
card:
type: custom:mini-graph-card
entities:
- sensor.termostato_thermostat_temperatura_esterna
color_thresholds:
- value: 20.5
color: "#f39c12"
- value: 23.5
color: "#fd3721"
hours_to_show: 96
points_per_hour: 0.5
line_width: 3
height: 70
name: Temperatura esterna
show:
name: true
icon: false
state: false
label: false
legend: false
points: false
fill: fade
extrema: true
average: true
card_mod:
style: |
ha-card {
font-size: 1.5vw !important;
background: none !important;
border: none !important;
}
@media (max-width: 1440px) {
ha-card {
font-size: 1.2vw !important;
}
}
ha-card[fill] .info {
padding-bottom: 0 !important;
}
info {
opacity: 1.5 !important;
}
.info__item__time {
display: none !important;
}
.graph__labels {
top: -10% !important;
}
@media (max-width: 800px) {
div.info.flex {
display: none;
}
}
styles:
grid:
- grid-template-areas: |
"temp"
"graph"
- grid-template-columns: 1fr
- grid-template-rows: fit-content(100%) min-content 1fr
- gap: 0
card:
- color: rgba(255, 255, 255, 0.6)
- background: linear-gradient(to top, rgba(53,59,83,0.8) 0%, rgba(10,14,34,0.8) 100%)
- overflow: hidden
- padding: 0.0% 0.0% 0.0% 0.0%
name:
- overflow: inherit
custom_fields:
temp:
- font-size: |
[[[
if (window.matchMedia('(max-width: 800px)').matches)
return '1.2em';
if (window.matchMedia('(max-width: 1500px)').matches)
return '5vw';
else return '1.6vw';
]]]
- font-weight: 500
- letter-spacing: "-1px"
- color: |
[[[
return variables.thermostat_on
? '#FF9500'
: '#3583b6';
]]]
But I’m not able to move the name “Temperatura esterna” in the center and change the font size, how could I do this?
Another change I’d like to do is to change the vertical spacing in the extrema and average values, I mean I would like move away slightly in vertical the words “Min”, “Avg” and “Max” from their values. Is this possible?