Lovelace Card YAML Question

jwelvaert · December 25, 2019, 2:42pm

I have 2 cards that I would like to combine into one. If I combine the YAML into one card it makes the icons very small so I guess I need a vertical stack or Vertical Stack In Card? Here is the first one:

cards:
  - icon: 'mdi:arrow-up-bold'
    tap_action:
      action: call-service
      service: remote.send_command
      service_data:
        command: DirectionUp
        device: '41560655'
        entity_id: remote.living_room
    type: 'custom:button-card'
  - icon: 'mdi:arrow-down-bold'
    tap_action:
      action: call-service
      service: remote.send_command
      service_data:
        command: DirectionDown
        device: '41560655'
        entity_id: remote.living_room
    type: 'custom:button-card'
  - icon: 'mdi:arrow-left-bold'
    tap_action:
      action: call-service
      service: remote.send_command
      service_data:
        command: DirectionLeft
        device: '41560655'
        entity_id: remote.living_room
    type: 'custom:button-card'
  - icon: 'mdi:arrow-right-bold'
    tap_action:
      action: call-service
      service: remote.send_command
      service_data:
        command: DirectionRight
        device: '41560655'
        entity_id: remote.living_room
    type: 'custom:button-card'
  - icon: 'mdi:alpha-e-circle'
    tap_action:
      action: call-service
      service: remote.send_command
      service_data:
        command: Ok
        device: '41560655'
        entity_id: remote.living_room
    type: 'custom:button-card'
  - icon: 'mdi:home'
    tap_action:
      action: call-service
      service: remote.send_command
      service_data:
        command: Home
        device: '41560655'
        entity_id: remote.living_room
    type: 'custom:button-card'
type: horizontal-stack

Here is the second one:

cards:
  - icon: 'mdi:volume-plus'
    size: 25%
    tap_action:
      action: call-service
      service: remote.send_command
      service_data:
        command: VolumeUp
        device: '61379924'
        entity_id: remote.living_room
    type: 'custom:button-card'
  - icon: 'mdi:volume-minus'
    size: 25%
    tap_action:
      action: call-service
      service: remote.send_command
      service_data:
        command: VolumeDown
        device: '61379924'
        entity_id: remote.living_room
    type: 'custom:button-card'
  - icon: 'mdi:volume-off'
    size: 25%
    tap_action:
      action: call-service
      service: remote.send_command
      service_data:
        command: Mute
        device: '61379924'
        entity_id: remote.living_room
    type: 'custom:button-card'
  - icon: 'mdi:power-plug-off'
    size: 25%
    tap_action:
      action: call-service
      service: remote.turn_off
      service_data:
        entity_id: remote.living_room
    type: 'custom:button-card'
type: horizontal-stack

metbril · December 25, 2019, 4:45pm

I am unsure what you want. Both ‘cards’ have multiple cards (every dash is one).

jwelvaert · December 25, 2019, 4:58pm

So I guess what I’m wanting then is a row of 6 cards and then below that a row of 4 cards. Currently these are 2 separate “cards”.

metbril · December 25, 2019, 5:33pm

I think what you mean by card is actually a view (tab).

Cards on views are dynamically placed and sized. To combine them in rows you would require vertical and horizontal stacks.

I don’t have much experience with it but there is a custom card that might be of help

petro · December 25, 2019, 7:03pm

Vertical stack card. Take a look at my config, use them all over the place for the remote page

flamingm0e · December 25, 2019, 7:06pm

Vertical stack card with horizontal stack within

jwelvaert · December 26, 2019, 2:01pm

Can you give me an example of that? From looking at other ppl’s configs I started with my first button:

cards:
  type: vertical-stack
  cards:
    type: horizontal-stack
    cards:
      - icon: 'mdi:arrow-up-bold'
        tap_action:
          action: call-service
          service: remote.send_command
          service_data:
            command: DirectionUp
            device: '41560655'
            entity_id: remote.living_room
        type: 'custom:button-card'

but the red box says “No card type found” Seems to me that the vertical stack should come after the first 6 butttons, telling it to start a new row.

flamingm0e · December 26, 2019, 2:43pm

cards:
  - cards:
      - entity: light.garage
        hold_action:
          action: more-info
        name: Garage Lights
        tap_action:
          action: toggle
        type: entity-button
      - entity: light.hallway
        tap_action:
          action: toggle
        type: entity-button
    type: horizontal-stack
  - cards:
      - entity: light.trash
        tap_action:
          action: toggle
        type: entity-button
      - entity: light.back_porch
        tap_action:
          action: toggle
        type: entity-button
    type: horizontal-stack
  - cards:
      - entity: light.front_porch
        tap_action:
          action: toggle
        type: entity-button
      - entity: light.driveway
        tap_action:
          action: toggle
        type: entity-button
    type: horizontal-stack
type: vertical-stack

jwelvaert · December 27, 2019, 10:40am

Got it. Thanks.

jwelvaert · December 27, 2019, 12:15pm

