I’ve stumped myself. I created two buttons which are for the mostpart identical, with the exception that one entity_id is a sensor and the other is a switch. (superficial things like name and icon are different)
The result is:
The ‘Door’ button (sensor) displays its icon correctly while the ‘LR Fan’ (switch) button does not.
If I change the entity_id for the 2nd button to another sensor (instead of a switch), everything works as it should. From what I can tell, the icon is blank simply because the entity is a switch.
I’ve also determined removing color_type brings the icon back, but it appears as a different color (including when using the default skin), so that solution doesn’t really work either. I prefer to keep color_type in there because this is a WIP that will be incorporated into a decluttering card – I need to keep the option available of making some of them blank-cards.
icon: |
[[[
if (entity === undefined)
return 'mdi:battery-unknown';
var s = entity.state;
s = parseInt(s);
if (isNan(s))
return 'mdi:battery-unknown';
s = Math.floor(s/10) * 10;
if (s === 0)
return 'mdi:battery-10';
return `mdi:battery-${s}`;
]]]
and for color use…
color: |
[[[
if (entity === undefined)
return 'gray';
var s = entity.state;
s = parseInt(s);
if (isNan(s))
return 'gray';
if (s <= 15)
return 'red';
else if (s <= 49)
return 'yellow';
return 'green';
[[[
Im trying to figure out how to change the icon of a button card with javascript but i suck at it.
What i want to do is, if anyone of sensor.lights_status, sensor.switches_status, sensor.sensors_status shows the state Problems I want fas:exclamation-triangle icon. If not i want the icon fas:home to be shown.
I dont even know where to start and havnt found any code i understand and might be able to rewrite.
Include something like the below in your button config. When the entity.state is ‘Yes’, the button icon will change for you (To show you what else you can do with it, I’ve also written it below so that the icon color will turn red to get your attention. You could remove this, or play around to make it even more eye-catching by changing the card background, make the icon blink, etc. All up to you!)
Did anyone add a custom logo to their button cards? I have devices from different manufacturers. Whenever they go offline for some reason (mostly due to Wink hub), I have to find the name of it and figure out which manufacturer and open their respective app to find out the issue.
Ex: (instead of notification circle, I want to show that the manufacturer’s small logo)
Yeah you would have to use templating. If you look at the author’s Hass example you can see that he just uses html to link the logos. I am using same method to set custom material design icons for weather under time display. Here is how it looks and the code:
Thank you, @skynet01 I don’t think there is a way to display custom icon/image inside the notification ellipsis. Only icons from Materialdesignicons allowed.
I went ahead with ‘entity_picture’ and got this result instead.
change color type to icon. then change your color to the grey. You modifying color type to null is causing the problem because switches and lights get their color property from the on/off colors where sensor just pulls the default color.
Trying to figure out the grid setup but cant quit get it.
My current grid code looks like this:
styles:
grid:
- grid-template-areas: '"i n s" "i n l"'
- grid-template-columns: 20% 30% 1fr
- grid-template-rows: min-content min-content min-content
That results whats shown to the left in the picture below. What i would like is whats shown to the right, the name and state are aligned horizontal and label under the state. Any suggestions?
Hi all,
I can’t get the slider entity row nice in the button card
When i set full row to true, the slider knob is placed at the right side of the button and i can not operate it
I folowed the example, what am i doing wrong?
Kind regards
