Tutorial for new Custom State Card UI?

Same with me.

Do we have any ideas that I can help test?

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

keep us posted thanks !!!

Any progress?

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.

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:

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

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

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.

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

@jbcodemonkey Thanks for testing.

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

@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.

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

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

Thanks for the update and fix!

I have added Cover UI to the repository. (requires HA 0.40)

1 Like

Great news!!

@andrey Just to clarify: if we want to run the 0.41 beta and try it, are you saying we no longer need to put the custom html in www/custom_ui?

Edit: I just tested this with 0.41.0.dev0. Works on Win10 Chrome natively, but it was still not working on iOS. I am assuming that the change has not found its way into the dev build yet.

The Safari 10 fix requires 0.41 UI fix, which you don’t get with pip install.

If you want the slider for dimmer / cover you need to place HTML files in www/custom_ui and relevant lines in configuration.yaml

@andrey Thanks for working on this. I really love having this control, and I can’t wait to make it work on my iphone.

I am using this command to install the latest build:
sudo -H pip3 install --upgrade git+https://github.com/home-assistant/home-assistant.git@dev

Is there a way to install the latest polymer that includes the fix for safari/ios?
I just want this so badly. It’s so good. Look:

Oh and I had a suggestion: the ‘pin’ bubble is GREAT, but could you add an option to display the value as a percent instead of the 0-254 scale? My lighting control levels are all 0-254, but Alexa uses percents, would allow the displayed value to match what Alexa would say.

The polymer fix is not part of HA dev package (yet). To try it you need to switch to UI development mode https://home-assistant.io/developers/frontend/

As for text in the pin bubble, I don’t think it can be changed.