Custom Remote Cards to Share

[stevland]

This isn't an issue, but since there isn't a discussion page I'll toss these here in case anyone is interested.

I made 4 cards with the remotes I use the most. Hopefully other people will find them useful or inspiring. Feel free to repurpose and share.

(These cards require lovelace-card-mod)

PotPlayer

type: custom:mod-card
card:
  type: vertical-stack
  cards:
    - square: true
      type: grid
      cards:
        - type: custom:button-card
          entity: ''
          tap_action:
            action: call-service
            service: unified_remote.call
            service_data:
              target: 192.168.2.17
              remote_id: Unified.PotPlayer
              action: volume_down
          icon: mdi:volume-medium
          show_icon: true
          show_state: true
          card_mod:
            style: |
              ha-card {
                border: none;
                background-color: #ffffff10;
                box-shadow: none;
                margin: 0;
                width: 100% !important;
                height: 100%;
                position: relative;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
              }
        - type: custom:button-card
          entity: ''
          tap_action:
            action: call-service
            service: unified_remote.call
            service_data:
              target: 192.168.2.17
              remote_id: Unified.PotPlayer
              action: volume_mute
          icon: mdi:volume-mute
          show_icon: true
          show_state: true
          card_mod:
            style: |
              ha-card {
                border: none;
                background-color: #ffffff10;
                box-shadow: none;
                margin: 0;
                width: 100% !important;
                height: 100%;
                position: relative;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
              }
        - type: custom:button-card
          entity: ''
          tap_action:
            action: call-service
            service: unified_remote.call
            service_data:
              target: 192.168.2.17
              remote_id: Unified.PotPlayer
              action: volume_up
          icon: mdi:volume-high
          show_icon: true
          show_state: true
          card_mod:
            style: |
              ha-card {
                border: none;
                background-color: #ffffff10;
                box-shadow: none;
                margin: 0;
                width: 100% !important;
                height: 100%;
                position: relative;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
              }
    - square: true
      type: grid
      cards:
        - type: custom:button-card
          entity: ''
          tap_action:
            action: call-service
            service: unified_remote.call
            service_data:
              target: 192.168.2.17
              remote_id: Unified.PotPlayer
              action: previous
          icon: mdi:skip-backward
          show_icon: true
          show_state: true
          card_mod:
            style: |
              ha-card {
                border: none;
                background-color: #ffffff10;
                box-shadow: none;
                margin: 0;
                width: 100% !important;
                height: 100%;
                position: relative;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
              }
        - type: custom:button-card
          entity: ''
          tap_action:
            action: call-service
            service: unified_remote.call
            service_data:
              target: 192.168.2.17
              remote_id: Unified.PotPlayer
              action: open_file
          icon: mdi:plus
          show_icon: true
          show_state: true
          card_mod:
            style: |
              ha-card {
                border: none;
                background-color: #ffffff10;
                box-shadow: none;
                margin: 0;
                width: 100% !important;
                height: 100%;
                position: relative;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
              }
        - type: custom:button-card
          entity: ''
          tap_action:
            action: call-service
            service: unified_remote.call
            service_data:
              target: 192.168.2.17
              remote_id: Unified.PotPlayer
              action: next
          icon: mdi:skip-forward
          show_icon: true
          show_state: true
          card_mod:
            style: |
              ha-card {
                border: none;
                background-color: #ffffff10;
                box-shadow: none;
                margin: 0;
                width: 100% !important;
                height: 100%;
                position: relative;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
              }
      columns: 3
    - type: grid
      cards:
        - type: custom:button-card
          entity: ''
          tap_action:
            action: call-service
            service: unified_remote.call
            service_data:
              target: 192.168.2.17
              remote_id: Unified.PotPlayer
              action: stop
          icon: mdi:stop
          show_icon: true
          show_state: true
          card_mod:
            style: |
              ha-card {
                border: none;
                background-color: #ffffff10;
                box-shadow: none;
                margin: 0;
                width: 100% !important;
                height: 100%;
                position: relative;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
              }
        - type: custom:button-card
          entity: ''
          tap_action:
            action: call-service
            service: unified_remote.call
            service_data:
              target: 192.168.2.17
              remote_id: Unified.PotPlayer
              action: fullscreen
          icon: mdi:arrow-expand-all
          show_icon: true
          show_state: true
          card_mod:
            style: |
              ha-card {
                border: none;
                background-color: #ffffff10;
                box-shadow: none;
                margin: 0;
                width: 100% !important;
                height: 100%;
                position: relative;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
              }
        - type: custom:button-card
          entity: ''
          tap_action:
            action: call-service
            service: unified_remote.call
            service_data:
              target: 192.168.2.17
              remote_id: Unified.PotPlayer
              action: play_pause
          icon: mdi:play-pause
          show_icon: true
          show_state: true
          card_mod:
            style: |
              ha-card {
                border: none;
                background-color: #ffffff10;
                box-shadow: none;
                margin: 0;
                width: 100% !important;
                height: 100%;
                position: relative;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
              }
    - square: true
      type: grid
      cards:
        - type: custom:button-card
          entity: ''
          tap_action:
            action: call-service
            service: unified_remote.call
            service_data:
              target: 192.168.2.17
              remote_id: Unified.PotPlayer
              action: big_back
          icon: mdi:rewind-30
          show_icon: true
          show_state: true
          card_mod:
            style: |
              ha-card {
                border: none;
                background-color: #ffffff10;
                box-shadow: none;
                width: 100% !important;
                height: 100%;
                position: relative;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
              }
        - type: custom:button-card
          entity: ''
          tap_action:
            action: call-service
            service: unified_remote.call
            service_data:
              target: 192.168.2.17
              remote_id: Unified.PotPlayer
              action: small_back
          icon: mdi:rewind-5
          show_icon: true
          show_state: true
          card_mod:
            style: |
              ha-card {
                border: none;
                background-color: #ffffff10;
                box-shadow: none;
                width: 100% !important;
                height: 100%;
                position: relative;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
              }
        - type: custom:button-card
          entity: ''
          tap_action:
            action: call-service
            service: unified_remote.call
            service_data:
              target: 192.168.2.17
              remote_id: Unified.PotPlayer
              action: small_forward
          icon: mdi:fast-forward-5
          show_icon: true
          show_state: true
          card_mod:
            style: |
              ha-card {
                border: none;
                background-color: #ffffff10;
                box-shadow: none;
                width: 100% !important;
                height: 100%;
                position: relative;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
              }
        - type: custom:button-card
          entity: ''
          tap_action:
            action: call-service
            service: unified_remote.call
            service_data:
              target: 192.168.2.17
              remote_id: Unified.PotPlayer
              action: big_forward
          icon: mdi:fast-forward-30
          show_icon: true
          show_state: true
          card_mod:
            style: |
              ha-card {
                border: none;
                background-color: #ffffff10;
                box-shadow: none;
                width: 100% !important;
                height: 100%;
                position: relative;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
              }
      columns: 4
