I would prefer individual control. I inserted your helpful code and I’ve tried playing with --mmp-unit, but it wrecks havoc! ).
card_mod:
style: |
ha-card {
--mmp-text-color: blue !important;
--mmp-unit: 1.1 !important;
--mdc-icon-size: 32px !important;
}
:host {
margin: 12px 12px 12px 12px !important;
}
.entity__info__name {
font-size: 15px !important;
#color: magenta !important;
}
div.mmp-player__adds mmp-media-controls {
opacity: 75%;
font-size: smaller;
}
div.mmp-player {
border: 0px solid rgba(0,0,0,0.12);
border-radius: 12px 12px 12px 12px;
}
div.mmp-player__adds {
margin-left: 12px;
margin-right: 0px;
}
The main file code is below, but if you want it all, I’d need to make a repo - which I can. There’s a lot of code for the fancy dpad!
Full Main File Code:
# lovelace_gen
# setup variables
{% set dpad_entity = "remote.samsung_q90_porch" %}
{% set menu_entity = "media_player.samsung_q90_porch" %}
{% set dpad_menu_icon_color = "white" %}
{% set dpad_menu_bg = "dimgrey" %}
{% set dpad_menu_br = "10px" %}
{% set dpad_bg = "lightgrey" %}
{% set dpad_icon_color = "black" %}
{% set dpad_br_center = "0% 0% 0% 0% / 50%" %}
{% set btn_data = {
"btnTopLeft": {"command": "KEY_INFO", "icon": "mdi:information-variant"},
"btnTopRight": {"command": "KEY_MENU", "icon": "mdi:tools"},
"btnBotLeft": {"command": "KEY_RETURN", "icon": "mdi:arrow-u-left-top"},
"btnBotRight": {"command": "KEY_HOME", "icon": "mdi:home"},
"btnLeft": {"command": "KEY_LEFT", "icon": "mdi:arrow-left-thick"},
"btnUp": {"command": "KEY_UP", "icon": "mdi:arrow-up-thick"},
"btnRight": {"command": "KEY_RIGHT", "icon": "mdi:arrow-right-thick"},
"btnDown": {"command": "KEY_DOWN", "icon": "mdi:arrow-down-thick"},
"btnCenter": {"command": "KEY_ENTER", "icon": "mdi:circle-outline"}
} %}
{% set shortcut_data = [
{"command": "JBL BAR 9.1", "icon": "mdi:hdmi-port", "color": "black"},
{"command": "Peacock TV", "icon": "fapro:peacock#fullcolor"},
{"command": "Prime Video", "icon": "si:prime", "color": "rgb(0,168,225)"},
{"command": "Netflix", "icon": "fapro:netflix#fullcolor"},
{"command": "YouTube TV", "icon": "mdi:youtube-tv", "color": "rgb(255, 0, 0)"},
{"command": "YouTube", "icon": " fapro:youtube#fullcolor"},
{"command": "Apple TV", "icon": "si:appletv", "color": "black", "size":'64px'},
{"command": "ESPN", "icon": "fapro:espn3#fullcolor", "size":'48px'},
{"command": "Paramount+", "icon": "fapro:paramounto#fullcolor", "size":"64px"},
{"command": "KEY_ENTER", "icon": "mdi:circle-outline"},
] %}
{% set test = (btn_data | tojson) %}
# remote_command, remote_icon
# send variables to include file
button_card_templates:
!include
- includes/components/dpad/dpad_bc_template.yaml
- dpad_bg: {{ dpad_bg }}
menu_bg: {{ dpad_menu_bg }}
menu_br: {{ dpad_menu_br }}
dpad_entity: {{ dpad_entity }}
menu_entity: {{ menu_entity }}
menu_icon_color: {{dpad_menu_icon_color}}
dpad_icon_color: {{dpad_icon_color}}
dpad_br_default: {{ dpad_br_center }}
title: My Awesome Home
views:
# View tab title.
- title: Example
type: masonry
cards:
- type: custom:stack-in-card
card_mod:
style: |
ha-card {
max-width: 388px;
#lenght: 500px;
#height: 65px;
#border-radius: 20px;
#margin-bottom: 1px;
}
cards:
- type: custom:mini-media-player
entity: media_player.samsung_q90_porch
volume_stateless: true
artwork: cover
scale: 1.1
source: icon
info: scroll
group: true
hide:
jump: false
volume_level: false
power_state: false
card_mod:
style: |
ha-card {
--mmp-text-color: blue !important;
--mmp-unit: 1.1 !important;
--mdc-icon-size: 32px !important;
}
:host {
margin: 12px 12px 12px 12px !important;
}
.entity__info__name {
font-size: 15px !important;
#color: magenta !important;
}
div.mmp-player__adds mmp-media-controls {
opacity: 75%;
font-size: smaller;
}
div.mmp-player {
border: 0px solid rgba(0,0,0,0.12);
border-radius: 12px 12px 12px 12px;
}
div.mmp-player__adds {
margin-left: 12px;
margin-right: 0px;
}
# ********* top menu shortcuts ***********
- !include
- includes/components/services_menu.yaml
- menu_bg: {{ dpad_menu_bg }}
btn_data: {{ btn_data }}
shortcut_data: {{shortcut_data}}
# ********* dpad shortcut ***********
- !include
- includes/components/dpad/dpad.yaml
- dpad_bg: {{ dpad_bg }}
menu_bg: {{ dpad_menu_bg }}
entity: {{ entity }}
menu_icon_color: {{dpad_menu_icon_color}}
dpad_icon_color: {{dpad_icon_color}}
btn_data: {{ btn_data }}
#- type: custom:button-card
# entity: media_player.samsung_q90_porch
# name: >
# [[[
# return entity.attributes['source']
# ]]]
#- type: custom:button-card
# icon: mdi:circle-outline
# name: {{(test | fromjson).btnTopLeft.icon}}
