I am trying to set up a “floorplan” picture elements card and it seems straightforward enough, EXCEPT for the Top & Left % style options of the state-icon. Is there a convenient way of pointing to a part of my image and revealing what the Top/Left percentage is (some feature of Inkscape or another program)? Doing this by trial and error would be prohibitively tedious with my 50+ entities.
1 Like
After somewhat painstaking manual entry of the top/left position of all my entities, I opened the Lovelace UI and was frustrated to see this:
What is this? a UI for ants?!
My source image for the flooplan is 1613 x 908, why is it so tiny now? And I named my views! Here’s my yaml:
name: Palmaire
views:
- name: Floorplan
cards:
- type: picture-elements
image: /local/palmaire_floorplan.png
elements:
- type: state-icon
tap_action: toggle
entity: switch.back_patio_lightstrip
style:
top: 76%
left: 60%
- type: state-icon
tap_action: toggle
entity: switch.bathroom_fan
style:
top: 44%
left: 39%
- type: state-icon
tap_action: toggle
entity: switch.bookshelf_
style:
top: 37%
left: 25%
- type: state-icon
tap_action: toggle
entity: switch.dans_nightstand_
style:
top: 31%
left: 84%
- type: state-icon
tap_action: toggle
entity: switch.entertainment_center
style:
top: 29%
left: 71%
- type: state-icon
tap_action: toggle
entity: switch.entertainment_center
style:
top: 29%
left: 71%
- type: state-icon
entity: switch.garage_outlet
tap_action: toggle
style:
top: 96%
left: 4%
- type: state-icon
entity: switch.great_room_lightstrip
tap_action: toggle
style:
top: 38%
left: 50%
- type: state-icon
entity: switch.grow_light
tap_action: toggle
style:
top: 11%
left: 10%
- type: state-icon
entity: switch.hallway
tap_action: toggle
style:
top: 48%
left: 34%
- type: state-icon
entity: switch.master_bathroom_mirror_
tap_action: toggle
style:
top: 24%
left: 94%
- type: state-icon
entity: switch.office_light
tap_action: toggle
style:
top: 48%
left: 44%
- type: state-icon
entity: switch.outdoor_outlet
tap_action: toggle
style:
top: 96%
left: 44%
- type: state-icon
entity: switch.outdoor_sconces
tap_action: toggle
style:
top: 9%
left: 19%
- type: state-icon
entity: switch.recipe_center_
tap_action: toggle
style:
top: 89%
left: 21%
- type: state-icon
entity: switch.shelf_lights
tap_action: toggle
style:
top: 8%
left: 49%
- type: state-icon
entity: switch.track_lights
tap_action: toggle
style:
top: 13%
left: 45%
- type: state-icon
entity: switch.under_bar_lights
tap_action: toggle
style:
top: 26%
left: 40%
- type: state-icon
entity: light.6001948ab626_192168135215
style:
top: 52%
left: 31%
- type: state-icon
entity: light.bedroom_dimmer
style:
top: 32%
left: 78%
- type: state-icon
entity: light.cabinets
style:
top: 35%
left: 39%
- type: state-icon
entity: light.dining_room_accent
style:
top: 9%
left: 23%
- type: state-icon
entity: light.dining_room_dimmer
style:
top: 33%
left: 39%
- type: state-icon
entity: light.entryway
style:
top: 48%
left: 24%
- type: state-icon
entity: light.guest_room_bedside_lamp_
style:
top: 90%
left: 49%
- type: state-icon
entity: light.hue_bloom_1
style:
top: 37%
left: 22%
- type: state-icon
entity: light.hue_color_downlight_1
style:
top: 57%
left: 33%
- type: state-icon
entity: light.hue_color_downlight_2
style:
top: 68%
left: 33%
- type: state-icon
entity: light.hue_color_downlight_3
style:
top: 79%
left: 33%
- type: state-icon
entity: light.hue_color_downlight_4
style:
top: 90%
left: 33%
- type: state-icon
entity: light.kevins_nightstand
style:
top: 13%
left: 84%
- type: state-icon
entity: light.kitchen_island_1
style:
top: 22%
left: 37%
- type: state-icon
entity: light.kitchen_island_2
style:
top: 22%
left: 40%
- type: state-icon
entity: light.kitchen_island_3
style:
top: 22%
left: 46%
- type: state-icon
entity: light.kitchen_island_4
style:
top: 22%
left: 51%
- type: state-icon
entity: light.living_room_dimmer
style:
top: 16%
left: 62%
- type: state-icon
entity: light.living_room_tv_hue_lightstrip
style:
top: 23%
left: 71%
- type: state-icon
entity: light.shower_light_1
style:
top: 11%
left: 88%
- type: state-icon
entity: light.shower_light_2
style:
top: 11%
left: 91%
- type: state-icon
entity: light.tv_lightstrip
style:
top: 23%
left: 73%
- type: service-button
title: Lights Out
style:
top: 95%
left: 85%
service: script.turn_on
service_data:
entity_id: script.1515255984082
- name: Security
cards:
- type: entities
title: Cameras
entities:
- camera.front_door
- camera.front_yard
- camera.east_side_yard
- camera.garage
- camera.backyard
- type: entities
title: Door/Window Sensors
entities:
- binary_sensor.dining_room_window_opened
- binary_sensor.front_door_opened
- binary_sensor.front_patio_slider_opened
- binary_sensor.garage_entry_door_opened
- binary_sensor.garage_side_door_opened
- binary_sensor.guest_room_door__opened
- binary_sensor.hallway_window_opened
- binary_sensor.living_room_slider_opened
- binary_sensor.master_bedroom_slider_opened
- binary_sensor.office_door_opened
- type: entities
title: Motion Sensors
entities:
- binary_sensor.dining_room_motion_sensor_motion
- binary_sensor.garage_motion_sensor_motion
- binary_sensor.hallway_motion_sensor_motion
- binary_sensor.living_room_motion_sensor_motion
- binary_sensor.master_bedroom_motion_sensor_motionI mean, it’s going to be a percentage of the size of your image and the size of the icon.
I’m not sure what size the icon is, but alittle trial and error could figure it out.
Anways, you can use paint on your image and figure out where you want the upper left of the icon to be.
So using the image above, the percentages would be:
154/600 = 25.6%
379/500 = 75.8%
with rounding:
26% and 76%.
style:
top: 76%
left: 26%
1 Like
Thanks, I got that part. I just can’t figure out why in the UI my floorplan image is resized to unusably small dimensions. Also why my views are showing up “Unnamed” when my yaml says otherwise
It should be title: Floorplan, not name: Floorplan for views.
Not sure if you can resize it without using a custom tile.
Or you can use: https://github.com/ciotlosm/custom-lovelace/tree/master/plan-coordinates
This uses the actual card coordinates to get you %
You can also use a full screen by using panel: true in views
2 Likes
Does the picture elements card accept svg?
With your current config, the picture-elements card only occupied one column and hence it has to be scaled. If you want it to appear larger, you need to use the panel mode.
1 Like
All of your custom cards are solid. Thanks.
btw petro. yes. svg is supported 
Yah, it was a stupid question. I come from application programming, not web programming. In our world, svg files are not considered image files. I guess that’s not the case for web world…