Button sample for more info

[Viv-Rajkumar]

Thank you for for this helpful integration. Looking through the FAQ and the callout for the button sample, if of any help to some1 else reading this, this was a quickly hacked together sample to achieve something similar. Does depend on button-card

Code

type: custom:button-card
entity: sensor.ps5_pro_activity
show_icon: false
show_name: false
show_state: false
show_label: false
tap_action:
  action: more-info
styles:
  card:
    - height: 240px
    - width: 240px
    - border-radius: 15px
    - position: relative
  custom_fields:
    top_left:
      - position: absolute
      - top: 30px
      - left: 15px
      - font-size: 28px
      - font-weight: bold
      - color: "#6B7280"
    top_right:
      - position: absolute
      - top: 15px
      - right: 15px
      - width: 72px
      - height: 72px
    middle:
      - position: absolute
      - bottom: 65px
      - left: 15px
      - font-size: 16px
      - font-weight: 500
    divider:
      - position: absolute
      - bottom: 55px
      - left: 15px
      - width: 90%
      - height: 1px
      - background-color: rgba(255,255,255,0.1)
    bottom_left:
      - position: absolute
      - bottom: 15px
      - left: 15px
      - font-size: 26px
      - font-weight: 500
      - text-align: left
      - max-width: 220px
      - color: "#6B7280"
custom_fields:
  top_left: |
    [[[ 
      return "PS5 Pro";
    ]]]
  top_right: |
    [[[
      if (entity && entity.state === "playing" && entity.attributes?.title_image) {
        return `<img src="${entity.attributes.title_image}" style="width:100%; height:100%; border-radius:50%;">`;
      } else {
        return `<ha-icon icon="mdi:sony-playstation" style="width: 90%; height: 90%; margin-top: -5px; margin-right: -10px; color: #6B7280;"></ha-icon>`;
      }
    ]]]
  middle: |
    [[[
      if (!entity) {
        return '<span style="color:#771414">Offline</span>';
      } else if (entity.state === "playing") {
        return '<span style="color:#0e6c31">Active</span>';
      } else if (entity.state === "idle" || entity.attributes?.power === "STANDBY") {
        return '<span style="color:#6B7280">Standby</span>';
      } else {
        return '<span style="color:#771414">Offline</span>';
      }
    ]]]
  divider: |
    [[[
      return '<div></div>';
    ]]]
  bottom_left: |
    [[[
      if (!entity) {
        return `<span style="color:#771414">Unavailable</span>`;
      } else if (entity.state === "playing" && entity.attributes?.title_name) {
        let title = entity.attributes.title_name;
        return `<span title="${title}">${title}</span>`;
      } else {
        return `<ha-icon icon="mdi:controller-off" style="width: 38px; height: 38px;"></ha-icon>`;
      }
    ]]]

Output:

Normal:

In Game:

[ipatek420]

Changed it slightly. type: custom:button-card
entity: sensor.ps5_112_activity
show_icon: false
show_name: false
show_state: false
show_label: false
tap_action:
action: more-info
styles:
card:
- height: 240px
- width: 240px
- border-radius: 15px
- position: relative
custom_fields:
top_left:
- position: absolute
- top: 30px
- left: 15px
- font-size: 28px
- font-weight: bold
- color: "#6B7280"
top_right:
- position: absolute
- top: 10px
- right: 10px
- width: 100px # Increased size
- height: 100px # Increased size
middle:
- position: absolute
- bottom: 65px
- left: 15px
- font-size: 16px
- font-weight: 500
divider:
- position: absolute
- bottom: 55px
- left: 15px
- width: 90%
- height: 1px
- background-color: rgba(255,255,255,0.1)
bottom_left:
- position: absolute
- bottom: 15px
- left: 15px
- font-size: 26px
- font-weight: 500
- text-align: left
- max-width: 220px
- color: "#6B7280"
custom_fields:
top_left: |
[[[
return "PS5";
]]]
top_right: |
[[[
if (entity && entity.state === "playing" && entity.attributes?.title_image) {
return <img src="${entity.attributes.title_image}" style="width:100px; height:100px; border-radius:10px;">;
} else {
return <ha-icon icon="mdi:sony-playstation" style="width: 90%; height: 90%; margin-top: -5px; margin-right: -10px; color: #6B7280;"></ha-icon>;
}
]]]
middle: |
[[[
if (!entity) {
return 'Offline';
} else if (entity.state === "playing") {
return 'Active';
} else if (entity.state === "idle" || entity.attributes?.power === "STANDBY") {
return 'Standby';
} else {
return 'Offline';
}
]]]
divider: |
[[[
return '

';
]]]
bottom_left: |
[[[
if (!entity) {
return <span style="color:#771414">Unavailable</span>;
} else if (entity.state === "playing" && entity.attributes?.title_name) {
let title = entity.attributes.title_name;
return <span title="${title}">${title}</span>;
} else {
return <ha-icon icon="mdi:controller-off" style="width: 38px; height: 38px;"></ha-icon>;
}
]]]