Media Center Control in HA Front End

I have become a HomeAssistant convert. I now use HA to control my Insteon network via ISY-994, ceiling fans and lights via a Bond Bridge, Shelly devices via mqtt, and several other one offs like my irrigation controller, etc. I also used an ESP32 and ESPHome to make a HA Gate controller for the gate on my driveway and a BLE hub via ESPHome and an ESP32 to support Govee humidity sensors. The community has been awesome supporting my learning how to get do more and more with HomeAssistant.

From a frontend perspective, I have stayed away from custom cards and have stuck with the standard cards that come with HA. Given how rapidly they are evolving/improving this has made sense and I have arrived at a UI that gets decent WAF (primary use case for control is via the IOS Companion app) and Alex for specific devices where voice control makes sense.

I have TVs in multiple rooms. Each has multiple inputs (Roku, DirecTV, etc.) and internal smart apps for popular streaming services. The TVs range in age from 1-15 years old but I do have iTach devices for each one so I can support a mix of IP and IR control. One setup also includes a Onkyo AV receiver. I have been a RoomieRemote/SimpleControl user for longer than I have used HA. Overall, the RoomieRemote paradigm of controlling a “media center” per room with an app that looks somewhat like what a physical remote would look like works and is generally intuitive.

The question: I have never really figured out/understood the paradigm in HA for media center control. Is there a “standard” or “typical” way to achieve “Media Center” control in a consistent way across multiple media centers each with different hardware (TV models, streamer devices) etc. within HomeAssistant (without significant custom work trying to create a custom control card)? I have dabbled with the media center integrations and cards but I never get something that would look like a remote? Is there a vision for HomeAssistant to address this specific area with more standard methodologies? (I have already paid for a perpetual RoomieRemote license, so this is not an issue of cost for me but rather getting more consolidation of control by going from two major platforms/apps to a single one (Roomie does have some home control capabilities but nothing as robust as HA, so my desire is to evolve away from Roomie and use HA to meet all of my remote control needs)

I know this is an old topic but what the hell…
I’m kind of in the same boat as the OP. Been using Simple Control/Roomie Remote for a long time, with a mix of iTach IR and IP control. I’d like to migrate my media device control to HA, especially since I can no longer get Alexa to discover Roomie entities. I know HA has evolved a lot since the original post, so maybe someone could point us in the direction of current info.

Thanks!

Ron,
I wanted to provide you with an update from my original post. I have evolved my solution with the advent of grid cards and other front end improvements. I have included a picture of what one of my TV Remotes now look like. I have a different version of this basic setup for each TV in my house. All have slight differences since they all have some unique differences. But overall, once setup they work well. This was really simplified when I finally got rid of DirecTV and went streaming only. One of the challenges has always been the power state. I typically use IR to turn power on or off (I have some ITachs but have also started using the Broadcom RM4 mini. It works well and way less expensive than the ITachs) since on many TVs the power on/off via IP does not always work well. This makes tracking power state a little challenging. I am now using input_booleans for power state and use feedback from the TV over IP to change the boolean state. It works pretty well, just a little delay.

When I add a new TV to my setup, I just copy one of my exiting cards. Change the actions on all of the buttons to the appropriate entity (sometimes it is the TV, other times the streaming media player, or a receiver where a use one.) It takes a few minutes to get it all configured, but once setup rarely changes.

More than happy to share any of the YAML for one of these if you are interested.

I did end up using a custom:button card so that I could make the Icons for the various sources on the bottom. I could not find good mdi icons for all of these, so I just went the jpeg route thus the custom buttons, but it was easy enough.

Thanks John,

I’m just getting into the frontend stuff. Some of it can be overwhelming. I would love to check out your yaml (that sounds kinda creepy, doesn’t it/ :slight_smile: ). It looks like a nice layout you have. Thanks again!

Ron,

One thing to note as you go through this is that the volume buttons call a script that just loops by the count issuing the command. This way I can change the volume in x10 increments which works better on this TV, this is via the IR blaster. Note, between the two volume buttons is a mini media player that shows the volume and lets you interact with it. The mini media player uses an entity from a Samsung TV integration. This integration works most of the time but does not work for power on and off and takes a few seconds to work after the set is turned on. The IR tends to be more reliable. I do use the mini media player to keep the state of the power button correct as I indicated in my previous post.

Also you will notice some of the buttons use the navigation path. I have built my UI with a series of dashboards and views. These buttons do the navigation between them.

type: grid
columns: 1
square: false
cards:
  - type: grid
    square: false
    cards:
      - type: button
        tap_action:
          action: navigate
          navigation_path: /lovelace-mobile/menu
        entity: zone.home
        name: Main Menu
        show_icon: true
        icon_height: 50px
        icon: mdi:menu
      - type: button
        tap_action:
          action: navigate
          navigation_path: /lovelace-mobile/bedroom
        entity: zone.home
        name: Bedroom
        icon_height: 50px
        icon: mdi:bed-empty
      - type: button
        icon_height: 50px
        tap_action:
          action: navigate
          navigation_path: /tv-remotes/sonos
        entity: input_boolean.theatertv
        name: Sonos
        show_icon: true
        icon: mdi:speaker-multiple
      - type: button
        entity: input_boolean.mastertv
        tap_action:
          action: call-service
          service: script.toggle_tv
          service_data:
            entity_name: mastertv
            initial_source: hdmi_2
        icon: mdi:power
        state_color: true
        name: TV
        icon_height: 50px
    columns: 4
  - type: grid
    columns: 1
    square: false
    cards:
      - type: grid
        columns: 3
        square: false
        cards:
          - type: button
            tap_action:
              action: call-service
              service: script.master_volume_down
              service_data:
                count: 10
            icon: mdi:volume-minus
            name: -10
          - type: custom:mini-media-player
            entity: media_player.bedroomsamsung
            volume_stateless: true
            hide:
              power: true
              source: true
              name: true
              icon: true
              controls: true
          - type: button
            tap_action:
              action: call-service
              service: script.master_volume_up
              service_data:
                count: 10
            icon: mdi:volume-plus
            name: 10
      - type: grid
        columns: 3
        square: false
        cards:
          - type: button
            tap_action:
              action: call-service
              service: remote.send_command
              service_data:
                entity_id: remote.masterbedroom
                command:
                  - reverse
            icon: mdi:rewind
          - type: button
            tap_action:
              action: call-service
              service: remote.send_command
              service_data:
                command: play
              target:
                entity_id: remote.masterbedroom
            icon: mdi:play-pause
          - type: button
            tap_action:
              action: call-service
              service: remote.send_command
              service_data:
                entity_id: remote.masterbedroom
                command:
                  - forward
            icon: mdi:fast-forward
          - type: button
            tap_action:
              action: call-service
              service: remote.send_command
              service_data:
                entity_id: remote.masterbedroom
                command:
                  - back
            icon: mdi:keyboard-backspace
          - type: button
            tap_action:
              action: call-service
              service: remote.send_command
              service_data:
                entity_id: remote.masterbedroom
                command:
                  - up
            icon: mdi:chevron-up
          - type: button
            tap_action:
              action: call-service
              service: remote.send_command
              service_data:
                entity_id: remote.masterbedroom
                command:
                  - info
            icon: mdi:multiplication
          - type: button
            show_name: false
            tap_action:
              action: call-service
              service: remote.send_command
              service_data:
                entity_id: remote.masterbedroom
                command:
                  - left
            icon: mdi:chevron-left
          - type: button
            tap_action:
              action: call-service
              service: remote.send_command
              service_data:
                entity_id: remote.masterbedroom
                command:
                  - select
            icon: mdi:circle-medium
          - type: button
            tap_action:
              action: call-service
              service: remote.send_command
              service_data:
                entity_id: remote.masterbedroom
                command:
                  - right
            icon: mdi:chevron-right
          - type: button
            tap_action:
              action: null
          - type: button
            tap_action:
              action: call-service
              service: remote.send_command
              service_data:
                entity_id: remote.masterbedroom
                command:
                  - down
            icon: mdi:chevron-down
          - type: button
            tap_action:
              action: null
      - type: grid
        columns: 5
        square: false
        cards:
          - type: custom:button-card
            tap_action:
              action: call-service
              service: media_player.select_source
              service_data:
                source: '12'
                entity_id: media_player.masterbedroom
            entity_picture: /local/myIcons/netflix.png
            show_entity_picture: true
            size: 100%
          - type: custom:button-card
            tap_action:
              action: call-service
              service: media_player.select_source
              service_data:
                source: '13'
                entity_id: media_player.masterbedroom
            entity_picture: /local/myIcons/primevideo.png
            show_entity_picture: true
            size: 100%
          - type: custom:button-card
            tap_action:
              action: call-service
              service: media_player.select_source
              service_data:
                source: '291097'
                entity_id: media_player.masterbedroom
            entity_picture: /local/myIcons/disneyplus.png
            show_entity_picture: true
            size: 100%
          - type: custom:button-card
            tap_action:
              action: call-service
              service: media_player.select_source
              service_data:
                source: '195316'
                entity_id: media_player.masterbedroom
            entity_picture: /local/myIcons/youtubetv.png
            show_entity_picture: true
            size: 100%
          - type: custom:button-card
            tap_action:
              action: call-service
              service: media_player.select_source
              service_data:
                source: '8518'
                entity_id: media_player.masterbedroom
            entity_picture: /local/myIcons/ewtn.png
            show_entity_picture: true
            size: 100%
          - type: custom:button-card
            tap_action:
              action: call-service
              service: media_player.select_source
              service_data:
                source: '13535'
                entity_id: media_player.masterbedroom
            entity_picture: /local/myIcons/plex.png
            show_entity_picture: true
            size: 100%
          - type: custom:button-card
            tap_action:
              action: call-service
              service: media_player.select_source
              service_data:
                source: '151908'
                entity_id: media_player.masterbedroom
            entity_picture: /local/myIcons/roku.png
            show_entity_picture: true
            size: 100%
          - type: custom:button-card
            tap_action:
              action: call-service
              service: media_player.select_source
              service_data:
                source: '44856'
                entity_id: media_player.masterbedroom
            entity_picture: /local/myIcons/nfl.png
            show_entity_picture: true
            size: 100%
          - type: custom:button-card
            tap_action:
              action: call-service
              service: media_player.select_source
              service_data:
                source: '63772'
                entity_id: media_player.masterbedroom
            entity_picture: /local/myIcons/sundayticket.png
            show_entity_picture: true
            size: 100%
          - type: custom:button-card
            tap_action:
              action: call-service
              service: media_player.select_source
              service_data:
                source: '551012'
                entity_id: media_player.masterbedroom
            entity_picture: /local/myIcons/appletv.png
            show_entity_picture: true
            size: 100%
          - type: custom:button-card
            tap_action:
              action: call-service
              service: media_player.select_source
              service_data:
                source: '837'
                entity_id: media_player.masterbedroom
            entity_picture: /local/myIcons/youtube.png
            show_entity_picture: true
            size: 100%
          - type: custom:button-card
            tap_action:
              action: call-service
              service: media_player.select_source
              service_data:
                source: '593099'
                entity_id: media_player.masterbedroom
            entity_picture: /local/myIcons/peacock.png
            size: 100%
            show_entity_picture: true
          - type: custom:button-card
            tap_action:
              action: call-service
              service: media_player.select_source
              service_data:
                source: '592506'
                entity_id: media_player.masterbedroom
            entity_picture: /local/myIcons/peleton.png
            show_entity_picture: true
            size: 100%
      - type: custom:mini-media-player
        hide:
          icon: false
          name: true
          source: true
          power: true
          controls: false
          volume_level: true
          volume: true
          prev: false
          next: false
          play_pause: false
        entity: media_player.masterbedroom

1 Like

Thank you so much, John. I haven’t used Grid Cards yet, so I’ll delve into them and your code.

Hey John, I am new here and did not see a repository. Is there a way you can send me the .yaml for this card? I would like to implement a similar instance or two.

Rick

Rick, the yaml for the card is included in my Oct 22 post. Let me know if you can’t get to it.