New Custom UI features: Context-aware names, Context-aware hiding, Badges!

Share your Projects! Dashboards & Frontend
37

Before I spend time to figure out how to theme the color of the badge and the icon, and the icon itself, I was wondering if the following is currently possible with Custom UI. At the moment, I have this state card:

05
05836×339 17 KB

My question is about the badge for my binary (motion) sensor: is there a way to make the last_changed info show up in a label on that badge (so where the 3 other badges show the unit of measurement)? Of course it would have to be abbreviated to something like 3h instead of 3 hours ago.

38

With templates you can change the state of the sensor to be whatever you like. However it won’t autorefresh.

39

Is it only me that get empty cards after a while?
I have the group header and group switch but content is empty.

Browser: Chrome on Android and PC

I have this error message in log, if that can be related:

2017-11-29 18:25:17 ERROR (MainThread) [homeassistant.core] Error doing job: Task exception was never retrieved
Traceback (most recent call last):
File “/usr/lib/python3.6/asyncio/tasks.py”, line 180, in _step
result = coro.send(None)
File “/srv/homeassistant/lib/python3.6/site-packages/homeassistant/core.py”, line 1031, in _event_to_service_call
yield from service_handler.func(service_call)
File “/srv/homeassistant/lib/python3.6/site-packages/homeassistant/components/init.py”, line 122, in async_handle_turn_service
entity_ids = extract_entity_ids(hass, service)
File “/srv/homeassistant/lib/python3.6/site-packages/homeassistant/helpers/service.py”, line 104, in extract_entity_ids
return group.expand_entity_ids(hass, [service_ent_id])
File “/srv/homeassistant/lib/python3.6/site-packages/homeassistant/components/group/init.py”, line 205, in expand_entity_ids
domain, _ = ha.split_entity_id(entity_id)
ValueError: not enough values to unpack (expected 2, got 1)

EDIT: Did som more testing, when removing this part from customglob everything shows (but no custom ui ofc)

“.”:
custom_ui_state_card: state-card-custom-ui
show_last_changed: false

I have this in my config:

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

customizer:
custom_ui: hosted

I installed using the installer so the files are in .homeassistant/www/custom_ui/

Any ideas?

40

I’m seeing the same

41

It may not be the source of your issue(s) but have a look at the Custom UI activation docs here.

Once you have, you should notice that you are combining 2 ways of activating Custom UI: by specifying extra_html_url under the frontend component AND by adding the customizer component. You only have to use one or the other.
Not only that, you used those 2 ways to specify 2 different sources for Custom UI: in the frontend component you link to the Custom UI files locally, while you set up the customizer component to use hosted files.

And finally, shouldn’t “.”: be "*.*" ? (also notice how your quotes are different, I copied/pasted them from your post above)

42

Hi
Thank you for posting, actually when reading the docs again I can see that there is a change for 0.59
extra_html_url_es5:

  • /local/custom_ui/state-card-custom-ui-es5.html

Now it is wokring!

43

Would it be possible to enhance the use of sliders for temperature control? They would have a similar function to covers I would think?

44

Climate can have two temperatures. Also the status takes more space, leaving less space for a slider.

45

Still you could make it that the sliders were only valid if under the text, one for each of the set temperatures?

46

Seems nontrivial to make a consistent UI for this case.

That said if someone implements this - you can use it together with my customUI using state_card_custom_ui_secondary

47

Capture8

trying to figure it out without success.
i did use the update.sh file script
did i miss something ?

configuration.yaml

homeassistant:
  customize: !include customize.yaml
  customize_glob: !include custom_ui.yaml
customizer:
  custom_ui: local
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

groups.yaml

asaf_devices:
    name: Asaf
    entities:
      - group.asafdevicesbadges
      - sensor.asaf_le_battery
asafdevicesbadges:
    entities:
     - device_tracker.liron_mi
     - device_tracker.asaf_le
     - sensor.asaf_le_state

custom_ui.yaml

    "*.*":
      custom_ui_state_card: state-card-custom-ui  
    group.asafdevicesbadges:
      state_card_mode: badges
      badges_list:
        - device_tracker.liron_mi
        - device_tracker.asaf_le
        - sensor.asaf_le_state
48

Not sure if related, but you are loading customui twice: once via customizer and once directly via frontend

51

Is this what it should look like?

Capture8
Capture81929×979 59.2 KB

52

This is how the custom-ui config panel looks. It is used to set device name for device-aware attributes.

1 Like
53

Hi!
Do you guys understand how to configure the distance between badges?

Screenshot_20180216-110134
Screenshot_20180216-1101341080×1920 296 KB

54

The broken distance between badges should have been fixed.

55

Hi,

Is it true that this will not work:

customize:
  group.group1:
    hidden: true

custom_ui:
  group.group1:
    custom_ui_state_card: state-card-custom-ui
    device:
      device_name:
        hidden: false

I can get it to work the other way around, using custom UI to hide it on a device but not to show something that’s hidden by default. Would be nice if this was possible.

56

Correct.

If an entity is hidden it won’t get a state-card, so there will be nothing to customize.

57

Is it possible to use Custom UI to change the HTML tag of the page so that instead of ‘Home Assistant’ in the tab on the browser you could change this ?

58

No, currently it is not possible.