New CustomUI release

Mariusthvdb · February 15, 2018, 9:30pm

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…

Bobby_Nobble · February 16, 2018, 12:31am

Apart from anything else you’ve added an ‘ha-’ to the theme.

Mariusthvdb · February 16, 2018, 1:53pm

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

RobDYI · February 16, 2018, 2:56pm

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?

github.com

andrey-git/home-assistant-custom-ui/blob/master/docs/templates.md

# 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 · February 16, 2018, 3:14pm

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'))"

RobDYI · February 16, 2018, 3:39pm

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'))"

andrey · February 16, 2018, 4:17pm

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.

RobDYI · February 16, 2018, 4:31pm

For some reason my automation entities showed up but that filter worked.

automation.lock_door

it might be because of this

group.all_automations:
  hidden: false

Mariusthvdb · February 16, 2018, 4:36pm

that’s what Andrey suggested wasn’t it? still struggling here…

andrey · February 16, 2018, 6:47pm

=== compare values of the same type.

If you use hass.states.set then maybe you are setting a numeric (and not string) value?
In that case compare "if (state === 0) ..."

Mariusthvdb · February 16, 2018, 7:03pm

yes numeric indeed. and the ‘is-not version’, is that (state !== 0) ? I need that too for one of the badges

Bobby_Nobble · February 17, 2018, 1:28pm

Like I said,

ha-label-badge-color

couldn’t be overridden so changed it to…

label-badge-red

which works perfectly but you put…

ha-label-badge-red

Mariusthvdb · February 17, 2018, 1:33pm

a, i missed that.
still, im using this now:

green_badge:
  ha-label-badge-red: green
  label-badge-red: green
  label-badge-background-color: white
  label-badge-text-color: green

and when i select this theme as full frontend theme, it works perfectly.

Will take out the ha-label for sure, but i feel it has something to do with the template, or even more obscure, with HAssio not showing the correct result in the Frontend. There are several battery icon templates that calculate just fine (in the templating tool) but wont show in the frontend. Seems something is preventing that.

Mariusthvdb · February 17, 2018, 3:12pm

@andrey since theming top-of-the-page badges is mentioned on your change log for version 0126, is there anything special we need to set for that? Cant seem to find any other reference to these
top-of-the-page badges .

I ask because the badges in my example are, so maybe they need special care?
moreover, this does work,

sensor.br_temperature:
  templates:
    theme: >
      if (entity.state < 0) return 'blue_badge'; else return 'green_badge';

which seems to imply it’s not the definition of the theme, nor the logic, but either the fact that the problem sensors are top of the page badges, or they are created in python?

Thanks,
Marius

Mariusthvdb · February 28, 2018, 8:05am

@Bobby_Nobble
got it sorted, had to do with the fact that the badges i aimed at are created differently. We now customize them in the python script they are created in, if you’re interested, check:Summary card and badges for people, devices and status (with python script and custom card)

still would like to know the specific parts of the badges, to be able to customize them.
would love to be able to change the bottom (label) independently from the top (badge).

it must be possible to change the color of the text in the label and the label itself.
Names are a bit confusing here cause label-badge refers to both…

just cant find any documentation on the names of these elements on https://github.com/PolymerElements/
Cheers,
Marius

Bobby_Nobble · February 28, 2018, 4:32pm

If you do a right-click > Inspect on the element in Chrome, or however you do it in the browser of your choice, you can follow the code in the panel that opens and that should hopefully give some answers. That’s how I found what was actually controlling the colour of the badge I wanted to change rather than what seemed right at face value.

Mariusthvdb · February 28, 2018, 4:34pm

aha, good idea ! will try that.

its a bit silly one has to change the color of label-badge-red to green…

and these:

#source https://github.com/home-assistant/home-assistant-polymer/blob/master/src/resources/ha-style.html

 /* for label-badge */
    --label-badge-background-color: white;
    --label-badge-text-color: rgb(76, 76, 76);
    --label-badge-red: #DF4C1E;

    --label-badge-blue: #039be5;
    --label-badge-green: #0DA035;
    --label-badge-yellow: #f4b400;
    --label-badge-grey: var(--paper-grey-500);

not sure what they do, or which parts they refer to. Your tip might help, will report back if successful …

martikainen · March 1, 2018, 11:36am

Is there any way to display all sensor values as badges?

For below example I have xiaomi sensors presenting temperature, air pressure and humidity,
I’ve customised the temperature entity to show air pressure and humidity as a badge, but i want it to present all 3 using badges.

The code I’m using right now.

  customize:
    sensor.badrum_temperatur:
      friendly_name: Badrum
      extra_badge:
        - entity_id: sensor.badrum_fukt
        - entity_id: sensor.badrum_lufttryck
        - entity_id: sensor.badrum_temperature_battery
          blacklist_states: '0'

And how i would like it to be presented (copy paste power )

martikainen · March 3, 2018, 10:52am

After some thoughts I found a way to get this done, I created a fake value_template sensor that presents nothing

And then I used this in the frontend and added my extra badges to it.
Much cleaner look! And i removed the air pressure stats, haven’t found any way to use that information in real life

My package:

homeassistant:
  customize:
    sensor.3dprinter_sensor:
      friendly_name: 3D Printer
      icon: mdi:thermometer
      extra_badge:
        - entity_id: sensor.3dprinter_fukt
        - entity_id: sensor.3dprinter_temperatur


alert:
  am8_printer_to_warm:
    name: "Temperaturen är över 40 grader vid 3D skrivaren"
    done_message: "Temperaturen är nu under 40 grader igen"
    entity_id: binary_sensor.am8_printer_to_warm
    state: 'on'
    repeat:
      - 0
      - 60
    can_acknowledge: True
    skip_first: False
    notifiers:
      - html5_mattias

binary_sensor:
  - platform: template
    sensors:
      am8_printer_to_warm:
        value_template: '{{ (states("sensor.3dprinter_temperatur") | float) > 40 }}'
        friendly_name: 'Tempguard AM8'

sensor:
  - platform: template
    sensors:
      3dprinter_sensor:
        friendly_name: "3D Printer"
        value_template: "{% if is_state('sensor.3dprinter_temperatur', '') %}{% else %}{% endif %}"

davefi · March 23, 2018, 12:50pm

Hey @andrey, just wondered - would it be possible to customise the badge sizes via CustomUI?

Use case is: I replaced Home/Away with Online/Offline using the Template option which works great, but the labels become quite small and not as clear to read. I zoomed in on Chrome to about 120% and they were perfect, but of course everything else was too big then. If we could scale the complete badge via CustomUI it would be perfect!

If its technically possible, I am happy to add a request to your github.

Thanks!