Getting Started (1) | Add HACS & SVG-files and YAML entity mapping in Home Assistant

[exetico]

Getting Started video for ha-floorplan

Hi. Today is ... a new day for me.

Yesterday i planned and recorded a video on how to get started with ha-floorplan. It's done with Home Assistant OS, which are the easiest way to get started with Home Assistant.

https://youtu.be/5ue9J4WG2a8

I really hope that I'll find time to create more videos in the future, with more specific content - but I've received quite a few requests on how to get started with ha-floorplan, in the last couple of years.

It's my first video in English and as a "teacher", but I've executed it the best I can, during a rainy sunday.

Attachments can be found here:
https://github.com/exetico/Home-Assistant_Attachments-for-YouTube/tree/main/1_Getting-Started-with-ha-floorplan

Please hit the like-button on the video, and write a comment. Thanks! 🙏

If you have any questions related to the video, fell free to drop them in this discussion 😃.

---

Links

Share your first frustrations about ha-floorplan here: #247
Buy me a coffee ☕: https://www.buymeacoffee.com/coffeetoexetico

[OzGav]

EXCELLENT! Thanks Tobias looks great. Will be interesting to see what others say they would like to have explained. I wonder if they might ask for a simple example of how to create the initial files?

In this video you have used the Home example but you could use a simple one or two room blank plan and show how to add a single light bulb. From there you could explain when you need to use the element and entity lines in the yaml and when you only need entity. You could then show how to change the image of the bulb using image_set as you did in this one but also class_set by showing and hiding a top image and maybe even style_set.

In this way you will have shown the relationship between the SVG, YAML and CSS which I think is often misunderstood.

But again this was great and shows how to use so many parts of HA not just floorplan! Thanks again!

[exetico]

😁😁 It's just OBS.

No one else is spending their time creating the content. There's always room space to improvements no matter what, but I did take the previous feedback a little hard. That's why I replied as I did. I personally understod it more like 'Here is what I would have done cause the current solution is not that great. I could have done it better, for sure... but.... I dont really do that kind of things'.

But I've re-read the first feedback, and I'll think about everything next time 👍😁.

I also get what you mean with the element-key. But It's important for the user to understand the connection, as the first thing.

[OzGav]

Sorry Tobias if my post didn't come across well on first reading. I am glad you can now see it for what it was. I am the first one to be grateful for all the support you are providing to the project.

I've just upgraded my computer to Windows 10 so I can run OBS! I hadn't heard of it before. I will try and make a video and teach myself how to use it at the same time. No promises on a timeline!

[exetico]

I'm not sure who to blame - and that's OK 😄. Could be the time of the day, the lack of coffee, or whatever else.

Video 3 has dropped - a video with focus on CSS, and more in-dept things. I've tried to think about most of the feedback from you. I've also spend a few hours on how to create some proper zoom and focus-animations.

🎥 👉 #258

Now that english is not my first language, it's still hard to bring all facts on the table while speaking. I'm also doing this to force me into the usage of new words, but I'm not scripting anything. That's why there still a bit off room for improvements on the "endings" in each section 😄

[OzGav]

I though this one went well. Learning how to do the zoom and highlights was time well spent I think as it clearly targeted my attention to what you were trying to show and of course was easy to read even on my iPad. 👍

[exetico]

That sounds great. Thank you for the response. I found it a bit hard to select which parts required zoom or/and highlights, but i tried my best to not "abuse it", cause that would be bad, too. The good thing about uploading in 1080p is that I have a bit of "room" to zoom into the 1440p source. But I really need to separate my webcam and screen recordings - currently it's too time consuming to fixing the frame setup on every zoom (which is required with a webcam+screen recording in the same source-file). I'm not sure why I'm sharing it here... But now I've shared my most critical next-up "work-flow" improvement 🎉...

Visual example of "multi-source"

[Lynx-eyed]

Sorry for extremely dumb questuion, I dont get YAML totally, but want to build floorplan... So I tried to follow the instructions in the video exactly, except that I did not find a home-simple example in the repository. I tried home instead, then also floorplannet_home, but I get the same error after inserting the code from the YAML file into the panel code: 'n: At path: views -- Expected an array value, but received: undefined'. I tried adding views: [], then there is no error, but the panel is also empty. What am I doing wrong?

[OzGav]

The attachments related to this video are here https://github.com/exetico/Home-Assistant_Attachments-for-YouTube/tree/main/1_Getting-Started-with-ha-floorplan

