I decided to use ha-floorplan because of its benefit to interact with the entities within a SVG image in defined areas and the possibilty to display different states depending on current values. At least I understood that it should work like this.
What I am trying to implement:
- floorplan image depending on time of day
- swap images of an entity depending on the current state - i.e. state of cover/shutter/blind
What I have done so far:
I have installed ha-floorplan as described in the official docs with the origin lovelace code and adapted the SVG image and the entity configuration.
According to 1:
I have found a (working) image swap configuration for the type “picture-elements” which uses the entitiy sun.sun to get the sun elevation. Unfortunately I am not able to use it in ha-floorplan for some reason.
Here is the code in lovelace:
type: picture-elements
panel: true
image: /local/floorplan/background/floorplan_morning.svg
elements:
- type: image
entity: sensor.background
state_image:
morning: /local/floorplan/background/floorplan_morning.svg
noon: /local/floorplan/background/floorplan_noon.svg
evening: /local/floorplan/background/floorplan_evening.svg
night: /local/floorplan/background/floorplan_night.svg
style:
left: 50%
top: 50%
width: 100%
tap_action:
action: none
I tried to use a SVG without a background image. The idea: On the sensors state change the background image (layer “background” in the SVG) should change as well - without success:
groups:
- name: background
entities:
- sensor.background
image_template: ' var imageName = ""; switch (entity.state) { case "morning": imageName = "floorplan_morning"; break; case "noon": imageName = "floorplan_noon"; break; case "evening": imageName = "floorplan_evening"; break; case "night": imageName = "floorplan_night"; break; } return "/local/floorplan/background/" + imageName + ".png"
According to 2.
I’m not able to replace the images of the shutter. Here my attempts:
- element: covertest
entity: cover.covertest
image_template: >-
var coverstate = sensor.position_covertest;
if (coverstate < 1) return '/local/floorplan/coverclosed.png’;
else if (coverstate == 100) return '/local/floorplan/coveropened.png';
else return '/local/floorplan/coverclosed.png';
and
- entity: sensor.position_covertest
image: /local/floorplan/coverclosed.png
state_image:
'0': /local/floorplan/coverclosed.png
'100': /local/floorplan/coveropened.png
style:
left: 50%
top: 50%
width: 100%
title: Cover test
type: image
Is there anybody who might help me with these issues? Thanks in advance!
