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?
@diegoves what device are you displaying this on? I have encountered similar issues when displaying it on a PC vs a mobile phone. I resorted to creating transparent images with fixed sizes (in my case room layouts) relative to the overall image size.
As to font size, i don’t have experience with that in Picture Elements. I only use it for a floorplan - When i click a room, a pop up appears with all the entities and buttons that i want to control for that room.
The screenshot comes from a PC, but I have to use it in a tablet (an old iPad mini) and, in some case, also in a smartphone. Now I find a workaround: the tapping area of the first element is “under” the tapping area of the second element, that is under the tapping area of the third element etc… so in my case I used for the first element the percentage and for the other two the arrows. One tap action start moving the cover and the double tap stop it.
However, I am currently trying to display my switched-on lights differently. I would like to have them with a yellow button background, preferably a little blurred and the icon itself also in yellow. However, the icon background is very small and I can’t get it any bigger, can anyone help me here, also with the blurred effect?
Hello, can you pls say me: how can I make a smaller this card?
But the card or picture is too big. I will be very happy when it go to half of the height.
The card_mod of the picture-elements card is written after the state-label uses the variable.
I have this issue myself and am still searching for a way to fix it.
If you dont mind re-typing it for each element you could fix it by moving the card_mood to the element itself
PS: Probably a typo in pasting here but your state-label element should be below the elements row