Picture-elements card does not support templates.
Read 1st post → conditional styles
Thank for the answer.
type: picture-elements
card_mod:
style: |
ha-card {
{% set ANGLE = (states('input_number.rotation_aiguille') | round(0)| string ) + 'deg' %}
--my-transform-style: translate(-50%,-50%) rotate({{ANGLE}});
}
image: /local/images/background.png
elements:
- type: image
entity: input_number.rotation_aiguille
image: /local/images/aiguille.png
style:
top: 50%
left: 50%
transform: var (--my-transform-style)
I’ve add ‘round(0)| string’ to avoid the XX.0 degrees.
But still not moving.
do you have card-mod?
remove whitespace
Great,
it’s working,
thank you and have a good holiday.
1 Like
Example with “skew”:
Presentation is poor but enough to get the point.
type: picture-elements
elements:
- type: state-label
entity: sensor.xiaomi_cg_1_temperature
style:
top: 33%
left: 31%
width: 7.6%
color: red
transform: rotate(-13.5deg) skew(-15deg) scale(2,2)
- type: image
entity: sun.sun
image: /local/images/test/peter_bird.jpg
style:
top: 39.0%
left: 27.4%
width: 7.6%
transform: rotate(-13.5deg) skew(-15deg)
image: /local/images/test/3d_floorplan.jpg
1 Like
I live in the far north and i would like to update my floorplan taking into account season as well as time.
I have created one based on time of the day which is working fine.
type: picture-elements
elements:
- entity: sensor.time_of_day
type: image
style:
top: 50%
left: 50%
width: 100%
state_image:
Early Morning: /local/FP/morning0600.png
Morning: /local/FP/morning0800.png
Afternoon: /local/FP/afternoon1300.png
Early Evening: /local/FP/evening1900.png
Evening: /local/FP/evening2000.png
Night: /local/FP/night2100.png
unavailable: /local/FP/transparent.png
I know i will have to quadruple my renders but I am ready to do that.
Can someone help me with the code?
Will check your case in a few days I hope.
1 Like
I have figured it out. I created a template sensor that combined time of day as well as season and the output state was “seasontimeofday” so now is WinterNight. Based on that state its pulling the respective render.
Do you mean that you sensor did not have exactly same states?
Asking because your posted code SEEMS to be ok.
I needed to combine 2 sensors - Time of Day and Season. The suns position is very different in the seasons so I wanted the images to reflect that.
@Ildar_Gabdullin I have a question that you may help me with.
Can I have conditional images displayed? For example:
Light Entity 1 on - Display Image 1
Light Entity 2 on - Display Image 2
Light Entities 1&2 on - Display Image 3
Is that possible? If so what could the code look like?
Hey @Ildar_Gabdullin
I have a question for you.
My current issue is that I’m using both the mobile app and a desktop browser to view my dashboards but the scale and position of the badges isn’t dynamically set with the size of the background image being displayed.
Do you know if there is a way to dynamically adjust the position and scale so that it remains in the correct spot?
Thanks in advance
- Suggest you to close the issue you opened in Github.
- Tagging people is not appreciated in Community, please avoid it.
- Please open the 1st post of this thread & check 3 links about “positioning”.
Thanks for your comment, but "switch.r21, -.r22, etc.) are created so that only one can be “on” at a time, so this is not a problem.
You got me thinking about my hot water system. Oh that rabbit hole.
Anyway I found after a few different tests the picture itself determines the size. Now I am not sure which one I am sticking with…
1 Like
Any idea how i should do a fireplace?
I have a top view on the floorplan
I would like to have the fireplace light the environment but flicker like a real fire
I can use a gif, but u wont see that from the top… and i wont see light flicker.
Maybe someone have an idea?
I’m hoping someone can help.
I’m looking to use picture-elements to track Solar Panel performance. I’d like to set the background-color alpha-channel to a value derived from the entity state.
I know I am doing this wrong, but haven’t been able to figure out the right way.
type: picture-elements
image: https://mySite/local/RoofOutline.png
title: Roof
elements:
- type: image
entity: sensor.panel_a1_power
image: https://andyland.duckdns.org/local/panel.png
style:
top: 47%
left: 75%
top: 21%
left: 42%
width: 6%
transform: translate(0%, 0%)
background-color: rgba(255,0,0,."$ states('sensor.panel_a1_power')|int/255)")
And of course that doesn’t work. background-color is ignored.
What is the correct way to get a state-value into the CSS ?
1st post → conditional styles