My question is i would like to do the real animation of the cover but i don’t really know how to do it.
I did this try but it doesn’t do an animation. I hope it is clear ^^
Anyone know how i get a black transparant horizontal box at the bottom of my card (containing elements) ?
Like wit hthe picture glance card (at the bottom) ?
Ildar_Gabdullin,
Is there a way to get the icon color of an entity which changes colors in function of its state? I need to get its current color value. I tried the variables you suggested without success. I’m using custom-button-card. Many thanks
This thread is about using Picture elements card.
Are you using the button-card as a custom element?
Anyway, the button-card has its own effective mechanism for styling colors.
Post a SHORT example of what you wish to achieve.
Ildar,
I’m using a template and for some entities I want to control the icon color in function of the entity and/or state, but for some others I want to display their original color, which happens to change in function of the state. The problem is that if the icon color style is set for some entities, by filtering them using the entity_id, then for those entities that I want to display their original color, the color turns white. Thus, the only way to show the original color is not to change the color style at all? Sounds strange. So I need a workaround and this is why I was thinking to catch the original color…
The following is the code I’m using to set the color style:
styles:
icon:
- color: |
[[[
var type = entity.entity_id.split(".")[0];
if (type == "switch") {
return states[entity.entity_id].state == 'on' ? 'rgb(0,100,255)' : 'Silver';
} else if (variables.var_select_option_value) {
if (states[entity.entity_id].state == variables.var_select_option_value) {
return "rgb(0,100,255)";
} else {
return "Silver";
}
}
//if the entity is not a switch or a select entity the original color should be used, but it's not !
]]]
I would be happy to help. But this is not related to Picture elements card. So it is not supposed to be discussed here.
Please ask this question in a proper thread:
Now I am rather far from any PC and cannot test your code. In a week - if your question still is not answered in that button-card thread - I will be able to test it.
Hi,
I would like to change the icon and the color of some icons on my picture-elements card depending on the state of the entry.
I understand that I have to use card-mod for that , which I did, similar to the examples. I’m also using the ‘–paper-item-icon-color’ style element as I see from the examples.
However this does not work. The icon color does not change. The icon itself even is not shown anymore if I set that with a variable that was set via the card-mod template.
If I set the icon color or name manually instead of using the variable it works fine, so it seems as if the conditional part in the {% if xxx %| section is not evaluated.
So now the icons change the color properly, great!
Now we are at it, I also would like to change the icon itself based on the state.
But if I change the code for the sensor.tesla_state entry to the below, the icon is no longer visible.
(if I don’t use the variable but set the icon to a fixed value it works fine).
UPDATE: ok, I should have read this thread more carefully. Looks like card-mod is what I need to use. Will have a play around with that!
ORIGINAL POST:
No mention of the ‘state_filter’ options in this thread. I’m assuming it only support “on” / “off” states (as per the documentation here), and that I’ll need to do something different if I want the appearance of an element to vary based on a sensor reading rather an a binary on/off.
e.g.:
- type: state-label
tap_action: toggle
entity: sensor.myenergi_home_power_export
style:
font-size: 75%
text-align: right
top: 46%
left: 97%
state_filter:
"0": opacity(0%) ## Does not work, not supported
I have a separate binary sensor called binary_sensor.exporting which can tell me if I’m exporting i.e. if the value circled in red above should be shown or not.
What would the syntax be for using the state of this binary sensor to determine the visibility of the separate sensor (sensor.myenergi_home_power_export). So that if I’m not exporting, no value is shown?
Than you @wgumaa but this is not what I mean. If you want to trigger the action you could tap on the arrow or also in the white space near the arrow but inside the circle I’m showing. The problem is that the circle goes above the label “100%”.
I have another question: how could I use a variable (or something else) to change for example the font size of every card inside a picture elements?
