How do I actually make a TV Remote Control work well in the GUI

Nevermind, I used entity-picture instead of entity_picture :man_facepalming:

Could you share the code?

Here’s the remote part itself as the rest is still work in progress. The services is a mix between a media player entity, adb commands and a broadlink remote entity. Planning to clean this up at some point.

  type: entities
  entities:
    - type: custom:hui-entities-card
      entities:
        - type: custom:hui-grid-card
          cards:
            - type: custom:button-card
              tap_action:
                action: call-service
                service: media_player.toggle
                service_data:
                  entity_id: media_player.fernseher_schlafzimmer
              icon: mdi:power
              hold_action:
                action: none
              show_name: false
              size: 100%
            - type: custom:button-card
              color_type: blank-card
            - type: custom:button-card
              tap_action:
                action: call-service
                service: androidtv.adb_command
                service_data:
                  command: >-
                    sendevent /dev/input/event4 4 4 458834 && sendevent
                    /dev/input/event4 1 103 1 && sendevent /dev/input/event4 0 0
                    0 && sendevent /dev/input/event4 4 4 458834 && sendevent
                    /dev/input/event4 1 103 0 && sendevent /dev/input/event4 0 0
                    0
                  entity_id: media_player.fire_tv
              icon: mdi:arrow-up-bold
              hold_action:
                action: none
              show_name: false
              size: 100%
            - type: custom:button-card
              color_type: blank-card
            - type: custom:button-card
              tap_action:
                action: call-service
                service: remote.send_command
                service_data:
                  device: lg_tv
                  command: input
                  entity_id: remote.broadlink_schlafzimmer
              show_icon: true
              show_name: false
              icon: mdi:import
              size: 100%
            - type: custom:button-card
              color_type: blank-card
            - type: custom:button-card
              tap_action:
                action: call-service
                service: androidtv.adb_command
                service_data:
                  command: >-
                    sendevent /dev/input/event4 4 4 458832 && sendevent
                    /dev/input/event4 1 105 1 && sendevent /dev/input/event4 0 0
                    0 && sendevent /dev/input/event4 4 4 458832 && sendevent
                    /dev/input/event4 1 105 0 && sendevent /dev/input/event4 0 0
                    0
                  entity_id: media_player.fire_tv
              icon: mdi:arrow-left-bold
              hold_action:
                action: none
              show_name: false
              size: 100%
            - type: custom:button-card
              tap_action:
                action: call-service
                service: androidtv.adb_command
                service_data:
                  command: >-
                    sendevent /dev/input/event4 4 4 458840 && sendevent
                    /dev/input/event4 1 96 1 && sendevent /dev/input/event4 0 0
                    0 && sendevent /dev/input/event4 4 4 458840 && sendevent
                    /dev/input/event4 1 96 0 && sendevent /dev/input/event4 0 0
                    0
                  entity_id: media_player.fire_tv
              icon: mdi:checkbox-blank-circle
              hold_action:
                action: none
              show_name: false
              size: 100%
            - type: custom:button-card
              tap_action:
                action: call-service
                service: androidtv.adb_command
                service_data:
                  command: >-
                    sendevent /dev/input/event4 4 4 458831 && sendevent
                    /dev/input/event4 1 106 1 && sendevent /dev/input/event4 0 0
                    0 && sendevent /dev/input/event4 4 4 458831 && sendevent
                    /dev/input/event4 1 106 0 && sendevent /dev/input/event4 0 0
                    0
                  entity_id: media_player.fire_tv
              icon: mdi:arrow-right-bold
              hold_action:
                action: none
              show_name: false
              size: 100%
            - type: custom:button-card
              color_type: blank-card
            - type: custom:button-card
              color_type: blank-card
            - type: custom:button-card
              color_type: blank-card
            - type: custom:button-card
              tap_action:
                action: call-service
                service: androidtv.adb_command
                service_data:
                  command: >-
                    sendevent /dev/input/event4 4 4 458833 && sendevent
                    /dev/input/event4 1 108 1 && sendevent /dev/input/event4 0 0
                    0 && sendevent /dev/input/event4 4 4 458833 && sendevent
                    /dev/input/event4 1 108 0 && sendevent /dev/input/event4 0 0
                    0
                  entity_id: media_player.fire_tv
              icon: mdi:arrow-down-bold
              hold_action:
                action: none
              show_name: false
              size: 100%
          columns: 5
          square: true
        - type: custom:hui-grid-card
          cards:
            - type: custom:button-card
              tap_action:
                action: call-service
                service: androidtv.adb_command
                service_data:
                  command: >-
                    sendevent /dev/input/event4 4 4 458993 && sendevent
                    /dev/input/event4 1 158 1 && sendevent /dev/input/event4 0 0
                    0 && sendevent /dev/input/event4 4 4 458993 && sendevent
                    /dev/input/event4 1 158 0 && sendevent /dev/input/event4 0 0
                    0
                  entity_id: media_player.fire_tv
              icon: mdi:arrow-u-left-bottom
              hold_action:
                action: none
              show_name: false
            - type: custom:button-card
              tap_action:
                action: call-service
                service: androidtv.adb_command
                service_data:
                  command: >-
                    sendevent /dev/input/event4 4 4 786979 && sendevent
                    /dev/input/event4 1 172 1 && sendevent /dev/input/event4 0 0
                    0 && sendevent /dev/input/event4 4 4 786979 && sendevent
                    /dev/input/event4 1 172 0 && sendevent /dev/input/event4 0 0
                    0
                  entity_id: media_player.fire_tv
              icon: mdi:home-outline
              show_name: false
            - type: custom:button-card
              tap_action:
                action: call-service
                service: androidtv.adb_command
                service_data:
                  command: >-
                    sendevent /dev/input/event4 4 4 786496 && sendevent
                    /dev/input/event4 1 139 1 && sendevent /dev/input/event4 0 0
                    0 && sendevent /dev/input/event4 4 4 786496 && sendevent
                    /dev/input/event4 1 139 0 && sendevent /dev/input/event4 0 0
                    0
                  entity_id: media_player.fire_tv
              show_name: false
              show_icon: true
              icon: mdi:menu
            - type: custom:button-card
              tap_action:
                action: call-service
                service: media_player.volume_down
                service_data:
                  entity_id: media_player.fernseher_schlafzimmer
              icon: mdi:volume-minus
              show_name: false
            - type: custom:button-card
              tap_action:
                action: call-service
                service: remote.send_command
                service_data:
                  device: lg_tv
                  command: mute
                  entity_id: remote.broadlink_schlafzimmer
              icon: mdi:volume-variant-off
              show_name: false
            - type: custom:button-card
              tap_action:
                action: call-service
                service: media_player.volume_up
                service_data:
                  entity_id: media_player.fernseher_schlafzimmer
              icon: mdi:volume-plus
              hold_action:
                action: none
              show_name: false
            - type: custom:button-card
              tap_action:
                action: call-service
                service: media_player.media_previous_track
                service_data:
                  entity_id: media_player.fernseher_schlafzimmer
              icon: mdi:rewind
              hold_action:
                action: none
              show_name: false
            - type: custom:button-card
              tap_action:
                action: call-service
                service: media_player.media_play_pause
                service_data:
                  entity_id: media_player.fernseher_schlafzimmer
              icon: mdi:play-pause
              hold_action:
                action: none
              show_name: false
            - type: custom:button-card
              tap_action:
                action: call-service
                service: media_player.media_next_track
                service_data:
                  entity_id: media_player.fernseher_schlafzimmer
              icon: mdi:fast-forward
              hold_action:
                action: none
              show_name: false
            - type: custom:button-card
              color_type: blank-card
            - type: custom:button-card
              tap_action:
                action: call-service
                service: media_player.media_stop
                service_data:
                  entity_id: media_player.fernseher_schlafzimmer
              show_name: false
              icon: mdi:stop
              hold_action:
                action: none
            - type: custom:button-card
              tap_action:
                action: call-service
                service: scene.turn_on
                service_data:
                  entity_id: scene.fernsehszene_schlafzimmer
              show_name: false
              icon: mdi:lightbulb
              hold_action:
                action: none
          columns: 3
          square: false
      card_mod:
        style: |
          ha-card {
            --ha-card-background: white;
            --ha-card-border-width: 0px;
          }