[Lynx-eyed]

thank you very much! I should have read the description of the video...

[exetico]

@Lynx-eyed Or, I should have pointed that out in the video. I'll try and remember that next time 😄 !

[W1ngR1d3r]

Thanks Tobias, great work!
I'd like to show a timer to the floorplan. I was able to add it and see the remaining time the following code:
state_action:
- service: floorplan.text_set
service_data: ${entity.attributes.remaining}
but it doesn't refresh (it refresh the time on state changes - start, pause, finish - but not every second).
Do you know how I can make it to refresh the timer every second?

[OzGav]

Ok then put the plug entity in for now.

@exetico any idea why that * entity wouldn’t work. It is working for me but I am using a beta as I am working with @pkozul

[exetico]

Hi @W1ngR1d3r (and @OzGav) . I'm sorry for the late reply. For me it looks like you're expecting ha-floorplan to return the remaining secounds in the svg, while it's counting down, right? I've not used the "Timer" integration before, but if I take a look, it looks like the timer is just a calculated field, on basis of the attributes of the timer. The "count" itself, doesn't really live within your Home Assistant engine. Instead it's handled on the client side.

Here's a bite of state-card-timer.js:

https://github.com/home-assistant/frontend/blob/0b54e60b9169b63b2c3ffcc782401b15a858ac5e/src/state-summary/state-card-timer.js#L89

(check the link to see more)

That also tells us that the timer card in Home Assistant itself, uses the timerTimeRemaining from ../date/timer.

Therefore no entity-updates is done in the Home Assistant back-end nor front-end, and therefore, you're unable to use the entity by itself, to update the count-down.
I must say that I'm 90% sure that a timer-example has been brought up before, but maybe I should take that up as the next challenge for a video.

The above facts does explain why you have these kind of attributes, there the "remaining" attribute is controlling the time left in seconds.

I understand that this doesn't help you out with the needs, rather, it's hopefully help you understand what's normally going on behind the scenes in Home Assistant, in the Home Assistant source code. But if you're clever, it's totally possible to just use most of the HA source-code for this to work.

TL;DR: Timers is just rendered in the front-end. The "remaining" state is not updated, so you sadly can't expect ha-floorplan to count down for you 😄. Instead, another solution needs to be implemented, acting like Home Assistant updates the time by itself, or simply creating everything by yourself :)

I'll get back with a solution :)

In short, you'd need to "count by yourself, in a function", or, secure that the source-solution has the function build in (some custom-cards uses the "custom-card-helpers", but I'm not sure, if ha-floorplan should take this approach).

[exetico]

Okay, solution is done, but needs a few refactoring things before I'll publish it. I also need an input from @pkozul, cause my plan is, to implement a event listener i ha-floorplan, so it's possible to call ha-floorplan services within a ha-floorplan execution (to use as ha-floorplan service like "variable_set").

Branch can be found here, but I'll not recommend to switch branch for this - wait for things to get into the main one, instead.

ha-floorplan/src/components/floorplan/floorplan-element.ts

Line 282 in 7366632

document.removeEventListener('floorplanActionGateway', actionEventFunction);

YAML for the current solution can be found here - but again, wait for the ha-floorplan release. I guess case4 will be used as a video, so a few rewrites of the JS and YAML will also be done, before that.
https://pastebin.com/G9eS4bAw
(Here I'm using variables, javascript, and the "event" solution, which are not in the main branch right now)

[W1ngR1d3r]

Amazing!!!
I will wait for the new release.
Thanks!!!!!

[exetico]

Hi, I'm still waiting on feedback, before I can release the feature - but hopefully it'll be ready in a short amount of time. I'm sorry about the delay 😸.

[Adz87kc]

Hi, @exetico

I've been looking at this for a few hours this afternoon and I still can't get it to work on my HA.
The only part that didn't go as per the YouTube video was at 6:00 where you confirm floorplan.js is installed.

Instead, I clicked on: add resource -> JavaScript Module and typed in: /hacsfiles/ha-floorplan/floorplan.js

I did everything else as the video instructed. Is there anything else I can look at?

I installed via HACS, uploaded the css and SVG files using file editor into the folder described in the video. I even used the same file names as the yaml code provided incase I had a typo.

[exetico]

Hi :-) Can you find the HACS files in your config folder? Have the system been restarted here after? Have you tried www instead of hacsfiles?

What kind of errors can you see in the browser console, if you open up the browser inspect tool? :-)

