[1] When i toggle the backyard light, ‘backyard light.png’ will show up, but when i toggle the side car porch light, ‘side car porch light.png’ doesn’t show up. What’s wrong with my coding?
- I would avoid spaces in file names
- display file extensions in windows explorer is good too
- Test that your image URL is correct : http://192.168.68.125/local/floor_plan/your-image.png in a browser.
Both images are set left and right to 50% so in same place ?
Edit. I see what you’re doing now. The image lower in the list will be on top
your image for backyard ligtht is on top fo the porch one.
Also, you don’t need to define the ‘off’ image if it is the same as the primary image of picture-elements. If you only indicate the ‘on’ one it will show the ‘on image’ when is on and the picture elements one when is different than ‘on’.
So try deleting the off images for both ligthts first and check if that works. Then try to turn on both at the same time, if don’t works, you should add a alpha to your ‘on’ images so image only overlaps its zone, and not others.
I just got it done, the problem is the image in ‘off’ state_image. Thanks for help. I try to copy and paste the coding into yaml file, but it shows error. Why?
The reason i want to put the coding into yaml file because i want to put comment in the coding as u notice that coding in user interface will disappear after u save it.
ui config don’t go in configuration.yaml it should go in ui-lovelace.yaml. But for that you need to set lovelace to yaml mode instead of storage mode. Check this: