Hello everyone. I haven’t been able to solve this problem for a long time. Maybe someone can help me solve it. I have a button card where I am showing weather info. The problem is that I can’t get the temperature to adapt well to the size of the device. I tried it with px, en and vw but I can’t. Thank you very much
Computer Screen
Cellphone
#################################################
# #
# CLIMA #
# #
#################################################
clima:
variables:
state: >
[[[ return entity === undefined || entity.state;]]]
timeout: >
[[[ return entity === undefined || Date.now() - Date.parse(entity.last_changed); ]]]
light_color: >
[[[ return entity === undefined ? 'var(--state-icon-color)' : 'var(--button-card-light-color-no-temperature)'; ]]]
aspect_ratio: 1/1
show_state: true
show_icon: false # linea const tablet states['switch.galaxy_tab_a_screensaver'];
tap_action:
ui_sound_tablet: |
[[[
const tablet = 1;
const screensaver = states[tablet] === undefined || states[tablet].state;
if (variables.state === 'off' && screensaver === 'off') {
hass.callService('media_player', 'play_media', {
entity_id: 'media_player.tab_10_pro',
media_content_id: '/local/sound/on.m4a',
media_content_type: 'music'
});
}
if (variables.state === 'on' && screensaver === 'off') {
hass.callService('media_player', 'play_media', {
entity_id: 'media_player.tab_10_pro',
media_content_id: '/local/sound/off.m4a',
media_content_type: 'music'
});
}
]]]
animation_card: |
[[[
const animation_speed_ms = 900;
const animation = `card_bounce ${animation_speed_ms}ms cubic-bezier(0.22, 1, 0.36, 1)`;
this.shadowRoot.getElementById("card").style.animation = animation;
window.setTimeout(() => {
this.shadowRoot.getElementById("card").style.animation = "none";
}, animation_speed_ms)
]]]
action: toggle
haptic: medium
styles:
grid:
- grid-template-areas: |
"icon icon icon"
"icon icon icon"
"n n temperature"
"s s temperature"
- grid-template-columns: repeat(3, 1fr)
- grid-template-rows: auto repeat(3, min-content)
- align-items: start
name:
- justify-self: start
- line-height: 100%
state:
- justify-self: start
- line-height: 100%
card:
- font-family: Sf Text
- border-radius: var(--custom-button-card-border-radius)
- -webkit-tap-highlight-color: rgba(0,0,0,0)
- transition: none
- padding: 10% 10% 6% 10%
- --mdc-ripple-color: >
[[[
return 'rgba(255, 255, 255, 0.3)';
]]]
- color: >
[[[
return 'rgba(255, 255, 255, 0.3)';
]]]
custom_fields:
temperature: [letter-spacing: 0.03vw, font-size: 2vw]
extra_styles: |
#temperature {
font-size: 1vw;
letter-spacing: 0.05vw;
}
/* portrait */
@media screen and (max-width: 1200px) {
#temperature {
font-size: 5vw;
letter-spacing: 0.05vw;
}
}
/* phone */
@media screen and (max-width: 800px) {
#temperature {
font-size: 20px,
letter-spacing: 0.03vw,
}
}
custom_fields:
temperature: >
[[[
const temp = entity.attributes.temperature
return `${temp}°`
]]]
icon: >
[[[
const hoy = new Date();
var hora = hoy.getHours() + ':' + hoy.getMinutes()
if (variables.state === 'cloudy')
if (states['sun.sun'].state === "above_horizon")
return '<img src="/local/img/forecast/mostly_sunny_light_color_96dp.png">';
else
return '<img src="/local/img/forecast/mostly_clear_night_light_color_96dp.png">';
else if (variables.state === 'sunny')
return '<img src="/local/img/forecast/sunny_light_color_96dp.png">';
else if (variables.state === 'clear-night')
return '<img src="/local/img/forecast/clear_night_dark_color_96dp.png">';
else if (variables.state === 'rainy')
return '<img src="/local/img/forecast/showers_rain_light_color_96dp.png">';
else if (variables.state === 'partlycloudy')
if (states['sun.sun'].state === "above_horizon")
return '<img src="/local/img/forecast/partly_cloudy_light_color_96dp.png">';
else
return '<img src="/local/img/forecast/partly_cloudy_night_light_color_96dp.png">';
else if (variables.state === 'lightning-rainy')
if (states['sun.sun'].state === "above_horizon")
return '<img src="/local/img/forecast/scattered_showers_day_dark_color_96dp.png">';
else
return '<img src="/local/img/forecast/scattered_showers_night_dark_color_96dp.png">';
else if (variables.state === 'lightning')
return '<img src="/local/img/forecast/isolated_scattered_tstorms_day_dark_color_96dp.png">';
else if (variables.state === 'pouring')
return '<img src="/local/img/forecast/heavy_rain_dark_color_96dp.png">';
else if (variables.state === 'snowy')
return '<img src="/local/img/forecast/snow_showers_snow_dark_color_96dp.png">';
else if (variables.state === 'snowy-rainy')
return '<img src="/local/img/forecast/wintry_mix_rain_snow_dark_color_96dp.png">';
else if (variables.state === 'fog')
return '<img src="/local/img/forecast/haze_fog_dust_smoke_dark_color_96dp.png">';
else if (variables.state === 'exceptional')
return '';
else
return variables.state;
]]]