Tutorial for new Custom State Card UI?

Configuration Frontend
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)

21

Same with me.

Do we have any ideas that I can help test?

22

I’m seeing similar behavior intermittently on Chrome in macOS. It worked fine initially, then after the most recent update to 0.38.3 yesterday, it stopped showing up entirely, despite no changes in my configs.

I’m getting no console errors, and there’s nothing related to it in my HASS error log.

I am seeing the custom components getting requested in the Chrome Network panel, and they load fine, they’re just not rendering to the page.

I’m going to try rooting around in the code a bit this week and see if I can’t figure out what’s happening. If anyone has any ideas or is seeing similar issues, feel free to let me know.

1 Like
23

keep us posted thanks !!!

24

Any progress?

25

I don’t have iPhone or Mac and there are no free emulators (I found one with Safari 9 and the feature worked fine), so unless someone else debugs this - no fix is expected.

26

Mabe you could use the trial of https://www.browserstack.com/ ?
They give you the possibility test a very wide range of devices :slight_smile:

27

Yeah, that’s the Safari9 I tested. (Worked fine)
No Free Safari 10

28

Thanks Andrey.
Maybe someone (me at some point) can give you vnc access? When the planets align and everyone has time?

29

Tested with that I have:

iPhone6s Plus
iOS 10.2.1
Safari, Chrome, and Firefox have the same issue.
Issue: Light controls do not display at all: no icons, labels, or controls.
Surprised to see the same behavior across all three browsers, wonder if they all leverage a common iOS element that is actually the problem.

iPhone4s
iOS 9.3.5
No issues with Safari: Controls appear as expected.

30

All browsers on iOS use Apples WebKit as rendering engine. So they should give the same result.

“2.5.6 Apps that browse the web must use the appropriate WebKit framework and WebKit Javascript.”
Source: App Review Guidelines - Apple Developer

1 Like
31

@jbcodemonkey Thanks for testing.

I’ll update the readme that Safari 9 works fine.

32

@jbcodemonkey @christianwaite @hoffsta
I have a guess: Could you change line 7 in state-card-custom_light.html
from
<link rel="import" href="ha-themed-slider.html">
to
<link rel="import" href="ha-themed-slider.html" async>

It doesn’t require restarting home-assistant.

33

I tried adding ‘async’. No changes on iOS w safari or chrome: still see no light icons, labels, or controls.

34

With help from @Tim_Cifuentes_Vargas the problem has been found.
However the fix is in HA code, so it will be in 0.41 release (https://github.com/home-assistant/home-assistant-polymer/pull/237)

3 Likes