Need help with Custom UI

Not sure if this was asked but having a hard time finding a solution. Anyway, I’ve been using Custom UI and its been great except for one thing.

Is it possible to hide the template part showing in the more info window? Thanks in advance.

unfortunately not (yet), I’ve updated some info on that:

oh ok. will wait for updates. thanks again…

Hi, after fixing the e.push() error, I found this hide_attributes feature and was VERY happy not seeing my big templates anymore… I was on 0.114.4 and just updated to 0.115.1 and they’re back :cry:

EDIT for the hide_attributes, updated to latest version fixed it, I didn’t saw the there was new version… But is there a way to hide the logbook???

Even more, they added a huge logbook that I’d like to get rid of…

Any reason it’s not working anymore??? Any way to also get rid of the logbook?

mm, that would be a feature request would it :wink: to the Lovelace dev’s that is, make that logbook at least optional…

havent gotten my 115.1 to be up and running reliably in the first place, so adding to custom-ui is low on the priority list.

might want to post it in the repo and ask other to join in the thinking there… please do
glad the hide_attributes are solved for you, please post a screenshot to proof it :wink:

That’s a REAL game changer for the WAF :stuck_out_tongue:
It was showing templates everywhere as I use global customizations a lot…

1 Like

nice isn’t it. Hope we can keep it working, it’s rather essential in my config. And yes, globs are the thing, though the domain customization is rather essential too, and would be reason alone to install:

  customize_domain:

    automation:
      templates: &state_color
        icon_color: >
          if (state == 'on') return 'gold';
          return 'steelblue';

    binary_sensor:
      templates: *state_color

    input_boolean:
      templates: *state_color

    switch:
      templates:
        <<: &toggle_icon
          icon: >
            if (state == 'on') return 'mdi:toggle-switch';
            return 'mdi:toggle-switch-off';
        <<: *state_color
1 Like

Hey, would you now why whenever I add a different template it has to be replicated in each?

I have those global customizations here for example:

  binary_sensor.*:
    hide_attributes:
      - templates
      - icon_color
    templates:
      icon_color: >
        if (state === 'on') return 'var(--state-icon-active-color)';
        if (state === 'unavailable') return 'var(--state-icon-unavailable-color)';
        return 'var(--state-icon-color)';
        
  binary_sensor.*_router:
    templates:
      icon: >
        if (state === 'on') return 'mdi:access-point-network'; 
        return 'mdi:access-point-network-off';
      icon_color: >
        if (state === 'on') return 'var(--state-icon-active-color)';
        if (state === 'unavailable') return 'var(--state-icon-unavailable-color)';
        return 'var(--state-icon-color)';

If I don’t put the icon_color template in the router one, it won’t have the colors… So whenever I add a new customization for a sensor or a global one, I have to duplicate icon_color for example?

yes, if you change from what is set in a glob, you need to set both. But you can easily do so by creating an anchor:

binary_sensor.*:
    hide_attributes:
      - templates
      - icon_color
    templates: &binary_color
      icon_color: >
        if (state === 'on') return 'var(--state-icon-active-color)';
        if (state === 'unavailable') return 'var(--state-icon-unavailable-color)';
        return 'var(--state-icon-color)';
        
  binary_sensor.*_router:
    templates:
      icon: >
        if (state === 'on') return 'mdi:access-point-network'; 
        return 'mdi:access-point-network-off';
      <<: *binary_color

btw, you can replace all ‘===’ with ‘==’ :wink:

never used the var’s in my templates, are these the var’s set in the current theme? and can we call these in the customizations?

1 Like

Yes they are from themes and I use them in customization… I manage few home assistant platforms for friends and family, and they have different themes to prevent errors, so using those var are very helpful to keep codes identical and modular :hugs:

cool, that’s nice to know. Ive managed to have all my buttons use the theme colors, this will add nicely to that.

must try and integrate the card_mod options for themes at once too.

