add dpad_style

[zampierilucas]

Is your feature request related to a problem? Please describe. I would love to customize the dpad to more closely match the google_tv app controller, also it would be nice to have an option to make the clickable boxes bigger.

[Nerwyn]

This one right? This would definitely be nice to have, but it'll have to go in the backlog after the touchpad improvements I've been holding off on. I'll have to learn how to recreate it using JS/HTML/CSS.

[zampierilucas]

@Nerwyn yep that one, thank you for considering it :D

[Nerwyn]

@zampierilucas to clarify, did you want a new dpad that stylistically matched the Google TV one, or to be able to style the existing dpad? I was able to match the Google TV remote dpad using the existing style options.

type: custom:android-tv-card
rows:
  - - dpad
custom_actions:
  center:
    style:
      color: rgb(95, 98, 104)
      '--size': 200px
      background: rgb(60, 64, 67)
      border-radius: 200px
      margin: '-70px'
      padding: 70px
  up:
    style:
      color: rgb(95, 98, 104)
      z-index: 2
      top: 25px
      height: 90px
      width: 300px
  down:
    style:
      color: rgb(95, 98, 104)
      z-index: 2
      bottom: 25px
      height: 90px
      width: 300px
  left:
    style:
      color: rgb(95, 98, 104)
      z-index: 2
      left: 30px
      height: 170px
      width: 90px
  right:
    style:
      color: rgb(95, 98, 104)
      z-index: 2
      right: 30px
      height: 170px
      width: 90px

It does have some caveats, like the direction buttons being shifted from their original positions and resized such that their rows are empty and create a bit of a gap above and below the dpad. Also the direction buttons are rectangles with much larger hit boxes, but the areas between them still trigger center since the outer circle is a background on the center button and the up and down buttons are much larger than the left and right buttons to prevent the center button from being triggered erroneously.

Edit: improved the CSS to greatly reduce the upper and lower empty row gaps. Edit 2: made the up and down buttons wider to cover the center button.

[zampierilucas]

@Nerwyn that's pretty cool, thank you for sharing it, but what I'm most interested in, is having the bigger clickable buttons, especially for the arrows.

[Nerwyn]

They do have bigger clickable areas though, here are their flex boxes overlaid.

We can make them bigger so the "corners" don't trigger the center button and instead trigger the direction buttons by adjusted their heights and widths, but can only do so for top and bottom as increasing the height of the left and right buttons too much will increase the row height and push the top and bottom buttons further away.

I've made the widths of the up and down button bigger to prevent the center button from being triggered erroneously. The caveat now being that the buttons don't have curved and angled edges like the Google TV app remote, but they do have the larger clickable areas.

[zampierilucas]

@Nerwyn oh okay, I did not see that, I've been testing it for a day now, and it great, thank you, I'll add a comment here with the CSS for the round buttons, if I can figure it out.

Fell free to close this issue.