CustomUI - discussion thread

[poudenes]

===

try

==

just 2 instead of 3

climate.thermostat:
  friendly_name: Thermostatus
  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";

[Mariusthvdb (Marius)]

jut for the fun of it we should really be using mappers, but if you don’t want that, you can also do:

        icon: >
          var action = entity.attributes.hvac_action;
          if (state == 'off') return 'mdi:power-off';
          if (action == 'heating') return 'mdi:fire';
          if (action == 'cooling') return 'mdi:snowflake';
          if (action == 'auto') return 'mdi:autorenew';
          return 'mdi:pause-circle';

btw there’s a sublet difference between == and === , in this case the == suffices

update

couldnt resist:

          var action = entity.attributes.hvac_action;
          var icon = {off:'mdi:power-off',
                      heating:'mdi:fire',
                      cooling:'mdi:snowflake',
                      auto:'mdi:autorenew'}
          return icon[action] ? icon[action] : 'mdi:pause-circle';

should do it. Note the states needn’t be quoted, only the icons. Using this in the button-card only requires the enclosing [[[ and ]]]

[123 (Taras)]

@poudenes

just 2 instead of 3

Sorry, I don’t understand the point of your suggestion. It doesn’t matter if it’s == or === because the entire template is ignored if Custom-UI is not installed. That’s been the point of this exercise, to eliminate the use of Custom-UI and replace its functionality with custom cards.

In addition, the triple-equal was just something I copy-pasted from an example many, many versions ago and have left it that way ever since. I understand the variable’s type is unlikely to be anything other than string thereby making the use of triple-equals superfluous. Nevertheless, whether double or triple, it’s moot.

[petro]

Not to mention == vs === is pretty much meaningless with strings that aren’t numbers.

[davefi (Dave)]

Another vote for button-card from me, the damn thing is so configurable its scary!

[AhmadK (akasma74)]

@123

It now looks and works exactly the way I want it (spartan) but with one enormous showstopper: clicking it doesn’t open the more-info panel so there’s no way to control the thermostat.

It changes icons and their colours, calls appropriate more-info.

I had to create an internal template sensor to get required state string from generic_thermostat:

- platform: template
  sensors:
    thermostat_current_state_and_temp:
      value_template: >
        {% set state_object = states.climate.thermostat %}
        {{ state_object.attributes.hvac_action}} {{state_object.attributes.current_temperature}} °C

and here is the button-card in entities card:

type: entities
entities:
  - type: 'custom:button-card'
    style: |
      ha-card {
        box-shadow: none
      }
    entity: sensor.thermostat_current_state_and_temp
    tap_action:
      action: more-info
      entity: climate.thermostat
    name: |
      [[[
        return states["climate.thermostat"].attributes.friendly_name;
      ]]]
    label: |
      [[[
        return states["climate.thermostat"].state + ' ' + states["climate.thermostat"].attributes.temperature + '°C'
      ]]]
    show_state: true
    show_label: true
    size: 60%
    state:
      - operator: template
        value: |
          [[[
            return entity.state.startsWith('off');
          ]]]
        icon: 'mdi:power-off'
        color: gray
      - operator: template
        value: |
          [[[
            return entity.state.startsWith('idle');
          ]]]
        icon: 'mdi:sleep'
        color: black
      - operator: template
        value: |
          [[[
            return entity.state.startsWith('heat');
          ]]]
        icon: 'mdi:fire'
        color: red
    styles:
      grid:
        - grid-template-areas: '"i n s" "i l s"'
        - grid-template-columns: 14% auto auto 10px
      card:
        - font-size: 14px
      name:
        - justify-self: start
        - text-transform: capitalize
      label:
        - justify-self: start
        - text-transform: capitalize
        - color: var(--secondary-text-color)
        - font-weight: 300
      state:
        - justify-self: end
        - text-transform: capitalize

That’s my first button-card so obviously it can be done better, I just wanted to see if it’s possible to make a functional one.

All in all it is possible, button-card is a very powerful thing.

[123 (Taras)]

@AhmadK

