Hi all. It is possible to update a card from time to time. Being able to modify a button card template so that it checks something from time to time?
just use a sensor
as state changes the card will show you
Thank you. What I need is to check a button card to change an image according to things that happen. For that I need to be able in a template to verify every 10 seconds for example.
type: custom:button-card
entity: x
template:
- verify
I think your logic thinking is a bit wrong
here is a couple of my cards
base on the state value I change the Images
type: custom:card-templater
entities:
- sensor.landfill
card:
type: picture-entity
entity: sensor.landfill
name_template: '{{ states.sensor.landfill.attributes.days }} days'
show_name: true
show_state: false
state_image:
'0': /local/images/landfill_0.png
'1': /local/images/landfill_1.png
'2': /local/images/landfill_2.png
and
color_type: card
entity: binary_sensor.hrv
name: HRV
show_icon: true
show_last_changed: true
show_name: true
size: 20px
state:
- color: rgb(71,39,100)
icon: mdi:car
styles:
icon:
- color: rgb(220,69,121)
label:
- color: rgb(220,69,121)
value: unavailable
- color: rgb(49,68,42)
icon: mdi:car-connected
styles:
icon:
- color: rgb(134,219,85)
label:
- color: rgb(134,219,85)
value: 'on'
styles:
card:
- border-radius: 10px
label:
- font-size: 10px
type: custom:button-card
again it changes colour base on its state and its value ‘unavailable’ or ‘on’
Hello. Thanks for reply. I have a card where an image of each player in my house is shown from time to time. If there are two things playing on that card every few seconds it should change the image to the next active player. I think I got it to work by creating a card with a time entity
This code is adapted with code from other partners. What I do is check which media players are active and show one image at a time. What I would like is for the change to be faster. As it is after several seconds that it is running, for example, spotify changes the image. Thanks a lot
- type: custom:button-card
entity: sensor.time
tap_action:
action: none
template:
- verify
verify:
name: Reproduccion Actual
variables:
i: >
[[[
let media = "";
let activesMedia = [];
let cant = 0;
let cantMedias = states['input_select.players_home'].attributes.options.length;
for(var x = 0; x < cantMedias; x++) {
media = ('media_player.' + states['input_select.players_home'].attributes.options[x]);
if(states[media] != undefined && states[media].state == 'playing')
activesMedia[cant++] = states[media];
}
let rnd = (Math.floor(Math.random() * cant) + 1) - 1;
if(activesMedia.length == 0) {
return '/local/img/multimedia_i_news_design.jpg' +'**'+ "En espera" +'**playing';
} else {
if(activesMedia[rnd].attributes.entity_picture != "undefined") {
return activesMedia[rnd].attributes.entity_picture +'**'+ activesMedia[rnd].attributes.media_title+'**'+ activesMedia[rnd].state;
}
}
]]]
custom_fields:
blur: >
[[[ return entity === undefined || '<div></div>'; ]]]
state_display: >
[[[
if (variables.i.split('**')[2] == "playing" || variables.i.split('**')[2] == "paused") {
let elt = this.shadowRoot,
await = setTimeout(marquee,0),
output = variables.i.split('**')[1];
function marquee() {
let state = elt.getElementById("state"),
container = elt.getElementById("container"),
spacer = " ".repeat(3);
if (state && container) {
state.innerHTML = output;
let ro = new ResizeObserver(entries => {
let s = entries[0], c = entries[1];
if (s && s.contentRect && c && c.contentRect
&& s.contentRect.width < c.contentRect.width) {
state.classList.remove("marquee");
}
else if (s && s.contentRect && c && c.contentRect
&& s.contentRect.width >= c.contentRect.width) {
state.innerHTML = `${output} ${spacer} ${output} ${spacer} `;
state.classList.add("marquee");
}
});
ro.observe(state);
ro.observe(container);
}
}
return output;
}
return "en espera";
]]]
styles:
custom_fields:
media_image:
- background-position: center center
- background-image: >
[[[
if(variables.i.split('**')[2] != 'idle') {
if(variables.i.split('**')[1] != 'TV')
return "url("+variables.i.split('**')[0]+")";
} else {
return "url('/local/img/multimedia_i_news_design.jpg')";
}
]]]
overlay:
- display: none
card:
- text-shadow: >
[[[ return entity === undefined ? 'none' : '1px 1px 5px rgba(18, 22, 23, 0.9)'; ]]]
Just like this one, it takes almost a minute to realize that it has to change the image because a player was activated.
This is what the default card looks like
This is what it looks like when a player is activated
I am trying to track down a similar issue where I have a card that reflects the state of two entities. I suspect the frontend notifications only work for the primary entity, in your case senor.time.