📺 Lovelace: Roku Remote Card

Lovelace card to display a Roku remote. Works great with popup-card

resources:
  - url: /local/roku-card.js?v=0
    type: module

card config

      - type: custom:roku-card
        entity: media_player.bedroom_tv
        name: Bedroom TV
        theme: darkpurple
        tv: true
        power:
          service: switch.turn_on
          service_data:
            entity_id: switch.bedroom_tv_power
10 Likes

New version 0.0.4 released. Now supports new Roku Remote platform with TV volume/power controls, card-specific theming and a UI Editor


UI Editor

3 Likes

Thank you, this works great! Since you’ve added the capability to call services through the optional buttons, It was easy to map the power, volume, and mute buttons to control my entertainment center through my Harmony hubs.

1 Like

@antrich
hi
how can i do like you ?

I don’t follow. It’s a readily available card on GitHub for you to use

Having trouble getting this card to render in the Edge Browser.
Works on Chrome & on my phone, just not in Edge.

In the Edge Browser I get custom element doesn’t exist: roku-card.

  - type: custom:roku-card
    entity: media_player.roku_streaming_stick
    name: TV
    theme: darkpurple
    tv: true
    power:
      service: switch.turn_on
      service_data:
        entity_id: switch.tv_power

Edge doesn’t handle custom elements in general. I’m not going to introduce polyfills to support it, sorry.

No Problem, how about a note in the documentation stating such.
thanks

I am having problem with firefox but it is fine with chrome (Custom element doesn’t exist: roku-card). I have clear all the cookies, history but same problem with firefox. Any idea what would be the problem since it is working fine with Chrome? Thks

As stated in the repo, you need Firefox 67 which has not been released yet. It won’t work until Firefox supports dynamic imports

1 Like

Has anyone tried this with Firefox ESR? I’d love to use this, but no plan to move away from the ESR channel…

How about Safari on ios and/or the HA iOS app?

You can use it, just have to remove the parts about the UI editor

1 Like

Excellent, thanks!

So I’m having trouble with this, but I’m pretty new to custom lovelace cards, so it’s probably just me. I’ve placed the file roku-card.js (and roku-card-editor.js) in my config/www directory, and added the following to the raw config file:

resources:
  - url: /local/roku-card.js?v=0
    type: module

and then in the view I want:

  - badges: []
    cards:
      - entities:
          - entity: light.living_room_tv_high_hats
        title: Lights
        type: entities
      - type: 'custom:roku-card'
        entity: media_player.roku_4e7REDACTED
        remote: remote.roku_4e7REDACTED
        name: Roku
    title: Living Room

(I’ve also tried without the single quotes). I’ve tried restarting HA several times. Regardless, I get the message:

Custom element doesn't exist: roku-card.

{
  "type": "custom:roku-card",
  "entity": "media_player.roku_4e7REDACTED",
  "remote": "remote.roku_4e7REDACTED",
  "name": "Roku"
}

I’ve previously gotten another custom card to work, but looking there doesn’t seem to help…
Help?

Look for errors in the console inspector. Did you remove the code about importing the editor?

I did not remove any code. That might be it. Will check, thanks.

Having the exact same problem. Did you get this to work?

Great Job ! I don’t have a roku but I tried the card in my config, and it worked (I put another mediaplayer component instead)
This gives me ideas for the remote platform.
I’d love to see this work with my harmony hub remote, and use the dropdown list (with options) to chose the activity…

2 Likes

You can already roll your own media player remote.

I’m using one of the community custom Lovelace cards called, vertical-stack-in-card. It allows you to combine multiple cards, but unlike the default Vertical Stack card, the cards you combine don’t have card borders, so multiple cards can be combined and they look like a single card.

I’ve used Picture Glance cards, which will change the background of the card depending on which activity I have selected. If you like the dropdown menu method for selecting activities, you can use the default Input Select method, and add that Input Select as an entity on the card.

With my Picture Glance card, I decided to just use buttons to select activities instead of the Input Select method that I’d been using, because the buttons are quicker. To make the buttons function like selecting activities from the Harmony remote, I created switches for each activity.

#Play Xbox
        play_xbox:
          friendly_name: "Xbox One"
          value_template: "{{ is_state_attr('remote.tv_room', 'current_activity', 'Play Xbox') }}"
          turn_on:
            service: remote.turn_on
            data:
              entity_id: remote.tv_room
              activity: 'Play Xbox'
          turn_off:
            service: remote.turn_on
            data:
              entity_id: remote.tv_room
              activity: 'PowerOff'
          icon_template: >-
            {% if is_state_attr('remote.tv_room', 'current_activity', 'Play Xbox') %}
              mdi:xbox
            {% else %}
              mdi:xbox-controller-off
            {% endif %}

In addition to the activity buttons, I’ve also added a volume slider. This gives me easy access to all of the functionality I’m used to with the actual remote. I don’t have transport controls on the card because it’s easier to just play/pause from the Harmony remote itself, but you could easily add buttons for this if you’d like.

