Style custom launchers to match roku remote?

[sdholden28]

I've had to create custom launchers to be able to adjust volume on my particular TV which is connected to a Roku Ultra. How can I style these custom buttons to match the roku remote? I've tried sampling the purple and setting that as the color, but there appears to be some sort of glow or highlight involved as I can't match the color exactly no matter what I do. There's also a black border around my custom launcher button it seems. The buttons in question are the volume_minus and volume_plus buttons at the bottom of the remote in the screenshot below.

[PRProd]

@sdholden28 ~

Thanks for asking! There's a lot going on here, so I'm going to try to answer everything as thoroughly as possible. You probably already know some of these things, but maybe not all of them.

Solution Option 1:

The solution to what you are trying to do is likely as simple as this - an undocumented way to use app launchers / functions together with button overrides:

app_launch_7: function-volume-down
app_launch_8: function-volume-up
button_overrides:
  function-volume-down-button:
    service: media_player.volume_down
    target:
      entity_id: { YOUR ENTITY NAME HERE (media_player.upstairs_playroom_...) }
  function-volume-up-button:
    service: media_player.volume_up
    target:
      entity_id: { YOUR ENTITY NAME HERE (media_player.upstairs_playroom_...) }

Solution Option 2:

If the TV that your Roku Ultra is connected to supports CEC, then the function buttons should work without any additional YAML configuration editing. When CEC is enabled on the TV and on your Roku Ultra, the volume signals are passed through the HDMI cable. More info can be found here

Color Matching

You have likely noticed that when clicking on an app launcher button, the button appears to light up. Also, when a specific app is active on your Roku, the app button is also in a state where it appears to be lit up. This is how that is achieved:

• Button artwork and background colors are designed as best they can to match the brand's colors and style
• All of the buttons have either a regular state, or a 'lit' state. When the app is active, the 'lit' state takes affect.
• Buttons in their regular state have a CSS filter applied: grayscale(25%) brightness(58%);
  The thing you were trying to fight against was the CSS filter. I'm not sure if it would even be possible to overcome that when dealing with these colors. You got close though!

So why do the given solutions above work? Well... since there is really no 'active' or 'inactive' state when it comes to functions like volume, channel, etc. I did not apply a CSS filter is not applied to those buttons, so their true colors are always displayed.

I hope that all makes sense, and that it helps. If not, let me know!

-Doug

[sdholden28]

Perfect. Thanks so much for the reply and all the work. I've been using these cards with my nvidia shields for a while now and now I'm adding the Kid's rokus.

Solution 1 is perfect. I couldnt' figure out how to make the "stock" volume buttons show up, as I figured that was the easiest route. Never checked the app launcher list for that.

Solution 2 would certainly be easiest, but there are apparently known problems between roku and Samsung's Anynet+ (CEC) implementation. It appears to be a crapshoot as to what models work and don't, and even which features work within the same model. There's posts all over the interwebs. In my case power on/off works via CEC, but no volume or mute. No amount of settings changes on either side has produced any results. So I setup the home assistant samsung TV integration, which has working volume control via the media_player, and now I've got the volume buttons mapped to those commands. Hacky workaround, but seamless to the end-user.

I assumed I was fighting CSS and I'd never get there. I even went through the code to see if I could match the styling via card-mod or some other avenue. Luckily, I decided to stop and just ask before I went to far down the rabbit hole. :)

Thanks again! Screenshot of working setup posted below, just in case anyone else ends up here.

[PRProd]

Excellent! Glad to hear it!