I appreciate the example you shared. However, the difference in complexity between what you posted and what I currently do to achieve the same effect, has led me to decide that I will continue using Custom-UI.

Hopefully, by the time I absolutely must discard Custom-UI, there will exist a compact way in Lovelace to achieve my modest requirements.

[AhmadK (akasma74)]

@123

difference in complexity between what you posted and what I currently do to achieve the same effect, has led me to decide that I will continue using Custom-UI.

Agree, I wish it could be easier… on the other hand, I added some new functionality to it (on/off by hold) and it’s literally a couple of strings so that’s the core config that takes the most time and space.

[AhmadK (akasma74)]

It’s definitely possible to avoid creating additional sensors (using custom_fields) so it looks better but the whole thing is almost 100 lines… that’s the price for flexibility (as it’s really flexible in terms of what is configurable and where we can place it on the card but requires some JS knowledge - grid etc).

[Mariusthvdb (Marius)]

for individual buttons this can be a pain, but when you have a set of identical buttons for lights/switches what have you, you can create a button-card-template, or a decluttering template, or even use Lovelace_gen to cut code lines drastically.

Still no replacement for custom-ui, (to get back to topic) but very nice indeed.

[Mariusthvdb (Marius)]

FYI: Custom-ui for HA 110+ is here
Not all options designed for state cards are supported by Lovelace, but many still are, and of course icon_color templates work again. Thanks to all who helped me create this.

And of course, to Andrey! Where ever you may be, hope you fare well.

[maurizio53 (Maurizio Fabiani)]

That’s good… i have some questions about it.
What to do with the old configs? Actually i have this in the frontend.yaml:

  extra_html_url:
    - /local/custom_ui/state-card-custom-ui.html
    - /local/custom_ui/custom-weather-animated.html
    - /local/hass-bha-icons.html
  extra_html_url_es5:
    - /local/custom_ui/state-card-custom-ui-es5.html
    - /local/custom_ui/custom-weather-animated.html

And now i have only the custom-ui.js inside /www/custom-ui/ and added the entry inside resources.yaml.

Can i delete the old folder and the options inside frontend?

BTW I reload resources and cleared cache but still have the old custom ui in the infos…

[Mariusthvdb (Marius)]

@maurizio53

What to do with the old configs? Actually i have this in the frontend.yaml:

for custom-ui: custom-ui/README.md at master · Mariusthvdb/custom-ui · GitHub

es5 can probably be taken out completely since that is for older devices. Unless you have older devices of course

the animated weather card has long been replaced by a Lovelace variant.
the icons, I dont know. But, extra_html_url imports are soon to be deprecated, so best find a substitute.

depending on the card (does is start and end with ), you might want to test the same technique.

[maurizio53 (Maurizio Fabiani)]

Ok, thanks… now after many clear cache i see the new adapted version.

[maurizio53 (Maurizio Fabiani)]

Got this error after restarting:

2020-05-28 22:51:22 ERROR (MainThread) [frontend.js.latest.202005195] https://192.168.1.24:8123/local/custom-ui/custom-ui.js?v=20200528:31:8908 Uncaught TypeError: e.push is not a function

[Mariusthvdb (Marius)]

@maurizio53

Got this error after restarting:

as expected: custom-ui/README.md at master · Mariusthvdb/custom-ui · GitHub

[maurizio53 (Maurizio Fabiani)]

One thing… i still can see in the customization of the entities, voices regarding the old custom UI. How to delete them (i already disabled all the old entries about it)?

[TriStone]

One more way of integration, probably the most “modern” considering the way HA is moving to

There is no need to modify any config files, especially usefull if no resources.yaml is used in your
config yet.

Ensure you have enabled Adavnced mode for your user. And then:

[Mariusthvdb (Marius)]

@maurizio53

voices regarding the old custom UI

must confess I don’t have a clue what you are saying here…

[maurizio53 (Maurizio Fabiani)]

What i mean is the following:
when i go to the customization ui and want to change the attributes for an entity i can see between other options the following:

That, i think, is related to the old custom_ui or am i wrong? In case it is, how to delete those entries as i don’t have anymore nothing related in the various configs?
Hope to be clear now…