📺 Lovelace: Roku Remote Card

Roll back to 1.1.0. 1.1.2 is for next HA release. I rushed it out and get it to be backwards compatible in next release

1 Like

Without text:
Main:


When FireTV pressed (switches to HDMI1 and converts all buttons to FireTV, to go back I press the Roku button):

3 Likes

Can you please share the config for this?

1 Like

any plans to share your config? Thanks!

yes will do for sure once I get some free time.

Awesome! Thanks!

So there is code in a few places:

Lovelace:
remote_bedroom.yaml (main view):

###################################################################################################
## ROKU CONTROLLER - HEADER - ROKU LOGO
###################################################################################################
        type: custom:layout-card
        layout: vertical
        min_columns: 1
        max_columns: 1
        max_width: 99%
        cards:
          - type: vertical-stack
            cards:
              - type: custom:decluttering-card
                template: button_image
                variables:
                  - image: roku_logo.png
                  - border_on: rgb(102,45,145)
##-------------------------------------------------------------------------------------------------
## ROKU - ROW 1 
##-------------------------------------------------------------------------------------------------
              - type: horizontal-stack
                cards:
                - type: custom:decluttering-card
                  template: button_image
                  variables:
                    - name: Youtube
                    - image: tv_youtube2.png
                    - border_on: rgb(102,45,145)                   # Shield Border "on" color green
                    - border_active: rgb(255,0,0)                 # Border "active" color - red
                    - tap_action:
                        action: call-service
                        service: media_player.select_source
                        service_data:
                            entity_id: media_player.55_tcl_roku_tv
                            source: 837
                - type: custom:decluttering-card
                  template: button_image
                  variables:
                    - name: Netflix
                    - image: netflix.png
                    - border_on: rgb(102,45,145)                   # Shield Border "on" color green
                    - border_active: rgb(255,0,0)                 # Border "active" color - red
                    - tap_action:
                        action: call-service
                        service: media_player.select_source
                        service_data:
                            entity_id: media_player.55_tcl_roku_tv
                            source: 12
                - type: custom:decluttering-card
                  template: button_image
                  variables:
                    - name: Emby
                    - image: emby.png
                    - border_on: rgb(102,45,145)                   # Shield Border "on" color green
                    - border_active: rgb(255,0,0)                 # Border "active" color - red
                    - tap_action:
                        action: call-service
                        service: media_player.select_source
                        service_data:
                            entity_id: media_player.55_tcl_roku_tv
                            source: 44191
##-------------------------------------------------------------------------------------------------
## ROKU - ROW 2 
##-------------------------------------------------------------------------------------------------
              - type: horizontal-stack
                cards:
                - type: custom:decluttering-card
                  template: button_image
                  variables:
                    - name: DisneyPlus
                    - image: disney.png
                    - border_on: rgb(102,45,145)                   # Shield Border "on" color green
                    - border_active: rgb(255,0,0)                 # Border "active" color - red
                    - tap_action:
                        action: call-service
                        service: media_player.select_source
                        service_data:
                            entity_id: media_player.55_tcl_roku_tv
                            source: 291097
                - type: custom:decluttering-card
                  template: button_firetv
                  variables:
                    - name: HDMI1
                    - image: hdmi1.png
                    - border_on: rgb(102,45,145) # Shield Border "on" color green
                    - border_active: rgb(255,0,0) 
                - type: custom:decluttering-card
                  template: button_image
                  variables:
                    - name: SPOTIFY
                    - image: spotify.png
                    - border_on: rgb(102,45,145)                   # Shield Border "on" color green
                    - tap_action:
                        action: call-service
                        service: media_player.select_source
                        service_data:
                            entity_id: media_player.55_tcl_roku_tv
                            source: 19977
