style is part of card-mod, it doesn’t support javascript templates but I believe you can use jinja2 templates with card-mod.
I thought so, but I was told otherwise… Card-Mod Post
I’ve tried the jinja2 templates also without success
top: >
{% if is_state('input_select.tablet_page','Lighting') %}
215px
{% else %}
500px
{% endif %}
I see, this is for a picture element I guess.
The format is not correct, it should be something like:
card_mod:
style: |
:host {
top: jinja here;
left: jinja here;
}
Can I see a context?
Are you using a custom:button-card inside some Picture elements card?
If so, the conditional positioning should be done like it is described here:
- type: 'custom:button-card'
card_mod:
style:
{% if is_state(..., 'Lighting') %}
--my-top: 215px;
--my-left: 270px;
{% elif is_state(..., 'Home') %}
--my-top: 175px;
--my-left: 175px;
{% else %}
--my-top: 500px;
--my-left: 500px;
{% endif %}
entity: input_select.page
style:
left: var(--my-left)
top: var(--my-top)
Not tested by myself, try using this.
HI,
trying to add a generic graph to my buttons, I am stuck somehow templating the entity of the button into the graph:
- type: custom:button-card
template: button_body
entity: sensor.cpu_temperature
name: Cpu temp
custom_fields:
plot:
card:
type: custom:mini-graph-card
entities:
- sensor.cpu_temperature
is the correct functionality, and makes it all happen. Of course, I need to set the entity of the mini-graph-card in the template and tried various options…
- type: custom:button-card
template: button_body
entity: sensor.cpu_temperature
name: Cpu temp
custom_fields:
plot:
card:
type: custom:mini-graph-card
entities:
- '[[[ return states[entity]; ]]]'
or - '[[[ return entity; ]]]' and
- >
[[[ return entity; ]]]
no luck just yet. could you please have a look how I could accomplish this? I’d like to set this whole config bit as an anchor for the buttons below, or maybe even as a button-card template.
to give you the idea, this is what I copied and edited from Petro’s repo…
- type: custom:button-card
template: button_body
entity: sensor.cpu_temperature
name: Cpu temp
custom_fields:
plot:
card:
type: custom:mini-graph-card
entities:
- '[[[ return states[entity]; ]]]'
group: true
points_per_hour: 1
hour24: true
line_color: var(--primary-color)
line_width: 10
hours_to_show: 24
update_interval: 600
show:
name: false
icon: false
state: false
points: false
legend: false
average: false
extrema: false
labels: false
fill: false
labels_secondary: false
name_adaptive_color: false
icon_adaptive_color: false
styles:
custom_fields:
plot:
- position: absolute
- top: 55%
- left: 50%
- width: calc(100% + 25px)
- transform: translate(-50%, calc(-50% + 10px))
- z-index: 3
- --paper-card-background-color: 'rgba(0, 0, 0, 0.0)'
- --ha-card-background: rgba(0, 0, 0, 0.0)"
- --ha-card-box-shadow: 'none'
- pointer-events: none
showing like:
thanks for having a look
You have to use lovelace gen, config-template-card, or something else that lets you template cards that don’t have templating.
no, this does the trick, I just found it in another of my templates. Button-card is so horribly versatile, we can template almost anything!
duh, so silly, I keep forgetting this entity.entity_id:
custom_fields:
plot:
card:
type: custom:mini-graph-card
entities:
- >
[[[ return entity.entity_id; ]]]
button card template:
plot:
custom_fields:
plot:
card:
type: custom:mini-graph-card
entities:
- >
[[[ return entity.entity_id; ]]]
group: true
points_per_hour: 1
hour24: true
line_color: var(--primary-color)
line_width: 10
hours_to_show: 24
update_interval: 600
show:
name: false
icon: false
state: false
points: false
legend: false
average: false
extrema: false
labels: false
fill: false
labels_secondary: false
name_adaptive_color: false
icon_adaptive_color: false
styles:
custom_fields:
plot:
- position: absolute
- top: 55%
- left: 50%
- width: calc(100% + 25px)
- transform: translate(-50%, calc(-50% + 10px))
- z-index: 3
- --paper-card-background-color: 'rgba(0, 0, 0, 0.0)'
- --ha-card-background: rgba(0, 0, 0, 0.0)"
- --ha-card-box-shadow: 'none'
- pointer-events: none
button card config:
- type: custom:button-card
template:
- button_body
- plot
entity: sensor.cpu_temperature
name: Cpu temp
preview:
(noticed I have recorder disabled on a few of them 
)
thanks Petro, nice embellishment of the frontend today!
2 Likes
hey @RomRider, trying to develop the above plot: template, I was wondering if I can use a variable for the list of entities in the mini-graph-card. Have a few cards that could benefit from 2 or 3 entities there, and if I could add a variable containing the list that would be awesome.
variables:
plot_entities: >
[[[ return [entity.entity_id, second_entity_id]; ]]]
in the card, and then use:
plot:
custom_fields:
plot:
card:
type: custom:mini-graph-card
entities:
>
[[[ return variables.plot_entities; ]]]
in the template. Could something like that be possible?
this seems to at least shows the main second entity:
variables:
plot_entities: >
[[[ return entity.entity_id, states['sensor.attic_sensor_calibrated_temperature'].entity_id; ]]]
but wont reveal the second first, main entity_id, no errors in inspector
haha, wait, bingo!
had a ‘double’ list mistake going…
button:
- type: custom:button-card
template:
- button_body
- plot_list
entity: sensor.cpu_temperature
variables:
plot_entities: >
[[[ return [entity.entity_id, states['sensor.attic_sensor_calibrated_temperature'].entity_id]; ]]]
name: Cpu temp
and template(s) (made 2 of them, 1 for a list, 1 for only the main entity):
plot:
template: plot_config
custom_fields:
plot:
card:
type: custom:mini-graph-card
entities:
- >
[[[ return entity.entity_id; ]]]
plot_list:
template: plot_config
custom_fields:
plot:
card:
type: custom:mini-graph-card
entities: >
[[[ return variables.plot_entities; ]]]
plot_config:
custom_fields:
plot:
card:
group: true
points_per_hour: 1
hour24: true
line_color: var(--primary-color)
line_width: 10
hours_to_show: 24
update_interval: 600
show:
name: false
icon: false
state: false
points: false
legend: false
average: false
extrema: false
labels: false
fill: false
labels_secondary: false
name_adaptive_color: false
icon_adaptive_color: false
styles:
custom_fields:
plot:
- position: absolute
- top: 55%
- left: 50%
- width: calc(100% + 25px)
- transform: translate(-50%, calc(-50% + 10px))
- z-index: 3
- --paper-card-background-color: 'rgba(0, 0, 0, 0.0)'
- --ha-card-background: rgba(0, 0, 0, 0.0)"
- --ha-card-box-shadow: 'none'
- pointer-events: none
1 Like
Hello everyone
Greetings from Switzerland.
I have been pulling my hair in making the attached card using the example in the Card Documentation on Github.
I have been able to bring the card to a certain level.
Can someone please help me on how to change the headings CPU, RAM, and SD to say DEVICE, CURRENT, and CONSUMPTION?
The data shown in the attached demo is correct only headings are wrong.
Regards
ST
1 Like
I use this card with some code I saw in another project, adapted to my own entities. Unfortunatly, when the screen is smaller, the buttons go on top of each other like in the picture. The cards are within a grid card.
How can I solve this?
type: custom:button-card
entity: light.candeeiro_da_sala
name: Candeeiro
icon: mdi:floor-lamp
label_template: >
var bri = Math.round(states['light.candeeiro_da_sala'].attributes.brightness /
2.55); return (bri ? bri : '0') + '%';
color: auto
size: 30%
show_state: true
show_label: true
styles:
card:
- border-radius: 15px
- height: 130px
- width: 130px
- '--paper-card-background-color': rgb(255, 251, 239)
icon:
- padding: 0px 60px 0px 0px
name:
- padding: 0px 10px
- font-size: 13px
- font-family: Helvetica
- justify-self: start
- font-weight: bold
label:
- color: gray
- font-size: 11px
- font-family: Helvetica
- padding: 0px 10px
- justify-self: start
state:
- font-size: 11px
- font-family: Helvetica
- padding: 0px 10px
- justify-self: start
- text-transform: capitalize
- font-weight: bold
state:
- value: heat
styles:
name:
- color: white
state:
- color: gray
- value: cool
styles:
name:
- color: white
state:
- color: gray
- value: 'off'
style:
- opacity: 0.4
styles:
icon:
- color: '#666666'
name:
- color: '#666666'
state:
- color: '#666666'
- value: unavailable
style:
- opacity: 0.2
styles:
icon:
- color: '#666666'
name:
- color: '#666666'
state:
- color: '#666666'
this is as simple as replacing the strings you mention (which are in the custom_fields) with the strings of your choice.
each of those will have something like:
cpu: >
[[[ return `<ha-icon icon=mdi:server style='width:12px;height:12px;'> </ha-icon>
Cpu: <span style='color: var(--text-color-sensor);'>
${states['sensor.processor_use'].state}%</span>`; ]]]
you replace the Cpu: in the template with ‘Device’. thats it really.
Of course, for your own sake, I would suggest you also change the name of the custom_field itself accordingly, both in the styles section and in the custom_fields section, like:
styles:
custom_fields:
device:
- padding-bottom: 2px
- justify-self: start
- --text-color-sensor: >
[[[ var state = states['sensor.processor_use'].state;
if (state < 10) return 'green';
if (state < 25) return 'darkgreen';
if (state < 45) return 'orange';
if (state < 60) return 'maroon';
return 'red'; ]]]
custom_fields:
device: >
[[[ return `<ha-icon icon=mdi:server style='width:12px;height:12px;'> </ha-icon>
Device: <span style='color: var(--text-color-sensor);'>
${states['sensor.processor_use'].state}%</span>`; ]]]
note I only changed cpu into device, and didnt touch any non the other entities you need to change too…
I’m struggling with grids.
I’d like to replicate the behaviour of “dwain’s dashboard”:
Anyone here managed this ?
My issue: how can I get the room’s icon to be that big, and with status icons on the right ? (it could be underneath also…)
thanks a lot!
Asking for help 
I want to create a template for a button that is square, rounded corners, background color changes with theming (or just set) and this button/card is to show the temperature value of a sensor. And for the love of me, I cant find any simple resource to learn this. I have the custom card button addon via HACS installed and ready to be utilized.
This is what I’m working with in regards to my lights;
button_card_templates:
light:
aspect_ratio: 1/1
color: auto-no-temperature
color_type: card
tap_action:
action: toggle
hold_action:
action: more-info
show_icon: true
show_name: true
custom_fields:
info: |
[[[ if (entity.state == 'on' && entity.attributes.brightness) {
const brightness = Math.round(entity.attributes.brightness/2.54);
const radius = 20.5; const circumference = radius * 2 * Math.PI;
return `<svg viewBox="0 0 50 50"><circle cx="25" cy="25" r="${radius}"
stroke="var(--active-color)" stroke-width="2" fill="none"
style="transform: rotate(-90deg); transform-origin: 50% 50%;
stroke-dasharray: ${circumference};
stroke-dashoffset: ${circumference - brightness / 100 * circumference};" />
<text x="50%" y="54%" fill="white" font-size="16"
text-anchor="middle" alignment-baseline="middle">
${brightness}<tspan font-size="10">%</tspan></text></svg>`;} ]]]
styles:
custom_fields:
info:
- position: absolute
- right: 6%
- top: 6%
- width: 30%
card:
- font-size: 90%
- border-radius: 1ems
state:
- value: 'off'
styles:
icon:
- color: grey
- value: 'on'
styles:
icon:
- color: white
I would like to match this, but for temperature, but Im not sure how to to this
Could some kind internet-person please assist me in “creating” this card, it would be greatly appriciated
Best regards from Sweden
Hello Folks. I am still struggling with the transition to fire-dom-event. This popup works as a standard button card, but not as a custom button card. With the custom button card, the popup just, doesn’t popup. I’ll be supremely grateful if some kind and wise soul could please help me out!
Not working:
type: custom:button-card
icon: mdi:microsoft-xbox
name: Xbox Remote
layout: icon_name
tap_action:
action: fire-dom-event
browser_mod:
command: popup
title: Xbox Remote
card:
type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
color_type: blank-card
- type: custom:button-card
color_type: blank-card
- type: custom:button-card
color_type: card
color: rgb(223, 255, 97)
icon: mdi:volume-plus
tap_action:
action: call-service
service: media_player.volume_up
service_data:
entity_id: media_player.xbox
- type: custom:button-card
color_type: card
color: rgb(223, 255, 97)
icon: mdi:volume-minus
tap_action:
action: call-service
service: media_player.volume_down
service_data:
entity_id: media_player.xbox
- type: custom:button-card
color_type: blank-card
- type: custom:button-card
color_type: blank-card
- type: picture-elements
image: >-
data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMjEwIiBoZWlnaHQ9IjkwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6Y2M9Imh0dHA6Ly9jcmVhdGl2ZWNvbW1vbnMub3JnL25zIyIgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPgogPG1ldGFkYXRhPgogIDxyZGY6UkRGPgogICA8Y2M6V29yayByZGY6YWJvdXQ9IiI+CiAgICA8ZGM6Zm9ybWF0PmltYWdlL3N2Zyt4bWw8L2RjOmZvcm1hdD4KICAgIDxkYzp0eXBlIHJkZjpyZXNvdXJjZT0iaHR0cDovL3B1cmwub3JnL2RjL2RjbWl0eXBlL1N0aWxsSW1hZ2UiLz4KICAgIDxkYzp0aXRsZS8+CiAgIDwvY2M6V29yaz4KICA8L3JkZjpSREY+CiA8L21ldGFkYXRhPgogPGc+CiAgPHRpdGxlPmJhY2tncm91bmQ8L3RpdGxlPgogIDxyZWN0IGlkPSJjYW52YXNfYmFja2dyb3VuZCIgeD0iLTEiIHk9Ii0xIiB3aWR0aD0iODAyIiBoZWlnaHQ9IjYwMiIgZmlsbD0ibm9uZSIvPgogPC9nPgogPGNpcmNsZSBjeD0iOTkuMTgiIGN5PSIyMCIgcj0iMTQiIGZpbGw9IiNmZmYiLz4KIDxjaXJjbGUgY3g9IjE0OC4xOCIgY3k9IjU0IiByPSIxMC41IiBmaWxsPSIjMzMzIiBzdHJva2U9IiNmZmYiLz4KIDxwYXRoIGQ9Im0xNTMuMTYgNTkuMzVjLTAuMTEgMC4yMDYtMC4zNCAwLjMyNS0wLjYyNyAwLjMyNWgtMS4zNjhjLTAuNDU1IDAtMC45ODQtMC4yODktMS4yMy0wLjY3MmwtMS43MDEtMi42NTdjLTAuMDMtMC4wNDUtMC4wNTUtMC4wNjItMC4wNjItMC4wNjQgNGUtMyAyZS0zIC0wLjAyMSAwLjAxOC0wLjA1MSAwLjA2NWwtMS43MDkgMi42NTdjLTAuMjQ3IDAuMzgzLTAuNzc2IDAuNjcxLTEuMjMgMC42NzFoLTEuMzUzYy0wLjI4OCAwLTAuNTE2LTAuMTE4LTAuNjI4LTAuMzI0LTAuMTExLTAuMjA2LTAuMDg1LTAuNDYzIDAuMDczLTAuNzAzbDIuOTc2LTQuNTQ1YTAuNzA0IDAuNzA0IDAgMCAwIDJlLTMgLTAuNjc2bC0yLjY0LTQuMDc0Yy0wLjE1NS0wLjI0MS0wLjE4LTAuNDk4LTAuMDY5LTAuNzA0IDAuMTEzLTAuMjA2IDAuMzQyLTAuMzI0IDAuNjMtMC4zMjRoMS4yODZjMC40NTcgMCAwLjk4NCAwLjI5MiAxLjIyNSAwLjY4bDEuNDkgMi4zODVhMC4yMyAwLjIzIDAgMCAwIDAuMDQ4IDAuMDU3YzNlLTMgLThlLTMgMC4wMi0wLjAyNCAwLjA0LTAuMDU3bDEuNDU1LTIuMzhjMC4yMzktMC4zOSAwLjc2NC0wLjY4NSAxLjIyMi0wLjY4NWgxLjI2N2MwLjI4NyAwIDAuNTE2IDAuMTE4IDAuNjI4IDAuMzI0IDAuMTEzIDAuMjA2IDAuMDg5IDAuNDYyLTAuMDY3IDAuNzA0bC0yLjY1OCA0LjE1YTAuNjk5IDAuNjk5IDAgMCAwIDVlLTMgMC42NzVsMi45NyA0LjQ3YzAuMTU5IDAuMjQgMC4xODcgMC40OTYgMC4wNzYgMC43MDJ6IiBmaWxsPSIjMmQ4OWVmIi8+CiA8Y2lyY2xlIGN4PSIxNjguMTgiIGN5PSI3NCIgcj0iMTAuNSIgZmlsbD0iIzMzMyIgc3Ryb2tlPSIjZmZmIi8+CiA8cGF0aCBkPSJtMTczLjU3IDc5LjM2MmMtMC4xMzQgMC4yLTAuMzY4IDAuMzE0LTAuNjQyIDAuMzE0aC0xLjExM2MtMC40OCAwLTAuOTc1LTAuMzQtMS4xNDctMC43ODlsLTAuNDktMS4yNzVhMC42NDIgMC42NDIgMCAwIDAtMC41MzItMC4zNjVoLTMuMDM2YTAuNjIgMC42MiAwIDAgMC0wLjUyIDAuMzY0bC0wLjQ2IDEuMjY3Yy0wLjE2MyAwLjQ0Ny0wLjY2MyAwLjc5OC0xLjE0IDAuNzk4aC0xLjA1M2MtMC4yNzMgMC0wLjUwOC0wLjExNS0wLjY0NC0wLjMxMy0wLjEzNi0wLjE5OS0wLjE1Ny0wLjQ1OS0wLjA1OC0wLjcxM2wzLjcxNi05LjU0YTEuMjkzIDEuMjkzIDAgMCAxIDEuMTUtMC43ODZoMS4wNDdjMC40OCAwIDAuOTc2IDAuMzM2IDEuMTU0IDAuNzgxbDMuODIgOS41NDVjMC4xMDQgMC4yNTMgMC4wODUgMC41MTMtMC4wNSAwLjcxMnptLTUuNDY3LTcuMjU3LTAuOTI2IDIuNTQyYy0wLjAyIDAuMDU1LTAuMDE4IDAuMDk1LThlLTMgMC4xMDkgMC4wMSAwLjAxMyAwLjA0NiAwLjAzIDAuMTA0IDAuMDNoMS42ODFjMC4wNjcgMCAwLjA5Ny0wLjAxOCAwLjEwMy0wLjAyOCA3ZS0zIC0wLjAxMSAwLjAxNC0wLjA0NS0wLjAxLTAuMTA3eiIgZmlsbD0iIzVkYzIxZSIvPgogPGNpcmNsZSBjeD0iMTg4LjE4IiBjeT0iNTQiIHI9IjEwLjUiIGZpbGw9IiMzMzMiIHN0cm9rZT0iI2ZmZiIvPgogPHBhdGggZD0ibTE5My41NCA1OC4xMThhMy40MiAzLjQyIDAgMCAxLTEuMTEgMS4zMThjLTAuNDY3IDAuMzI3LTEuMDQ2IDAuNTMzLTEuNzIyIDAuNjA3LTAuNDE1IDAuMDQzLTEuMzc1IDAuMDctMi44NTUgMC4wOGgtMy4yNzZjLTAuNTUxIDAtMS0wLjQ0OC0xLTF2LTEwLjI0NWMwLTAuNTUyIDAuNDQ5LTEgMS0xaDMuOTYyYzAuOTQ1IDAgMS42MzQgMC4wMzkgMi4xMDYgMC4xMTkgMC40OTYgMC4wODQgMC45NDcgMC4yNjMgMS4zNCAwLjUzIDAuMzk4IDAuMjc1IDAuNzMgMC42MzYgMC45ODYgMS4wNzQgMC4yNjcgMC40NTQgMC40MDIgMC45NjcgMC40MDIgMS41MjMgMCAwLjYwNi0wLjE2NSAxLjE2OS0wLjQ5MSAxLjY3M2EzLjA2IDMuMDYgMCAwIDEtMC42OTIgMC43NThsLTAuMDIzIDAuMDE3IDAuMDE4IDAuMDFjMC40NTQgMC4yMjQgMC44MyAwLjUyOSAxLjEyIDAuOTA1IDAuNDIyIDAuNTUzIDAuNjM3IDEuMjA3IDAuNjM3IDEuOTQ4YTMuNzkgMy43OSAwIDAgMS0wLjQwMSAxLjY4NHptLTMuNDM3LTIuODk2Yy0wLjE5NS0wLjA2OS0wLjY5NC0wLjE1LTEuOTY4LTAuMTVoLTEuMjJhMC4zNCAwLjM0IDAgMCAwLTAuMzQgMC4zNHYxLjc1OWMwIDAuMTg4IDAuMTUzIDAuMzQgMC4zNCAwLjM0aDEuNDk3YzEuMDE4IDAgMS4zOTgtMC4wMzQgMS41MzctMC4wNjMgMC4yODQtMC4wNTMgMC41MDItMC4xNyAwLjY3Mi0wLjM2IDAuMTYzLTAuMTg0IDAuMjQzLTAuNDM1IDAuMjQzLTAuNzYzIDAtMC4yODMtMC4wNjMtMC41MS0wLjE5My0wLjY5OWExLjEwNyAxLjEwNyAwIDAgMC0wLjU2OC0wLjQwNHptLTMuMTg4LTIuNzM4aDAuODY1YzAuODk1IDAgMS40NTQtMC4wMTMgMS42NjEtMC4wMzcgMC4zMjItMC4wMzggMC41NzQtMC4xNDcgMC43NDktMC4zMiAwLjE2Ni0wLjE2NyAwLjI0Ny0wLjM4NyAwLjI0Ny0wLjY3MiAwLTAuMTM2LTAuMDE3LTAuMjYtMC4wNTItMC4zNjctMC4wNTEtMC4xNi0wLjI5LTAuNDIyLTAuNDQ3LTAuNDg4LTAuMTEtMC4wNDctMC4yNC0wLjA4LTAuMzktMC4wOTgtMC4yMTMtMC4wMjUtMC44NzMtMC4wMzctMS45NTgtMC4wMzdoLTAuNjc0YTAuMzQgMC4zNCAwIDAgMC0wLjM0IDAuMzR2MS4zMzljMCAwLjE4OCAwLjE1MiAwLjM0IDAuMzQgMC4zNHoiIGZpbGw9IiNlMTEiLz4KIDxjaXJjbGUgY3g9IjE2OC4xOCIgY3k9IjM0IiByPSIxMC41IiBmaWxsPSIjMzMzIiBzdHJva2U9IiNmZmYiLz4KIDxwYXRoIGQ9Im0xNzMuMTMgMjkuMzUzLTMuMjY5IDUuMTZjLTAuMTQ5IDAuMjM2LTAuMjggMC42ODctMC4yOCAwLjk2NXYzLjI0OWEwLjk1IDAuOTUgMCAwIDEtMC45NDggMC45NDhoLTAuOTE2YTAuOTUgMC45NSAwIDAgMS0wLjk0OS0wLjk0OHYtMy4yNjRjMC0wLjI3OS0wLjEzLTAuNzI5LTAuMjgtMC45NjRsLTMuMjU0LTUuMTQ2Yy0wLjE1Mi0wLjI0My0wLjE3Ni0wLjUtMC4wNjItMC43MDUgMC4xMTMtMC4yMDUgMC4zNDMtMC4zMjMgMC42MjktMC4zMjNoMS4yOTNjMC40NiAwIDAuOTgzIDAuMjk3IDEuMjE5IDAuNjkybDEuODgzIDMuMTY3YzAuMDEzIDAuMDIgMC4wMjMgMC4wMzUgMC4wMzMgMC4wNDUgNGUtMyAtMC4wMSAwLjAxMy0wLjAyNCAwLjAyNS0wLjA0NGwxLjg0NC0zLjE2M2MwLjIzMi0wLjM5OCAwLjc1NC0wLjY5NyAxLjIxNS0wLjY5N2gxLjI1MmMwLjI4NyAwIDAuNTE2IDAuMTE4IDAuNjI5IDAuMzI0IDAuMTE0IDAuMjA1IDAuMDkgMC40NjItMC4wNjQgMC43MDR6IiBmaWxsPSIjZmZjNDBkIi8+CiA8ZyBmaWxsPSIjMzMzIj4KICA8cGF0aCBkPSJtMzYuMzk3IDQ2LjY5YzAgMC42MDQgMC40OSAxLjA5NCAxLjA5MyAxLjA5NGgxMi4xOXYxMi40MzJoLTEyLjE5Yy0wLjYwMyAwLTEuMDkzIDAuNDktMS4wOTMgMS4wOTN2MTIuMTkxaC0xMi40MzR2LTEyLjE5YzAtMC42MDQtMC40OS0xLjA5NC0xLjA5My0xLjA5NGgtMTIuMTl2LTEyLjQzMmgxMi4xOWMwLjYwMyAwIDEuMDkzLTAuNDkgMS4wOTMtMS4wOTN2LTEyLjE5MWgxMi40MzR6IiBzdHJva2U9IiNmZmYiLz4KICA8cGF0aCBkPSJtMTA0LjY0IDguMjQ1Yy0zLjA3NSAwLjE4NC01LjA5OCAxLjQ5OC01LjU4OCAxLjg0OC0wLjQ3My0wLjM0My0yLjQyNS0xLjU5Ny01LjM4My0xLjgyNSAxLjY3OC0wLjc5MiAzLjUzMi0xLjI2OCA1LjUwOC0xLjI2OCAxLjk2IDAgMy43OTcgMC40NjYgNS40NjQgMS4yNDV6bS01LjU4NyA4LjdjNi43ODggNS4yNDIgOC44ODggOS42MjIgOS41MzUgMTEuOTczLTIuMzcxIDIuNTAzLTUuNzAyIDQuMDgyLTkuNDEyIDQuMDgyLTMuODEzIDAtNy4yMTQtMS42OC05LjU5NS00LjMwMyAwLjcxOC0yLjQwMiAyLjg5MS02LjY3MSA5LjQ3Mi0xMS43NTN6bTguMzYxLTYuOTJjMi44ODQgMi4zODggNC43NjIgNS45NDcgNC43NjMgOS45NzUgMCAyLjc5Ny0wLjkwOSA1LjM3Ni0yLjQxOCA3LjQ5OSAwLjMyNS02LjYzNy03LjA2Ny0xMy44MzgtNy4wNjctMTMuODM4IDAuMjY4LTEuNDc2IDIuOTc4LTIuODA3IDQuNzIyLTMuNjM2em0tMTYuNTY1IDAuMDc3YzEuNzQ0IDAuODMyIDQuMzA3IDIuMTM0IDQuNTY4IDMuNTY1IDAgMC03LjEzMyA2Ljk1Ni03LjA3MyAxMy40OTdhMTIuOTI2IDEyLjkyNiAwIDAgMS0yLjE2Ny03LjE2MWMwLTMuOTg3IDEuODM4LTcuNTE2IDQuNjcyLTkuOXoiLz4KICA8cGF0aCBkPSJtOTkuNzYxIDY1LjIzMmgtMS41MzY0djcuNjgyMmgxLjUzNjR2LTcuNjgyMm0zLjcxMDUgMS42NjctMS4wOTA5IDEuMDkwOWMxLjI1OTkgMS4wMTQgMS45ODk3IDIuNTQyOCAxLjk4OTcgNC4xNTYxYTUuMzc3NSA1LjM3NzUgMCAwIDEtNS4zNzc1IDUuMzc3NWMtMi45NjUzIDAtNS4zNzc1LTIuMzk2OC01LjM3NzUtNS4zNzc1IDAtMS42MDU2IDAuNzI5ODEtMy4xNDIgMS45ODItNC4xNjM3bC0xLjA4MzItMS4wODMyYy0yLjkxMTUgMi40NzM3LTMuMjY0OSA2LjgzNzEtMC43OTEyNiA5Ljc0ODcgMi40NzM3IDIuOTAzOSA2LjgzNzEgMy4yNTcyIDkuNzQ4NyAwLjc4MzU4IDEuNTUxOC0xLjMxMzYgMi40MzUyLTMuMjQ5NiAyLjQzNTItNS4yODUzIDAtMi4wMjA0LTAuODkxMTMtMy45NDEtMi40MzUyLTUuMjQ2OXoiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9Ii43NjgyMiIgc3R5bGU9InBhaW50LW9yZGVyOnN0cm9rZSBmaWxsIG1hcmtlcnMiLz4KIDwvZz4KPC9zdmc+Cg==
elements:
- type: service-button
title: ''
service: remote.send_command
service_data:
entity_id: remote.xbox_remote
command: Up
style:
top: 45.35%
left: 14.3%
width: 6.2%
height: 15%
overflow: hidden
- type: service-button
title: ''
service: remote.send_command
service_data:
entity_id: remote.xbox_remote
command: Down
style:
top: 74.7%
left: 14.3%
width: 6.2%
height: 15%
overflow: hidden
- type: service-button
title: ''
service: remote.send_command
service_data:
entity_id: remote.xbox_remote
command: Left
style:
top: 60%
left: 8.05%
height: 14.4%
width: 6.4%
overflow: hidden
- type: service-button
title: ''
service: remote.send_command
service_data:
entity_id: remote.xbox_remote
command: Right
style:
top: 60%
left: 20.65%
height: 14.4%
width: 6.4%
overflow: hidden
- type: service-button
title: ''
service: remote.send_command
service_data:
entity_id: remote.xbox_remote
command: A
style:
top: 82.5%
left: 80.05%
width: 10.5%
height: 24.4%
border-radius: 100%
overflow: hidden
- type: service-button
title: ''
service: remote.send_command
service_data:
entity_id: remote.xbox_remote
command: X
style:
top: 60.0%
left: 70.6%
width: 10.5%
height: 24.4%
border-radius: 100%
overflow: hidden
- type: service-button
title: ''
service: remote.send_command
service_data:
entity_id: remote.xbox_remote
command: B
style:
top: 60.0%
left: 89.5%
width: 10.5%
height: 24.4%
border-radius: 100%
overflow: hidden
- type: service-button
title: ''
service: remote.send_command
service_data:
entity_id: remote.xbox_remote
command: 'Y'
style:
top: 37.9%
left: 80.05%
width: 10.5%
height: 24.4%
border-radius: 100%
overflow: hidden
- type: service-button
title: ''
service: remote.toggle
service_data:
entity_id: remote.xbox_remote
style:
top: 80.2%
left: 47.2%
width: 7%
height: 16%
border-radius: 100%
overflow: hidden
- type: service-button
title: ''
service: media_player.play_media
service_data:
entity_id: media_player.xbox
media_content_type: ''
media_content_id: Home
style:
top: 22.2%
left: 47.2%
width: 13.4%
height: 31.2%
border-radius: 100%
overflow: hidden
Working:
type: button
icon: mdi:microsoft-xbox
name: Xbox Remote 2
layout: icon_name
tap_action:
action: fire-dom-event
browser_mod:
command: popup
title: Xbox Remote
card:
type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
color_type: blank-card
- type: custom:button-card
color_type: blank-card
- type: custom:button-card
color_type: card
color: rgb(223, 255, 97)
icon: mdi:volume-plus
tap_action:
action: call-service
service: media_player.volume_up
service_data:
entity_id: media_player.xbox
- type: custom:button-card
color_type: card
color: rgb(223, 255, 97)
icon: mdi:volume-minus
tap_action:
action: call-service
service: media_player.volume_down
service_data:
entity_id: media_player.xbox
- type: custom:button-card
color_type: blank-card
- type: custom:button-card
color_type: blank-card
- type: picture-elements
image: >-
data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMjEwIiBoZWlnaHQ9IjkwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6Y2M9Imh0dHA6Ly9jcmVhdGl2ZWNvbW1vbnMub3JnL25zIyIgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPgogPG1ldGFkYXRhPgogIDxyZGY6UkRGPgogICA8Y2M6V29yayByZGY6YWJvdXQ9IiI+CiAgICA8ZGM6Zm9ybWF0PmltYWdlL3N2Zyt4bWw8L2RjOmZvcm1hdD4KICAgIDxkYzp0eXBlIHJkZjpyZXNvdXJjZT0iaHR0cDovL3B1cmwub3JnL2RjL2RjbWl0eXBlL1N0aWxsSW1hZ2UiLz4KICAgIDxkYzp0aXRsZS8+CiAgIDwvY2M6V29yaz4KICA8L3JkZjpSREY+CiA8L21ldGFkYXRhPgogPGc+CiAgPHRpdGxlPmJhY2tncm91bmQ8L3RpdGxlPgogIDxyZWN0IGlkPSJjYW52YXNfYmFja2dyb3VuZCIgeD0iLTEiIHk9Ii0xIiB3aWR0aD0iODAyIiBoZWlnaHQ9IjYwMiIgZmlsbD0ibm9uZSIvPgogPC9nPgogPGNpcmNsZSBjeD0iOTkuMTgiIGN5PSIyMCIgcj0iMTQiIGZpbGw9IiNmZmYiLz4KIDxjaXJjbGUgY3g9IjE0OC4xOCIgY3k9IjU0IiByPSIxMC41IiBmaWxsPSIjMzMzIiBzdHJva2U9IiNmZmYiLz4KIDxwYXRoIGQ9Im0xNTMuMTYgNTkuMzVjLTAuMTEgMC4yMDYtMC4zNCAwLjMyNS0wLjYyNyAwLjMyNWgtMS4zNjhjLTAuNDU1IDAtMC45ODQtMC4yODktMS4yMy0wLjY3MmwtMS43MDEtMi42NTdjLTAuMDMtMC4wNDUtMC4wNTUtMC4wNjItMC4wNjItMC4wNjQgNGUtMyAyZS0zIC0wLjAyMSAwLjAxOC0wLjA1MSAwLjA2NWwtMS43MDkgMi42NTdjLTAuMjQ3IDAuMzgzLTAuNzc2IDAuNjcxLTEuMjMgMC42NzFoLTEuMzUzYy0wLjI4OCAwLTAuNTE2LTAuMTE4LTAuNjI4LTAuMzI0LTAuMTExLTAuMjA2LTAuMDg1LTAuNDYzIDAuMDczLTAuNzAzbDIuOTc2LTQuNTQ1YTAuNzA0IDAuNzA0IDAgMCAwIDJlLTMgLTAuNjc2bC0yLjY0LTQuMDc0Yy0wLjE1NS0wLjI0MS0wLjE4LTAuNDk4LTAuMDY5LTAuNzA0IDAuMTEzLTAuMjA2IDAuMzQyLTAuMzI0IDAuNjMtMC4zMjRoMS4yODZjMC40NTcgMCAwLjk4NCAwLjI5MiAxLjIyNSAwLjY4bDEuNDkgMi4zODVhMC4yMyAwLjIzIDAgMCAwIDAuMDQ4IDAuMDU3YzNlLTMgLThlLTMgMC4wMi0wLjAyNCAwLjA0LTAuMDU3bDEuNDU1LTIuMzhjMC4yMzktMC4zOSAwLjc2NC0wLjY4NSAxLjIyMi0wLjY4NWgxLjI2N2MwLjI4NyAwIDAuNTE2IDAuMTE4IDAuNjI4IDAuMzI0IDAuMTEzIDAuMjA2IDAuMDg5IDAuNDYyLTAuMDY3IDAuNzA0bC0yLjY1OCA0LjE1YTAuNjk5IDAuNjk5IDAgMCAwIDVlLTMgMC42NzVsMi45NyA0LjQ3YzAuMTU5IDAuMjQgMC4xODcgMC40OTYgMC4wNzYgMC43MDJ6IiBmaWxsPSIjMmQ4OWVmIi8+CiA8Y2lyY2xlIGN4PSIxNjguMTgiIGN5PSI3NCIgcj0iMTAuNSIgZmlsbD0iIzMzMyIgc3Ryb2tlPSIjZmZmIi8+CiA8cGF0aCBkPSJtMTczLjU3IDc5LjM2MmMtMC4xMzQgMC4yLTAuMzY4IDAuMzE0LTAuNjQyIDAuMzE0aC0xLjExM2MtMC40OCAwLTAuOTc1LTAuMzQtMS4xNDctMC43ODlsLTAuNDktMS4yNzVhMC42NDIgMC42NDIgMCAwIDAtMC41MzItMC4zNjVoLTMuMDM2YTAuNjIgMC42MiAwIDAgMC0wLjUyIDAuMzY0bC0wLjQ2IDEuMjY3Yy0wLjE2MyAwLjQ0Ny0wLjY2MyAwLjc5OC0xLjE0IDAuNzk4aC0xLjA1M2MtMC4yNzMgMC0wLjUwOC0wLjExNS0wLjY0NC0wLjMxMy0wLjEzNi0wLjE5OS0wLjE1Ny0wLjQ1OS0wLjA1OC0wLjcxM2wzLjcxNi05LjU0YTEuMjkzIDEuMjkzIDAgMCAxIDEuMTUtMC43ODZoMS4wNDdjMC40OCAwIDAuOTc2IDAuMzM2IDEuMTU0IDAuNzgxbDMuODIgOS41NDVjMC4xMDQgMC4yNTMgMC4wODUgMC41MTMtMC4wNSAwLjcxMnptLTUuNDY3LTcuMjU3LTAuOTI2IDIuNTQyYy0wLjAyIDAuMDU1LTAuMDE4IDAuMDk1LThlLTMgMC4xMDkgMC4wMSAwLjAxMyAwLjA0NiAwLjAzIDAuMTA0IDAuMDNoMS42ODFjMC4wNjcgMCAwLjA5Ny0wLjAxOCAwLjEwMy0wLjAyOCA3ZS0zIC0wLjAxMSAwLjAxNC0wLjA0NS0wLjAxLTAuMTA3eiIgZmlsbD0iIzVkYzIxZSIvPgogPGNpcmNsZSBjeD0iMTg4LjE4IiBjeT0iNTQiIHI9IjEwLjUiIGZpbGw9IiMzMzMiIHN0cm9rZT0iI2ZmZiIvPgogPHBhdGggZD0ibTE5My41NCA1OC4xMThhMy40MiAzLjQyIDAgMCAxLTEuMTEgMS4zMThjLTAuNDY3IDAuMzI3LTEuMDQ2IDAuNTMzLTEuNzIyIDAuNjA3LTAuNDE1IDAuMDQzLTEuMzc1IDAuMDctMi44NTUgMC4wOGgtMy4yNzZjLTAuNTUxIDAtMS0wLjQ0OC0xLTF2LTEwLjI0NWMwLTAuNTUyIDAuNDQ5LTEgMS0xaDMuOTYyYzAuOTQ1IDAgMS42MzQgMC4wMzkgMi4xMDYgMC4xMTkgMC40OTYgMC4wODQgMC45NDcgMC4yNjMgMS4zNCAwLjUzIDAuMzk4IDAuMjc1IDAuNzMgMC42MzYgMC45ODYgMS4wNzQgMC4yNjcgMC40NTQgMC40MDIgMC45NjcgMC40MDIgMS41MjMgMCAwLjYwNi0wLjE2NSAxLjE2OS0wLjQ5MSAxLjY3M2EzLjA2IDMuMDYgMCAwIDEtMC42OTIgMC43NThsLTAuMDIzIDAuMDE3IDAuMDE4IDAuMDFjMC40NTQgMC4yMjQgMC44MyAwLjUyOSAxLjEyIDAuOTA1IDAuNDIyIDAuNTUzIDAuNjM3IDEuMjA3IDAuNjM3IDEuOTQ4YTMuNzkgMy43OSAwIDAgMS0wLjQwMSAxLjY4NHptLTMuNDM3LTIuODk2Yy0wLjE5NS0wLjA2OS0wLjY5NC0wLjE1LTEuOTY4LTAuMTVoLTEuMjJhMC4zNCAwLjM0IDAgMCAwLTAuMzQgMC4zNHYxLjc1OWMwIDAuMTg4IDAuMTUzIDAuMzQgMC4zNCAwLjM0aDEuNDk3YzEuMDE4IDAgMS4zOTgtMC4wMzQgMS41MzctMC4wNjMgMC4yODQtMC4wNTMgMC41MDItMC4xNyAwLjY3Mi0wLjM2IDAuMTYzLTAuMTg0IDAuMjQzLTAuNDM1IDAuMjQzLTAuNzYzIDAtMC4yODMtMC4wNjMtMC41MS0wLjE5My0wLjY5OWExLjEwNyAxLjEwNyAwIDAgMC0wLjU2OC0wLjQwNHptLTMuMTg4LTIuNzM4aDAuODY1YzAuODk1IDAgMS40NTQtMC4wMTMgMS42NjEtMC4wMzcgMC4zMjItMC4wMzggMC41NzQtMC4xNDcgMC43NDktMC4zMiAwLjE2Ni0wLjE2NyAwLjI0Ny0wLjM4NyAwLjI0Ny0wLjY3MiAwLTAuMTM2LTAuMDE3LTAuMjYtMC4wNTItMC4zNjctMC4wNTEtMC4xNi0wLjI5LTAuNDIyLTAuNDQ3LTAuNDg4LTAuMTEtMC4wNDctMC4yNC0wLjA4LTAuMzktMC4wOTgtMC4yMTMtMC4wMjUtMC44NzMtMC4wMzctMS45NTgtMC4wMzdoLTAuNjc0YTAuMzQgMC4zNCAwIDAgMC0wLjM0IDAuMzR2MS4zMzljMCAwLjE4OCAwLjE1MiAwLjM0IDAuMzQgMC4zNHoiIGZpbGw9IiNlMTEiLz4KIDxjaXJjbGUgY3g9IjE2OC4xOCIgY3k9IjM0IiByPSIxMC41IiBmaWxsPSIjMzMzIiBzdHJva2U9IiNmZmYiLz4KIDxwYXRoIGQ9Im0xNzMuMTMgMjkuMzUzLTMuMjY5IDUuMTZjLTAuMTQ5IDAuMjM2LTAuMjggMC42ODctMC4yOCAwLjk2NXYzLjI0OWEwLjk1IDAuOTUgMCAwIDEtMC45NDggMC45NDhoLTAuOTE2YTAuOTUgMC45NSAwIDAgMS0wLjk0OS0wLjk0OHYtMy4yNjRjMC0wLjI3OS0wLjEzLTAuNzI5LTAuMjgtMC45NjRsLTMuMjU0LTUuMTQ2Yy0wLjE1Mi0wLjI0My0wLjE3Ni0wLjUtMC4wNjItMC43MDUgMC4xMTMtMC4yMDUgMC4zNDMtMC4zMjMgMC42MjktMC4zMjNoMS4yOTNjMC40NiAwIDAuOTgzIDAuMjk3IDEuMjE5IDAuNjkybDEuODgzIDMuMTY3YzAuMDEzIDAuMDIgMC4wMjMgMC4wMzUgMC4wMzMgMC4wNDUgNGUtMyAtMC4wMSAwLjAxMy0wLjAyNCAwLjAyNS0wLjA0NGwxLjg0NC0zLjE2M2MwLjIzMi0wLjM5OCAwLjc1NC0wLjY5NyAxLjIxNS0wLjY5N2gxLjI1MmMwLjI4NyAwIDAuNTE2IDAuMTE4IDAuNjI5IDAuMzI0IDAuMTE0IDAuMjA1IDAuMDkgMC40NjItMC4wNjQgMC43MDR6IiBmaWxsPSIjZmZjNDBkIi8+CiA8ZyBmaWxsPSIjMzMzIj4KICA8cGF0aCBkPSJtMzYuMzk3IDQ2LjY5YzAgMC42MDQgMC40OSAxLjA5NCAxLjA5MyAxLjA5NGgxMi4xOXYxMi40MzJoLTEyLjE5Yy0wLjYwMyAwLTEuMDkzIDAuNDktMS4wOTMgMS4wOTN2MTIuMTkxaC0xMi40MzR2LTEyLjE5YzAtMC42MDQtMC40OS0xLjA5NC0xLjA5My0xLjA5NGgtMTIuMTl2LTEyLjQzMmgxMi4xOWMwLjYwMyAwIDEuMDkzLTAuNDkgMS4wOTMtMS4wOTN2LTEyLjE5MWgxMi40MzR6IiBzdHJva2U9IiNmZmYiLz4KICA8cGF0aCBkPSJtMTA0LjY0IDguMjQ1Yy0zLjA3NSAwLjE4NC01LjA5OCAxLjQ5OC01LjU4OCAxLjg0OC0wLjQ3My0wLjM0My0yLjQyNS0xLjU5Ny01LjM4My0xLjgyNSAxLjY3OC0wLjc5MiAzLjUzMi0xLjI2OCA1LjUwOC0xLjI2OCAxLjk2IDAgMy43OTcgMC40NjYgNS40NjQgMS4yNDV6bS01LjU4NyA4LjdjNi43ODggNS4yNDIgOC44ODggOS42MjIgOS41MzUgMTEuOTczLTIuMzcxIDIuNTAzLTUuNzAyIDQuMDgyLTkuNDEyIDQuMDgyLTMuODEzIDAtNy4yMTQtMS42OC05LjU5NS00LjMwMyAwLjcxOC0yLjQwMiAyLjg5MS02LjY3MSA5LjQ3Mi0xMS43NTN6bTguMzYxLTYuOTJjMi44ODQgMi4zODggNC43NjIgNS45NDcgNC43NjMgOS45NzUgMCAyLjc5Ny0wLjkwOSA1LjM3Ni0yLjQxOCA3LjQ5OSAwLjMyNS02LjYzNy03LjA2Ny0xMy44MzgtNy4wNjctMTMuODM4IDAuMjY4LTEuNDc2IDIuOTc4LTIuODA3IDQuNzIyLTMuNjM2em0tMTYuNTY1IDAuMDc3YzEuNzQ0IDAuODMyIDQuMzA3IDIuMTM0IDQuNTY4IDMuNTY1IDAgMC03LjEzMyA2Ljk1Ni03LjA3MyAxMy40OTdhMTIuOTI2IDEyLjkyNiAwIDAgMS0yLjE2Ny03LjE2MWMwLTMuOTg3IDEuODM4LTcuNTE2IDQuNjcyLTkuOXoiLz4KICA8cGF0aCBkPSJtOTkuNzYxIDY1LjIzMmgtMS41MzY0djcuNjgyMmgxLjUzNjR2LTcuNjgyMm0zLjcxMDUgMS42NjctMS4wOTA5IDEuMDkwOWMxLjI1OTkgMS4wMTQgMS45ODk3IDIuNTQyOCAxLjk4OTcgNC4xNTYxYTUuMzc3NSA1LjM3NzUgMCAwIDEtNS4zNzc1IDUuMzc3NWMtMi45NjUzIDAtNS4zNzc1LTIuMzk2OC01LjM3NzUtNS4zNzc1IDAtMS42MDU2IDAuNzI5ODEtMy4xNDIgMS45ODItNC4xNjM3bC0xLjA4MzItMS4wODMyYy0yLjkxMTUgMi40NzM3LTMuMjY0OSA2LjgzNzEtMC43OTEyNiA5Ljc0ODcgMi40NzM3IDIuOTAzOSA2LjgzNzEgMy4yNTcyIDkuNzQ4NyAwLjc4MzU4IDEuNTUxOC0xLjMxMzYgMi40MzUyLTMuMjQ5NiAyLjQzNTItNS4yODUzIDAtMi4wMjA0LTAuODkxMTMtMy45NDEtMi40MzUyLTUuMjQ2OXoiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9Ii43NjgyMiIgc3R5bGU9InBhaW50LW9yZGVyOnN0cm9rZSBmaWxsIG1hcmtlcnMiLz4KIDwvZz4KPC9zdmc+Cg==
elements:
- type: service-button
title: ''
service: remote.send_command
service_data:
entity_id: remote.xbox_remote
command: Up
style:
top: 45.35%
left: 14.3%
width: 6.2%
height: 15%
overflow: hidden
- type: service-button
title: ''
service: remote.send_command
service_data:
entity_id: remote.xbox_remote
command: Down
style:
top: 74.7%
left: 14.3%
width: 6.2%
height: 15%
overflow: hidden
- type: service-button
title: ''
service: remote.send_command
service_data:
entity_id: remote.xbox_remote
command: Left
style:
top: 60%
left: 8.05%
height: 14.4%
width: 6.4%
overflow: hidden
- type: service-button
title: ''
service: remote.send_command
service_data:
entity_id: remote.xbox_remote
command: Right
style:
top: 60%
left: 20.65%
height: 14.4%
width: 6.4%
overflow: hidden
- type: service-button
title: ''
service: remote.send_command
service_data:
entity_id: remote.xbox_remote
command: A
style:
top: 82.5%
left: 80.05%
width: 10.5%
height: 24.4%
border-radius: 100%
overflow: hidden
- type: service-button
title: ''
service: remote.send_command
service_data:
entity_id: remote.xbox_remote
command: X
style:
top: 60.0%
left: 70.6%
width: 10.5%
height: 24.4%
border-radius: 100%
overflow: hidden
- type: service-button
title: ''
service: remote.send_command
service_data:
entity_id: remote.xbox_remote
command: B
style:
top: 60.0%
left: 89.5%
width: 10.5%
height: 24.4%
border-radius: 100%
overflow: hidden
- type: service-button
title: ''
service: remote.send_command
service_data:
entity_id: remote.xbox_remote
command: 'Y'
style:
top: 37.9%
left: 80.05%
width: 10.5%
height: 24.4%
border-radius: 100%
overflow: hidden
- type: service-button
title: ''
service: remote.toggle
service_data:
entity_id: remote.xbox_remote
style:
top: 80.2%
left: 47.2%
width: 7%
height: 16%
border-radius: 100%
overflow: hidden
- type: service-button
title: ''
service: media_player.play_media
service_data:
entity_id: media_player.xbox
media_content_type: ''
media_content_id: Home
style:
top: 22.2%
left: 47.2%
width: 13.4%
height: 31.2%
border-radius: 100%
overflow: hidden
Hi all
I am trying to make a simple (I think card) but can’t find the right way.
I have the following card and I want to just add the watts of a sensor
color: rgb(253, 106, 2)
color_type: label-card
name: Kid Room
type: custom:button-card
sensor = sensor.sonoff_1000fe3b9b_power
Ideally I would like to in the name to add the watts. like the example below
Kid room: 1.200 watts
Any help how I can get there?
you could of course have a look at the documentation which explains this: button-card/README.md at master · custom-cards/button-card · GitHub
did you try any of this?
Don’t set the width and the height, use aspect_ratio instead.
Dwains dashboard is based on button-card (for most of the buttons), you can find all the templates in his github repository.
Where do you want to display the temperature? Like the percentage of brightness (which is also supposed to draw a circle but doesn’t display it)?
Did you clear your cache? Make sure you do it on ALL your devices a’d also make sure you are running the latest version before that. Also try in private navigation mode, if it works there, it’s 200% a caching issue.
2 Likes
Hi
Temperature in the middle of the card/box. And maybe the possibility to add “C” for Celsius after?