šŸ“ŗ Lovelace: Roku Remote Card

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)

If you go to your states tab do you have a remote for the media player? A remote is required.

No only for my Apple TV, not for my TV. Can I create a remote for my TV ?

Is this a Roku TV? If so, it should be created automatically as of 0.86

No its a normal Samsung TV.
Integrated with media_player component.

This card work with the Roku component, hence the name. It should work with anything that has a remote component, but I have not tested that. I believe someone made a more universal one based on my work, Iā€™ll see if I can find it.

1 Like
1 Like

Mhh tried it with tv-card. It still doesnt work, unfortunately. But my Samsung TV doesnt have a remote component so i think this is the problem. Thanks for your help ^^

Im using this card, Im trying to remove some of the buttons that appear. Ive tried going into tv-card.js and deleting the things that seem like the buttons I want to remove, but nothing happens. Any suggestions I could try?

All of the buttons are optional, canā€™t you just leave the ones you donā€™t need out of the config?

This is a fantastic remote and works better (and faster) than the ios app roku provides! Is there a way to have the power button toggle so that it displays color when the tv is on? My js is not great :smiley:

Thanks again for a great card!

Not until the python package supports it.

@iantrich I love this card and use it on my two Roku devices all the time. The one thing its missing is the keyboard. Every time I need to search and type I end up switching back over to the IOS Roku app. Any chance you feel like building out a keyboard as part of it?

Possibly, the integration says it supports ā€œliteralā€, which Iā€™m assuming corresponds to the APIā€™s ā€œLit_ā€ calls: https://developer.roku.com/docs/developer-program/discovery/external-control-api.md#keypress-key-values

But I didnā€™t think you could provide supplemental information, like the key input, in the remote commands within HA? And looking at the source of the Roku remote integration I do see how that would work:
https://github.com/home-assistant/home-assistant/blob/99c6c60beca47a5c506d99e25aa2bf9e841c2d87/homeassistant/components/roku/remote.py#L58
https://github.com/home-assistant/home-assistant/blob/99c6c60beca47a5c506d99e25aa2bf9e841c2d87/homeassistant/components/remote/services.yaml#L27

I sent a message to the dev who made added the Roku remote integration and weā€™ll see if he has any ideas as I find myself doing the same thing :slight_smile:

1 Like