I hope some of the questions can help you with the next step(s). Else, fell free to come back with more details.

[Adz87kc]

Nvm, I restarted HA and it appeared!
Now onto the rest of the video :D

Edit: additional HA restart after adding the Yaml code.

[exetico]

That's actually mentioned in the video. But that's great to hear! Happy floorplanning 😁!

[landon-hillyard]

One more thing, related to this post video, but a slightly different challenge. I made an SVG and copied some of the objects you created in your SVG file. I then uploaded my edited SVG to start working on my layout. I have attached the SVG that I have uploaded as well a screen shot of what I am seeing.

Any idea on how to get floorplan to reference my new SVG vs the original?

Is there some sort of cache I need to clear or something?

[exetico]

Hi. Yes, there is. But there's multiple ways to handle this. I'm pretty sure I've already mentioned this in on of the videos, but I'm not sure, in which of them its stuffed into.

In your case, you can just upload your new version, and change the filename.

Personally I open the full URL to my SVG file in my browser, and force reload the page (Ctrl+Shift+R). That normally works, if the caching are playing with me.

[landon-hillyard]

Ok, I think this makes sense. I have made a video to ensure the issue I am struggling with is clear. I try what you suggested and report back with the results.
https://www.youtube.com/watch?v=vW7exyDLVZA&t=2s

[sergentum]

Can't make it work. Resources contain js, but still it doesn't work.
Another js auto-entities works, btw.

[OzGav]

Can you show the screen capture where the resource is loaded

[sergentum]

I fixed the problem by updating HA os and core. I had 2023.4 and current version 2023.7 so now it started to work.

[agouveia19]

I followed everything in your video, but I get this error.. I can't for the life of me figure out what's wrong with it.. Can someone please help?

[OzGav]

home_simple.css is either missing, not at that path or there is a permission problem. Type http://<YOUR_HA_IP>:8123/local/floorplan/home_simple/home_simple.cssinto your browser address bar and see if the contents of the file appear

[agouveia19]

@OzGav I don't know what happened, but when I just started HA it is working as the video. Thank you anyway!😊

[exetico]

Maybe you forgot to restart HA, as stated in the video? 😄 But it's great that it works now 👏 !

[mesterila]

I have a small problem with loading the SVG file. Everything was done to the letter (with my own files) - and it failed to load.

Backtracing, I downloaded the example files, and uploaded/used them (including the config) - also failed to load the home.svg image.
The CSS is not empty (I used all files and config as in the example).
Checking this article - I don't see anything missing: https://www.home-assistant.io/dashboards/picture-elements/#how-to-use-the-style-object
The path to the files is correct (I use the full path /config/www/community/hafloorplan/ - and changing it produces a clear error). Notice that I removed the "-" and the extra directories to eliminate any typos or problems related to paths.

There is clearly a difference between "Raw configuration editor" > saves (no error)> loads a blank page, and "Edit in YAML" which displays a big blue logo of HA (that is not the .SVG file I try to load, nor the home.svg used in the example). I saw this behavior in another post - with screenshots, but I can't find that. Workaround was to restart the HA. I did, but without luck.

Note: Running latest HAOS 2024.2.1, on freshly deployed HA Green

The only errors I receive in console are related to the HA entities that don't exist (I didn't change any entity from the example yet).
I did this at least 15 times, cleaning everything before a fresh start - and I still can't figure out what's wrong.

Any hints? Something I should check before I go crazy?

[mesterila]

and to have the complete data, here is the YAML I used for this:

[mesterila]

And this is trying to load the image in browser:

[OzGav]

Try /local/community/ha-floorplan/home.svg

[exetico]

There's something wrong with your path. The first part would normally start with /local or /www. Never /config. Your start-up problem is related to your Home Assistant setup, and not related to ha-floorplan.

Try a few more paths, also as simple as possible. Also, I'd never recommend to use our solutions folder for your userfiles. HACS could throw that away at some point, or maybe run into problems. Make your own folder in the Home Assistant > www folder. Normally www are resolved as local in your webbrowser.

The screenshot your providing of your files does not translate directly to the HTTP resource path, as clearly stated in the video, too 😊.

Happy troubleshooting!

[mesterila]

Thank you @OzGav - that did the trick. I swear I tried this before - probalby the very first thing, otherwise I wouldn't change it to something else
@exetico - thanks for the explanation ;) I'm learning, few hours every day it's quite a challenge