Closed nichtlegacy closed 3 days ago
JackJPowell
commented
4 months ago Sure. Do you use the same dashboard? Without that as a base, the yaml as is won't be very useful. But if you are just looking for how to extract the extra state attributes, it can give you some pointers.
dnestico
commented
4 months ago Please do an explanation if possible, I've made my own version but am struggling how to access the nested attributes to show the earned trophies for a currently being played game, thanks
My button-card example
- type: grid
square: false
columns: 2
cards:
- type: custom:button-card
name: |-
[[[
return states['sensor.davidnestico_status'].attributes.trophies.platinum || 'Unknown';
]]]
entity: media_player.now_playing
label: Platinum
show_name: true
show_label: true
show_icon: true
aspect_ratio: 1/1
icon: mdi:trophy-variant
tap_action:
action: more-info
haptic: medium
styles:
grid:
- grid-template-columns: 2fr 1fr 1fr
- grid-template-rows: 2fr 0.1fr 1fr 1fr
- grid-template-areas: |
"i . ."
". . ."
"n n n"
"l l l"
card:
- background: rgba(0, 111, 205, 0.5)
- border-radius: 30px
- box-shadow: none
name:
- color: var(--primary-text-color)
- font-size: 1.5rem
- font-weight: bold
- justify-self: start
- align-self: end
- margin: 0px 0px 0px 20px
- text-transform: capitalize
label:
- text-transform: capitalize
- font-size: 1rem
- justify-self: start
- align-self: start
- margin: 2px 0px 0px 20px
- color: grey
icon:
- color: '#E5E4E2'
card_mod:
style: |
ha-card:active {
transform: scale(0.975);
transition: 0s;
}
- type: custom:button-card
name: |-
[[[
return states['sensor.davidnestico_status'].attributes.trophies.gold || 'Unknown';
]]]
entity: media_player.now_playing
label: Gold
show_name: true
show_label: true
show_icon: true
aspect_ratio: 1/1
icon: mdi:trophy-variant
tap_action:
action: more-info
haptic: medium
styles:
grid:
- grid-template-columns: 2fr 1fr 1fr
- grid-template-rows: 2fr 0.1fr 1fr 1fr
- grid-template-areas: |
"i . ."
". . ."
"n n n"
"l l l"
card:
- background: rgba(255, 215, 0, 0.5)
- border-radius: 30px
- box-shadow: none
name:
- color: var(--primary-text-color)
- font-size: 1.5rem
- font-weight: bold
- justify-self: start
- align-self: end
- margin: 0px 0px 0px 20px
- text-transform: capitalize
label:
- text-transform: capitalize
- font-size: 1rem
- justify-self: start
- align-self: start
- margin: 2px 0px 0px 20px
- color: grey
icon:
- color: rgba(255, 215, 0)
card_mod:
style: |
ha-card:active {
transform: scale(0.975);
transition: 0s;
}
- type: custom:button-card
name: |-
[[[
return states['sensor.davidnestico_status'].attributes.trophies.silver || 'Unknown';
]]]
entity: media_player.now_playing
label: Silver
show_name: true
show_label: true
show_icon: true
aspect_ratio: 1/1
icon: mdi:trophy-variant
tap_action:
action: more-info
haptic: medium
styles:
grid:
- grid-template-columns: 2fr 1fr 1fr
- grid-template-rows: 2fr 0.1fr 1fr 1fr
- grid-template-areas: |
"i . ."
". . ."
"n n n"
"l l l"
card:
- background: rgba(189, 195, 199, 0.5)
- border-radius: 30px
- box-shadow: none
name:
- color: var(--primary-text-color)
- font-size: 1.5rem
- font-weight: bold
- justify-self: start
- align-self: end
- margin: 0px 0px 0px 20px
- text-transform: capitalize
label:
- text-transform: capitalize
- font-size: 1rem
- justify-self: start
- align-self: start
- margin: 2px 0px 0px 20px
- color: grey
icon:
- color: rgba(189, 195, 199)
card_mod:
style: |
ha-card:active {
transform: scale(0.975);
transition: 0s;
}
- type: custom:button-card
name: |-
[[[
return states['sensor.davidnestico_status'].attributes.trophies.bronze || 'Unknown';
]]]
entity: media_player.now_playing
label: Bronze
show_name: true
show_label: true
show_icon: true
aspect_ratio: 1/1
icon: mdi:trophy-variant
tap_action:
action: more-info
haptic: medium
styles:
grid:
- grid-template-columns: 2fr 1fr 1fr
- grid-template-rows: 2fr 0.1fr 1fr 1fr
- grid-template-areas: |
"i . ."
". . ."
"n n n"
"l l l"
card:
- background: rgba(212, 149, 55, 0.5)
- border-radius: 30px
- box-shadow: none
name:
- color: var(--primary-text-color)
- font-size: 1.5rem
- font-weight: bold
- justify-self: start
- align-self: end
- margin: 0px 0px 0px 20px
- text-transform: capitalize
label:
- text-transform: capitalize
- font-size: 1rem
- justify-self: start
- align-self: start
- margin: 2px 0px 0px 20px
- color: grey
icon:
- color: rgba(212, 149, 55)
card_mod:
style: |
ha-card:active {
transform: scale(0.975);
transition: 0s;
}
columns: 2 - type: custom:button-card
entity: sensor.psn_status
name: >
[[[
let data = '? / ?'
if (states['sensor.psn_status'].state != 'Offline') {
let earned = states['sensor.psn_status'].attributes.earned_trophies.platinum
let total = states['sensor.psn_status'].attributes.trophies.platinum
data = earned + " / " + total
}
return `${data}`
]]]
#name: "0 / 1"
state_display: Trophies
template:
- base
- icon_platinum
variables:
state_on: >
[[[
states['sensor.psn_status'].state == 'Playing'
]]]
card_mod:
style:
.: |
#name {
font-size: 2.2em !important;
}How does this look?
nichtlegacy
commented
4 months ago Sure. Do you use the same dashboard? Without that as a base, the yaml as is won't be very useful. But if you are just looking for how to extract the extra state attributes, it can give you some pointers.
You mean Fusion? Would be nice to have a look at your config
dnestico
commented
4 months ago - type: custom:button-card entity: sensor.psn_status name: > [[[ let data = '? / ?' if (states['sensor.psn_status'].state != 'Offline') { let earned = states['sensor.psn_status'].attributes.earned_trophies.platinum let total = states['sensor.psn_status'].attributes.trophies.platinum data = earned + " / " + total } return `${data}` ]]] #name: "0 / 1" state_display: Trophies template: - base - icon_platinum variables: state_on: > [[[ states['sensor.psn_status'].state == 'Playing' ]]] card_mod: style: .: | #name { font-size: 2.2em !important; }How does this look?
Thanks!!
ps sorry for the edits I just like changing my dashboard until its perfect for me lol
nichtlegacy
commented
4 months ago - type: custom:button-card entity: sensor.psn_status name: > [[[ let data = '? / ?' if (states['sensor.psn_status'].state != 'Offline') { let earned = states['sensor.psn_status'].attributes.earned_trophies.platinum let total = states['sensor.psn_status'].attributes.trophies.platinum data = earned + " / " + total } return `${data}` ]]] #name: "0 / 1" state_display: Trophies template: - base - icon_platinum variables: state_on: > [[[ states['sensor.psn_status'].state == 'Playing' ]]] card_mod: style: .: | #name { font-size: 2.2em !important; }How does this look?
Thanks!!
ps sorry for the edits I just like changing my dashboard until its perfect for me lol
You mind sharing your config for this dashboard?
dnestico
commented
4 months ago You mind sharing your config for this dashboard?
Here you go, it's a lot of code lol
- type: custom:bubble-card
card_type: separator
name: Now Playing
icon: mdi:steam
sub_button:
- name: ''
show_name: true
show_state: false
icon: mdi:gamepad-circle
show_attribute: true
entity: sensor.steam_76561198194162311
attribute: game
- type: custom:steam-card-compact
entity: sensor.steam_76561198194162311
game_background: true
- type: custom:bubble-card
card_type: separator
name: Now Playing
icon: mdi:sony-playstation
sub_button:
- name: ''
show_name: true
show_state: true
icon: mdi:gamepad-circle
show_background: true
entity: sensor.davidnestico_status
show_attribute: true
attribute: name
- type: custom:stack-in-card
keep:
background: true
box_shadow: true
margin: true
outer_padding: true
border_radius: true
cards:
- type: vertical-stack
cards:
- square: false
type: grid
cards:
- type: custom:mini-media-player
entity: media_player.davidnestico_ps5_console
toggle_power: false
artwork: full-cover-fit
info: scroll
volume_stateless: false
name: Now Playing
hide:
volume: true
controls: true
power: true
- type: grid
square: false
columns: 2
cards:
- type: custom:button-card
name: |
[[[
let data = 'Offline'
if (states['sensor.davidnestico_status'].state != 'Offline') {
let earned = states['sensor.davidnestico_status'].attributes.earned_trophies.platinum
let total = states['sensor.davidnestico_status'].attributes.trophies.platinum
data = earned + " / " + total
}
return `${data}`
]]]
entity: sensor.davidnestico_status
label: Platinum
show_name: true
show_label: true
show_icon: true
aspect_ratio: 1/1
icon: mdi:trophy-variant
tap_action:
action: more-info
haptic: medium
styles:
grid:
- grid-template-columns: 2fr 1fr 1fr
- grid-template-rows: 2fr 0.1fr 1fr 1fr
- grid-template-areas: |
"i . ."
". . ."
"n n n"
"l l l"
card:
- background: rgba(0, 111, 205, 0.5)
- border-radius: 30px
- box-shadow: none
name:
- color: var(--primary-text-color)
- font-size: 1.5rem
- font-weight: bold
- justify-self: start
- align-self: end
- margin: 0px 0px 0px 20px
- text-transform: capitalize
label:
- text-transform: capitalize
- font-size: 1rem
- justify-self: start
- align-self: start
- margin: 2px 0px 0px 20px
- color: auto
- opacity: 50%
icon:
- color: '#E5E4E2'
card_mod:
style: |
ha-card:active {
transform: scale(0.975);
transition: 0s;
}
- type: custom:button-card
name: |
[[[
let data = 'Offline'
if (states['sensor.davidnestico_status'].state != 'Offline') {
let earned = states['sensor.davidnestico_status'].attributes.earned_trophies.gold
let total = states['sensor.davidnestico_status'].attributes.trophies.gold
data = earned + " / " + total
}
return `${data}`
]]]
entity: sensor.davidnestico_status
label: Gold
show_name: true
show_label: true
show_icon: true
aspect_ratio: 1/1
icon: mdi:trophy-variant
tap_action:
action: more-info
haptic: medium
styles:
grid:
- grid-template-columns: 2fr 1fr 1fr
- grid-template-rows: 2fr 0.1fr 1fr 1fr
- grid-template-areas: |
"i . ."
". . ."
"n n n"
"l l l"
card:
- background: rgba(255, 215, 0, 0.5)
- border-radius: 30px
- box-shadow: none
name:
- color: var(--primary-text-color)
- font-size: 1.5rem
- font-weight: bold
- justify-self: start
- align-self: end
- margin: 0px 0px 0px 20px
- text-transform: capitalize
label:
- text-transform: capitalize
- font-size: 1rem
- justify-self: start
- align-self: start
- margin: 2px 0px 0px 20px
- color: auto
- opacity: 50%
icon:
- color: rgba(255, 215, 0)
card_mod:
style: |
ha-card:active {
transform: scale(0.975);
transition: 0s;
}
- type: custom:button-card
name: |
[[[
let data = 'Offline'
if (states['sensor.davidnestico_status'].state != 'Offline') {
let earned = states['sensor.davidnestico_status'].attributes.earned_trophies.silver
let total = states['sensor.davidnestico_status'].attributes.trophies.silver
data = earned + " / " + total
}
return `${data}`
]]]
entity: sensor.davidnestico_status
label: Silver
show_name: true
show_label: true
show_icon: true
aspect_ratio: 1/1
icon: mdi:trophy-variant
tap_action:
action: more-info
haptic: medium
styles:
grid:
- grid-template-columns: 2fr 1fr 1fr
- grid-template-rows: 2fr 0.1fr 1fr 1fr
- grid-template-areas: |
"i . ."
". . ."
"n n n"
"l l l"
card:
- background: rgba(189, 195, 199, 0.5)
- border-radius: 30px
- box-shadow: none
name:
- color: var(--primary-text-color)
- font-size: 1.5rem
- font-weight: bold
- justify-self: start
- align-self: end
- margin: 0px 0px 0px 20px
- text-transform: capitalize
label:
- text-transform: capitalize
- font-size: 1rem
- justify-self: start
- align-self: start
- margin: 2px 0px 0px 20px
- color: auto
- opacity: 50%
icon:
- color: rgba(189, 195, 199)
card_mod:
style: |
ha-card:active {
transform: scale(0.975);
transition: 0s;
}
- type: custom:button-card
name: |
[[[
let data = 'Offline'
if (states['sensor.davidnestico_status'].state != 'Offline') {
let earned = states['sensor.davidnestico_status'].attributes.earned_trophies.bronze
let total = states['sensor.davidnestico_status'].attributes.trophies.bronze
data = earned + " / " + total
}
return `${data}`
]]]
entity: sensor.davidnestico_status
label: Bronze
show_name: true
show_label: true
show_icon: true
aspect_ratio: 1/1
icon: mdi:trophy-variant
tap_action:
action: more-info
haptic: medium
styles:
grid:
- grid-template-columns: 2fr 1fr 1fr
- grid-template-rows: 2fr 0.1fr 1fr 1fr
- grid-template-areas: |
"i . ."
". . ."
"n n n"
"l l l"
card:
- background: rgba(212, 149, 55, 0.5)
- border-radius: 30px
- box-shadow: none
name:
- color: var(--primary-text-color)
- font-size: 1.5rem
- font-weight: bold
- justify-self: start
- align-self: end
- margin: 0px 0px 0px 20px
- text-transform: capitalize
label:
- text-transform: capitalize
- font-size: 1rem
- justify-self: start
- align-self: start
- margin: 2px 0px 0px 20px
- color: auto
- opacity: 50%
icon:
- color: rgba(212, 149, 55)
card_mod:
style: |
ha-card:active {
transform: scale(0.975);
transition: 0s;
}
columns: 2
- type: custom:gap-card
height: 1px
- type: markdown
content: >
{{states.sensor.davidnestico_status.attributes.description}}
<b>{{states.sensor.davidnestico_status.attributes.content_rating}}</b>
card_mod:
style: |
ha-card {
background: var(--google-grey) !important;
color: black;
padding: none !important;
# margin: none !important;
}
ha-markdown {
max-height: 100px;
overflow-y: auto;
}
- square: false
type: grid
cards:
- type: custom:button-card
name: Play Time
entity: media_player.davidnestico_ps5_console
label: |-
[[[
return states['sensor.davidnestico_status'].attributes.play_duration || 'Unknown';
]]]
show_name: true
show_label: true
show_icon: true
aspect_ratio: 1/1
icon: mdi:timer-outline
tap_action:
action: more-info
haptic: medium
styles:
grid:
- grid-template-columns: 2fr 1fr 1fr
- grid-template-rows: 2fr 0.1fr 1fr 1fr
- grid-template-areas: |
"i . ."
". . ."
"n n n"
"l l l"
card:
- '--keep-background': 'true'
- background: auto
- border-radius: 30px
- box-shadow: none
name:
- color: var(--primary-text-color)
- font-size: 1rem
- font-weight: bold
- justify-self: start
- align-self: end
- margin: 0px 0px 0px 20px
label:
- text-transform: capitalize
- font-size: 1.2rem
- justify-self: start
- align-self: start
- margin: 2px 0px 0px 20px
- color: grey
icon:
- color: purple
card_mod:
style: |
ha-card:active {
transform: scale(0.975);
transition: 0s;
}
- type: custom:button-card
name: Play Count
entity: media_player.davidnestico_ps5_console
label: |-
[[[
return states['sensor.davidnestico_status'].attributes.play_count || 'Unknown';
]]]
show_name: true
show_label: true
show_icon: true
aspect_ratio: 1/1
icon: mdi:counter
tap_action:
action: more-info
haptic: medium
styles:
grid:
- grid-template-columns: 2fr 1fr 1fr
- grid-template-rows: 2fr 0.1fr 1fr 1fr
- grid-template-areas: |
"i . ."
". . ."
"n n n"
"l l l"
card:
- '--keep-background': 'true'
- background: auto
- border-radius: 30px
- box-shadow: none
name:
- color: var(--primary-text-color)
- font-size: 1rem
- font-weight: bold
- justify-self: start
- align-self: end
- margin: 0px 0px 0px 20px
label:
- text-transform: capitalize
- font-size: 1.2rem
- justify-self: start
- align-self: start
- margin: 2px 0px 0px 20px
- color: grey
icon:
- color: purple
card_mod:
style: |
ha-card:active {
transform: scale(0.975);
transition: 0s;
}
- type: custom:button-card
name: PSN Rating
entity: media_player.davidnestico_ps5_console
label: |-
[[[
return states['sensor.davidnestico_status'].attributes.star_rating + " ★"|| 'Unknown';
]]]
show_name: true
show_label: true
show_icon: true
aspect_ratio: 1/1
icon: mdi:star
tap_action:
action: more-info
haptic: medium
styles:
grid:
- grid-template-columns: 2fr 1fr 1fr
- grid-template-rows: 2fr 0.1fr 1fr 1fr
- grid-template-areas: |
"i . ."
". . ."
"n n n"
"l l l"
card:
- '--keep-background': 'true'
- background: auto
- border-radius: 30px
- box-shadow: none
name:
- color: var(--primary-text-color)
- font-size: 1rem
- font-weight: bold
- justify-self: start
- align-self: end
- margin: 0px 0px 0px 20px
label:
- text-transform: capitalize
- font-size: 1.2rem
- justify-self: start
- align-self: start
- margin: 2px 0px 0px 20px
- color: grey
icon:
- color: purple
card_mod:
style: |
ha-card:active {
transform: scale(0.975);
transition: 0s;
}
columns: 3
- type: vertical-stack
cards:
- type: custom:bubble-card
card_type: separator
name: My Trophies
icon: mdi:trophy
sub_button:
- show_background: true
entity: sensor.davidnestico_trophy_level
show_attribute: true
attribute: next_level_progress
show_name: true
name: Next Level Progress
show_last_changed: false
show_state: false
- type: grid
square: false
cards:
- type: custom:button-card
name: |-
[[[
return states['sensor.davidnestico_trophy_level'].attributes.platinum || 'Unknown';
]]]
entity: sensor.davidnestico_trophy_level
label: Platinum
show_name: true
show_label: true
show_icon: true
aspect_ratio: 1/1
icon: mdi:trophy-variant
tap_action:
action: more-info
haptic: medium
styles:
grid:
- grid-template-columns: 2fr 1fr 1fr
- grid-template-rows: 2fr 0.1fr 1fr 1fr
- grid-template-areas: |
"i . ."
". . ."
"n n n"
"l l l"
card:
- background: rgba(0, 111, 205, 0.5)
- border-radius: 30px
- box-shadow: none
name:
- color: var(--primary-text-color)
- font-size: 1.5rem
- font-weight: bold
- justify-self: start
- align-self: end
- margin: 0px 0px 0px 20px
- text-transform: capitalize
label:
- text-transform: capitalize
- font-size: 1rem
- justify-self: start
- align-self: start
- margin: 2px 0px 0px 20px
- color: auto
- opacity: 50%
icon:
- color: '#E5E4E2'
card_mod:
style: |
ha-card:active {
transform: scale(0.975);
transition: 0s;
}
- type: custom:button-card
name: |-
[[[
return states['sensor.davidnestico_trophy_level'].attributes.gold || 'Unknown';
]]]
entity: sensor.davidnestico_trophy_level
label: Gold
show_name: true
show_label: true
show_icon: true
aspect_ratio: 1/1
icon: mdi:trophy-variant
tap_action:
action: more-info
haptic: medium
styles:
grid:
- grid-template-columns: 2fr 1fr 1fr
- grid-template-rows: 2fr 0.1fr 1fr 1fr
- grid-template-areas: |
"i . ."
". . ."
"n n n"
"l l l"
card:
- background: rgba(255, 215, 0, 0.5)
- border-radius: 30px
- box-shadow: none
name:
- color: var(--primary-text-color)
- font-size: 1.5rem
- font-weight: bold
- justify-self: start
- align-self: end
- margin: 0px 0px 0px 20px
- text-transform: capitalize
label:
- text-transform: capitalize
- font-size: 1rem
- justify-self: start
- align-self: start
- margin: 2px 0px 0px 20px
- color: auto
- opacity: 50%
icon:
- color: rgba(255, 215, 0)
card_mod:
style: |
ha-card:active {
transform: scale(0.975);
transition: 0s;
}
- type: custom:button-card
name: |-
[[[
return states['sensor.davidnestico_trophy_level'].attributes.silver || 'Unknown';
]]]
entity: sensor.davidnestico_trophy_level
label: Silver
show_name: true
show_label: true
show_icon: true
aspect_ratio: 1/1
icon: mdi:trophy-variant
tap_action:
action: more-info
haptic: medium
styles:
grid:
- grid-template-columns: 2fr 1fr 1fr
- grid-template-rows: 2fr 0.1fr 1fr 1fr
- grid-template-areas: |
"i . ."
". . ."
"n n n"
"l l l"
card:
- background: rgba(189, 195, 199, 0.5)
- border-radius: 30px
- box-shadow: none
name:
- color: var(--primary-text-color)
- font-size: 1.5rem
- font-weight: bold
- justify-self: start
- align-self: end
- margin: 0px 0px 0px 20px
- text-transform: capitalize
label:
- text-transform: capitalize
- font-size: 1rem
- justify-self: start
- align-self: start
- margin: 2px 0px 0px 20px
- color: auto
- opacity: 50%
icon:
- color: rgba(189, 195, 199)
card_mod:
style: |
ha-card:active {
transform: scale(0.975);
transition: 0s;
}
- type: custom:button-card
name: |-
[[[
return states['sensor.davidnestico_trophy_level'].attributes.bronze || 'Unknown';
]]]
entity: sensor.davidnestico_trophy_level
label: Bronze
show_name: true
show_label: true
show_icon: true
aspect_ratio: 1/1
icon: mdi:trophy-variant
tap_action:
action: more-info
haptic: medium
styles:
grid:
- grid-template-columns: 2fr 1fr 1fr
- grid-template-rows: 2fr 0.1fr 1fr 1fr
- grid-template-areas: |
"i . ."
". . ."
"n n n"
"l l l"
card:
- background: rgba(212, 149, 55, 0.5)
- border-radius: 30px
- box-shadow: none
name:
- color: var(--primary-text-color)
- font-size: 1.5rem
- font-weight: bold
- justify-self: start
- align-self: end
- margin: 0px 0px 0px 20px
- text-transform: capitalize
label:
- text-transform: capitalize
- font-size: 1rem
- justify-self: start
- align-self: start
- margin: 2px 0px 0px 20px
- color: auto
- opacity: 50%
icon:
- color: rgba(212, 149, 55)
card_mod:
style: |
ha-card:active {
transform: scale(0.975);
transition: 0s;
}
columns: 4
- type: vertical-stack
cards:
- type: custom:bubble-card
card_type: separator
name: Account Status
icon: mdi:trophy
sub_button:
- name: ''
show_name: true
show_state: true
icon: mdi:account-outline
show_background: true
entity: sensor.davidnestico_status
show_attribute: true
attribute: name
- square: false
type: grid
cards:
- type: custom:button-card
entity: sensor.davidnestico_trophy_level
name: Trophy Level
label: >
[[[ return `Level
<b>${states['sensor.davidnestico_trophy_level'].state}</b>`
]]]
show_label: true
show_name: true
show_icon: true
aspect_ratio: 1/1
styles:
card:
- padding: 15px
- border-radius: 30px
- background: >-
linear-gradient(135deg, rgba(0,111,205,0.1) 25%,
rgba(212,149,55,0.1) 70%, rgba(255,215,0,0.1) 80%);
- position: relative
name:
- font-size: 18px
- font-weight: bold
- color: auto
- text-transform: capitalize
- justify-self: start
label:
- font-size: 12px
- color: grey
- justify-self: start
- margin-top: 5px
icon:
- position: absolute
- top: 5px
- left: 5px
- height: 34px
- width: 34px
custom_fields:
circle:
- position: absolute
- top: 10px
- right: 10px
- font-size: 0.85rem
custom_fields:
circle: |
[[[
const progress = states['sensor.davidnestico_trophy_level'].attributes.next_level_progress ? parseInt(states['sensor.davidnestico_trophy_level'].attributes.next_level_progress) : 0;
const radius = 20;
const circumference = 2 * Math.PI * radius;
return `
<svg width="55" height="55" viewBox="0 0 50 50">
<circle cx="25" cy="25" r="${radius}" stroke="gray" stroke-width="4" fill="none"/>
<circle
cx="25"
cy="25"
r="${radius}"
stroke="white"
stroke-width="2"
fill="none"
stroke-dasharray="${circumference}"
stroke-dashoffset="${circumference - (progress / 100 * circumference)}"
style="transition: stroke-dashoffset 0.3s; transform: rotate(-90deg); transform-origin: 50% 50%;"
/>
<text x="50%" y="50%" text-anchor="middle" dy=".3em" fill="white">${progress}%</text>
</svg>
`;
]]]
tap_action:
action: more-info
- type: custom:button-card
name: Status
entity: sensor.davidnestico_status
label: |-
[[[
return states['sensor.davidnestico_status'].state;
]]]
show_name: true
show_label: true
show_icon: true
aspect_ratio: 1/1
icon: mdi:gamepad
tap_action:
action: more-info
haptic: medium
styles:
grid:
- grid-template-columns: 2fr 1fr 1fr
- grid-template-rows: 2fr 0.1fr 1fr 1fr
- grid-template-areas: |
"i . ."
". . ."
"n n n"
"l l l"
card:
- border-radius: 30px
- box-shadow: none
name:
- color: var(--primary-text-color)
- font-size: 1.5rem
- font-weight: bold
- justify-self: start
- align-self: end
- margin: 0px 0px 0px 20px
label:
- text-transform: capitalize
- font-size: 1.2rem
- justify-self: start
- align-self: start
- margin: 2px 0px 0px 20px
- color: grey
icon:
- color: purple
state:
- value: Playing
styles:
card:
- background: var(--google-green)
card_mod:
style: |
ha-card:active {
transform: scale(0.975);
transition: 0s;
}
- type: custom:button-card
name: Game Platform
entity: sensor.davidnestico_status
label: |-
[[[
return states['sensor.davidnestico_status'].attributes.platform || 'Unknown';
]]]
show_name: true
show_label: true
show_icon: true
aspect_ratio: 1/1
icon: mdi:sony-playstation
tap_action:
action: more-info
haptic: medium
styles:
grid:
- grid-template-columns: 2fr 1fr 1fr
- grid-template-rows: 2fr 0.1fr 1fr 1fr
- grid-template-areas: |
"i . ."
". . ."
"n n n"
"l l l"
card:
- background: auto
- border-radius: 30px
- box-shadow: none
- overflow: scroll
name:
- color: var(--primary-text-color)
- font-size: 1.1rem
- font-weight: bold
- justify-self: start
- align-self: end
- margin: 0px 0px 0px 20px
label:
- text-transform: uppercase
- font-size: 1.2rem
- justify-self: start
- align-self: start
- margin: 2px 0px 0px 20px
- color: grey
icon:
- color: purple
state:
- value: Playing
styles:
card:
- background: var(--google-green)
card_mod:
style: |
ha-card:active {
transform: scale(0.975);
transition: 0s;
}
columns: 3
- type: custom:fab-card
icon: mdi:chevron-left
left: true
action:
action: navigate
navigation_path: /lovelace/home
icon: mdi:controller
subview: trueYou mind sharing your config for this dashboard?
Here you go, it's a lot of code lol
- type: custom:bubble-card card_type: separator name: Now Playing icon: mdi:steam sub_button: - name: '' show_name: true show_state: false icon: mdi:gamepad-circle show_attribute: true entity: sensor.steam_76561198194162311 attribute: game - type: custom:steam-card-compact entity: sensor.steam_76561198194162311 game_background: true - type: custom:bubble-card card_type: separator name: Now Playing icon: mdi:sony-playstation sub_button: - name: '' show_name: true show_state: true icon: mdi:gamepad-circle show_background: true entity: sensor.davidnestico_status show_attribute: true attribute: name - type: custom:stack-in-card keep: background: true box_shadow: true margin: true outer_padding: true border_radius: true cards: - type: vertical-stack cards: - square: false type: grid cards: - type: custom:mini-media-player entity: media_player.davidnestico_ps5_console toggle_power: false artwork: full-cover-fit info: scroll volume_stateless: false name: Now Playing hide: volume: true controls: true power: true - type: grid square: false columns: 2 cards: - type: custom:button-card name: | [[[ let data = 'Offline' if (states['sensor.davidnestico_status'].state != 'Offline') { let earned = states['sensor.davidnestico_status'].attributes.earned_trophies.platinum let total = states['sensor.davidnestico_status'].attributes.trophies.platinum data = earned + " / " + total } return `${data}` ]]] entity: sensor.davidnestico_status label: Platinum show_name: true show_label: true show_icon: true aspect_ratio: 1/1 icon: mdi:trophy-variant tap_action: action: more-info haptic: medium styles: grid: - grid-template-columns: 2fr 1fr 1fr - grid-template-rows: 2fr 0.1fr 1fr 1fr - grid-template-areas: | "i . ." ". . ." "n n n" "l l l" card: - background: rgba(0, 111, 205, 0.5) - border-radius: 30px - box-shadow: none name: - color: var(--primary-text-color) - font-size: 1.5rem - font-weight: bold - justify-self: start - align-self: end - margin: 0px 0px 0px 20px - text-transform: capitalize label: - text-transform: capitalize - font-size: 1rem - justify-self: start - align-self: start - margin: 2px 0px 0px 20px - color: auto - opacity: 50% icon: - color: '#E5E4E2' card_mod: style: | ha-card:active { transform: scale(0.975); transition: 0s; } - type: custom:button-card name: | [[[ let data = 'Offline' if (states['sensor.davidnestico_status'].state != 'Offline') { let earned = states['sensor.davidnestico_status'].attributes.earned_trophies.gold let total = states['sensor.davidnestico_status'].attributes.trophies.gold data = earned + " / " + total } return `${data}` ]]] entity: sensor.davidnestico_status label: Gold show_name: true show_label: true show_icon: true aspect_ratio: 1/1 icon: mdi:trophy-variant tap_action: action: more-info haptic: medium styles: grid: - grid-template-columns: 2fr 1fr 1fr - grid-template-rows: 2fr 0.1fr 1fr 1fr - grid-template-areas: | "i . ." ". . ." "n n n" "l l l" card: - background: rgba(255, 215, 0, 0.5) - border-radius: 30px - box-shadow: none name: - color: var(--primary-text-color) - font-size: 1.5rem - font-weight: bold - justify-self: start - align-self: end - margin: 0px 0px 0px 20px - text-transform: capitalize label: - text-transform: capitalize - font-size: 1rem - justify-self: start - align-self: start - margin: 2px 0px 0px 20px - color: auto - opacity: 50% icon: - color: rgba(255, 215, 0) card_mod: style: | ha-card:active { transform: scale(0.975); transition: 0s; } - type: custom:button-card name: | [[[ let data = 'Offline' if (states['sensor.davidnestico_status'].state != 'Offline') { let earned = states['sensor.davidnestico_status'].attributes.earned_trophies.silver let total = states['sensor.davidnestico_status'].attributes.trophies.silver data = earned + " / " + total } return `${data}` ]]] entity: sensor.davidnestico_status label: Silver show_name: true show_label: true show_icon: true aspect_ratio: 1/1 icon: mdi:trophy-variant tap_action: action: more-info haptic: medium styles: grid: - grid-template-columns: 2fr 1fr 1fr - grid-template-rows: 2fr 0.1fr 1fr 1fr - grid-template-areas: | "i . ." ". . ." "n n n" "l l l" card: - background: rgba(189, 195, 199, 0.5) - border-radius: 30px - box-shadow: none name: - color: var(--primary-text-color) - font-size: 1.5rem - font-weight: bold - justify-self: start - align-self: end - margin: 0px 0px 0px 20px - text-transform: capitalize label: - text-transform: capitalize - font-size: 1rem - justify-self: start - align-self: start - margin: 2px 0px 0px 20px - color: auto - opacity: 50% icon: - color: rgba(189, 195, 199) card_mod: style: | ha-card:active { transform: scale(0.975); transition: 0s; } - type: custom:button-card name: | [[[ let data = 'Offline' if (states['sensor.davidnestico_status'].state != 'Offline') { let earned = states['sensor.davidnestico_status'].attributes.earned_trophies.bronze let total = states['sensor.davidnestico_status'].attributes.trophies.bronze data = earned + " / " + total } return `${data}` ]]] entity: sensor.davidnestico_status label: Bronze show_name: true show_label: true show_icon: true aspect_ratio: 1/1 icon: mdi:trophy-variant tap_action: action: more-info haptic: medium styles: grid: - grid-template-columns: 2fr 1fr 1fr - grid-template-rows: 2fr 0.1fr 1fr 1fr - grid-template-areas: | "i . ." ". . ." "n n n" "l l l" card: - background: rgba(212, 149, 55, 0.5) - border-radius: 30px - box-shadow: none name: - color: var(--primary-text-color) - font-size: 1.5rem - font-weight: bold - justify-self: start - align-self: end - margin: 0px 0px 0px 20px - text-transform: capitalize label: - text-transform: capitalize - font-size: 1rem - justify-self: start - align-self: start - margin: 2px 0px 0px 20px - color: auto - opacity: 50% icon: - color: rgba(212, 149, 55) card_mod: style: | ha-card:active { transform: scale(0.975); transition: 0s; } columns: 2 - type: custom:gap-card height: 1px - type: markdown content: > {{states.sensor.davidnestico_status.attributes.description}} <b>{{states.sensor.davidnestico_status.attributes.content_rating}}</b> card_mod: style: | ha-card { background: var(--google-grey) !important; color: black; padding: none !important; # margin: none !important; } ha-markdown { max-height: 100px; overflow-y: auto; } - square: false type: grid cards: - type: custom:button-card name: Play Time entity: media_player.davidnestico_ps5_console label: |- [[[ return states['sensor.davidnestico_status'].attributes.play_duration || 'Unknown'; ]]] show_name: true show_label: true show_icon: true aspect_ratio: 1/1 icon: mdi:timer-outline tap_action: action: more-info haptic: medium styles: grid: - grid-template-columns: 2fr 1fr 1fr - grid-template-rows: 2fr 0.1fr 1fr 1fr - grid-template-areas: | "i . ." ". . ." "n n n" "l l l" card: - '--keep-background': 'true' - background: auto - border-radius: 30px - box-shadow: none name: - color: var(--primary-text-color) - font-size: 1rem - font-weight: bold - justify-self: start - align-self: end - margin: 0px 0px 0px 20px label: - text-transform: capitalize - font-size: 1.2rem - justify-self: start - align-self: start - margin: 2px 0px 0px 20px - color: grey icon: - color: purple card_mod: style: | ha-card:active { transform: scale(0.975); transition: 0s; } - type: custom:button-card name: Play Count entity: media_player.davidnestico_ps5_console label: |- [[[ return states['sensor.davidnestico_status'].attributes.play_count || 'Unknown'; ]]] show_name: true show_label: true show_icon: true aspect_ratio: 1/1 icon: mdi:counter tap_action: action: more-info haptic: medium styles: grid: - grid-template-columns: 2fr 1fr 1fr - grid-template-rows: 2fr 0.1fr 1fr 1fr - grid-template-areas: | "i . ." ". . ." "n n n" "l l l" card: - '--keep-background': 'true' - background: auto - border-radius: 30px - box-shadow: none name: - color: var(--primary-text-color) - font-size: 1rem - font-weight: bold - justify-self: start - align-self: end - margin: 0px 0px 0px 20px label: - text-transform: capitalize - font-size: 1.2rem - justify-self: start - align-self: start - margin: 2px 0px 0px 20px - color: grey icon: - color: purple card_mod: style: | ha-card:active { transform: scale(0.975); transition: 0s; } - type: custom:button-card name: PSN Rating entity: media_player.davidnestico_ps5_console label: |- [[[ return states['sensor.davidnestico_status'].attributes.star_rating + " ★"|| 'Unknown'; ]]] show_name: true show_label: true show_icon: true aspect_ratio: 1/1 icon: mdi:star tap_action: action: more-info haptic: medium styles: grid: - grid-template-columns: 2fr 1fr 1fr - grid-template-rows: 2fr 0.1fr 1fr 1fr - grid-template-areas: | "i . ." ". . ." "n n n" "l l l" card: - '--keep-background': 'true' - background: auto - border-radius: 30px - box-shadow: none name: - color: var(--primary-text-color) - font-size: 1rem - font-weight: bold - justify-self: start - align-self: end - margin: 0px 0px 0px 20px label: - text-transform: capitalize - font-size: 1.2rem - justify-self: start - align-self: start - margin: 2px 0px 0px 20px - color: grey icon: - color: purple card_mod: style: | ha-card:active { transform: scale(0.975); transition: 0s; } columns: 3 - type: vertical-stack cards: - type: custom:bubble-card card_type: separator name: My Trophies icon: mdi:trophy sub_button: - show_background: true entity: sensor.davidnestico_trophy_level show_attribute: true attribute: next_level_progress show_name: true name: Next Level Progress show_last_changed: false show_state: false - type: grid square: false cards: - type: custom:button-card name: |- [[[ return states['sensor.davidnestico_trophy_level'].attributes.platinum || 'Unknown'; ]]] entity: sensor.davidnestico_trophy_level label: Platinum show_name: true show_label: true show_icon: true aspect_ratio: 1/1 icon: mdi:trophy-variant tap_action: action: more-info haptic: medium styles: grid: - grid-template-columns: 2fr 1fr 1fr - grid-template-rows: 2fr 0.1fr 1fr 1fr - grid-template-areas: | "i . ." ". . ." "n n n" "l l l" card: - background: rgba(0, 111, 205, 0.5) - border-radius: 30px - box-shadow: none name: - color: var(--primary-text-color) - font-size: 1.5rem - font-weight: bold - justify-self: start - align-self: end - margin: 0px 0px 0px 20px - text-transform: capitalize label: - text-transform: capitalize - font-size: 1rem - justify-self: start - align-self: start - margin: 2px 0px 0px 20px - color: auto - opacity: 50% icon: - color: '#E5E4E2' card_mod: style: | ha-card:active { transform: scale(0.975); transition: 0s; } - type: custom:button-card name: |- [[[ return states['sensor.davidnestico_trophy_level'].attributes.gold || 'Unknown'; ]]] entity: sensor.davidnestico_trophy_level label: Gold show_name: true show_label: true show_icon: true aspect_ratio: 1/1 icon: mdi:trophy-variant tap_action: action: more-info haptic: medium styles: grid: - grid-template-columns: 2fr 1fr 1fr - grid-template-rows: 2fr 0.1fr 1fr 1fr - grid-template-areas: | "i . ." ". . ." "n n n" "l l l" card: - background: rgba(255, 215, 0, 0.5) - border-radius: 30px - box-shadow: none name: - color: var(--primary-text-color) - font-size: 1.5rem - font-weight: bold - justify-self: start - align-self: end - margin: 0px 0px 0px 20px - text-transform: capitalize label: - text-transform: capitalize - font-size: 1rem - justify-self: start - align-self: start - margin: 2px 0px 0px 20px - color: auto - opacity: 50% icon: - color: rgba(255, 215, 0) card_mod: style: | ha-card:active { transform: scale(0.975); transition: 0s; } - type: custom:button-card name: |- [[[ return states['sensor.davidnestico_trophy_level'].attributes.silver || 'Unknown'; ]]] entity: sensor.davidnestico_trophy_level label: Silver show_name: true show_label: true show_icon: true aspect_ratio: 1/1 icon: mdi:trophy-variant tap_action: action: more-info haptic: medium styles: grid: - grid-template-columns: 2fr 1fr 1fr - grid-template-rows: 2fr 0.1fr 1fr 1fr - grid-template-areas: | "i . ." ". . ." "n n n" "l l l" card: - background: rgba(189, 195, 199, 0.5) - border-radius: 30px - box-shadow: none name: - color: var(--primary-text-color) - font-size: 1.5rem - font-weight: bold - justify-self: start - align-self: end - margin: 0px 0px 0px 20px - text-transform: capitalize label: - text-transform: capitalize - font-size: 1rem - justify-self: start - align-self: start - margin: 2px 0px 0px 20px - color: auto - opacity: 50% icon: - color: rgba(189, 195, 199) card_mod: style: | ha-card:active { transform: scale(0.975); transition: 0s; } - type: custom:button-card name: |- [[[ return states['sensor.davidnestico_trophy_level'].attributes.bronze || 'Unknown'; ]]] entity: sensor.davidnestico_trophy_level label: Bronze show_name: true show_label: true show_icon: true aspect_ratio: 1/1 icon: mdi:trophy-variant tap_action: action: more-info haptic: medium styles: grid: - grid-template-columns: 2fr 1fr 1fr - grid-template-rows: 2fr 0.1fr 1fr 1fr - grid-template-areas: | "i . ." ". . ." "n n n" "l l l" card: - background: rgba(212, 149, 55, 0.5) - border-radius: 30px - box-shadow: none name: - color: var(--primary-text-color) - font-size: 1.5rem - font-weight: bold - justify-self: start - align-self: end - margin: 0px 0px 0px 20px - text-transform: capitalize label: - text-transform: capitalize - font-size: 1rem - justify-self: start - align-self: start - margin: 2px 0px 0px 20px - color: auto - opacity: 50% icon: - color: rgba(212, 149, 55) card_mod: style: | ha-card:active { transform: scale(0.975); transition: 0s; } columns: 4 - type: vertical-stack cards: - type: custom:bubble-card card_type: separator name: Account Status icon: mdi:trophy sub_button: - name: '' show_name: true show_state: true icon: mdi:account-outline show_background: true entity: sensor.davidnestico_status show_attribute: true attribute: name - square: false type: grid cards: - type: custom:button-card entity: sensor.davidnestico_trophy_level name: Trophy Level label: > [[[ return `Level <b>${states['sensor.davidnestico_trophy_level'].state}</b>` ]]] show_label: true show_name: true show_icon: true aspect_ratio: 1/1 styles: card: - padding: 15px - border-radius: 30px - background: >- linear-gradient(135deg, rgba(0,111,205,0.1) 25%, rgba(212,149,55,0.1) 70%, rgba(255,215,0,0.1) 80%); - position: relative name: - font-size: 18px - font-weight: bold - color: auto - text-transform: capitalize - justify-self: start label: - font-size: 12px - color: grey - justify-self: start - margin-top: 5px icon: - position: absolute - top: 5px - left: 5px - height: 34px - width: 34px custom_fields: circle: - position: absolute - top: 10px - right: 10px - font-size: 0.85rem custom_fields: circle: | [[[ const progress = states['sensor.davidnestico_trophy_level'].attributes.next_level_progress ? parseInt(states['sensor.davidnestico_trophy_level'].attributes.next_level_progress) : 0; const radius = 20; const circumference = 2 * Math.PI * radius; return ` <svg width="55" height="55" viewBox="0 0 50 50"> <circle cx="25" cy="25" r="${radius}" stroke="gray" stroke-width="4" fill="none"/> <circle cx="25" cy="25" r="${radius}" stroke="white" stroke-width="2" fill="none" stroke-dasharray="${circumference}" stroke-dashoffset="${circumference - (progress / 100 * circumference)}" style="transition: stroke-dashoffset 0.3s; transform: rotate(-90deg); transform-origin: 50% 50%;" /> <text x="50%" y="50%" text-anchor="middle" dy=".3em" fill="white">${progress}%</text> </svg> `; ]]] tap_action: action: more-info - type: custom:button-card name: Status entity: sensor.davidnestico_status label: |- [[[ return states['sensor.davidnestico_status'].state; ]]] show_name: true show_label: true show_icon: true aspect_ratio: 1/1 icon: mdi:gamepad tap_action: action: more-info haptic: medium styles: grid: - grid-template-columns: 2fr 1fr 1fr - grid-template-rows: 2fr 0.1fr 1fr 1fr - grid-template-areas: | "i . ." ". . ." "n n n" "l l l" card: - border-radius: 30px - box-shadow: none name: - color: var(--primary-text-color) - font-size: 1.5rem - font-weight: bold - justify-self: start - align-self: end - margin: 0px 0px 0px 20px label: - text-transform: capitalize - font-size: 1.2rem - justify-self: start - align-self: start - margin: 2px 0px 0px 20px - color: grey icon: - color: purple state: - value: Playing styles: card: - background: var(--google-green) card_mod: style: | ha-card:active { transform: scale(0.975); transition: 0s; } - type: custom:button-card name: Game Platform entity: sensor.davidnestico_status label: |- [[[ return states['sensor.davidnestico_status'].attributes.platform || 'Unknown'; ]]] show_name: true show_label: true show_icon: true aspect_ratio: 1/1 icon: mdi:sony-playstation tap_action: action: more-info haptic: medium styles: grid: - grid-template-columns: 2fr 1fr 1fr - grid-template-rows: 2fr 0.1fr 1fr 1fr - grid-template-areas: | "i . ." ". . ." "n n n" "l l l" card: - background: auto - border-radius: 30px - box-shadow: none - overflow: scroll name: - color: var(--primary-text-color) - font-size: 1.1rem - font-weight: bold - justify-self: start - align-self: end - margin: 0px 0px 0px 20px label: - text-transform: uppercase - font-size: 1.2rem - justify-self: start - align-self: start - margin: 2px 0px 0px 20px - color: grey icon: - color: purple state: - value: Playing styles: card: - background: var(--google-green) card_mod: style: | ha-card:active { transform: scale(0.975); transition: 0s; } columns: 3 - type: custom:fab-card icon: mdi:chevron-left left: true action: action: navigate navigation_path: /lovelace/home icon: mdi:controller
Could you maybe upload your complete dashboard yaml on https://pastebin.com/? With title, path cards
title: dadada
path: dadada
cards:Here you go
RetroButton
commented
1 month ago I need some help getting these custom cards running. Tried copying the yaml code from here to a custom card, but it does noting. https://github.com/JackJPowell/hass-psn/issues/10#issuecomment-2237130117
dsellers1
commented
1 month ago I need some help getting these custom cards running. Tried copying the yaml code from here to a custom card, but it does noting.
Remove the dash "-" from line 1. (I would highlight it and press space to keep the spacing.) Highlight everything and then press Shift+Tab two times to reduce the indentation. You're configuring the card whereas the Dev provided raw YAML.
RetroButton
commented
1 month ago Impossible for me to get this thing running... Giving up.
dnestico
commented
1 month ago All you have to do is just remove the "-" since it's raw code, and then replace the sensors with your own, it's pretty simple.
RetroButton
commented
1 month ago Okay. Now i´m at this point:
type: custom:button-card
entity: sensor.psn_status
name: >
[[[
let data = '? / ?'
if (states['sensor.psn_status'].state != 'Offline') {
let earned = states['sensor.psn_status'].attributes.earned_trophies.platinum
let total = states['sensor.psn_status'].attributes.trophies.platinum
data = earned + " / " + total
}
return ${data}
]]]
state_display: Trophies
template:
base
icon_platinum
variables:
state_on: >
[[[
states['sensor.psn_status'].state == 'Playing'
]]]
card_mod:
style:
.: |
font-size: 2.2em !important;
}... and it gives me an error that says: "Button-card template 'base icon_platinum' is missing!" I don´t get this yaml-thing ever....
dnestico
commented
1 month ago If I remember correctly that's just to show the platinum icon, you should be able to find the template in this GitHub repo somewhere, if not just remove that template and put your own icon.
As for the base template you'll have to find that I think in the files of this repo, I can't go on my computer to send it rn.
dsellers1
commented
1 month ago Okay. Now i´m at this point:
... and it gives me an error that says: "Button-card template 'base icon_platinum' is missing!" I don´t get this yaml-thing ever....
Sorry. I didn't realize that card relied on templates. However, if you look at the RAW code posted above (https://pastebin.com/V1jgASjP), go to Line 488. That looks like the same card that you're trying to get working but does not use the templates; the styling is included within the card.
Hey, would you mind sharing your yaml file of your gaming dashboard?