I am trying to create a dashboard and I’d like each room to display how many lights are on. I’ve modified a mushroom chip card within a button card to do this.
Everything seems to work except the lightbulb chip. Any time the app is opened/reopened the position of the chip is not correct until I select a different tab then go back, then it visually pop’s up into it’s rightful place.
The first picture is right when I open the app.
- type: custom:button-card
name: Living Room
view_layout:
grid-area: c0
icon: mdi:sofa
entity: sensor.station_inside_temp
tap_action:
action: navigate
navigation_path: '#living'
show_state: true
styles:
card:
- height: 70px;
- margin-top: '-8px'
- margin-bottom: 10px
- box-shadow: 0px 8px 4px -7px rgba(0,0,0,0.29);
- border-radius: 15px;
grid:
- grid-template-areas: '"i n arrow" "i s arrow"'
- grid-template-columns: 60px 1fr 40px;
img_cell:
- background: lightgrey
- border-radius: 11px
- margin-left: 8px
- width: 52px
- height: 52px
icon:
- width: 32px
- color: tan
name:
- justify-self: start
- font-size: 16px
- font-weight: 300
- margin-top: '-18px'
- padding-left: 10px
state:
- justify-self: start
- font-size: 14px
- font-weight: 300
- color: black
- padding-left: 10px
- margin-top: '-30px'
- opacity: '0.7'
custom_fields:
arrow:
- justify-self: end
- font-size: 14px
- opacity: '0.7'
i:
- margin-top: '-20px;'
- margin-left: 37px;
card_mod:
style: |
ha-card {
border: none;
}
custom_fields:
arrow: |
[[[
return '<ha-icon icon="mdi:chevron-right" style="width: 16px; height: 16px;"></ha-icon>'
]]]
i:
card:
type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: light.upstairs_lights_active
state: 'on'
chip:
type: template
icon: mdi:lightbulb
content: >-
{{ expand(states.light.upstairs_lights_active) | selectattr(
'state', 'eq', 'on') | list | count }}
entity: light.upstairs_lights_active
icon_color: yellow
card_mod:
style:
mushroom-conditional-chip:nth-child(1):
mushroom-template-chip$: |
span {
position: relative;
right: 18px;
top: -2px;
width: 0px;
font-size: 10px;
margin-right: -5px;
}
.: |
ha-card {
--chip-border-width: 0;
--chip-icon-size: 20px;
box-shadow: none !important;
--chip-background: transparent;
--card-mod-icon-color:
{{ "yellow" if states("sensor.upstairs_current_lights_on")|int(0) >= 1 else
'transparent' }}
}
ha-card {
--primary-text-color:
{{ "black" if states("sensor.upstairs_current_lights_on")|int(0) >= 1 else
'transparent' }}
}
I don’t know if this is a limitation with how the yaml executes or if there’s anything that can be done.
There is nothing relevant in the logs.
I’m running this on a VM on a fairly powerful Ryzen 7 machine with plenty of RAM.
Core 2024.3.3
Any ideas or guidance would be appreciated.
adockter:
position: relative;
What happens if you change position: relative; to position: absolute; ?
You may need to adjust these as well
right: 18px;
top: -2px;
Thanks for the reply. Just tried absolute with adjusted position parameters and have the same outcome.
You have multiple issue with your card_mod I am working through them now.
For example you can’t have two instances of ha-card present. Only one will be recognized.
Here is a gif of what I’m experiencing.
I am still new to yaml and I’m trying to learn the ins and outs of card mod still. A lot of what I have has been pieced together from examples.
I understand what you are getting at with the ha-card instances. I tried multiple ways to combine them and could not get it to work. I guess I thought with them being at different levels in the stack it was acceptable to have multiple instances.
I will probably not reply any more this evening as morning comes early, but will tomorrow. Thank you
Let’s try this and let me know what needs adjusted…
type: custom:button-card
name: Living Room
view_layout:
grid-area: c0
icon: mdi:sofa
entity: sensor.station_inside_temp
tap_action:
action: navigate
navigation_path: '#living'
show_state: true
styles:
card:
- height: 70px;
- margin-top: '-8px'
- margin-bottom: 10px
- box-shadow: 0px 8px 4px -7px rgba(0,0,0,0.29);
- border-radius: 15px;
grid:
- grid-template-areas: '"i n arrow" "i s arrow"'
- grid-template-columns: 60px 1fr 40px;
img_cell:
- background: lightgrey
- border-radius: 11px
- margin-left: 8px
- width: 52px
- height: 52px
icon:
- width: 32px
- color: tan
name:
- justify-self: start
- font-size: 16px
- font-weight: 300
- margin-top: '-18px'
- padding-left: 10px
state:
- justify-self: start
- font-size: 14px
- font-weight: 300
- color: black
- padding-left: 10px
- margin-top: '-30px'
- opacity: '0.7'
custom_fields:
arrow:
- justify-self: end
- font-size: 14px
- opacity: '0.7'
i:
- margin-top: '-20px;'
- margin-left: 37px;
card_mod:
style: |
ha-card {
border: none;
}
custom_fields:
arrow: |
[[[
return '<ha-icon icon="mdi:chevron-right" style="width: 16px; height: 16px;"></ha-icon>'
]]]
i:
card:
type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: light.upstairs_lights_active
state: 'on'
chip:
type: template
icon: mdi:lightbulb
content: |
{{ states('sensor.lights_on') |count }}
entity: light.upstairs_lights_active
icon_color: |-
{% if states('sensor.upstairs_current_lights_on') | int <= 1 %}
yellow
{% else %}
transparent
{% endif %}
card_mod:
style: |
ha-card {
border: none !important;
top: -10px;
}
card_mod:
style:
mushroom-conditional-chip:nth-child(1):
mushroom-template-chip$: |
span {
position: absolute;
margin-right: 11px !important;
top: 10px;
width: 0px;
font-size: 10px;
margin-right: -5px;
}
.: |
ha-card {
--chip-icon-size: 20px;
--chip-background: none !important;
{% if states('sensor.upstairs_current_lights_on') | int() >= 1 %}
--primary-text-color: black !important;
{%else%}
--primary-text-color: transparent !important;
{% endif%}
}
So, I went ahead and tried what you gave me and no matter how many lights I had on it returned a number 7 in the chip and the same original “pop-in” symptom. I then modified the content portion to get it to display the correct amount of lights on.
content: |
{{ states('light.upstairs_lights_active') | count}}
I am using two templates
light.upstairs_lights_active is a group containing all lights.
{% set upstairs_current_lights_on = [
states.light.island_lights,
states.light.entryway_light,
states.light.garage_lights
] %}
{{ upstairs_current_lights_on | selectattr('state','eq','on') | list | count }}
What I tried next was removing the button card portion just to isolate the chip card. This showed the same pop-in.
Finally, upon removing all card-mod information the chip stays in position but now is not formatted how I would like it. So it appears it is not liking something with card_mod from what I can tell.
I apologize, I missed changing my light sensor back to yours for the content. That is why the light count was not working. Let me take a look at your card_mod code again.
I’m getting this as the results of the code I posted.
Can you post your code for the test3?
No apology necessary about the light sensor issue.
What you are getting with the code is similar to what I’m seeing.
Hopefully this is what you meant you wanted to see.
Here’s the third test, code stripped down with a picture of what I get
This icon stays in place when reopening the app, which I’m assuming is because there are no commands to reposition.
type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: light.upstairs_lights_active
state: 'on'
chip:
type: template
icon: mdi:lightbulb
content: |
{{ states('sensor.lights_on') | count}}
entity: light.upstairs_lights_active
icon_color: |-
{% if states('sensor.upstairs_current_lights_on') | int >= 1 %}
yellow
{% else %}
transparent
{% endif %}
card_mod:
style: |
ha-card {
border: none !important;
top: px;
}
We can move the 7 over easily
adockter
April 2, 2024, 7:37pm
11
Can it be done without card_mod, because that appears to be my issue?
I believe the issue is because you are using span. I have built a few of these cards so let me try another option. I was trying to use most of your code. We can move the light count to a pseudo -element.
Here is an example of what I am describing. Change the entities and content if you want to play with the example code.
type: custom:mushroom-template-card
primary: Two Badges
secondary: more info
entity: light.pc_lights
icon: mdi:lightbulb
icon_color: blue
tap_action:
action: toggle
card_mod:
style: |
ha-state-icon::after {
content: "{{ states('sensor.lights_on') |count }}";
position: absolute;
top: 0%;
right: 70%;
display: flex;
justify-content: center;
align-items: center;
width: 14px;
height:14px;
border-radius: 50%;
background-repeat: no-repeat;
background: yellow;
font-size: 10px;
}
ha-state-icon::before {
content: "{{ states('sensor.lights_on') |count }}";
position: absolute;
top: 0%;
right: -6%;
display: flex;
justify-content: center;
align-items: center;
width: 14px;
height:14px;
border-radius: 50%;
background-repeat: no-repeat;
background: yellow;
font-size: 10px;
}
1 Like
adockter
April 2, 2024, 8:21pm
14
Thank you very much, I will work with that and see what I can come up with. I will report back.
Juist so we are on the same page, you want the count inside the lightbulb, correct?
Test this code…
type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: light.upstairs_lights_active
state: 'on'
chip:
type: template
icon: mdi:lightbulb
entity: light.upstairs_lights_active
icon_color: |-
{% if states('sensor.upstairs_current_lights_on') | int >= 1 %}
yellow
{% else %}
transparent
{% endif %}
card_mod:
style: |
ha-card {
border: none !important;
background: white !important;
--chip-icon-size: 25px;
}
ha-card:after {
content: "{{ states('light.upstairs_lights_active') | count}}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: transparent !important;
color: black;
font-weight: bolder;
border-radius: 15px;
top: 11px;
left: 16px;
width: 10px;
height: 10px;
font-size: 10px;
}
adockter
April 2, 2024, 9:43pm
16
Correct, if it is possible.
The code I just posted moves the “content” to the bulb vs the bulb to the “content”.
That allows the bulb and the light count to move/resize together.
1 Like
This still need your IF statements, but check if it fixes your issue.
type: custom:button-card
name: Living Room
view_layout:
grid-area: c0
icon: mdi:sofa
entity: sensor.station_inside_temp
tap_action:
action: navigate
navigation_path: '#living'
show_state: true
styles:
card:
- height: 70px;
- margin-top: '-8px'
- margin-bottom: 10px
- box-shadow: 0px 8px 4px -7px rgba(0,0,0,0.29);
- border-radius: 15px;
grid:
- grid-template-areas: '"i n arrow" "i s arrow"'
- grid-template-columns: 60px 1fr 40px;
img_cell:
- background: lightgrey
- border-radius: 11px
- margin-left: 8px
- width: 52px
- height: 52px
icon:
- width: 32px
- color: tan
name:
- justify-self: start
- font-size: 16px
- font-weight: 300
- margin-top: '-18px'
- padding-left: 10px
state:
- justify-self: start
- font-size: 14px
- font-weight: 300
- color: black
- padding-left: 10px
- margin-top: '-30px'
- opacity: '0.7'
custom_fields:
arrow:
- justify-self: end
- font-size: 14px
- opacity: '0.7'
i:
- margin-top: '-20px;'
- margin-left: 37px;
card_mod:
style: |
ha-card {
border: none;
}
custom_fields:
arrow: |
[[[
return '<ha-icon icon="mdi:chevron-right" style="width: 16px; height: 16px;"></ha-icon>'
]]]
i:
card:
type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: light.upstairs_lights_active
state: 'on'
chip:
type: template
icon: mdi:lightbulb
entity: light.upstairs_lights_active
icon_color: |-
{% if states('sensor.upstairs_current_lights_on') | int >= 1 %}
yellow
{% else %}
yellow
{% endif %}
card_mod:
style: |
ha-card {
border: none !important;
background: transparent !important;
--chip-icon-size: 25px;
top: -10px;
left: -2px;
}
ha-card:after {
content: "{{ states('light.upstairs_lights_active') | count}}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: transparent !important;
color: black;
font-weight: bolder;
border-radius: 15px;
top: 11px;
left: 16px;
width: 10px;
height: 10px;
font-size: 10px;
}
1 Like
adockter
April 3, 2024, 2:40am
19
That looks great now! The lightbulb and number are in the proper location right from the start and do not reposition.
I just got done fighting with the content portion for about 5 hours as the number was stuck at 2 no matter how many lights were on. But, I finally got it working and it works exactly as I had hoped.
content: "{{ expand(states.light.upstairs_lights_active) | selectattr('state', 'eq', 'on') | list | count }}";
And here is the full code for the button with indicator for anyone interested.
type: custom:button-card
name: Living Room
view_layout:
grid-area: c0
icon: mdi:sofa
entity: sensor.station_inside_temp
tap_action:
action: navigate
navigation_path: '#living'
show_state: true
styles:
card:
- height: 70px;
- margin-top: '-8px'
- margin-bottom: 10px
- box-shadow: 0px 8px 4px -7px rgba(0,0,0,0.29);
- border-radius: 15px;
grid:
- grid-template-areas: '"i n arrow" "i s arrow"'
- grid-template-columns: 60px 1fr 40px;
img_cell:
- background: lightgrey
- border-radius: 11px
- margin-left: 8px
- width: 52px
- height: 52px
icon:
- width: 32px
- color: tan
name:
- justify-self: start
- font-size: 16px
- font-weight: 300
- margin-top: '-18px'
- padding-left: 10px
state:
- justify-self: start
- font-size: 14px
- font-weight: 300
- color: black
- padding-left: 10px
- margin-top: '-30px'
- opacity: '0.7'
custom_fields:
arrow:
- justify-self: end
- font-size: 14px
- opacity: '0.7'
i:
- margin-top: '-20px;'
- margin-left: 37px;
card_mod:
style: |
ha-card {
border: none;
}
custom_fields:
arrow: |
[[[
return '<ha-icon icon="mdi:chevron-right" style="width: 16px; height: 16px;"></ha-icon>'
]]]
i:
card:
type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: light.upstairs_lights_active
state: 'on'
chip:
type: template
icon: mdi:lightbulb
entity: light.upstairs_lights_active
icon_color: |-
{% if states('sensor.upstairs_current_lights_on') | int >= 1 %}
yellow
{% else %}
yellow
{% endif %}
card_mod:
style: |
ha-card {
border: none !important;
background: transparent !important;
--chip-icon-size: 25px;
top: -10px;
left: -2px;
}
ha-card:after {
content: "{{ expand(states.light.upstairs_lights_active) | selectattr('state', 'eq', 'on') | list | count }}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: transparent !important;
color: black;
font-weight: bolder;
border-radius: 15px;
top: 11px;
left: 16px;
width: 10px;
height: 10px;
font-size: 10px;
}
Thank you LiQuid_cOOled, I would have never figured this out without your time and assistance. I truly appreciate it and hopefully someday I’ll be able to help out as well.
I’m happy I was able to assist!
It may be helpful to template the light count for all lights and by area. For me, it makes it a lot easier to incorporate into cards because you can simply reference the sensor and count.
An example…
sensor:
- platform: template
sensors:
lights_on:
friendly_name: 'Lights ON'
value_template: |
{% set area = expand(area_entities('Bedroom'))
| selectattr("state", "eq", "on")%}
{{ area | rejectattr("attributes.device_class", 'eq', 'battery') | list | count > 0 }}
all_lights_on:
friendly_name: 'All Lights ON'
value_template: >
{{ states.light | rejectattr('attributes.entity_id', 'defined') | selectattr('state', 'eq', 'on') | list | count }}
Have a good evening!
1 Like
adockter
April 3, 2024, 3:03am
21
That is definitely my plan. Thank you for the example. Have a good night as well. Thanks again
