CustomUI - discussion thread

[jimz011 (Jim)]

What I meant is that a lot of code from custom-ui is no longer relevant (at least if you don’t use the states-ui). Custom-ui has a lot of code to create custom cards for the states-ui. That is basically what I meant. The customize.yaml option of Custom-UI is only a small portion of the code, the rest of the code is all related to the states-ui. So for lovelace this is a component which can do way more than we actually need.

Regarding frontend vs backend, it is actually the backend that puts load on your pi, the frontend puts load on your client device. The more templates in the frontend, the longer it takes for a device to load the page. The same is true for the backend, the more sensors, automations, customizations etc you have the more it will put a strain on your pi. When using a pi, you probably prefer to do templates in the frontend as that will lower the load on your pi, but it increases it on your client.

One of those examples are the template you shared with me in my own thread last week. The one sending out a greeting like Good Morning etc. You and I both used a sensor handled by the backend. A sensor like this will put load on the pi instead of the client device. I have since moved to a frontend based sensor which puts the load on your browser instead.

In my opinion it is hard to balance both especially when you have a massive setup. In general, if you have decent hardware, doing everything in the backend will certainly load your pages faster. But if you don’t use decent hardware it is probably best to let the client do the work (as most smartphones today are pretty powerful).

Btw, you can still use Custom-UI with lovelace, I use it too!

Edit: if you’re interested in that frontend greetings template without the need for a sensor I am happy to share it.

[123 (Taras)]

I use Custom-UI just to modify the appearance of icons. If it can be done with Lovelace then I’ll uninstall Custom-UI (because it throws the occasional error in my log).

How would one replicate the following functionality with Lovelace?

Change climate icon’s appearance and color depending on its state and its hvac_status attribute.

climate.thermostat:
  templates:
    icon: >
      if (state === "off") return "mdi:power-off";
      if (attributes.hvac_action === "heating") return "mdi:fire";
      if (attributes.hvac_action === "cooling") return "mdi:snowflake";
      if (attributes.hvac_action === "auto") return "mdi:autorenew";
      if (attributes.hvac_action === "idle") return "mdi:sleep";
      return "mdi:power-off";

    icon_color: >
      if (attributes.hvac_action === "off") return "gray";
      if (attributes.hvac_action === "heating") return "red";
      if (attributes.hvac_action === "cooling") return "blue";
      if (attributes.hvac_action === "auto") return "green";
      if (attributes.hvac_action === "idle") return "black";
      return "gray";

Change a sensor icon’s appearance and color depending on its state.

sensor.security_status:
  templates:
    icon: >
      if (state === 'Disarmed, Ready') return 'mdi:thumb-up-outline';
      if (state === 'Stay, Ready') return 'mdi:shield';
      return 'mdi:thumb-down-outline';
    icon_color: >
      if (state === 'Disarmed, Ready') return 'green';
      if (state === 'Stay, Ready') return 'green';
      return '#FDD835';

[SylvainGa (Sylvain Gagnon)]

I got hints but not definitive answers on how to do it. With custom-ui, it’s very easy and GLOBAL.

[petro]

it depends on the method you want to use. With lovelace, theres’s about 9000 ways to get what you want. For example, in the button card, the code is identical to what you have there. It the template card (that uses jinja) it’s jinja code. For the 100% template card, the code is identical.

[SylvainGa (Sylvain Gagnon)]

Thanks, what about in a picture-elements? What can I use there to replicate what custom_ui can do?

[petro]

2 of the 3 items I just listed work in picture elements. 100% template card and the template card. Both of them allow you to template everything.

Also card mod allows for jinja.

[123 (Taras)]

@petro

With lovelace, theres’s about 9000 ways to get what you want.

I need whichever one that provides the simplest result. I’m currently using entities cards to render climate and sensor.

    cards:
      - type: vertical-stack
        cards: 
          - type: entities
            show_header_toggle: false
            title: Security
            entities:
              - entity: sensor.security_status
                name: Status

     < other stuff >

      - type: vertical-stack
        cards:
          - type: entities
            title: Climate
            show_header_toggle: false
            entities:
              - climate.thermostat

sensor.security_status with yellow ‘thumbs-down’ icon:

climate.thermostat with black ‘sleeping’ icon:

So if there’s a way to control the appearance of the icon in a given entities card, I’m ready to use it instead of Custom UI.

[petro]

Yes, card mod can do this

style:
 ha-icon {
   color: {{ jinja here }};
}

EDIT: This goes on the individual entity. You may be able to put this on the card and it will apply to all items in the card (I believe, I haven’t done it but it claims to work).

[123 (Taras)]

Thank you! I’m reading through the docs now and it looks promising. I need to apply dynamic styling on a per-entity basis and, based on what I’ve read so far, this looks like it will do the trick. If I’m successful, I’ll post examples so others can compare the changes I made to get from Custom-UI to card-mod.

[petro]

If you combine it with lovelace_gen, you can compartmentalize everything you want for lovelace as well.

I’m in the process of shifting over to lovelace_gen, it’s taking quite some time, but in the end the overhead will be much easier to manage.

EDIT: Ask away as well. I have some intimate knowledge with this crap at the moment. lovelace_gen looks scary but it’s quite easy once you understand the flow.

[123 (Taras)]

Wow! A pre-processor for ui-lovelace.yaml? OK, after I finish experimenting with card-mod I’ll explore lovelace_gen.

[123 (Taras)]

I’ve learned how to dynamically change the icon’s color but can’t find an example of how to dynamically change the icon. Does card-mod support it or will I need to use something else?

[petro]

Dude, it’s great. I wish I found it last year.

[petro]

@123

I’ve learned how to dynamically change the icon’s color but can’t find an example of how to dynamically change the icon . Does card-mod support it or will I need to use something else?

Icon will require alittle more effort. There are 2 custom cards that can handle this.

Jinja

GitHub - gadgetchnnel/lovelace-card-templater: Custom Lovelace card which...

JS

GitHub - iantrich/config-template-card: 📝 Templatable Lovelace Configurations

[123 (Taras)]

OK, I thought I was just missing something obvious with card-mod. I’ll check out and compare the other two.

[petro]

The beauty of going 100% lovelace is that you can come up with crazy crap. This is a mock card that I recently came up with that shows door status, last opened, and who opened it.

[jimz011 (Jim)]

Problem with lovelace is that it isn’t system wide. Meaning that if you open up the more-info window you’d still see the default icon. This is also true for all other areas of the interface where you can’t define an icon. The beauty of customizer is that it is a 100% system wide and it even reflects to the “devices and integrations page in the UI”.

But true lovelace is more versatile, I use both for this reason.

[jimz011 (Jim)]

If you use button-card templating icons is super easy.

[petro]

@jimz011

Problem with lovelace is that it isn’t system wide.

Yeah, they need to add a way to customize icons better or add more device classes.

[petro]

Yeah, that’s what I do, but @123 was doing this for the entities card