hass-unified-remote
hass-unified-remote copied to clipboard
Published
20 hours ago •
DaviPtrs
DaviPtrs
Custom Remote Cards to Share
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.
