I always wanted to display a floor plan, but this exceeds everything I could have expected. Brilliant stuff!
1 Like
Hi pkozul,
I work with design, UI/UX and animation. I’d be really happy to throw a concept for the floor plans! I’m thinking floor plans with sensor icons, statuses, positioning, etc.
Haven’t tried implementing your code yet but first thing that comes to my mind is that you could simplify things a lot if the svg file was only lines and that the style was applied on the front end. It could even offer a few different “themes” to choose from (2d or 3d for example)!
Great work!
4 Likes
Thanks for chiming in. All suggestions welcome. Let’s see how far we can push this thing. I am constantly looking at ways to refactor, simplify, enhance, etc.
2 Likes
Have the new version up and running and it’s working like a charm! Great work @pkozul
Here is my current floor plan
7 Likes
Thats looks great.
How did you do your SVG file eg: your lights to change from dim to bright. And the the temperature state by text.
This was really awsome and easy to use! Have made my svg-file now and am going to try the floorplan ui out tonight!
1 Like
Hi again. Just a bit of info regarding the new version.
As per the latest version on GitHub, the floorplan no longer supports specifying CSS fill colours within the HA configuration. Instead, all styling is now offloaded to the CSS file. So, if you’ve already used fill colours in your configuration, please change over to use CSS classes instead.
For example, below is the before vs. after configuration. The ‘before’ shows how fill colours were used (in the states section). The ‘after’ shows how CSS classes are used instead. Make sure to create these classes in your CSS file!!!
Before
- name: Binary sensors
entities:
- binary_sensor.kitchen
- binary_sensor.master_bedroom
states:
- state: 'off'
fill: '#C4EDB1'
- state: 'on'
fill: '#F8B9BE'
state_transitions:
- name: On to off
from_state: 'on'
to_state: 'off'
duration: 10
After
- name: Binary sensors
entities:
- binary_sensor.front_hallway
- binary_sensor.kitchen
- binary_sensor.master_bedroom
- binary_sensor.theatre_room
states:
- state: 'off'
class: 'info-light'
- state: 'on'
class: 'warning-light'
state_transitions:
- name: On to off
from_state: 'on'
to_state: 'off'
duration: 10
Just for the fun of it, I have included some standard colours / classes in the floorplan.css file (on GitHub). I created some CSS classes based on these levels:
- Success - indicates a successful or positive state
- Info - indicates a neutral informative state
- Warning - indicates a warning that might need attention
- Danger - \indicates a dangerous or potentially negative state
These colours are based on those in Bootstrap alerts:
https://www.w3schools.com/bootstrap/bootstrap_alerts.asp
So, I have changed some colours on my floorplan based on this. I only want to see red (‘danger’ colour) if there is something that really needs attention (i.e. alarm triggered, NVR machine down, etc.). My zones are now shown in the ‘info’ colour, and the active triggered zones are shown using the ‘warning’ colour. I use the ‘success’ colour to show my NVR is up and running. Anyway, just thought I’d share my colouring scheme, Would be great to share some ideas around the use of colour, or references to some good colour palettes, schemes, etc.
Below is what my floorplan looks like now.
As for the new version, I’m quite happy with where it’s at now. Because all of the styling is done via the CSS file now, you no longer need to restart HA when you make cosmetic changes to your floorplan appearance. Simply refreshing the page gets the latest CSS file.
Documentation is coming soon…
6 Likes
Text elements are supported in the new version and work just like any other SVG element.
The lightbulbs are controlled using opacity in the css file
.light_off { stroke: black; !important; opacity: 0.5; } .light_on {
}
2 Likes
Thanks i will try it later…
Is it only one text element can be displayed , I’m trying to have multiples in only one is displaying at any time.
> - name: Sensors
entities:
- sensor.bathroom_humidity
- sensor.bathroom_temperature
- sensor.BedRoom1_humidity
- sensor.bedroom1_temperature
- sensor.BedRoom2_humidity
- sensor.BedRoom2_temperature
- sensor.kitchen_humidity
- sensor.kitchen_temperature
- sensor.Garage_humidity
- sensor.Garage_temperature
- sensor.Frontporch_humidity
- sensor.Frontporch_temperature
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”;
’
No limit other than space available:
here is the end of my SVG, the text portion:
inkscape:groupmode="layer"
id="layer4"
inkscape:label="Text">
<text
xml:space="preserve"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:5.64444447px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26458332"
x="81.028648"
y="10.376628"
id="text4615"><tspan
sodipodi:role="line"
id="tspan4613"
x="81.028648"
y="10.376628"
style="stroke-width:0.26458332">Alarm </tspan></text>
<text
xml:space="preserve"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:5.37943316px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.25216091"
x="124.26535"
y="9.8894367"
id="alarm_control_panel.ha_alarm"
inkscape:label="#alarm_control_panel.ha_alarm"
transform="scale(0.95304919,1.0492638)"> ??? </text>
<text
xml:space="preserve"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:5.64444447px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26458332"
x="81.028648"
y="23.399088"
id="text4623"><tspan
sodipodi:role="line"
id="tspan4621"
x="81.028648"
y="23.399088"
style="stroke-width:0.26458332">Temperature </tspan></text>
<text
xml:space="preserve"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:5.32983398px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.24983595"
x="125.85957"
y="22.094868"
id="sensor.multisensor1_temperature_9_1"
inkscape:label="#sensor.multisensor1_temperature_9_1"
transform="scale(0.94426192,1.0590282)"> ??? </text>
</g>
</svg>@pkozul awsome project!! realy like it!
Now the first version worked like a dream! although I have issues with the latest version. I have multiple floor plans and could show them all in groups. But with the second version I seem to able to display only one plan.
Also the previous version worked on my Android tablets and phones… new version I get no floor plans at all…
Any ideas?
Hi there. I have been testing on a physical Windows phone, and also using the Android, IOS, etc. emulators here:
I will have to try a physical Android device.
Anyone else here using the floorplan on an Android?
Just tested multiple floorplans on the same page.
All I did was:
Create a new ‘dummy’ floorplan sensor to represent the new floorplan
- platform: mqtt
state_topic: dummy/floorplan2/sensor
name: Floorplan 2
Add the new floorplan sensor to one of your groups
zones:
name: Zones
entities:
- switch.doorbell
- sensor.template_last_motion
- binary_sensor.floorplan
- binary_sensor.floorplan_2
Create a configuration for your new floorplan (I just copy/pasted from existing floorplan)
binary_sensor.floorplan_2:
custom_ui_state_card: floorplan2
# Config below is identical across state card usage and custom panel usage of the floorplan
# You can copy/paste between one and the other whenever you make any changes
image: /local/custom_ui/floorplan/floorplan2.svg
stylesheet: /local/custom_ui/floorplan/floorplan2.css
last_motion_entity: sensor.template_last_motion
last_motion_class: last-motion
(etc. etc.)
Copy the floorplan state card HTML file (and change <dom-module> and is: to reflect the name of the HTML file.
www/custom_ui/state-card-floorplan2.html
<link rel="import" href="floorplan/ha-floorplan.html" async>
<dom-module id="state-card-floorplan2">
<template>
<ha-floorplan hass=[[hass]] config=[[stateObj.attributes]]></ha-floorplan>
</template>
</dom-module>
<script>
Polymer({
is: 'state-card-floorplan2',
properties: {
hass: {
type: Object,
},
stateObj: {
type: Object,
},
},
});
</script>
That’s all I did to get it working in the new version.
2 Likes
Another update. For those using the floorplan as both a state card, and as a custom panel, you no longer need a separate floorplan config for each.
Thanks to the !include directive, we can include the single floorplan config wherever it’s needed.
So now, the latest version at the GitHib repo shows how you can include files to get this done.
configuration.yaml
... includes customize.yaml
... includes floorplan.yaml
... includes panel_custom.yaml
... includes floorplan.yaml
As you can see, both state card (customize.yaml) and custom panel (panel_custom.yaml) configurations import the same floorplan config file.
To support this, a very minor change was made to the state card HTML file, so make sure to grab the latest version:
www/custom_ui/state-card-floorplan.html
Enjoy!
1 Like
Here is an idea for a theme for the floorplan. I’m representing furnitures in light blue, and added a few sensors and switches to my actual apartment (I don’t have that many although I want to). The challenge is to represent the house without being to literal, after all it should a place to have glimpse of your smart home rather than be a turn by turn map! Still a lot to figure out, such as how to represent 2 overlapping objects (eg: a fan with light) but I just wanted to show something and hear your comments before digging deep!
22 Likes
Man, that looks great! What software did you use to create that? I love the colours
Thanks for trying it out.
The difference is that you also created a statecard and CCS for each floorplan while I use one statecard to display 5 floorplans (basement, downstairs, 1 and 2nd floor, the plot with two garages, greenhouse, gate, etc etc.)
In the old version it worked (and still is) with one statecard and one CCS …
This looks amazing! Great work, similar question to @stipex, what software did you use to put this together? Inkscape?
1 Like
I have all my floorplans in Visio and from there I can export it as a SVG. I will past some screenshots when I get it working again