Hey there.
I have a 3D Floorplan set up and working with Picture-Elements. I use semi-transparent images of different lights in my apartment that are toggled on/off by state_image.
What I would want to achieve is to adjust the pictures’ opacity according to the corresponding light’s brightness. I failed to do so in the style and filter category. What I would love to do is
- type: image #KAFFEEMASCHINE
entity: light.bedroom
tap_action: none
hold_action: none
state_image:
"on": /local/bedroom.png
"off": /local/transparent.png
style:
top: 50%
left: 50%
width: 100%
opacity: light.bedroom.attributes.brightness
which is obviously and expectedly not working.
I am quite inexperienced in YAML and Google did not help me either, so I am asking you:
How do I get that value (or in fact any value other than a hard-coded one) in there?
Thanks in advance!
petro
April 28, 2020, 12:05pm
2
you’ll need to template this with a custom card. The value will have to range zero to 1 as well. If you use template card, you can get what you want.
- type: custom:config-template-card
variables:
- states['light.bedroom'].attributes.brightness
entities:
- light.bedroom
card:
type: image
entity: light.bedroom
tap_action: none
hold_action: none
state_image:
"on": /local/bedroom.png
"off": /local/transparent.png
style:
top: 50%
left: 50%
width: 100%
opacity: "${ var[1] / 255.0 }"
2 Likes
Hi, thanks for your answer.
I think I got the plugin to work, but it still doesnt display anything.
I tried your code 1:1, it resulted in the image being never displayed at all. When I changed out the opacity value against something fixed, I got an error telling me Unknown type encountered: image
resources:
- url: /local/config-template-card.js?v=210
type: module
# ...
- type: "custom:config-template-card"
style:
top: 50%
left: 50%
width: 100%
variables:
- states['light.schlafzimmer'].attributes.brightness
entities:
- light.schlafzimmer
card:
type: image
entity: light.schlafzimmer
tap_action: none
hold_action: none
state_image:
"on": /local/simon.png
"off": /local/transparent.png
style:
top: 50%
left: 50%
width: 100%
opacity: "{ 50% }" # (respectively opacity: "${ var[0] / 255.0 }")
In your code I changed the index of var[1] to [0] because I feared that would have made a difference, but both end up throwing the same result.
I figured I might have made mistakes in installing the plugin, but HACS normally isn’t that difficult to do…
petro
April 28, 2020, 1:44pm
4
You should be able to use the config I posted exactly as it’s written but changing 1 to 0 like you mentioned.
However, the template card may need to be placed on the full card instead of the element. I.e.
- type: custom:config-template-card
variables:
- states['light.bedroom'].attributes.brightness
entities:
- light.bedroom
card:
type: picture-elements
image: xxx
elements:
- type: image
entity: light.schlafzimmer
tap_action: none
hold_action: none
state_image:
"on": /local/simon.png
"off": /local/transparent.png
style:
top: 50%
left: 50%
width: 100%
opacity: "${ var[0] / 255.0 }"
1 Like
I got it to work.
You were absolutely right about it, it was the wrong level to operate. It is after all a card and not an element of picture-elements, so putting it a level above solved it partly.
Apart from that I learned that the above configuration does not allow the usage of state image, which forced me to do that implementation in the opacity setting. For anyone else to read this, here the code:
views:
- title: test
cards:
- type: custom:config-template-card
title: "My Floorplan"
variables:
- states['light.schlafzimmer'].attributes.brightness
- states['light.schlafzimmer'].state
entities:
- light.schlafzimmer
card:
type: picture-elements
image: /local/5_uhr.png
elements:
- type: image
entity_id: light.schlafzimmer
image: /local/simon.png
style:
top: 50%
left: 50%
width: 100%
opacity: "${vars[1] === 'on' ? vars[0] / 255.0 : 0}"
Petro, thanks to you, have yourself a great day!
2 Likes
Hey guys! I tried the exact code shown in the solution, but the image simply doens’t show up and I get an error in the logs 2020-05-26 13:31:55 ERROR (MainThread) [frontend.js.latest.202005191] http://192.168.0.15:8123/lovelace-floorplan/floorplan-2:0:0 Uncaught
This is the code I am trying:
type: 'custom:config-template-card'
variables:
- 'states[''light.dungeon''].attributes.brightness'
entities:
- light.dungeon
card:
type: picture-elements
image: 'http://192.168.0.15:8123/local/images/floorplan_wip/off_all.png'
elements:
- type: image
entity_id: light.dungeon
image: 'http://192.168.0.15:8123/local/images/floorplan_wip/off_all.png'
style:
top: 50%
left: 50%
width: 100%
opacity: '${ var[0] / 255.0 }'
Anyone has any insight?
Thanks for the quick answer!
I tried with the following:
variables:
- 'states[''sensor.brightness_bedroom'']'
entities:
- light.dungeon
card:
type: picture-elements
image: 'http://192.168.0.15:8123/local/images/floorplan_wip/off_all.png'
elements:
- type: image
entity: light.dungeon
state_image:
'on': 'http://192.168.0.15:8123/local/images/floorplan_wip/on_dungeon.png'
'off': 'http://192.168.0.15:8123/local/images/floorplan_wip/off_dungeon.png'
style:
top: 50%
left: 50%
width: 20%
opacity: '${vars[0]}'
The images show up but the opacity is not applied to either state_images
The sensor is a template sensor extracting the brightness_pct of my light.
Any idea?
Edit:
Here you can see the applied attributes on the dev menu:
1 Like
petro
May 26, 2020, 2:21pm
9
No, all you had to do was change your original codes var[0] to vars[0]. Now you’ve gone and changed a ton in other spots so other areas are broken.
Thanks for a speedy answer.
Changing “var[0]” to “vars[0]” did not solved the issue.
I just tried again my original code with “vars[0]” and the picture element just doesn’t show up.
And the logs show
2020-05-26 14:22:32 ERROR (MainThread) [frontend.js.latest.202005194] https://purgatoire.cf/lovelace-floorplan/floorplan-2:0:0 Uncaught
Edit: Managed to get it to work with
variables:
- 'states[''light.dungeon''].attributes.brightness'
entities:
- light.dungeon
card:
type: picture-elements
image: 'http://192.168.0.15:8123/local/images/floorplan_wip/off_all.png'
elements:
- type: image
entity: light.dungeon
state_image:
'on': 'http://192.168.0.15:8123/local/images/floorplan_wip/on_dungeon.png'
'off': 'http://192.168.0.15:8123/local/images/floorplan_wip/off_dungeon.png'
style:
top: 50%
left: 50%
width: 100%
opacity: '${ vars[0] / 255.0 }'
I will now try to add every room tonight and see if everything work
petro
May 26, 2020, 2:30pm
11
remove the IP from all your paths.
/local/ maps to /config/www/ and you don’t need to include your IP.
MartinG
March 7, 2023, 10:44pm
13
I am trying to resurect this topic.
Is it possible to read brightness directly, or do you specifically need that custom:config-template-card?
why this doesn’t work?opacity: {{ (states.light.living_room.attributes.brightness/255*100)|round(0) }}%
GSzente
May 13, 2024, 12:06am
14
Hi Petro,
Code basically worked well, but recommend to check how opacity set up by Lukevink in this topic: Floorplan UI with Color synced lights
In case of multiple rooms with multiple lighting, looked like the version below works better:
type: custom:config-template-card
entities:
- light.kitchen_lights
- light.ceiling_lights
card:
type: picture-elements
image: local/pictures/F0_00_Dark_15.png
elements:
- type: image
entity: light.kitchen_lights
tap_action: none
hold_action: none
state_image:
'on': local/pictures/F0_07_Kitchen_Ceiling.png
style:
top: 50%
left: 50%
width: 100%
opacity: ${ states['light.kitchen_lights'].attributes.brightness / 255 }
- type: image
entity: light.ceiling_lights
tap_action: none
hold_action: none
state_image:
'on': local/pictures/F0_05_LivingRoom_Ceiling.png
style:
top: 50%
left: 50%
width: 100%
opacity: ${ states['light.ceiling_lights'].attributes.brightness / 255 }
1 Like