##-------------------------------------------------------------------------------------------------
## ROKU - ROW 3 
##-------------------------------------------------------------------------------------------------
              - type: horizontal-stack
                cards:
                - type: custom:decluttering-card
                  template: button_roku_power
                  variables:
                    - name: ROKU
                    - icon: login
                    - border_on: rgb(102,45,145) # Shield Border "on" color green
                    - border_active: rgb(255,0,0) 
                    - tap_action:
                        action: call-service
                        service: remote.send_command
                        service_data:
                          entity_id: remote.55_tcl_roku_tv
                          command:
                            - power
                - type: custom:decluttering-card
                  template: button_icon
                  variables:
                    - icon: arrow-up-bold
                    - border_on: rgb(102,45,145)                   # Shield Border "on" color green
                    - tap_action:
                        action: call-service
                        service: remote.send_command
                        service_data:
                          entity_id: remote.55_tcl_roku_tv
                          command:
                            - up
                - type: custom:decluttering-card
                  template: button_icon
                  variables:
                    - icon: information
                    - border_on: rgb(102,45,145)                   # Shield Border "on" color green
                    - tap_action:
                        action: call-service
                        service: remote.send_command
                        service_data:
                          entity_id: remote.55_tcl_roku_tv
                          command:
                            - info
##-------------------------------------------------------------------------------------------------
## ROKU - ROW 4
##-------------------------------------------------------------------------------------------------
              - type: horizontal-stack
                cards:
                - type: custom:decluttering-card
                  template: button_icon
                  variables:
                    - icon: arrow-left-bold
                    - border_on: rgb(102,45,145)                   # Shield Border "on" color green
                    - tap_action:
                        action: call-service
                        service: remote.send_command
                        service_data:
                          entity_id: remote.55_tcl_roku_tv
                          command:
                            - left
                - type: custom:decluttering-card
                  template: button_icon
                  variables:
                    - icon: camera-control
                    - border_on: rgb(102,45,145)                   # Shield Border "on" color green
                    - tap_action:
                        action: call-service
                        service: remote.send_command
                        service_data:
                          entity_id: remote.55_tcl_roku_tv
                          command:
                            - select
                - type: custom:decluttering-card
                  template: button_icon
                  variables:
                    - icon: arrow-right-bold
                    - border_on: rgb(102,45,145)                   # Shield Border "on" color green
                    - tap_action:
                        action: call-service
                        service: remote.send_command
                        service_data:
                          entity_id: remote.55_tcl_roku_tv
                          command:
                            - right
##-------------------------------------------------------------------------------------------------
## ROKU - ROW 5
##-------------------------------------------------------------------------------------------------
              - type: horizontal-stack
                cards:
                - type: custom:decluttering-card
                  template: button_icon
                  variables:
                    - icon: backburger
                    - border_on: rgb(102,45,145)                   # Shield Border "on" color green
                    - tap_action:
                        action: call-service
                        service: remote.send_command
                        service_data:
                          entity_id: remote.55_tcl_roku_tv
                          command:
                            - back
                - type: custom:decluttering-card
                  template: button_icon
                  variables:                    
                    - icon: arrow-down-bold
                    - border_on: rgb(102,45,145)                   # Shield Border "on" color green
                    - tap_action:
                        action: call-service
                        service: remote.send_command
                        service_data:
                          entity_id: remote.55_tcl_roku_tv
                          command:
                            - down
                - type: custom:decluttering-card
                  template: button_icon
                  variables:
                    - icon: home-circle
                    - border_on: rgb(102,45,145)                   # Shield Border "on" color green
                    - tap_action:
                        action: call-service
                        service: remote.send_command
                        service_data:
                          entity_id: remote.55_tcl_roku_tv
                          command:
                            - home
##-------------------------------------------------------------------------------------------------
## ROKU - ROW 6
##-------------------------------------------------------------------------------------------------
              - type: horizontal-stack
                cards:
                - type: custom:decluttering-card
                  template: button_icon
                  variables:
                    - icon: play-pause
                    - border_on: rgb(102,45,145)                   # Shield Border "on" color green
                    - tap_action:
                        action: call-service
                        service: remote.send_command
                        service_data:
                          entity_id: remote.55_tcl_roku_tv
                          command:
                            - play
                - type: custom:decluttering-card
                  template: button_icon
                  variables:
                    - icon: bell
                    - border_on: rgb(102,45,145)                   # Shield Border "on" color green
                    - tap_action:
                        action: call-service
                        service: script.turn_on
                        service_data:
                          entity_id: script.roku_tv_audio_on

                - type: custom:decluttering-card
                  template: button_icon
                  variables:
                    - icon: bell-off
                    - border_on: rgb(102,45,145)                   # Shield Border "on" color green
                    - tap_action:
                        action: call-service
                        service: script.turn_on
                        service_data:
                          entity_id: script.roku_tv_audio_off
