Re-implementing multiple-entity-row using button-card

Configuration Frontend
1

I really like the compact layout of the multiple-entity-row custom control, but it doesn’t allow you to define different double-click and hold actions. Also, the styling is not as flexible as button-card.

I have therefore re-implemented the design using a few custom controls, namely vertical-stack-in-card, layout-card’s flexible grid control, and of course button-card. I thought I’d share the code in case it was useful to others

While I have put my entitles on actual buttons, because that makes sense for my use case, you can style it as a flat card by adding the “border-width: 0” and “background: transparent” styles to card styles for the entity buttons as well as to the row buttons.

The stack-in-card custom control should work just as well as the vertical-stack-in-card control if you prefer to use that.

(The reason for using vertical-stack-in-card at all is that layout-card won’t display the title on a grid.)

image
image1012×692 16.1 KB

type: custom:vertical-stack-in-card
title: Lights
cards:
  - type: custom:layout-card
    layout_type: grid
    columns: 4
    square: false
    title: Lights
    entities:
      - entity: light.downstairs_lights
        type: custom:button-card
        name: Groups
        show_name: true
        show_icon: true
        show_state: false
        show_last_changed: false
        show_label: false
        color: auto
        styles:
          card:
            - height: 100%
            - background: transparent
            - border-width: 0
          grid:
            - grid-template-areas: '"i n"'
            - grid-template-columns: 2fr 3fr
          name:
            - justify-self: start
      - type: custom:button-card
        entity: light.downstairs_lights
        name: Ground
        show_name: true
        show_icon: true
        show_state: false
        show_last_changed: false
        show_label: false
        color: auto
        styles:
          name:
            - font-size: 66%
        double_tap_action:
          action: more-info
        hold_action:
          action: more-info
        tap_action:
          action: call-service
          service: light.toggle
          service_data:
            entity_id: light.downstairs_lights
      - type: custom:button-card
        entity: light.all_lights
        name: All
        show_name: true
        show_icon: true
        show_state: false
        show_last_changed: false
        show_label: false
        color: auto
        styles:
          name:
            - font-size: 66%
        double_tap_action:
          action: more-info
        hold_action:
          action: more-info
        tap_action:
          action: call-service
          service: light.toggle
          service_data:
            entity_id: light.all_lights
      - type: custom:button-card
        entity: script.1584181003341
        name: Reset
        show_name: true
        show_icon: true
        show_state: false
        show_last_changed: false
        show_label: false
        color: auto
        styles:
          name:
            - font-size: 66%
        double_tap_action:
          action: more-info
        hold_action:
          action: more-info
        tap_action:
          action: call-service
          service: script.1584181003341
      - entity: light.kitchen_lights
        type: custom:button-card
        name: Kitchen
        show_name: true
        show_icon: true
        show_state: false
        show_last_changed: false
        show_label: false
        color: auto
        styles:
          card:
            - height: 100%
            - background: transparent
            - border-width: 0
          grid:
            - grid-template-areas: '"i n"'
            - grid-template-columns: 2fr 3fr
          name:
            - justify-self: start
        double_tap_action:
          action: more-info
        hold_action:
          action: more-info
        tap_action:
          action: call-service
          service: light.toggle
          service_data:
            entity_id: light.downstairs_lights
      - type: custom:button-card
        entity: light.kitchen
        show_name: true
        show_icon: true
        show_state: false
        show_last_changed: false
        show_label: false
        color: auto
        name: Main
        styles:
          name:
            - font-size: 66%
        double_tap_action:
          action: more-info
        hold_action:
          action: more-info
        tap_action:
          action: call-service
          service: light.toggle
          service_data:
            entity_id: light.kitchen
      - type: custom:button-card
        entity: light.kitchen_lights
        show_name: true
        show_icon: true
        show_state: false
        show_last_changed: false
        show_label: false
        color: auto
        name: Kitchen
        styles:
          name:
            - font-size: 66%
        double_tap_action:
          action: more-info
        hold_action:
          action: more-info
        tap_action:
          action: call-service
          service: light.toggle
          service_data:
            entity_id: light.kitchen_lights
      - type: custom:button-card
        entity: light.conservatory
        show_name: true
        show_icon: true
        show_state: false
        show_last_changed: false
        show_label: false
        color: auto
        name: Cons.
        styles:
          name:
            - font-size: 66%
        double_tap_action:
          action: more-info
        hold_action:
          action: more-info
        tap_action:
          action: call-service
          service: light.toggle
          service_data:
            entity_id: light.conservatory
      - entity: light.hall_lights
        type: custom:button-card
        name: Hall
        show_name: true
        show_icon: true
        show_state: false
        show_last_changed: false
        show_label: false
        color: auto
        styles:
          card:
            - height: 100%
            - background: transparent
            - border-width: 0
          grid:
            - grid-template-areas: '"i n"'
            - grid-template-columns: 2fr 3fr
          name:
            - justify-self: start
        double_tap_action:
          action: more-info
        hold_action:
          action: more-info
        tap_action:
          action: call-service
          service: light.toggle
          service_data:
            entity_id: light.hall_lights
      - type: custom:button-card
        entity: light.hall
        show_name: true
        show_icon: true
        show_state: false
        show_last_changed: false
        show_label: false
        color: auto
        name: Door
        styles:
          name:
            - font-size: 66%
        double_tap_action:
          action: more-info
        hold_action:
          action: more-info
        tap_action:
          action: call-service
          service: light.toggle
          service_data:
            entity_id: light.hall
      - type: custom:button-card
        entity: light.hall_lights
        show_name: true
        show_icon: true
        show_state: false
        show_last_changed: false
        show_label: false
        color: auto
        name: Hall
        styles:
          name:
            - font-size: 66%
        double_tap_action:
          action: more-info
        hold_action:
          action: more-info
        tap_action:
          action: call-service
          service: light.toggle
          service_data:
            entity_id: light.hall_lights
      - type: custom:button-card
        entity: light.landing
        show_name: true
        show_icon: true
        show_state: false
        show_last_changed: false
        show_label: false
        color: auto
        name: Landing
        styles:
          name:
            - font-size: 66%
        double_tap_action:
          action: more-info
        hold_action:
          action: more-info
        tap_action:
          action: call-service
          service: light.toggle
          service_data:
            entity_id: light.landing
    layout:
      grid-template-columns: 40% 20% 20% 20%
      place-items: stretch stretch
