Long time lurker, first time poster… Just in the FWIW department… I did a little tweaking & messing around last night & got a (decent looking) replica of my Harmony Elite remote. Figured someone else may want to use it. Uses custom:hui-element, custom:card-mod, vertical-stack, horizontal-stack, custom:gap-card… and probably a few others that I’ve now forgotten about adding.
Disclaimer: I AM A NOOB. I just started with Home Assistant after years of manually building connections with webhooks, APIs & hacked together $#!%. I’m no developer & no designer, so please don’t be too rough.
type: entities
entities:
- type: custom:hui-element
card_type: custom:mod-card
style: |
ha-card {
border-radius: 30px;
padding: 20px 15px 15px 15px;
background: black;
}
card:
type: vertical-stack
cards:
- type: horizontal-stack
cards:
- show_name: false
show_icon: true
type: button
tap_action:
action: toggle
icon_height: 30px
entity: remote.harmony_hub
icon: mdi:power
card_mod:
style: |
ha-card {
border-radius:12px 12px 12px/50%;
background: black;
--card-mod-icon-color: white;
}
- type: custom:gap-card
- type: custom:gap-card
- type: picture
image: local/logilogo.png
tap_action:
action: none
hold_action:
action: none
card_mod:
style: |
ha-card {
border: 0;
padding-top: 10px;
padding-right: 5 px;
border-radius:12px 12px 12px/50%;
background: black;
--card-mod-icon-color: white;
}
- type: custom:gap-card
height: 11
- type: custom:mini-media-player
name: Media
entity: media_player.fire_tv_192_168_0_106
artwork: cover-fit
info: scroll
toggle_power: true
source: icon
replace_mute: play_pause
- type: custom:gap-card
- type: horizontal-stack
cards:
- show_name: true
show_icon: true
type: button
tap_action:
action: toggle
entity: switch.harmony_hub_watch_firetv
name: Watch Fire TV
icon: mdi:television-play
show_state: false
icon_height: 50px
card_mod:
style: |
ha-card {
border-radius:12px 12px 12px/50%;
background: black;
--card-mod-icon-color: white;
}
- show_name: true
show_icon: true
type: button
tap_action:
action: toggle
entity: switch.harmony_hub_play_ps4
icon_height: 50px
name: Play PS4
icon: mdi:controller
show_state: false
card_mod:
style: |
ha-card {
border-radius:12px 12px 12px/50%;
background: black;
--card-mod-icon-color: white;
}
- type: custom:gap-card
- type: horizontal-stack
cards:
- show_name: false
show_icon: true
type: button
tap_action:
action: call-service
service: remote.send_command
target:
entity_id: remote.harmony_hub
data:
num_repeats: 1
delay_secs: 0.4
hold_secs: 0
device: '69435658'
command: Rewind
entity: remote.harmony_hub
show_state: false
hold_action:
action: none
name: Rewind
icon: mdi:skip-backward-outline
icon_height: 35px
card_mod:
style: |
ha-card {
border-radius:12px 12px 12px/50%;
background: black;
--card-mod-icon-color: white;
}
- show_name: false
show_icon: true
type: button
tap_action:
action: call-service
service: remote.send_command
target:
entity_id: remote.harmony_hub
data:
num_repeats: 1
delay_secs: 0.4
hold_secs: 0
command: Play
device: '69435658'
icon: mdi:play-pause
entity: remote.harmony_hub
name: Play / Pause
icon_height: 35px
card_mod:
style: |
ha-card {
border-radius:12px 12px 12px/50%;
background: black;
--card-mod-icon-color: white;
}
- show_name: false
show_icon: true
type: button
tap_action:
action: call-service
service: remote.send_command
target:
entity_id: remote.harmony_hub
data:
num_repeats: 1
delay_secs: 0.4
hold_secs: 0
device: '69435658'
command: FastForward
entity: remote.harmony_hub
show_state: false
hold_action:
action: none
name: Fast Forward
icon: mdi:skip-forward-outline
icon_height: 35px
card_mod:
style: |
ha-card {
border-radius:12px 12px 12px/50%;
background: black;
--card-mod-icon-color: white;
}
- type: horizontal-stack
cards:
- show_name: false
show_icon: true
type: button
tap_action:
action: none
service: remote.send_command
target:
entity_id: remote.harmony_hub
data:
num_repeats: 1
delay_secs: 0.4
hold_secs: 0
device: '69435658'
show_state: false
hold_action:
action: none
name: Record
icon: mdi:circle-outline
icon_height: 30px
card_mod:
style: |
ha-card {
border-radius:12px 12px 12px/50%;
background: black;
--card-mod-icon-color: red;
}
- type: button
show_name: false
show_icon: false
tap_action:
action: none
entity: remote.harmony_hub
card_mod:
style: |
ha-card {
visibility: hidden;
}
show_state: false
hold_action:
action: none
icon_height: 5px
- show_name: false
show_icon: true
type: button
tap_action:
action: call-service
service: remote.send_command
target:
entity_id: remote.harmony_hub
data:
num_repeats: 1
delay_secs: 0.4
hold_secs: 0
device: '69435658'
command: Stop
entity: remote.harmony_hub
show_state: false
hold_action:
action: none
name: Stop
icon: mdi:crop-square
icon_height: 35px
card_mod:
style: |
ha-card {
border-radius:12px 12px 12px/50%;
background: black;
--card-mod-icon-color: white;
}
- type: horizontal-stack
cards:
- show_name: true
show_icon: false
type: button
tap_action:
action: call-service
service: remote.send_command
target:
entity_id: remote.harmony_hub
data:
num_repeats: 1
delay_secs: 0.4
hold_secs: 0
device: '69435658'
command: Exit
entity: remote.harmony_hub
show_state: false
hold_action:
action: none
name: Exit
icon: mdi:exit-to-app
card_mod:
style: |
ha-card {
border-radius:12px 12px 12px/50%;
background: black;
}
- show_name: false
show_icon: true
type: button
entity: remote.harmony_hub
icon: mdi:menu-up
show_state: false
tap_action:
action: call-service
service: remote.send_command
target:
entity_id: remote.harmony_hub
data:
num_repeats: 1
delay_secs: 0.4
hold_secs: 0
command: DirectionUp
device: '69435658'
name: Direction Up
card_mod:
style: |
ha-card {
border: 0;
background: black;
--card-mod-icon-color: white;
margin-top: 0px;
}
- show_name: true
show_icon: false
type: button
tap_action:
action: call-service
service: remote.send_command
target:
entity_id: remote.harmony_hub
data:
num_repeats: 1
delay_secs: 0.4
hold_secs: 0
command: Menu
device: '69435658'
name: Menu
entity: remote.harmony_hub
icon: mdi:menu
card_mod:
style: |
ha-card {
border-radius:12px 12px 5px/50px;
background: black;
}
- type: horizontal-stack
cards:
- show_name: false
show_icon: true
type: button
entity: remote.harmony_hub
icon: mdi:menu-left
show_state: false
tap_action:
action: call-service
service: remote.send_command
target:
entity_id: remote.harmony_hub
data:
num_repeats: 1
delay_secs: 0.4
hold_secs: 0
command: DirectionLeft
device: '69435658'
name: Direction Left
card_mod:
style: |
ha-card {
border: 0;
background: black;
--card-mod-icon-color: white;
}
- show_name: true
show_icon: false
type: button
entity: remote.harmony_hub
icon: ''
show_state: false
tap_action:
action: call-service
service: remote.send_command
target:
entity_id: remote.harmony_hub
data:
num_repeats: 1
delay_secs: 0.4
hold_secs: 0
command: OK
device: '69435658'
name: OK
card_mod:
style: |
ha-card {
border: 1;
height: 80px;
border-radius: 50%;
background: black;
--card-mod-icon-color: white;
margin-top: 0px;
}
- show_name: false
show_icon: true
type: button
entity: remote.harmony_hub
icon: mdi:menu-right
show_state: false
tap_action:
action: call-service
service: remote.send_command
target:
entity_id: remote.harmony_hub
data:
num_repeats: 1
delay_secs: 0.4
hold_secs: 0
command: DirectionRight
device: '69435658'
name: Direction Right
card_mod:
style: |
ha-card {
border: 0;
background: black;
--card-mod-icon-color: white;
}
- type: horizontal-stack
cards:
- show_name: false
show_icon: true
type: button
entity: remote.harmony_hub
icon: mdi:volume-off
show_state: false
tap_action:
action: call-service
service: remote.send_command
target:
entity_id: remote.harmony_hub
data:
num_repeats: 1
delay_secs: 0.4
hold_secs: 0
command: Mute
device: '62178164'
name: Mute
icon_height: 30px
card_mod:
style: |
ha-card {
border: 1;
background: black;
--card-mod-icon-color: white;
border-radius: 12px 12px 12px/50%;
margin-top: 0px;
}
height: 30px;
- show_name: false
show_icon: true
type: button
entity: remote.harmony_hub
icon: mdi:menu-down
show_state: false
tap_action:
action: call-service
service: remote.send_command
target:
entity_id: remote.harmony_hub
data:
num_repeats: 1
delay_secs: 0.4
hold_secs: 0
command: DirectionDown
device: '69435658'
name: Direction Down
card_mod:
style: |
ha-card {
border: 0;
background: black;
--card-mod-icon-color: white;
}
- show_name: false
show_icon: true
type: button
entity: remote.harmony_hub
icon: mdi:arrow-u-left-top
show_state: false
tap_action:
action: call-service
service: remote.send_command
target:
entity_id: remote.harmony_hub
data:
num_repeats: 1
delay_secs: 0.4
hold_secs: 0
device: '69435658'
command: Back
name: Back
icon_height: 30px
card_mod:
style: |
ha-card {
border: 1;
background: black;
--card-mod-icon-color: white;
border-radius: 12px 12px 12px/50%;
margin-top: 0px;
}
height: 30px;
- type: horizontal-stack
cards:
- show_name: false
show_icon: true
type: button
tap_action:
action: call-service
service: remote.send_command
target:
entity_id: remote.harmony_hub
data:
num_repeats: 1
delay_secs: 0.4
hold_secs: 0
device: '62178164'
command: VolumeDown
icon: mdi:volume-minus
entity: remote.harmony_hub
name: Volume Down
icon_height: 30px
card_mod:
style: |
ha-card {
border: 1;
background: black;
--card-mod-icon-color: white;
border-radius: 12px 12px 12px/50%;
margin-top: 0px;
}
- show_name: false
show_icon: true
type: button
tap_action:
action: call-service
service: remote.send_command
target:
entity_id: remote.harmony_hub
data:
num_repeats: 1
delay_secs: 0.4
hold_secs: 0
device: '62178164'
command: VolumeUp
icon: mdi:volume-plus
entity: remote.harmony_hub
name: Volume Up
icon_height: 30px
card_mod:
style: |
ha-card {
border: 1;
background: black;
--card-mod-icon-color: white;
border-radius: 12px 12px 12px/50%;
margin-top: 0px;
}
height: 30px;
- show_name: true
show_icon: true
type: button
tap_action:
action: call-service
service: remote.send_command
target:
entity_id: remote.harmony_hub
data:
num_repeats: 1
delay_secs: 0.4
hold_secs: 0
device: '62178164'
command: ChannelDown
entity: remote.harmony_hub
name: CH|PG
icon: mdi:arrow-down
icon_height: 35px
card_mod:
style: |
ha-card {
border: 1;
background: black;
--card-mod-icon-color: white;
border-radius: 12px 12px 12px/50%;
margin-top: 0px;
}
height: 30px;
- show_name: true
show_icon: true
type: button
tap_action:
action: call-service
service: remote.send_command
target:
entity_id: remote.harmony_hub
data:
num_repeats: 1
delay_secs: 0.4
hold_secs: 0
device: '62178164'
command: ChannelUp
entity: remote.harmony_hub
name: CH|PG
icon: mdi:arrow-up
icon_height: 35px
card_mod:
style: |
ha-card {
border: 1;
background: black;
--card-mod-icon-color: white;
border-radius: 12px 12px 12px/50%;
margin-top: 0px;
}
height: 30px;
- type: horizontal-stack
cards:
- show_name: true
show_icon: false
type: button
tap_action:
action: none
icon: ''
entity: remote.harmony_hub
name: DVR
card_mod:
style: |
ha-card {
border: 1;
background: black;
--card-mod-icon-color: white;
border-radius: 12px 12px 12px/50%;
margin-top: 0px;
}
- show_name: true
show_icon: false
type: button
tap_action:
action: toggle
entity: remote.harmony_hub
icon: ''
name: Guide
hold_action:
action: none
card_mod:
style: |
ha-card {
border: 1;
background: black;
--card-mod-icon-color: white;
border-radius: 12px 12px 12px/50%;
margin-top: 0px;
}
- show_name: true
show_icon: false
type: button
tap_action:
action: toggle
entity: remote.harmony_hub
name: Info
hold_action:
action: none
card_mod:
style: |
ha-card {
border: 1;
background: black;
--card-mod-icon-color: white;
border-radius: 12px 12px 12px/50%;
margin-top: 0px;
}
- type: horizontal-stack
cards:
- show_name: false
show_icon: true
type: button
tap_action:
action: none
entity: remote.harmony_hub
icon: mdi:square-rounded-outline
card_mod:
style: |
ha-card {
border-radius:12px 12px 12px/50%;
background: black;
--card-mod-icon-color: red;
}
- show_name: false
show_icon: true
type: button
tap_action:
action: none
entity: remote.harmony_hub
icon: mdi:square-rounded-outline
card_mod:
style: |
ha-card {
border-radius:12px 12px 12px/50%;
background: black;
--card-mod-icon-color: green;
}
- show_name: false
show_icon: true
type: button
tap_action:
action: none
entity: remote.harmony_hub
icon: mdi:square-rounded-outline
card_mod:
style: |
ha-card {
border-radius:12px 12px 12px/50%;
background: black;
--card-mod-icon-color: yellow;
}
- show_name: false
show_icon: true
type: button
tap_action:
action: none
entity: remote.harmony_hub
icon: mdi:square-rounded-outline
card_mod:
style: |
ha-card {
border-radius:12px 12px 12px/50%;
background: black;
--card-mod-icon-color: blue;
}
- type: horizontal-stack
cards:
- show_name: false
show_icon: true
type: button
tap_action:
action: none
icon: mdi:lightbulb-outline
icon_height: 35px
card_mod:
style: |
ha-card {
border-radius:12px 12px 12px/50%;
background: black;
--card-mod-icon-color: white;
}
- show_name: false
show_icon: true
type: button
tap_action:
action: none
icon: mdi:plus
icon_height: 35px
card_mod:
style: |
ha-card {
border-radius:12px 12px 12px/50%;
background: black;
--card-mod-icon-color: white;
}
- show_name: false
show_icon: true
type: button
tap_action:
action: call-service
service: remote.send_command
target:
entity_id: remote.harmony_hub
data:
num_repeats: 1
delay_secs: 0.4
hold_secs: 0
icon_height: 35px
icon: mdi:power-plug
hold_action:
action: none
card_mod:
style: |
ha-card {
border-radius:12px 12px 12px/50%;
background: black;
--card-mod-icon-color: white;
}
- type: horizontal-stack
cards:
- show_name: false
show_icon: true
type: button
tap_action:
action: none
entity: remote.harmony_hub
icon: mdi:lightbulb-outline
icon_height: 35px
hold_action:
action: none
card_mod:
style: |
ha-card {
border-radius:12px 12px 12px/50%;
background: black;
--card-mod-icon-color: white;
}
- show_name: false
show_icon: true
type: button
tap_action:
action: none
entity: remote.harmony_hub
icon: mdi:minus
icon_height: 35px
card_mod:
style: |
ha-card {
border-radius:12px 12px 12px/50%;
background: black;
--card-mod-icon-color: white;
}
- show_name: false
show_icon: true
type: button
tap_action:
action: toggle
icon_height: 35px
icon: mdi:power-plug
card_mod:
style: |
ha-card {
border-radius:12px 12px 12px/50%;
background: black;
--card-mod-icon-color: white;
}
- type: custom:gap-card
view_layout:
position: sidebar
