Lovelace buttons with card titles - is this possible please?

jarrah · January 4, 2019, 11:20am

I would like to replicate my current setup from the old GUI in Lovelace, specifically the ability to have titles above groups of buttons, e.g. (using Custom UI: Tiles)

I have buttons working well in Lovelace using https://github.com/kuuji/button-card/tree/master but the trouble is they all end up being bunched together:

I found and tried Vertical Style Card (Lovelace: Vertical Style) that lets you group diferent cards in one vertical-stack card, with diferent style options like title, card color, to have a border or not. However this doesn’t appear to work with the custom button card, resulting in the following output:

Is there perhaps another way to have a title above a group of buttons like this please?

Here is my yaml code for reference.
Without vertical-stack card:

resources:
  - url: /local/button-card.js
    type: module

title: Home
views:
  - title: Buttons
    icon: mdi:lightbulb-outline
    panel: false
    id: buttons
    cards:
      - type: vertical-stack
        cards:
          - type: horizontal-stack
            cards:
              - type: "custom:button-card"
                entity: sensor.windows_study_open
                color_type: label-card
                color: rgb(255,69,0)
                color_off: rgb(50,205,50)
                name: "Study"
                icon: mdi:window-open
                size: 20%
                style:
                  - text-transform: none
              - type: "custom:button-card"
                entity: sensor.windows_lounge_open
                color_type: label-card
                color: rgb(255,69,0)
                color_off: rgb(50,205,50)
                name: "Lounge"
                icon: mdi:window-open
                size: 20%
                style:
                  - text-transform: none
              - type: "custom:button-card"
                entity: sensor.windows_kitchen_open
                color_type: label-card
                color: rgb(255,69,0)
                color_off: rgb(50,205,50)
                name: "Kitchen"
                icon: mdi:window-open
                size: 20%
                style:
                  - text-transform: none
              - type: "custom:button-card"
                entity: sensor.windows_bed1_open
                color_type: label-card
                color: rgb(255,69,0)
                color_off: rgb(50,205,50)
                name: "Bed1"
                icon: mdi:window-open
                size: 20%
                style:
                  - text-transform: none
              - type: "custom:button-card"
                entity: sensor.windows_bed2_open
                color_type: label-card
                color: rgb(255,69,0)
                color_off: rgb(50,205,50)
                name: "Bed2"
                icon: mdi:window-open
                size: 20%
                style:
                  - text-transform: none
          - type: horizontal-stack
            cards:
              - type: "custom:button-card"
                entity: sensor.windows_bed3_open
                color_type: label-card
                color: rgb(255,69,0)
                color_off: rgb(50,205,50)
                name: "Bed3"
                icon: mdi:window-open
                size: 20%
                style:
                  - text-transform: none
              - type: "custom:button-card"
                entity: sensor.windows_bed4_open
                color_type: label-card
                color: rgb(255,69,0)
                color_off: rgb(50,205,50)
                name: "Bed4"
                icon: mdi:window-open
                size: 20%
                style:
                  - text-transform: none
              - type: "custom:button-card"
                entity: sensor.windows_loft_open
                color_type: label-card
                color: rgb(255,69,0)
                color_off: rgb(50,205,50)
                name: "Loft"
                icon: mdi:window-open
                size: 20%
                style:
                  - text-transform: none
              - type: "custom:button-card"
                entity: sensor.windows_bathroom_open
                color_type: label-card
                color: rgb(255,69,0)
                color_off: rgb(50,205,50)
                name: "Bath"
                icon: mdi:window-open
                size: 20%
                style:
                  - text-transform: none

          - type: horizontal-stack
            cards:
              - type: "custom:button-card"
                entity: binary_sensor.motion_study_occupancy
                color_type: label-card
                color: rgb(255,69,0)
                color_off: rgb(50,205,50)
                name: "Study"
                icon: mdi:run
                size: 20%
                style:
                  - text-transform: none
              - type: "custom:button-card"
                entity: binary_sensor.motion_sensor_158d0001ad5c5c
                color_type: label-card
                color: rgb(255,69,0)
                color_off: rgb(50,205,50)
                name: "Lounge"
                icon: mdi:run
                size: 20%
                style:
                  - text-transform: none
              - type: "custom:button-card"
                entity: binary_sensor.motion_sensor_158d0001e43b9f
                color_type: label-card
                color: rgb(255,69,0)
                color_off: rgb(50,205,50)
                name: "Kitchen"
                icon: mdi:run
                size: 20%
                style:
                  - text-transform: none
              - type: "custom:button-card"
                entity: binary_sensor.motion_hall_downstairs_occupancy
                color_type: label-card
                color: rgb(255,69,0)
                color_off: rgb(50,205,50)
                name: "D Hall"
                icon: mdi:run
                size: 20%
                style:
                  - text-transform: none
              - type: "custom:button-card"
                entity: binary_sensor.motion_sensor_158d0001ad4ad6
                color_type: label-card
                color: rgb(255,69,0)
                color_off: rgb(50,205,50)
                name: "U Hall"
                icon: mdi:run
                size: 20%
                style:
                  - text-transform: none
          - type: horizontal-stack
            cards:
              - type: "custom:button-card"
                entity: binary_sensor.motion_sensor_158d0001ad3413
                color_type: label-card
                color: rgb(255,69,0)
                color_off: rgb(50,205,50)
                name: "Garage"
                icon: mdi:run
                size: 20%
                style:
                  - text-transform: none
              - type: "custom:button-card"
                entity: binary_sensor.motion_sensor_158d0001ad3403
                color_type: label-card
                color: rgb(255,69,0)
                color_off: rgb(50,205,50)
                name: "Porch"
                icon: mdi:run
                size: 20%
                style:
                  - text-transform: none
              - type: "custom:button-card"
                entity: binary_sensor.motion_sensor_158d0001ad33f3
                color_type: label-card
                color: rgb(255,69,0)
                color_off: rgb(50,205,50)
                name: "Bed1"
                icon: mdi:run
                size: 20%
                style:
                  - text-transform: none
              - type: "custom:button-card"
                entity: binary_sensor.motion_sensor_158d0001ad698e
                color_type: label-card
                color: rgb(255,69,0)
                color_off: rgb(50,205,50)
                name: "Bed2"
                icon: mdi:run
                size: 20%
                style:
                  - text-transform: none
              - type: "custom:button-card"
                entity: binary_sensor.motion_sensor_158d0001ad4a0f
                color_type: label-card
                color: rgb(255,69,0)
                color_off: rgb(50,205,50)
                name: "Bed3"
                icon: mdi:run
                size: 20%
                style:
                  - text-transform: none

