Home Assistant Floor plan A new experience in smart home control with visual floor plan! – Home Assistant step-by-step tutorial EP 6

Without further ado, let’s go straight to the picture! Today I will teach you how to create a floor plan dashboard in Home Assistant, allowing your smart home to control "what you see is what you get", and also allow other family members who are not familiar with Home Assistant to enjoy the ultimate lazy life of a smart home.

Table of contents

Concept note

The concept of floor plan is actually very simple, just the stacking of layers. The bottom picture shows the light-off state, the top picture shows the light-on state, and then the control buttons are placed on the top layer.

Today I will use the upper right living room area as a production demonstration, which is made up of the following three pictures:

Prepare in advance

1. Floor plan

You will need to prepare a dark version (lights off) and a bright version (lights on) respectively. Here I useCool HomeTo make a floor plan, you can find a tool that is convenient for you to use to make a floor plan. In short, you can finally get two versions, dark and light. Please refer to the picture below:

Name the dark version "Plan Plan.png" and save it (generally speaking, it is not recommended to name it in Chinese, but for the sake of better understanding in teaching, I will use Chinese here).

2. Cut the bright color version of the floor plan into sections

I use Figma Cut the picture to get the lighting status of each area:

Taking the living room area as an example, name the bright version of the living room area above "living room.png" and save it.

💡 Tips
A little gradient processing on the edges of the open area will make it look more coordinated when the lights are on.
(Refer to the living room, dining room, and entrance hall above)

3. Prepare control buttons

Use any drawing software to create button icons for operating devices. You can first envision the states of the device you want to control. Generally, the most basic states are as follows:

• Light: off, on
• Fan: off, on
• Curtains: closed, opening, closing, opening
• Air conditioning: off, air conditioning, heating

You can make it according to your own situation. If you don’t have the usual drawing software, I recommend giving it a try. Figma.

Then name and save these button images in the same way. We will use them today. Those who are too lazy to do so can directly save the image files below (because they were made at different times, the file naming logic is a bit inconsistent, don’t blame me...😂):

💡 Tips
You can make gif animations, such as curtain switches

4. Put the floor plan and buttons into Home Assistant

If you still don’t know how to put the file into Home Assistant, please Google to find the answer first, and put the floor plan and button pictures prepared above into Home Assistant. Here is my configuration for your reference:

⚠️ NOTE
You need to put the file in ../config/www/ and wait until you can get it from /local/

config
┕ www
    ┕ui
        ┕ Floor plan
            ┕ Floor plan.png
            ┕ living room.png
        ┕ icon
            ┕ light-on.png
            ┕ light-off.png
            ┕ curtains.png
            ┕ curtains-closed.png
            ┕ opening.png
            ┕ closing.png
            ┕ air-conditioner-off.png
            ┕ air-conditioner-on.png
            ┕ air-conditioner-heat.png

5. Added Home Assistant Dashboard for placing floor plans (can be skipped)

If you don't want to change the currently used Dashboard, you can enter the Dashboard list from "Settings > Main Panel" and add a new one.

6. Add new view

Select "Edit Main Panel" from the upper right corner of the Dashboard, and then add a new view.

Step 1. Add new panel

Click "New Panel" in the lower right corner, then click "Manual". That’s right, let’s start writing YAML! Don’t worry, YAML syntax is quite simple. Examples are also provided below for you to copy and paste, and then fine-tune it to meet your own needs!

Step 2. Put it into the template frame

Directly copy and paste the YAML code below. If you have coding ability, you should know how to complete it after a quick look at the following. If you don’t have much coding experience, just follow the steps first, and then slowly change it after you are familiar with it.

type: custom:config-template-card
entities:
  - 
card:
  type: picture-elements
  image:
  style:
  elements:
    - type: image

The above YAML code is the large framework used this time. This dashboard is made of custom:config-template-card (Line 1) This panel consists of;entities: (Line 2~3) etc. will be used later to declare the entity that will be used so that subsequent operation switches can respond faster; then card: (Line 4) is the main body of this panel, and the floor plan and various components will be filled in later.

After pasting the YAML code above, an error will appear on the right side. Don't worry, this just reminds us that some necessary values are not provided. Let's fill them in one after another.

Line 9 in the Template is temporarily placed in order to display the preview normally in the following steps, and will be replaced starting from the next Step 4.

Step 3. Insert the base image

Add the basemap path "../local/ui/floorplan/floorplan.png" after "image:" in line 6 of the original code (from here on,As long as it is related to the file path, you must replace it according to the situation where you place the file!)

⚠️ NOTE
The YAML syntax is quite strict. There must be a space between key (here it is "image") and value (here it is "../local/ui/floorplan/floorplan.png"). When combined, it looks like this:
image: ../local/ui/floorplan/floorplan.png

type: custom:config-template-card
entities:
  - 
card:
  type: picture-elements
  image: ../local/ui/floorplan/floorplan.png
  style:
  elements:
    - type: image

At this time, the base image will be displayed on the right side. If it is not displayed, remember to check whether the file path and file name are correct.

Step 4. Overlay the light-on status

Next, we need to overlay the light-on status of each area. Below is a set of template code for "area on/off light display". Replace this template with the last line in the Step 2 YAML code template. At this time, the right No changes will be made to the preview.

    - type: image
      entity: 
      tap_action:
        action: none
      style:
        pointer-events: none
        width: 
        top: 
        left: 
      state_image:
        'off': 
        'on': 

- type: image (Line 1) Explain that the type of the element to be put into the dashboard now is "image", which is a "picture element". In this time, image elements are used to create the floor plan visual dashboard. I will not repeat the explanation when I encounter it later!

