Struggling to get this sorted. What’s the correct config for the input_select.floor helper?
It’s a dropdown helper with three options:
Rez
1er
2e
Nothing more to it than that except selecting one of the three options once you’ve created it.
Done that but still no floor plan showing 
I’ve got it showing finally! At the very bottom of the sidebar.yaml file I had the selection menu commented out.
No idea, to be honest. It may have to do with the fact that the entities ar not available and/or with the css code used to blend the images with the base image. The vode inspector on your browser of choice will most certainly provide insight.
Figured it out. Got it pretty much all working apart from the media side. I only use Plex, setup me secrets, token etc and it doesn’t work so I’ll figure that out later.
One thing I’ve tested on my home tablets is the floorplan image is quite small. Even on my computer browser. I can’t seem to figure out how to make it bigger. My image is quite large (larger than yours were) and even that doesn’t help. Any ideas where in the files controls the size of these images?
Image for reference -
Looks good, congrats!
I think it’s not so much the size of the images since they’ll be scaled, rather the aspect ratio in relation to the screen and the sidebar. Also, check on the “empty space” around your house.
Yeah was to do with the aspect ratio. Got that sorted too.
One error I’ve been struggling with is when I hold on one of my color lights, I get a big error. I’m assuming it’s to do with the fact it’s a color light?
Not sure why it’s referencing counter.light_time? That’s code I’ve not touched yet.
counter_light_time is a helper entity in combination with light timer as a script.
The error is maybe because you do not have created those?
Script:
alias: Light timer
sequence:
- delay: "{{ states('counter.light_time') | multiply(60) | int }}"
- service: light.turn_off
target:
entity_id: "{{ entity_id }}"
mode: parallel
icon: mdi:lightbulb-auto
Helper:
1 Like
Amazing! Thank you!
Created the helper as I had the code there already and it seems to have gotten rid of the error. Although, applying a timer doesn’t seem to do anything when I click the play button. Something I’ll have to look into.
l
If you hit play it turns the light off after the selected time.
Just noticed that it does actually work! Neat little feature to have.
Now I think the final thing is getting the lights to show based on the colour I’ve set them. I know I need to render different colour images for this but not sure how it’s handled in code.
EDIT: I think the colour is something to do with this code here inside the lights_rez.yaml file.
I tried CDRX2 code, it works with hue light bulbs but not with light strips at all.
So you have to render each light in white and in true red color (#FF0000).
So I use this one:
- type: custom:config-template-card
entities:
- [your light]
element:
type: image
image: /local/ui/floorplan/lights/[YOUR IMAGE WHITE LIGHT].png
entity: [your light]
tap_action:
action: none
hold_action:
action: none
style:
opacity: >-
${ ( states["[your light]"].attributes.brightness ?
states["[your light]"].attributes.brightness / 255 : 0) -
(states["[your light]"].attributes.hs_color ?
states["[your light]"].attributes.hs_color[1]/255 : 0)}
mix-blend-mode: lighten
left: 35.55%
top: 4.70%
width: 42.53%
transform: none
- type: custom:config-template-card
entities:
- [your light]
element:
type: image
image: /local/ui/floorplan/lights/[YOUR IMAGE RED LIGHT].png
entity: [your light]
tap_action:
action: none
hold_action:
action: none
style:
filter: >-
${ "hue-rotate(" + (states["[your light]"].attributes.hs_color ?
states["[your light]"].attributes.hs_color[0] : "0") + "deg)
saturate(" + (states["[your light]"].attributes.hs_color ?
states["[your light]"].attributes.hs_color[1] : 255)+ "%)" }
opacity: >-
${ (states["[your light]"].attributes.brightness ?
states["[your light]"].attributes.brightness / 100 : 0) *
(states["[your light]"].attributes.hs_color ?
states["[your light]"].attributes.hs_color[1]/90 : 0) }
mix-blend-mode: lighten
left: 35.55%
top: 4.70%
width: 42.53%
transform: none
I’ve got this -
- type: "custom:config-template-card"
entities:
- light.desk
element:
action: none
entity: light.desk
tap_action:
action: none
hold_action:
action: none
image: /local/home_transparent.png
state_image:
"on": /local/ui/floorplan/lights/rez/home_afternoon_bedroomdesk_on.png
type: image
style:
filter: >-
${ "hue-rotate(" + (states['light.desk'].attributes.hs_color ? states['light.desk'].attributes.hs_color[0] : 0) + "deg) saturate(100%)"}
opacity: >-
"${states['light.desk'].state === 'on' ? (states['light.desk'].attributes.brightness / 255) : '0'}"
left: 50%
top: 50%
width: 100%
mix-blend-mode: lighten
When I set the light to a dark blue it looks like this
But note I’ve not rendered a blue light. Only white and red. When I set to red, it doesn’t change. Just shows the white image.
EDIT: This is in the lights_rez.yaml file under this header
######################### INDIVIDUAL LIGHTS - BLENDED IMAGE OVERLAYS #########################
Try my code instead.
You have to render just white and red. The red is the base of the color change. Thats it.
In my code there are 2 parts. One for the white and one for the red light. CDRX2 has the same for colored lights but like I sad it works just for light bulbs and I dont know why.
EDIT: i dont know what kind of SW you use for imaging but you have to keep the same light amount for each white and red to make it work even if red light looks way over.
Something is a little off haha. Here is my code - should be same as yours but different entity.
- type: custom:config-template-card
entities:
- light.desk
element:
type: image
image: /local/ui/floorplan/lights/home_afternoon_bedroomdesk_on.png
entity: light.desk
tap_action:
action: none
hold_action:
action: none
style:
opacity: >-
${ ( states["light.desk"].attributes.brightness ?
states["light.desk"].attributes.brightness / 255 : 0) -
(states["light.desk"].attributes.hs_color ?
states["light.desk"].attributes.hs_color[1]/255 : 0)}
mix-blend-mode: lighten
left: 35.55%
top: 4.70%
width: 42.53%
transform: none
- type: custom:config-template-card
entities:
- light.desk
element:
type: image
image: /local/ui/floorplan/lights/home_afternoon_bedroomdesk_on_red.png
entity: light.desk
tap_action:
action: none
hold_action:
action: none
style:
filter: >-
${ "hue-rotate(" + (states["light.desk"].attributes.hs_color ?
states["light.desk"].attributes.hs_color[0] : "0") + "deg)
saturate(" + (states["light.desk"].attributes.hs_color ?
states["light.desk"].attributes.hs_color[1] : 255)+ "%)" }
opacity: >-
${ (states["light.desk"].attributes.brightness ?
states["light.desk"].attributes.brightness / 100 : 0) *
(states["light.desk"].attributes.hs_color ?
states["light.desk"].attributes.hs_color[1]/90 : 0) }
mix-blend-mode: lighten
left: 35.55%
top: 4.70%
width: 42.53%
transform: none
Ignore me, paths are wrong… Corrected these and now none of the images show when the light is on (white or red)
1 Like
Can you show me you white and red images here?
And have you cleaned your cache?
