andrey
(Andrey)
January 26, 2018, 10:15am
1
I just published a new CustomUI release 20180126.
Update is required for HA 0.62+
In this release:
Support for theming top-of-the-page badges.
Climate state-card can now get a temperature-controlling slide like light and cover cards.
Hotfix for HA 0.62
Please fill the usage poll if you didn’t do so yet
10 Likes
Would I be able to use this to achieve what I was asking here…
Surprised I couldn’t find a previous example of this but I’m trying to achieve something like the example below…
[Untitled-2]
…so I can see at glance who’s home, which I know I could do with ‘hide if away: true’, but I’d like to keep the 'away’s visible so I can click the badge to see the time they left.
Any ideas?
…or something similar and if so, any pointers much appreciated?
andrey
(Andrey)
January 26, 2018, 8:49pm
3
The badge color is controlled using --ha-label-badge-color
So you need to set up a theme:
frontend:
themes:
home:
ha-label-badge-color: green
Then activate the theme:
homeassistant:
customize:
device_tracker.bob:
templates:
theme: if (state === 'home') return 'home'; else return null;
1 Like
Thank you, very much appreciated, will give it a go in the morning.
Having a bit of trouble getting it working, Chrome inspector gives me the below which shows it’s picking it up but being overridden by the default…
I have the below in my config under homeassistant:
customize_glob:
"device_tracker.*":
custom_ui_state_card: custom-ui
which doesn’t make any difference other than to break a group I have elsewhere in the front end with the device_tracker states shown.
I’m on 61.1 hass.io and installed using this option…
customizer:
custom_ui: local
Any ideas? Am I supposed to be putting anything in the ‘Custom UI settings’ under ‘Configuration’ in the front end?
andrey
(Andrey)
January 27, 2018, 1:45pm
6
Try to override label-badge-red to green instead.
1 Like
Perfect!
Many thanks for your help now to find what else I can do.
covrig
(Covrig)
January 27, 2018, 5:38pm
8
Thanks! As always, great job. Works great.
finity
January 27, 2018, 7:46pm
9
Is there any way you could put these notifications under a single thread so it would be easier for the people who use your CustomUI to see when there is a new release?
That way we can subscribe to the thread and get notified when there is a new post.
Unless there already is one and I’ve just missed it…
1 Like
andrey
(Andrey)
January 27, 2018, 7:58pm
10
I’ll try do so starting with the next release.
in the end what was your solution?
trying to change the badge color here based on home/away, or online/offline. Please share your code?
Thanks Marius
Exactly as @andrey originally suggested but changing the theme part to…
frontend:
themes:
home:
label-badge-red: green
Ok thanks .
And which customization ?
ive customized three badges as follows:
homeassistant:
customize:
sensor.status_badge:
templates:
theme: if (state === '0') return 'home'; else return null;
sensor.inuse_badge:
templates:
theme: if (state === '7') return 'home'; else return null;
sensor.home_badge:
templates:
theme: if (state != '0') return 'home'; else return null;
with this in frontend_themes:
home:
ha-label-badge-red: green
they wont turn green, so maybe the customizations is incorrect? I want them to meet the math =0 =7, or not=0…
Apart from anything else you’ve added an ‘ha-’ to the theme.
HI Andrey,
will this work for a sensor badge also? Im trying to implement it but it wont stick.
have this theme:
green_badge:
ha-label-badge-red: green
label-badge-red: green
label-badge-background-color: white
label-badge-text-color: green
and these sensors customizations:
homeassistant:
customize:
sensor.status_badge:
templates:
theme: "if (state === '0') return 'green_badge'; else return null;"
sensor.inuse_badge:
templates:
theme: "if (state === '7') return 'green_badge'; else return null;"
sensor.home_badge:
templates:
theme: "if (state !== '0') return 'green_badge'; else return null;"
badges will only show as:
maybe the math-expression is incorrect? im uncertain when to use === and == and != or maybe !== respectively. the numbers represent the real count of certain entities.
the sensor_badges are created in python:
hass.states.set(entity_id, groups_count[idx], {
'friendly_name': fname,
'unit_of_measurement': badge,
'entity_picture': picture,
'hidden': hidden,
'order': order
})
Thanks,
Marius
1 Like
RobDYI
February 16, 2018, 2:56pm
17
I have been using CustomUI for awhile and love the features, thanks for your work.
I was rereading the docs and discovered a feature that I have been needing for the past year. I have set it up but it shows all entities that are on including automations.
Is there a way to limit the entities in the group.on_devices in the example?
# Templates
The `templates` attributes allow you to inject your own expressions and code using JavaScript code or template literals in order to override entity attributes and state. Within the code / template literals, you have full access to the entity's state object, which allows you to access other properties such as last_changed, attributes.friendly_name, etc. The full set of objects available is shown below.
Additionally, `extra_data_template` attribute is always evaluated as a template without using `templates` attributes for it.
In order for a template to return "nothing", for example so that `extra_data_template` won't take space or allow showing `show_last_changed` - return `null` from your template. Note that `null` can only be returned using code format, as template literal format always returns a string.
**Note that those are JavaScript templates evaluated in your browser, not Jinja2 templates which are evaluated server-side and use a different syntax.**
### Available variables
#### Global variables
Those variables allow one entity to set state / attribute based on another entity or some other "external" thing. Using those hurts UI performance, so use them only if you indeed want an entity to depend on something external.
`hass` - the hass object
`entities` - a map object from `entity_id` to state objects.
#### Local Variables
`entity` - the state object for the current entity.
This file has been truncated. show original
Make a group that contains all on entities.
Note that the group itself must be preexisting, CustomUI can’t create a new group.
Note this doesn’t change group membership that the backend sees, so calling services on this group would only affect the original members.
homeassistant:
customize:
group.on_devices:
templates:
entity_id: return Object.keys(entities).filter(key => entities[key].state === 'on')
andrey
(Andrey)
February 16, 2018, 3:14pm
18
I don’t quite understand the question? You can make any template rule you like. For example to make a group of “on” entitites which end with “a”:
homeassistant:
customize:
group.on_devices:
templates:
entity_id: "return Object.keys(entities).filter(key => entities[key].state === 'on' && key.endsWith('a'))"
2 Likes
RobDYI
February 16, 2018, 3:39pm
19
Got it, thanks. I have never seen or used Java script before but you pointed me in the right direction.
group.active:
templates:
entity_id: "return Object.keys(entities).filter(key => entities[key].state === 'on' != key.startsWith('auto'))"
1 Like
andrey
(Andrey)
February 16, 2018, 4:17pm
20
If you mean “and not” it would be ... && !(condition_here)
Also key is the entity_id, i.e. light.my_bedroom
so it will never start with auto.
1 Like