2

The one thing I haven’t been able to get to work is to make the card background itself opaque. My feeling is that this ought to be possible by assigning

background-color: rgba(0,0,0,0.2);

to some style of the vertical-stack-in-card card using card-mod styling, but nothing I’ve tried seems to work.

3

I really like how this looks, thanks for sharing. I’m attempting an overhaul of my dashboards at the moment for a more consistent, cleaner look and I will have a play around with this. I like the simplicity vs more complex card-mod solutions. Cheers.

Which element are you trying to make opaque? It looks opaque in the screenshot already?

4

Sorry, i meant, semi-transparent. I was thinking opaque in the sense “opaque glass” is opaque, not in the sense a wall is.

5

This must depend on your theme then. I use the ios-dark-theme and when your code is pasted into my dashboard, it looks like this:
image
(the icons are missing because I haven’t yet changed the entity IDs to match mine)
Vertical-stack-in-card sometimes causes weird transparency issues with this theme unless you use this in the vertical-stack-in-card config although this seems to be covered by the background: transparent in the individual button cards

styles:
  '--ha-card-background': transparent
6

Yeah, it works fine with a transparent theme, but I use different night and day themes and wanted to force transparency in both.

I should probably try stack-in-card and see if that behaves any better.

7

No, stack-in-card is no different

I’d expect somthing like

style: |
  ha-card {
    box-shadow: none;
    --ha-card-background-color: 'rgba(0, 0, 0, 0.2)';
  }

added to the stack-in-card would produce a semi-transparent background to the card, but it seems to have no effect.