Have you ever managed to fix this? Running into the same problem.
Did you figure this out somehow?
Been struggling to create a card that shows days left until the next laundry day, bin day etc, based on a calendar date. The card should pretty much look like the attached screenshot. Are there any tutorials out there?
This is what the code looks like right now, without an entity or label.
type: custom:button-card
entity: *
layout: vertical
icon: mdi:trash-can
show_state: false
show_name: true
show_label: true
show_entity_picture: false
color: auto
size: 60%
name: Empty bin
show_units: true
label: *
styles:
name:
- font-weight: bold
- font-size: 17px
- align-self: middle
card:
- height: 180px
- width: 180px
icon:
- color: grey
- position: absolute
- top: 5%
label:
- height: 27px
I created a separate calendar for each of my events, then i created a template sensors with calendar entities, which show days to event. Then you can show these sensors in a button card.
I’m not saying it’s the shortest way to do it, but it works…
An example for my waste collection reminder:
- name: other waste
state: >
{{(state_attr('calendar.other_waste', 'start_time') | as_datetime | as_local - today_at()).days }}
- name: bio waste
state: >
{{(state_attr('calendar.bio_waste', 'start_time') | as_datetime | as_local - today_at()).days }}
- name: plastic waste
state: >
{{(state_attr('calendar.plastic_waste', 'start_time') | as_datetime | as_local - today_at()).days }}
2 Likes
Thanks, that did the trick. Now i only have to figure out how to make it say “Today” and “Tomorrow” when theres only 1 or 0 days left.
You should find some hints here:
1 Like
By making another two template sensors:
- name: waste can #this sensor shows next trash to prepare
state: >
{% set black = states('sensor.other_waste')|int %}
{% set yellow = states('sensor.plastic_waste')|int %}
{% set brown = states('sensor.bio_waste')|int %}
{% set delta_room = [black ,yellow, brown] %}
{% set min_delta = min(delta_room) %}
{% set x = delta_room.index(min_delta) %}
{%if x == 0%}
Other waste
{%elif x==1%}
Plastic waste
{%elif x==2%}
Bio waste
{%else%}
Error!
{% endif %}
- name: trash days left
state: >
{%if states('sensor.waste_can') == 'Other waste'%}
{%if states('sensor.other_waste')=='0'%}
today
{%elif states('sensor.other_waste')=='1'%}
tomorrow
{%else%}
in {{states('sensor.other_waste') }} days
{% endif %}
{%elif states('sensor.waste_can')=='Plastic waste'%}
{%if states('sensor.plastic_waste')=='0'%}
today
{%elif states('sensor.plastic_waste')=='1'%}
tomorrow
{%else%}
in {{states('sensor.plastic_waste')}} days
{% endif %}
{%elif states('sensor.waste_can')=='Bio waste'%}
{%if states('sensor.bio_waste')=='0'%}
today
{%elif states('sensor.bio_waste')=='1'%}
tomorrow
{%else%}
in {{states('sensor.bio_waste')}} days
{% endif %}
{%else%}
Error!
{% endif %}
You can name sensors or bins whatever you want - this is translated from slovenian language to english for better understanding.
2 Likes
Seems that you cannot tell “use a default color”:
type: custom:button-card
styles:
icon:
- color: |
[[[
var type = entity.entity_id.split(".")[0];
if (type == "switch")
return 'green';
else
return 'xxxxxxxxxxx';
]]]
where “xxxxxxxxxxx” can be omitted, empty, “unset”, “initial”, “inherited”.
Probably you MUST specify a color always, there is no fallback to a “default color”.
Ildar, that’s pretty bad, because I only need to change the colors of specific entities, the rest I want to use their “default” color, which is the color they used depending on their state… Is there a way to know this color?
In fact, if I omit the last else case, which would be what I would like to do, the color is always white ? That’s pretty bad, right?
I would suggest you NOT to use a native “style” option.
Try using card-mod - it definitely will NOT overwrite a default color:
type: custom:button-card
entity: sun.sun
card_mod:
style: |
div#img-cell > ha-state-icon {
{% if config.entity.startswith('switch.') -%}
color: green !important;
{%- endif %}
}
Ildar, thank you very much for your suggestion! As soon as I’ll try it, I’ll let you know if it works, which I guess it will!! I suspected that you will recommend me to use card_mod !! 
It would be nice that the custom button card developer would fix that…
Ildar, using cad_mod works quite well !! Many thanks!
Now I need to check if a variable I use for a select entity is not null and if it’s not null check whether the value is the same of the state of the entity to change the color. How do I do this in jinja2 ? Sorry for my lack of knowledge…
The following is the code in custopm button card:
if (variables.var_select_option_value) {
if (states[entity.entity_id].state == variables.var_select_option_value) {
return "rgb(0,100,255)";
} else {
return "Silver";
};
};
Basically I need to know how to call a variable, for the entity I just used the code of your example and I need to add the above code into the below code:
{% if config.entity.startswith('switch.') -%}
{% if states(config.entity) == 'on' -%}
color: rgb(0,100,255) !important;
{%- else -%}
color: silver !important;
{%- endif %}
{%- endif %}
One more thing, are the dashes “-” of the structures correct? {%- and -%} Seems a little mysterious…
Many thanks again
for that specific need, we have the has_value() test or filter |has_value
Marius, what I need to know is how to call the “variables.var_select_option_value” in jinja2? I don’t know the syntax? Thanks!
that might be a problem, because that is something that lives in the Frontend, and Jinja is connected with backend…
It makes me speak out my earlier thought, on why you would want to write this ‘generic’ template for all button cards? why not only do this on these specific cards, so you can leave out that test.
Could any CSS gurus help me with this. What I am trying to achieve is the fade in animation on page load. And then when I hover over the card, transition the opacity again. The opacity on hover changes but it does not respect the duration/fade.
- type: "custom:button-card"
entity: sun.sun
styles:
card:
- animation: fade-in 1s forwards 0.3s ease-in
- visibility: hidden
- transition: opacity 1.5s ease-in-out
extra_styles: |
@keyframes fade-in {
0% {opacity: 0;}
100% {opacity: 1; visibility: visible;}
}
@media (hover: hover) {
ha-card:hover {
opacity: 0.5 !important;
}
}
1 Like
Not a big issue for card-mod & SOME other use-cases for jinja, but compare these variants:
where the last variant leads to
i.e. here for card-mod it is a matter of a compact look (although card-mod will work anyway).
Marius, because I have many cards with the same needs… So basically it’s not possible to read a variable set in each card? Unless it’s the main entity? That’s pretty frustrating?
I’ll need to fing a workaround…
type: custom:button-card
entity: sun.sun
variables:
COLOR: red
card_mod:
style: |
div#img-cell > ha-state-icon {
{% if config.entity.startswith('sun.') -%}
color: {{config.variables['COLOR']}} !important;
{%- endif %}
}
Ildar, if this is possible it would be amazing!
I tried the following code, but it doesn’t seem to work, unfortunately. I might have done something wrong?:
card_mod:
style: |
div#img-cell > ha-state-icon {
{% if config.entity.startswith('switch.') -%}
{%- if states(config.entity) == 'on' -%}
color: rgb(0,100,255) !important;
{%- else -%}
color: Silver !important;
{%- endif -%}
{%- elif states(config.entity) == {{config.variables['var_select_option_value']}} -%}
color: rgb(0,100,255) !important;
{%- endif %}
}
I don’t know if the “elif” part is OK?
Many thanks!!