@lukevink great work and thank you for sharing. One question, how to configure state-icon in floorplan for for light control where only brightness is available. Your lights have color, brightness, temp setting. I have tried to change the code in Lovelace but without any luck. Thanks…
1 Like
Can’t wait to see what you got for us 
Hey so for this one, just use the opacity css part - not the hue filter, but keep the mix-blend-mode. This while change the images transparency but not its color.
So something like:
style:
opacity: '${ states[''light.table''].attributes.brightness / 255 }'
mix-blend-mode: lighten
Make sure it’s brightness / 255. The brightness number of the light needs to be converted to opacity, which is 0-1 (so 0.2, 0.3 etc):
style:
opacity: '${ states[''light.table''].attributes.brightness / 255 }'
That’s what I originally had. Tried again with the same issue. This is basically plucked from your config with entity and file names changed. Brightness style isn’t applied. I can’t see it in the chrome dev tools.
Here’s the whole config.
- entity: light.office
type: image
image: /local/floorplan/main/office.png
hold_action: none
tap_action: none
state_filter:
'on': opacity(100%)
'off': opacity(0%)
style:
left: 50%
mix-blend-mode: lighten
top: 50%
width: 100%
opacity: '${ states[''light.office''].attributes.brightness / 255 }'
If I change the style->opacity value to a hard coded number, it applies. Can’t tell why the dynamic value isn’t working.
Quick questions -
- do you have the whole picture elements view inside a config-template-card card?
- And have you replaced my light entities with your own at the bottom? I currently have:
entities:
- light.roof_garden
- light.roof_plants
- light.kitchen_1
- light.kitchen_2
- light.kitchen_3
- light.kitchen_4
- light.couch
- light.table
- light.plant_table
- light.toilet_1
- light.toilet_2
- light.study
- light.bedroom_roof
- light.bed
- light.stairs_2
- light.door
- light.balcony_2
type: 'custom:config-template-card'
icon: 'mdi:floor-plan'
- And is the picture elements card the custom hui-picture-elements-card?
I updated my config in the github with better comments etc. The update also merges my two floorplan views into one, which was a bit too complicated (and comments whats happening better).
Let me know if its any of these things?
OK, I will try this also but my question (I didn’t explain correctly) was:
How to get only brightness adjustment when holding mouse pointer above certain state-icon for light entity.
To be more precise - please see next picture:
So some of my light entities are white only, I made a different popup for those, for example:
- entity: light.stairs_lights
hold_action:
action: call-service
service: browser_mod.popup
service_data:
card:
cards:
- entities:
- entity: light.stairs_lights
secondary_info: last-changed
style:
z-index: 5
type: entities
- cards:
- cards: null
column_height: 1
layout: vertical
type: 'custom:layout-card'
- entities:
- color_temp: true
entity: light.stairs_lights
header: false
persist_features: true
type: 'custom:light-slider-card'
show_header_toggle: false
style:
height: 100%
z-index: 0;
type: entities
column_num: 1
layout: horizontal
max_width:
- 100%
type: 'custom:layout-card'
type: 'custom:vertical-stack-in-card'
deviceID:
- this
style:
'--ha-card-border-radius': 0vw 0vw 0.8vw 0.8vw
border-radius: 0.8vw
opacity: 0.9
title: Stairs Lights
image: /local/transparent.png
style:
height: 28%
left: 61%
top: 23%
width: 12.7%
tap_action:
action: toggle
type: image
This shows only the brightness slider.
But thanks for reminding me! Apparently I didnt put this code on the light icons, only on the Room view (when you tap a whole room instead of the icon). Updating my config again!
BTW, if you can also build your own card to popup here, you can shove any card inside the popup under -cards.
1 Like
Ah. I didn’t catch it’s in a config-template-card. I just have it in a picture-elements card. I guess that dynamic notation is a config-template-card feature.
Thanks. I’ll take another stab at it.
Yep! My bad - I completely forgot thats how I was doing it and didn’t comment on it when I first shared this. Will edit all my posts to reflect this.
Here’s something fun im working on - realistic renderings of weather in the floor plan! I want to have clouds, sun position, etc etc. Thoughts? 
8 Likes
How long before we just load the sweethomd3d exported obj in a webgl lovelace card? 
True lighting from the sun position. Home swiping/zooming.
Here’s the prototype already from their export feature. Just somehow work in elements you can toggle. 
http://sweethome.azurewebsites.net/
2 Likes
OK I have put your code (with my entity IDs) but still on hold action - i have the problem with:
custom: light-slider-card.js
I have copied this *js from your GIT repo and put in my local folder of HASSIO, and also declared it under resources in ui-lovelace.yaml but still, I’m getting this error.
Was thinking of trying to pull this off with threejs… future project perhaps!
1 Like
My apologies! On my latest push to github, accidentally renamed a file.
light-slider-card-lajv.js inside the www/js/ folder,
should be called “light-slider-card.js”
Renaming this file should fix it!
I have done that allready but stil I have the same error. It must be something else. also this card is type: image or state-icon?
OK, I have re downloaded just the js file from your github page and now is working like a charm. Thank you. One more question please - why is the slider invisible? Maybe because of theme in use - iOS Dark Mode:
It could indeed be the theme - Im using a modified version of slate. Try that theme and let me know if it fixes things?
I have tried all installed themes on my Hassio but without any success. All the time brightness bar is black (picture shows default theme):
@lukevink first of all very nice job!
I have tried implementing you work and replacing all entities with my own. But somehow the “Control Rooms” just shows the gray background. All others pages work fine. Is there a way to debug this?
thanks!
1 Like