Row/Column Styling and Card-Mod Style Style Options

[houser42]

Just wondering if this excellent card by any chance could be used to create a vertical stack with buttons in one column to the side?

The pic below is something I did in another defunct software many years ago. I would like to recreate the stack circled in green on the right if possible. It is all volume controls with repeating buttons as can be done in this card. This should be next to the swipe gesture area already created with this card. Any way to do this? Maybe the touchpad could at least have a vertical stack of small buttons on the side?

[Nerwyn]

While overlay buttons on the touchpad isn't something I'm going to add separately, you can do it with touchpad_style

type: custom:android-tv-card
rows:
  - - touchpad
    - 
    -
    -
    -
    -
    -
    - - volume_buttons
      - play_pause
      - home
      - fast_forward
      - previous
touchpad_style:
  position: absolute
  height: 500px

[houser42]

Ok, thanks! Will try that!

[houser42]

Tried that and it kinda works but gets messy. Will try some more.. Is it also possible to have a different entity: media_player.xxx for the volume controls as in this case the player is Kodi or Apple TV but the volume controls are for the AVR?

I'll just also leave a wish for the future: programmable overlay buttons on the touchpad that follows the theme. Ah well. One can dream ;) Happy user here ;) Be safe, be well.

[Nerwyn]

For the slider, just set slider_id to the other media player. For buttons, create custom actions for volume_up, volume_down, and volume_mute and call the correct services.

[Nerwyn]

Here's an updated config for making the touchpad the entire background:

type: custom:android-tv-card
rows:
  - - touchpad
    - - null
      - null
      - null
      - null
      - null
      - null
      - home
      - null
      - null
      - null
      - null
      - back
    - null
    - null
    - null
    - null
    - null
    - null
    - null
    - null
    - null
    - null
    - null
    - null
    - null
    - null
    - null
    - null
    - null
    - null
    - null
    - null
    - null
    - - volume_buttons
      - play_pause
      - home
      - fast_forward
      - previous
touchpad_style:
  position: absolute
  height: 100vh
  width: 100vw
  top: 0px
  bottom: 0px
  left: 0px
  right: 0px
  border-radius: 0px

[Nerwyn]

Actionable improvements:

• [x] Add IDs to all rows and columns so they can be individually styled using card_mod.
• [ ] See if it's possible to accept and apply an entire CSS style from the user instead of individual values, which can end up entirely replacing the old CSS system.

[Nerwyn]

@houser42 In the latest alpha I've added IDs to rows and columns so they can be individually styled using card-mod. This should allow you to align columns to the left or right correctly.

type: custom:android-tv-card
rows:
  - - touchpad
    - - back
    - - volume_buttons
      - play_pause
      - home
      - fast_forward
      - previous
touchpad_style:
  position: absolute
  height: 100%
  width: 100%
  top: 0px
  bottom: 0px
  left: 0px
  right: 0px
  border-radius: 0px
card_mod:
  style: |
    #column-1 {
      align-items: flex-start !important;
    }
    #column-2 {
      align-items: flex-end !important;
    }

I also want to look into making it so that full CSS styles can be included in this card without card-mod so that they can be applied before render, but that will have to wait for another time.

[Nerwyn]

And here's the closest I could get to your old remote:

type: custom:android-tv-card
rows:
  - - touchpad
    - - null
      - home
      - play_pause
    - - menu
    - - n7
      - n6
      - n5
      - n4
      - n3
      - volume_mute
      - volume_up
      - volume_down
touchpad_style:
  position: absolute
  height: 100%
  width: 100%
  top: 0px
  bottom: 0px
  left: 0px
  right: 0px
  border-radius: 0px
  background-image: >-
    url('https://hyken.com/wp-content/uploads/2023/01/Apple-TV-Logo-2019-present.png')
  background-size: 64px
  background-repeat: no-repeat
  background-position: center
  opacity: 1
