New CustomUI features

[andrey]

Custom UI got 2 new features.

1. Now any attribute can be context aware, not just friendly_name and hidden.
2. Hide Control, Show Last Changed, Extra Data Attribute, and Extra Badge were previously supported only for Light and Cover cards. Now they are also supported an any toggle card (like switch or lock) or plain card (like sensor, or group)

EDIT: The default state_card_mode changed to be no-slider

EDIT2: show_last_changed is now supported for all state cards (except Configurator)

[RobDYI]

Thanks for all the work on this project. When I upgraded, I lost the slider and badges, any idea’s?

  customize_glob:
    "*.*":
      custom_ui_state_card: custom-ui
      show_last_changed: true
    light.garage_timer:
      friendly_name: Garage Timer
      extra_badge:
        attribute: brightness
    light.kitchen_light_timer:
      friendly_name: Kitchen Light Timer
      extra_badge:
        attribute: brightness
    light.lock_timer:
      friendly_name: Lock Timer
      extra_badge:
        attribute: brightness

[RobDYI]

Without the slider or badges picture

When i reverted back, I lost the extra badges. It took me a while to figure out clearing browser cache when upgrading. (edit: extra badges still there, just had zero value in this case)

[oakbrad]

Awesome! Thank you for adding this, really cool.

Guess I should go water my plants…

I’d really like to see show_last_changed on binary_sensors so I can track motion and doors in the UI!

[andrey]

Note that the default state_card_mode changed to be no-slider

[andrey]

show_last_changed is now supported for all state cards (except Configurator)

[pilotak]

I really like the slider feature for lights. It would be nice to have a facility to use input_slider along side switch - same as light but slider will be user chosen entity.

[oakbrad]

I don’t seem to be able to give a contextual name to a badge that is in a nested group. Is this possible? The names seem to work if I include the group.innergroup as a state card by itself, but not if it’s nested in another group.

Thanks again for your code, it has really made my UI much more useful and readable.

ie I’d like the badges to just say “Entry”, “Kitchen”, etc.

[andrey]

The “context” here is the “Motion” group, not that inner “4-badges-group”

[RobDYI]

I seem to have got everything looking like I want but the front end slider on lights don’t change value although the slider position moves. When I hit the light and pop up card appears, the slider works from there. In the picture, the lock timer slider moves but its value doesn’t. (it actually moved from 62 to 79 as a result of the timer, not moving slider)

[oakbrad]

I appear to be having the same problem. Everything looks great after a lot of tinkering, but my light sliders are no longer working.

[jono]

I’m new to this, trying to set it up for the first time.

Here’s how I was doing it previously without the CustomUI

With the code like so

upstairs:
  name: "Upstairs"
  entities:
    - light.landing_light
    - input_slider.landing_light_brightness

How do I specify that the new slider in the CustomUI should use the input slider I’ve already setup? (input_slider.landing_light_brightness)

Or does the CustomUI automatically setup the code for the new slider? At the moment moving the new slider doesn’t change the light at all.

[andrey]

@jono If you want to control a light via the slider you need to write automation like in the docs here: https://home-assistant.io/components/input_slider/

However if this is the only reason you added the slider - you can use customUI instead to make slider appear in the light card itself.

[jono]

Thanks Andrey.

I already have/use the automation code for ‘input_slider.landing_light_brightness’

- alias: "Landing Light Brightness"
  hide_entity: true
  trigger:
    platform: state
    entity_id: input_slider.landing_light_brightness
  action:
  - service: light.turn_on
    data_template:
      entity_id: light.landing_light
      brightness: '{{ states.input_slider.landing_light_brightness.state | int * 2.55 | round(0) }}'

Just wondering how I can 'tell CustomUI' to use that code or attach it to the CustomUI slider so it will work?

[andrey]

Like I said, you can’t attach code to custom UI.

If you want to have a 0…100 slider to control your light - customUI doesn’t support that.
But if you are ok with the slider displaying 0…255 or now displaying numbers at all - you can make a slider (not input_slider) appear inside the light “card”: https://github.com/andrey-git/home-assistant-custom-ui#features-available-for-light-and-cover-domains-only

[jono]

Ah, OK. Sorry, I misunderstood

Is it possible to do something like this below and show the light brightness percentage to the right of the slider? (not inside a badge)

[marksev1]

A bit off-topic but could you add dark theme also

[andrey]

I’m yet to find a way for theming…

[oakbrad]

Well if we are making requests… how about embedding an image in a group? Maybe through the camera component?

https://community.home-assistant.io/t/how-to-display-a-graph-in-a-card

[andrey]

@RobDYI @oakbrad
I pushed a new version - could you check if it fixes the issue?