Floorplan in custom State card

mikeg1130 · October 11, 2017, 3:49pm

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:

eddi89 · October 11, 2017, 5:00pm

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

CM000n · October 11, 2017, 5:54pm

Having the same issue.

pkozul · October 17, 2017, 12:42am

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.

mikeg1130 · October 17, 2017, 1:59am

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

pkozul · October 17, 2017, 2:00am

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?

mikeg1130 · October 17, 2017, 2:07am

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)

pkozul · October 17, 2017, 2:08am

Cool… I am looking into that error as we type

mikeg1130 · October 17, 2017, 2:09am

Awesome. Thanks again!!

pkozul · November 1, 2017, 9:14pm

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

mikeg1130 · November 2, 2017, 12:55am

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.

HaoleBoy · January 27, 2018, 1:58pm

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?!