Probably this can be done by card-mod.
Hi @arnocl
I think the design is great. Unfortunately, it doesnāt display correctly for me. Does it still work for you with the current Home Assistant?
The code still works, but it looks like you do not have card_mod installed.
This code is controlling the CSS styling you are missing.
card_mod:
style: >
{% set entity = {
"state": states('counter.xxxx') | int(9999999999),
"name": "Levensduur",
"unit": " d"
}
%} {% set severity = {
"green": 0,
"orange": 180,
"red": 240
}
%} {% set colors = {
"green": "76,175,80",
"orange": "255,152,0",
"red": "244,67,54"
}
%}
ha-card .card-content {
padding: 10px!important;
cursor: pointer;
}
ha-card {
transition-duration: 0.05s;
}
ha-card:hover {
{% if entity.state == 9999999999 %}
background-color: rgba(200,200,200, 0.02);
{% elif entity.state < severity.orange %}
background-color: rgba({{colors.green}}, 0.02);
{% elif entity.state < severity.red %}
background-color: rgba({{colors.orange}}, 0.02);
{%- else -%}
background-color: rgba({{colors.red}}, 0.02);
{%- endif %}
}
bar-card-background {
margin-left: 13px !important;
}
bar-card-backgroundbar, bar-card-currentbar, bar-card-contentbar,
bar-card-targetbar {
border-radius: 8px;
}
bar-card-currentbar, bar-card-backgroundbar, bar-card-contentbar,
bar-card-targetbar, bar-card-animationbar {
{% if entity.state == 9999999999 %}
left: 1.5em !important;
width: calc(100% - 1.5em);
{% else %}
{% set state_width = 1 + (entity.state|string|count + entity.unit|count) * 0.4 %}
left: {{state_width}}em !important;
width: calc(100% - {{state_width}}em);
{%- endif %}
}
bar-card-markerbar {
display: none;
}
bar-card-background::before {
content: "{{ entity.name }}";
display: flex;
font-family: Roboto, sans-serif;
font-size: 14px;
font-weight: 500;
height: 20px;
letter-spacing: 0.1px;
line-height: 20px;
margin-bottom: 6px;
}
bar-card-background::after {
{% if entity.state == 9999999999 %}
content: "N/A"
{%- else %}
content: "{{ entity.state }}{{ entity.unit}}";
{%- endif %}
font-family: Roboto, Noto, sans-serif;
font-size: 12px;
font-weight: 400;
height: 16px;
letter-spacing: 0.4px;
line-height: 16px;
display: inline-block;
position: absolute;
margin-top: -4px;
width: fit-content;
}
bar-card-iconbar {
{% if entity.state == 9999999999 %}
color: rgba(200,200,200, 1);
background-color: rgba(200,200,200, 0.2);
{% elif entity.state < severity.orange %}
color: rgba({{colors.green}}, 1);
background-color: rgba({{colors.green}}, 0.2);
{% elif entity.state < severity.red %}
color: rgba({{colors.orange}}, 1);
background-color: rgba({{colors.orange}}, 0.2);
{%- else -%}
color: rgba({{colors.red}}, 1);
background-color: rgba({{colors.red}}, 0.2);
{%- endif %}
border-radius: 50%;
max-height: 36px;
max-width: 36px;
}
1 Like
You are right. I missed that. Now it looks as expected. Thank you very much.
Hi !
A new project has just been launched, its developer actively maintains it :
2 Likes
Thanks for taking the time to reply with those emojis. As far as I know, this forum is meant for sharing and discussion I just wanted to share a repo I found interesting.
If that bothers you, feel free to ignore my message. Have a good day!
Well, I responded to you in your thread too. Of course you can share. Iām not saying anything, but you can share your message in a different way so that it doesnāt sound like this card is bad and unmaintained.
1 Like
Im trying to color my icons based on severity, but this is not working:
entities:
- entity: sensor.allergy_index_today
name: Today
- entity: sensor.allergy_index_tomorrow
name: Tomorrow
positions:
indicator: inside
name: outside
direction: right
min: 0
max: 12
width: 70%
stack: vertical
severity:
- from: 0
to: 3
color: Green
icon: mdi:flower
- from: 3
to: 6
color: Gold
icon: mdi:flower
- from: 6
to: 9
color: Orange
icon: mdi:flower
- from: 9
to: 12
color: Red
icon: mdi:flower
card_mod:
style: |
ha-icon {
color:
{{ states(entity) | int <= 3 ? 'Green' :
states(entity) | int <= 6 ? 'Gold' :
states(entity) | int <= 9 ? 'Orange' :
states(entity) | int <= 12 ? 'Red' :
}
of course itās great people create new stuff, some jewels out there.
This one however is still a bit off balance imho, hope it gets better soon. Talking specifically about the elements and their placement,which to me look like a shaken (stirred?) tile card.
I admit having removed the Bar card for lack of maintenance, (and replaced it with some card_mod), I wonāt repeat that.
I would love to mod the Tile card a bit, so it would use half the height of the control elements, but havent been successful yet. (and would do what this new kid on the block does nicely indeed!)
Thing is, Tile card is the way forward in current HA core design, so I believe itās in my own interest to build as much with that as possible, if a simple entities card doesnt suffice.
(If neither of those suffice, I turn to my also ancient custom:button-card jack of all tradesā¦)
Sorry, why do you think it should work?
The āentityā variable dies not exist. You need to explicitly specify an entity. Or use āconfig.entitiesā variable, check examples in main card-mod thread (a similar one is provided for a stock map card).
I thought I saw an example here. Im still stuck on that part, if I set the if to something like 10 > 9, the icon colors.
Do I need to list the card mod under the entity, because this seems to apply to both regardless. When I try that, it just removes the code, but this seems like it makes more sense?
type: custom:bar-card
entities:
- entity: sensor.allergy_index_today
name: Today
card_mod:
style: |
ha-icon {
{% set entval = states(config.entity)|int(default=0) %}
{% if entval >= 9 %} color: red;
{% elif entval >= 6 %} color: orange;
{% elif entval >= 3 %} color: yellow;
{% else %} color: green;
{% endif %}
}
- entity: sensor.allergy_index_tomorrow
name: Tomorrow
card_mod:
style: |
ha-icon {
{% set entval = states(config.entity)|int(default=0) %}
{% if entval >= 9 %} color: red;
{% elif entval >= 6 %} color: orange;
{% elif entval >= 3 %} color: yellow;
{% else %} color: green;
{% endif %}
}
positions:
indicator: inside
name: outside
direction: right
width: 70%
stack: vertical
min: 0
max: 12
severity:
- from: 0
to: 3
color: Green
- from: 3
to: 6
color: Gold
- from: 6
to: 9
color: Orange
- from: 9
to: 12
color: Red
This is known bug, Editor removes card-mod code, then you may only use it either in yaml mode of dashboard, or with inputing a code in āraw configurationā.
As for place a card-mod code āinside an entityā - do not remember if it works, cannot test it now, away from PC.
What I suggested you was about using āconfig.entitiESā variable which covers all entities. Find examples in card-mod thread.
When I put this, it doesnt work, however if i only put color: green; it does. If I make one of the if statements something like 10 > 9, it also doesnt work. So it may not be the entities part, but something else with the if statement thats amiss
card_mod:
style: |
ha-icon {
{% set entval = states(config.entities)|int(default=0) %}
{% if entval >= 9 %} color: red;
{% elif entval >= 6 %} color: orange;
{% elif entval >= 3 %} color: yellow;
{% else %} color: green;
{% endif %}
}
What does developer tools > template editor show you?
It threw and error about variable type, I changed it to float and that worked. Of course thats only looking at one sensor
Use is_number test for state, then use as conditionsā¦
{% set state = states('sensor.temperature') %}{{ state | float + 1 if is_number(state) else "invalid temperature" }}
{% set state = states('sensor.temperature') %}{{ (state | float * 10) | round(2) if is_number(state)}}
{% set state = states('sensor.temperature') %}
{% if is_number(state) and state | float > 20 %}
It is warm!
{% endif %}
in card config u can use config.entity
Well the problem is this works, but is suck to one sensor, i still cannot pull config.entities
ha-icon {
{% set value_template = states('sensor.allergy_index_today')|float(0) %}
{% if value_template >= 9.0 %} color: red;
{% elif value_template >= 6.0 %} color: orange;
{% elif value_template >= 3.0 %} color: yellow;
{% else %} color: green;
{% endif %};
}
Have you checked a similar example for map card as was suggested?
Yes, Iāve read through most of your examples, fantastic btw, but am stumped at the moment. Will give it another crack later. Iāve yet to jump into templates but will also do that at some point.