Suggestion (Not Issue) - Button sample for more info

[Viv-Rajkumar]

Description of the issue

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:

Addon version

N/A

Platform

N/A

Logs of the issue (if applicable)

No response