How to display temperature on ha-floorplan

Configuration Frontend
1

Hi,

This must be such a simple issue, but I have spent hours and I have not figured out why it does not work.

I basically installed ha-floorplan to display a floorplan of my house, and my intention is to shown the lights and values of the sensors I have. Right now I have two smart switches and several sensors (temperature, light, pressure, gas, motion, etc.)

I did the installation following their instructions https://experiencelovelace.github.io/ha-floorplan/docs/quick-start/

Then I copied their configuration files, replaced their .SVG by mine, and edited the config file from the embedded editor. I also followed this tutorial to edit my SVG floorplan to name the objects after the sensors I want to use.

The two switches work just fine. They appear in the map replacing the placeholder in the svg file. However, I can’t seem to display the temperature of a sensor. Instead, the placeholder text is still shown, and I can see the temperature if I hover over the text (see screenshot

Senotemp
Senotemp1257×767 105 KB
). I thought I could show the value of the sensor with text_template: '${entity.state"}', but that does not seems to be the case.

The sensor in HA is an entity called sensor.temp_dining. The information is received through MQTT. These are the contents of my configuration. https://pastebin.com/wM5YHL21

What I am doing wrong? What is the simplest way to show a sensor value on a floorplan?

I hope you can lend me a hand. If you need more information, just ask.

2

Post the code with </>. The code with your sensors is not displayed above, so very difficult to see what is wrong.
I don’t use the custom floor plan but I do use picture elements for the floor plan.
I display temperature and humidity currently ( I have been tweaking it a lot lately)

  - type: state-label
    entity: sensor.laundry_temperature
    style:
      top: 48%
      left: 34%
      color: white
      font-family: Quicksand
      font-size: 70%
      border: none 
      background-color: 'rgba(255,0,0,0.3)'
      border-radius: 50% 
      text-align: center

You can do a % or px size for font; I found % translates better over different screen sizes.
I set background colors for different sensors (Blue for humidity, Red for temperature, Green for Dew point, Purple for air quality, black for generic items such as brine tank salt level). The last part of the RGB is transparency, so you can see what is behind it if you desire.
floor

1 Like
3

Thanks. At the end I ended up using a Picture Elements card, and it was much much easier to configure.

4

Would you mind sharing how you did this?
I am struggeling with a similar issue.
Thank you!