Floorplan for Home Assistant

@pkozul - trying to get sensor data printed as text on the floorplan. The temp sensor has a ‘state’ = an integer, like ‘82’. I’m not clear on what the text_template line should look like.

I tried the:
text_template: ‘${entity.state ? entity.state : “unknown”}’

Like in the example, but there is no text being printed. I made a invisible line in the floorplan.svg file with the ID of the sensor (I can hover over the invisible line and see the temp sensor information and current state) but it’s not printing any text.

Thanks!

EDIT: got it working by copying the exact dotted line from the example floorplan.svg file. Not sure how it’s different than the line I made…

1 Like

I dunno why but you have to make your text ‘unflow’ for this to work properly. In inkscape there is an option for that in the text menu.

~Cheers

There’s a very good chance I just screwed something up because i only had an hour to play before packing and heading out for a week for work over the weekend, but can anyone tell me in the latest version if the “light groups” issue is fixed? Specifically I have a group called “Living Room Lights” and whenever I’d add “group.living_room_lights” to entities: on the yaml config file, I’d get an error that light.lr1, light.lr2 and light.lr3 weren’t on the SVG, yet if I put it in groups: and set the svg’s ID for the single “bulb” i want to represent the group, the light just shows up as lit even when it’s off and is no longer clickable/tappable. Is there something I should be trying outside updating to the latest code, which I’ve done? Is this still an issue? I saw there is an update to the grouping but it seemed like when I’d try it, it would either be the same issue or else just straight up not work.

Is there a good video demo of this somewhere? People talk highly about it but I don’t understand the excitement so I’m hoping to see a video demo before I jump in to spend a few hours on it.

@hejman08 Just tried this to make sure it works. I added the group group.all_lights to my floorplan config:

        - name: Switches
          entities:
            - group.all_lights
          states:
            - state: 'on'
              class: 'light-on'
            - state: 'off'
              class: 'light-off'
          action:
            service: toggle

I then added a single element (i.e. <rect>) to the SVG file to represent that light group. Clicking that element toggles the group state between ‘on’ and ‘off’. The element changes colour, and the entity in HA shows the changes in state.

Is that the same sort of scenario you are trying to achieve?

From what I understand, you want to use a single bulb image to represent the group, which means you should be using the entities: section, as I have shown above (i.e. you don’t want the floorplan to explode the group into separate entities).

@bbrendon The other thread is starting to get some video examples:

I believe @CCOSTAN is planning on putting together a video soon, to show the floorplan in action using an Amazon Fire tablet.

2 Likes

@boneless It looks like the JavaScript files cannot be retrieved by your web browser. Did you create the directory structure for the floorplan?

It depends on your platform / installation, but mine is like this:

/home/pi/.homeassistant/www/custom_ui/floorplan

Can you paste a screenshot of your directory structure?

Certainly! Thank you

Edit 4: Got it solved :). Thank you for your help and great piece of code :slight_smile:

Edit: I noticed the lib folder was missing, so I added this as well, but still no luck.

Edit 2: Seems I was missing the panel-custom as well, still no luck tho. I now get an error:

The following components and platforms could not be set up:
panel-custom
Please check your config

Edit 3: Okay, kinda got this working. But isn’t looking right. If I add a group with the binary sensor, on its own tab, it looks like this (when I hit the circle, the SVG actually shows up:

If I add a group, to that group. It looks like this.

My configs are here. Been playing around with spacing a bit trying to resolve…

1 Like

@pkozul I am pretty sure that’s what I did to test it, but again I was only messing with it for an hour or so over the weekend. I’ll have more time to mess with it within a week or so. Feel free to ignore my ineptitude til then :slight_smile:

mmm. new issue now. thanks for being patient with me…

I added a light and temperature sensor, but it is not dynamic. just shows the text, and nothing happens to the circle when I turn the light on.

Config here.

Thanks so much! :blush:

A short question. I would like to show the status of an object (e.g. if the light bulb is on or off) by changing the color of an the icon. However, I would also like to display some text nearby with the brightness level (an attribute). How do I link one entity ID to two objects? Thanks.

One option is to create a new template sensor/entity id in HASS and link the new sensor to the SVG text. However, I don’t want a clutter in the entity list.

No video as far as I know. maybe a job for the BRUH :wink:

I used this and took my time

(scroll down a bit to see the tutorial)

The SVG drawing using Inkscape was the thing that took the time as I had not even heard of it before now - quite easy to pick up the basics once youve played for a little bit

1 Like

Looking at your config, might be that your indentation is out of whack.

sensor.sn1_temperature

You might have some extra spaces in the above entry.

Thanks for the reply!

You mean in the floorplan.yaml?

Everything else seems to be working, except for showing values on the floorplan.

Anyway, I got it to work now :), somehow my GitHub changes we’re not being pulled with my script.
Thanks for the help!

1 Like

I just picked up a Fire HD 8 to use as a floorplan interface unit. Any tips on how to make it full screen? I can’t seem to get rid of the top bar/tab from the browser (in both chrome and Silk). I can’t find the “add to homescreen” option in chrome like this page describes (https://home-assistant.io/docs/frontend/mobile/)

I would recommend downloading ‘Fully Kiosk browser’ and using that. It is free if you want the screen to stay on at all times (until manually turned off with top button) and ~$6 if you want the screen to turn on automatically with movement using camera (Pro license) or you could use WallPanel

2 Likes

Hi there. This is a good suggestion and will be easy to implement. Will touch base again in the next day or two and hopefully have a solution ready.

Thanks, Fully Kiosk Browser did the trick.

FYI, you can set never-sleep for free by getting into developer mode (hit your serial # 5 times) and then there is a new setting menu with this option.

Thanks. Glad to know you like the idea.
I was lazy and I didn’t check you code before asking. I only gave an example, but this option should be useful in many cases were a sensor (an entity id) has several interesting attributes (e.g. thermostats/climate, devices with batteries, light bulbs, media players, diverse sensors etc).
Displaying one image plus one or several attributes/state as text (or no image and just a few attributes coming from the same entity id) should be interesting.

It isn’t too nice to rely on templating tricks to extract the attribute value for this.
Cheers.

Any idea why I only get a spinning loading cirlce on my tablet devices? In wallpanel as well as Fully Kiosk browser. Works fine in chrome tho on the same device.

~Cheers