search

thomasloven / lovelace-fold-entity-row

šŸ”¹ A foldable row for entities card, containing other rows
MIT License
585 stars 39 forks source link

custom: button-card will not stack horizontal #52

Closed raulvasquez closed 5 years ago

raulvasquez commented 5 years ago

I cannot figure out how to make these buttons display left to right / horizontally. I have tried tried a handful of different things, but cannot get it to work.

Here is the code: 

cards:
  - type: custom:layout-card
    layout: vertical
    cards:

# APPS ROW
    - type: horizontal-stack
      cards:
      - type: custom:fold-entity-row
        head:
          type: section
          label: APPLICATIONS
        items:
          - type: "custom:button-card"
            color_type: card
            color: "var(--secondary-background-color)"
            icon: mdi:amazon
            styles:
              card:
                - width: 20%
            tap_action:
              action: call-service
              service: media_player.select_source
              service_data:
                entity_id: media_player.firetv_livingroom
                source: "com.amazon.amazonvideo.livingroom"
          - type: "custom:button-card"
            color_type: card
            color: "var(--secondary-background-color)"
            icon: mdi:plex
            styles:
              card:
                - width: 20%
            tap_action:
              action: service
              service: media_player.select_source
              service_data:
                entity_id: media_player.firetv_livingroom
                source: "com.plexapp.android"
          - type: "custom:button-card"
            color_type: card
            color: "var(--secondary-background-color)"
            icon: mdi:hulu
            styles:
              card:
                - width: 20%
            tap_action:
              action: call-service
              service: media_player.select_source
              service_data:
                entity_id: media_player.firetv_livingroom
                source: "com.hulu.plus"
          - type: "custom:button-card"
            color_type: card
            color: "var(--secondary-background-color)"
            icon: mdi:netflix
            styles:
              card:
                - width: 20%
            tap_action:
              action: service
              service: media_player.select_source
              service_data:
                entity_id: media_player.firetv_livingroom
                source: "com.netflix.ninja"
          - type: "custom:button-card"
            color_type: card
            color: "var(--secondary-background-color)"
            icon: mdi:television
            styles:
              card:
                - width: 20%
                - height: 20%
            tap_action:
              action: service
              service: media_player.select_source
              service_data:
                entity_id: media_player.firetv_livingroom
                source: "com.silicondust.view"
          - type: "custom:button-card"
            color_type: card
            color: "var(--secondary-background-color)"
            icon: mdi:youtube
            styles:
              card:
                - width: 20%
            tap_action:
              action: service
              service: media_player.select_source
              service_data:
                entity_id: media_player.firetv_livingroom
                source: "com.liskovsoft.videomanager"

Here is a screenshot of how it appears with the code above. It looks exactly the same as if I do not use the horizontal-stack:

screenshot

