Hi
I created a picture-elements “grid system”:
- the background is a picture of A4-size (210x297mm x 300dpi = 3481 x 3509 pxl)
- I created a “grid” in a way that you can easily position your icons
- horizontal: starting at 5% with increment of 15% [5, 20, 35, 50, 65, 80, 95]
- vertical: starting at 10% with increment of 10% [10, 20, 30, 40, 50, 60, 70, 80, 90]
Awaiting for a GUI to position your icons, this makes it a little bit more easy to work with the yaml file
In example, this becomes
- title: x
path: x
badges: []
cards:
- type: picture-elements
image: /local/floorplan/plans/pvo4/AR-1___.png?version=2022-08-08
elements:
- type: state-badge
entity: light.my_l07
tap_action:
action: toggle
double_tap_action:
action: more-info
style:
top: 10%
left: 5%
height: 9%
overflow: hidden
- type: state-badge
entity: light.my_l31
tap_action:
action: toggle
double_tap_action:
action: more-info
style:
top: 10%
left: 20%
height: 9%
overflow: hidden
- type: state-badge
entity: light.my_l28
tap_action:
action: toggle
double_tap_action:
action: more-info
style:
top: 10%
left: 35%
height: 9%
overflow: hidden
and the result could be:
So you have a grid of 7 x 9 = 63 entities to show.
This could be useful to have a dashboard to show a lot of states…
You can use more, u can use less entities, but this configuration has some advantages:
- “round” numbers to position your icons
- works on browser but also on mobile view / app (tested on an old iPhone SE with 4inch screen…)
- you can position exactly in the middle (50%,50%)
- uses A4 paper format, so easily to convert a PDF (floorplan of your house i.e.) to this format.
This is how I work: If there are some modifications in my home, I generate a new floorplan to PDF, export it as png and update this picture on HA. I u are consistent with scale and position of the image, the icons will stay correct positioned )
Now I have following questions:
-
on mobile the state-badges are a little bit oversized. Is it possible to downsize these icons?
-
is it possible to have a relative size for the state-icons?
-
do you other tips for using the picture-elemnts card?
-
will there ever be a GUI to position those icons/badges?
See also Floorplan: (graphical) editor for picture-elements?
kind regards,
Bart
ps: here is the native grid:
