Authentic-looking Roku remote

NYZack · December 1, 2022, 1:55pm

I found this image of a Roku remote online and customized it with my own applications (Prime Video, HBO, Xfinity). It should work for stand-alone Roku devices and Roku TVs. All of the buttons work using the code below, and I added three volume controls on the right:

The actual image I used for the remote is pasted below, and it lives in the www folder in your Home Assistant directory (in my Supervised Debian installation, this is /usr/share/hassio/homeassistant/www). It’s called rokunew.png (referenced by the code pasted below). If you want to use it, make sure you click on it and download the full-sized file so that the resolution will be decent, and the buttons in my code line up correctly.

Finally, for the list of apps on your Roku, you can find their names by navigating on your local network to
http://[ROKU IP ADDRESS]:8060/query/apps

For this dashboard I used the custom layout cards from GitHub - thomasloven/lovelace-layout-card: 🔹 Get more control over the placement of lovelace cards. This was only to have finer control of column width to place the volume controls next to the Roku remote, but you can use built-in Home Assistant layouts if you prefer, with minimal change.

In my case, my Roku is called “dining_room”, so one would have to change remote.dining_room and media_player.dining_room to the appropriate Roku names in one’s Home Assistant installation.

title: Remotes
views:
  - theme: Backend-selected
    title: Roku
    type: custom:layout-card
    layout_type: custom:grid-layout
    layout:
      grid-template-columns: 230px 180px
      grid-template-rows: auto
      grid-template-areas: |
        "main sidebar"
    path: roku
    subview: false
    badges: []
    cards:
      - type: picture-elements
        view_layout:
          grid-area: main
        elements:
          - type: service-button
            service: remote.send_command
            service_data:
              command: power
              entity_id: remote.dining_room
            style:
              top: 6%
              left: 50%
          - type: service-button
            service: remote.send_command
            service_data:
              command: back
              entity_id: remote.dining_room
            style:
              top: 14%
              left: 31%
          - type: service-button
            service: remote.send_command
            service_data:
              command: home
              entity_id: remote.dining_room
            style:
              top: 14%
              left: 70%
          - type: service-button
            service: remote.send_command
            service_data:
              command: up
              entity_id: remote.dining_room
            style:
              top: 22%
              left: 50%
          - type: service-button
            service: remote.send_command
            service_data:
              command: left
              entity_id: remote.dining_room
            style:
              top: 29%
              left: 24%
          - type: service-button
            service: remote.send_command
            service_data:
              command: select
              entity_id: remote.dining_room
            style:
              top: 29%
              left: 50%
          - type: service-button
            service: remote.send_command
            service_data:
              command: right
              entity_id: remote.dining_room
            style:
              top: 29%
              left: 76%
          - type: service-button
            service: remote.send_command
            service_data:
              command: down
              entity_id: remote.dining_room
            style:
              top: 39%
              left: 50%
          - type: service-button
            service: remote.send_command
            service_data:
              command: replay
              entity_id: remote.dining_room
            style:
              top: 46%
              left: 32%
          - type: service-button
            service: remote.send_command
            service_data:
              command: info
              entity_id: remote.dining_room
            style:
              top: 46%
              left: 70%
          - type: service-button
            service: remote.send_command
            service_data:
              command: reverse
              entity_id: remote.dining_room
            style:
              top: 53%
              left: 26%
          - type: service-button
            service: remote.send_command
            service_data:
              command: play
              entity_id: remote.dining_room
            style:
              top: 53%
              left: 50%
          - type: service-button
            service: remote.send_command
            service_data:
              command: forward
              entity_id: remote.dining_room
            style:
              top: 53%
              left: 75%
          - type: service-button
            service: media_player.select_source
            service_data:
              source: Netflix
              entity_id: media_player.dining_room
            style:
              top: 64%
              left: 50%
          - type: service-button
            service: media_player.select_source
            service_data:
              source: Prime Video
              entity_id: media_player.dining_room
            style:
              top: 70%
              left: 50%
          - type: service-button
            service: media_player.select_source
            service_data:
              source: HBO Max
              entity_id: media_player.dining_room
            style:
              top: 77%
              left: 50%
          - type: service-button
            service: media_player.select_source
            service_data:
              source: Xfinity Stream
              entity_id: media_player.dining_room
            style:
              top: 84%
              left: 50%
        image: https://[EXTERNAL HOME ASSISTANT WEB ADDRESS:PORT]/local/rokunew.png?v=1
      - type: custom:layout-card
        view_layout:
          grid-area: sidebar
        layout_type: custom:grid-layout
        layout:
          grid-template-columns: auto
          grid-template-rows: 1fr 1fr 1fr
        cards:
          - show_name: true
            show_icon: true
            type: button
            tap_action:
              action: call-service
              service: remote.send_command
              data:
                command: volume_up
              target:
                entity_id: remote.dining_room
            icon_height: 20px
            name: Louder
            icon: mdi:volume-plus
          - show_name: true
            show_icon: true
            type: button
            tap_action:
              action: call-service
              service: remote.send_command
              data:
                command: volume_down
              target:
                entity_id: remote.dining_room
            icon_height: 20px
            name: Quieter
            icon: mdi:volume-minus
          - show_name: true
            show_icon: true
            type: button
            tap_action:
              action: call-service
              service: remote.send_command
              data:
                command: volume_mute
              target:
                entity_id: remote.dining_room
            icon_height: 20px
            name: Mute
            icon: mdi:volume-mute

