Tutorial for new Custom State Card UI?

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

Thanks for the update and fix!

36

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

1 Like
37

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.

38

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

39

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

2344×527 57.4 KB

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.

40

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.

41

I found a way to make the sliders into percent controllers for lights that use 0-254.
I’m sure it’s not the right way, but it works:

set slider_theme max=100 in configuration.yaml
and
make these changes to state-card-with-slider.html

  brightnessSliderChanged: function (ev) {
    var bri = parseInt(ev.target.value*2.54, 10);
    var param = { entity_id: this.stateObj.entity_id };
    if (isNaN(bri)) return;

    if (bri === 0 || (bri <= ev.target.min && !this.disableOffWhenMin)) {
      this.hass.callService(this.domain, this.serviceMin, param);
    } else {
      param[this.valueName] = bri;
      this.hass.callService(this.domain, this.serviceMax, param);
    }
  },

  stateObjChanged: function (stateObj) {
    if (this.isOn(stateObj)) {
      this.brightnessSliderValue = stateObj.attributes.brightness/2.54;
    } else {
      this.brightnessSliderValue = 0;
    }
    if (stateObj) {
      if (SUPPORTED_MODES.indexOf(stateObj.attributes.state_card_mode) !== -1) {
        this.mode = stateObj.attributes.state_card_mode;
      } else {
        this.mode = DEFAULT_MODE;
      }
      if (stateObj.attributes.stretch_slider) {
        this.stretchSlider = true;
      }
    }
  },

Is there an elegant way to toggle this with a variable?

42

Edit: This is working on iOS with 0.41.0.dev0 !!!

Outstanding. Thank for a great improvement!

43

Not working for me on .41 displaying slider but can’t control dimmer any ideas ?