Creating a floorplan for, well, Floorplan (Home Assistant) using Sketchup

Standard

Floorplan has a great guide to get started and add it into an existing HA installation. The part I struggled with the most was how to actually create my floorplan graphic.

The HA community suggests using Inkscape to create an SVG for this purpose, which is great and is very useful for adding entities, but doesn’t seem to be very easy to actually create the floorplan itself.

Background:

I’ve been playing with the Sketchup application for a few months now. Mainly to design plans for woodworking projects that I want to build. During this learning process, I ended up jumping down a rabbit hole and designed a layout of the bottom level of my house.

With all of the work I put into this design, I thought it would be great if I could take that image, convert it to SVG and use it as my floorplan in Home Assistant. Unfortunately, Sketchup does not have a way to export to SVG.

Solution:

There are a multitude of ways to go about creating floorplans, even out of Sketchup. For the purposes of this post I will focus on what I find to be the fastest and easiest method. The resulting SVG size will depend on the size image you embed, but I went from about 18KB with a very bad wireframe wit no color to about 800KB with several icons and the background image. YMMV.

  1. Create a floorplan in Sketchup.
  2. Export your floorplan as a PNG file and save it somewhere you will remember.
  3. (Optional) – Open the image in an editor such as The GIMP to remove the background and crop the image.This also cuts down on size of the final SVG (I went from 1.4MB down to ~700k)
  4. Open Inkscape
  5. Go to the document properties
    1. Set Display Units and Size Units to Px
    2. Set the Width and Height as desired (for me, I’m using 1024×600 – the resolution of a 7″ Fire Tablet)
    3. Ensure Scale = 1
  6. Create a new layer on your project. Let’s call it “Background”.
  7. Browse to the file location of your exported floorplan PNG
  8. Drag and drop the PNG into Inkscape.
  9. Review and modify the default import settings to your liking (or accept the defaults), and you will now have an image layer in your SVG!
  10. Drag the image around to position it as you prefer
  11. Create a second layer for your actual entities
  12. From here, you can take any SVG icon (or make your own), and import them into this design using the same method as the PNG import. A great resource for SVG icons is The Noun Project.
  13. To wire up an entity to an element on the image,
    1. Select the object
    2. Open Object properties
    3. Set the ID to your entity_id (e.g. sensor.light) This must match the entity_id in HA.
    4. I typically set the Label to match the ID, as it makes it easier to track down objects in the list later.
    5. Click ‘Set’. Don’t forget to do this! It will cause much pain during troubleshooting 🙂

At this point, you’re ready to upload your SVG to Home Assistant! If you haven’t done so already, be sure you’ve completely followed the Floorplan Installation Instructions.

 

Leave a Reply

Your email address will not be published. Required fields are marked *