Floorplan now available as a Lovelace card

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 :frowning_face:

            - 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