How to start

[perlchamp]

Hello,
it's terrible. I would like to use the ha-floorplan-card in HA, but I'm not getting anywhere. The documentation is two years old and the directories are no longer correct! There is no introductory tutorial. The pointless cross reading is also annoying.
What have I done so far:

1. Created the directory www/community/ha-floorplan/home in HA using Studio Code Server.

2. I have the files in this directory

• home.svg
• home.css
• home.yaml
• light_off.svg
• light_on.svg
• simulation.yaml
  which I copied from here (https://github.com/ExperienceLovelace/ha-floorplan/tree/master/docs/_docs/floorplan/examples/home).

3. Open the home.css file in HA->Studio Code Server and comment on the incorrect entries

/*
svg * {
  /*
  vector-effect: non-scaling-stroke !important;
  */
}
*/

and

/*
.light-on * {
  / * Nothing to do * /
}
*/

4. Open the home.yaml file in HA->Studio Code Server and correct the incorrect directory entries

config:
  image: /local/community/ha-floorplan/home/home.svg
  stylesheet: /local/community/ha-floorplan/home/home.css

and for the light pictures:

service_data:
  image: /local/community/ha-floorplan/home/light_${entity.state}.svg

5. In HA->Settings->Dashboard->+Add Dashboard->Default Dashboard->Title: Flooplan->create->Opened Flooplan Dashboard-> clicked on the pencil icon at the top right->Popup: at the top right clicked on the 3 dot symbol->take control->start with an empty dashboard->take control.

6. clicked on the 3-dot symbol at the top right -> raw configuration editor -> deleted existing content, inserted the following content and then saved:

views:
  - title: Home
type: 'custom:floorplan-card'
config: /local/community/ha-floorplan/home/home.yaml

8. HomeAssistant restarted
9. The newly created dashboard 'Floorplan' is opened -> everything is black except for the header

WHAT am I doing wrong?
Can someone give me a tip and/or point me in the right direction?

Thank you very much in advance!

So long
Pc

[exetico]

Hi,

The documentation is two years old and the directories are no longer correct! There is no introductory tutorial. The pointless cross reading is also annoying.

What's not correct? I'm working for free, so if you've spotted a error, feel free to point me in the right direction.

There is no introductory tutorial

There's videos at the top, including a link to a introduction.

Have you checked them?

https://www.youtube.com/watch?v=5ue9J4WG2a8&list=PL5xKVw-BInX1phV-Tnjznwd2YG5mEOvWL

5. Open the home.css file in HA->Studio Code Server and comment on the incorrect entries

I'm not sure what you're pointing at. It's just a example.

If you're struggling with the example you've picket, try and give this a try:

https://github.com/exetico/Home-Assistant_Attachments-for-YouTube/tree/main

WHAT am I doing wrong? Can someone give me a tip and/or point me in the right direction?

You've done a great job writing every detail, but I find it how to break down each step, and spot the actual mistake.

Once you've tried to follow the videos, let me know what you're still facing problems with. Let me know where you think the guide breaks apart, of where you've facing issues.

The get started video are a bit more simple, than the example you find in the docs.

The pointless cross reading is also annoying.

What's pointless?

[OzGav]

There is a decent learning curve when using floorplan but Tobias’s videos are an excellent introduction. Everything you have indicated above that is incorrect is actually correct.

1. The folder you have created in not in the usual place. You have created that under the folder used by HACS for the floorplan component. If you look at all the examples you will see they are under local/floorplan
2. Don’t copy simulation.yaml as that is used by the documentation webpage
3. This is actually correct
4. This is correct if you place the files in the usual location

.6. yaml can be a pain. The indentation is wrong here. This is an example

[perlchamp]

Hi,

What's not correct? I'm working for free, so if you've spotted a error, feel free to point me in the right direction.

How said: in the example-files there are wrong directory-links, the parameter or method 'vector-effect' in the css-file is not css-validated, and so on.

I'm not sure what you're pointing at. It's just a example.

Examples per se should work, but they don't (work for me)

There's videos at the top, including a link to a introduction. Have you checked them?

Of course. There par example the installtion-routine of the ha-floorplan-card is old. Actually this way works:
installation:
1. Make sure HACS is installed
2. HA → HACS
3. Enter 'floor' in the search mask and select 'ha-floorplan' from the results
4. Download → Version 1.0.47 → Installation directory (default): config/www/community/ha-floorplan → Download → reload
5. Restart HA
Directories:
After installation, the following folders and files were created:
config/www/community/ha-floorplan/
• floorplan-examples.js
• floorplan-examples.js.gz
• floorplan.js
• floorplan.js.gz
The HA Floorplan JavaScript module was also integrated into HA as the resource /hacsfiles/ha-floorplan/floorplan.js?hacstag=1883234941047.
To check: HA → Settings → Dashboards → click on the ... symbol in the header bar at the top right and select resources
The installation is now successfully completed...
Configuration:
... there i struggle and stuck

If you're struggling with the example you've picket, try and give this a try:

Yes, of course. The documentation is the same, so...

What's pointless?

FOR ME it's pointless, because it confused me more than it helped me.
Your answer also does NOT offer a solution, but points to the videos, which is why I'm confused. Everything is no longer current, or many things are taken for granted that a beginner cannot know, imo.

And please don't forget: your project is great !

