đŸ“ș Lovelace: Roku Remote Card

That’s so strange. Do you have other custom cards that are working fine on mobile?

No that is the only one. I also tried to request the desktop site on the mobile device, thinking it could be linked to the way the mobile version of the website. But I get the same result.

If you ended up using HACS doesn’t the resource need to be:

resources:
  - type: module
    url: /community_plugin/roku-card/roku-card.js
2 Likes

Indeed it does, but they said it was working on desktop so I didn’t look at that. So is likely a caching issue on their desktop, not mobile. @altf4 try @jalsing suggestion

1 Like

It does not have to be, but if you use that HACS will bust the cache for you, and serve a gz version of the card

1 Like

That was it!
Thank you so much all for your help! Since I really just started I really appreciate the step by step help you provided @iantrich @jalsing @ludeeus

1 Like

1.0.2 Released

Breaking Changes:

  • dbltap_action has been renamed to double_tap_action
  • icon option inside the app object has been renamed to image
  • id option inside the app object has been renamed to app
  • url option inside the action object has been renamed to url_path

New Features:

  • app object now support tap/hold/double_tap actions

How do I get the Input Source wording and drop-down box like it shows in an image in a post on Jan 25, '19 2:38 PM? I am also having trouble getting the volume buttons to continue to send commands when I hold them down. Are there examples of each of these? The tap option for volume buttons work fine. It’s just when I hold the volume buttons down they don’t continually raise or lower the volume.

@iantrich or anyone I don’t get what I am doing wrong.

Here is where the roku-card is located according to the configurator:

/config/www/community/roku-card/roku-card.js

Here is what i have in my lovelace config:

resource:
url: /local/community/roku-card/roku-card.js

Here is what I get:
Custom element doesn’t exist: roku-card.

I’m assuming you installed it via HACS? If so, just revisit the page in HACS and it tells you what you need to enter and if using storage mode will even add it for you.

Thank you so much for the quick response! So it has 2 different paths and I tried both.

Near the top is has this

resources:
    url: /local/roku-card.js
    type: module

And at the bottom, it mentions the file path that the card is located, which the same I said in my previous post.
www/community/roku-card/roku-card.js

Then it says, when you add this to your lovelace config, add this:
url: /hacsfiles/roku-card/roku-card.js
type-module

But either way, I continue to get the red card.

At the bottom it says this

  - url: /community_plugin/roku-card/roku-card.js
    type: module

Weird, I don’t see that URL at all. But that didn’t work for me either. Same red card

I had this issue too and it was due to the syntax of the conditional card the remote was under. I guess it used to tolerate a dash before “type” ( - type: custom:roku-card ) but doesn’t any more. I took the dash out and it works now. My yaml looks like this now and is working:

      - type: conditional
        conditions:
          - entity: sensor.harmony_activity
            state: "Watch Roku"
        card:
          type: custom:roku-card
          entity: media_player.roku
          title: Roku
          theme: darkpurple
          power:
            service: remote.turn_on
            service_data:
              entity_id: remote.harmony_hub
              activity: 888888888
1 Like

I love this card. It is definitely my most used one. An idea for an added feature. Not sure if it is possible as I am not a developer, but a button that you hit to pop up a keyboard would be amazing. It would make searching you tube and such so much easier. Also one that would pop up a 10 key pad for entering pin codes on Roku.

Thanks so much!

How do use the themes? Setting theme: darkpurple does nothing for me.

provide your configuration and verify that it is a valid theme that works for your outside this card.

As far as I know, the integration does not support search

Any errors in your browser’s console?

Hi, below is my configuration. Are you saying I need to install a theme first and then select that theme inside my configuration? Sorry for noob questions. This is still relatively new to me.

    popup_cards:
      remote.roku_express:
        card:
          apps:
            - app: Netflix
              image: /local/images/netflix.png
              tap_action:
                action: call-service
                service: media_player.select_source
                service_data:
                  entity_id: media_player.roku_express
                  source: Netflix
            - app: Sling TV
              image: /local/images/sling.png
              tap_action:
                action: call-service
                service: media_player.select_source
                service_data:
                  entity_id: media_player.roku_express
                  source: Sling TV
            - app: YouTube
              image: /local/images/youtube.png
              tap_action:
                action: call-service
                service: media_player.select_source
                service_data:
                  entity_id: media_player.roku_express
                  source: YouTube
            - app: PBS KIDS
              image: /local/images/pbskids.png
              tap_action:
                action: call-service
                service: media_player.select_source
                service_data:
                  entity_id: media_player.roku_express
                  source: PBS KIDS
          entity: remote.roku_express
          theme: darkpurple
          tv: true
          type: 'custom:roku-card'
        title: Roku Express