Line 2~12 are the various attribute settings of the image element. The settings are different for different purposes. We will introduce each template separately later. Here we first explain the "Light On State Template":

• entity: It is the entity used in this element. It can be found in "Settings > Devices and Services > Entities" of HA. Fill in the example here. switch.xuan_guan_wu_kai_guan_2_l2 (Don’t copy here! Please put your own entity in HA); Pay special attention here and put entity at the front. entities: section, so that the picture display state will be changed immediately when the light is turned on and off.
• tap_action: Here is the declaration of the action to be performed when this image element is clicked, because here it is just to display the light-on status, and there is no need to perform any action after clicking, so here is the setting action: none.
• style: Used to set the display style of the image element. If you happen to be familiar with CSS, you can use any CSS property here:
  • pointer-events: none I put this paragraph here because in my practice, each area will be 100% overlaid on the original image. In order to allow the click event to penetrate, this line needs to be added to prevent the subsequent overlay from affecting the previous button click.
  • width: Set the width of the image. Because the light-on image I used is the same size as the base image, so set it here. 100%, the effect is that the light-on image is as large as the base image.
  • top: and left: The function is to set the position where the picture is displayed. Here, both top and left are set. 50%, refers to pushing the image down from the top to the distance of "image height 50%", and then pushing the image from left to right to the distance of "image width 50%".
  • state_image: Set the images to be displayed when the entity is in different states
    • 'off' : Because there is no need to display any picture, I put a transparent picture /local/ui/floorplan/transparent.png (Just put a transparent png here).
    • 'on' : Just put it hereFrontReady light-on status picture/local/ui/floorplan/living room.png

At this point, the overall code will look like this, let everyone do some homework:

type: custom:config-template-card
entities:
  - switch.xuan_guan_wu_kai_guan_2_l2
card:
  type: picture-elements
  image: ../local/ui/floorplan/floorplan.png
  style: null
  elements:
    - type: image
      entity: switch.xuan_guan_wu_kai_guan_2_l2
      tap_action:
        action: none
      style:
        pointer-events: none
        width: 100%
        top: 50%
        left: 50%
      state_image:
        'off': /local/ui/floorplan/transparent.png
        'on': /local/ui/floorplan/living room.png

At this time, you can manually turn the light on and off to verify the effect.

Step 5. Add a light switch button

Likewise, first put the following template at the end of the code.

    - type: image
      entity: 
      tap_action:
        action: toggle
      style:
        width: 
        top: 
        left: 
      state_image:
        'off':
        'on':

• entity: Place the entity to be controlled in the part. Here we want to control the switch of the lights in the living room, so we use the same entity as before. switch.xuan_guan_wu_kai_guan_2_l2.
• tap_action: Set here to action: toggle The effect is to click to switch the entity on or off.
• style: part of width Can control the size of the light switch button,top and left Just like before, you need to decide the button position. Here, you can set it completely according to the situation of your home.
• state_image:
  • 'off' : Put a picture of the button when turning off the lights /local/ui/icon/light-off.png
  • 'on' : Put a picture of the button that turns on the light /local/ui/icon/light-on.png

Come! For homework, after adding the light switch button, the overall code looks like this:

type: custom:config-template-card
entities:
  - switch.xuan_guan_wu_kai_guan_2_l2
card:
  type: picture-elements
  image: ../local/ui/floorplan/floorplan.png
  style: null
  elements:
    - type: image
      entity: switch.xuan_guan_wu_kai_guan_2_l2
      tap_action:
        action: none
      style:
        pointer-events: none
        width: 100%
        top: 50%
        left: 50%
      state_image:
        'off': /local/ui/floorplan/transparent.png
        'on': /local/ui/floorplan/living room.png
    - type: image
      entity: switch.xuan_guan_wu_kai_guan_2_l2
      tap_action:
        action: toggle
      style:
        width: 5%
        top: 30%
        left: 73%
      state_image:
        'off': /local/ui/icon/light-off.png
        'on': /local/ui/icon/light-on.png

At this time, the light switch control in the living room has been completed! Just press that little button and give it a try!

Next, follow the same pattern and add the light switch status and buttons of each space in your home! Your Floor plan dashboard prototype is complete!

Additional screening on the same scene

Here we share templates for controlling other devices, so you can use them as needed!

curtain control

    - type: image
      entity: cover.zhu_wo_sha_lian # Change your curtain entity
      tap_action:
        action: toggle
      style:
        top: 12%
        left: 30%
        width: 5%
      state_image: # Because the status value of each device may be different, you need to adjust it according to which status your curtain control entity can distinguish.
        open: /local/ui/icon/curtains.png
        closed: /local/ui/icon/curtains-closed.png
        closing: /local/ui/icon/closing.gif
        opening: /local/ui/icon/opening.gif

Air conditioning control

    - type: image
      entity: climate.ci_wo_leng_qi # replace your air conditioner entity
      tap_action:
        action: more-info
      style:
        top: 69%
        left: 28%
        width: 5%
      state_image: # also needs to check which states your air conditioner can distinguish and make adjustments.
        cool: /local/ui/icon/air-conditioner-on.png
        heat: /local/ui/icon/air-conditioner-heat.png
        'off': /local/ui/icon/air-conditioner-off.png
        fan_only: /local/ui/icon/air-conditioner-fan.png

Share your results!

Congratulations on completing your Floor plan dashboard! Leave a message to share your results!

If you have tried different methods, please share them with everyone in the message area!

Home Assistant tops!