Ok… so I’ve been setting up my 3d floorplan using picture elements. All of my overlay images are the exact same size as the main image. the problem I am encountering is that one image (for my bedside light) is changing sizes depending on what I am viewing the page in. All of the other images are rendering normally.
Example:
View of page in chrome browser on PC:
View of page in Home Assistant app on phone:
Here is the relevant code from the lovelace card in question:
type: 'custom:config-template-card'
entities:
- light.bedroom_lights
- light.bedside_lamp
- light.living_room_lights
- switch.bathroom_light
- switch.kitchen_lights
- switch.kitchen_counter_lights
- switch.dining_room
card:
type: picture-elements
image: /local/HA-Floorplan/House-Dark-1.png
style: |
ha-card:first-child {
background: rgba(42, 46, 48, 1)
}
elements:
- type: image
action: none
entity: sun.sun
state_image:
above_horizon: /local/HA-Floorplan/House-Day-1.png
below_horizon: /local/HA-Floorplan/transparent_square.png
style:
height: 100%
left: 50%
mix-blend-mode: lighten
opacity: '${ states[''sensor.sunlight_opacity''].state }'
top: 50%
width: 100%
tap_action:
action: none
hold_action:
action: none
- entity: light.bedside_lamp
hold_action: none
state_image:
'off': /local/HA-Floorplan/transparent_square.png
'on': /local/HA-Floorplan/Bedside Lamp.png
style:
left: 50%
top: 50%
width: 80%
tap_action: none
type: image
- entity: light.bedroom_lights
hold_action: none
state_image:
'off': /local/HA-Floorplan/transparent_square.png
'on': /local/HA-Floorplan/Bedroom Lights.png
style:
left: 50%
top: 50%
width: 100%
tap_action: none
type: image
- entity: light.living_room_lights
hold_action: none
state_image:
'off': /local/HA-Floorplan/transparent_square.png
'on': /local/HA-Floorplan/Living Room Lights.png
style:
left: 50%
top: 50%
width: 100%
tap_action: none
type: image
- entity: switch.bathroom_light
hold_action: none
state_image:
'off': /local/HA-Floorplan/transparent_square.png
'on': /local/HA-Floorplan/Bathroom Lights.png
style:
left: 50%
top: 50%
width: 100%
tap_action: none
type: image
- entity: switch.kitchen_lights
hold_action: none
state_image:
'off': /local/HA-Floorplan/transparent_square.png
'on': /local/HA-Floorplan/Kitchen Lights.png
style:
left: 50%
top: 50%
width: 100%
tap_action: none
type: image
- entity: switch.kitchen_counter_lights
hold_action: none
state_image:
'off': /local/HA-Floorplan/transparent_square.png
'on': /local/HA-Floorplan/Kitchen Counter Lights.png
style:
left: 50%
top: 50%
width: 100%
tap_action: none
type: image
- entity: switch.dining_room
hold_action: none
state_image:
'off': /local/HA-Floorplan/transparent_square.png
'on': /local/HA-Floorplan/Dining Room Light.png
style:
left: 50%
top: 50%
width: 100%
tap_action: none
type: image
- conditions:
- entity: light.bedroom_lights
state: 'on'
elements:
- elements: null
entity: fan.sonoff_1000cc26b7
hold_action: none
state_image:
'off': /local/HA-Floorplan/transparent_square.png
'on': /local/HA-Floorplan/Bedroom Fan On - Lights.png
style:
left: 50%
top: 50%
width: 100%
tap_action: none
type: image
type: conditional
- conditions:
- entity: light.bedroom_lights
state: 'off'
elements:
- elements: null
entity: fan.sonoff_1000cc26b7
hold_action: none
state_image:
'off': /local/HA-Floorplan/transparent_square.png
'on': /local/HA-Floorplan/Bedroom Fan On - Night.png
style:
left: 50%
top: 50%
width: 100%
tap_action: none
type: image
type: conditional
- conditions:
- entity: light.living_room_lights
state: 'on'
elements:
- elements: null
entity: fan.sonoff_1000cc26b7
hold_action: none
state_image:
'off': /local/HA-Floorplan/transparent_square.png
'on': /local/HA-Floorplan/Living Room Fan On - Lights.png
style:
left: 50%
top: 50%
width: 100%
tap_action: none
type: image
type: conditional
- conditions:
- entity: light.living_room_lights
state: 'off'
elements:
- elements: null
entity: fan.sonoff_1000cc26b7
hold_action: none
state_image:
'off': /local/HA-Floorplan/transparent_square.png
'on': /local/HA-Floorplan/Living Room Fan On - Night.png
style:
left: 50%
top: 50%
width: 100%
tap_action: none
type: image
type: conditional
- entity: light.bedside_lamp
icon: 'mdi:lightbulb'
style:
color: white
left: 61%
top: 63.5%
tap_action:
action: toggle
type: icon
- entity: light.bedroom_lights
icon: 'mdi:lightbulb'
style:
color: white
left: 61.5%
top: 79.5%
tap_action:
action: toggle
type: icon
- entity: light.living_room_lights
icon: 'mdi:lightbulb'
style:
color: white
left: 56.5%
top: 32.5%
tap_action:
action: toggle
type: icon
- entity: switch.bathroom_light
icon: 'mdi:lightbulb'
style:
color: white
left: 44%
top: 58%
tap_action:
action: toggle
type: icon
- entity: switch.kitchen_lights
icon: 'mdi:lightbulb'
style:
color: white
left: 45%
top: 39%
tap_action:
action: toggle
type: icon
- entity: switch.kitchen_counter_lights
icon: 'mdi:led-strip'
style:
color: white
left: 41.5%
top: 47%
transform: rotate(-45deg)
tap_action:
action: toggle
type: icon
- entity: switch.dining_room
icon: 'mdi:lightbulb'
style:
color: white
left: 44%
top: 15%
tap_action:
action: toggle
type: icon
- conditions:
- entity: sensor.mbfan_speed
state: 'off'
elements:
- elements: null
entity: fan.sonoff_1000cc26b7
hold_action:
action: more-info
icon: 'mdi:fan-off'
style:
color: white
left: 66.5%
top: 79.5%
tap_action:
action: toggle
type: icon
type: conditional
- conditions:
- entity: sensor.mbfan_speed
state: low
elements:
- elements: null
entity: fan.sonoff_1000cc26b7
hold_action:
action: more-info
icon: 'mdi:fan-speed-1'
style:
color: white
left: 66.5%
top: 79.5%
tap_action:
action: toggle
type: icon
type: conditional
- conditions:
- entity: sensor.mbfan_speed
state: medium
elements:
- elements: null
entity: fan.sonoff_1000cc26b7
hold_action:
action: more-info
icon: 'mdi:fan-speed-2'
style:
color: white
left: 66.5%
top: 79.5%
tap_action:
action: toggle
type: icon
type: conditional
- conditions:
- entity: sensor.mbfan_speed
state: high
elements:
- elements: null
entity: fan.sonoff_1000cc26b7
hold_action:
action: more-info
icon: 'mdi:fan-speed-3'
style:
color: white
left: 66.5%
top: 79.5%
tap_action:
action: toggle
type: icon
type: conditional
- conditions:
- entity: sensor.lrfan_speed
state: 'off'
elements:
- elements: null
entity: fan.sonoff_1000cc1eb1
hold_action:
action: more-info
icon: 'mdi:fan-off'
style:
color: white
left: 61.5%
top: 32.5%
tap_action:
action: toggle
type: icon
type: conditional
- conditions:
- entity: sensor.lrfan_speed
state: low
elements:
- elements: null
entity: fan.sonoff_1000cc1eb1
hold_action:
action: more-info
icon: 'mdi:fan-speed-1'
style:
color: white
left: 61.5%
top: 32.5%
tap_action:
action: toggle
type: icon
type: conditional
- conditions:
- entity: sensor.lrfan_speed
state: medium
elements:
- elements: null
entity: fan.sonoff_1000cc1eb1
hold_action:
action: more-info
icon: 'mdi:fan-speed-2'
style:
color: white
left: 61.5%
top: 32.5%
tap_action:
action: toggle
type: icon
type: conditional
- conditions:
- entity: sensor.lrfan_speed
state: high
elements:
- elements: null
entity: fan.sonoff_1000cc1eb1
hold_action:
action: more-info
icon: 'mdi:fan-speed-3'
style:
color: white
left: 61.5%
top: 32.5%
tap_action:
action: toggle
type: icon
type: conditional
Any ideas of how to fix this?