Code with vertical-stack card:

resources:
  - url: /local/button-card.js
    type: module
  - url: /local/vertical-style-card.js
    type: js

  - title: Test
    icon: mdi:home
    panel: false
    id: test
    cards:
      - type: custom:vertical-style-card
        title: Test 1
        cards:
          - type: horizontal-stack
            cards:
              - type: "custom:button-card"
                entity: sensor.windows_study_open
                color_type: label-card
                color: rgb(255,69,0)
                color_off: rgb(50,205,50)
                name: "Study"
                icon: mdi:window-open
                size: 20%
                style:
                  - text-transform: none
              - type: "custom:button-card"
                entity: sensor.windows_lounge_open
                color_type: label-card
                color: rgb(255,69,0)
                color_off: rgb(50,205,50)
                name: "Lounge"
                icon: mdi:window-open
                size: 20%
                style:
                  - text-transform: none
              - type: "custom:button-card"
                entity: sensor.windows_kitchen_open
                color_type: label-card
                color: rgb(255,69,0)
                color_off: rgb(50,205,50)
                name: "Kitchen"
                icon: mdi:window-open
                size: 20%
                style:
                  - text-transform: none
              - type: "custom:button-card"
                entity: sensor.windows_bed1_open
                color_type: label-card
                color: rgb(255,69,0)
                color_off: rgb(50,205,50)
                name: "Bed1"
                icon: mdi:window-open
                size: 20%
                style:
                  - text-transform: none
              - type: "custom:button-card"
                entity: sensor.windows_bed2_open
                color_type: label-card
                color: rgb(255,69,0)
                color_off: rgb(50,205,50)
                name: "Bed2"
                icon: mdi:window-open
                size: 20%
                style:
                  - text-transform: none
          - type: horizontal-stack
            cards:
              - type: "custom:button-card"
                entity: sensor.windows_bed3_open
                color_type: label-card
                color: rgb(255,69,0)
                color_off: rgb(50,205,50)
                name: "Bed3"
                icon: mdi:window-open
                size: 20%
                style:
                  - text-transform: none
              - type: "custom:button-card"
                entity: sensor.windows_bed4_open
                color_type: label-card
                color: rgb(255,69,0)
                color_off: rgb(50,205,50)
                name: "Bed4"
                icon: mdi:window-open
                size: 20%
                style:
                  - text-transform: none
              - type: "custom:button-card"
                entity: sensor.windows_loft_open
                color_type: label-card
                color: rgb(255,69,0)
                color_off: rgb(50,205,50)
                name: "Loft"
                icon: mdi:window-open
                size: 20%
                style:
                  - text-transform: none
              - type: "custom:button-card"
                entity: sensor.windows_bathroom_open
                color_type: label-card
                color: rgb(255,69,0)
                color_off: rgb(50,205,50)
                name: "Bath"
                icon: mdi:window-open
                size: 20%
                style:
                  - text-transform: none
      - type: custom:vertical-style-card
        title: Test 2
        cards:
          - type: horizontal-stack
            cards:
              - type: "custom:button-card"
                entity: binary_sensor.motion_study_occupancy
                color_type: label-card
                color: rgb(255,69,0)
                color_off: rgb(50,205,50)
                name: "Study"
                icon: mdi:run
                size: 20%
                style:
                  - text-transform: none
              - type: "custom:button-card"
                entity: binary_sensor.motion_sensor_158d0001ad5c5c
                color_type: label-card
                color: rgb(255,69,0)
                color_off: rgb(50,205,50)
                name: "Lounge"
                icon: mdi:run
                size: 20%
                style:
                  - text-transform: none
              - type: "custom:button-card"
                entity: binary_sensor.motion_sensor_158d0001e43b9f
                color_type: label-card
                color: rgb(255,69,0)
                color_off: rgb(50,205,50)
                name: "Kitchen"
                icon: mdi:run
                size: 20%
                style:
                  - text-transform: none
              - type: "custom:button-card"
                entity: binary_sensor.motion_hall_downstairs_occupancy
                color_type: label-card
                color: rgb(255,69,0)
                color_off: rgb(50,205,50)
                name: "D Hall"
                icon: mdi:run
                size: 20%
                style:
                  - text-transform: none
              - type: "custom:button-card"
                entity: binary_sensor.motion_sensor_158d0001ad4ad6
                color_type: label-card
                color: rgb(255,69,0)
                color_off: rgb(50,205,50)
                name: "U Hall"
                icon: mdi:run
                size: 20%
                style:
                  - text-transform: none
          - type: horizontal-stack
            cards:
              - type: "custom:button-card"
                entity: binary_sensor.motion_sensor_158d0001ad3413
                color_type: label-card
                color: rgb(255,69,0)
                color_off: rgb(50,205,50)
                name: "Garage"
                icon: mdi:run
                size: 20%
                style:
                  - text-transform: none
              - type: "custom:button-card"
                entity: binary_sensor.motion_sensor_158d0001ad3403
                color_type: label-card
                color: rgb(255,69,0)
                color_off: rgb(50,205,50)
                name: "Porch"
                icon: mdi:run
                size: 20%
                style:
                  - text-transform: none
              - type: "custom:button-card"
                entity: binary_sensor.motion_sensor_158d0001ad33f3
                color_type: label-card
                color: rgb(255,69,0)
                color_off: rgb(50,205,50)
                name: "Bed1"
                icon: mdi:run
                size: 20%
                style:
                  - text-transform: none
              - type: "custom:button-card"
                entity: binary_sensor.motion_sensor_158d0001ad698e
                color_type: label-card
                color: rgb(255,69,0)
                color_off: rgb(50,205,50)
                name: "Bed2"
                icon: mdi:run
                size: 20%
                style:
                  - text-transform: none
              - type: "custom:button-card"
                entity: binary_sensor.motion_sensor_158d0001ad4a0f
                color_type: label-card
                color: rgb(255,69,0)
                color_off: rgb(50,205,50)
                name: "Bed3"
                icon: mdi:run
                size: 20%
                style:
                  - text-transform: none

