Utilising the picture entity card within lovelace, I was able to design this floorplan control card.
The first step to achieving this was to design the CAD image for the floorplan. To do this, I used floorplanner.com. I did not register and therefore did not pay anything to use this service, to work around the fact you need to register to export, I simply set my screen resolution as high as it would go and took a screenshot of the image I designed. The quality of this image is perfectly fine for my use.
Once the floor plan CAD image was designed, the next step was to use Inkscape to separate the image into separate files, such that I had an image for each room in it’s ‘dimmed’ and ‘lights on’ states.
This was a simple task of first making sure I had 2 versions of the entire floorplan, one at full brightness and one with reduced brightness to imitate darkened rooms. Once I had the two version of this file, I then separated each version into individual rooms, making sure to maintain the original image size to ensure the same top left corner anchor point could be used.
With the set of images generated and ready to use, I then wrote the picture card entity to lay out all the buttons over the darkened floorplan image. This is configured so that when a light entity is ON, the bright image overlay of that room will be displayed, essentially turning the light on in that room on the floorplan image. I then also overlaid the icon buttons for each entity over the image, adding duplicates where appropriate. Heaters are also controllable via this plan, and are made more obvious for their ON indicator by changing icon colour to red.
The code for the card is:
type: picture-elements
elements:
- type: image
entity: light.hallway_lights
tap_action:
action: none
state_image:
'on': /local/floorplan_hall.png
'off': /local/transp.png
style:
top: 50%
left: 50%
width: 100%
- type: image
entity: switch.fairy_lights
tap_action:
action: none
state_image:
'on': /local/floorplan_balcony.png
'off': /local/transp.png
style:
top: 50%
left: 50%
width: 100%
- type: image
entity: light.living_room_lights
tap_action:
action: none
state_image:
'on': /local/floorplan_livingroom.png
'off': /local/transp.png
style:
top: 50%
left: 50%
width: 100%
- type: image
entity: light.kitchen_light
tap_action:
action: none
state_image:
'on': /local/floorplan_kitchen.png
'off': /local/transp.png
style:
top: 50%
left: 50%
width: 100%
- type: image
entity: switch.bedside_lamp
tap_action:
action: none
state_image:
'on': /local/floorplan_bedroom.png
'off': /local/transp.png
style:
top: 50%
left: 50%
width: 100%
- type: image
entity: light.bedroom_lights
tap_action:
action: none
state_image:
'on': /local/floorplan_bedroom.png
'off': /local/transp.png
style:
top: 50%
left: 50%
width: 100%
- type: image
entity: switch.heated_blanket
tap_action:
action: none
state_image:
'on': /local/heatedblanket.png
'off': /local/transp.png
style:
top: 57%
left: 82%
width: 15%
- type: image
entity: switch.fairy_lights
tap_action:
action: toggle
state_image:
'on': /local/FairyLights.png
'off': /local/transp.png
style:
top: 5%
left: 50%
width: 100%
- type: image
entity: switch.living_room_heater
tap_action:
action: none
state_image:
'on': /local/redglow.png
'off': /local/transp.png
style:
top: 47%
left: 46%
width: 30%
- type: state-icon
entity: light.hallway_lights
icon: mdi:lightbulb
style:
top: 90%
left: 63%
tap_action:
action: toggle
- type: state-icon
entity: light.hallway_lights
icon: mdi:lightbulb
style:
top: 75%
left: 45%
tap_action:
action: toggle
- type: state-icon
entity: light.bedroom_lights
icon: mdi:lightbulb
style:
top: 53%
left: 68%
tap_action:
action: toggle
- type: state-icon
entity: light.bedroom_lights
icon: mdi:lightbulb
style:
top: 50%
left: 94%
tap_action:
action: toggle
- type: state-icon
entity: light.living_room_lights
icon: mdi:lightbulb
style:
top: 68%
left: 53%
tap_action:
action: toggle
- type: state-icon
entity: light.living_room_lights
icon: mdi:lightbulb
style:
top: 32%
left: 63%
tap_action:
action: toggle
- type: state-icon
entity: switch.living_room_heater
state_color: false
style:
top: 45%
left: 45%
'--mdc-icon-size': 40px
tap_action:
action: toggle
card_mod:
style: |
:host {
--paper-item-icon-color:
{% if states(config.entity) == 'on' %}
red;
{% else %}
gray;
{% endif %}
}
- type: state-icon
entity: switch.heated_blanket
style:
top: 57%
left: 82%
'--mdc-icon-size': 40px
tap_action:
action: toggle
- type: state-icon
entity: switch.fairy_lights
style:
top: 6%
left: 20%
'--mdc-icon-size': 30px
tap_action:
action: toggle
- type: state-icon
entity: switch.fairy_lights
style:
top: 6%
left: 40%
'--mdc-icon-size': 30px
tap_action:
action: toggle
- type: state-icon
entity: switch.fairy_lights
style:
top: 6%
left: 60%
'--mdc-icon-size': 30px
tap_action:
action: toggle
- type: state-icon
entity: switch.fairy_lights
style:
top: 6%
left: 80%
'--mdc-icon-size': 30px
tap_action:
action: toggle
- type: state-icon
entity: media_player.nic_chromecast
style:
top: 40%
left: 60%
- type: state-icon
entity: media_player.google_nest
style:
top: 50%
left: 60%
- type: state-icon
entity: switch.bedside_lamp
style:
top: 68%
left: 88%
tap_action:
action: toggle
- type: state-icon
entity: switch.coffee_lamp
style:
top: 42%
left: 9%
tap_action:
action: toggle
- type: state-icon
entity: light.kitchen_light
style:
top: 80%
left: 18%
tap_action:
action: toggle
- type: state-icon
entity: switch.fir_heater_big_sofa
state_color: false
style:
top: 24%
left: 40%
'--mdc-icon-size': 40px
tap_action:
action: toggle
card_mod:
style: |
:host {
--paper-item-icon-color:
{% if states(config.entity) == 'on' %}
red;
{% else %}
gray;
{% endif %}
}
- type: state-icon
entity: switch.fir_heater_small_sofa
state_color: false
style:
top: 65%
left: 60%
'--mdc-icon-size': 40px
tap_action:
action: toggle
card_mod:
style: |
:host {
--paper-item-icon-color:
{% if states(config.entity) == 'on' %}
red;
{% else %}
gray;
{% endif %}
}
- type: state-icon
entity: switch.bedroom_heater
state_color: false
style:
top: 40%
left: 74%
'--mdc-icon-size': 40px
tap_action:
action: toggle
card_mod:
style: |
:host {
--paper-item-icon-color:
{% if states(config.entity) == 'on' %}
red;
{% else %}
gray;
{% endif %}
}
image: local/floorplan4_dark.png