I would play with a different font as well as the line-height. That could cause issues on mobiles when everything is scaled down to a new resolution.
The issue actually is that when I use the same code in pure YAML mode, it works well both for the browser and mobile. however the same code in managed mode gives a different resultā¦
How would i add a icon file i made to my button (the icon i made is in SVG format)
here is my code
- type: custom:button-card
name: Jeffry
entity: vacuum.roborock_s7
tap_action:
!include popup/vacuum.yaml
icon: local/icons/roborock.svg
template:
- baseHi @RomRider,
this might seem an odd question for a seasoned button-card userā¦ so forgive me if I miss the obvious.
I am using the button-card in an auto-entities template filter, like:
- type: custom:auto-entities
card_param: cards
card:
type: grid
columns: 6
filter:
template: |
[{% for i in ['apple-homepod','apple-homepod-mini','cellphone-iphone','laptop-macl'] %}
{{
{ 'type': 'custom:button-card',
'entity':'input_boolean.test_custom_icon',
'show_name': false,
'aspect_ratio': '1/1',
'icon': 'cil:' + i,
'label': i,
'show_label': 'true',
'tooltip': i,
'template':'styles_test_custom_icon'
}
}},
{% endfor %}]
works very nicely.
However, I was surprised but the fact we need to quote the label boolean to use 'show_label': 'true', and we nood to Not quote the show_name boolean, and use 'show_name': false, in the template object.
Is this something you can explain, or did I find a bug after such a long time of using the cardā¦
hope you can have a look at some point, thanks! If a bug, let me know, and Ill issue that up the repo.
Hi, can you help for me?
Need to put a sensor value in the circle, sensor only have state. Entity must be switch or light.
Hello
I need to conditionally change the color of an icon, but otherwise, leave the color corresponding with defaults (colors defined in css)
It seems I had asked for that in the past because I found the following construct:
styles:
icon:
- color: |
[[[
if (states['switch.washing_machine_empty'].state == 'undefined') return 'red';
else return undefined;
]]]
Its intention is to use standard colors for on and off states while setting icon to red in case of an undefined one.
Recently I found it doesnāt work. For some reason, the icon is rendered black. Not sure it either never worked or stopped worked after some recent updates.
Is there any syntax for expression above allowing to NOT influence the color?
how can i make this white text yellow?
i tried to put a style around with yellow but failed
Post your code using the preformatted button in here (like the person above you did) , so people can help you out.
where did I see this question beforeā¦? didnt we meet in the custom button-card repo?
I believe we can summarize this to: if using the styles on an element, you need to completely take care of it yourself.
- type: custom:button-card
name: Test unavailable color
entity: input_boolean.test
# styles:
# icon:
# - color: |
# [[[
# if (entity.state == 'on') return 'red';
# ]]]
without the styles section, button cards shows the theme colors. When using the styles section, it always shows black except for the āonā state in this case.
(I recognize this from my own repo custom-ui, where we can set globs, and individual customizations. Setting a glob on lets say domain switch for state icon changing, and we would like to customize icons And color on an individual switch, we need to write the full customization on the individual switch, and it wont inherit the domain glob.
This is alike.
I confess though I seem to recall it wasnāt like this before, but that has been quite some while now. Not sure.
without style set:
with style set:
clearly visible it doesnt use the theme color here (but the fill of the icon, which is set to black on mdi icons?)
guess you should take care of that in your themes, and in your button-card-templates. would be a single additional line in the template
Yes, we discussed it yesterday in github. I had started over here on forum but due to no response, I wrote an issue to GitHub.
would be a single additional line in the template
Itās not about the number of lines. Itās about redundancy.
Since templates always return a value that is assigned to the attribute, every time sometimes is assigned to the attribute. Even if you use an incomplete decision tree, an empty string (or its other representation is returned). So following syntax:
styles:
icon:
- color: |
[[[
if (entity.state == 'on') return 'red';
]]]
sets color style to an empty value, effectively to black. Itās also valid for other cases, but depending on HTML structure, they may inherit some values from their parents.
Anyway, being able to escape the decision tree without changing already set values would be helpful, allowing change of appearance for a single condition, letting default appearance otherwise.
It should be also pretty easy to implement even without introducing a breaking change.
For example, implicitly returning null might be used to instruct to not change a particular attribute at all (considering that incomplete decision tree returns an undefined object)
well, tbh, Since we can easily prevent the āblackeningā, I fear a PR you would raise to implement what you say is easy, would not be easily accepted. You could ofc write it up and see if Romrider thinks itās of additional value.
Yes, colors are easy to resolve because are deterministic. It still might be limiting when using generic reusable templates though.
However once you start to play with other attributes which original values are not known nor fixed (ie a width which can be dynamic), it might be impossible to put the default value into decisions tree.
Anyway thank you for your support and discuss. I will somehow concert issue in github to FR
donāt template the icon color, template the color on the card.
color: >
[[[
return (entity.state == 'on') ? 'red' : 'auto';
]]]
or if youāre dead set on templating the icon, return the off valueās var.
styles:
icon:
- color: |
[[[
return (entity.state == 'on') ? 'red' : 'var(--paper-icon-dont-remember)';
]]]
sure thank you
- type: custom:button-card
entity: sensor.nikki_laptop_current_energy
entity: switch.nikki_laptop
name: .
tap_action: sensor.nikki_laptop_current_energy
hold_action:
action: none
custom_fields:
graph:
card:
entities:
- entity: sensor.nikki_laptop_current_energy
color_thresholds:
- value: 0
color: "#276696"
- value: 19
color: "#228C22"
- value: 22
color: "#d35400"
- value: 25
color: "#c0392b"
- entity: sensor.nikki_laptop_current_energy
color: gray
y_axis: secondary
show_line: false
show_points: false
show_legend: false
show_labels: false
template:
- power
template button file
#################################################
# #
# POWER #
# #
#################################################
power:
template:
- base
show_state: true
custom_fields:
circle: >
[[[ {
const temperature = Math.round(entity.state);
return `<svg viewBox="0 0 50 50"><circle cx="25" cy="25" r="20.5" stroke="#313638" stroke-width="1.5" fill="#FFFFFF08" style="
transform: rotate(-90deg); transform-origin: 50% 50%;" />
<text x="50%" y="54%" fill="#8d8e90" font-size="14" text-anchor="middle" alignment-baseline="middle" dominant-baseline="middle" dominant-baseline="middle">${temperature}watts</text></svg>`; } ]]]
graph:
card:
type: "custom:mini-graph-card"
hours_to_show: 24
points_per_hour: 4
line_width: 8
font_size: 75
decimals: 0
show:
name: false
icon: true
state: true
legend: false
labels: false
points: false
color_thresholds:
- value: 0
color: "#276696"
- value: 19
color: "#228C22"
- value: 22
color: "#d35400"
- value: 25
color: "#c0392b"
styles:
name: [top: 57%, left: 0%, width: 100%, position: absolute]
custom_fields:
graph: [bottom: 0%, left: 0%, width: 100%, position: absolute]
circle:
- display: initial
- width: 90%
- letter-spacing: 0.03vw
- margin: -6% -6% 0 0
- justify-self: end
- opacity: 1
icon:
- width: 67%
- fill: "#9da0a2"
taats sweet:
- type: custom:button-card
name: Test unavailable color
entity: input_boolean.tesq
styles:
card:
- color: |
[[[
return (!entity) ? 'red' : 'auto';
]]]
very nice indeed. and so elegant.
no, it has to be on the root level
- type: custom:button-card
name: Test unavailable color
entity: input_boolean.tesq
color: |
[[[
return (!entity) ? 'red' : 'auto';
]]]
it did workā¦
1 Like
ok, if it worked, I guess it worked. Must be something built into the card for icon color.
yeah well, it wasnt an icon that was colored red:
while test with the correct entity showing:
Iām not 100% sure, but I believe you need to change the color of the name variable in this part:
styles:
name: [top: 57%, left: 0%, width: 100%, position: absolute, color: red]
So add your color or theme variable in there and reload your lovelace dashboard. The card you use is more complex than a standard card because you use custom fields. So Iām not 100% the part you want to change is indeed the name variable I highlighted.
If you replace your line with the one above, the text should become red. If thatās the case, then it works and change the āredā to any color you want (like hashcode or rgba values).
Also, that card uses a template on itās own (see at the top).
template:
- base
So chances are you need to change the variable in that base template, which is a code on itās own. My guess is you copied this button from someone else. Which makes editing it if you havenāt used button-card on your own much very hard. Post the complete code of the button (with all the templates included) in these cases so people know what theyāre looking at.