Hi, I’m the one who made those icons for heat level intensity. You can find them on my git
All icon are there with complete example on how to add them on your floor plan. See example_ui_lovelace.yaml
I’m looking for a way to have a toggle icon to control roof window in my floorplan. My problem is that to open the roof window I just need to turn on a switch. But to close it I need to turn on another switch that invert the dc voltage and then turn on the same previous switch used to open it.
I presume that I need to use script. Anybody have an idea on how to proceed
Thank you
A script, or even a template switch (or cover), would be the way I’d tackle it.
I’d recommend though that you open a fresh topic on that, so that you get more eyes on it than you may here, as it would be easy for it to get lost in this not very small thread.
In terms of the floorplan aspect you just need something like this in your YAML
- tap_action:
service: script.turn_on
entities:
- script.toggle_cover
name: Execute Scripts
As for your script yes maybe another thread to nut that out.
I am struggling with my custom floorplan configuration. I want to have my icons color change, based on their entity status. What’s going wrong with the floorplan.class_set coding?
title: Dashboard
theme: Night_Theme
views:
- icon: 'mdi:floor-plan'
id: system
panel: true
log_level: error
title: Floorplan
theme: Night_Theme
badges: []
cards:
- type: 'custom:floorplan-card'
config:
image: /local/community/ha-floorplan-micasa/tablet.svg
stylesheet: /local/community/ha-floorplan-micasa/tablet.css
style: |
svg {
height: calc(100vh - 115px) !important;
width: auto !important;
max-width: 50vw !important;
}
ha-card {
box-shadow: unset !important;
}
defaults:
hover_action: hover-info
tap_action: more-info
rules:
- entities:
- climate.daikin_kapsalon
- climate.kachel_chillroom
- climate.toon_thermostat
- climate.daikin_pa_en_ma
- climate.daikin_chloe
- climate.daikin_jaimy
- climate.daikin_werkkamer
- climate.daikin
state_action:
- service: floorplan.class_set
service_data: |
>
var airco = parseFloat(entity.state);
if (airco = "heat") return "Climate-heat";
else if (airco = "cool") return "Climate-cool";
else if (airco = "dry") return "Climate-fan_only";
else if (airco = "fan") return "Climate-fan_only";
else if (airco = "heat_cool") return "Climate-auto";
else return "Climate-off";
Not sure about your use of parseFloat as that is trying to convert the state to a float isn’t it? You don’t need to do that anyway just check the value of entity.state Here is my equivalent. I am using it to generate a file name but you should get the idea. I don’t think you even need a variable. Just use the switch and return the class name.
state_action:
action: call-service
service: floorplan.image_set
service_data: |
>
var imageName = '';
switch (entity.state) {
case 'off':
imageName = 'AC_off_sml-wide';
break;
case 'auto': imageName = 'AC_on_AUTO-wide';
break;
case 'fan_only':
imageName = 'AC_on_FAN-wide';
break;
case 'heat':
imageName = 'AC_on_heat-wide';
break;
case 'cool': imageName = 'AC_on_sml-wide';
break;
}
return '/local/floorplan/images/' + imageName + '.svg?v=7';
It should work your way as well with if-then statements just try removing the line var airco = parseFloat(entity.state); and replace all the airco with entity.state and all your = with ==
Do you mean like this? I tested it, but it doesn’t work 
- entities:
- climate.daikin_kapsalon
- climate.kachel_chillroom
- climate.toon_thermostat
- climate.daikin_pa_en_ma
- climate.daikin_chloe
- climate.daikin_jaimy
- climate.daikin_werkkamer
- climate.daikin
state_action:
- service: floorplan.class_set
service_data: |
>
if (entity.state == "heat") return "Climate-heat";
else if (entity.state == "cool") return "Climate-cool";
else if (entity.state == "dry") return "Climate-fan_only";
else if (entity.state == "fan") return "Climate-fan_only";
else if (entity.state == "heat_cool") return "Climate-auto";
else return "Climate-off";
What’s going wrong?
Yes like that. Good question. Don’t know as I can’t test it. Try my way. If this doesn’t work you will need to look more carefully at what the state value of the entity is. Perhaps use the DEVELOPER TOOLS to manually change the state and see what happens.
service_data: |
>
switch (entity.state) {
case 'heat': return 'Climate-heat'; break;
case 'cool': return 'Climate-cool'; break;
case 'dry': return 'Climate-fan_only'; break;
case 'fan': return 'Climate-fan_only'; break;
case 'heat_cool': return 'Climate-auto'; break;
default: return 'Climate-off'; break;
}
Just a heads up, We’ve added a new Usage page to the documentation, which will make it much easier for people to get started with Floorplan.
1 Like
Great stuff, thanks. BUT, I am getting the following error;
Custom element doesn't exist: floorplan-card.
type: 'custom:floorplan-card'
full_height: true
config:
image: /local/floorplans/examples/home/home.svg
stylesheet: /local/floorplans/examples/home/home.css
log_level: info
console_log_level: info
defaults:
hover_action: hover-info
tap_action: more-info
rules: null
Welcome Daniel. The first question is have you added the resource per STEP 5 of here Quick Start - Floorplan for Home Assistant
Thanks OzGav, yes. I had to add the resource with a slightly different path, but that was something I actually had initial issues with (as I use /community/… instead of /hacsfiles/…)
If you are saying that your files are in /config/www/community then actually /hacfiles is correct as HA internally resolves that to /hacsfiles so you should have the resource URL as /hacsfiles/ha-floorplan/floorplan.js
It is the same way that /local internally resolves to /config/www
However if you are saying that you have put your files in your own community directory and it is now working then OK!
2 Likes
I just changed it back to /hacsfiles/… and it is now all working. I have gone off and done some other changes (like adding cameras and MQTT broker) which involved a bunch of restarting so I must have missed something when I was first doing the Floorplan stuff.
Thanks for your help! Now to creating svg’s of my floor plans…
1 Like
Hello Team,
For some reason my floorplan is not rendering in panel mode but it does when i try to edit it. Any ideas why?
Panel Mode
Editing dashboard:
Thanks
You can try adding the logging option and see if you get any errors Usage - Floorplan for Home Assistant
Helo,
I am since last week busy with the floorplan card.
For a noob i could say that it’s pretty easy if you have some patience to understand what you are doing.
For the moment I have a problem with some lightbulbs that won’t get lighting up.
In the floorplan I drew some circles that are grey coloured and named the element as it should. When i switch the light on it should get yellow. This doesn’t happen at all… the circle on the floorplan disappears…
The light_on and light_off are as max pix weight as the floorplan (took me couple of hours to realise that because it was just a very very tiny circle).
If I do the same but with a symbol of Noun Project then it works???
I tried it on a empty page because i was thinking about the layers but stays the same…
Can somebody explain me how i can solve this?? I have some lines (led strip) in the floorplan that i would lighten up but it doesn’t work… it disappears.
best regards
AS
Now I don’t get it at all…
I downloaded a straight line on Noun Projects and i have the same.
I import the line as PNG, the same…
Below image.
The camera is symbol of noun projects and downloaded as svg. When downloaded, drag and drop in the drawing of Inkscape. The symbol exist of 2 objects. I have coloured the inside of the objects so that makes 4objects . If I use the place that i have coloured and name this as an element it disappears. If I use the outline then it works…
The walking guy works also and is also svg downloaded object from noun.
The flat line (blue circle) not working and disappears… this line is a straight line drawed in inkscape.
clear cache everytime i made a change.
Hi @AndSx
Can you upload your SVG file, and the relevant part of your floorplan config (YAML) and CSS? Best is to start a discussion on the repo:
ok will do that!
thx in advance