Ideally I would simply like the buttons to show up left to right and be able to style them (will use button card . My end goal is to use this as an expandable area on my remote control for different apps and/or options that I do not want to see all the time, depending on which input is being used on the TV.

raulvasquez commented 5 years ago

I should mention that if I move the horizontal-stack inside of "items" I get a message that reads: Cannot read property ā€˜splitā€™ of undefinedā€

I can remove it entirely and the folding row performs exactly like the above screenshot.

EDIT TO ADD CODE:

screenshot


    cards:
      - type: custom:layout-card
        layout: vertical
        cards:
    # APPS ROW
        - type: custom:fold-entity-row
          head:
            type: section
            label: APPLICATIONS
          items:
            - type: horizontal-stack
              cards:
              - type: "custom:button-card"
                color_type: card
                color: "var(--secondary-background-color)"
                icon: mdi:amazon
                styles:
                  card:
                    - width: 20%
                tap_action:
                  action: call-service
                  service: media_player.select_source
                  service_data:
                    entity_id: media_player.firetv_livingroom
                    source: "com.amazon.amazonvideo.livingroom"
thomasloven commented 5 years ago

Well, that would be my suggestion, so please show that code as well. It should work if you also replace horizontal-stack with custom:hui-horizontal-stack-card.

raulvasquez commented 5 years ago

custom:hui-horizontal-stack-card This ended up working, but the spacing is a little weird. I guess it picks up differently than a regular horizontal-stack? I see a pull request for no padding @ https://github.com/thomasloven/lovelace-fold-entity-row/pull/45 so I assum that will fix my issue on the left if accepted. the weirder issue is the right top card and the 2nd row, joining into the 1st row.

image

You can see how the stacks normally work with this card. I am not sure if this is the folding row or the button-card.

I am including more of the code below. Someone on the homeassistant community forum mentioned that the fold-entity row is supposed to be underneath an entitites: , but I have it inside a cards: key instead. Is that part of my issue? I just dove into homeassistant about a month ago and still under the learning curve....

title: Remote
# button_card_templates:
#   !include button_card_templates.yaml
#panel: true
cards:
  - type: custom:layout-card
    layout: vertical
    cards:
# MEDIA PLAYER

# INPUT ROW
    - type: horizontal-stack
      cards:
      - type: custom:button-card
        name: FireTV
        icon: mdi:amazon-alexa
        entity: media_player.select_source
      - type: custom:button-card
        name: PS4
        icon: mdi:playstation
        entity: media_player.select_source
      - type: custom:button-card
        name: Switch
        icon: mdi:nintendo-switch
        entity: media_player.select_source
      - type: custom:button-card
        name: RetroPie
        icon: mdi:gamepad-variant
        entity: media_player.select_source
      - type: custom:button-card
        name: HTPC
        icon: mdi:server
        entity: media_player.select_source

# APPS ROW
    - type: custom:fold-entity-row
      head:
        type: section
        label: APPLICATIONS
      items:
        - type: custom:hui-horizontal-stack-card
          cards:
          - type: "custom:button-card"
            color_type: card
            color: "var(--secondary-background-color)"
            icon: mdi:amazon
            tap_action:
              action: call-service
              service: media_player.select_source
              service_data:
                entity_id: media_player.firetv_livingroom
                source: "com.amazon.amazonvideo.livingroom"
          - type: "custom:button-card"
            color_type: card
            color: "var(--secondary-background-color)"
            icon: mdi:plex
            tap_action:
              action: service
              service: media_player.select_source
              service_data:
                entity_id: media_player.firetv_livingroom
                source: "com.plexapp.android"
          - type: "custom:button-card"
            color_type: card
            color: "var(--secondary-background-color)"
            icon: mdi:hulu
            tap_action:
              action: call-service
              service: media_player.select_source
              service_data:
                entity_id: media_player.firetv_livingroom
                source: "com.hulu.plus"
          - type: "custom:button-card"
            color_type: card
            color: "var(--secondary-background-color)"
            icon: mdi:netflix
            tap_action:
              action: service
              service: media_player.select_source
              service_data:
                entity_id: media_player.firetv_livingroom
                source: "com.netflix.ninja"
        - type: custom:hui-horizontal-stack-card
          cards:
          - type: "custom:button-card"
            color_type: card
            color: "var(--secondary-background-color)"
            icon: mdi:television
            tap_action:
              action: service
              service: media_player.select_source
              service_data:
                entity_id: media_player.firetv_livingroom
                source: "com.silicondust.view"
          - type: "custom:button-card"
            color_type: card
            color: "var(--secondary-background-color)"
            icon: mdi:youtube
            tap_action:
              action: service
              service: media_player.select_source
              service_data:
                entity_id: media_player.firetv_livingroom
                source: "com.liskovsoft.videomanager"
          - type: custom:button-card
            color_type: blank-card
          - type: custom:button-card
            color_type: icon

# FIRST ROW
    - type: horizontal-stack
      cards:
      - type: custom:button-card
        color_type: blank-card
      - type: custom:button-card
        color_type: icon
        icon: mdi:chevron-up
        tap_action:
          service: remote.send_command
          data:
            entity_id:  remote.livingroom
            command: DirectionUp
      - type: "custom:button-card"
        color_type: blank-card
# second row
    - type: horizontal-stack
      cards:
      - type: "custom:button-card"
        color_type: icon
        icon: mdi:chevron-left
        tap_action:
          service: remote.send_command
          data:
            entity_id:  remote.livingroom
            command: DirectionLeft
      - type: "custom:button-card"
        color_type: icon
        icon: mdi:circle
        tap_action:
          service: remote.send_command
          data:
            entity_id:  remote.livingroom
            command: OK
      - type: "custom:button-card"
        color_type: icon
        icon: mdi:chevron-right
        tap_action:
          service: remote.send_command
          data:
            entity_id:  remote.livingroom
            command: DirectionRight
thomasloven commented 5 years ago

That's correct. Fold-entity-row is an -entity-row, i.e. a row for an entities card. It could very well be part of your problem. It was not meant to be used this way...

raulvasquez commented 5 years ago

That is understandable. Is there an alternative to achieve my goal? Feel free to close this issue.

thomasloven commented 5 years ago

Put it inside a card and mod that card to have a transparent background using e.g. card-mod