Bear in mind that there were design changes in the HA frontend since I posted the screenshot, so the border will look different.

Thanks, looks good :ok_hand::sunglasses:

What is the code you used to display the picture buttons at the bottom. I have a picture displayed but it isn’t taking up the full button.

I made up two remote using ha-floorplan. You can see them over here Share your Floorplan - #714 by OzGav

Just standard picture cards in a grid. You can define actions in picture cards, so no need for a button.

1 Like

If anyone is interested in a pre-made ready to go remote control solution for their Amazon Fire devices, I’d recommend checking out this project:

2 Likes

good job man, looks GREAT! Wish I found this years ago…
I have a Logitech Harmony Remote ( Harmony Touch) and it has really served me well for many many years. Now that I have been getting proficient with Home Assistant, sadly I have been phasing the Harmony remote out and trying to use just my “simple” Roku remote and one I make for HA.

GREAT JOB though wish you had more keywords so I would had found earlier

Harmony really

Love this! I have a remote I created in photoshop, but have no clue how to get that image into home assistant and make the buttons function. Is there any documentation or guidance on this, or could you give me a run down? Thanks!

It’s all here: Harmony Remote YAML - Pastebin.com

So when changing that to my image, how do I make the button presses align with my buttons? Also, will this immediately be added as a card? Thanks!

If you are completely unfamiliar with YAML, you will most likely never be able to make this work.
Essentially, the placement of each button is done by placeing an invisible icon relative to the top left corner of the image. You must do some trial’n’error to fnd the correct values:

   type: icon
  - icon: mdi
    style:
      left: 37%
      top: 19%

I’m familiar with yaml. Wasn’t sure if I needed to add any frontend cards from hacs to make this work. I realize it’s a picture elements card now. You may know this, but I found that you can use inspect element or photoshop to find out where exactly the buttons in your image are, and then easily align them. Thanks for pointing me in the right direction!

Hi Tom_l,
I am a new to HA and not able to get the remote to display. Have created new dashboard and copied both the template and build yaml to blank dashboard.
‘–paper-card-background-color’: ‘rgba(0, 0, 0, 0)’ is depreciated.
Dashboard will not let me save without view and title in fist two lines of code.
Have tried for over two days to get this to display.

Replace it with:

'--ha-card-background': rgba(0, 0, 0, 0)

Thanks but still no display…
Should both template and build info be placed after each other in dashboard or must they be separated in some way?
Also is this remote still working as original post was 4 years ago?

Yes the remote is still working.

The template goes at the top of your raw config. The rest goes in a manual card.

Thanks Tom now working.
Great support.

1 Like