card_mod:
  style: |
    ha-card {
      background: #42A5F5;
      border: none;
      padding: 8px
    }

Spotify

type: custom:mod-card
card:
  type: vertical-stack
  cards:
    - square: true
      type: grid
      cards:
        - type: custom:button-card
          entity: ''
          tap_action:
            action: call-service
            service: unified_remote.call
            service_data:
              target: 192.168.2.17
              remote_id: Unified.Spotify
              action: volume_down
          icon: mdi:volume-medium
          show_icon: true
          show_state: true
          card_mod:
            style: |
              ha-card {
                border: none;
                background-color: #ffffff10;
                box-shadow: none;
                margin: 0;
                width: 100% !important;
                height: 100%;
                position: relative;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
              }
        - type: custom:button-card
          entity: ''
          tap_action:
            action: call-service
            service: unified_remote.call
            service_data:
              target: 192.168.2.17
              remote_id: Unified.Spotify
              action: volume_mute
          icon: mdi:volume-mute
          show_icon: true
          show_state: true
          card_mod:
            style: |
              ha-card {
                border: none;
                background-color: #ffffff10;
                box-shadow: none;
                margin: 0;
                width: 100% !important;
                height: 100%;
                position: relative;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
              }
        - type: custom:button-card
          entity: ''
          tap_action:
            action: call-service
            service: unified_remote.call
            service_data:
              target: 192.168.2.17
              remote_id: Unified.Spotify
              action: volume_up
          icon: mdi:volume-high
          show_icon: true
          show_state: true
          card_mod:
            style: |
              ha-card {
                border: none;
                background-color: #ffffff10;
                box-shadow: none;
                margin: 0;
                width: 100% !important;
                height: 100%;
                position: relative;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
              }
      columns: 3
    - square: true
      type: grid
      cards:
        - type: custom:button-card
          entity: ''
          tap_action:
            action: call-service
            service: unified_remote.call
            service_data:
              target: 192.168.2.17
              remote_id: Unified.Spotify
              action: volume_down
          icon: mdi:skip-backward
          show_icon: true
          show_state: true
          card_mod:
            style: |
              ha-card {
                border: none;
                background-color: #ffffff10;
                box-shadow: none;
                margin: 0;
                width: 100% !important;
                height: 100%;
                position: relative;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
              }
        - type: custom:button-card
          entity: ''
          tap_action:
            action: call-service
            service: unified_remote.call
            service_data:
              target: 192.168.2.17
              remote_id: Unified.Spotify
              action: volume_down
          icon: mdi:skip-forward
          show_icon: true
          show_state: true
          card_mod:
            style: |
              ha-card {
                border: none;
                background-color: #ffffff10;
                box-shadow: none;
                margin: 0;
                width: 100% !important;
                height: 100%;
                position: relative;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
              }
      columns: 2
    - type: grid
      cards:
        - type: custom:button-card
          entity: ''
          tap_action:
            action: call-service
            service: unified_remote.call
            service_data:
              target: 192.168.2.17
              remote_id: Unified.Spotify
              action: volume_down
          icon: mdi:shuffle-variant
          show_icon: true
          show_state: true
          card_mod:
            style: |
              ha-card {
                border: none;
                background-color: #ffffff10;
                box-shadow: none;
                margin: 0;
                width: 100% !important;
                height: 100%;
                position: relative;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
              }
        - type: custom:button-card
          entity: ''
          tap_action:
            action: call-service
            service: unified_remote.call
            service_data:
              target: 192.168.2.17
              remote_id: Unified.Spotify
              action: volume_down
          icon: mdi:play-pause
          show_icon: true
          show_state: true
          card_mod:
            style: |
              ha-card {
                border: none;
                background-color: #ffffff10;
                box-shadow: none;
                margin: 0;
                width: 100% !important;
                height: 100%;
                position: relative;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
              }
        - type: custom:button-card
          entity: ''
          tap_action:
            action: call-service
            service: unified_remote.call
            service_data:
              target: 192.168.2.17
              remote_id: Unified.Spotify
              action: volume_down
          icon: mdi:repeat-variant
          show_icon: true
          show_state: true
          card_mod:
            style: |
              ha-card {
                border: none;
                background-color: #ffffff10;
                box-shadow: none;
                margin: 0;
                width: 100% !important;
                height: 100%;
                position: relative;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
              }
