# 3D Floorplan Card

![](https://2426742268-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LIQDsbmCxoEk-2yQdYM%2F-LJNZ5nvi0oJbGH2z4rh%2F-LJNZFZyknID2jCHDdBQ%2Ffloorplan.gif?generation=1533715499667018\&alt=media)

{% file src="<https://2426742268-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LIQDsbmCxoEk-2yQdYM%2F-LPbTKmtb3g-iWVWGqez%2F-LJO5Hx7O5tMAgxqLWQZ%2FFloorplan.png?generation=1540408045375755&alt=media>" %}
Floorplan
{% endfile %}

{% file src="<https://2426742268-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LIQDsbmCxoEk-2yQdYM%2F-LPbTKmtb3g-iWVWGqez%2F-LJO5Hx98rX82lP_Ha3E%2Fhallway.png?generation=1540408044330395&alt=media>" %}
Hallway overlay
{% endfile %}

{% file src="<https://2426742268-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LIQDsbmCxoEk-2yQdYM%2F-LPbTKmtb3g-iWVWGqez%2F-LJO5HxBGL_IvOzpYpNn%2Fkitchen.png?generation=1540408048504902&alt=media>" %}
Kitchen overlay
{% endfile %}

{% file src="<https://2426742268-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LIQDsbmCxoEk-2yQdYM%2F-LPbTKmtb3g-iWVWGqez%2F-LJO5HxDqK-DK8GX6mR0%2Fliving_room.png?generation=1540408044332244&alt=media>" %}
Livingroom overlay
{% endfile %}

{% hint style="info" %}
Change the pictures and sensors to your own.
{% endhint %}

{% tabs %}
{% tab title="ui-lovelace.yaml" %}

```yaml
- type: picture-elements
  image: /local/Floorplan.png
  elements:

  - type: image
    tap_action: toggle
    entity: light.kitchen
    image: /local/Floorplan/kitchen.png
    state_filter:
      "off": opacity(50%)
      "on": opacity(1%)
    style:
      top: 80%
      left: 27.25%
      width: 39.75%

  - type: image
    tap_action: toggle
    entity: light.hallway
    image: /local/Floorplan/hallway.png
    state_filter:
      "off": opacity(50%)
      "on": opacity(1%)
    style:
      top: 73.7%
      left: 70.5%
      width: 43.75%

  - type: image
    tap_action: toggle
    entity: light.living_room
    image: /local/Floorplan/living_room.png
    state_filter:
      "off": opacity(50%)
      "on": opacity(1%)
    style:
      top: 36.25%
      left: 50%
      width: 85%
```

{% endtab %}
{% endtabs %}

{% hint style="info" %}
The 3D floorplan was made using the free website <http://www.sweethome3d.com>

The black boxes were cut out using the free software from <https://www.gimp.org>
{% endhint %}