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.
@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.
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
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.
I always wanted to display a floor plan, but this exceeds everything I could have expected. Brilliant stuff!
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!
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.
Have the new version up and running and it’s working like a charm! Great work @pkozul
Here is my current floor plan
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!
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:
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…
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 {
}
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.