card_mod:
  style: |
    ha-card {
      background: #3bb92a;
      border: none;
      padding: 8px
    }

MusicBee

type: custom:mod-card
card:
  type: vertical-stack
  cards:
    - square: true
      type: grid
      cards:
        - type: custom:button-card
          entity: ''
          tap_action:
            action: call-service
            service: unified_remote.call
            service_data:
              target: 192.168.2.17
              remote_id: Unified.MusicBee
              action: volume_down
          icon: mdi:volume-medium
          show_icon: true
          show_state: true
          card_mod:
            style: |
              ha-card {
                border: none;
                background-color: #ffffff10;
                box-shadow: none;
                margin: 0;
                width: 100% !important;
                height: 100%;
                position: relative;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
              }
        - type: custom:button-card
          entity: ''
          tap_action:
            action: call-service
            service: unified_remote.call
            service_data:
              target: 192.168.2.17
              remote_id: Unified.MusicBee
              action: volume_mute
          icon: mdi:volume-mute
          show_icon: true
          show_state: true
          card_mod:
            style: |
              ha-card {
                border: none;
                background-color: #ffffff10;
                box-shadow: none;
                margin: 0;
                width: 100% !important;
                height: 100%;
                position: relative;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
              }
        - type: custom:button-card
          entity: ''
          tap_action:
            action: call-service
            service: unified_remote.call
            service_data:
              target: 192.168.2.17
              remote_id: Unified.MusicBee
              action: volume_up
          icon: mdi:volume-high
          show_icon: true
          show_state: true
          card_mod:
            style: |
              ha-card {
                border: none;
                background-color: #ffffff10;
                box-shadow: none;
                margin: 0;
                width: 100% !important;
                height: 100%;
                position: relative;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
              }
      columns: 3
    - square: true
      type: grid
      cards:
        - type: custom:button-card
          entity: ''
          tap_action:
            action: call-service
            service: unified_remote.call
            service_data:
              target: 192.168.2.17
              remote_id: Unified.MusicBee
              action: previous
          icon: mdi:skip-backward
          show_icon: true
          show_state: true
          card_mod:
            style: |
              ha-card {
                border: none;
                background-color: #ffffff10;
                box-shadow: none;
                margin: 0;
                width: 100% !important;
                height: 100%;
                position: relative;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
              }
        - type: custom:button-card
          entity: ''
          tap_action:
            action: call-service
            service: unified_remote.call
            service_data:
              target: 192.168.2.17
              remote_id: Unified.MusicBee
              action: next
          icon: mdi:skip-forward
          show_icon: true
          show_state: true
          card_mod:
            style: |
              ha-card {
                border: none;
                background-color: #ffffff10;
                box-shadow: none;
                margin: 0;
                width: 100% !important;
                height: 100%;
                position: relative;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
              }
      columns: 2
    - square: true
      type: grid
      cards:
        - type: custom:button-card
          entity: ''
          tap_action:
            action: call-service
            service: unified_remote.call
            service_data:
              target: 192.168.2.17
              remote_id: Unified.MusicBee
              action: stop
          icon: mdi:stop
          show_icon: true
          show_state: true
          card_mod:
            style: |
              ha-card {
                border: none;
                background-color: #ffffff10;
                box-shadow: none;
                margin: 0;
                width: 100% !important;
                height: 100%;
                position: relative;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
              }
        - type: custom:button-card
          entity: ''
          tap_action:
            action: call-service
            service: unified_remote.call
            service_data:
              target: 192.168.2.17
              remote_id: Unified.MusicBee
              action: play_pause
          icon: mdi:play-pause
          show_icon: true
          show_state: true
          card_mod:
            style: |
              ha-card {
                border: none;
                background-color: #ffffff10;
                box-shadow: none;
                margin: 0;
                width: 100% !important;
                height: 100%;
                position: relative;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
              }
      columns: 2
