Lovelace: Button card

Mariusthvdb · June 17, 2021, 1:22pm

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:

Schermafbeelding 2021-06-17 om 15.24.24
thanks for having a look

petro · June 17, 2021, 1:28pm

You have to use lovelace gen, config-template-card, or something else that lets you template cards that don’t have templating.

Mariusthvdb · June 17, 2021, 1:29pm

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!

Mariusthvdb · June 18, 2021, 7:42am

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~~~~

Mariusthvdb · June 18, 2021, 8:18am

haha, wait, bingo!

Schermafbeelding 2021-06-18 om 10.16.13

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

sajivve.trehaan · June 19, 2021, 2:20pm

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

glorifiedg · June 20, 2021, 9:57am

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'

Mariusthvdb · June 20, 2021, 10:57am

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…

_BaQs · June 20, 2021, 8:06pm

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!

KaherdinTristan · June 21, 2021, 5:11pm

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

Dolores · June 22, 2021, 1:51am

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

Makis · June 23, 2021, 7:02am

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?

Mariusthvdb · June 23, 2021, 7:20am

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?

RomRider · June 23, 2021, 8:34am

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.

KaherdinTristan · June 23, 2021, 4:20pm

Hi
Temperature in the middle of the card/box. And maybe the possibility to add “C” for Celsius after?

Mariusthvdb · June 25, 2021, 7:59am

hi,
for the fun of it, I am trying to have a custom-fields button spin, with a speed based on the actual fanspeed of an entity, sensor.argon_one_addon_fan_speed, and following the states it can have, as you see in the color template below

Of course I’ve read @Ildar_Gabdullin on Lovelace: mini graph card - #1706 by Ildar_Gabdullin but am still a bit stuck on how to move that to a button-card, so seek some assistance please…

this is my button:

Schermafbeelding 2021-06-24 om 23.56.26 Schermafbeelding 2021-06-25 om 09.55.54

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
custom_fields:
  fan:
    >
      [[[ return `<ha-icon icon=mdi:fan style='width:15px;color: var(--speed-color);'> </ha-icon>
          <span style='color: var(--primary-color);'>
          ${states['sensor.argon_one_addon_fan_speed'].state} % </span>`; ]]]

styles:
  custom_fields:
    fan:
      - font-size: 11px
      - font-weight: bold
      - padding: 0px 3px
      - position: absolute
      - right: 5%
      - top: 10%
      - --speed-color: >
          [[[ var speed = states['sensor.argon_one_addon_fan_speed'].state;
              var mapper = {0:'green',
                            1:'darkgreen',
                            3:'orange',
                            33:'orangered'
                            66:'maroon'}
              return mapper[speed] ? mapper[speed] : 'red' ; ]]]
state:
  - operator: '<'
    value: 50
    styles:
      card:
        - color: green
  - operator: '<'
    value: 60
    styles:
      card:
        - color: darkgreen
  - operator: '<'
    value: 70
    styles:
      card:
        - color: orange
  - operator: '<'
    value: 80
    styles:
      card:
        - color: maroon
  - default:
    styles:
      card:
        - color: red

appreciate a little help here, thanks!

Ildar_Gabdullin · June 25, 2021, 8:16am

Hi Marius, is it typo?

Mariusthvdb · June 25, 2021, 8:19am

yep… C&P error, edited it now… sorry
I could of course also add it to a top variable, and use it in the styles for the color… same for the speed could be done:

      speed-rotation: >
          [[[ var speed = states['sensor.argon_one_addon_fan_speed'].state;
              var mapper = {0:'0',
                            1:'4s',
                            3:'3s',
                            33:'2s',
                            66:'1s'}
              return mapper[speed] ? mapper[speed] : '0.3s' ; ]]]

maybe the 0 should be taken out, and a condition on state not being 0 should be included.

that way I could use the variable speed-rotation in the animation?>

Ildar_Gabdullin · June 25, 2021, 8:24am

Trying to simulate your case, can I have a code for

template:
  - button_body
  - plot_list

?

Mariusthvdb · June 25, 2021, 8:25am

sure, they’re all here