WTH can you not combine different ways of displaying information in one card?

[cumpstey (Neil Cumpstey)]

I find the default set of cards pretty limited, in that they’re all built around displaying just one type of information. There are bits in my setup which work a lot better with several of entity, condition, markdown, glance, history-graph combined into a single card, as then I can display all information about a single device, or room, in one card.

A couple of use cases:

I’m aware of the Vertical Stack in Card card, but (when I last looked, at least) this had issues with styling, because it simply wrapped ha-card elements in another ha-card.

I’ve written some custom bits to achieve what I wanted as in the screenshots (still somewhat buggy, as I’ve not figured out how to debug in any sensible way), but I’ve wondered, ever since I first set up Home Assistant a couple of years ago, wth this isn’t native.

[tom_l]

You can put glance cards in entities cards and all sorts of things like that, but there’s a trick required.

Have a read of this:

hui-element - Use built-in elements in the wrong place

Funny thing about lovelace - cards, rows in the entities card, badges and elements in the picture-elements card work exactly the same behind the scenes. That means that you can use them interchangeably if you know how, and e.g. put a button right in an entities card, a badge somewhere in the middle of your view or a markdown card (with background and border removed) right in your carefully crafted picture-elements card. Pretty neat stuff that allows for some fantastic creations. However. Becau…

I rarely use vertical stacks. I mostly put cards in entities cards. e.g.

[Cougar]

Coul you share yaml of this card for instance?

[maxym]

I think the point of OP is that native cards are very limited while most users today hack them one way or another. Those mods, since used so commonly these days should be replaced by natively flexible cards.

If I look at my dash all cards are augmented. It required additional effort of mods developers, my time and if it is still not enough I lost native features of original card like ability of editing it’s content using GUI, error handling and proper refreshing.
I wouldn’t call it win-win situation.

[cumpstey (Neil Cumpstey)]

Thanks @tom_l. I heard about the custom:hui- trick only because someone mentioned it had stopped working, but hui-element looks like it should be able to do a lot of what I want to be able to do. I will investigate.

The way I’d thought about this was for the card to be just a container for rows, rather than to have any type itself, and then to have a whole lot of different types of rows which could be added to it in any order. In my code, the card is called “wall” and the rows are the “bricks”. Yaml for my Home Assistant version card, for example, is:

type: custom:wall-card
title: Home Assistant
cards:
- type: custom:alert-brick
  level: info
  conditions:
  - condition: not_equal
    entities:
    - sensor.latest_version
    - sensor.current_version
  content: >
    Version [[ sensor.latest_version ]] is available.
- type: custom:entities-brick
  entities:
  - entity: sensor.current_version
- type: custom:markdown-brick
  content: |
    [Release notes](https://www.home-assistant.io/latest-release-notes/) for version [[ sensor.latest_version ]].

@maxym

Those mods, since used so commonly these days should be replaced by natively flexible cards.

This sums it up well. There are definitely ways published by the community of achieving a lot of flexibility, but these can easily be missed by new users, and even users who have been around for a while, and this ends up with a lot of reinvention of very similar things. It’d be nice to get some of this flexibility natively.

[tom_l]

@Cougar

Coul you share yaml of this card for instance?

entities:
  - entity: switch.lounge_dehumidifier
    state_color: true
  - entity: script.lounge_dehumidifier_emptied
    state_color: true
  - animation:
      state: 'off'
    columns: '1'
    direction: right
    entities:
      - entity: sensor.lounge_dehumidifier_power
        max: '800'
        min: '0'
        name: Power
        severity:
          - color: '#039BE5'
            from: '0'
            to: '299.9'
          - color: '#0da035'
            from: '300'
            to: '899.9'
          - color: '#e0b400'
            from: '900'
            to: '1799.9'
          - color: '#e45e65'
            from: '1800'
            to: '2400'
    entity_row: true
    height: 28px
    positions:
      icon: inside
      indicator: inside
      minmax: 'off'
      name: inside
      title: 'off'
      value: inside
    type: 'custom:bar-card'
    value_style:
      color: var(--primary-text-color)
      text-shadow: none
  - card_type: 'custom:fold-entity-row'
    entities:
      - entity: automation.lounge_dehumidifier_direct_automation
        state_color: true
      - entity: input_number.lounge_dehumidifier_condensation_set
      - entity: input_number.lounge_dehumidifier_outside_temp_set
    head:
      label: Direct Automation
      type: section
    padding: 0
    type: 'custom:hui-element'
  - card_type: 'custom:fold-entity-row'
    entities:
      - entity: automation.lounge_dehumidifier_forecast_automation
        state_color: true
      - entity: input_datetime.lounge_dehumidifier_run_time
      - entity: input_number.lounge_dehumidifier_rh_set
      - entity: input_number.lounge_dehumidifier_forecast_temp_set
    head:
      label: Forecast Automation
      type: section
    padding: 0
    type: 'custom:hui-element'
  - card_type: 'custom:fold-entity-row'
    entities:
      - entity: automation.lounge_dehumidifier_re_enable
        state_color: true
      - entity: input_boolean.lounge_dehumidifier_mute_for_movie
        state_color: true
      - entity: input_number.lounge_dehumidifier_run_time
    head:
      label: Common Configuration
      type: section
    padding: 0
    type: 'custom:hui-element'
show_header_toggle: false
title: Lounge Dehumidifier
type: entities