New CustomUI release

Share your Projects! Dashboards & Frontend
21

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
22

thatā€™s what Andrey suggested wasnā€™t it? still struggling hereā€¦

23

=== 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) ..."

24

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

25

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

26

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.
09

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.

1 Like
27

@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';

54

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

28

@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

1 Like
29

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.

30

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 ā€¦

1 Like
31

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'

image

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

image

32

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 :stuck_out_tongue:

image

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 %}"
33

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!

34

@davefi Would you like to increase the whole badge (i.e. the circle size) or just the label font size?
Changing whole badge is not supported.
The text below the badge (entity name) is controlled via --ha-label-badge-title-font-size.
Changing circle size (but not the text, value, or label) is controlled via --ha-label-badge-size
Changing circle size + value + label (but not the text) is controlled via --ha-label-badge-font-size

All this is unrelated to customUI (unless you want to do this customization per-entity)

Does this answer your question?

1 Like
35

Might i add this question:

Could you please instruct how to change the color of the label independently from the badge?

thanks,
Marius

36

--ha-label-badge-color

1 Like
37

thanks! ive been looking for these quite some time. Where can we find the full documentation/definition of all parts of the badges?

to be sure, this would be correct:

grey_badge:
  ha-label-badge-color: grey (or any other grey- # code)

?
Marius

38

There is no documentationā€¦

Yes, that would be correct.

39

Just use ā€˜inspectā€™ in your web browser and you can see everything you want as well as experiment with it on the fly.

40

must admit im not confident I understand what youā€™re saying hereā€¦
where do I use ā€˜Inspectā€™? (fwiw, I am on Safari Mac desktop)
would the be able to distinguish the separate frontend elements up to the level of the individual elements of a letā€™s say, a badge?