card_mod:
  style: |
    #row-1 {
      align-items: stretch !important;
    }
    #column-1 {
      align-items: flex-start !important;
      justify-content: space-between !important;
    }
    #column-2 {
      justify-content: flex-end !important;
    }
    #column-3 {
      align-items: flex-end !important;
      justify-content: flex-end !important;
    }

I think this meets your original criteria, but I'm going to delay releasing it outside of alpha/beta or closing this card until I figure out if I can make it possible to apply the row/column styles without card-mod. If I can it may be worthy of a major release as it could change how styles are defined entirely. I may also want to look into porting over labels from service-call-tile-feature as well.

[houser42]

Hello, You are doing great work for sure! I have gone a slightly different path for now that I am very happy with. Basically just tiled transparent iOS style themes that maybe look a little like Apples Home app but with too many small buttons ;) This type of thing in img below. My issue has been that I need to put the calibrated volume presets so that users don't accidentally tap them and end up with dangerously loud levels in a serious Home Theater. The convenience of quick set-to-a-calibrated- level but with out the risk of hurting yourself with loud audio ;) The row on the side was a little too easy to tap by accident so for now they are in a row at the bottom. Ah well. Always looking for new ideas, but as always your work has been vital to get this far with gesture based stuff. Thanks again!

[Nerwyn]

@houser42 I see you're also watching 3 Body Problem. I've got a couple of episodes left. The boat raid was HORRIFYING. Also unrelated, but I lost my job a couple of months ago and have been having a not great go at finding a new one. If you know of anyone looking for remote backend/fullstack Python/TypeScript software engineers I'm on the market.

[houser42]

Sorry to hear about your job but I am sure things will work out for you, seeing the quality of work you do. I have no coding connections anymore as I am retired but will keep an eye open.

P.S. No more spoilers on 3 body problem please ;) D.S

[Nerwyn]

It doesn't look like I can let users provide entire style sheets so row/column unique IDs with card-mod is the best I can do. Since I can recreate your original remote using row/style unique IDs and card-mod, I'm going to close this once the next release is out.

Also, I got a job offer last week! Looks like things did work out.

[Nerwyn]

Because this release has a bunch of small feature requests I've bumped the version up to 3.6.0 and put a beta out. Let me know if it looks good to you!

[houser42]

All good here as far as I can tell from a brief test after installing the latest 3.6.0 beta 001. The card-mod solutions works great so no worries there. Happy here..

Congrats to the new gig. May more good things come your way ;) A quick "nice to have" question before you wrap this thread up: Can the HA app on Mac and Win do swipe gestures at all? It would certainly be very nice but is not vital.

[Nerwyn]

You should be able to simulate swipe gestures on the touchpad by clicking and dragging on it with the mouse. It works for me on Windows Brave and Firefox (just checked on the latest beta, too). A series of refactors I did a few weeks ago made it so that mouse and touch events use the same underlying handler functions.

[houser42]

I see! I was not aware of that change! Yes that works now on Chrome and Firefox on Mac as well as on the HA app on Mac. Will check and test other platforms later. Excellent again. Many thanks!

[houser42]

So yes, that works and is more than acceptable on that platform. Just curious if we can simulate the same with something like a two-finger swipe rather than click and drag on the HA app? Is it worth experimenting with in your opinion?

[Nerwyn]

Unfortunately two finger swipes are not possible with mice. Multi touch actions rely on TouchEvent targetTouches, which are not available for mice. You'd also need two pointers on a desktop, which isn't possible at the operating system level. If you use a touch screen on a desktop browser you can use multi touch events.

What we could do is use modifier keys, but that should go in a different card and I won't look into it unless you make a separate feature request for it 😁.

[houser42]

I understand. Thanks for your clarification of possibilities. No biggie, was really just checking if it was possible by some reasonable tweak as some multitouch actions like two-touch swipe for example are possible with a touchpad on a laptop. Thanks again!

[Nerwyn]

Row and column IDs added in 3.6.0.