Adding this to help others who need a simple popup remote control solution. In order to use this you’ll need to install:
HACS and the following custom repositories via HACS
Browser Mod (for the custom popup cards)
Button Card (to manage all the buttons)
Layout Card (for the layout of the remote buttons)
Apple TV Beta (if you have an Apple TV)
It’s a simple solution, but getting the popup working and the layout correct was a bit of a pain. There are probably a handful of ways to do this better, but they’re all beyond me. Hopefully someone can copy/paste this down the road and save some time. It uses a grid function via the custom layout card to help keep the buttons neat. The custom grid was used to get control over column width. You could use a regular Lovelace grid, but your remote will end up looking pretty large. That may be desirable, I suppose. With the custom grid and custom column widths you’ll need to manage the margins so the button layout is centered on the popup card. Excuse the terrible TV content on the media entities.
type: custom:button-card
show_name: true
show_icon: true
color: grey
name: Apple TV Remote
icon: mdi:remote-tv
tap_action:
action: fire-dom-event
browser_mod:
command: popup
title: Den Apple TV
card:
type: custom:layout-card
layout_type: grid
layout:
grid-template-rows: auto
grid-template-columns: 30% 30% 30%
margin: 100px 0px 0px 35px
cards:
- type: custom:button-card
color: maroon
icon: mdi:power
name: TV Power
show_icon: true
show_name: false
tap_action:
action: call-service
service: remote.send_command
service_data:
command:
- home_hold
- select
entity_id: remote.den
- type: custom:button-card
icon: mdi:home
name: Home
show_icon: true
show_name: false
tap_action:
action: call-service
service: remote.send_command
service_data:
command: home
entity_id: remote.den
- type: custom:button-card
icon: mdi:backburger
name: Home
show_icon: true
show_name: false
tap_action:
action: call-service
service: remote.send_command
service_data:
command: menu
entity_id: remote.den
- type: custom:gap-card
- type: custom:button-card
aspect_ratio: 1/1
size: 75px
icon: mdi:chevron-up
name: Up
show_icon: true
show_name: false
tap_action:
action: call-service
service: remote.send_command
service_data:
command: up
entity_id: remote.den
- type: custom:gap-card
- type: custom:button-card
aspect_ratio: 1/1
size: 75px
icon: mdi:chevron-left
name: Left
show_icon: true
show_name: false
tap_action:
action: call-service
service: remote.send_command
service_data:
command: left
entity_id: remote.den
- type: custom:button-card
aspect_ratio: 1/1
size: 75px
icon: mdi:circle
name: Select
show_icon: true
show_name: false
tap_action:
action: call-service
service: remote.send_command
service_data:
command: select
entity_id: remote.den
- type: custom:button-card
aspect_ratio: 1/1
size: 75px
icon: mdi:chevron-right
name: Right
show_icon: true
show_name: false
tap_action:
action: call-service
service: remote.send_command
service_data:
command: right
entity_id: remote.den
- type: custom:gap-card
- type: custom:button-card
aspect_ratio: 1/1
size: 75px
icon: mdi:chevron-down
name: Down
show_icon: true
show_name: false
tap_action:
action: call-service
service: remote.send_command
service_data:
command: down
entity_id: remote.den
- type: custom:gap-card
- type: custom:button-card
icon: mdi:play-pause
name: Down
show_icon: true
show_name: false
tap_action:
action: call-service
service: remote.send_command
service_data:
command: play_pause
entity_id: remote.den
- type: custom:button-card
icon: mdi:skip-backward
name: Down
show_icon: true
show_name: false
tap_action:
action: call-service
service: remote.send_command
service_data:
command: skip_backward
entity_id: remote.den
- type: custom:button-card
icon: mdi:volume-plus
name: Volume Up
show_icon: true
show_name: false
tap_action:
action: call-service
service: remote.send_command
service_data:
command: VolumeUp
device: '68973473'
entity_id: remote.harmony_hub
- type: custom:button-card
icon: mdi:volume-mute
name: Mute
show_icon: true
show_name: false
tap_action:
action: call-service
service: remote.send_command
service_data:
command: volumemute
device: '68973473'
entity_id: remote.harmony_hub
- type: custom:button-card
icon: mdi:skip-forward
name: Down
show_icon: true
show_name: false
tap_action:
action: call-service
service: remote.send_command
service_data:
command: skip_forward
entity_id: remote.den
- type: custom:button-card
icon: mdi:volume-minus
name: Volume Down
show_icon: true
show_name: false
tap_action:
action: call-service
service: remote.send_command
service_data:
command: VolumeDown
device: '68973473'
entity_id: remote.harmony_hub
- type: custom:button-card
icon: mdi:brightness-5
name: PictureMode
show_icon: true
show_name: false
tap_action:
action: call-service
service: remote.send_command
service_data:
command: picturemode
device: '68813604'
entity_id: remote.harmony_hub
- type: custom:gap-card
- type: custom:button-card
icon: mdi:information
name: Info
show_icon: true
show_name: false
tap_action:
action: call-service
service: remote.send_command
service_data:
command: info
device: '68813604'
entity_id: remote.harmony_hub
