Thank you!!
Do you already have sensor created for number of lights on?
lights_on:
friendly_name: 'Lights ON'
value_template: >
{% set lights = [
states.light.pc_lights,
states.light.bed_lights,
states.light.tv_lights,
states.light.night_stands,
states.light.bathroom_lights,
states.light.server_light,
] %}
{{ lights | selectattr('state','eq','on') | list | count }}
One method for multiple badges is to take advantage of ha-state-icon::before { and ha-state-icon::after {
type: custom:mushroom-template-card
primary: Two Badges
secondary: more info
entity: light.pc_lights
icon: mdi:lightbulb
icon_color: white
tap_action:
action: toggle
card_mod:
style: |
ha-state-icon::after {
content: "{{ states('sensor.lights_on') }}";
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: red;
font-size: 10px;
}
ha-state-icon::before {
content: "{{ states('sensor.lights_on') }}";
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: red;
font-size: 10px;
}
1 Like
For 2. Try clearing your browser history data and see if it goes away. It may be too large of a file.
wondering if this great community of Mushroomers can help a mere Tile card user with what seems to be a very specific issue.
Bottom line:
I can filter an entity_picture in Chrome, but that same mod wont work in Safari (on a Mac, and the iOS App)
Was hoping the rendering of those pictures would be related on Mushroom and Tile and if you have seen discrepancies like this before.
If no, sorry for wasting your reading time…
for brevity’s sake, I wont post the full mod I am using now (can read that in the link) but only the failing filter:
card_mod:
style: |
ha-tile-image {
{{'filter: grayscale(1)' if not is_state(config.entity,'home') and
states(config.entity) not in zones else 'filter: none'}};
}
It seems to boil down to the filter itself, any other type of filter, like a blur, shows the same: works in Chrome, not in Safari.
And yes, Ive also tried to play with -webkit- but that wasnt successful either. see: Mushroom Cards - Build a beautiful dashboard easily 🍄 - #2025 by rhysb
ha-tile-image {
{{'-webkit-filter: grayscale(100%)' if not is_state(config.entity,'home') and
states(config.entity) not in zones else 'filter: none'}};
}
Works in Chrome… not in Safari
Anyways, if you have a suggestion, please don’t hold back
checked: Mushroom Cards - Build a beautiful dashboard easily 🍄 - #1079 by rhysb
Mushroom Cards - Build a beautiful dashboard easily 🍄 - #1111 by rhysb
Mushroom Cards - Build a beautiful dashboard easily 🍄 - #1793 by rhysb
which do essentially the same (albeit on the card, and not targeting the image element alone)?
further down the topic:
Mushroom Cards - Build a beautiful dashboard easily 🍄 - #2219 by rhysb …
ending here: Mushroom Cards - Build a beautiful dashboard easily 🍄 - #2369 by pLeX ? hope not. seems a unique issue
- type: custom:mushroom-template-card
entity: input_number.keuken_vaatwas_ingevenaantalblokjes
mode: box
but I still get a slider. I want the possibilty to put a value in, and no slider …
so this made me find the solution!!
tested it on:
card_mod:
style:
mushroom-shape-avatar$: |
.picture {
filter: grayscale(1);
}
which works in both Chrome And Safari.
then applied it to my Tile person card:
- type: tile
entity: person.me
show_entity_picture: true
card_mod:
style:
ha-tile-image$: |
.image {
filter: grayscale(1);
}
and still working!
next, made that conditional:
card_mod:
style:
ha-tile-image$: |
.image {
{% set zones = states.zone|map(attribute='name')|list %}
filter: {{'grayscale(100%)' if not is_state(config.entity,'home') and
states(config.entity) not in zones else 'none'}};
}
and bingo, made my day for sure.
thanks for the inspiration ! so nice
btw, if you’re interested Ill post the full Tile mod in the card-mod thread
Go to developer setting tools and paste the code
#####Full Address for Person Card#######
- name: My Address
unique_id: 692d4852-2d29-4c24-80bc-0d35ecc245ef
state: >
{% set full_address = state_attr('sensor.sm_s918u_geocoded_location', 'Name') %}
{% if full_address %}
{% set address_parts = full_address.split(' ') %}
{% set street_address = address_parts[:2] %}
{{ street_address | join(' ') }}
{% else %}
'Unknown'
{% endif %}
Insert your entities and try to get the info that you need… try to change address_parts[:2]
1 Like
Sorry, I always come back to bother you who are so kind. With the same principle I tried to set a color for the C02, but without success:
icon_color: >-
{% set co2 = states('sensor.cucina_co2') %} {% if co2 <= '700' %} green
{% elif co2 <= '1000' %} yellow {% elif co2 <= '1300' %} amber {% elif
co2 <= '1600' %} orange {% elif co2 <= '2000' %} deep-orange {% else %} red {% endif %}
As soon as the c02 value exceeds approximately 750, it turns red. It should become above 2000. I also tried with this code, but the result is the same:
icon_color: >-
{% set co2 = states('sensor.cucina_co2') %} {% if co2 <= '700' %} green {%
elif co2 <= '1000' %} yellow {% elif co2 <= '1300' %} amber {% elif co2 <=
'1600' %} orange {% elif co2 <= '2000' %} deep-orange {% elif co2 > '2000'
%} red {% endif %}
Everything works fine with values up to 999, from 1000 onwards the filter does not work. what could it depend on? Where am I wrong?
with 999
with 1000
You should set your sensor to a float first here:
{% set co2 = states('sensor.cucina_co2') | float %}
The compare to a float as well
So like this:
{% if co2 <= 700 %}
green
Currently you are comparing a string to a string.
Is ‘1000’ greater than ‘700’ ? Its almost like asking is A greater than B.
1 Like
i dont understand whay i should modifay, can you help me?
Thank you very much. I tried template option and it worked perfectly just like I wanted to be. Very appreciative for your assistance!
1 Like
if you tell us what you want, maybe.
Thank you very much for your help, but I still don’t understand.
this is my same card for the temperature and work fine:
icon_color: >-
{% set temp = states(entity) %} {% if temp < '17' %} blue {% elif temp
<'18' %} light-green {% elif temp <'19' %} lime {% elif temp < '26' %}
green {% elif temp < '27' %} yellow {% elif temp < '28' %} amber {% elif
temp < '29' %} orange {% elif temp < '30' %} deep-orange {% else %} red {%
endif %}
you tell me to insert this:
{% set co2 = states('sensor.cucina_co2') | float %}
but where? sorry i dont’ understand, i try it, now not work all color:
icon_color: >-
{% set co2 = states(entity) | float%} {% if co2 <= '700' %} green {%
elif co2 <= '1000' %} yellow {% elif co2 <= '1300' %} amber {% elif co2 <=
'1600' %} orange {% elif co2 <= '2000' %} deep-orange {% elif co2 > '2000'
%} red {% endif %}
I have done other tests by changing the reference values and everything always works until the test refers to a number compared with 100o or a larger value, in which case it will become red without returning the correct value
{% set temp = states(entity) %}
{% if temp < '700' %} green
{% elif temp < '900' %} yellow
{% elif temp < '1600' %} amber
{% elif temp < '1800' %} orange
{% elif temp < '2000' %} deep-orange
{% else %} red {% endif %}
icon_color: >-
{% set temp = states(entity) %}
{% if temp < '700' %} green
{% elif temp < '1000' %} yellow
{% elif temp < '1600' %} amber
{% elif temp < '1800' %} orange
{% elif temp < '2000' %} deep-orange
{% else %} red {% endif %} `Preformatted text`
I’m sure I’m doing something wrong, but I can’t understand the logic, what am I doing wrong.
When you wrap something in quotes it is a string like this: '100' you can compare '200' to '100'but it wont have the outcome you expect all of the time. Your temp probably works only by coincidence.
You have correctly converted your sensor value to a float (or a number) here:
icon_color: |-
{% set co2 = states(entity) | float %}
{% if co2 <= '700' %}
green
{% elif co2 <= '1000' %}
yellow
{% elif co2 <= '1300' %}
amber
{% elif co2 <= '1600' %}
orange
{% elif co2 <= '2000' %}
deep-orange
{% elif co2 > '2000' %}
red
{% endif %}
So co2 is now a number which is great. But you are comparing it to a string. Because of the quotes. So you are doing this now: if 999 <= '1000' which doesnt make sense. It makes as much sense as asking if 999 <= Cake
Do you see what i mean? So you need to remove the quotes and convert your sensor output to a number like this:
icon_color: |-
{% set co2 = states(entity) | float %}
{% if co2 <= 700 %}
green
{% elif co2 <= 1000 %}
yellow
{% elif co2 <= 1300 %}
amber
{% elif co2 <= 1600 %}
orange
{% elif co2 <= 2000 %}
deep-orange
{% elif co2 > 2000 %}
red
{% endif %}
Let me know if that makes more sense now.
1 Like
You were very helpful and very clear, I corrected all the code also for temperatures and humidity, before having other errors. Thanks so much for your help
1 Like
Post the entire card config please. But already i can see at least an indentation error. Plus chips dont have a --shape-color.
You cant always use the same animations for chips as for the regular card.
Happy to help 
1 Like
Hi, I try to get the icons animated, like described here: Mushroom Cards - Build a beautiful dashboard easily 🍄 - #3240 by rhysb
Do I have to install anything else then card-mod? Somehow the animations are not working. Even not the easy ones like “spin”
Look at the updated animations that i have linked to many times in this thread.
2 Likes
First of all, these cards are beautiful and what I’ve settled on for my dash. I appreciate the work.
I have some basics going to get me started on building it out, but still have a lot of work on styling.
I’m going to start with what is undoubtedly a simple question that’s been answered in this 9000+ post thread likely a number of times.
Is it possible to change the color of a chip based on state? Let’s say the chip changes color if a motion sensor detects motion.