card_mod:
  style: |
    ha-card {
      background: #e0a821;
      border: none;
      padding: 8px;
    }

YouTube Web

type: custom:mod-card
card:
  type: vertical-stack
  cards:
    - square: true
      type: grid
      cards:
        - type: custom:button-card
          entity: ''
          tap_action:
            action: call-service
            service: unified_remote.call
            service_data:
              target: 192.168.2.17
              remote_id: Unified.YouTubeWeb
              action: volume_down
          icon: mdi:volume-medium
          show_icon: true
          show_state: true
          card_mod:
            style: |
              ha-card {
                border: none;
                background-color: #ffffff10;
                box-shadow: none;
                margin: 0;
                width: 100% !important;
                height: 100%;
                position: relative;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
              }
        - type: custom:button-card
          entity: ''
          tap_action:
            action: call-service
            service: unified_remote.call
            service_data:
              target: 192.168.2.17
              remote_id: Unified.YouTubeWeb
              action: volume_up
          icon: mdi:volume-high
          show_icon: true
          show_state: true
          card_mod:
            style: |
              ha-card {
                border: none;
                background-color: #ffffff10;
                box-shadow: none;
                margin: 0;
                width: 100% !important;
                height: 100%;
                position: relative;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
              }
      columns: 2
    - square: true
      type: grid
      cards:
        - type: custom:button-card
          entity: ''
          tap_action:
            action: call-service
            service: unified_remote.call
            service_data:
              target: 192.168.2.17
              remote_id: Unified.YouTubeWeb
              action: rewind
          icon: mdi:rewind-outline
          show_icon: true
          show_state: true
          card_mod:
            style: |
              ha-card {
                border: none;
                background-color: #ffffff10;
                box-shadow: none;
                width: 100% !important;
                height: 100%;
                position: relative;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
              }
        - type: custom:button-card
          entity: ''
          tap_action:
            action: call-service
            service: unified_remote.call
            service_data:
              target: 192.168.2.17
              remote_id: Unified.YouTubeWeb
              action: fast_forward
          icon: mdi:fast-forward-outline
          show_icon: true
          show_state: true
          card_mod:
            style: |
              ha-card {
                border: none;
                background-color: #ffffff10;
                box-shadow: none;
                width: 100% !important;
                height: 100%;
                position: relative;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
              }
      columns: 2
    - square: true
      type: grid
      cards:
        - type: custom:button-card
          entity: ''
          tap_action:
            action: call-service
            service: unified_remote.call
            service_data:
              target: 192.168.2.17
              remote_id: Unified.YouTubeWeb
              action: previous
          icon: mdi:skip-backward
          show_icon: true
          show_state: true
          card_mod:
            style: |
              ha-card {
                border: none;
                background-color: #ffffff10;
                box-shadow: none;
                margin: 0;
                width: 100% !important;
                height: 100%;
                position: relative;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
              }
        - type: custom:button-card
          entity: ''
          tap_action:
            action: call-service
            service: unified_remote.call
            service_data:
              target: 192.168.2.17
              remote_id: Unified.YouTubeWeb
              action: next
          icon: mdi:skip-forward
          show_icon: true
          show_state: true
          card_mod:
            style: |
              ha-card {
                border: none;
                background-color: #ffffff10;
                box-shadow: none;
                margin: 0;
                width: 100% !important;
                height: 100%;
                position: relative;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
              }
      columns: 2
    - square: true
      type: grid
      cards:
        - type: custom:button-card
          entity: ''
          tap_action:
            action: call-service
            service: unified_remote.call
            service_data:
              target: 192.168.2.17
              remote_id: Unified.YouTubeWeb
              action: fullscreen
          icon: mdi:arrow-expand-all
          show_icon: true
          show_state: true
          card_mod:
            style: |
              ha-card {
                border: none;
                background-color: #ffffff10;
                box-shadow: none;
                margin: 0;
                width: 100% !important;
                height: 100%;
                position: relative;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
              }
        - type: custom:button-card
          entity: ''
          tap_action:
            action: call-service
            service: unified_remote.call
            service_data:
              target: 192.168.2.17
              remote_id: Unified.YouTubeWeb
              action: play_pause
          icon: mdi:play-pause
          show_icon: true
          show_state: true
          card_mod:
            style: |
              ha-card {
                border: none;
                background-color: #ffffff10;
                box-shadow: none;
                margin: 0;
                width: 100% !important;
                height: 100%;
                position: relative;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
              }
      columns: 2
card_mod:
  style: |
    ha-card {
      background: #d41a1a;
      border: none;
      padding: 8px
    }

Personally I find the cards take up too much screen real estate. So I throw them into another horizontal-stack (2 to a row).

I may end up displaying the full-size cards on mobile devices, and then hiding them on large displays (and vice versa) using the mediaquery option in lovelace-layout-card.

I'm keen to see what cards other people have come up with.

[DaviPtrs]

That's awesome, thanks for your contribution!