shirasp · December 1, 2022, 7:22pm

Thats really neat, good job! But I have to ask how you are able to contol your xfinity with this remote? Is it through Roku or the DVR/set top box?

NYZack · December 1, 2022, 7:26pm

Through the Xfinity Stream Roku app, which basically gives you full access to your Xfinity lineup.

shirasp · December 1, 2022, 7:30pm

Oh, okay so it is still through Roku, not the set top box or anything like that.
Thanks for sharing!

diedrichg · October 25, 2023, 10:00pm

@NYZack May I get some help, please. I must not be using your code correctly. I have the custom card installed. I create a new Custom Layout-Card and set it to Grid but from there I am unsure as to how to paste your code. I’ve tried the code editor for the card and just pasting but it doesn’t parse correctly. What do I need to do to make this work, please?

P.S. I cleaned up the remote and made some new buttons to put whatever services you wish. Here is my image. I can’t attach the Photoshop file but here is a link:

NYZack · October 26, 2023, 12:01pm

@diedrichg I’m not sure what you mean by “didn’t parse correctly”. Click “Edit dashboard” and then “Raw configuration editor” on the 3-dot menu on the upper right of the dashboard you’re editing. Then completely replace the code with my code. That should give you a dashboard with the remote.

If you want to embed it in another dashboard (rather than making its own) you can work from there. Make sure you make backups before doing this.

diedrichg · October 26, 2023, 12:22pm

Ohhhh! Raw Editor! Thanks, I got it working now. Too bad it has to be hard coded like that and can’t utilize the new card cut/paste options. Thanks for the reply.

NYZack · October 26, 2023, 12:36pm

@diedrichg Did you try? I suspect that after you paste the code in, you can copy the card using the UI, and cut and paste it.

diedrichg · October 26, 2023, 1:15pm

That was the first thing I tried once I finished setting up the code. I just now double-checked and I don’t see the card edit buttons and options.

NYZack · October 27, 2023, 4:29pm

@diedrichg If you take out the custom header stuff (right after views: everything between layout_type and layout, including the layout subentries), it’ll become a regular card you can cut and paste. It messes up the sizing, but you should be able to deal with that with some experimentation.

BlazinPaddlz · November 4, 2023, 2:37am

Fairly new to HA. For some reason when I copy/paste and replace the remote sources with my Roku tv entity name, all I see is this in the dashboard/view

NYZack · November 4, 2023, 11:40am

Did you place that rokunew.png file in your /usr/share/hassio/homeassistant/www folder?

(That’s the folder name in a supervised installation. It may be different in yours. Look for the www subdirectory in the same directory as your configuration.yaml file.)

drkunze · November 30, 2023, 6:25pm

I know this is old, but I’m struggling with the image. I have:

image: /homeassistant/www/rokunew.png

replacing:
https://[EXTERNAL HOME ASSISTANT WEB ADDRESS:PORT]/local/rokunew.png?v=1

in the your posted code, but I don’t get the image. I can see it exists in the /www folder via ssh. Can’t tell what I’ve got wrong.

thanks

NYZack · November 30, 2023, 6:40pm

Did you try a hard refresh of the webpage? (Shift-refresh on a Chrome browser.). Or try opening it in an incognito window and see if you can see it.

It may be a browser cache problem.

Alternatively, try changing “v=1” to “v=2” in the code.

drkunze · November 30, 2023, 7:36pm

Got it, thanks!

drkunze · November 30, 2023, 8:03pm

Thought I had it … wrong again.
I have image statement:
image: >-
http://192.168.4.130:8123/api/hassio_ingress/8LQeR1SxTUl7slivzAMk1NIyCzSK0BVlr8XA4jTxpVg/api/file?filename=/homeassistant/www/rokunew.png

It shows me the correct image on (Windows 10) Edge.
Does not show me image on the same computer in Opera or Chrome.
Does not show me image on Linux box in Firefox.
Note: in all cases I see the rest of the card – the volume buttons

NYZack · November 30, 2023, 8:19pm

It really sounds like a browser cache problem. You might consider clearing all the data for your Home Assistant website on your browser. Also change “v=1” to “v=2” (or another number) in the code (you don’t have to do anything to the actual image). I’m no expert on this stuff.

image969 · November 30, 2023, 8:33pm

Is there a way to make the search function work? So I can type in the movie I want on Home Assistant instead of using the arrow keys?

drkunze · November 30, 2023, 8:46pm

Pretty sure it’s not a browser cache problem since at least one of my browser tries was from a linux box that had never connected to my HA. Feel like it’s a path thing. Note that my image path
http://192.168.4.130:8123/api/hassio_ingress/8LQeR1SxTUl7slivzAMk1NIyCzSK0BVlr8XA4jTxpVg/api/file?filename=/homeassistant/www/rokunew.png
does not have your:
image: https://[EXTERNAL HOME ASSISTANT WEB ADDRESS:PORT]/local/rokunew.png?v=1

?v=1 at the end. If I try https:\, I get nothing. If I try adding the ?v=1 I get nothing (meaning no image in any browser)

NYZack · November 30, 2023, 8:46pm

My only goal was to mimic the physical Roku remote control, using the buttons documented in the Roku Home Assistant integration. Implementing a search function would be a whole other project.