Thank you for the explanation but I don't understand why this works (obviously it does at you show it in the video): as you generate all pictures with only one light on: why don't you see only the latest lamp on if you turn it on or if you turn one lamp off: why don't you then see all lights off even only one was turned off. Do you somehow limit the image space that is replaced for one light?
Basically, The code uses a “lighten” mix blend mode. In essence it only allows the lightened portions of the image to show. That way when you create each image with the light on at 50%, the code sees that bright light part and is overlaying the image over the base image but blending it. Hope that makes sense
Great stuff! Only took me a couple of hours to set up dashboard for an outbuilding with a few lights. What would also be pretty cool would be to show motion somehow based on motion sensors being triggered. I suppose it could work exactly like lights, just have to figure out what use to indicate motion being sensed... I'll fool around with it and see if using motion sensor entities would also work. Thanks for this!
Gday, great video, is there away to have clickable conditional cards e.g. click a section on floor plan and it opens up all the controls for that area.
Awesome video. Much simplified compared to the other tutorials. Im stuck at the entity step though. Just get the circle going round and round in the centre of the picture. Wonder if you can help? Trying to add my light switches.
It happens with me when the entity in not in the good position.Like - type: state-icon is in the same colume as - elements.Or just dont have enough distance
Awesome tutorial. When I turn on more than 2 lights in a Mobile View, the images are stacked and rotated on each other. Works perfect on desktop view but not mobile view. Any suggetion please?
Thanks for the tutorial. Just in time for me to add my floor plan to HA. I noticed you have icons over your curtains, were you able to show those open and closed as well?
I guess opening and closing curtains is the same thing as opening and closing a garage door (i.e., using the entity `cover._Your_Curtain_`). If so, this is what I did to see my garage door open/close on the plan. 1. On the *base* image my garage door is closed. 2. I’ve created an image with *only* the garage door *open* and the rest is transparent. Meaning that in SweetHome3D I took a photo of my floor plan with the garage door opened, I then took an image editor, in my case Pixelmator and erased everything except the open garage door, the rest of the image it transparent. Then in the yaml instead of blending the image, I overlay the image with the garage door open. Since the image contains *only* the open garage door (not the garage) and the rest is an alpha channel (i.e., transparent), it just shows the door as open (hiding the part of the image with the door closed). Here is the yaml: ```yaml - type: image entity: cover.garage_door style: left: 50% top: 50% width: 100% mix-blend-mode: normal state_image: 'open': local/floorplan/HomeAssistantBase-garage-porte-ouverte.png 'opening': local/floorplan/HomeAssistantBase-garage-porte-ouverte.png 'closing': local/floorplan/HomeAssistantBase-garage-porte-ouverte.png tap_action: action: none ``` Thank you @Delyn for the nice tutorial!
great vid ! but after adding the code im getting the follow warning , Visual editor not supported Key 'panel' is not expected or not supported by the visual editor. can you tell me wat im doing wrong here , thx
@@Delyn @wadu28 hi! i did it! Looks great! Thank you! Now, my dashboard is looking great, but can you provide a short movie like this how to add buttons (somewhere in a corner -not in dashboard-) for eg a alarm system?
I got it all working but cant get the Opacity to change the brightness of the overlayed Light image depending on the brightness of the entity - is something missing from your sample code to get that to work ? thanks again
Hey, great tutorial. Very easy to follow. However can you explain what: filter: >- ${ "hue-rotate(" + (states[‘entity’].attributes.hs_color ? states[‘entity’].attributes.hs_color[0] : 0) + "deg)"} opacity: >- ${states[‘entity’].state === 'on' ? (states[‘entity’].attributes.brightness / 255) : '0'} does? I imagined this will use the colors and brightness of lamps to change this in the "blend mode"? I however don't see any changes happening (apart from the on/off).
Thank you for this tutorial. I'm trying to understand one thing though. If I have 40 smart lights in the home, do I have to create an image for each one on and off throughout the house? That would mean hundreds of images with all the variations of all the room lights on and off.
@@Delyn How do you account for scenarios where more than one light is turned on? As I understand it, when you turn on a specific light source, it replaces the currently displayed image with a new one where that specific light source is turned on, visually turning off the previous light source. Is my assumption correct?
@@TheCzechmate007 I did cut out the "lighten" part of the image (also to make the file sizes a bit less). I also think the "mix-blend-mode: lighten" will make sure the images are partly transparant. So you can see multiple lights on.
I can't use a variable in the style attribute to dynamically change the opacity. Any ideas why? If I set the value fix to e.g. "0.5" it works but with your opacity snippet and my sensor it doesn't work.
my code wont save after I try to add the second light! I copy and paste the change the images path and entities but the script will go away even after I hit save and nothing happens ! I only have the 1st initial light
Followed your steps and have things mostly working but tap_action: toggle is only working for the last entry. For example, I have a room with four entities (Lights 1-4) and can see four separate icons on the map. The last entry in the yaml is Light 4 and that works. Lights 1-3, however, do not work and when hovering show a 'more info' popup for Light 4. Any ideas?
Well, found a workaround if anyone is encountering this problem. Setting "z-index: 5" (or another number (layer)) under "- type: state-icon" -> "styles:" did the trick.
*Must Read* So if you are lazy you skipped the part where people edit images in photoshop to add lights and make everything else transparent And now you are stuck with code when you click whole image getting stacked on each other This video is for you , this guy have solution for the annoying issue of images getting staked on each other without light getting threw
Thanks for this tutorial, But I dont know what I am doing wrong, when I type in the image path mine being(local/V1/Flooruno/TopBaseDay.png) nothing pops up on the image, I have triple checked the spelling and case sensative, files are located is in homeassistant/WWW/V1/Flooruno/ please help.
I had the same problem. I was able to resolve it by clicking on the image in the folder and it gave it in a URL. I pasted the URL in the same spot and the image came up.
Any change that would work with color-changing lights?
Or at different parts of the day (by using a much darker base image at night)?
thanks a ton for posting ! - the easiest best explained way to do this yet !!
Awesome video 😊 adding dots around the plan to show if doors/windows are open or not is good too
Thank you for the explanation but I don't understand why this works (obviously it does at you show it in the video): as you generate all pictures with only one light on: why don't you see only the latest lamp on if you turn it on or if you turn one lamp off: why don't you then see all lights off even only one was turned off. Do you somehow limit the image space that is replaced for one light?
Basically, The code uses a “lighten” mix blend mode. In essence it only allows the lightened portions of the image to show. That way when you create each image with the light on at 50%, the code sees that bright light part and is overlaying the image over the base image but blending it. Hope that makes sense
@@Delyn That makes perfectly sense. Thank you for the explenation. Also the recommendation of Sweet Home 3D which is a lot of fun to use.
@@pb78pbI was wondering the same thing, thanks for asking the question, lol.
Great stuff! Only took me a couple of hours to set up dashboard for an outbuilding with a few lights. What would also be pretty cool would be to show motion somehow based on motion sensors being triggered. I suppose it could work exactly like lights, just have to figure out what use to indicate motion being sensed... I'll fool around with it and see if using motion sensor entities would also work. Thanks for this!
Just saw your other video, seems you already thought of this...
Thanks a lot for explanation. And so rare the youtubers shares the code free.
Gday, great video, is there away to have clickable conditional cards e.g. click a section on floor plan and it opens up all the controls for that area.
Awesome video. Much simplified compared to the other tutorials. Im stuck at the entity step though. Just get the circle going round and round in the centre of the picture. Wonder if you can help? Trying to add my light switches.
It happens with me when the entity in not in the good position.Like - type: state-icon is in the same colume as - elements.Or just dont have enough distance
what if you turn two light together . which picture gonna show on
😂 That's what I wanted to comment. It sure looks like an easy way but it just leaves out the step of cropping images to make it work for every light.
@@martinzipfel7843 yeah right . i did the cropping and its work
Awesome tutorial. When I turn on more than 2 lights in a Mobile View, the images are stacked and rotated on each other. Works perfect on desktop view but not mobile view. Any suggetion please?
Thanks a lot!
Did you set a seperate light for each recessed light or just one in the room somewhere?
Thanks for the tutorial. Just in time for me to add my floor plan to HA. I noticed you have icons over your curtains, were you able to show those open and closed as well?
The icons show the state of the curtains, unfortunately I haven’t found a great way to show them as closed.
I guess opening and closing curtains is the same thing as opening and closing a garage door (i.e., using the entity `cover._Your_Curtain_`). If so, this is what I did to see my garage door open/close on the plan.
1. On the *base* image my garage door is closed.
2. I’ve created an image with *only* the garage door *open* and the rest is transparent. Meaning that in SweetHome3D I took a photo of my floor plan with the garage door opened, I then took an image editor, in my case Pixelmator and erased everything except the open garage door, the rest of the image it transparent.
Then in the yaml instead of blending the image, I overlay the image with the garage door open. Since the image contains *only* the open garage door (not the garage) and the rest is an alpha channel (i.e., transparent), it just shows the door as open (hiding the part of the image with the door closed). Here is the yaml:
```yaml
- type: image
entity: cover.garage_door
style:
left: 50%
top: 50%
width: 100%
mix-blend-mode: normal
state_image:
'open': local/floorplan/HomeAssistantBase-garage-porte-ouverte.png
'opening': local/floorplan/HomeAssistantBase-garage-porte-ouverte.png
'closing': local/floorplan/HomeAssistantBase-garage-porte-ouverte.png
tap_action:
action: none
```
Thank you @Delyn for the nice tutorial!
great vid ! but after adding the code im getting the follow warning ,
Visual editor not supported
Key 'panel' is not expected or not supported by the visual editor.
can you tell me wat im doing wrong here ,
thx
Hi! I watched your video. (love it!) What happens when I turn on two lights at the same time? Do I only see 1 light on or do I see two lights on?
2 as you add the layer with "mix-blend-mode: lighten"
You see each light individually :)
@@Delyn @wadu28 hi! i did it! Looks great! Thank you! Now, my dashboard is looking great, but can you provide a short movie like this how to add buttons (somewhere in a corner -not in dashboard-) for eg a alarm system?
Awesome video, Delyn.
Thanks Edgar!
I got it all working but cant get the Opacity to change the brightness of the overlayed Light image depending on the brightness of the entity - is something missing from your sample code to get that to work ? thanks again
i cant see to lamps on at the same time.. what am i doing wrong? i dont think the "lighten" function is working.
Hey, great tutorial. Very easy to follow. However can you explain what:
filter: >-
${ "hue-rotate(" +
(states[‘entity’].attributes.hs_color ?
states[‘entity’].attributes.hs_color[0] : 0) +
"deg)"}
opacity: >-
${states[‘entity’].state === 'on' ?
(states[‘entity’].attributes.brightness / 255)
: '0'}
does? I imagined this will use the colors and brightness of lamps to change this in the "blend mode"? I however don't see any changes happening (apart from the on/off).
Thank you for this tutorial. I'm trying to understand one thing though. If I have 40 smart lights in the home, do I have to create an image for each one on and off throughout the house? That would mean hundreds of images with all the variations of all the room lights on and off.
Not on and off, just create the Base image first, that acts as ‘off’. Then create one for each light you want to reflect the on state in the image
@@Delyn How do you account for scenarios where more than one light is turned on? As I understand it, when you turn on a specific light source, it replaces the currently displayed image with a new one where that specific light source is turned on, visually turning off the previous light source. Is my assumption correct?
@@TheCzechmate007 I did cut out the "lighten" part of the image (also to make the file sizes a bit less). I also think the "mix-blend-mode: lighten" will make sure the images are partly transparant. So you can see multiple lights on.
@@jeroenjansse95 I'm not sure I understand how you did it? Could you please explain it a bit better? Thank you!
@@TheCzechmate007 LOL!
Hi thanks for the video - where to buy the advanced version from please? I can only find the free version.
they are the same thing except the free version you have to download the furniture from the website
I can't use a variable in the style attribute to dynamically change the opacity. Any ideas why? If I set the value fix to e.g. "0.5" it works but with your opacity snippet and my sensor it doesn't work.
my code wont save after I try to add the second light! I copy and paste the change the images path and entities but the script will go away even after I hit save and nothing happens ! I only have the 1st initial light
Followed your steps and have things mostly working but tap_action: toggle is only working for the last entry. For example, I have a room with four entities (Lights 1-4) and can see four separate icons on the map. The last entry in the yaml is Light 4 and that works. Lights 1-3, however, do not work and when hovering show a 'more info' popup for Light 4. Any ideas?
Well, found a workaround if anyone is encountering this problem. Setting "z-index: 5" (or another number (layer)) under "- type: state-icon" -> "styles:" did the trick.
*Must Read*
So if you are lazy you skipped the part where people edit images in photoshop to add lights and make everything else transparent
And now you are stuck with code when you click whole image getting stacked on each other
This video is for you , this guy have solution for the annoying issue of images getting staked on each other without light getting threw
how do yo layer a few images for a few light show as on?
I did it! Thanks to you :-)
Thanks for this tutorial,
But I dont know what I am doing wrong,
when I type in the image path mine being(local/V1/Flooruno/TopBaseDay.png) nothing pops up on the image,
I have triple checked the spelling and case sensative, files are located is in homeassistant/WWW/V1/Flooruno/
please help.
I had the same problem. I was able to resolve it by clicking on the image in the folder and it gave it in a URL. I pasted the URL in the same spot and the image came up.
can't get the yaml code from the website
Thank you for the heads up and sorry for the inconvenience! The link has been updated to work properly!
Sweethome 3d does not look like this... I payd 5 dollars but i dont have white colour, i cand turn on any light... I dont see the optiona you see