##-------------------------------------------------------------------------------------------------
## ROKU - ROW 7
##-------------------------------------------------------------------------------------------------
              - type: horizontal-stack
                cards:
                - type: custom:decluttering-card
                  template: button_icon
                  variables:
                    - icon: volume-mute
                    - border_on: rgb(102,45,145)                   # Shield Border "on" color green
                    - tap_action:
                        action: call-service
                        service: remote.send_command
                        service_data:
                          entity_id: remote.55_tcl_roku_tv
                          command:
                            - volume_mute                
                - type: custom:decluttering-card
                  template: button_icon
                  variables:
                    - icon: volume-low
                    - border_on: rgb(102,45,145)                   # Shield Border "on" color green
                    - tap_action:
                        action: call-service
                        service: remote.send_command
                        service_data:
                          entity_id: remote.55_tcl_roku_tv
                          command:
                            - volume_down
                - type: custom:decluttering-card
                  template: button_icon
                  variables:
                    - icon: volume-high
                    - border_on: rgb(102,45,145)                   # Shield Border "on" color green
                    - tap_action:
                        action: call-service
                        service: remote.send_command
                        service_data:
                          entity_id: remote.55_tcl_roku_tv
                          command:
                            - volume_up

remote_bedroom1.yaml (firetv view):

###################################################################################################
## FIRETV CONTROLLER - HEADER - FIRETV LOGO
###################################################################################################
        type: custom:layout-card
        layout: vertical
        min_columns: 1
        max_columns: 1
        max_width: 99%
        cards:
          - type: vertical-stack
            cards:
              - type: custom:decluttering-card
                template: button_image
                variables:
                  - image: firetv_logo.png
                  - border_on: rgb(240,79,35)
##-------------------------------------------------------------------------------------------------
## FIRETV - ROW 1 
##-------------------------------------------------------------------------------------------------
              - type: horizontal-stack
                cards:
                - type: custom:decluttering-card
                  template: button_image
                  variables:
                    - name: Youtube
                    - image: tv_youtube2.png
                    - border_on: rgb(240,79,35)                   # Shield Border "on" color green
                    - border_active: rgb(255,0,0)                 # Border "active" color - red
                    - tap_action:
                        action: call-service
                        service: androidtv.adb_command
                        service_data:
                          entity_id: media_player.fire_tv
                          command: "am start -a android.intent.action.VIEW -d -n com.google.android.youtube.tv/com.google.android.apps.youtube.tv.activity.ShellActivity"
                          
                - type: custom:decluttering-card
                  template: button_image
                  variables:
                    - name: Netflix
                    - image: netflix.png
                    - border_on: rgb(240,79,35)                   # Shield Border "on" color green
                    - border_active: rgb(255,0,0)                 # Border "active" color - red
                    - tap_action:
                        action: call-service
                        service: androidtv.adb_command
                        service_data:
                          entity_id: media_player.fire_tv
                          command: "am start -a android.intent.action.VIEW -d -n com.netflix.ninja/.MainActivity"
                - type: custom:decluttering-card
                  template: button_image
                  variables:
                    - name: Emby
                    - image: emby.png
                    - border_on: rgb(240,79,35)                   # Shield Border "on" color green
                    - border_active: rgb(255,0,0)                 # Border "active" color - red
                    - tap_action:
                        action: call-service
                        service: androidtv.adb_command
                        service_data:
                          entity_id: media_player.fire_tv
                          command: "am start -a android.intent.action.VIEW -d -n tv.emby.embyatv/.startup.StartupActivity"
##-------------------------------------------------------------------------------------------------
## FIRETV - ROW 2 
##-------------------------------------------------------------------------------------------------
              - type: horizontal-stack
                cards:
                - type: custom:decluttering-card
                  template: button_image
                  variables:
                    - name: DisneyPlus
                    - image: disney.png
                    - border_on: rgb(240,79,35)                   # Shield Border "on" color green
                    - border_active: rgb(255,0,0)                 # Border "active" color - red
                    - tap_action:
                        action: call-service
                        service: androidtv.adb_command
                        service_data:
                          entity_id: media_player.fire_tv
                          command: "am start -a android.intent.action.VIEW -d -n com.disney.disneyplus/com.bamtechmedia.dominguez.main.MainActivity"
                - type: custom:decluttering-card
                  template: button_image
                  variables:
                    - name: IPTV
                    - image: iptv.png
                    - border_on: rgb(240,79,35)                   # Shield Border "on" color green
                    - tap_action:
                        action: call-service
                        service: androidtv.adb_command
                        service_data:
                          entity_id: media_player.fire_tv
                          command: "am start -a android.intent.action.VIEW -d -n com.nst.iptvsmarterstvbox/.view.activity.SplashActivity"
                - type: custom:decluttering-card
                  template: button_image
                  variables:
                    - name: SPOTIFY
                    - image: spotify.png
                    - border_on: rgb(240,79,35)                   # Shield Border "on" color green
                    - tap_action:
                        action: call-service
                        service: androidtv.adb_command
                        service_data:
                          entity_id: media_player.fire_tv
                          command: "am start -a android.intent.action.VIEW -d -n com.spotify.tv.android/.SpotifyTVActivity"
