sure, this is the gig here
https://www.fiverr.com/lupascuionut24/convert-your-image-sketch-to-vector?funnel=8ad4fdbf-4c52-4958-8a1b-286fa31ecaa0
1 Like
How did you guys come up with your sketches in the first place? I don’t think I have any floor plans or measured drawings - I inherited this house from my Parents when they passed and I’m not sure if they have anything like that. (Odd cause my Dad was the ultimate DIY guy.)
In my old house (long story) I still had the real estate tear sheet with the floorplan on it.
Use MagicPlan. Super easy to generate a very accurate floorplan with your phone.
2 Likes
thats were i got mine, from the estate agent when I purchased my house last year. You could just sketch something on paper, scan it and send it to the vector artist.
1 Like
I’ve been following this thread for the past few days and thought i’d share my progress. My floorplan is only controlling lights at the moment, set up in groups as “zones”. In order to achieve this i had to add the group domain under getTargetEntities in floorplan.html. In order to have the floorplan update in real time I changed the scan interval in my config.
I modeled my apartment in 3D on Solidworks then exported an isometric view as a .dxf, then imported into inkscape which maintained all the lines as paths (very handy) then edited ids etc.
I plan on eventually adding 3d models of all my individual lights and devices to give the ability of monitoring and controlling them independently. Would be great to have the ability to customize groups and how they behave for this.
Thanks for all the inspiration!
11 Likes
Great idea. Thanks for sharing.
Just a heads up. There is a small update on GitHub with slight improvements to the current version:
- SVG file no longer being cached in the browser
- Password no longer required in the config (it now uses HA’s locally stored password in the browser)
New version will be ready in the next day or two, so stay tuned…
I too did the floorplan in Inkscape and saved as floorplan.svg but in the browser none of the patterns loads, I sort of have an idea what happened, I have linked the images rather than embed into SVG which may have caused this. Will try to modify the SVG later. I have other issues to solve:confused:
Half the floorplan is not visible in the page, I tried
svg.style.position = 'absolute';
which did not help, I am waiting for the new version though.
This is how it is loading now
This is what I drawn.
Anil
For me I had image cache issues in Chrome and would have to clear after each modification to the floorplan, html, etc.
Corey, with the latest change from today, is there still an issue with the SVG being cached?
I will update and check. I was literally just checking to see if you had updated anything 
I took measurements and used an online editor to create the background image, https://home.by.me/en/
1 Like
Well… I updated both the statecard and the floorplan.html files AND commented out my password in customization
Now neither load and I get this error in dev tools.
Oops… I included a config setting from the new version.
Now fixed. Please grab the latest again.
Okay, I tried the latest code. For the state-card, it works but still requires a password in customize or else there are errors.
I have lost the custom panel altogether. I tried both with and without the password in configuration and have cleared all browser history. I updated floorplan.html and also re-inserted the code from your previous post.
The new version is now available at this new GitHub repo:
https://github.com/pkozul/ha-floorplan
I will update the first post to mention this as well.
Still working on the doco, but you can actually start using the new version now. The GitHub repo contains all the files necessary to get it up and running. Below is a list of files in the repo. Just keep in mind that they are relative to your HA directory:
Core files
www/custom_ui/floorplan/ha-floorplan.html
www/custom_ui/floorplan/floorplan.svg
www/custom_ui/floorplan/floorplan.css
Use it as a state card
www/custom_ui/state-card-floorplan.html
customize.yaml
Use it as a custom panel
panels/floorplan.html
configuration.yaml
As you will see in the configuration (configuration.yaml or customize.yaml), this new version uses CSS classes to change the appearance of your entities. It’s much more flexible that way, and means you can evolve the CSS over time to suit your needs, without having to modify HA config and restart the service. Refreshing your browser will show the latest changes you make to your CSS classes.
One other cool feature is the use of templates in the config. You can use JavaScript template literals (expressions and functions) to determine the right value to display, or CSS class to use, based on the entity’s state, etc.
A good example of this is:
- name: Sensors
entities:
- sensor.melbourne_now
text_template: '${entity.state ? entity.state : "unknown"}'
class_template: '
var temp = parseFloat(entity.state.replace("°", ""));
if (temp < 10)
return "temp_low";
else if (temp < 30)
return "temp_medium";
else
return "temp_high";
'
This is an example of a temperature sensor. The code will look for a matching <text> element within the SVG, and assign the temperature sensor’s value to that SVG element. As you can see above, the class_template is defined as an expression that returns the entity’s state, if it exists, otherwise it returns ‘unknown’. The returned value is displayed in the SVG <text> element.
As for the CSS class, you can see the class_template defined as a function that contains several lines of code. It strips out the degrees (°) symbol from the temperature value, and then returns a CSS class based on whether the temperature is low, medium, or high. The end result is that the temperature is displayed in the right colour on the floorplan.
That’s just a quick example of what the new version can do. Have a look at the config to see some other examples. Hopefully it will be clear enough to get you on track.
4 Likes
@CCOSTAN That’s some really cool software; thanks for the heads up! I’m going to look into this further.
Thanks everyone for the suggestions. Going to dig around a bit more and see if I can find some floorplans in old documents since I am doing some Spring cleaning anyway.
1 Like
Sorry for the big delay States are “motion detected” “sleep” and “idle”
But adding different states will be awesome
Update: Which looks like you just added with templates! Great work
1 Like
Yep, the new version is agnostic to explicit states. It relies on you to specify which states you’re interested in, and how they should be displayed. The actual code no longer has any knowledge of any particular states. All driven via config now.
2 Likes