Last commit was 4 years ago. Would be good if some activity in commits happen to keep it alive I suppose.
just following up on the dependabot bumps, would be sufficient.
2 Likes
Solution:
Uninstall the original bar-card in HACS.
Add the ânewâ fork link to HACS, then install it.
17 Likes
Hi @rekenaar,
I have simply copied and pasted your code and got a result I like so far, but there are some questions left.
Here is the âequalizerâ visualisation of 12 Solar power strings based on their rated performance in Watt per kWp installed.
I can see the differences and it looks great so far even though I will have to make a few adjustments.
This is the result of your code by replacing your 2 soc sensors with string sensors . I have nothing changed so far to make it easier to ask you for some further advice.
How do I get such nice white values & icons for example?
I guess I changed the code to show the name of the sensor but that did not work.
Where do I adjust the colour values or does this one require a % sensor ?
Right now I have low production values below 100% so they might fit somehow, but tomorrow it will look different.
type: custom:bar-card
columns: 1
decimal: 0
positions:
icon: outside
name: "on"
minmax: "off"
indicator: "off"
direction: right
height: 60px
entities:
- entity: sensor.u1_1_leistung_pro_kwp
- entity: sensor.u1_2_leistung_pro_kwp
- entity: sensor.u2_1_leistung_pro_kwp
- entity: sensor.u2_2_leistung_pro_kwp
- entity: sensor.u3_1_leistung_pro_kwp
- entity: sensor.u3_2_leistung_pro_kwp
- entity: sensor.u4_leistung_pro_kwp
- entity: sensor.u5_leistung_pro_kwp
- entity: sensor.u6_leistung_pro_kwp
- entity: sensor.v1_1_leistung_pro_kwp
- entity: sensor.v1_2_leistung_pro_kwp
- entity: sensor.v2_1_leistung_pro_kwp
- entity: sensor.v2_2_leistung_pro_kwp
card_mod:
style: |
ha-card {
background: black !important;
} bar-card-background bar-card-backgroundbar {
background: linear-gradient(90deg, #B22222 0%, #B22222 5%, #CF5B00 30%, #E6BB00 50%, #228B22 100%);
mask-image: repeating-linear-gradient( 90deg, rgba(0, 0, 0, 0.3) 0%, black 2%, rgba(0, 0, 0, 0.3) 4%, transparent 4%, transparent 5%);
border-radius: 0px;
filter: brightness(0.65);
opacity: 0.35;
} bar-card-background bar-card-currentbar {
background: linear-gradient(90deg, #B22222 0%, #B22222 5%, #CF5B00 30%, #E6BB00 50%, #228B22 100%);
mask-image: repeating-linear-gradient( 90deg, rgba(0, 0, 0, 0.3) 0%, black 2%, rgba(0, 0, 0, 0.3) 4%, transparent 4%, transparent 5%);
clip-path: polygon(0 0, var(--bar-percent) 0, var(--bar-percent) 100%, 0 100%);
border-radius: 0px;
} bar-card-value {
margin: 20px;
font-size: 1.25rem;
font-weight: 800;
}
Great progress so far compared to my previous results.
THANKS A LOT for this great example
thanks for sharing - worked out for me with this these steps (for those not so familiar with hacs)
- deleting the old one
- open hacs
- upper right corner - there userspecific repository
- then paste GitHub - spacerokk/bar-card: Customizable Animated Bar card for Home Assistant Lovelace
- and choose dashboard
- and then âADDâ
- the new source will be added to the list above
- final steps are to download the repository and
- finally refresh the browser
Then youâll be back and get the usual view on the bad cards but now based on the ânew sourceâ and the warning messages are gone.
Long way to go considering 120.000 downloads in the past years and just 500 in the last 3 weeks - many that have to migrate or uninstall cause the message keeps coming back.
7 Likes
Hi, I did not do anything for that, so I assume itâs part of the defaultr dark theme. Unless I change something long time ago that I canât remember.
1 Like
Hi,
you are right cause I have changed my settings to homeassistant or so and then the colours changed at least at midnight.
Solar power is 0 due to no sun, so I have to check it tomorrow and then find a way how to get the colours changed independent from the theme setting.
Thanks a lot - has helped me.
Sorry,
I have no clue if this issues I am facing is caused by my move to the new Fork of the CAB card or not.
What has happened since I âremoved the old bar cardâ and added yours is a strange behaviour that appears when I open the card in EDIT MODE.
The section âcard_mod: CODE SECTIONâ is always gone. No matter what I tried: the code always ends with the last sensor.
I recogniced it for the first time this morning and I copied the code I had luckily stored here. Then the card bar is working until I open it for editing.
type: custom:bar-card
columns: 1
decimal: 0
positions:
icon: outside
name: "on"
minmax: "off"
indicator: "off"
direction: right
height: 60px
entities:
- entity: sensor.u1_1_leistung_pro_kwp
- entity: sensor.u1_2_leistung_pro_kwp
- entity: sensor.u2_1_leistung_pro_kwp
- entity: sensor.u2_2_leistung_pro_kwp
- entity: sensor.u3_1_leistung_pro_kwp
- entity: sensor.u3_2_leistung_pro_kwp
- entity: sensor.u4_leistung_pro_kwp
- entity: sensor.u5_leistung_pro_kwp
- entity: sensor.u6_leistung_pro_kwp
- entity: sensor.v1_1_leistung_pro_kwp
- entity: sensor.v1_2_leistung_pro_kwp
- entity: sensor.v2_1_leistung_pro_kwp
- entity: sensor.v2_2_leistung_pro_kwp
card_mod:
style: |
ha-card {
background: black !important;
} bar-card-background bar-card-backgroundbar {
background: linear-gradient(90deg, #B22222 0%, #B22222 5%, #CF5B00 30%, #E6BB00 50%, #228B22 100%);
mask-image: repeating-linear-gradient( 90deg, rgba(0, 0, 0, 0.3) 0%, black 2%, rgba(0, 0, 0, 0.3) 4%, transparent 4%, transparent 5%);
border-radius: 0px;
filter: brightness(0.65);
opacity: 0.35;
} bar-card-background bar-card-currentbar {
background: linear-gradient(90deg, #B22222 0%, #B22222 5%, #CF5B00 30%, #E6BB00 50%, #228B22 100%);
mask-image: repeating-linear-gradient( 90deg, rgba(0, 0, 0, 0.3) 0%, black 2%, rgba(0, 0, 0, 0.3) 4%, transparent 4%, transparent 5%);
clip-path: polygon(0 0, var(--bar-percent) 0, var(--bar-percent) 100%, 0 100%);
border-radius: 0px;
} bar-card-value {
margin: 20px;
font-size: 1.25rem;
font-weight: 800;
}
It looks like this while running and that is running properly
But in the editor things are weird. First of all look how different or basic the bar card on the right is looking.
And then on the left it is white on white or nothing visible.
I click on CODE EDITOR it shows this without the âcard_mod:â section
I have no clue what has caused this behaviour. I have upgraded to the latest homeassistant version yesterday.
Again maybe it has nothing to do with the change to the new hacs fork thing but I have no other issues so far hence I wanna ask if you know about something broken or a code error.
It happens over and over again.
Thanks a lot.
Hi,
I have tested your code on a system with the forked version of the Bar Card running the same HA OS version and am getting what is displayed in the attached image.
Is this the intended display?
Regards, Mike.
Hi Mike,
it is not âmy codeâ cause I had gotten it from rekenaar
Your result looks a bit different. but in general it should looks this way.
What happens if you now try to edit the code ?
Cause then the issue will appear that the following card_mod: section is missing completely. If you then change something and press save without âawarenessâ as usual and it happened to me you will have lost the code.
And this behaviour had changed in the last week, cause last week it had worked and I was able to edit and play around with the code not loosing âcard_mod:â section cause I had saved quite often to try to fix the dark grey font.
But yesterday I recogniced that my nice bars were gone and the basic naked ones were back and I could not figure out why till I got the feeling that code was missing and hence I checked my code posted here that had been working before. And after I had pasted that code it worked again but when I wanted to edit the code the code would be gone again (if I do not save the code will still be working cause it will only changed and finaly cut out when I press save so it must be save in the background).
I had done 2 changes in the 24 hours before:
I moved to this new fork by deleting the old one and installing that new fork via hacs.
The bars looked as beautifull aftwards and I was happy. Simple and easy way to go ahead
But on that evening I also did finally the HA OS Update to lates June version 2 and I guess a few hours later to June version 3.
Next morning or the other day I faced the issue described above.
Missing code section that will be removed by pressing âsaveâ
card_mod:
style: |
ha-card {
background: black !important;
} bar-card-background bar-card-backgroundbar {
background: linear-gradient(90deg, #B22222 0%, #B22222 5%, #CF5B00 30%, #E6BB00 50%, #228B22 100%);
mask-image: repeating-linear-gradient( 90deg, rgba(0, 0, 0, 0.3) 0%, black 2%, rgba(0, 0, 0, 0.3) 4%, transparent 4%, transparent 5%);
border-radius: 0px;
filter: brightness(0.65);
opacity: 0.35;
} bar-card-background bar-card-currentbar {
background: linear-gradient(90deg, #B22222 0%, #B22222 5%, #CF5B00 30%, #E6BB00 50%, #228B22 100%);
mask-image: repeating-linear-gradient( 90deg, rgba(0, 0, 0, 0.3) 0%, black 2%, rgba(0, 0, 0, 0.3) 4%, transparent 4%, transparent 5%);
clip-path: polygon(0 0, var(--bar-percent) 0, var(--bar-percent) 100%, 0 100%);
border-radius: 0px;
} bar-card-value {
margin: 20px;
font-size: 1.25rem;
font-weight: 800;
}
Here is the current display for 12 strings and â3 sensor.blankâ as separators cause we have 2 systems, one supplying the house and a âfull feederâ who is feeding into the grid 247 for a higher rate of 13 Cent or so compared with the âpartial feederâ where i get roughly 7 cent for the surplus I am feeding in.
Do you know how to get the sensor names instead of the icons displayed or at least maybe first 10 characters from the sensors name ?
I have turned ânameâ fro âoffâ to âonâ but nothing had happened - code below
Regarding font colour and themes I had asked chat gpt and after a while this became my solution
type: custom:bar-card
columns: 1
decimal: 0
positions:
icon: outside
name: "on"
minmax: "off"
indicator: "off"
direction: right
height: 18px
title: RELATION Watt je kWp per String (gröĂter = 100%)
entities:
- entity: sensor.u1_1_leistung_kwp_relation
- entity: sensor.u1_2_leistung_kwp_relation
- entity: sensor.u2_1_leistung_kwp_relation
- entity: sensor.u2_2_leistung_kwp_relation
- entity: sensor.u3_1_leistung_kwp_relation
- entity: sensor.u3_2_leistung_kwp_relation
- entity: sensor.u4_leistung_kwp_relation
- entity: sensor.u5_leistung_kwp_relation
- entity: sensor.blank
icon: mdi:none
- entity: sensor.v1_1_leistung_kwp_relation
- entity: sensor.v1_2_leistung_kwp_relation
- entity: sensor.v2_1_leistung_kwp_relation
- entity: sensor.v2_2_leistung_kwp_relation
card_mod:
style: |
ha-card {
background: white !important; /* Heller Hintergrund */
color: #222222; /* Dunkle Schriftfarbe fĂŒr guten Kontrast */
} bar-card-background bar-card-backgroundbar {
background: linear-gradient(90deg, #B22222 0%, #B22222 5%, #CF5B00 30%, #E6BB00 50%, #228B22 100%);
mask-image: repeating-linear-gradient( 90deg, rgba(0, 0, 0, 0.3) 0%, black 2%, rgba(0, 0, 0, 0.3) 4%, transparent 4%, transparent 5%);
border-radius: 0px;
filter: brightness(0.65);
opacity: 0.15; /* weniger sichtbare 0 Segmente */
} bar-card-background bar-card-currentbar {
background: linear-gradient(90deg, #B22222 0%, #B22222 5%, #CF5B00 30%, #E6BB00 50%, #228B22 100%);
mask-image: repeating-linear-gradient( 90deg, rgba(0, 0, 0, 0.3) 0%, black 2%, rgba(0, 0, 0, 0.3) 4%, transparent 4%, transparent 5%);
clip-path: polygon(0 0, var(--bar-percent) 0, var(--bar-percent) 100%, 0 100%);
border-radius: 0px;
} bar-card-value {
margin: 20px;
font-size: 1.25rem;
font-weight: 800;
color: #222222; /* Textfarbe anpassen */
}
remaining issues: I need names instead of 12 same looking icons and I would also fool the system in case the value is zero that it then will use the font colour WHITE on WHITE to hide the 0 like seen now caused by the âseparator sensorâ called sensor.blank
Any ideas how to get the names displayed properly too instead of the icons ?
REGARDING FONT COLORS & USABILITY:
I have also changed these lines with /* comments
#1 background white instead of black and its font color #222222
#2 made the unused âLED segmentsâ close to invisible with opacity: 0.05; /* weniger sichtbare 0 Segmente */
#3 finally bar card value #222222
card_mod:
style: |
ha-card {
background: white !important; /* light background */
color: #222222; /* dark font color for good contrast */
} bar-card-background bar-card-backgroundbar {
background: linear-gradient(90deg, #B22222 0%, #B22222 5%, #CF5B00 30%, #E6BB00 50%, #228B22 100%);
mask-image: repeating-linear-gradient( 90deg, rgba(0, 0, 0, 0.3) 0%, black 2%, rgba(0, 0, 0, 0.3) 4%, transparent 4%, transparent 5%);
border-radius: 0px;
filter: brightness(0.65);
opacity: 0.05; /* close to unvisible unused segments */
} bar-card-background bar-card-currentbar {
background: linear-gradient(90deg, #B22222 0%, #B22222 5%, #CF5B00 30%, #E6BB00 50%, #228B22 100%);
mask-image: repeating-linear-gradient( 90deg, rgba(0, 0, 0, 0.3) 0%, black 2%, rgba(0, 0, 0, 0.3) 4%, transparent 4%, transparent 5%);
clip-path: polygon(0 0, var(--bar-percent) 0, var(--bar-percent) 100%, 0 100%);
border-radius: 0px;
} bar-card-value {
margin: 20px;
font-size: 1.25rem;
font-weight: 800;
color: #222222; /* dark font color for good contrast */
}
Hi typxxi.
I can confirm that the card_mod section doesnât disappear after pressing save and reopening the the editor. Has this been resolved for you?
.
Also, is the following what you are trying to achieve?
type: custom:bar-card
columns: 1
decimal: 0
positions:
icon: outside
name: inside
minmax: "off"
indicator: "off"
direction: right
height: 18px
title: RELATION Watt je kWp per String (gröĂter = 100%)
entities:
- entity: sensor.ae_tech_mc_battery_level
name: USER DEFINED
- entity: sensor.ae_tech_mc_battery_level
- entity: sensor.ae_tech_mc_battery_level
- entity: sensor.ae_tech_mc_battery_level
- entity: sensor.ae_tech_mc_battery_level
- entity: sensor.ae_tech_mc_battery_level
- entity: sensor.ae_tech_mc_battery_level
- entity: sensor.ae_tech_mc_battery_level
- entity: sensor.air_quality
icon: none
- entity: sensor.ae_tech_mc_battery_level
- entity: sensor.ae_tech_mc_battery_level
- entity: sensor.ae_tech_mc_battery_level
- entity: sensor.ae_tech_mc_battery_level
card_mod:
style: |
ha-card {
background: white !important; /* Heller Hintergrund */
color: #222222; /* Dunkle Schriftfarbe fĂŒr guten Kontrast */
--primary-text-color: black; /* TEXT COLOR */
}
bar-card-background bar-card-backgroundbar {
background: linear-gradient(90deg, #B22222 0%, #B22222 5%, #CF5B00 30%, #E6BB00 50%, #228B22 100%);
mask-image: repeating-linear-gradient( 90deg, rgba(0, 0, 0, 0.3) 0%, black 2%, rgba(0, 0, 0, 0.3) 4%, transparent 4%, transparent 5%);
border-radius: 0px;
filter: brightness(0.65);
opacity: 0.15; /* weniger sichtbare 0 Segmente */
}
bar-card-background bar-card-currentbar {
background: linear-gradient(90deg, #B22222 0%, #B22222 5%, #CF5B00 30%, #E6BB00 50%, #228B22 100%);
mask-image: repeating-linear-gradient( 90deg, rgba(0, 0, 0, 0.3) 0%, black 2%, rgba(0, 0, 0, 0.3) 4%, transparent 4%, transparent 5%);
clip-path: polygon(0 0, var(--bar-percent) 0, var(--bar-percent) 100%, 0 100%);
border-radius: 0px;
}
bar-card-value {
margin: 20px;
font-size: 1.25rem;
font-weight: 800;
color: #222222; /* Textfarbe anpassen */
}
#states > bar-card-row:nth-child(9) > bar-card-card > bar-card-background > bar-card-contentbar > bar-card-value {
display: none; /* HIDE - ENTITY 9 - ICON */
}
#states > bar-card-row:nth-child(9) > bar-card-card > bar-card-background > bar-card-contentbar > bar-card-name {
display: none; /* HIDE - ENTITY 9 - NAME */
}
Note:
- According to the bar card documentation - The options for name: are inside, outside & âoffâ. Hope this helps.
- If you would like to hide all of the icons set icon: outside to icon: âoffâ.
Played around with it a bit more and got something resembling a divider...
card_mod:
style: |
ha-card {
background: white !important; /* Heller Hintergrund */
color: #222222; /* Dunkle Schriftfarbe fĂŒr guten Kontrast */
--primary-text-color: black; /* TEXT COLOR */
}
bar-card-background bar-card-backgroundbar {
background: linear-gradient(90deg, #B22222 0%, #B22222 5%, #CF5B00 30%, #E6BB00 50%, #228B22 100%);
mask-image: repeating-linear-gradient( 90deg, rgba(0, 0, 0, 0.3) 0%, black 2%, rgba(0, 0, 0, 0.3) 4%, transparent 4%, transparent 5%);
border-radius: 0px;
filter: brightness(0.65);
opacity: 0.15; /* weniger sichtbare 0 Segmente */
}
bar-card-background bar-card-currentbar {
background: linear-gradient(90deg, #B22222 0%, #B22222 5%, #CF5B00 30%, #E6BB00 50%, #228B22 100%);
mask-image: repeating-linear-gradient( 90deg, rgba(0, 0, 0, 0.3) 0%, black 2%, rgba(0, 0, 0, 0.3) 4%, transparent 4%, transparent 5%);
clip-path: polygon(0 0, var(--bar-percent) 0, var(--bar-percent) 100%, 0 100%);
border-radius: 0px;
}
bar-card-value {
margin: 20px;
font-size: 1.25rem;
font-weight: 800;
color: #222222; /* Textfarbe anpassen */
}
#states > bar-card-row:nth-child(9) > bar-card-card > bar-card-background > bar-card-contentbar > bar-card-value {
display: none; /* HIDE - ENTITY 9 - ICON */
}
#states > bar-card-row:nth-child(9) > bar-card-card > bar-card-background > bar-card-contentbar > bar-card-name {
display: none; /* HIDE - ENTITY 9 - NAME */
}
#states > bar-card-row:nth-child(9) > bar-card-card > bar-card-iconbar {
display: none; /* HIDE - ENTITY 9 - NAME */
}
#states > bar-card-row:nth-child(9) > bar-card-card > bar-card-background {
background-color: black; /* CHANGE - ENTITY 9 - BACKGROUND COLOR */
height: 1px !important; /* CHANGE - ENTITY 9 - HEIGHT */
}
#states > bar-card-row:nth-child(10) {
margin-top: 22px; /* CHANGE - ENTITY 10 - MARGIN (AN EVEN GAP) */
}
Regards, Mike.
1 Like
Hello Mike,
really appreciated all the hints and details.
I had read the âbarcard introductionâ days beforen and recogniced the off , inside, outside options back then cause I had played with them. Unfortunatelly forgotten, when I came back last week to implement rekemaars hints.
I read name: off and hence I though âonâ would be the thing.
Thanks a lot.
I used your code example and it worked fine so far.
I also turned back to the black background. Hence I needed white fonts which I have gotten by replacing #222222 with #FFFFFF
I was also able to get the name in front of the bars and formated bold white by copying the bar-card-value section and renaming that to bar-card-name section.
So far so good, but that did not work that way with the title.
Title is not really visible.
Do you have an idea how to show that in white font ?
Here is the most recent code
type: custom:bar-card
columns: 1
decimal: 0
positions:
icon: off
name: "outside"
minmax: "off"
indicator: "off"
direction: right
height: 18px
title: RELATION Watt je kWp per String (gröĂter = 100%)
entities:
- entity: sensor.u1_1_leistung_kwp_relation
name: "U1.1"
- entity: sensor.u1_2_leistung_kwp_relation
name: "U1.2"
- entity: sensor.u2_1_leistung_kwp_relation
name: "U2.1"
- entity: sensor.u2_2_leistung_kwp_relation
name: "U2.2"
- entity: sensor.u3_1_leistung_kwp_relation
name: "U3.1"
- entity: sensor.u3_2_leistung_kwp_relation
name: "U3.2"
- entity: sensor.u4_leistung_kwp_relation
name: "U4\_\_\_"
- entity: sensor.u5_leistung_kwp_relation
name: "U5\_\_\_"
- entity: sensor.blank
name: "\_\_\_\_\_\_\_"
icon: mdi:none
- entity: sensor.v1_1_leistung_kwp_relation
name: "V1.1"
- entity: sensor.v1_2_leistung_kwp_relation
name: "V1.2"
- entity: sensor.v2_1_leistung_kwp_relation
name: "V2.1"
- entity: sensor.v2_2_leistung_kwp_relation
name: "V2.2"
card_mod:
style: |
ha-card {
background: black !important; /* white = heller / black = dunkler Hintergrund */
color: #FFFFFF; /* #222222 = dunkle Schriftfarbe fĂŒr guten Kontrast - #FFFFFF als helle Schriftfarbe*/
} bar-card-background bar-card-backgroundbar {
background: linear-gradient(90deg, #B22222 0%, #B22222 5%, #CF5B00 30%, #E6BB00 50%, #228B22 100%);
mask-image: repeating-linear-gradient( 90deg, rgba(0, 0, 0, 0.3) 0%, black 2%, rgba(0, 0, 0, 0.3) 4%, transparent 4%, transparent 5%);
border-radius: 0px;
filter: brightness(0.65);
opacity: 0.05; /* weniger sichtbare 0 Segmente */
} bar-card-background bar-card-currentbar {
background: linear-gradient(90deg, #B22222 0%, #B22222 5%, #CF5B00 30%, #E6BB00 50%, #228B22 100%);
mask-image: repeating-linear-gradient( 90deg, rgba(0, 0, 0, 0.3) 0%, black 2%, rgba(0, 0, 0, 0.3) 4%, transparent 4%, transparent 5%);
clip-path: polygon(0 0, var(--bar-percent) 0, var(--bar-percent) 100%, 0 100%);
border-radius: 0px;
} bar-card-value {
margin: 20px;
font-size: 1.25rem;
font-weight: 800;
color: #FFFFFF; /* #222222 = dunkle & #FFFFFF = helle SCHRIFTFARBE */
} bar-card-name {
margin: 20px;
font-size: 1.25rem;
font-weight: 800;
color: #FFFFFF; /* #222222 = dunkle & #FFFFFF = helle SCHRIFTFARBE */
}
#states > bar-card-row:nth-child(9) > bar-card-card > bar-card-background > bar-card-contentbar > bar-card-value {
display: none; /* HIDE - ENTITY 9 - ICON */
}
#states > bar-card-row:nth-child(9) > bar-card-card > bar-card-background > bar-card-contentbar > bar-card-name {
display: none; /* HIDE - ENTITY 9 - NAME */
}
#states > bar-card-row:nth-child(9) > bar-card-card > bar-card-iconbar {
display: none; /* HIDE - ENTITY 9 - NAME */
}
#states > bar-card-row:nth-child(9) > bar-card-card > bar-card-background {
background-color: black; /* CHANGE - ENTITY 9 - BACKGROUND COLOR */
height: 1px !important; /* CHANGE - ENTITY 9 - HEIGHT */
}
#states > bar-card-row:nth-child(10) {
margin-top: 22px; /* CHANGE - ENTITY 10 - MARGIN (AN EVEN GAP) */
}
And here is the example with the white background where your kind of separation did not work out like in your example. It looks like a bigger space.
And here is the code
type: custom:bar-card
columns: 1
decimal: 0
positions:
icon: off
name: "outside"
minmax: "off"
indicator: "off"
direction: right
height: 18px
title: RELATION Watt je kWp per String (gröĂter = 100%)
entities:
- entity: sensor.u1_1_leistung_kwp_relation
name: "U1.1"
- entity: sensor.u1_2_leistung_kwp_relation
name: "U1.2"
- entity: sensor.u2_1_leistung_kwp_relation
name: "U2.1"
- entity: sensor.u2_2_leistung_kwp_relation
name: "U2.2"
- entity: sensor.u3_1_leistung_kwp_relation
name: "U3.1"
- entity: sensor.u3_2_leistung_kwp_relation
name: "U3.2"
- entity: sensor.u4_leistung_kwp_relation
name: "U4\_\_\_"
- entity: sensor.u5_leistung_kwp_relation
name: "U5\_\_\_"
- entity: sensor.blank
name: "\_\_\_\_\_\_\_"
icon: mdi:none
- entity: sensor.v1_1_leistung_kwp_relation
name: "V1.1"
- entity: sensor.v1_2_leistung_kwp_relation
name: "V1.2"
- entity: sensor.v2_1_leistung_kwp_relation
name: "V2.1"
- entity: sensor.v2_2_leistung_kwp_relation
name: "V2.2"
card_mod:
style: |
ha-card {
background: white !important; /* white = heller / black = dunkler Hintergrund */
color: #222222; /* #222222 = dunkle Schriftfarbe fĂŒr guten Kontrast - #FFFFFF als helle Schriftfarbe*/
} bar-card-background bar-card-backgroundbar {
background: linear-gradient(90deg, #B22222 0%, #B22222 5%, #CF5B00 30%, #E6BB00 50%, #228B22 100%);
mask-image: repeating-linear-gradient( 90deg, rgba(0, 0, 0, 0.3) 0%, black 2%, rgba(0, 0, 0, 0.3) 4%, transparent 4%, transparent 5%);
border-radius: 0px;
filter: brightness(0.65);
opacity: 0.05; /* weniger sichtbare 0 Segmente */
} bar-card-background bar-card-currentbar {
background: linear-gradient(90deg, #B22222 0%, #B22222 5%, #CF5B00 30%, #E6BB00 50%, #228B22 100%);
mask-image: repeating-linear-gradient( 90deg, rgba(0, 0, 0, 0.3) 0%, black 2%, rgba(0, 0, 0, 0.3) 4%, transparent 4%, transparent 5%);
clip-path: polygon(0 0, var(--bar-percent) 0, var(--bar-percent) 100%, 0 100%);
border-radius: 0px;
} bar-card-value {
margin: 20px;
font-size: 1.25rem;
font-weight: 800;
color: #222222; /* #222222 = dunkle & #FFFFFF = helle SCHRIFTFARBE */
} bar-card-name {
margin: 20px;
font-size: 1.25rem;
font-weight: 800;
color: #222222; /* #222222 = dunkle & #FFFFFF = helle SCHRIFTFARBE */
}
#states > bar-card-row:nth-child(9) > bar-card-card > bar-card-background > bar-card-contentbar > bar-card-value {
display: none; /* HIDE - ENTITY 9 - ICON */
}
#states > bar-card-row:nth-child(9) > bar-card-card > bar-card-background > bar-card-contentbar > bar-card-name {
display: none; /* HIDE - ENTITY 9 - NAME */
}
#states > bar-card-row:nth-child(9) > bar-card-card > bar-card-iconbar {
display: none; /* HIDE - ENTITY 9 - NAME */
}
#states > bar-card-row:nth-child(9) > bar-card-card > bar-card-background {
background-color: black; /* CHANGE - ENTITY 9 - BACKGROUND COLOR */
height: 1px !important; /* CHANGE - ENTITY 9 - HEIGHT */
}
#states > bar-card-row:nth-child(10) {
margin-top: 22px; /* CHANGE - ENTITY 10 - MARGIN (AN EVEN GAP) */
}
So these 2 questions remain open:
#1 How to minimize the gap or separation and
#2 how to format the title in white.
Thanks a lot for your great support.
PS: I had already tried for hours chatgpt with the topic white fonts for the title but without success.
Hello typxxi,
The following should help.
type: custom:bar-card
columns: 1
decimal: 0
positions:
icon: off
name: "outside"
minmax: "off"
indicator: "off"
direction: right
height: 18px
title: RELATION Watt je kWp per String (gröĂter = 100%)
entities:
- entity: sensor.ae_tech_mc_battery_level
name: "U1.1"
- entity: sensor.ae_tech_mc_battery_level
name: "U1.2"
- entity: sensor.ae_tech_mc_battery_level
name: "U2.1"
- entity: sensor.ae_tech_mc_battery_level
name: "U2.2"
- entity: sensor.ae_tech_mc_battery_level
name: "U3.1"
- entity: sensor.ae_tech_mc_battery_level
name: "U3.2"
- entity: sensor.ae_tech_mc_battery_level
name: "U4\_\_\_"
- entity: sensor.ae_tech_mc_battery_level
name: "U5\_\_\_"
- entity: sensor.active_issues
name: "\_\_\_\_\_\_\_"
icon: mdi:none
- entity: sensor.ae_tech_mc_battery_level
name: "V1.1"
- entity: sensor.ae_tech_mc_battery_level
name: "V1.2"
- entity: sensor.ae_tech_mc_battery_level
name: "V2.1"
- entity: sensor.ae_tech_mc_battery_level
name: "V2.2"
card_mod:
style: |
ha-card {
background: white !important; /* white = heller / black = dunkler Hintergrund */
color: #222222; /* #222222 = dunkle Schriftfarbe fĂŒr guten Kontrast - #FFFFFF als helle Schriftfarbe*/
--ha-card-header-color: blue; /* TITLE COLOR */
}
bar-card-background bar-card-backgroundbar {
background: linear-gradient(90deg, #B22222 0%, #B22222 5%, #CF5B00 30%, #E6BB00 50%, #228B22 100%);
mask-image: repeating-linear-gradient( 90deg, rgba(0, 0, 0, 0.3) 0%, black 2%, rgba(0, 0, 0, 0.3) 4%, transparent 4%, transparent 5%);
border-radius: 0px;
filter: brightness(0.65);
opacity: 0.05; /* weniger sichtbare 0 Segmente */
}
bar-card-background bar-card-currentbar {
background: linear-gradient(90deg, #B22222 0%, #B22222 5%, #CF5B00 30%, #E6BB00 50%, #228B22 100%);
mask-image: repeating-linear-gradient( 90deg, rgba(0, 0, 0, 0.3) 0%, black 2%, rgba(0, 0, 0, 0.3) 4%, transparent 4%, transparent 5%);
clip-path: polygon(0 0, var(--bar-percent) 0, var(--bar-percent) 100%, 0 100%);
border-radius: 0px;
}
bar-card-value {
margin: 20px;
font-size: 1.25rem;
font-weight: 800;
color: #222222; /* #222222 = dunkle & #FFFFFF = helle SCHRIFTFARBE */
}
bar-card-name {
margin: 20px;
font-size: 1.25rem;
font-weight: 800;
color: #222222; /* #222222 = dunkle & #FFFFFF = helle SCHRIFTFARBE */
}
#states > bar-card-row:nth-child(9) > bar-card-card > bar-card-name {
display: none; /* HIDE - ENTITY 9 - NAME */
}
#states > bar-card-row:nth-child(9) > bar-card-card > bar-card-background > bar-card-contentbar > bar-card-value {
display: none; /* HIDE - ENTITY 9 - VALUE */
}
#states > bar-card-row:nth-child(9) > bar-card-card > bar-card-background {
background-color: black; /* CHANGE - ENTITY 9 - BACKGROUND COLOR */
height: 1px !important; /* CHANGE - ENTITY 9 - HEIGHT */
}
#states > bar-card-row:nth-child(10) {
margin-top: 8px; /* CHANGE - ENTITY 10 - MARGIN (AN EVEN GAP) */
}
}
Regards, Mike.
1 Like
Adjusted the colours slightly and changed the filters to include all battery sensors with
sensor.*_battery*
Excluded:
exclude:
- options: {}
entity_id: sensor.*_battery_power
- options: {}
entity_id: sensor.*_battery_temperature
- options: {}
entity_id: sensor.*_battery_state
- options: {}
entity_id: sensor.*_battery_health
Adjusted Card Code (As well as I could fix it, displays well but throws errors
type: custom:auto-entities
card:
type: entities
title: Battery Status
card_mod:
class: class-header-margin
style:
hui-sensor-entity-row:
$: |
hui-generic-entity-row {
height: 25px;
padding: 0px 16px;
border-radius: var(--ha-card-border-radius);
border: 1px groove var(--divider-color);
}
.: |
ha-card {
color: var(--secondary-color);
font-weight: 400;
}
.card-content {
max-height: 450px;
overflow-y: scroll;
}
state_color: false
show_header_toggle: false
filter:
exclude:
- options: {}
entity_id: sensor.*_battery_power
- options: {}
entity_id: sensor.*_battery_temperature
- options: {}
entity_id: sensor.*_battery_state
- options: {}
entity_id: sensor.*_battery_health
include:
- options:
card_mod:
style: |
hui-generic-entity-row {
background:
{% set perc = states(config.entity)|float(0) %}
{% set rest = 100 - perc %}
{% if perc <= 10 %} {% set bar = '255,0,0' %}
{% elif perc <= 20 %} {% set bar = '255, 51, 0' %}
{% elif perc <= 30 %} {% set bar = '255, 85, 0' %}
{% elif perc <= 40 %} {% set bar = '255, 153, 0' %}
{% elif perc <= 50 %} {% set bar = '255, 204, 0' %}
{% elif perc <= 60 %} {% set bar = '255, 255, 0' %}
{% elif perc <= 70 %} {% set bar = '204, 255, 0' %}
{% elif perc <= 80 %} {% set bar = '153, 255, 0' %}
{% elif perc <= 90 %} {% set bar = '102, 255, 0' %}
{% else %} {% set bar = '51, 255, 0' %}
{% endif %}
linear-gradient(to right, rgb({{bar}},0.9) 0%, rgb({{bar}},0.6) {{perc}}%,
rgba({{bar}},0.3){{perc}}%, rgba({{bar}},0.1) 100%);
}
:host {
--card-mod-icon-color:
{% set perc = states(config.entity)|float(0) %}
{% if perc <= 10 %} rgb(225, 20, 60)
{% elif perc <= 20 %} rgb(153, 38, 0)
{% elif perc <= 30 %} rgb(153, 38, 0)
{% elif perc <= 40 %} rgb(153, 115, 0)
{% elif perc <= 50 %} rgb(153, 153, 0)
{% elif perc <= 60 %} rgb(153, 153, 0)
{% elif perc <= 70 %} rgb(115, 153, 0)
{% elif perc <= 80 %} rgb(77, 153, 0)
{% elif perc <= 90 %} rgb(38, 153, 0)
{% else %} rgb(0, 153, 0)
{% endif %};
}
entity_id: sensor.*_battery*
sort:
method: state
numeric: true
reverse: false
show_empty: false
Great work as per usual @Mariusthvdb thanks
EDIT:
This does work but with thousands of errors spamming the log (Home Assistant slowed down a lot, deleted card after log file reached 78mb), I also canât seem to use a template with this card, while applying the card mod.
Logger: frontend.js.modern.202505314
Source: components/system_log/init.py:331
First occurred: 15:52:54 (1 occurrence)
Last logged: 15:52:54
Logger: frontend.js.modern.202505314
Source: components/system_log/__init__.py:331
First occurred: 16:42:15 (1 occurrence)
Last logged: 16:42:15
Uncaught error from Chrome 137.0.0.0 on Windows 10
TypeError: Cannot read properties of undefined (reading 'includes') getValueFromEntityId (src/panels/lovelace/common/validate-condition.ts:97:26) conditions.every( (src/panels/lovelace/common/validate-condition.ts:181:17) conditions (src/panels/lovelace/common/validate-condition.ts:167:20) checkOrCondition (src/panels/lovelace/common/validate-condition.ts:154:42) checkOrCondition (src/panels/lovelace/common/validate-condition.ts:154:30) conditions.every( (src/panels/lovelace/common/validate-condition.ts:179:34) conditions (src/panels/lovelace/common/validate-condition.ts:167:20)
Logger: homeassistant.helpers.template
Source: helpers/template.py:2982
First occurred: 12:03:56 (13820 occurrences)
Last logged: 15:38:42
Template variable warning: 'bar' is undefined when rendering 'hui-generic-entity-row { background: {% set perc = states(config.entity) | float(0) %} {% set hue = (120 * perc / 100) | int %} background: linear-gradient( to right, hsl({{ hue }}, 100%, 50%) 0%, hsl({{ hue }}, 100%, 50%) {{ perc }}%, hsl({{ hue }}, 100%, 90%) 100% ); } /*linear-gradient(to left,ivory {{rest}}%, {{bar}} {{perc}}%);*/ linear-gradient(to right, rgb({{bar}},0.9) 0%, rgb({{bar}},0.6) {{perc}}%, rgba({{bar}},0.3){{perc}}%, rgba({{bar}},0.1) 100%); } :host { {% set perc = states(config.entity)|float(0) %} {% set red = (255 * (100 - perc) / 100) | int %} {% set green = (255 * perc / 100) | int %} {% set blue = 0 %} --card-mod-icon-color: rgb({{ red }}, {{ green }}, {{ blue }}); }'
Template variable warning: 'rest' is undefined when rendering 'hui-generic-entity-row { {% set perc = states(config.entity) | float(0) %} {% set hue = (120 * perc / 100) | int %} background: linear-gradient( to right, hsl({{ hue }}, 100%, 50%) 0%, hsl({{ hue }}, 100%, 50%) {{ perc }}%, hsl({{ hue }}, 100%, 90%) 100% ); } /*linear-gradient(to left,ivory {{rest}}%, {{bar}} {{perc}}%);*/ linear-gradient(to right, rgb({{bar}},0.9) 0%, rgb({{bar}},0.6) {{perc}}%, rgba({{bar}},0.3){{perc}}%, rgba({{bar}},0.1) 100%); } :host { {% set perc = states(config.entity)|float(0) %} {% set red = (255 * (100 - perc) / 100) | int %} {% set green = (255 * perc / 100) | int %} {% set blue = 0 %} --card-mod-icon-color: rgb({{ red }}, {{ green }}, {{ blue }}); }'
Template variable warning: 'bar' is undefined when rendering 'hui-generic-entity-row { {% set perc = states(config.entity) | float(0) %} {% set hue = (120 * perc / 100) | int %} background: linear-gradient( to right, hsl({{ hue }}, 100%, 50%) 0%, hsl({{ hue }}, 100%, 50%) {{ perc }}%, hsl({{ hue }}, 100%, 90%) 100% ); } /*linear-gradient(to left,ivory {{rest}}%, {{bar}} {{perc}}%);*/ linear-gradient(to right, rgb({{bar}},0.9) 0%, rgb({{bar}},0.6) {{perc}}%, rgba({{bar}},0.3){{perc}}%, rgba({{bar}},0.1) 100%); } :host { {% set perc = states(config.entity)|float(0) %} {% set red = (255 * (100 - perc) / 100) | int %} {% set green = (255 * perc / 100) | int %} {% set blue = 0 %} --card-mod-icon-color: rgb({{ red }}, {{ green }}, {{ blue }}); }'
Template variable warning: 'rest' is undefined when rendering 'hui-generic-entity-row { {% set perc = states(config.entity) | float(0) %} {% set hue = (120 * perc / 100) | int %} background: linear-gradient( to right, hsl({{ hue }}, 100%, 50%) 0%, hsl({{ hue }}, 100%, 50%) {{ perc }}%, hsl({{ hue }}, 100%, 90%) 100% ); } /*linear-gradient(to left,ivory {{rest}}%, {{bar}} {{perc}}%);*/ linear-gradient(to right, rgb({{bar}},0.9) 0%, rgb({{bar}},0.6) {{perc}}%, rgba({{bar}},0.3){{perc}}%, rgba({{bar}},0.1) 100%); } :host { {% set perc = states(config.entity)|float(0) %} {% set red = (255 * (100 - perc) / 100) | int %} {% set green = (255 * perc / 100) | int %} {% set blue = 0 %} --card-mod-icon-color: rgb({{ red }}, {{ green }}, {{ blue }}); }'
Template variable warning: 'bar' is undefined when rendering 'hui-generic-entity-row { {% set perc = states(config.entity) | float(0) %} {% set hue = (120 * perc / 100) | int %} background: linear-gradient( to right, hsl({{ hue }}, 100%, 50%) 0%, hsl({{ hue }}, 100%, 50%) {{ perc }}%, hsl({{ hue }}, 100%, 90%) 100% ); } /*linear-gradient(to left,ivory {{rest}}%, {{bar}} {{perc}}%);*/ linear-gradient(to right, rgb({{bar}},0.9) 0%, rgb({{bar}},0.6) {{perc}}%, rgba({{bar}},0.3){{perc}}%, rgba({{bar}},0.1) 100%); } :host { {% set perc = states(config.entity)|float(0) %} {% set red = (255 * (100 - perc) / 100) | int %} {% set green = (255 * perc / 100) | int %} {% set blue = 0 %} --card-mod-icon-color: rgb({{ red }}, {{ green }}, {{ blue }}); }'
Logger: homeassistant.helpers.event
Source: helpers/template.py:646
First occurred: 16:00:04 (2080 occurrences)
Last logged: 16:04:04
Error while processing template: Template<template=(hui-generic-entity-row { background: {% set perc = states(confi.entity)|float(0) %} {% set rest = 100 - perc %} {% if perc <= 10 %} {% set bar = '255,0,0' %} {% elif perc <= 20 %} {% set bar = '255, 51, 0' %} {% elif perc <= 30 %} {% set bar = '255, 85, 0' %} {% elif perc <= 40 %} {% set bar = '255, 153, 0' %} {% elif perc <= 50 %} {% set bar = '255, 204, 0' %} {% elif perc <= 60 %} {% set bar = '255, 255, 0' %} {% elif perc <= 70 %} {% set bar = '204, 255, 0' %} {% elif perc <= 80 %} {% set bar = '153, 255, 0' %} {% elif perc <= 90 %} {% set bar = '102, 255, 0' %} {% else %} {% set bar = '51, 255, 0' %} {% endif %} linear-gradient(to right, rgb({{bar}},0.9) 0%, rgb({{bar}},0.6) {{perc}}%, rgba({{bar}},0.3){{perc}}%, rgba({{bar}},0.1) 100%); } :host { --card-mod-icon-color: {% set perc = states(config.entity)|float(0) %} {% if perc <= 10 %} rgb(225, 20, 60) {% elif perc <= 20 %} rgb(153, 38, 0) {% elif perc <= 30 %} rgb(153, 38, 0) {% elif perc <= 40 %} rgb(153, 115, 0) {% elif perc <= 50 %} rgb(153, 153, 0) {% elif perc <= 60 %} rgb(153, 153, 0) {% elif perc <= 70 %} rgb(115, 153, 0) {% elif perc <= 80 %} rgb(77, 153, 0) {% elif perc <= 90 %} rgb(38, 153, 0) {% else %} rgb(0, 153, 0) {% endif %}; }) renders=206>
Error while processing template: Template<template=(hui-generic-entity-row { background: {% set perc = states(confi.entity)|float(0) %} {% set rest = 100 - perc %} {% if perc <= 10 %} {% set bar = '255,0,0' %} {% elif perc <= 20 %} {% set bar = '255, 51, 0' %} {% elif perc <= 30 %} {% set bar = '255, 85, 0' %} {% elif perc <= 40 %} {% set bar = '255, 153, 0' %} {% elif perc <= 50 %} {% set bar = '255, 204, 0' %} {% elif perc <= 60 %} {% set bar = '255, 255, 0' %} {% elif perc <= 70 %} {% set bar = '204, 255, 0' %} {% elif perc <= 80 %} {% set bar = '153, 255, 0' %} {% elif perc <= 90 %} {% set bar = '102, 255, 0' %} {% else %} {% set bar = '51, 255, 0' %} {% endif %} linear-gradient(to right, rgb({{bar}},0.9) 0%, rgb({{bar}},0.6) {{perc}}%, rgba({{bar}},0.3){{perc}}%, rgba({{bar}},0.1) 100%); } :host { --card-mod-icon-color: {% set perc = states(config.entity)|float(0) %} {% if perc <= 10 %} rgb(225, 20, 60) {% elif perc <= 20 %} rgb(153, 38, 0) {% elif perc <= 30 %} rgb(153, 38, 0) {% elif perc <= 40 %} rgb(153, 115, 0) {% elif perc <= 50 %} rgb(153, 153, 0) {% elif perc <= 60 %} rgb(153, 153, 0) {% elif perc <= 70 %} rgb(115, 153, 0) {% elif perc <= 80 %} rgb(77, 153, 0) {% elif perc <= 90 %} rgb(38, 153, 0) {% else %} rgb(0, 153, 0) {% endif %}; }) renders=210>
Error while processing template: Template<template=(hui-generic-entity-row { background: {% set perc = states(confi.entity)|float(0) %} {% set rest = 100 - perc %} {% if perc <= 10 %} {% set bar = '255,0,0' %} {% elif perc <= 20 %} {% set bar = '255, 51, 0' %} {% elif perc <= 30 %} {% set bar = '255, 85, 0' %} {% elif perc <= 40 %} {% set bar = '255, 153, 0' %} {% elif perc <= 50 %} {% set bar = '255, 204, 0' %} {% elif perc <= 60 %} {% set bar = '255, 255, 0' %} {% elif perc <= 70 %} {% set bar = '204, 255, 0' %} {% elif perc <= 80 %} {% set bar = '153, 255, 0' %} {% elif perc <= 90 %} {% set bar = '102, 255, 0' %} {% else %} {% set bar = '51, 255, 0' %} {% endif %} linear-gradient(to right, rgb({{bar}},0.9) 0%, rgb({{bar}},0.6) {{perc}}%, rgba({{bar}},0.3){{perc}}%, rgba({{bar}},0.1) 100%); } :host { --card-mod-icon-color: {% set perc = states(config.entity)|float(0) %} {% if perc <= 10 %} rgb(225, 20, 60) {% elif perc <= 20 %} rgb(153, 38, 0) {% elif perc <= 30 %} rgb(153, 38, 0) {% elif perc <= 40 %} rgb(153, 115, 0) {% elif perc <= 50 %} rgb(153, 153, 0) {% elif perc <= 60 %} rgb(153, 153, 0) {% elif perc <= 70 %} rgb(115, 153, 0) {% elif perc <= 80 %} rgb(77, 153, 0) {% elif perc <= 90 %} rgb(38, 153, 0) {% else %} rgb(0, 153, 0) {% endif %}; }) renders=214>
Error while processing template: Template<template=(hui-generic-entity-row { background: {% set perc = states(confi.entity)|float(0) %} {% set rest = 100 - perc %} {% if perc <= 10 %} {% set bar = '255,0,0' %} {% elif perc <= 20 %} {% set bar = '255, 51, 0' %} {% elif perc <= 30 %} {% set bar = '255, 85, 0' %} {% elif perc <= 40 %} {% set bar = '255, 153, 0' %} {% elif perc <= 50 %} {% set bar = '255, 204, 0' %} {% elif perc <= 60 %} {% set bar = '255, 255, 0' %} {% elif perc <= 70 %} {% set bar = '204, 255, 0' %} {% elif perc <= 80 %} {% set bar = '153, 255, 0' %} {% elif perc <= 90 %} {% set bar = '102, 255, 0' %} {% else %} {% set bar = '51, 255, 0' %} {% endif %} linear-gradient(to right, rgb({{bar}},0.9) 0%, rgb({{bar}},0.6) {{perc}}%, rgba({{bar}},0.3){{perc}}%, rgba({{bar}},0.1) 100%); } :host { --card-mod-icon-color: {% set perc = states(config.entity)|float(0) %} {% if perc <= 10 %} rgb(225, 20, 60) {% elif perc <= 20 %} rgb(153, 38, 0) {% elif perc <= 30 %} rgb(153, 38, 0) {% elif perc <= 40 %} rgb(153, 115, 0) {% elif perc <= 50 %} rgb(153, 153, 0) {% elif perc <= 60 %} rgb(153, 153, 0) {% elif perc <= 70 %} rgb(115, 153, 0) {% elif perc <= 80 %} rgb(77, 153, 0) {% elif perc <= 90 %} rgb(38, 153, 0) {% else %} rgb(0, 153, 0) {% endif %}; }) renders=218>
Error while processing template: Template<template=(hui-generic-entity-row { background: {% set perc = states(confi.entity)|float(0) %} {% set rest = 100 - perc %} {% if perc <= 10 %} {% set bar = '255,0,0' %} {% elif perc <= 20 %} {% set bar = '255, 51, 0' %} {% elif perc <= 30 %} {% set bar = '255, 85, 0' %} {% elif perc <= 40 %} {% set bar = '255, 153, 0' %} {% elif perc <= 50 %} {% set bar = '255, 204, 0' %} {% elif perc <= 60 %} {% set bar = '255, 255, 0' %} {% elif perc <= 70 %} {% set bar = '204, 255, 0' %} {% elif perc <= 80 %} {% set bar = '153, 255, 0' %} {% elif perc <= 90 %} {% set bar = '102, 255, 0' %} {% else %} {% set bar = '51, 255, 0' %} {% endif %} linear-gradient(to right, rgb({{bar}},0.9) 0%, rgb({{bar}},0.6) {{perc}}%, rgba({{bar}},0.3){{perc}}%, rgba({{bar}},0.1) 100%); } :host { --card-mod-icon-color: {% set perc = states(config.entity)|float(0) %} {% if perc <= 10 %} rgb(225, 20, 60) {% elif perc <= 20 %} rgb(153, 38, 0) {% elif perc <= 30 %} rgb(153, 38, 0) {% elif perc <= 40 %} rgb(153, 115, 0) {% elif perc <= 50 %} rgb(153, 153, 0) {% elif perc <= 60 %} rgb(153, 153, 0) {% elif perc <= 70 %} rgb(115, 153, 0) {% elif perc <= 80 %} rgb(77, 153, 0) {% elif perc <= 90 %} rgb(38, 153, 0) {% else %} rgb(0, 153, 0) {% endif %}; }) renders=222>
Traceback (most recent call last):
File "/usr/src/homeassistant/homeassistant/helpers/template.py", line 644, in async_render
render_result = _render_with_context(self.template, compiled, **kwargs)
File "/usr/src/homeassistant/homeassistant/helpers/template.py", line 2969, in _render_with_context
return template.render(**kwargs)
~~~~~~~~~~~~~~~^^^^^^^^^^
File "/usr/local/lib/python3.13/site-packages/jinja2/environment.py", line 1295, in render
self.environment.handle_exception()
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~^^
File "/usr/local/lib/python3.13/site-packages/jinja2/environment.py", line 942, in handle_exception
raise rewrite_traceback_stack(source=source)
File "<template>", line 3, in top-level template code
File "/usr/local/lib/python3.13/site-packages/jinja2/sandbox.py", line 401, in call
return __context.call(__obj, *args, **kwargs)
~~~~~~~~~~~~~~^^^^^^^^^^^^^^^^^^^^^^^^
File "/usr/src/homeassistant/homeassistant/helpers/template.py", line 948, in __call__
state = _get_state(self._hass, entity_id)
File "/usr/src/homeassistant/homeassistant/helpers/template.py", line 1242, in _get_state
return _get_template_state_from_state(hass, entity_id, hass.states.get(entity_id))
~~~~~~~~~~~~~~~^^^^^^^^^^^
File "/usr/src/homeassistant/homeassistant/core.py", line 2151, in get
entity_id.lower()
^^^^^^^^^^^^^^^
File "/usr/src/homeassistant/homeassistant/helpers/template.py", line 3001, in _fail_with_undefined_error
return super()._fail_with_undefined_error(*args, **kwargs)
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~^^^^^^^^^^^^^^^^^
jinja2.exceptions.UndefinedError: 'tentity' is undefined
The above exception was the direct cause of the following exception:
Traceback (most recent call last):
File "/usr/src/homeassistant/homeassistant/helpers/template.py", line 761, in async_render_to_info
render_info._result = self.async_render( # noqa: SLF001
~~~~~~~~~~~~~~~~~^^^^^^^^^^^^^^^^^
variables, strict=strict, log_fn=log_fn, **kwargs
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
)
^
File "/usr/src/homeassistant/homeassistant/helpers/template.py", line 646, in async_render
raise TemplateError(err) from err
homeassistant.exceptions.TemplateError: UndefinedError: 'tentity' is undefined
this is a bit confusingâŠ
does to âworkâ or not
if it âworksâ does it do so with the errors, or not
âworkâ would be: show a correct card in the frontend, and also formatted the way you want.
if you get a template warning in the ha log, then your template contains an error. so try to find that in the dev tools
if you state you cant use a template while applying the card-mod, do you mean a template filter for auto-entities?
because yes, that is way more complex, and youâd need to add the card-mod inside the template⊠it can be done but not just like this
Sorry for the confusion.
It works: Meaning that card displays how it should as the screenshots show.
Does not work: Slows HA down while the template errors are running in the background.
Yes a template filter I can not use in card and apply the card-mod.
I tried a few hours worth of iterations today trying to get the card-mod inside the template⊠Failed miserably. Also failed to fix template errors without the filter.
I would be happy just being able to get the code shown above not to throw errors.
of course!
try to peel away certain parts per time. and see when the errors disappear.
I will have to try tomorrow when Infront of a computer again. I have a feeling it has something to do with how the wild cards are referenced.
Only way I think to be able to make the card look like it should without errors is to apply the card-mod per entity (like the home assistant stats bar card) will make a long card code.
Problem is when I peel away so to does the styling.
seems ok, but you can alway be safe and quote them. (is really only required when the wildcard start the string, like entity_id: *_battery which then needs to be entity_id: '*_battery'
Yes I did quote them multiple times today but the quotes disappeared after saving. Also the card re-jigged itself about. Was using a mixture of raw editor and sections editor.
Also the state unavailable/unknown may be playing a bit of havoc with the template.