##-------------------------------------------------------------------------------------------------
## FIRETV - ROW 3
##-------------------------------------------------------------------------------------------------
              - type: horizontal-stack
                cards:
                - type: custom:decluttering-card
                  template: button_roku
                  variables:
                    - name: ROKU
                    - icon: login
                    - border_on: rgb(240,79,35) # Shield Border "on" color green
                    - border_active: rgb(255,0,0) 
                - type: custom:decluttering-card
                  template: button_icon
                  variables:
                    - icon: arrow-up-bold
                    - border_on: rgb(240,79,35)                   # Shield Border "on" color green
                    - tap_action:
                        action: call-service
                        service: androidtv.adb_command
                        service_data:
                          entity_id: media_player.fire_tv
                          command: UP
                - type: custom:decluttering-card
                  template: button_roku_power
                  variables:
                    - name: ROKU
                    - icon: login
                    - border_on: rgb(240,79,35) # Shield Border "on" color green
                    - border_active: rgb(255,0,0) 
                    - tap_action:
                        action: call-service
                        service: remote.send_command
                        service_data:
                          entity_id: remote.55_tcl_roku_tv
                          command:
                            - power
##-------------------------------------------------------------------------------------------------
## FIRETV - ROW 4
##-------------------------------------------------------------------------------------------------
              - type: horizontal-stack
                cards:
                - type: custom:decluttering-card
                  template: button_icon
                  variables:
                    - icon: arrow-left-bold
                    - border_on: rgb(240,79,35)                   # Shield Border "on" color green
                    - tap_action:
                        action: call-service
                        service: androidtv.adb_command
                        service_data:
                          entity_id: media_player.fire_tv
                          command: LEFT
                - type: custom:decluttering-card
                  template: button_icon
                  variables:
                    - icon: camera-control
                    - border_on: rgb(240,79,35)                   # Shield Border "on" color green
                    - tap_action:
                        action: call-service
                        service: androidtv.adb_command
                        service_data:
                          entity_id: media_player.fire_tv
                          command: ENTER
                - type: custom:decluttering-card
                  template: button_icon
                  variables:
                    - icon: arrow-right-bold
                    - border_on: rgb(240,79,35)                   # Shield Border "on" color green
                    - tap_action:
                        action: call-service
                        service: androidtv.adb_command
                        service_data:
                          entity_id: media_player.fire_tv
                          command: RIGHT
##-------------------------------------------------------------------------------------------------
## FIRETV - ROW 5
##-------------------------------------------------------------------------------------------------
              - type: horizontal-stack
                cards:
                - type: custom:decluttering-card
                  template: button_icon
                  variables:
                    - icon: backburger
                    - border_on: rgb(240,79,35)                   # Shield Border "on" color green
                    - tap_action:
                        action: call-service
                        service: androidtv.adb_command
                        service_data:
                          entity_id: media_player.fire_tv
                          command: BACK
                - type: custom:decluttering-card
                  template: button_icon
                  variables:
                    - icon: arrow-down-bold
                    - border_on: rgb(240,79,35)                   # Shield Border "on" color green
                    - tap_action:
                        action: call-service
                        service: androidtv.adb_command
                        service_data:
                          entity_id: media_player.fire_tv
                          command: DOWN
                - type: custom:decluttering-card
                  template: button_icon
                  variables:
                    - icon: home-circle
                    - border_on: rgb(240,79,35)                   # Shield Border "on" color green
                    - tap_action:
                        action: call-service
                        service: androidtv.adb_command
                        service_data:
                          entity_id: media_player.fire_tv
                          command: HOME
