Floorplan now available as a Lovelace card

Are you using the Lovelace card version of Floorplan? It looks like you might be using the original version?

Original. Is that defunct now?

I moved over to the Lovelace version because of the problem you are now running into. This thread is about the Lovelace version. It’s a pretty easy conversion. Have a look at Petar’s post at the top.

1 Like

Ok that wasn’t too bad. Just had to fix a bunch of indenting.

Any way to get rid of the big blue banner at the top to make the floorplan full-screen?

Not sure as I don’t do that. Try this search https://www.google.com/search?safe=strict&sxsrf=ALeKk02F0gd9W_U8gRxheUEeiSHld4Arxg:1600657621228&q=lovelace+full+screen+hassio&spell=1&sa=X&ved=2ahUKEwiY_q2novnrAhUSiZQKHRtkBEYQBSgAegQIDxAo&biw=1920&bih=1097

Can you also use the switch (entity.state) in the lovelace floorplan. So you can show different icons depending on the state

Not exactly sure what you are trying to do but you can put an image in the floorplan and change that according to the state. For example:

            - name: Weather Today Icon
                - input_text.current_wx_icon
              image_template: 'var imageName = String(entity.state); return "/local/icons/weather_icons/animated/" + imageName + ".svg?v=6"; '

For the above to work you need an image named the same as each state and the image needs to be in SVG format. I just used PNG and then used an online converter (not all of them work properly so try different ones)

If your entity only has two states then you can put the two icons you want on top of each other in the floorplan. This will result in the bottom icon being hidden by the top icon. Then you can make the top icon invisible based on one state and visible with the other which will give the effect of the icon changing.

1 Like

I used to have an icon change depending on the theater conditions. how can I make this work in this version.

        - name: Sensors
             -  sensor.dark_sky_temperature        
          text_template: '${entity.state ? entity.state.replace(/\s{2,}/g,"")  + " °C": "undefined"}'  
          class_template: '
            var temp = parseFloat(entity.state.replace("°", ""));
            if (temp < 10)
              return "temp-low";
            else if (temp < 30)
              return "temp-medium";
              return "temp-high";


        - name: Dark Sky Sensors
            - sensor.dark_sky_icon
          image_template: '
            var imageName = "";

            switch (entity.state) {
              case "clear-day":
                imageName = "day";

              case "clear-night":
                imageName = "night";

              case "partly-cloudy-day":
                imageName = "cloudy-day-1";

              case "partly-cloudy-night":
                imageName = "cloudy-night-1";

              case "cloudy":
                imageName = "cloudy";

              case "rain":
                imageName = "rain";

              case "snow":
                imageName = "snow";

            return "/local/custom_ui/floorplan/images/weather/" + imageName + ".svg";

That should all still work as I do exactly what you have. Do you have your images in the correct location?

When I load this in my config. My floorplan goes blank. The images are in the correct location. It worked in the floorplan version from the sidebar

Can we break this down a little more. Are you saying that floorplan in lovelace works fine until you put those two sections you listed above into the rules? If so, have you tried just putting one in?

What I can see from your post further up is that in the first code block the third line has formatting errors. The dash should be under the first t in entities and then there should be just one space before sensor.dark_sky_temperature Fix that up for a start and see how you go.

        - name: Sensors
            - sensor.dark_sky_temperature        
          text_template: '${entity.state ? entity.state.replace(/\s{2,}/g,"")  + " °C": "undefined"}'  

Without these lines the floorplan works fine. I will try your solution. Thnks

I’ve tried to add the lines as you described

here you go

    - action:
        service: homeassistant.toggle
        - switch.wc_light
        - state: 'on'
          class: light-on
        - state: 'off'
          class: light-off
    - entities:
        - sensor.dark_sky_temperature
      text_template: '${entity.state ? Math.ceil(entity.state) : "undefined"} °C'
    - entities:
        - sensor.dark_sky_humidity
      text_template: '${entity.state ? Math.ceil(entity.state) : "undefined"}  %'
    - entities:
        - sensor.dark_sky_pressure
      text_template: '${entity.state ? Math.ceil(entity.state) : "undefined"}'
    - entities:
        - sensor.dark_sky_wind_speed
      text_template: '${entity.state ? Math.ceil(entity.state) : "undefined"} km/h'
    - entities:
        - sensor.shellyswitch
      text_template: '${entity.state ? Math.ceil(entity.state) : "undefined"} KWh'
    - entities:
        - sensor.shellyswitch_power
        - sensor.shellyswitch_power
      text_template: '${entity.state ? Math.ceil(entity.state) : "undefined"} W'

watch the spaces entities under entities…text template a bit further inside than entities but not under entity :smiley:

1 Like

i got the same problem here whenever i refresh the page it disapears… and works properly.

Does anyone know how to make the card cover all the panel?

I would start with one block and add one line at a time until you find the one that is casing the problem…

1 Like

Thanks. It works now

Does anyone know how to fill all the hassio screen with floorplan? Do i have to use CSS?