Floorplan in custom State card

I’ve been using FLoorplan as a custom panel for sometime with no issues, and decided to move it to the custom state card. I am getting hung up on the last step, of adding the dummy sensor to a group to display in the fronted. I am able to see the sensor, but it does not show the floorplan.

I’ve combed through the big Floorpan thread to see if my solution could be found there, but no luck (a few with the same question, but no answers). Hence the new thread. Any help would be greatly appreciated.

I followed the steps outlined in Option 1 of the readme. I’ve copied state-card-floorplan.html into the custom_ui folder, and added the necessary lines to my config.

Here is what i have in my config files:

configuration.yaml:

binary_sensor:
  - platform: mqtt
    state_topic: dummy/floorplan/sensor
    name: Floorplan

customize.yaml:

    binary_sensor.floorplan:
      custom_ui_state_card: floorplan
      config: !include floorplan.yaml

groups.yaml:

floorplan:
  view: yes
  name: Floorplan
  entities:
    - group.floorplan_group

floorplan_group:
  name: Floorplan
  entities:
    - binary_sensor.floorplan

This is what I see in the frontend:

I have the same issue.
However the config for custom ui’s has changed: https://home-assistant.io/developers/frontend_creating_custom_ui/

…but still not working for me

Having the same issue. :frowning:

Hi there. I just posted an updated on the main Floorplan thread.

Can you guys check if these changes make a difference at all?

Thanks.

Thanks for following up on this! Unfortunately no change for me. I added the frontend.html file and made the config changes, but still appears the same. Any ideas?

Still working great as a custom panel though

In Google Chrome, it initially didn’t work for me either… until I hit Control + F5 to force a refresh. So I think clearing the cache is also a step to try… are you using Chrome?

I’m using the Mac Electron app, which I think is based on Chrome. Hitting reload a few times worked! Thanks so much!

I just checked Safari, and am getting a script error on both the state card and the custom panel.

[Warning] paper-drawer-panel – "is deprecated. Please use app-layout instead!" (data:text/javascript;charset=utf-8,!fu…%0A, line 1)
[Error] TypeError: undefined is not an object (evaluating 'Object.keys(list)')
	keys (data:text/javascript;charset=utf-8,%0A…%0A:782)
	getArray (data:text/javascript;charset=utf-8,%0A…%0A:782)
	onStyleSheetLoaded (data:text/javascript;charset=utf-8,%0A…%0A:149)
	(anonymous function) (data:text/javascript;charset=utf-8,%0A…%0A:133)
	(anonymous function)

Cool… I am looking into that error as we type :slight_smile:

Awesome. Thanks again!!

@mikeg1130 Did you end up getting this to work in Safari?

Yes, it is working in Safari on Mac and iOS, both as a state card and custom panel. I remember having to clear out the cache on the Mac to get it working.

1 Like

I’ve gotten the demo plan to work. It shows up in states and as a panel link on the left. How do I get the “FLOORPLAN” plan link to show up next to “Home” at the top of the screen, also couldn’t I get my “lights” card to show there too?!

Create a view in your group config, and put your groups in them. For example:

floorplan:
view: yes
name: Floorplan
entities:
- group.floorplan_group

got it to work, thx

Hi,

I’m having the same issue. Tried different browsers but nothing changed. I’m running 0.68.1.

for the post above