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

Oh, this is just because when I first set up the Harmony HUB, I chose one set of names, and years later, when I set up Home Assistant integrations, I named the same devices slightly different.
Eventually, when I later decided to integrate the two (HA & Harmony HUB), I didn’t bother to change the names again.

Hi! Had some questions about your remote card. I’ve been using your old version with the tiles card and it still works well but was looking to start trasnsitioning to the button card. How did you get the coloring different between the title at the top and the rest of the card? Is it just a background image? I set up a few buttons to test out. I noticed that it works differrently than the tiles card, The tiles card is very responsive. If I press the button quickly 3 times the command is sent all 3 times to my harmony hub. With the custom button card it needs time between presses. Is there a way to adjust this? Can you use custom icons or only the mdi icons?

Hey Tom,

When you say enter them at the top of raw edit mode, where are you referring to?

When you are editing the card, there is an option in the bottom left called “show code editor” where you can edit the raw yaml that makes the card work:

I see show code editor, but what card are you starting with? Entities card?

Actually the raw editor is accessed by clicking the three dots icon in the top right of your dashboard twice.

First press to get into edit mode:

1

Then when in edit mode press the three dots again to select raw edit mode:

2

You will then see the raw edit mode where you can paste the templates at the top of the existing config:

Press Save when done.

I use custom:button-card

Here’s some code to start you off…

1 Like

If you used custom:button-card and button card templates you could reduce that code by 80% as it mostly repeats the same thing over and over.

See post here Vizio TV Integration - #35 by 0rchid2434

Most of the code is posted here: https://github.com/kbrown01/Vizio_DirecTV

1 Like

I finally finished the GUI part of my remote.
Here as an inspiration for some others.

5 Likes

Is there a way to get this as simple as possible in the UI? Like a card that could be configured.
That would be great.

Hi
awesome set up!
I’m trying to extend it with channel button, which should show the channel logo’s (svg or png), however they just turn up als ‘file’ icon

afbeelding

I have set show_entity_picture: true in both the template and the icon_button definition

entity_picture is defined as /local/assets/channels/npo1.svg

afbeelding

What am I missing here?

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