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
New version 0.0.4 released. Now supports new Roku Remote platform with TV volume/power controls, card-specific theming and a UI Editor
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.
@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_powerEdge 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
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
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…
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)