D-Pad revisited

[foxjw]

The 3x3 grid of horizontal squares/rectangles is well suited for a "cross" shaped d-pad, but for the circles, it bothered me more than it really should.

Sure, you can play with sizing and margins and positioning, but without rotation, it just didn't seem right.

So I did this. I can't be the first to have done it, but I didn't see it posted in the discussions anywhere, so I just finished slapping this together. It's a bit unpolished and probably a ham-handed clumsy way of doing things, but I'm rather new to HA and I don't claim to be any sort of CSS-wizard, so here it is anyway.

Giving the up/down/left/right buttons their own backgrounds and adjusting their sizes/positions a little can result in a fairly nice-looking layout that's more like separate curved buttons versus one circular pad, if that's what you're going for. I like styling some of my remotes that way, just so they don't all look the same.

Red lines in the composite image show where the "clickable/tappable" areas are.

type: custom:android-tv-card
rows:
  - dpad
custom_actions:
  - type: button
    name: center
    tap_action:
      action: key
      key: DPAD_CENTER
    icon: ok
    styles: |-
      :host {
        top: -30%;
        left: -30%;
        width: 160%;
        height: 160%;
        border: 1px solid rgba(0,0,0,0.5);
        border-radius: 50%;
        transform:rotate(0deg);
        --size: 36px;
        background:radial-gradient(circle at top left,#303030 15%,#101010 100%);
        z-index: 500;
      }
      .icon {
        color:rgba(128,128,128,0.8);
      }
  - type: button
    name: up
    tap_action:
      action: key
      key: DPAD_UP
    hold_action:
      action: repeat
    icon: mdi:chevron-up
    styles: |-
      .icon {
        transform:rotate(-45deg);
        color: rgba(96,96,96,0.8);
      }
  - type: button
    name: down
    tap_action:
      action: key
      key: DPAD_DOWN
    hold_action:
      action: repeat
    icon: mdi:chevron-down
    styles: |-
      .icon {
        transform:rotate(-45deg);
        color: rgba(96,96,96,0.8);
      }
  - type: button
    name: left
    tap_action:
      action: key
      key: DPAD_LEFT
    hold_action:
      action: repeat
    icon: mdi:chevron-left
    styles: |-
      .icon {
        transform:rotate(-45deg);
        color: rgba(96,96,96,0.8);
      }
  - type: button
    name: right
    tap_action:
      action: key
      key: DPAD_RIGHT
    hold_action:
      action: repeat
    icon: mdi:chevron-right
    styles: |-
      .icon {
        transform:rotate(-45deg);
        color: rgba(96,96,96,0.8);
      }
styles: |-
  .button-pad {
    gap: 14px;
    border: 1px solid #444;
    border-radius: 50%;
    z-index: 50;
    overflow: hidden;
    background:radial-gradient(circle at top left,#202020 15%,#303030 100%);
  }
  .button-pad .empty-button {
    width: 0px;
    height: 0px;
    z-index: 0;
  }
  .button-pad remote-button {
    top: -40%;
    left: -40%;
    width: 180%;
    height: 180%;
    transform: rotate(45deg);
    overflow: hidden;
  }
repeat_delay: 99
custom_icons:
  - name: ok
    path: >-
      M7 7A2 2 0 005 9V15A2 2 0 007 17H9A2 2 0 0011 15V9A2 2 0 009 7H7M7
      9H9V15H7V9ZM13 7V17H15V13.7L17 17H19L16 12 19 7H17L15 10.3V7H13Z

[Nerwyn]

There is the Google TV app style remote navigation buttons example but what you are doing with the rotation to correct clickable areas improves upon that! I'm going to use your config as a base to improve the existing example, and then also add yours to the README.

[Nerwyn]

Here's your config tweaked to remove some redundant styles and fix the border radius on the directional buttons so the tappable areas cover the entire quadrant.

type: custom:android-tv-card
rows:
  - - dpad
custom_actions:
  - type: button
    name: center
    tap_action:
      action: key
      key: DPAD_CENTER
    icon: ok
    styles: |-
      :host {
        --size: 36px;
        top: -30%;
        left: -30%;
        width: 160%;
        height: 160%;
        border: 1px solid rgba(0,0,0,0.5);
        border-radius: 50%;
        transform: rotate(0deg);
        background: radial-gradient(circle at top left,#303030 15%,#101010 100%);
        z-index: 2;
      }
      .icon {
        color:rgba(128,128,128,0.8);
      }
  - type: button
    name: up
    tap_action:
      action: key
      key: DPAD_UP
    hold_action:
      action: repeat
    icon: mdi:chevron-up
    styles: |-
      .icon {
        transform:rotate(-45deg);
        color: rgba(96,96,96,0.8);
      }
      button {
        border-radius: 0;
      }
  - type: button
    name: down
    tap_action:
      action: key
      key: DPAD_DOWN
    hold_action:
      action: repeat
    icon: mdi:chevron-down
    styles: |-
      .icon {
        transform:rotate(-45deg);
        color: rgba(96,96,96,0.8);
      }
      button {
        border-radius: 0;
      }
  - type: button
    name: left
    tap_action:
      action: key
      key: DPAD_LEFT
    hold_action:
      action: repeat
    icon: mdi:chevron-left
    styles: |-
      .icon {
        transform:rotate(-45deg);
        color: rgba(96,96,96,0.8);
      }
      button {
        border-radius: 0;
      }
  - type: button
    name: right
    tap_action:
      action: key
      key: DPAD_RIGHT
    hold_action:
      action: repeat
    icon: mdi:chevron-right
    styles: |-
      .icon {
        transform:rotate(-45deg);
        color: rgba(96,96,96,0.8);
      }
      button {
        border-radius: 0;
      }
styles: |-
  .button-pad {
    gap: 14px;
    border: 1px solid #444;
    border-radius: 50%;
    overflow: hidden;
    background: radial-gradient(circle at top left,#202020 15%,#303030 100%);
  }
  .button-pad .empty-button {
    width: 0;
    height: 0;
  }
  .button-pad remote-button {
    top: -40%;
    left: -40%;
    width: 180%;
    height: 180%;
    transform: rotate(45deg);
    overflow: hidden;
    border-radius: 0;
  }
custom_icons:
  - name: ok
    path: >-
      M7 7A2 2 0 005 9V15A2 2 0 007 17H9A2 2 0 0011 15V9A2 2 0 009 7H7M7
      9H9V15H7V9ZM13 7V17H15V13.7L17 17H19L16 12 19 7H17L15 10.3V7H13Z

I'm going to push a patch version which includes some CSS tweaks to better support this modification, and update the Google TV style dpad to use your method of modifying the dpad since it works better.

[foxjw]

That's awesome. I was hoping maybe it'd be helpful to someone out there, but I didn't expect it'd be incorporated into the project. Feeling a bit chuffed now. Thanks for cleaning up my sloppy inelegant coding, too!