matisaul · January 4, 2019, 12:22pm

Hi,

Try using entity-button instead of custom:button-card.

jarrah · January 4, 2019, 3:48pm

Hey @matisaul , I see you are the developer for Vertical Style Card! I raised this issue on your GitHub page and I wondered if you have any ideas why the button cards might be distorted when used with Vertical Style Card as seen in the screenshot above please?

The trouble with the built-in button card is it lacks many of the features that this custom button card has, especially the ability to set button colour depending on entity state which is key for my setup.

Thanks!

matisaul · January 4, 2019, 5:15pm

I release a new version. It fixs that problem. Good day!

jarrah · January 4, 2019, 5:35pm

Superb, it works!! Thank you very much @matisaul, I can now finally move to Lovelace as this issue was holding me back.

jarrah · January 29, 2019, 8:22pm

Hi @matisaul

Hope you don’t mind but I’ve come across a similar situation with the new Lovelace version of Custom UI: Tiles found below, and I wondered if you could have a look please?

With custom:vertical-style-card:

With vertical-stack

The yaml code is as follows:

  - title: test
    icon: mdi:run
    panel: false
    path: test
    cards:
      - type: vertical-stack
      # - type: custom:vertical-style-card
        cards:
          - type: custom:tiles-card
            card_settings:
              title: test
              gap: 10px
              padding: 0px
              columns: 5
              row_height: 45px
              templates:
                style: "return 'box-shadow: 0px 0px;'"
            entities:
              - entity: light.kitchen
                row: 1
              - entity: light.kitchen
                row: 1
              - entity: light.kitchen
                row: 1
              - entity: light.kitchen
                row: 1
              - entity: light.kitchen
                row: 1
          - type: custom:tiles-card
            card_settings:
              display: hidden
              gap: 10px
              padding: 0px
              columns: 1
              row_height: 15px
            entities:
              - entity: light.kitchen
                display: hidden
          - type: custom:tiles-card
            card_settings:
              display: hidden
              gap: 10px
              padding: 0px
              columns: 3
              row_height: 45px
            entities:
              - entity: light.kitchen
                row: 1
              - entity: light.kitchen
                row: 1
              - entity: light.kitchen
                row: 1
          - type: custom:tiles-card
            card_settings:
              display: hidden
              gap: 10px
              padding: 0px
              columns: 2
              row_height: 45px
            entities:
              - entity: light.kitchen
                row: 1
              - entity: light.kitchen
                row: 1

Thank you!

NeoID · July 8, 2019, 12:57am

I’m struggling with the same issue. Any ideas on how to put the buttons in a card?