So long
Pc

[OzGav]

In my experience just because studio code complains that something isn’t right doesn’t mean there is an actual problem. We use the code in the repo everyday so we are pretty sure there are no problems with it. The HACS installation instructions do need updating so thanks for pointing that out.

[perlchamp]

In my experience just because studio code complains that something isn’t right doesn’t mean there is an actual problem [...].

OK. As beginner i'm not well experienced, and i will trust you, thanks.

[perlchamp]

@OzGav :
Thanks for your answer.

The folder you have created in not in the usual place. You have created that under the folder used by HACS for the floorplan component. If you look at all the examples you will see they are under local/floorplan

WHAT then is the usual place? If installed by using HACS, the default-directory is: /local/community/ha-floorplan/ !
Why the examples are fare away from this and WHERE to get this informations ?
It's confusing, isn't it?

Thanks for the example. I will try this. Thanks

So long
Pc

[OzGav]

I can see it is confusing for you.

Just like all components in HA there is the location for the component (for HACS components they will be in local/community) and then there is the location of the files that use those components which can be placed anywhere but in the examples they are in local/floorplan and then various folders under that depending on which example you are looking at.

[perlchamp]

BUT WHAT i did wrong by adjusting the hrefs in the files to 'my', the wrong directory? Shouldn't i see at least the picture of the floorplan in the dashboard? All the links pointed to this (mine wrong?) directory - and how you said: [...]which can be placed anywhere[...] - yes that's confusing...
Is then a js-file missing or what went wrong ? Why the floorplan isn't displayed by my way?

[perlchamp]

But don't let us waste time.
WHAT is the next step(s), after ha-floorplan is installed by HACS ?
Please complete my documentation (which I will then make available. This does not end with the next steps ;-) Inkscape also has a new version - 1.4 - so the videos in this regard are also out of date). Everything looks a little different. This is not helpful especially for me as a beginner...

[OzGav]

The main problem is your indentation is wrong.

[perlchamp]

6. yaml can be a pain. The indentation is wrong here. This is an example

The pain is (as a BEGINNER), that i not exactly know, WHERE to put this code. Should i click on the three-dot-sign top right via the raw-editor in the dashboard. THAT are the things, the beginner waiting for. For me as a beginner, these information are specialist knowledge.

[perlchamp]

The main problem is your indentation is wrong.

THANKS! How are you supposed to know this as a beginner? The structure per se in .yaml files is still a mystery to me...

[OzGav]

ha-floorplan is an advanced component. It assumes the basic knowledge of yaml and how to create a HA dashboard

https://www.home-assistant.io/docs/configuration/yaml/

https://www.google.com/search?q=yaml+home+assistant+dashboard

[perlchamp]

another pain:
i wanted to use your config-code, but it is a picture! Nothing to copy... (it's like the documetation: confusing and why as picture?)

[OzGav]

Please don’t start making random complaints. You can type. I am doing this in my spare time from an iPad.

[perlchamp]

OK, sorry for that !

What i've done:

Create the right directory, did adjust the hrefs ...

this is the - i would say - dashboard-yaml-content ...
[EDIT]
i did change 'card:' to 'cards:'
But still black screen, Header is visible.
[/edit]

Question:
what have i to write in the configuration.yaml

Thanks in advance!

[OzGav]

You have created the dashboard as a yaml so you need to read this https://community.home-assistant.io/t/how-can-i-manage-the-dashboards-using-yaml-files/538385

However you will probably find it easier for a start to do this https://www.home-assistant.io/dashboards/dashboards/#creating-a-new-dashboard

[perlchamp]

i watched this video...
it was not really helpful for me, but thanks for your time and for your support...

creating a new dashboard and then using the picture card ?

so long
Pc

[OzGav]

New empty dashboard

The video is useful to show how to create your images but it then uses picture-elements not ha-floorplan

[perlchamp]

OK, thank you !
THIS is the target - for your information.

I stop this conversation yet. It's not helpfull. Sorry, that i wasted your time and thanks, again, for your support.
No step forward since a couple of hours, no progress despite having support from two very experienced users, thanks!
New dashboard AND THEN?
'ha-floorplan' is not available when I want to add a new card. So the way is probably via yaml, isn't it?
I'm not interested in how to take pictures, I just want the example to work first!
I'm no further ahead in this regard.
Confusing? YES VERY !

So long
Pc

[perlchamp]

at least (this is the end):

New empty dashboard

imo that's totally wrong, because then the dashboard is configured as grid. NO panel, NO sidebar, NO website, NO nothing is available. Trying to change that causes an error (you can't change the type... -> create new dashboard)... how said: the ha-floorplan-card isn't available per se, so you have to take the button (at the bottom) 'manually' and there you have to put yaml-code, right?
Is this a test, if i've read the documents and sawn the videos, isn't it?
The code i did put in, didn't work. But i told you a COUPLE of hours.
We go around in circles without a solution (THIS represents how the documentation is)...

I wish everyone a blessed and relaxing holiday, a happy new year in 2025 and good health!

So long
Pc

[OzGav]

You just need to do what you showed in home.yaml here #493 (reply in thread)

If you put that code in the empty dashboard by editing the dashboard using the raw configuration editor it should start to work. You will still have errors as you haven’t defined the rules section yet and you will need to add the style sheet section. See my example further up.