I’m not sure I follow you. Picture-element cards have a picture background
Right, but you cant list several elements and use state filter, correct?
Only 1 card has state filters on entities:
and another card has a state filter on the entire card:
Everything else does not have this functionality.
you could probably use state-image items with an image that’s just a transparent box to make it invisible when in a specific state.
Just seems odd that with all this functionality that you cant just make a cards background transparent.
You do realize that this is experimental? As in, it’s still in alpha/beta phase and not the ‘real’ ui? Functionality will come over time.
I am just trying a demo and I have used the example from here: https://www.home-assistant.io/lovelace/ under “TRYING IT OUT” and I have the first two views working OK. However I am a fan of Floorplan so I wanted to start working on replicating that. I added the example from here: https://www.home-assistant.io/lovelace/picture-elements/ and I see the view at the top but when I select it there is nothing on the page. I am using a PNG of size 1524x928 but even if I use a different one of size 192x192 which I can see in one of the other views nothing appears.
Ideas?
Post your yaml. Also, you could try a CTRL+F5 to clear cache and reload page.
CTRL-F5 no change. Here is my yaml (attached as I couldn’t get the formatting right…)
ui-lovelace.yaml (2.9 KB)
Your Floorplan view needs a “cards:” line before “type: picture-elements”, and follow the “Second view” example indentation:
- title: Floorplan
type: picture-elements
image: /local/floorplan.png
elements:
- type: state-icon
tap_action: toggle
entity: light.desk_light
style:
top: 47%
left: 42%Thanks that has got it showing but it is small. Any way to have it big?
Try using “panel: true” before the “cards:” line.
You sir are a legend. Working nicely Now to play around with it! Thanks for the help everyone.
Great, have fun!!
All is going well. I know this is in Beta but thought I would ask if this can be done yet. In floorplan I had bedside lights as an icon so no problem recreating that with “state-icon” but for room lights I just used a large polygon which would change colour when the light was on. So the whole room in the floorplan would be a light yellow when the light was on. Can you do that yet?
You cannot do that yet. Floorplan in lovelace is more limited than the base floorplan. You know, you could use your old floorplan if it has a normal hass link. It just won’t be a tab at the top.
Thanks for the info. I will keep watch in the forums for others ideas and tricks. Thanks again.
with picture-entity, is it possible to have some way of controlling the properties of a light? Currently I have the beolw code to switch lights on and off but I would like a nice way of including control for brightness and colour as well. Can this be done? I thought I creating a second item to click on but it would be nice if it could be done with the single icon (perhaps a long press in a future release)
ui-lovelace.yaml
- title: Entry Passage
icon: mdi:walk
cards:
- type: picture-elements
image: /local/images/entry.jpg
elements:
- type: state-icon
tap_action: toggle
entity: light.front_door_light
style:
top: 8%
left: 67%Not in picture elements. I’ve had some ideas for it but I don’t have the time to implement them. I was thinking:
tap-hold/click-hold to make a vertical sliderbar appear for the brightness.
double-tap/double-click to bring up a color wheel.
EDIT: This will only work if the browsers support capturing click/tap events. I do not know that. I’m not really a web developer. I’ve always done UI’s for applications, but web dev is outside my element.
really? I thought you were a magician who knew everything? 
1 Like