##-------------------------------------------------------------------------------------------------
## FIRETV - ROW 6
##-------------------------------------------------------------------------------------------------
              - type: horizontal-stack
                cards:
                - type: custom:decluttering-card
                  template: button_icon
                  variables:
                    - icon: play
                    - border_on: rgb(240,79,35)                   # Shield Border "on" color green
                    - tap_action:
                        action: call-service
                        service: androidtv.adb_command
                        service_data:
                          entity_id: media_player.fire_tv
                          command: "input keyevent 126"
                - type: custom:decluttering-card
                  template: button_icon
                  variables:
                    - icon: pause
                    - border_on: rgb(240,79,35)                   # Shield Border "on" color green
                    - tap_action:
                        action: call-service
                        service: androidtv.adb_command
                        service_data:
                          entity_id: media_player.fire_tv
                          command: "input keyevent 127"

                - type: custom:decluttering-card
                  template: button_icon
                  variables:
                    - icon: stop
                    - border_on: rgb(240,79,35)                   # Shield Border "on" color green
                    - tap_action:
                        action: call-service
                        service: androidtv.adb_command
                        service_data:
                          entity_id: media_player.fire_tv
                          command: "input keyevent 86"
##-------------------------------------------------------------------------------------------------
## FIRETV - ROW 7
##-------------------------------------------------------------------------------------------------
              - type: horizontal-stack
                cards:
                - type: custom:decluttering-card
                  template: button_icon
                  variables:
                    - icon: volume-mute
                    - border_on: rgb(240,79,35)                   # Shield Border "on" color green
                    - tap_action:
                        action: call-service
                        service: androidtv.adb_command
                        service_data:
                          entity_id: media_player.fire_tv
                          command: "MUTE"
                - type: custom:decluttering-card
                  template: button_icon
                  variables:
                    - icon: volume-low
                    - border_on: rgb(240,79,35)                   # Shield Border "on" color green
                    - tap_action:
                        action: call-service
                        service: androidtv.adb_command
                        service_data:
                          entity_id: media_player.fire_tv
                          command: "VOLUME_DOWN"
                - type: custom:decluttering-card
                  template: button_icon
                  variables:
                    - icon: volume-high
                    - border_on: rgb(240,79,35)                   # Shield Border "on" color green
                    - tap_action:
                        action: call-service
                        service: androidtv.adb_command
                        service_data:
                          entity_id: media_player.fire_tv
                          command: "VOLUME_UP"
1 Like

scripts.yaml:

 bedroom_firetv:
    alias: "Bedroom FireTV"
    sequence:
    - service: input_select.set_options
      data:
        entity_id: input_select.remote
        options: "HDMI1"
    - service: media_player.select_source
      data:
        entity_id: media_player.55_tcl_roku_tv
        source: tvinput.hdmi1

  bedroom_roku:
    alias: "Bedroom Roku"
    sequence:
    - service: input_select.set_options
      data:
        entity_id: input_select.remote
        options: "ROKU"
    - service: remote.send_command
      data:
        entity_id: remote.55_tcl_roku_tv
        command:
          - home

  roku_tv_audio_off:
    alias: "TV Audio OFF"
    sequence:
    - service: remote.send_command
      data:
        entity_id: remote.55_tcl_roku_tv
        command:
          - home
    - delay:
        seconds: 1                          
    - service: remote.send_command
      data:
        entity_id: remote.55_tcl_roku_tv
        command:
          - home
          - down
          - down
          - down
          - down
          - right
          - down
          - down
          - down
          - down
          - down
          - down
          - down
          - right
          - right
          - down
          - select
          - home

  roku_tv_audio_on:
    alias: "TV Audio ON"
    sequence:
    - service: remote.send_command
      data:
        entity_id: remote.55_tcl_roku_tv
        command:
          - home
    - delay:
        seconds: 1                          
    - service: remote.send_command
      data:
        entity_id: remote.55_tcl_roku_tv
        command:
          - home
          - down
          - down
          - down
          - down
          - right
          - down
          - down
          - down
          - down
          - down
          - down
          - down
          - right
          - right
          - select
          - home

ui-lovelace.yaml:

