I’m not a fan of scenes overall and honestly when I was looking at the docs for Template Switches I got super confused so I figure I’ll just keep my automations for the time being since they seem to work
So replace local with www 
Finally found it - managed to mix up a dash with an underscore in my path. Was difficult to spot.
Works great now!
Lars
2 Likes
Is there a way of interactively selecting one group of sensors or selecting a combination of grouped sensors to be displayed on the floor plan, e.g. only displaying alarm sensors and excluding lights, temperature and humidity information from the floor plan or interactively selecting combinations thereof by possibly choosing sensor groups through selecting or choosing tick boxes or enabling group switches. This is due to the floor plan appearing cluttered with too much information when all information is displayed.
You could probably do it with CSS. By hiding and exposing various SVG elements.
For those of you who are using actions to trigger services when your entities are clicked, this functionality has been enhanced considerably.
Up until now, you could only define which service gets called as part of the action (i.e. call the ‘toggle’ service).
With the new functionality, you can specify the domain and data as well. Basically, you have full control over how the service is called. Below is an example showing how you can even use data_template to dynamically evaluate the data to include when calling the service.
action:
domain: light
service: turn_on
data_template: '
{
"entity_id": "light.some_other_light",
"brightness": ${Math.min(entities["zone.home"].attributes.radius, 50)}
}
'
There is now a Triggering actions section in the appendix dedicated to this, so have a read of that doco if you need this functionality.
4 Likes
Just starting also and this is a really long thread, maybe I have missed it.
Tried setting up as a custom panel and then as a state card and couldn’t get either to work.
I am not getting any errors in the log or anything the panel simply spins like something is loading but nothing ever loads.
Tried Firefox and Chrome both. Tried clearing cache.
Thought I saw somewhere people who are set up with Let’sEncrypt SSL/https having issues?
Not sure what I am doing wrong.
Also i am on version .45 but didnt think that would matter
Hi @jnvd3b. Have you looked at the troubleshooting steps on the GitHub doco? If that doesn’t help, can you send me your config via PM and I will have a look.
Another update from today. The newest version no longer references external JavaScript libraries, as some people were encountering issues with their ad-blocking software blocking these external libraries (i.e jQuery).
The floorplan code now references local copies of these libraries, from the newly-created lib subdirectory:
ha-floorplan/www/custom_ui/floorplan/ha-floorplan.html
<script src="lib/jquery-3.2.1.min.js"></script>
<script src="lib//moment.min.js"></script>
<script src="lib/svg-pan-zoom.min.js"></script>
Make sure to create the lib subdirectory in your installation and copy across these libraries:
End result is that the floorplan no longer depends on any external files, so it can run even without an internet connection. It also means it now loads up a little faster too.
5 Likes
AWESOME! THANK YOU THANK YOU THANK YOU.
I was just about to write a post about this feature and if you would consider adding it!
~Cheers
1 Like
Awesome! The ability to run completely fine without internet dependence is the major reason why I chose Home-Assistant. Thank you very much!
2 Likes
@pkozul: Thanks so much for creating this. It is absolutely amazing and I’m loving it so far!!
I’ve heavily customized my floorplan and added a lot of text literals to show the status of my home, what’s playing on Spotify, and what the weather is. I’d like the customize the weather display by showing a little icon of the current weather state. I’m currently pulling in Dark Sky’s “icon” state that gives me a text representation of the weather. I’d like to sub out that text with an actual icon.
Dark Sky has created the “skycons” library, which is a JS library with animated icons. It requires a canvas element in the document which is replaced with the skycon via JS (https://github.com/darkskyapp/skycons). I was able to modify the floorplan HTML to insert a canvas element for the “sensor.dark_sky_icon” element in my SVG easily enough. I also use floorplan to set the class of the text element to the current weather and then I was planning on pulling that out in JS. However, since floorplan doesn’t ever seen to fully load (from a JS perspective), I can’t get the “getElementByID” function to work so I can replace my canvas with the icon. Any ideas on how I can make this work?
Thanks!!
Hi @kevinfcook. Great to heat that you’re making good use of the floorplan. Can you post a screenshot here of your floorplan?
You have a nice idea there. I’ll have a think about how to best implement this, as it does seem like something that could be used more broadly.
It’s always a challenge trying to keep the floorplan concept simple, but at the same time, make it more and more powerful.
I’ll have a look at Dark Dky myself and let you know what I come up with.
Cheers.
2 Likes
@pkozul, sure! Here it is.
It definitely isn’t done. Some notes:
- Home/away will be correct once I get tracking on iOS all set up correctly
- Raleigh (city I live in) weather is all pulled from Dark Sky. The weather icon would go to the right of the outdoor temperature (94 in the screenshot).
- I’m planning on creating several home modes (home, away, vacation, guest). Those modes will govern which scripts will run at any given time
*Now Playing: Pulls from Spotify if there is something playing (I made a custom package that pulls from’states.media_player.spotify.attributes’ - Bar at the bottom is going to display something…haven’t figured out what just yet
- Buttons on the right trigger scenes or scripts. I still need to decide which ones I want on which buttons and then label them.
- Lights and lamps turn yellow when they’re on. Fans turn blue.
- I also need to add in the name of each room into the floorplan. My plan is to make the name of the room clickable and when clicked, all of the lights in the room will toggle (using a group).
Credit where credit is due - I totally copied the ideas for a lot of this design from a post from @CCOSTAN
If you don’t mind, definitely take a look at Dark Sky and Skycons. They’re animated and they’re drawn in JS so you don’t have to mess with icon files!
Thanks again for looking into this and taking the time to develop this whole project!
8 Likes
I’d love to see you work out how to get that ride side Button row as a Fly IN! 
Nice work…glad my base helped out. Be sure to keep me in the loop for any great enhancements you put together!
3 Likes
Ha actually, I’ve been thinking about that. Is there a way to dynamically choose the SVG file that’s used? While it wouldn’t be a true fly in/out, we could just put an arrow on one SVG (that has no buttons) and when you click it, it switches to another SVG that has the buttons.
I’m already working on a “light/dark skin” button. When I click it, it’s going to change the CSS that controls the background and all of the colors. I’ll post the result once I finish it up.
1 Like
Please do… I’m already stealing back the High Low temps… that’s a nice idea.
@kevinfcook Good news. Looks like this just may work
This is still ‘work in progress’, but the heavy lifting is done. As software developers love to say, ‘but it works on my machine’. Hopefully it will work on all devices, browsers, etc.
I’ve got the Skycons loading dynamically. Was a bit of a challenge getting them to fit exactly within the bounds of the SVG elements they’re bound to. Whenever the browser window is resized, the Skycons resize too, and always stretch to fill the entire space taken up by the SVG elements they are bound to.
Just for testing, I bound a Skycon to the SVG shape representing my theatre room. You can see it below. Although you can’t see it in the image, the animation works fine, and there are rain drops falling from the cloud. Hover-over text works, and clicking the Skycon works too (i.e. it can trigger an action, or display the ‘more info’ popup).
Next step is to tie this in with the floorplan config, and decide on a nice and simple way to get this working.
Just gotta read up on how Dark Sky works in HA. Stay tuned…
BTW, although this feature is about Skycons, I’m trying to tackle it as broadly as possible. It may pave the way to something that was raised earlier on in this thread - the ability to dynamically inject standard images/icons from a common HA Floorplan library. That way, HA users wouldn’t need to design or source their own images, but instead, they could simply add some placeholders in the SVG, and then at runtime, the floorplan could load the ‘real’ images from a common library and display them instead. Imagine a standard set of icons for lights, sensors, doors, covers, cameras, etc. That would also mean images could be swapped out for another image, when the state of an entity changes. Anyway, we’ll see how this goes…
8 Likes
Would it be possible or even worthwhile to create multiple SVGs to fit different format screens?
In the sidebar:
Floorplan #1 (monitor)
Floorplan #2 (tablet)
Floorplan #3 (cell)
That way they are customized depending on the device you are using?
@CCOSTAN and I were actually discussing this recently. Basically it came down to creating a separate SVG file for each device, exactly as you have suggested (3 form factors). Based on the available screen size, the floorplan would then display the appropriate SVG.
Will look into that as an option. Good thing is that the config wouldn’t change at all. It’s purely a matter of different layouts, and level of detail.
3 Likes