Install HA: Getting Started - Home Assistant
Use MQTT to link with HA: [TUTORIAL] Setting up MQTT on Homey for configuring Home Assistant for dashboard purposes
Start walking first and go running after this, learn the basics start with building a simple example dashboard, learn how the different cards work, Lovelace, get familiar with basic yaml editing, because you will need that believe me!
After this make a basic picture elements example, have a look at this for instance: https://www.juanmtech.com/set-up-the-picture-elements-card-in-home-assistant/ , read, play, investigate, build… curse and start over, believe me I’m already in version 6 now
So after this, and you know the basics, you can use probably something like this flow;
Step 1: Preparations
- Make a plan what you want to do with the floorplan, managing lights, music, sensors…
- On what device are you going to use, view the floorplan, phone, tablet, monitor, TV, Nest hub…
- What’s the purpose of the floorplan, view, monitor, or mange as a switchboard for instance
– lights, media, sensors, camara’s…
– Get a list of all the entities you are going to use in the floorplan, you need this later…
- Do you have a plan of the house, rooms, the measurements, furniture measurements…, so how detailed you want to go, you will need this information to build the plan itself…
- …
Step 2: The floorplan itself…
- Start building, designing the floorplan itself: 2D, 3D the whole house, separate parts, rooms…
– For this you can use a tool like: http://www.sweethome3d.com/
– Here you can find a tutorial to help you start with this: https://www.youtube.com/playlist?list=PLqazFFzUAPc6vIE_JM3Ysis39MrANKxx_
– Prepare all the images you need, different rooms, and of course the lights, you can do this in Home Sweet 3D self, or use a tool like Pixelmator, Photoshop, Gimp… simple example here: Creating an Interactive 3D Floorplan in Home Assistant - Automate The Things
Step 3: Put the floorplan in lovelace…
Step 4: The config of @lukevink GitHub - lukevink/hass-config-lajv: Home Assistant Configuration
- I never have seen a more detailed config as this one, but still if your all new to this, it’s still quite overwhelming believe me it was for me so go true this part by part and try to rebuild the config from luke first, all the images are in his config, just replace the entities with yours and see of you get this working, no it will not be only copy and paste
- Start with installing the custom cards, integrations for this to work, you can use Hacs for most of these: https://hacs.xyz/
The list is probably not complete, but out of my head;
After this and you get the hang of it, start a new dashboard and start creating your dream dashboard
Optional: you can also have a look at this option: https://github.com/bradcrc/color-lite-card here you use a custom card to get more or less the same, I prefer the solution of @lukevink but depending on what you want it can also be an option for you?
The developer also created a very simple tool to get the coordinates of elements you want to put in your floor plan, believe me it makes it a lot faster than fiddling with the code yourself
I know this is probably not what you wanted to hear, but I’m afraid it will not be plug and play, more pray in the beginning to be honest
So believe me it takes some time, effort to get to this result, but the feeling when you get this done, is so overwhelming and satisfying that it was worth the time you put in to this, also when your wife, loved ones say OK I have to say this is quite nice and handy I can see me using this will make your whole day
Good luck, and off course share your ideas, results back here always fun, educational so see what other people have designed!