decluttering_templates:
##################################################################################
# button_text
##################################################################################
  button_text:
    default:
    card:
      type: "custom:button-card"
      entity: input_select.remote
      name: '[[name]]'
      show_icon: false
      tap_action:
        action: call-service
        service: input_select.set_options
        service_data:
          entity_id: input_select.remote
          options: "[[name]]"
      styles:
        card:
          - background-color: >
              [[[
                if (states['input_select.remote'].state == "[[name]]")
                  return "[[background_active]]";
                return "rgba(56, 60, 69, 1)";
              ]]]
          - border-radius: 20px
          - border-style: solid
          - border-width: 3px
          - border-color: '[[border]]'
          
##################################################################################
# label_image
##################################################################################
  label_image:
    default:
      - height: 75
    card:
      type: custom:button-card
      color_type: label-card
      show_entity_picture: true
      entity_picture: '/local/lovelace/remote/[[image]]'
      styles:
        card:
          - background-color: rgba(56,60,69,1)
          - border-radius: 20px
          - border-style: solid
          - border-width: 3px
          - border-color: >
              [[[
                if (states['sensor.shield_app'].state == "[[name]]")
                  return "[[border_active]]";
                return "[[border_on]]";
              ]]]
          - height: '[[height]]px'
          - padding: 5px
        entity_picture:
          - height: 100%
          - width: 100%
##################################################################################
# button_image
##################################################################################
  button_image:
    default:
    card:
      type: custom:button-card
      name: '[[name]]'
      entity: '[[entity]]'
      show_name: false
      show_entity_picture: true
      entity_picture: '/local/lovelace/remote/[[image]]'
      tap_action: '[[tap_action]]'
      styles:
        card:
          - background-color: rgba(56,60,69,1)
          - border-radius: 20px
          - border-style: solid
          - border-width: 3px
          - border-color: >
              [[[
                if (states['sensor.shield_app'].state == "[[name]]")
                  return "[[border_active]]";
                return "[[border_on]]";
              ]]]
          - height: 75px
          - padding: 5px
          - transform: 'translate(0%,0%)'
        entity_picture:
          - height: 100%
          - width: 100%

  button_firetv:
    default:
      - height: 75
    card:
      type: "custom:button-card"
      entity: input_select.remote
      name: 'HDMI1'
      show_name: false
      show_entity_picture: true
      show_icon: false
      entity_picture: '/local/lovelace/remote/[[image]]'
      tap_action:
        action: call-service
        service: script.turn_on
        service_data:
          entity_id: script.bedroom_firetv
      styles:
        card:
          - background-color: >
              [[[
                if (states['input_select.remote'].state == "[[name]]")
                  return "[[background_active]]";
                return "rgba(56, 60, 69, 1)";
              ]]]
          - border-radius: 20px
          - border-style: solid
          - border-width: 3px
          - border-color: >
              [[[
                if (states['sensor.shield_app'].state == "[[name]]")
                  return "[[border_active]]";
                return "[[border_on]]";
              ]]]
          - height: 75px
          - padding: 5px
          - transform: 'translate(0%,0%)'
        entity_picture:
          - height: 100%
          - width: 100% 
##################################################################################
# Button for remote icon and text
##################################################################################
  button_icon:
    default:
    card:
      type: "custom:button-card"
      entity: '[[entity]]'
      icon: 'mdi:[[icon]]'
      tap_action: '[[tap_action]]'
      show_name: false
      styles:
        card:
          - background-color: rgba(56,60,69,1)
          - border-radius: 20px
          - border-style: solid
          - border-width: 3px
          - border-color: >
              [[[
                if (states['sensor.shield_app'].state == "[[name]]")
                  return "[[border_active]]";
                return "[[border_on]]";
              ]]]
          - height: 75px
          - padding: 5px
  
  button_icon_and_text:
    default:
    card:
      type: "custom:button-card"
      name: '[[name]]'
      entity: '[[entity]]'
      icon: 'mdi:[[icon]]'
      tap_action: '[[tap_action]]'
      show_name: true
      styles:
        card:
          - background-color: rgba(56,60,69,1)
          - border-radius: 20px
          - border-style: solid
          - border-width: 3px
          - border-color: >
              [[[
                if (states['sensor.shield_app'].state == "[[name]]")
                  return "[[border_active]]";
                return "[[border_on]]";
              ]]]
          - height: 75px
          - padding: 5px
          - font-size: 12px
  
  button_roku:
    default:
    card:
      type: "custom:button-card"
      entity: '[[entity]]'
      icon: 'mdi:[[icon]]'
      name: '[[name]]'
      tap_action:
        action: call-service
        service: script.turn_on
        service_data:
          entity_id: script.bedroom_roku
      styles:
        card:
          - background-color: rgba(56,60,69,1)
          - border-radius: 20px
          - border-style: solid
          - border-width: 3px
          - border-color: >
              [[[
                if (states['sensor.shield_app'].state == "[[name]]")
                  return "[[border_active]]";
                return "[[border_on]]";
              ]]]
          - height: 75px
          - padding: 5px

  button_roku_power:
    default:
    card:
      type: "custom:button-card"
      entity: switch.bedroom_tv_power
      icon: mdi:power
      show_state: true
      show_name: false
      tap_action: '[[tap_action]]'
      styles:
        card:
          - background-color: rgba(56,60,69,1)
          - border-radius: 20px
          - border-style: solid
          - border-width: 3px
          - border-color: >
              [[[
                if (states['sensor.shield_app'].state == "[[name]]")
                  return "[[border_active]]";
                return "[[border_on]]";
              ]]]
          - height: 75px
          - padding: 5px
          - font-size: 16px
          - font-weight: bold
      state:
        - value: 'on'
          styles:
            state:
              - color: green
            icon:
              - color: green
        - value: 'off'
          styles:
            state:
              - color: red
            icon:
              - color: red
