Tutorial for new Custom State Card UI?

Configuration Frontend
1

I’m trying to use the new custom state card feature released in .38 to create light dimmers but I’m not fully understanding the documentation. I copied the files in https://github.com/andrey-git/home-assistant-custom-ui to my install so I have these files in /www/custom_ui/

ha-themed-slider.html
package.json
state-card-custom_light.html

I added this to my configuration file:

- entity_id: light.bedroom,light.kitchen,light.hallway
  custom_ui_state_card: custom_light
  state_card_mode: break-slider
  slider_theme:
    min: 1
    max: 255
    pin: true
    off_when_min: false
    report_when_not_changed: false

Unfortunately, the controls for these lights just fail to load. I’m sure there’s more to this. Perhaps I’m missing out on some dependencies or I need to make some changes inside the.html files. I’m not really sure. Can anyone offer a little more advanced tutorial that what’s in the documentation? This is a basic AIO install. paging @andrey

1 Like
2

Assuming your config dir is $CFG the files need to be in $CFG/www/custom_ui/

Is the configuration snippet under

homeassistant:
  customize:
    - entity_id: light.bedroom,light.kitchen,light.hallway
      custom_ui_state_card: custom_light
      state_card_mode: break-slider
      slider_theme:
        min: 1
        max: 255
        pin: true
        off_when_min: false
        report_when_not_changed: false

Do you get ay errors in HA or in chrome dev console?
Can you see the files loaded in chrome dev tools Network tab?

3

Yes, my install was done as you showed,

$CFG/www/custom_ui/
  ha-themed-slider.html
  package.json
  state-card-custom_light.html

homeassistant:
  customize:
    - entity_id: light.bedroom,light.kitchen,light.hallway
      custom_ui_state_card: custom_light
      state_card_mode: break-slider
      slider_theme:
        min: 1
        max: 255
        pin: true
        off_when_min: false
        report_when_not_changed: false

I didn’t have Chrome so I installed it to use the console feature you mentioned, and lo-behold, the custom UI is working. It is not working at all in Safari for MacOS or iOS. I tried clearing my cache and no difference. Now I’m wondering what the conflict in Safari might be?

Safari:

Chrome:

4

This doesn’t work on mobile iOS Chrome, Safari, or Firefox. It does work on Firefox and Chrome MacOS desktop, only. No errors on Chrome console.

1 Like
5

I was having a similar problem on my desktop machine with Chrome - turned out that Chrome was not reloading the controls until I did a hard refresh and then they showed up. Seems silly, but I started digging though my configuration before I thought of to check.

6

I don’t have iOS or MacOS to test.

Does it not work on any Linux / Android browser?

7

I have it working successfully with Chrome on Android

8

I don’t have any Android or Linux desktops to test but I fired up Windows 7. HA wouldn’t even load up on IE8. It worked on Firefox though. Seems to be an issue affecting iOS and Mac Webkit stuff only.

9

I assume Mac Safari has dev tools too. Any errors in the console there?

10

The console doesn’t have any errors logged. I tried to look through the resources to find “ha-themed-slider.html” or “state-card-custom-light.html” but I can’t find them anywhere. That being said, it is not presented the same way it is in Chrome and I don’t exactly know how to use it so I’m not sure if I’m just overlooking it or not.

11

Well, please let me know if there’s anything I can test for you. I’d love to see this working on iOS because it’s a really great improvement to the UI. Thanks!

12

Which version of Safari do you use?

13

I’m on desktop Safari 10.0.3 (MacOS 10.11.6 & 10.12.2) and iOS 10.2.

http://whatsmyuseragent.com gives me this about my iOS browser:

Mozilla/5.0 (iPhone; CPU iPhone OS 10_2 like Mac OS X) AppleWebKit/602.3.12 (KHTML, like Gecko) Version/10.0 Mobile/14C92 Safari/602.1

14

I tried this on emulator of iPhone6s with Safari 9
“Mozilla/5.0 (iPhone; CPU iPhone OS 9_0_2 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13A452 Safari/601.1”

and everything worked fine.

Maybe try to clear browser data (for your hass:8123 location) ?

15

I tried the user agent emulator as you have it above in Chrome and it renders properly but when I use the same user agent emulation in Safari it doesn’t work. I’ve tried clearing and disabling cache, visiting from devices that have never connected to my HASS, turning off pi-hole, connecting from outside my network, disabling SSL and base_url. Nothing changes.

This is what I get:

iOS Safari: NO
iOS Chrome: NO
iOS Firefox: NO
iOS Dolphin: NO
MacOS Safari: NO
MacOS Chrome: Yes
MacOS Firefox: Yes

No idea what’s up. Are there any other users who can test this? I’d like to know if I have an isolated incident or not. Should I open a ticket on github?

16

I didn’t explain myself:
I tried this on iphone emulator, not emulated the useragent.

Maybe this works on Safari 9 but not Safari 10. I’ll try to find Safari 10 emulator.

17

This is very cool! Looking forward to safari support so i can get this installed!

18

Hey @Stewface, can you try installing it and see if works for you on Safari? As far as I know, I’m the only one bringing this up so it would be nice to know that it is, or is not, just me!

19

I’ve just done it and the UI disappears in Safari, works in Chrome on OSX.

Update: it doesn’t work in safari or chrome on iOS.

20

This is the big one for me… I use safari on my phone (as its the default for my HASS home screen Icon)