Tutorial for new Custom State Card UI?

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

44

@carlostico What OS / Browser are you on?
If you click on the name, a “popup” dialog opens. Can you control the dimmer using the slider inside?

45

Yes if I click the pop up inside slider it works fine , any ideas ?

46

I even downgrade and tested , not working on .40.2 or .41 , thanks !!

47

What OS / Browser are you using?

48

Hi

I tried all , Windows and Mac OS operative systems and with Safari , Firefox browser without result.

The only browser working fine seems to be Chrome.

Thanks…

49

Thanks for the report. Should be fixed now. (Re-download state-card-with-slider.html)

50

Working on iOS Safari now!
Thanks for your hard work @andrey, this is a huge improvement for me and the WAF.

51

Hi Andrey still not working on IOS 10.2.1 or Mac OS Safari 10.0.3 and Firefox 52.0.2

52

I made some more fixes. Tested on Chrome and FF52 on Ubuntu.

Note that now there are more files to download - see updated description.

53

Hi,

I did som testing and it works fine in safari on ios 10.

BUT when i save HA to the home screen it dosn’t work.

When i click on switch the regular slider works fine.
When i close that panel i get the first error.
When i change the inline slider i get the second error.
I get the error regardless on what order i do the procedure.

I have restarted my device, removed and readded HA to the home screen without any change. Running ha .41 with your latest Custom State Card UI.

54

Mine did that, think it was a caching thing, no matter how many times I’d recreate the home icon, it would still persist. I gave up bothering worrying about it and it disappeared by itself. Or you could probably clear the cache.

@andrey I have one more potential request (sorry). When I’m scrolling up and down the page with my thumb, it’s easy to accidentally turn a light on. Does polymer have a method of working out what your doing, so it ignores your swipe if it thinks you’re just swiping up or down?

55

@Tim_Cifuentes_Vargas I submitted a fix to an unrelated bug.
I think the first error is not related to my code.
The second error seems to come from a previous version, so it might indeed be a caching thing.

I tested the homescreen on {Chrome,FF}x{Linux,Android} and it worked fine.

@christianwaite
On Android-Chrome: When I start the swipe not on the slider the swipe continues fine even if my finger moves to the slider.
If the first touch is on slider - the slider ‘activates’ immediately even before the finger starts to move.
Was that the behavior you are experiencing? Should the slider ‘activate’ only when the finger goes up without a scroll?

56

@andrey yeah that’s the behaviour I get as well, that’s fine. I was wondering if you could capture the intended behaviour rather than the first element (or none). So say I wanted to scroll the page so just blindly flick my thumb, but it happens to hit the scroller first, it should still realise I want to scroll the page and not interact with the slider.

I think polymer has support for this kind of thing. It’s not a huge deal, would just make it more robust.

57

paper-slider responds to finger-down event. If I block the event you won’t be able to tap (without dragging) the slider.
I guess it would be possible to clone the paper-slider or do something with it’s internals, but I think that would be an overkill.

58

It works for me now, i must have been cache issues…

Thanks a lot for making this happen!

59

Seeing odd behavior with MQTT lights. Brightness_scale is 99, I set the max slider_theme to 99 and when I adjust the brightness, it is setting it to the value I select divided by ~2.55.

61

Hi all,
I am a newbie, I’m trying to use the new custom state card (HA version 0.53.1). The extra_badge is show, but the silder is not show. I copied the files in github to my install so I have these files in /www/custom_ui/.

  • state-card-custom-ui.html
  • state-card-custom-ui.html.gz
  • state-card-with-slider.html
  • ha-themed-slider.html
  • ha-config-custom-ui.html
  • ha-panel-custom-ui.html
  • ha-panel-custom-ui.html.gz
  • dynamic-element.html
  • dynamic-with-extra.html
  • bower.json
  • gulpfile.js
  • hooks.html
  • package.json
  • polymer.json
  • yarn.lock

configuration.yaml

customizer:
  custom_ui: local

customize.yaml

light.studio_light_1:
  custom_ui_state_card: state-card-custom-ui
  state_card_mode: break-slider
  stretch_slider: true
  hide_control: false
  theme: happy
  slider_theme:
    min: 10
    max: 200
    pin: true
    off_when_min: false
    report_when_not_changed: false
  extra_badge:
    entity_id: sensor.studio_temperature

No error in HA.
Chrome dev console:

  • warning: paper-drawer-panel is deprecated. Please use app-layout instead! (frontend-6b0a95408d9ee869d0fe20c374077ed4.html:57)
  • Error: Uncaught (in promise) DOMException: Only secure origins are allowed (see: https://goo.gl/Y0ZkNV).(core-2a7d01e45187c7d4635da05065b5e54e.js:1)

Please help me.