One other question. I’d like all the buttons to be in one “card” in the UI. See how the lower buttons appear to be separate from the upper one? Do you know how to do that?
TV Lovelace

cards:
  - cards:
      - entities:
          - entity: media_player.sony_bravia_tv
            show_state: true
            size: 5%
            type: 'custom:button-card'
          - input_select.living_room
          - switch.apple_tv_power
          - switch.fire_tv_power
        show_icon: true
        show_name: true
        type: entities
    type: horizontal-stack
  - cards:
      - icon: 'mdi:arrow-up-bold'
        tap_action:
          action: call-service
          service: remote.send_command
          service_data:
            command: DirectionUp
            device: '41560655'
            entity_id: remote.living_room
        type: 'custom:button-card'
      - icon: 'mdi:arrow-down-bold'
        tap_action:
          action: call-service
          service: remote.send_command
          service_data:
            command: DirectionDown
            device: '41560655'
            entity_id: remote.living_room
        type: 'custom:button-card'
      - icon: 'mdi:arrow-left-bold'
        tap_action:
          action: call-service
          service: remote.send_command
          service_data:
            command: DirectionLeft
            device: '41560655'
            entity_id: remote.living_room
        type: 'custom:button-card'
      - icon: 'mdi:arrow-right-bold'
        tap_action:
          action: call-service
          service: remote.send_command
          service_data:
            command: DirectionRight
            device: '41560655'
            entity_id: remote.living_room
        type: 'custom:button-card'
      - icon: 'mdi:alpha-e-circle'
        tap_action:
          action: call-service
          service: remote.send_command
          service_data:
            command: Ok
            device: '41560655'
            entity_id: remote.living_room
        type: 'custom:button-card'
      - icon: 'mdi:home'
        tap_action:
          action: call-service
          service: remote.send_command
          service_data:
            command: Home
            device: '41560655'
            entity_id: remote.living_room
        type: 'custom:button-card'
    type: horizontal-stack
  - cards:
      - icon: 'mdi:volume-plus'
        size: 25%
        tap_action:
          action: call-service
          service: remote.send_command
          service_data:
            command: VolumeUp
            device: '61379924'
            entity_id: remote.living_room
        type: 'custom:button-card'
      - icon: 'mdi:volume-minus'
        size: 25%
        tap_action:
          action: call-service
          service: remote.send_command
          service_data:
            command: VolumeDown
            device: '61379924'
            entity_id: remote.living_room
        type: 'custom:button-card'
      - icon: 'mdi:volume-off'
        size: 25%
        tap_action:
          action: call-service
          service: remote.send_command
          service_data:
            command: Mute
            device: '61379924'
            entity_id: remote.living_room
        type: 'custom:button-card'
      - icon: 'mdi:power-plug-off'
        size: 25%
        tap_action:
          action: call-service
          service: remote.turn_off
          service_data: null
          entity_id: remote.living_room
        type: 'custom:button-card'
    type: horizontal-stack
type: vertical-stack

flamingm0e · December 27, 2019, 12:56pm

For that, you would want to install the custom card ‘vertical-stack-in-card’

petro · December 27, 2019, 12:58pm

You got a lot of unnecessary stuff in that. Anyways, doing what you want gets into the ‘advanced’ configuration category. You need to use the ‘under the hood names’ while placing all cards into the entities card.

cards:
- entities:
    - entity: media_player.sony_bravia_tv
      show_state: true
      size: 5%
      type: 'custom:button-card'
    - input_select.living_room
    - switch.apple_tv_power
    - switch.fire_tv_power
    - cards:
        - icon: 'mdi:arrow-up-bold'
          tap_action:
            action: call-service
            service: remote.send_command
            service_data:
              command: DirectionUp
              device: '41560655'
              entity_id: remote.living_room
          type: 'custom:button-card'
        - icon: 'mdi:arrow-down-bold'
          tap_action:
            action: call-service
            service: remote.send_command
            service_data:
              command: DirectionDown
              device: '41560655'
              entity_id: remote.living_room
          type: 'custom:button-card'
        - icon: 'mdi:arrow-left-bold'
          tap_action:
            action: call-service
            service: remote.send_command
            service_data:
              command: DirectionLeft
              device: '41560655'
              entity_id: remote.living_room
          type: 'custom:button-card'
        - icon: 'mdi:arrow-right-bold'
          tap_action:
            action: call-service
            service: remote.send_command
            service_data:
              command: DirectionRight
              device: '41560655'
              entity_id: remote.living_room
          type: 'custom:button-card'
        - icon: 'mdi:alpha-e-circle'
          tap_action:
            action: call-service
            service: remote.send_command
            service_data:
              command: Ok
              device: '41560655'
              entity_id: remote.living_room
          type: 'custom:button-card'
        - icon: 'mdi:home'
          tap_action:
            action: call-service
            service: remote.send_command
            service_data:
              command: Home
              device: '41560655'
              entity_id: remote.living_room
          type: 'custom:button-card'
      type: custom:hui-horizontal-stack-card
    - cards:
        - icon: 'mdi:volume-plus'
          size: 25%
          tap_action:
            action: call-service
            service: remote.send_command
            service_data:
              command: VolumeUp
              device: '61379924'
              entity_id: remote.living_room
          type: 'custom:button-card'
        - icon: 'mdi:volume-minus'
          size: 25%
          tap_action:
            action: call-service
            service: remote.send_command
            service_data:
              command: VolumeDown
              device: '61379924'
              entity_id: remote.living_room
          type: 'custom:button-card'
        - icon: 'mdi:volume-off'
          size: 25%
          tap_action:
            action: call-service
            service: remote.send_command
            service_data:
              command: Mute
              device: '61379924'
              entity_id: remote.living_room
          type: 'custom:button-card'
        - icon: 'mdi:power-plug-off'
          size: 25%
          tap_action:
            action: call-service
            service: remote.turn_off
            service_data: null
            entity_id: remote.living_room
          type: 'custom:button-card'
      type: custom:hui-horizontal-stack-card
  show_icon: true
  show_name: true
  type: entities

