CustomUI - discussion thread

Just follow the manual install instructions, works perfectly with Hass.io

Just found this, I can’t believe what I’ve been missing out on.

I’m wondering if there’s any way to sort entities in a group based on their state. I’m thinking using the template component with entity_id it should be possible to get all entity_ids in a group, sort them based on state, and return them, but my brain doesn’t seem to be working for me tonight.

Thanks!

1 Like

Starting from HA 0.66 there is API for custom uis to display version. It is shown at the bottom of that page under “Frontend JavaScript version”, so displaying an old version for 0.66 was indeed a cache issue.

I’m not using hass.io myself, but if anyone where to develop a CustomUi hass.io add-on that would be great :slight_smile:

@claytonjn
For sorting a group the following should work to make ‘on’ entities to appear first:

homeassistant:
  customize:
    group.my_group:
      templates:
        entity_ids: >
          return attribute.sort((a, b) => {
            if (entities[a].state === 'on' && entities[b].state !== 'on') return 1;
            if (entities[b].state === 'on' && entities[a].state !== 'on') return -1;
            return 0;
          });

Can you help me to install in hassio?

As with other users of this extension for Home Assistant, starting from version 0.66 the rgb_color directive no longer works to change icons color. To date, no answers yet on the forum and on the GitHub repository. I would like to know if a solution has been found to allow this beautiful extension for Home Assistant to work again.
Thank you for your contribution.

The broken rgb_color is unrelated to CustomUI.

Starting from HA 0.66 icon color is controlled by a 2-member hs_color array attribute (hue, saturation) instead of 3-member rgb_color array attribute (red, green, blue)

Thank you, Replaced all rgb_color with hs_color and working same way as before.
icon_color

I tried several times to install and activate CustomUi, but always unsuccesfully.I followed the docs step by step but never saw a change in my UI. I run HASS on Hassbian. My question is: is CustomUi compatible with hassbian or not as my doubt is this…

Hi Vlad,
I would like to know how you have configured the color of the text to transform in green. Could you share the code?
Thank you.

Use: New CustomUI release

Install, configure.
Define:
themes:
green:
primary-text-color: ‘#008000
red:
primary-text-color: ‘#ff0000

In customize.yaml example:
sensor.speedtest_ping:
custom_ui_state_card: state-card-custom-ui
icon: mdi:speedometer
friendly_name: Ping
templates:
theme: “if (state == ‘unknown’) return ‘red’; else return ‘green’;”

@andrey The problem is that hs_color does not accurately map to rgb_color. We also need to add brightness. Here’s what I am using currently:

sensor.*_futures_change_pct:
  templates:
    hs_color: >
      if (state < -4) return [360, 85];
      if (state < -2) return [23, 90];
      if (state < 0) return [50,100];
      if (state < 2) return [65,85];
      if (state < 4) return [100,65];
      return [150,95];
    brightness: >
      if (state < -4) return 216;
      if (state < -2) return 255;
      if (state < 0) return 255;
      if (state < 2) return 220;
      if (state < 4) return 192;
      return 153;

I used the following to obtain the colors (converted RGB into Hue, sat, brightness using http://colorizer.org/ and scaled the brightness to 0-255 based on @NovapaX suggestion)

First, it is definitely less elegant than using rgb_color. More importantly, the colors are not accurately rendered. Here’s the output:

image

The color is #E1F224, which is equivalent to HSB values of 64.95, 85.12, and 94.9 (or a scaled value of 241.995).

3 Likes

Hello,

I need some tabs and/or groups to be hidden for all device except a few, I cannot figure out how to make it work:

homeassistant:

    customize:
        group.tab_settings:
            order: 10
            hidden: true

    customize_glob:
        group.tab_settings:
            device:
              "*.*":
                hidden: true
              mydevice:
                hidden: false

group:
    default_view:
        view: yes
        entities:
            - group.infos
            - group.family
            - group.lights
            - group.energy
            - group.system


    tab_settings:
      name: "Réglages"
      view: yes
      entities:
          - switch.server_media
          - group.all_switches
          - group.all_automations

Thanks in advance.

1 Like

First of all thanks to @andrey for your amazing custom-ui :1st_place_medal:.

I have a feature request, is it possible to add a feature to hide the slider when the light is off?
This will avoid putting lights on accidentily when scrolling through the lights on the phone/tablet.

I use confirmable controls for this

That’s only working for the control button and not for the dimmer slider isn’t it?
In my case I accidentely turn on the light by pressing somewhere on the dimmer slider when scrolling through the page.

That’s a very fair point.

I only use control buttons on my normal ui, and if I want to access a dimmer slider then I hit a control to bring up the pop-up

Can someone confirm if Per entity theming is working with Home Assistant 0.67.1?

EDIT: It’s working fine on Chrome 66 but not on Safari 11.1.

Is it possible to change only the state appearance using Per entity theming?

is this still at hand? quite an issue if one has many carefully selected rgb_color templates… Why is this done at all? In your method, is it the hsl setting you use for hs_color?

I ask because when lets say i need to translate the rgb[251,210,41] I see the following:


Not sure what to use here…

extra question: can we maintain the hex colors? And if so, couldn’t we just use the #fbd229 in this case for the icon color.

Or is it the fact that HA now only uses hs_color for coloring the icons…

Cheers,
Marius

Yes…it seems HA now use some version of HSB. Actually, you cannot even use the B value directly. You need to use a scaled value for brightness. The exact formula for B to be used is (B-50)*5.10 (@NovapaX gave me that formula and I have no idea why it has to be that complicated).

See my config for a working example.