Given the high demand for instructions on how to create a Floorplan interface on HomeAssistant, I have decided to share my experience here. This repo is not intended to be a step-by-step guide, but I will still try to make it as comprehensive as possible.
This time I will write everything in Italian, for the simple fact that there are already many guides/repos in English on the subject.
Ultima, necessary premise: I don't know for how long I will keep this Repo updated. Any advice, correction, or suggestion will always be welcome: open an Issue to keep everything well tracked.
In creating this dashboard, the first, fundamental concept to keep in mind is the operation of the card "Picture Elements".
This card, in fact, has a very simple mechanism:
- It will always have a background image and elements placed above it;
- Each element will create a sort of additional layer;
- Each element/layer will be inserted in the same order as it was inserted in your .yaml file. This means that two image elements placed one above the other (and in the same position, but we will see this later) will overlap. If the second image (element) inserted in the .yaml file is larger than the previous one, it will completely cover it;
Esempi 1. Picture Elements con un Badge come elemento:
type: picture-elements image: 'https://demo.home-assistant.io/stub_config/floorplan.png' elements: - type: state-badge entity: binary_sensor.stato_asciugatrice style: top: 32% left: 40%
Notare come l'elemento si sovrappone all'immagine principale, ovvero la planimetria. 2. Picture Elements con due elementi:
type: picture-elements image: 'https://demo.home-assistant.io/stub_config/floorplan.png' elements: - type: state-badge entity: binary_sensor.stato_asciugatrice style: top: 32% left: 40% - type: image image: /local/ndr_floorplan/blurredFloorplan.png style: top: 32% left: 40%
In questo caso, il secondo elemento (image) sovrasta il primo.
- The elements can be of various kinds. In this repo you will mainly find Images and Button Cards.
That being said, one important thing to know is that the images we will create for our floorplan will have specific dimensions for the device you will use to view this dashboard. For this reason, this method has no chance of being scalable for different resolutions.
The images you will find in this repo have been created for a resolution of 2388×1668 pixels (iPad Pro 11")
For the creation of the necessary images, two software are required:
- SweetHome3d (or similar); 2. Photoshop (or similar, e.g. Gimp);
The creation of your own floor plan is a more or less lengthy process. The time it will take depends mainly on the level of detail you want to achieve in representing your home.
On the official website, in addition to the free software download, you will also find a list of Models and Textures (also free) that you will need to 'decorate' your floor plan. There are many others available online, both free and paid, just search for them.
Specific instructions for using this software will not be covered in this repo, so I recommend doing a simple web search.
Once the floor plan is completed with the desired level of detail, you can proceed to create the images.
Attention: in addition to the floor plan, it is necessary to insert the light points that you want to display on our Dashboard. The light points can be models, in case you also want to show the object (lamp, spotlight, etc.), or sources of
Tipi di luce
The completed floor plan will be similar to the following:
Now, the fundamental point: creating the images that we will use in our Floorplan. To do this, you will need to "position" yourself at a point as central as possible within your floor plan. To do this, use the "3D View --> Virtual View" menu, or simply Ctrl+Shift+D (Windows) / Shift+Cmd+D (Mac OS).