I also added a button that will open the standard media player for the Harmony hubs that are created by default for each hub. This way if I need some of the lesser used commands, like switching the HDMI input on my receiver, I can still do that. If I switched inputs more often, Id just create buttons for this as well.

This is what the Lovelace code looks like. It’s two picture glance cards that look like a single card thanks to the vertical-stack-in-card, card.

cards:
  - entities:
      - switch.watch_tv
      - switch.watch_roku
      - switch.watch_a_movie
      - switch.listen_to_music
      - switch.listen_to_volumio
      - switch.play_xbox
    entity: sensor.tv_room
    state_image:
      Listen to Music: /local/images/NetMusic.jpg
      Listen to Volumio: /local/images/Volumio.jpg
      Play Xbox: /local/images/Xbox.jpg
      PowerOff: /local/images/Off.jpg
      Watch Roku: /local/images/Roku.png
      Watch TV: /local/images/LGTV.jpg
      Watch a Movie: /local/images/SonyBDP.jpg
    type: picture-glance
  - cards:
      - entities:
          - switch.tv_room_power
          - media_player.onkyo_tx_nr626
          - input_number.harmony_my_volume
        image: /local/images/OnkyoTX-NR626.jpg
        type: picture-glance
      - entities:
          - entity: sensor.jeff_s_tv_time
        show_header_toggle: false
        title: Jeff's Harmony
        type: entities
    type: vertical-stack
type: 'custom:vertical-stack-in-card'

Edit: Please don’t think that I’m trying to undermine the usefulness of the Roku card, because I love it and I’ve been using it since January. I’m merely pointing out how I’ve done something similar using Lovelace to get the same sort of functionality from my Harmony hubs.

Hey guys,

Installing roku-cards worked pretty fine.
But I only receive a white card just with the title… nothing more.

Configuration:

  - badges: []
popup_cards:
  media_player.spielzimmer_tv:
    title: Spielzimmer
    card:
      type: custom:roku-card
      entity: media_player.spielzimmer_tv
      name: Spielzimmer TV
      tv: true
      power:
        service: broadlink.send
        service_data:
          host: 192.168.2.63
          packet: 'JgDSAJaRFTUUNRU1FBAVEBUQFBEUEBU1FDUVNRQQFRAVEBQRFBAVEBU0FRAVEBQRFBEUEBUQFDUVEBU0FTUUNRU1FDUVNRQABfyWkhQ1FTQVNRQRFBAVEBUQFBEUNRU0FTUUERQQFRAVEBQRFBAVNRQRFBAVEBQRFBAVEBU1FBAVNRQ1FTUUNRU0FTUUAAX8lpIUNRQ2EzYUERQRExEUERQREzYUNhM2FBEUERMRFBEUERQREzYUERMSExEUERQRExITNhMSEzYUNRQ2FDUUNhQ1FAANBQAAAAAAAA=='
      volume_up:
        service: broadlink.send
        service_data:
          host: 192.168.2.63
          packet: 'JgCQAAABJ5IVEBQ2FBAVEBQ2FBAVNRQ1FjQUERQyGDUUERQ1FDYUEBUQFTUUEBUQFRAUERQQFRAVNRQQFTUUNhU0FTUUNRU1FAAE9AABKJIUEBU1FBEVDxY0FBEUNRU1FTQVEBQ2FDUVEBU0FTUVEBQQFTUUERQQFg8VEBQRFBAVNRQRFDUVNRQ1FjQUNRU1FAANBQAAAAAAAAAA'
      volume_down:
        service: broadlink.send
        service_data:
          host: 192.168.2.63
          packet: 'JgCQAAABJpMTEhM3EhMSEhM3EhMSNxM3EjcTEhI4EjcSExI3EzcSExI3EzcSExISExISExISExITEhITEjcTNxI3EzcSNxM1FAAE9gABJpQSExI3ExISExI3ExISNxM3EjcTEhM3EjcTEhM3EjcTEhI3EzcSExITEhITEhITEhITEhMSEjcTNxI4EjcTNxI3EwANBQAAAAAAAAAA'
      volume_mute:
        service: broadlink.send
        service_data:
          host: 192.168.2.63
          packet: 'JgCQAAABJpMTEhM3EhMSEhM3EhMSNxM3EjcTEhI4EjcSExI3EzcSExI3EzcSExISExISExISExITEhITEjcTNxI3EzcSNxM1FAAE9gABJpQSExI3ExISExI3ExISNxM3EjcTEhM3EjcTEhM3EjcTEhI3EzcSExITEhITEhITEhITEhMSEjcTNxI4EjcTNxI3EwANBQAAAAAAAAAA'

Receiving this Error in Browser (Chrome and Firefox):

Uncaught (in promise) TypeError: Cannot read property ‘indexOf’ of undefined
at HTMLElement.render (roku-card.js?v=0:55)
at HTMLElement.update (app.a259a502.js:2)
at HTMLElement.performUpdate (app.a259a502.js:2)
at HTMLElement._enqueueUpdate (app.a259a502.js:2)