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.
![](//community-assets.home-assistant.io/original/2X/a/afd54e529cd63bd2a78c6e409ec9c1a1182bab7d.png)