Thanks for the tutorial which helped al lot. So far I did not manage to display the entity’s name. I can show state-label as well as state-icon, but is there a way to show the entity name or write a name as I’d prefer names instead of icon in this case?
I’m trying to recreate an Apple Remote using Photoshop by exporting each layer individually for each button. I thought this would be the best way since it would preserve the exact base dimensions for the base image and overlaid image elements (i.e. autoscale), but it appears that the picture elements card resizes image elements. Is there a way around this so that the elements scale in relation to the base image?
There are width and height parameters you can set in style. Not sure that’s what you’re looking for but that’s how I set my doors and windows to scale off of a green or red rectangle.
@bigscience Thanks. I’m aware of those parameters and was able to get it to look right, but if the picture element is already at the same scale as the base picture, why is it resized to begin with?
So if I’m following you, you made the buttons and background at the right sizes they shouldn’t need any adjustments but they do? I can’t say for sure but my guess is that it puts regular icons in at a normal size and then other pictures at the size of the background. Here you can see my floor plan with the pictures adjusted to the size I want with the height/width settings:
You’re addressing my question. I suppose I still don’t understand why it works this way and am trying to determine if it’s a good feature request to have non-CSS scaled picture elements to essentially auto-scale with the background/base image.
Here’s another question. Is there a way to get this card to use the transparency data for the action zones of non-rectangular .png’s used as picture elements?
The picture elements I used are .png’s with transparency, but it appears that this card does not use that information to determine the “action zones” (or whatever they’re called). Here’s a screenshot with the elements’ opacity at 50% (will eventually be set to 0%). My cursor focus is at the top left corner of the info popup which is in the transparent area of the picture element image, but within the horizontal and vertical dimensions of the image.
@Ildar_Gabdullin Thank you. But, if I understand that property right, it would also disable mouse clicks on the non-transparent part of the picture element. Is that right? If so, that’s not what I’m after at this time.
Right. An element is rectangular.
In similar circumstances I had to revise a structure of a card (what elements are located on each layer, what is an order of layers, …).
Ok. Thank you. I guess I got what I came here for which is that both are working as currently intended/designed and there’s nothing I’m missing in the basic configuration of the Picture Elements Card itself.
Overall, whether it’s this card or many others, I wish the HA front end had CSS more embedded (UI and/or yaml) so we didn’t have to mess with all of these CSS properties, card-mod, etc.
These two “issues” are IMO prime examples. I bring in a bunch of images all scaled appropriately, but the front end doesn’t present a check box to “preserve native size” (or similar). Same thing with the transparency…although if it cannot be done with CSS, I guess it’s not possible anyways (?)
It is mentioned that one could “– the whole floorplan card is a decluttering-card - pass a scale value as a variable;”
Ideally, that’d come from the scaling of the original image. Is there a way to do that?
If I had easy access to javascript, this would be trivial-- I’d query the image size, and compute the scale, which I could use on all the other elements, but that isn’t what we have here.
