My clock on my dashboard is not updating frequently so the time is always behind, if i refresh it syncs to the current time. Does anyone know what could cause this?
I’m using a custom button card in a grid layout and this is my clock yaml - its combined with a weather card.
wide_header:
template:
- base
aspect_ratio: 4/1
show_name: false
show_state: false
show_label: true
show_entity_picture: true
variables:
day: ''
time: ''
date: ''
gpt: ''
tilt_enable: >
[[[ return false; ]]]
tap_action: block
custom_fields:
# condition: >
# [[[ return states[variables.condition].state; ]]]
gpt: >
[[[
let gpt = states[variables.condition].state;
return `<span class="gpttext">${gpt} </span>`;
]]]
time: >
[[[ return states[variables.time].state; ]]]
date: >
[[[ return states[variables.day].state + " " + "/" + " " + states[variables.date].state; ]]]
temp: >
[[[
var realtemp = Math.round(entity.attributes.temperature);
return `<span class="high">${realtemp}</span><span class="unit">°C</span>`;
]]]
overlay:
card:
type: picture-elements
image: /local/img/svg/overlay.svg
card_mod:
style: |
ha-card {
--ha-card-background: none !important;
}
elements:
- type: 'custom:button-card'
aspect_ratio: 2/1
show_name: false
show_icon: false
size: 100%
style:
top: 50%
left: 20%
height: 100%
width: 40%
tap_action: !include ../../popup/calendar.yaml
- type: 'custom:button-card'
aspect_ratio: 3/1
show_name: false
double_tap_action:
action: fire-dom-event
local_conditional_card:
action: set
ids:
- sidebar: hide
- windy: show
show_icon: false
size: 100%
style:
top: 50%
left: 70%
height: 100%
width: 60%
tap_action: !include ../../popup/popup_weather.yaml
label: >
[[[
return `
<ha-icon icon="mdi:thermometer"></ha-icon><span>${entity.attributes.apparent_temperature} °C</span><br>
<ha-icon icon="mdi:water-percent"></ha-icon><span>${entity.attributes.humidity} %</span><br>
<ha-icon icon="mdi:weather-windy"></ha-icon><span>${entity.attributes.wind_speed} m/s</span><br>
<ha-icon icon="mdi:gauge"></ha-icon><span>${entity.attributes.pressure} hPa</span><br>
`
]]]
entity_picture: >
[[[
let weather = entity.state.toLowerCase();
if ((weather == 'sunny') && (states['sun.sun'].state == 'above_horizon'))
return "/local/icons/weather_icons/animated/clear-day.svg";
if (weather == 'clear-night')
return "/local/icons/weather_icons/animated/clear-night.svg";
if (weather == 'fog')
return "/local/icons/weather_icons/animated/fog.svg";
if ((weather == 'partlycloudy') && (states['sun.sun'].state == 'above_horizon'))
return "/local/icons/weather_icons/animated/partly-cloudy-day.png";
if ((weather == 'partlycloudy') && (states['sun.sun'].state == 'below_horizon'))
return "/local/icons/weather_icons/animated/partly-cloudy-night.png";
if (weather == 'rainy')
return "/local/icons/weather_icons/animated/rain.svg";
if (weather == 'sleet')
return "/local/icons/weather_icons/animated/sleet.svg";
if (weather == 'snowy')
return "/local/icons/weather_icons/animated/snowy.svg";
if (weather == 'cloudy')
return "/local/icons/weather_icons/animated/cloudy.png";
if (weather == 'pouring')
return "/local/icons/weather_icons/animated/pouring.svg";
if (weather == 'thunder')
return "/local/icons/weather_icons/animated/thunder.svg";
else (weather == 'wind')
return "/local/icons/weather_icons/animated/wind.svg";
]]]
styles:
grid:
- grid-template-areas: |
"time i temp l"
"date i temp l"
"gpt gpt gpt gpt"
- grid-template-columns: 40% 25% 20% 15%
- grid-template-rows: auto
- gap: 0%
- margin: 0
card:
- --mdc-ripple-color: none
- --webkit-tap-highlight-color: none
img_cell:
- overflow: visible
icon:
- width: 80%
- position: relative
- right: -40%
custom_fields:
temp:
- font-weight: 500
- font-family: Futura
# - position: relative
# - top: 10%
# - overflow: visible
overlay:
- display: inline
- position: absolute
- width: 100%
- height: inherit
- aspect-ratio: 4/1
extra_styles: |
[[[
return `
@keyframes marquee {
0%,
70% {
transform: translateX(0%);
scale: 0.9;
}
40%,
100% {
transform: translateX(-25%);
scale: 1.1;
}
}
@keyframes gptmarquee {
from {
transform: translateX(0%);
}
to {
transform: translateX(-200%);
}
}
#img-cell {
animation: marquee 10s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
animation-direction: alternate-reverse;
}
#card {
padding: 0px 8px !important;
border-width: 0;
background: none !important;
}
#temp .high {
font-size: 3.3vw;
}
#temp .unit {
font-size: 2.4em;
position: relative;
left: -0.3vw;
bottom: 0.9vw;
}
#label.ellipsis {
font-size: 0.8em;
text-align: left;
place-self: center;
line-height: 150%;
overflow: visible;
}
#label ha-icon {
width: 1.4em;
height: 1.6em;
padding-right: 10%;
}
#time {
justify-self: center;
align-self: start;
line-height: 100%;
font-size: 3.7vw;
font-weight: 800;
color: #97989c;
font-family: auto;
letter-spacing: 0.15vw;
#gpt {
padding: 1% 0 !important;
overflow: visible !important;
border-top: 0.04vw rgba(158, 158, 158, 0.1) solid;
}
.gpttext {
font-size: 0.6vw;
white-space: pre-wrap;
}
#date {
font-size: 0.8vw;
text-transform: uppercase;
font-weight: 700;
font-family: 'Raleway';
letter-spacing: 1.5px;
color: #97989c;
}
#overlay {
padding: 0 !imporant;
margin: 0 !important;
}
`;
]]]
```