jwelvaert · December 27, 2019, 1:23pm

Is this available in HACS? I’m not finding it.

petro · December 27, 2019, 1:26pm

It’s not a custom card, it’s the under the hood name for the horizontal card. You don’t need anything custom.

jwelvaert · December 27, 2019, 1:32pm

Ok. Pasting in your code gives me “no card type found” so I thought maybe I needed something else.

petro · December 27, 2019, 1:35pm

let me verify that the name is correct

EDIT: The name is correct, it should work. You may need to switch to yaml mode.

jwelvaert · December 27, 2019, 2:07pm

By yaml mode do you mean pasting it into the raw config instead of a manual card? I noticed it put single quotes around custom:hui-horizontal-stack-card. Not sure if that makes a difference.

cards:
  - entities:
      - entity: media_player.sony_bravia_tv
        show_state: true
        size: 5%
        type: 'custom:button-card'
      - input_select.living_room
      - switch.apple_tv_power
      - switch.fire_tv_power
      - cards:
          - icon: 'mdi:arrow-up-bold'
            tap_action:
              action: call-service
              service: remote.send_command
              service_data:
                command: DirectionUp
                device: '41560655'
                entity_id: remote.living_room
            type: 'custom:button-card'
          - icon: 'mdi:arrow-down-bold'
            tap_action:
              action: call-service
              service: remote.send_command
              service_data:
                command: DirectionDown
                device: '41560655'
                entity_id: remote.living_room
            type: 'custom:button-card'
          - icon: 'mdi:arrow-left-bold'
            tap_action:
              action: call-service
              service: remote.send_command
              service_data:
                command: DirectionLeft
                device: '41560655'
                entity_id: remote.living_room
            type: 'custom:button-card'
          - icon: 'mdi:arrow-right-bold'
            tap_action:
              action: call-service
              service: remote.send_command
              service_data:
                command: DirectionRight
                device: '41560655'
                entity_id: remote.living_room
            type: 'custom:button-card'
          - icon: 'mdi:alpha-e-circle'
            tap_action:
              action: call-service
              service: remote.send_command
              service_data:
                command: Ok
                device: '41560655'
                entity_id: remote.living_room
            type: 'custom:button-card'
          - icon: 'mdi:home'
            tap_action:
              action: call-service
              service: remote.send_command
              service_data:
                command: Home
                device: '41560655'
                entity_id: remote.living_room
            type: 'custom:button-card'
        type: 'custom:hui-horizontal-stack-card'
      - cards:
          - icon: 'mdi:volume-plus'
            size: 25%
            tap_action:
              action: call-service
              service: remote.send_command
              service_data:
                command: VolumeUp
                device: '61379924'
                entity_id: remote.living_room
            type: 'custom:button-card'
          - icon: 'mdi:volume-minus'
            size: 25%
            tap_action:
              action: call-service
              service: remote.send_command
              service_data:
                command: VolumeDown
                device: '61379924'
                entity_id: remote.living_room
            type: 'custom:button-card'
          - icon: 'mdi:volume-off'
            size: 25%
            tap_action:
              action: call-service
              service: remote.send_command
              service_data:
                command: Mute
                device: '61379924'
                entity_id: remote.living_room
            type: 'custom:button-card'
          - icon: 'mdi:power-plug-off'
            size: 25%
            tap_action:
              action: call-service
              service: remote.turn_off
              service_data: null
              entity_id: remote.living_room
            type: 'custom:button-card'
        type: 'custom:hui-horizontal-stack-card'
    show_icon: true
    show_name: true
    type: entities

petro · December 27, 2019, 2:08pm

no, I mean full yaml mode where you don’t use the UI at all. Only configuration is done through ui-lovelace.yaml

flamingm0e · December 27, 2019, 2:23pm

yaml mode and storage mode should be the same when it comes to the raw editor. There should be no need to switch to yaml

petro · December 27, 2019, 2:26pm

Yeah, i’m not sure. Never used the UI. I would expect it to work but you never know. Especially when people mistake the UI warnings for errors.