Lovelace - display only some attributes based on entity state?

Configuration Frontend
1

Hi folks,
I’m trying to have some attributes (“features”) of a card show / not show based on some dynamic value (say, a template or an entity state).

Specific example: I need to have a thermostat card present only some of its features, based on the value of another entity:

- type: thermostat
    entity: climate.my_ac
    features:
      - style: dropdown
        type: climate-fan-modes
      - style: icons
        type: climate-hvac-modes
        hvac_modes:
          - heat
          - cool
          - dry
          - "off"

Now, what I want is for the hvac_modes to display only some of the modes, based on some condition. The use case is that they’re all part of a VRF system and if the system is currently cooling, I don’t want the “heat” option to be displayed, and vice versa. When the VRF system is off, I want all modes to show. (I plan to have a “vrf” entity that will be either “off”, “cool” or “heat” based on state of all units.)

Is there a way to have the card become conditional in such a way?
(I suppose I can have three cards and control their visibility but that seems borderline criminal by the elegance police :slight_smile: )

Thanks for any pointers!

2

If you need to show buttons conditionally - try using card-mod.
Honestly, never did I it myself for thermostat, but it should be possible.
Use smth like “display: none” for a particular UI element dependently on your conditions defined in jinja.

3

Thank you @Ildar_Gabdullin. Sounds like a great idea!
I’m trying to implement it, but for the life of me I can’t make the card_mod config affect the button.

As an example, the “heat” option div, which I would like to set to “display: none”, is in a path like this:

document.querySelector("body > home-assistant").shadowRoot.querySelector("home-assistant-main").shadowRoot.querySelector("ha-drawer > partial-panel-resolver > ha-panel-lovelace").shadowRoot.querySelector("hui-root").shadowRoot.querySelector("#view > hui-view > hui-sections-view").shadowRoot.querySelector("div > ha-sortable > div > div > hui-section > hui-grid-section").shadowRoot.querySelector("ha-sortable > div > div:nth-child(2) > hui-card > hui-grid-card").shadowRoot.querySelector("#root > hui-card:nth-child(1) > hui-thermostat-card").shadowRoot.querySelector("ha-card > hui-card-features").shadowRoot.querySelector("hui-card-feature:nth-child(2)").shadowRoot.querySelector("hui-climate-hvac-modes-card-feature").shadowRoot.querySelector("ha-control-select").shadowRoot.querySelector("#option-heat")

How do I code a card_mod clause that will affect it?

4

I am far away from a normal PC and cannot help.
Perhaps this could be a starting point: there is an example of replacing icons for features.
But to replace an icon, you need to go down to some svg element.
In your case, you need to set “display: none: for a more higher level.
The mentioned example is here: main card-mod thread - 1st post - “fantastic” link in the bottom - Tile - custom icons for features.
Note this is a Tile, you need a Thermostat - but a method is similar.

1 Like
5

Thanks! Wow, that bunch of posts indeed merits the title “fantastic”. What a wealth of knowledge - not sure how I didn’t find it before asking here :man_facepalming:

At any rate, I made some progress with that. The only setup that seems to work for me looks like this (for now I just make them red to see it “takes”):

    card_mod:
      style:
        hui-card-features $ hui-card-feature:nth-child(2) $ hui-climate-hvac-modes-card-feature $ ha-control-select $: |
          div#option-cool {
            color: red ; 
            }

So one final(?) question is wrt the “nth-child(2)” part. It’s rather specific, so that it may be less resilient to future potential changes. Removing it does not work. I tried to replace “2” with “n” and that does not work; if I replace it with “2n” it does work. “-n+2”, which should have covered first 2, also fails. Which makes me pause… :thinking:
Is there a way to specify this in a more “generic” way, “for any nth-child” or some such? Might the above be a bug in card-mod?

Thanks so much for your help!

6

Removing what?
The expression xxx:nth-child(n) stands for “any xxx element”.
The expression xxx:nth-child(2) means “2nd”.
Suggest to Google about nth-child().