"To get started, copy the following files from this repo to your Home Assistant directory:
www/custom_ui/floorplan/ha-floorplan.html
www/custom_ui/floorplan/floorplan.svg
www/custom_ui/floorplan/floorplan.css
www/custom_ui/floorplan/lib/jquery-3.2.1.min.js
www/custom_ui/floorplan/lib/moment.min.js
www/custom_ui/floorplan/lib/svg-pan-zoom.min.js"
These instructions are unclear. Do we need to retain this directory structure, or just copy the files shown into one destination directory?
Definitely maintain the directory structure. It will not work if you don’t.
Hi There,
Quite new to home assistant, been trying for a couple of days to get floor plan working with no joy.
my config is as follows
in configuration.yaml
panel_custom:
- name: floorplan
sidebar_title: Floorplan
sidebar_icon: mdi:home
url_path: floorplan
config: !include floorplan.yaml
in panels/floorplan.html I changed the path of
<link rel="import" href="/config/www/custom_ui/floorplan/ha-floorplan.html" async>
to reflect the path used in my docker container
I have copied the files (keeping directory structure)
www/custom_ui/floorplan/ha-floorplan.html
www/custom_ui/floorplan/floorplan.svg
www/custom_ui/floorplan/floorplan.css
www/custom_ui/floorplan/lib/jquery-3.2.1.min.js
www/custom_ui/floorplan/lib/moment.min.js
www/custom_ui/floorplan/lib/svg-pan-zoom.min.js
my floorplan.yaml
name: Test Floorplan
image: /config/www/custom_ui/floorplan/floorplan.svg
stylesheet: /config/www/custom_ui/floorplan/floorplan.css
# These options are optional
warnings: # enable warnings (to find out why things might ot be working correctly)
# pan_zoom: # enable experimental panning / zooming
hide_app_toolbar: # hide the application toolbar (when used as a custom panel)
date_format: DD-MMM-YYYY # Date format to use in hover-over text
groups:
- name: Lights
entities:
- light.Kitchen_Main
- light.Kitchen_Cooking
states:
- state: 'on'
class: 'light-on'
- state: 'off'
class: 'light-off'
action:
domain: light
service: toggle
Can anyone help?
Thanks
I would say the issue is with the “at HTMLElement._initializeProperties” in the HTML you edited, the out-of-the-box files and instructions work fine.
All Floorplan experts! - I have seen some seriously cool floorplans, and I am trying to build my own, but starting at the basics with lights; done, but now,… scenes!
I am trying to activate a scene from my FloorPlan and was wondering if anyone can help please?
This is what I have:
In the floorplan.SVG, test square for testing with ID=scene.tv_time
In my floorplan.yaml file I have this:
- name: Scenes
entities:
- scene.tv_time
action:
service: scene.turn_on
entity_id: scene.tv_time
I know that the scenes work, and I can run them from the main ‘Overview’ screen, but I cannot for the life of me get it to activate via FloorPlan.
When I click on the test rectangle on the floorplan I get a message pop up saying “Service scene/scene.turn_on called” but nothing happens.
Anyone got Scenes working by clicking on the floorpan?
@Creagan Thanks for the reply but I don’t think so I have tried it with the file back in its original state and no luck.
GET http://192.168.13.1:8123/local/www/custom_ui/floorplan/ha-floorplan.html 404 (Not Found)
I changed that path as that is the main difference between the hassio version and regular home assistant
hassio is /local/www/custom_ui
home assistant is /config/www/custom_ui
I have checked in the unraid docker and /local/www does not exist
I use Unraid as well. This is what I have in the panels file:
<link rel="import" href="/local/custom_ui/floorplan/ha-floorplan.html" async>
@shire210 What dir do you have mapped in to docker config for HA?
I have /mnt/user/appdata/home-assistant -> /config
You seem to be mixing up filesystem and url paths. The filesystem path of /config/www is equivalent to the url path of http://hass/local.
If you place your floorplan files at \config\www\custom_ui\floorplan, then you would set your floorplan,.yaml to:
name: Test Floorplan
image: /local/custom_ui/floorplan/floorplan.svg
stylesheet: /local/custom_ui/floorplan/floorplan.css
@NotoriousBDG spot on thank you!! that fixed it. Now I can start putting my actual floorplan in
Thanks all for the help!
Just clarifying for anyone else hung up on their text not displaying:
Using Inkscape to modify your floorplan.svg file:
To write text into your diagram and make it static (for a label): Yes, convert the Object (text data) into Path data (vector image)
To get your text to display/update dynamically from a sensor (for a sensor readout): Copy the text object from the example svg file and paste it into your svg file. I’m not sure what setting carries over during that process.
Also make sure that any object or path you would like as text is also on the top layer. Layer > Layer to Top
Another snag I ran into (unrelated to the above…):
Just in case anybody else is getting Expected <block end>, but found ‘<block mapping start>’ in their log file after enabling the warnings: option (in \HASSIO\config\floorplan.yaml).
Indenting everything in floorplan.yaml fixed that error.
Update (also unrelated to the above…):
If anybody is wondering how to convert a BRUH Multisensor into a binary sensor for use with template_last_motion, add these lines to your setup:
# binary_sensor (This is required for "template_last_motion" to work for some reason)
# https://home-assistant.io/docs/z-wave/entities/#binary-sensor
binary_sensor:
- platform: template
sensors:
sn1_pir:
value_template: >-
{%- if is_state('sensor.sn1_pir', "motion detected") -%}
true
{%- else -%}
false
{%- endif -%}
sn2_pir:
value_template: >-
{%- if is_state('sensor.sn2_pir', "motion detected") -%}
true
{%- else -%}
false
{%- endif -%}
Hello, I am new here. Recently, I have been trying to deal with the floorplan. Unfortunately, I can not cope with switching on the light. As you can see in the film, when I click the mouse on the bulb, an additional window appears, where you can additionally turn on the light.
The question is, what and in which file should I add, so that immediately after pressing on the bulb, the light will light without this additional window.
I believe you need to add the service toggle. Here is an example of what mine looks like, one click turns it on a another click turns it off.
- name: Lights
entities:
- switch.andrews_bedroom_switch
- switch.arellys_room_light_switch
- switch.dining_room_switch
- light.master_bedroom_Level
- switch.small_hallway_switch
- switch.entrance_light_switch
- light.andrews_closet
- light.livingroom_dimmer_level
- switch.livingroom_fan_switch
states:
- state: 'on'
class: 'light-on'
- state: 'off'
class: 'light-off'
action:
domain: homeassistant
service: togglewhat do you use for CSS to change the highlighting - interested in moving from 2D to 3D
nice job btw!
What software did you use to create the 3D image?
Hi @jaburges… The highlighted area is a SVG element that is mapped with the entity_id of each light corresponding to each area. The color is set in the css file when the state is on and off respectively.
Thanks. Do you use the free version? It doesn’t seem to export to SVG for the free one… Not gonna pay for a foorplan app obviously.
Do you guys know a good tool for some nicer looking plans? Now using Sweet Home 3D, but it doesn’t produce the best looking plans.
very nice site. But how to export in SVG?