1 Like

I am getting a websocket error when attempting to use up the volume controls with a broadlink remote. Do you know what I can do to prevent this?

Not too sure sorry… These commands are for the roku remote via app.

@turbo tronix, Thank you for the quick response! I like your remote and seemingly limitless functionality, however it may be best to link information about it to another page so topics don’t get confused.

My question is for @iantrich and members that are following this topic. My connection times out, and my logs indicate a websocket API error.

Great card, just one minor niggle which is more related to the media player set up than the card.

I’m using this for a Sky Now TV box which is based off a Roku box. When you’re on the home screen it displays as “Nowji Sky TV”. Ideally it would show “Home”, or at least Now without the “ji” on the end. Is there anyway of renaming a Source? On Dev Tools the source_list shows as Home, when you select home it shows the Source: as the above mis-spelled name.

I’m not in favor of having the card do such masking. Sounds like an integration change if anything

I use a broadlink remote as well without issues. Sure you have the service call properly formatted?

Yeah i wasn’t expecting changes to the card to solve this issue, more in hope that others use this box and have found a workaround to change the source name, all other sources display absolutely fine.

1 Like

I think so. I have tried it a couple different ways. I tried as a remote.send_command, as well as turning on a script. Everything works on the remote, except for the volume controls. I have been controlling it with the separate a horizontal stack , utilizing a row of buttons, and that seems to work with both the remote.send_command and the script. But I would prefer getting it working with the Roku Remote. I copied/past the script id right from the service tab in developer tools to ensure that it is accurate.

Here is what I have set up:

apps:
  - app: Netflix
    hold_action:
      action: call-service
      service: media_player.select_source
      service_data:
        entity_id: media_player.roku_quarters_tv
        source: HBO Go
    image: /local/netflix.webp
  - app: YouTube TV
    hold_action:
      action: call-service
      service: media_player.select_source
      service_data:
        entity_id: media_player.roku_quarters_tv
        source: Disney Plus
    image: /local/youtube-tv-25236.webp
    volume_down:
      tap_action:
        action: call-service
        service: script.turn_on
        service_data:
          entity_id: script.1590992849637
    volume_mute:
      tap_action:
        action: call-service
        service: remote.send_command
        service_data:
          command: Mute
          device: bedroom_tv
          entity_id: remote.bedroom_ir_blaster
    volume_up:
      tap_action:
        action: call-service
        service: remote.send_command
        service_data:
          command: Volume Up
          device: bedroom_tv
          entity_id: remote.bedroom_ir_blaster
entity: media_player.roku_quarters_tv
name: Quarters TV
tv: true
type: 'custom:roku-card'

What is the best way to change the size of the icons? They seem rather large to me.

card-mod but might add a theme setting. Add a feature request on the github page

I’ve read through a lot of the threads and some of the forks looking for a card that integrates roku commands and utilizes the tv for audio. I thought it would be as simple as changing the coding for the volume keys, but I’m guessing it isn’t? Is that what stackable cards are for?

I am taking a crash course on HA - ending my first week.

jwb

you can make any service call you want for volume control