I have made some significant improvements and changes to my battery card that i posted a while back that i feel like it warrants another post if that is ok. if not i will remove and update my original post instead.
{%- for state in states.sensor |
selectattr('entity_id','search','battery') |
selectattr('entity_id','search','spare_bedroom') -%}
- Because we are using a template filter we can now also edit the name of the entity on the fly. so removing things from the name that are redundant. in my case i remove the word battery, because… of course its a battery…? and then removing the name off the room. i clicked on the room, i know what room i am looking at, so doesnt need to be in the name.
'name': state.attributes.friendly_name.split(' Battery')[0].split(' battery')[0].split('Spare Bedroom')[1],
- You can now set the text color based on the battery percentage as well. this is good for when you have a color set on the bar that doesnt work well with the default text color. you can also set this based on whether dark or light theme is being used.
(this is now a bit messy looking, but trust me when i say that this was the only way to implement it.)
{% if states(config.entity) | int <= 10 %}
bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar {
/* Bar color */
--bar-color: #ff0026 !important;
/* Icon */
--card-mod-icon: mdi:battery-10 !important;
}
@media (prefers-color-scheme: dark) {
/* Dark theme text colors */
bar-card-name {
color: var(--primary-text-color) !important;
}
bar-card-value {
color: #cccccc !important;
}
}
@media (prefers-color-scheme: light) {
/* Light theme text colors */
bar-card-name {
color: var(--primary-text-color) !important;
}
bar-card-value {
color: #3b3b3b !important;
}
}
- Fixed some alignment issues. and made it perfectly match the sizing of mushroom cards
You do now need to fill in your values for bar color, icon type, and text color in 2 seperate places rather than 1 like before. but it is just a duplicate of the other, so you can copy and paste once you have finished 1 full {% if %} {% endif %} section into the other one and then fix the indentation.
here is what it looks like expanded. safe to say that i am in love with this card
The code is too big to post in a single reply, so i will post it in 2 sections. just put them together right under eachother in the same card!
1st Half of Code
type: custom:stack-in-card
cards:
- type: vertical-stack
cards:
- type: custom:stack-in-card
card_mod:
style: |
ha-card {
background: transparent;
box-shadow: none;
border: none;
}
cards:
- type: grid
square: false
columns: 2
cards:
- type: custom:auto-entities
card:
type: custom:stack-in-card
card_mod:
style: |
ha-card {
padding-top: 5px;
{% if states('input_boolean.spare_bedroom_battery_dropdown') == 'on' %}
padding-bottom: 5px;
{% else %}
padding-bottom: 0px;
{% endif %}
padding-right: 30px;
width: 200%;
background: transparent !important;
box-shadow: none;
border: none !important;
}
card_param: cards
filter:
template: >-
{%- for state in states.sensor |
selectattr('entity_id','search','battery') |
selectattr('entity_id','search','spare_bedroom') -%}
{{
{
'type': 'custom:bar-card',
'entity': state.entity_id,
'name': state.attributes.friendly_name.split(' Battery')[0].split(' battery')[0].split('Spare Bedroom')[1],
'card_mod':
{
'style': 'bar-card-currentbar, bar-card-backgroundbar {
border-radius: 12px !important;
height: 41px !important;
margin-top: -8px !important;
width: 101%;
right: 0.5%;
}
ha-icon {
position: relative;
padding: 11px;
border-radius: 50%;
--mdc-icon-size: 21px;
margin-top: -15px;
right: 4px;
}
{% if states(config.entity) | int <= 10 %}
bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar {
/* Bar color */
--bar-color: #ff0026 !important;
/* Icon */
--card-mod-icon: mdi:battery-10 !important;
}
@media (prefers-color-scheme: dark) {
/* Dark theme text colors */
bar-card-name {
color: var(--primary-text-color) !important;
}
bar-card-value {
color: #cccccc !important;
}
}
@media (prefers-color-scheme: light) {
/* Light theme text colors */
bar-card-name {
color: var(--primary-text-color) !important;
}
bar-card-value {
color: #3b3b3b !important;
}
}
{% elif states(config.entity) | int <= 20 %}
bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar {
/* Bar color */
--bar-color: #ff4d00 !important;
/* Icon */
--card-mod-icon: mdi:battery-20 !important;
}
@media (prefers-color-scheme: dark) {
/* Dark theme text colors */
bar-card-name {
color: var(--primary-text-color) !important;
}
bar-card-value {
color: #cccccc !important;
}
}
@media (prefers-color-scheme: light) {
/* Light theme text colors */
bar-card-name {
color: var(--primary-text-color) !important;
}
bar-card-value {
color: #3b3b3b !important;
}
}
{% elif states(config.entity) | int <= 30 %}
bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar {
/* Bar color */
--bar-color: #ff9900 !important;
/* Icon */
--card-mod-icon: mdi:battery-30 !important;
}
@media (prefers-color-scheme: dark) {
/* Dark theme text colors */
bar-card-name {
color: var(--primary-text-color) !important;
filter: invert(1)
}
bar-card-value {
color: #cccccc !important;
filter: invert(1)
}
}
@media (prefers-color-scheme: light) {
/* Light theme text colors */
bar-card-name {
color: var(--primary-text-color) !important;
}
bar-card-value {
color: #3b3b3b !important;
}
}
{% elif states(config.entity) | int <= 40 %}
bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar {
/* Bar color */
--bar-color: #ffcc00 !important;
/* Icon */
--card-mod-icon: mdi:battery-40 !important;
}
@media (prefers-color-scheme: dark) {
/* Dark theme text colors */
bar-card-name {
color: var(--primary-text-color) !important;
filter: invert(1)
}
bar-card-value {
color: #cccccc !important;
filter: invert(1)
}
}
@media (prefers-color-scheme: light) {
/* Light theme text colors */
bar-card-name {
color: var(--primary-text-color) !important;
}
bar-card-value {
color: #3b3b3b !important;
}
}
{% elif states(config.entity) | int <= 50 %}
bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar {
/* Bar color */
--bar-color: #e3eb00 !important;
/* Icon */
--card-mod-icon: mdi:battery-50 !important;
}
@media (prefers-color-scheme: dark) {
/* Dark theme text colors */
bar-card-name {
color: var(--primary-text-color) !important;
filter: invert(1)
}
bar-card-value {
color: #cccccc !important;
filter: invert(1)
}
}
@media (prefers-color-scheme: light) {
/* Light theme text colors */
bar-card-name {
color: var(--primary-text-color) !important;
}
bar-card-value {
color: #3b3b3b !important;
}
}
{% elif states(config.entity) | int <= 60 %}
bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar {
/* Bar color */
--bar-color: #aaff00 !important;
/* Icon */
--card-mod-icon: mdi:battery-60 !important;
}
@media (prefers-color-scheme: dark) {
/* Dark theme text colors */
bar-card-name {
color: var(--primary-text-color) !important;
filter: invert(1)
}
bar-card-value {
color: #cccccc !important;
filter: invert(1)
}
}
@media (prefers-color-scheme: light) {
/* Light theme text colors */
bar-card-name {
color: var(--primary-text-color) !important;
}
bar-card-value {
color: #3b3b3b !important;
}
}
{% elif states(config.entity) | int <= 70 %}
bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar {
/* Bar color */
--bar-color: #77ff00 !important;
/* Icon */
--card-mod-icon: mdi:battery-70 !important;
}
@media (prefers-color-scheme: dark) {
/* Dark theme text colors */
bar-card-name {
color: var(--primary-text-color) !important;
filter: invert(1)
}
bar-card-value {
color: #cccccc !important;
filter: invert(1)
}
}
@media (prefers-color-scheme: light) {
/* Light theme text colors */
bar-card-name {
color: var(--primary-text-color) !important;
}
bar-card-value {
color: #3b3b3b !important;
}
}
{% elif states(config.entity) | int <= 80 %}
bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar {
/* Bar color */
--bar-color: #00ff1a !important;
/* Icon */
--card-mod-icon: mdi:battery-80 !important;
}
@media (prefers-color-scheme: dark) {
/* Dark theme text colors */
bar-card-name {
color: var(--primary-text-color) !important;
filter: invert(1)
}
bar-card-value {
color: #cccccc !important;
filter: invert(1)
}
}
@media (prefers-color-scheme: light) {
/* Light theme text colors */
bar-card-name {
color: var(--primary-text-color) !important;
}
bar-card-value {
color: #3b3b3b !important;
}
}
{% elif states(config.entity) | int <= 90 %}
bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar {
/* Bar color */
--bar-color: #22c402 !important;
/* Icon */
--card-mod-icon: mdi:battery-90 !important;
}
@media (prefers-color-scheme: dark) {
/* Dark theme text colors */
bar-card-name {
color: var(--primary-text-color) !important;
filter: invert(1)
}
bar-card-value {
color: #cccccc !important;
filter: invert(1)
}
}
@media (prefers-color-scheme: light) {
/* Light theme text colors */
bar-card-name {
color: var(--primary-text-color) !important;
}
bar-card-value {
color: #3b3b3b !important;
}
}
{% elif states(config.entity) | int <= 100 %}
bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar {
/* Bar color */
--bar-color: #22c402 !important;
/* Icon */
--card-mod-icon: mdi:battery !important;
}
@media (prefers-color-scheme: dark) {
/* Dark theme text colors */
bar-card-name {
color: var(--primary-text-color) !important;
filter: invert(1)
}
bar-card-value {
color: #cccccc !important;
filter: invert(1)
}
}
@media (prefers-color-scheme: light) {
/* Light theme text colors */
bar-card-name {
color: var(--primary-text-color) !important;
}
bar-card-value {
color: #3b3b3b !important;
}
}
{% else %}
bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar {
/* Bar color */
--bar-color: #0033ff !important
/* Icon */
--card-mod-icon: mdi:bug
}
@media (prefers-color-scheme: dark) {
/* Dark theme text colors */
bar-card-name {
color: var(--primary-text-color) !important;
filter: invert(1)
}
bar-card-value {
color: #cccccc !important;
filter: invert(1)
}
}
@media (prefers-color-scheme: light) {
/* Light theme text colors */
bar-card-name {
color: var(--primary-text-color) !important;
}
bar-card-value {
color: #3b3b3b !important;
}
}
{% endif %}
bar-card-row, ha-icon {
color: color-mix(in srgb, var(--bar-color) 100%, transparent) !important;
background: color-mix(in srgb, var(--bar-color) 20%, transparent);
}
bar-card-indicator {
color: color-mix(in srgb, var(--bar-color) 100%, transparent) !important;
top: -8px;
}
bar-card-name {
margin-top: -27px !important;
font-weight: bold;
left: 0px;
}
bar-card-value {
margin-top: 8px !important;
font-weight: bold;
font-size: 11px;
right: 96.9%;
width: 0px;
}
ha-card {
margin: -4px 0px !important;
height: 60px;
}'
}
}
}},
{%- endfor %}
sort:
method: state
numeric: true
count: 1
- type: custom:mushroom-chips-card
chips:
- type: template
icon: >-
{% if
states('input_boolean.spare_bedroom_battery_dropdown') ==
'on' %}
mdi:chevron-up
{% else %}
mdi:chevron-down
{% endif %}
entity: input_boolean.spare_bedroom_battery_dropdown
card_mod:
style: |
ha-card {
top: 13px;
right: 10px;
--chip-icon-size: 23px;
border: none !important;
box-shadow: none !important;
background: transparent !important;
}
alignment: end
EDIT: Updated to work with card mod version 3.4.0 and up. Since just using style: | without card_mod: before is entirely dead now.
Only question is how would I go about adding a light count to display on the lightbulb entity? Cheers!
