Tile Card features visibility based on state

[theandouz]

Would be great to be able to set conditions of visibility based on entity state. Primary use case is for lights and hiding there dimmer while off. Helps keep dashboards small for mobile while offering greater functionality while devices are in use.

Currently using a tile card, mushroom light card, conditional card and stack in card to get the same functionality but would be great to have as a built in feature.

[marcinbauer-ohf]

So basically Mushrooms "Collapse controls when off" ? This may have a side-effect where if you'd be looking at a dashboard and somebody or an automation would turn on lights the dashboard would shift because the cards would need to change size.

[theandouz]

Yes exactly like that, It's a side effect for some yes but I see it as a feature, my dashboards are primarily used on my phone and so getting as small of a dashboard when devices are off is preferable. It helps get an overview faster when I'm checking if I left anything on, especially for rooms that have a lot of devices. Having it as an optional toggle or yaml only override would also be good so it wont be on by default.

[marcinbauer-ohf]

I get your point. This could be solved in different ways, though. For instance, in Apple home devices that are considered "on" have a card that is white, as opposed to an "off" state one which is black.

[marcinbauer-ohf]

@piitaya ? :)

[piitaya]

Cards new have a fixed size in the grid. Having conditional sizes may broken the grid layout (1 row vs 2 rows when on for example).
For example, how do you expect the grid to be if you turn off the first light in this example?

It will look like that :

The layout shift can be worst if you decide to turn on/off multiple lights

[theandouz]

Sorting lights by having more frequently used lights would prevent some disarrangement in the grid however my current custom cards still maintain the grid while collapsed. I find typically there's no more than 4-6 lights in a room and so the overall shift isn't that noticeable.

Thank you guys for taking the time to review my suggestion, and I appreciate the work you’ve done on the mushroom and now tile cards.

[soeffi]

Having conditional sizes may broken the grid layout

@piitaya , now does that mean, that such a features will not be implemented either way, or is this still under discussion?

I'd like to +1 this idea, the mentioned side effect will only materialize in certain grid layouts - it's up to the user to decide against using the "Collapse controls when off" or choose a single column layout which is not affected (or live with the result).

For me too, I'd be glad to remove at least the color temperature selection control when the light is off. For space reasons, and - more importantly in my case - for visual clarity. I somewhat dislike that very present colorful bar being displayed while the light is actually off.

Thanks!

[T1ppes]

I would also like to see the features to be visible only on provided condition, mainly the entity being on or off as per the Minimalist UI collapsible feature.

[michielton]

This can be achieved using these two custom cards:

config-template-card
lovelace-card-mod

Example of tile card (media_player) with conditional feature visibility and modded feature styles:

type: custom:config-template-card
variables:
  ENTITY_STATE: states['media_player.beneden'].state
entities:
  - media_player.beneden
card:
  type: tile
  grid_options:
    columns: 12
    rows: auto
  entity: media_player.beneden
  color: blue
  show_entity_picture: true
  hide_state: false
  state_content:
    - state
    - app_name
    - media_artist
    - media_title
  vertical: false
  features:
    - type: media-player-volume-slider
      show_mute_button: false
      show: false
    - type: media-player-playback
      controls:
        - turn_on
        - turn_off
        - media_play
        - media_pause
        - volume_mute
  features_position: bottom
  card_mod:
    style:
      hui-card-features$:
        .: "${ENTITY_STATE === 'off' ? ':host { display: none !important; }' : '{}'}"
        hui-card-feature$:
          hui-media-player-volume-slider-card-feature$: |
            ha-control-slider {
              --control-slider-thickness: 20px !important;
            }
          hui-media-player-playback-card-feature$:
            .: |
              ha-control-button-group {
                --control-button-group-spacing: 5px !important;
                width: fit-content;
                height: fit-content;
              }
            ha-control-button$: |
              button {
                --control-button-border-radius: 8px !important;
                width: 28px !important;
                height: 24px !important;
              }

Bit hacky though but for now it works! 😉

[andrekrit]

While it's great that people suggest "alternatives" to implement this - the feature can and should definitely be implemented natively with a simple toggle - just like Mushroom did it. I've had it with people's excuses "but everything will shift". Yes, of course, that's the idea! If it works with Mushtroom cards, it can work with Tile card as well. If you don't like shifting cards, don't use the feature when it is added eventually. I LOVE Home Assistant, but it makes me sad that thousands of "trivial" features get added monthly, while frequently requested features get ignored or people shamed for asking about them ;-(.