New hass user trying to set up Custom UI

I must be overlooking something simple but I can’t seem to figure out. I’d like to add Andrey’s Custom UI light sliders but I can’t get them to display in lovelace. The hass install is 103.5 in a docker container with custom ui 20190518:
image

I used the update.sh script to put files in the right place:

~$ ls -Rlh /etc/home-assistant/www/custom_ui
/etc/home-assistant/www/custom_ui:
total 712K
-rw-r--r-- 1 root root 8.5K Dec 29 14:34 scripts-es5.js.LICENSE
-rw-r--r-- 1 root root 264K Dec 29 14:34 scripts-es5.js.map
-rw-r--r-- 1 root root 7.4K Dec 29 14:34 scripts.js.LICENSE
-rw-r--r-- 1 root root 246K Dec 29 14:34 scripts.js.map
-rw-r--r-- 1 root root  84K Dec 29 14:34 state-card-custom-ui-es5.html
-rw-r--r-- 1 root root  19K Dec 29 14:34 state-card-custom-ui-es5.html.gz
-rw-r--r-- 1 root root  57K Dec 29 14:34 state-card-custom-ui.html
-rw-r--r-- 1 root root  16K Dec 29 14:34 state-card-custom-ui.html.gz

~$ ls -Rlh /etc/home-assistant/custom_components/
/etc/home-assistant/custom_components/:
total 4.0K
drwxr-xr-x 3 root root 4.0K Dec 29 14:36 customizer

/etc/home-assistant/custom_components/customizer:
total 16K
-rw-r--r-- 1 root root 5.1K Dec 29 14:34 __init__.py
drwxr-xr-x 2 root root 4.0K Dec 29 14:36 __pycache__
-rw-r--r-- 1 root root  658 Dec 29 14:34 services.yaml

/etc/home-assistant/custom_components/customizer/__pycache__:
total 8.0K
-rw-r--r-- 1 root root 4.2K Dec 29 14:36 __init__.cpython-37.pyc

My configuration.yaml:

# Configure a default setup of Home Assistant (frontend, api, etc)
default_config:

customizer:
  custom_ui: local

lovelace:
  mode: yaml

group: !include groups.yaml
automation: !include automations.yaml
script: !include scripts.yaml
scene: !include scenes.yaml

homeassistant:
  name: !secret address
  latitude: !secret latitude
  longitude: !secret longitude
  time_zone: America/Los_Angeles
  elevation: 151
  unit_system: imperial

  customize: !include customize.yaml

customize.yaml:

light.outside_front_lights:
  custom_ui_state_card: state-card-custom-ui-e5
  state_card_mode: break-slider
  stretch_slider: true
  show_last_changed: true

relevant bits of ui-lovelace.yaml:

views:
  - id: 0
    title: Phone view
    icon: mdi:cellphone
    cards:
      - type: entities
        title: A Card
        entities:
          - entity: light.outside_front_lights

I believe that’s working because my light.outside_front_lights state atributes looks like it’s accepting the customizations:

State attributes (YAML, optional)

1 brightness: 80
2 node_id: 8
3 value_index: 0
4 value_instance: 1
5 value_id: '72057594176962561'
6 friendly_name: Outside Front Lights Level
7 supported_features: 33
8 custom_ui_state_card: state-card-custom-ui-e5
9 state_card_mode: break-slider
10 stretch_slider: true
11 show_last_changed: true

My card, however, shows none of this:
image

I don’t have the CustomUI panel in my configuration, and my log home-assistant.log is basically empty:

2019-12-30 07:11:55 WARNING (MainThread) [homeassistant.loader] You are using a custom integration for customizer which has not been tested by Home Assistant. This component might cause stability problems, be sure to disable it if you do experience issues with Home Assistant.


Clearly there’s something fundamental I’m not understanding. I’d appreciate any pointers to documentation I’ve overlooked, concepts I’m not understanding, or anything I’ve flat out misconfigured.

There’s a simpler alternative if all you need is the light slider:

Eventually I’d like to start changing icon colors and more advanced stuff, but I’ll check that out. Thank you, Tom.

I don’t see this in your config:

frontend:
  extra_html_url:
    - /local/custom_ui/state-card-custom-ui.html
  extra_html_url_es5:
    - /local/custom_ui/state-card-custom-ui-es5.html

EDIT: Nevermind. It looks like that is only for the manual installation. Their documentation is lacking

1 Like

EDIT: My dimmer seems to do without the slider entity row, so this is unrelated to anything in this post. The slider entity row module does exactly what I was trying to accomplish. Thanks!

I’ve removed the custom ui stuff and tried out the lovelace-slider-entity-row, which looks perfect. It works exactly how I want, except that I’m either hitting a bug or misconfigured something. The instructions were very clear and similar to other custom card modules I’ve added but would you mind taking a look to see what I’ve missed here?

Sometimes the light dims to 5% instead of turning off, and other times it will only turn on to 5% instead of resuming the previous level. Hopefully this animated gif shows what I’m trying to describe.
kschlichter-slider

ui-lovelace.yaml:

views:
  - id: 0
    title: Phone Interface
    cards:
      - type: entities
        title: A Card
        show_header_toggle: false
        entities:
          - type: custom:slider-entity-row
            entity: light.outside_front_lights
            name: Outside Front Lights
            toggle: true
            hide_when_off: false

If I set hide_when_off to true, the slider doesn’t reappear if I toggle the light on and the light is set to 5%. Opening the popup and setting the level higher will bring the slider back on the main UI.