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.
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';
From what I am using, I think your last post is ‘almost’ fine… it misses a dot.png for the line ‘0’
And I never used a combi with image and state_image in an entity…should not be needed
Thanks for your replay!
The missing dot has occured by reediting the code. I fixed it meanwhile. I removed the “image” as you suggested, but it did not fix my problem.
hmm… so below a excerpt of my setup which works fine for me…I am not (!) using svg…only png, not sure if there is a limitation on the type tbh
Can you maybe detail what is not working and do you have any visible effects? e.g. when I make typos during the setup I see some rotating icon indicating it is not OK, e.g. picture not found or entity wrong or similar.
Tried in private mode and with cleared cache. No change.
And I am sure that the background image itself is not the problem, further more the type which is defined.
You use type: picture-elements - ha-floorplan uses type: custom:floorplan-card
Here is my complete lovelace configuration for the floorplan:
At the beginning of this post you pasted type:picture-elements, this is what I am using so I compared with that. If you are using something completely different then my comparison makes no sense.
With the last pated parts I have no experience and will not enter in trial/error
…sometimes you just need a little hint…
I was able to solve my problem.
ha-floorplan uses another semantic. You have to define the behaviour of your elements within the “rules:” section. The key for both is to set up “service: floorplan.image_set” und configure the whished behaviour in “service_data:”
Here is my working lovelace configuration for ha-floorplan:
type: custom:floorplan-card
panel: true
config:
image: /local/floorplan/background/floorplan.svg
stylesheet: /local/floorplan/floorplan.css
log_level: info
console_log_level: info
defaults:
hover_action: hover-info
tap_action: more-info
rules:
# COVER STATE
- entity: cover.covertest
element: shutter_covertest
state_action:
action: call-service
service: floorplan.image_set
service_data:
image: >
${ entity.state === "open" ?
"/local/floorplan/coveropen.svg" :
"/local/floorplan/coverclosed.svg" }
# BACKGROUND DEPENDING ON TIME OF DAY
- element: background
entity: sensor.background
tap_action: false
hover_action: false
state_action:
action: call-service
service: floorplan.image_set
service_data: |
>
var imageName = '';
switch (entity.state) {
case 'morning': imageName ='morning'; break;
case 'noon': imageName = 'noon'; break;
case 'evening': imageName = 'evening'; break;
case 'night': imageName = 'night'; break;
}
return '/local/floorplan/background/floorplan_' + imageName + '.svg';
Hi. I am wanting to do something similar with your sample code below. What do I need to create in inkscape in order for the image to show up on my floorplan?
# BACKGROUND DEPENDING ON TIME OF DAY
- element: background
entity: sensor.background
tap_action: false
hover_action: false
state_action:
action: call-service
service: floorplan.image_set
service_data: |
>
var imageName = '';
switch (entity.state) {
case 'morning': imageName ='morning'; break;
case 'noon': imageName = 'noon'; break;
case 'evening': imageName = 'evening'; break;
case 'night': imageName = 'night'; break;
}
return '/local/floorplan/background/floorplan_' + imageName + '.svg';
Hello. Thanks for the reply. I got the image to dispaly on my floorplan now by creating a square and adding id of input_select.mr_ac_mode. My next hurdle is trying to figure out how I can change the color of the fan base from the 3 different cases below. I want the fan to have a color of orange, cool or purple. The different svg has the color; however the fan color is transparent
I think is because of this css style, but I am not able to create a css to just isolate the entity alone. The fill: none is causing the color not to show. Though, I do need this in place as a gobal style.
I think I am over thinking this and may not even need the different svg files. What I am to acheive at the end is have different fan color spinning base on the state of the input select entity. When it is off, hide the fan. So I try to assign different css class, but failed doing so. This is what I have, but not working.
- entities:
- input_select.mr_ac_mode
hold_action: more-info
state_action:
service: floorplan.class_set
service_data: |
>
var stat = (entity.state);
if (stat === "Normal Heat") return "aircon status-heat";
else if (stat === "Normal Cool") return "aircon status-cool";
else if (stat === "Fan") return "aircon status-fan";
else if (stat === "Off") return "aircon status-off";
else return "unknown";
Have a look at the home example which shows you how to spin an object and separately how to change the fill colour of an object using floorplan.class_setHome Example - Floorplan for Home Assistant