Hi @Mariusthvdb, wondering if you could help me. I am trying to change the icon_color based on the state of a sensor, but can’t get it to work. I have tried installing via manual and through HACS and same result. I’ve checked developer tools in chrome, and it looks like custom-ui is loaded, but no results. Here is the customize config:

switch.living_area:
  templates:
    icon_color: >
      if (entities['sensor.living_area_lights_on'].state > 0) return 'gold';
      return 'white';

I am attempting to change the icon color on a custom button, if that matters at all.

well, that could be indeed. As far as I know custom button card needs its own customization for icon color. It does take the icon, but needs a style for the colors, like:

      styles:
        card:
          - color: var(--text-color-on)
          - background-color: var(--background-color-on)
        icon:
          - color: var(--icon-color-on)

that is, if you’re talking custom: button-card

what happens if you use a simple entities card to show the switch.living_area?

Thanks! I am indeed talking about the custom: button-card. I should have mentioned that I did try it with the built-in button card to the same effect. I can always try it through the button card customization, but wasn’t sure if it accepts template/sensor states.

Edit: Nevermind, I actually just found one of your posts on the custom-button thread from October 2019 which solved my issue. Thanks!

as this is fixed could you please mark this thread as Solved? so other users can find the solution easily?

Hi,
I know its an old thread, but I can’t get it to work. When trying to follow the readme on Github.

  1. I installed custom-ui through HACS as described (latest version v20221115)
  2. checked the lovelace resources (automatically added by the install: /hacsfiles/custom-ui/custom-ui.js?hacstag=26755814820221115)
  3. restarted HA

However, not able to add the custom-ui card. (its not listed). Is there something I missed?

I also read atrtibutes, customize-glob.yaml on the examples page.

I also have added the include customize.yaml file (in configuration.yaml) like this:

homeassistant:
  customize: !include customize.yaml

As a first test, I included

customize_domain:
  hide_attributes:
    - templates
    - icon_color
    - all # <-- this hides, well, all attributes ;-)
  templates: &state_color
    icon_color: >
      if (state < 60) return 'green';
      if (state > 79) return 'red';
      return 'yellow';

During validation it fails: extra keys not allowed @ data['customize']['customize_domain']

So my Questions:

  1. should I be able to add the custom-ui card as adding any other card?
  2. if so, what action did I mis?
  3. whats wrong with the customize.yaml?

thx in advance

there is no such thing…

on th 3d bullet, might be an indenting issue. also, you have a strange domain customization. the customizations you list aren’t supposed to work on just any domain.

see for some working examples

please start small, and set 1 customization on a single entity. see the examples in the repo

also you should see on /config/info whether custom-ui is installed and working:

so check that too

Hi
Many thanks for the reply.

After clearing the browser cache for the browser I’m using (I use multiple), it got activated.

I can now continue.

The thing I don’t understand is the “domain” part. How must I configure this? (Or do I miss some basic concept here?)

thx in advance

Well it’s all in the regular Ha customize docs .

What do you want to do would be the more appropriate start.

Hi,
That must be me than, If i search in the HA docs on domain, I get Google domains …

I made progress and have my first icon colored! :wink:

sensor.rpi_temp_octopi:
  templates: #&state_color
    icon_color: >
      if (state < '60') return 'green';
      if (state > '79') return 'red';
      return 'yellow';

Since I have multiple temp sensors I would be great to have that worked as you describe in the docs.

Using your documentation, I come up with the following:

customize_glob:
  # All Entities - Hide Templates & Icon Color
  # Note that yaml keys can't start with an asterisk. Use quotes in that case:
  "*.*":
    hide_attributes:
      - templates
      - icon_color
      - all # <-- this hides, well, all attributes ;-)

  sensor.rpi_temp_*:
    templates: #&state_color
    icon_color: >
      if (state < '60') return 'green';
      if (state > '79') return 'red';
      return 'yellow';

I get an error on validating: extra keys not allowed @ data['customize']['customize_glob']

Can you please tell me how this customize.yaml should look?

thx in advance