Share your Lovelace Home Theater Remote Setup

Thanks but sorry, I misunderstood. I thought you had scripts that controlled the TV rather than the Harmony Hub. :blush:

I have a small remote that I default to. I am using the Conditional Card to hide what is un-needed at the moment. When the TV is off I can just click Netflix, DVD, or Satellite to run a script to turn the TV on and get started. Clicking the Netflix button: sets the remote to Netflix mode, turns on the TV and the FireTV, sets the TV to the FireTV input, and sets the FireTV to the Netflix app. The remote provides TV power, Volume, Mute functions and the most relevant buttons for the device I am using.

Once I select Netflix I have the normal controls that I use with Netflix. The key icon runs a script that enters our parental controls passcode. The DVD remote gives an eject button.

I also have a full remote for each device.

4 Likes

Not to burst anyone’s bubble but if you haven’t done this yet I wouldn’t suggest it. You aren’t going to like using this fancy remote you create. Using a screen as a remote control is awful because it has no tactile feel.

Don’t get me wrong, it’s definitely cool and potentially a fun project but not very useful.

I was going to ask this yesterday but I didn’t want to

:rofl::rofl::rofl:

And actually I can’t imagine ever using it when I have to

  1. Get my phone out of my pocket
  2. Turn it on
  3. Start the app
  4. find the right view
  5. Control my TV :champagne:
    (tsk, all those first world problems…)

But, I still went on and did it for a

Not going to lie, I kind of agree a with this however the main use of the UI remote will be for my sister and mom who hate using this logitech remote we have with the worst touchscreen ever.


That way if they don’t want to mess with that they can just use their phone

I suggest one like this.

https://www.proavhometheater.com/T2I.png

YMMV. I can see benefits to both approaches. Yes, there’s something to be said about the tactile feel of a real remote, but anecdotally, I bought a Harmony Hub in December with the physical companion remote to have the option of a physical remote. I think we’ve used it twice. In our case, the majority of the content we watch is on Chromecast, so we’re comfortable pulling out a phone to start watching anyways, and then we already have a phone out in case we need to make adjustments later. With a well-designed, simple phone remote interface, without an overload of buttons (most buttons on a typical physical remote go unused 90% of the time anyhow), with the buttons well-spaced out and sizable enough to provide good touch targets, it can work very well. And I think there’s something to be said about being able to customize your remote layout for your specific needs. For example, I’ve created multiple lengths of skip buttons (15 seconds, 3 minutes - great for a typical commercial break, 15 minutes - to skip halftime of a DVR’ed sporting event), something a physical remote will not typically accommodate as well.

1 Like

I have a seperate hub for my TV setup and i barely use the remote too because I don’t watch cable and just chromecast most things. So I am either relying on my phone anyways or using my Google Home to control the TV. But the remote does get a little use but mostly just for powering on/off system, volume control, and the occasional play/pause/skip of the chromecast through CEC.

However, if I was watching cable the remote would be used a lot more to punch channel numbers in and that is why the remote in the family room is terrible because the numbers rely on the touch screen which registers too many wrong numbers or don’t register number presses at all.

Yeah, channel numbers are definitely the biggest use-case for a physical remote. I switched from DirecTV to Youtube TV a few months back, so that’s no longer a concern of mine.

That being said, even then a touchscreen can have its advantages. I had programmed my favorite channels into my previous setup, so a single tap on the channel logo in the favorites list would take care of punching in the channel number. Again, the customization possibilities of a phone-based remote can actually make it easier by allowing for visual indicators (channel logos) with large touch targets. Plus, no channel numbers to remember.

You’re obviously not lazy enough. I’ll whip out my phone and launch hass before searching every sofa for the remote.

Also I have my remote on a conditional card with a remote switch at the top of my home page. It really isn’t long to access at all.

53

1 Like

google home and voice control
(for kicking it off as listed earlier, even if I still have to use a single remote to select the content to view)

Do you have your config for this? You’ve already done Almost exactly what I’ve been brainstorming all day

Ian Welcome to the community! There is a lot that goes into this… most of the buttons are scripts that run a particular series of commands to accomplish the given function. I even have an automation that takes the TV’s input and updates the remote so if I start somewhere else the remote is updated. here is the Lovelace code… and below that are some of the scripts.

  - card:
      entity: media_player.lg_webos_tv
      group: true
      type: "custom:mini-media-player"
    conditions:
      - entity: sensor.lg_tv_source
        state_not: "off"
    type: conditional
  - card:
      entity: media_player.fire_tv
      group: true
      hide:
        volume: true
      type: "custom:mini-media-player"
    conditions:
      - entity: sensor.lg_tv_source
        state_not: "off"
    type: conditional
  - card:
      columns: 4
      entities:
        - entity: switch.tv_toggle
          hold_action:
            action: call-service
            service: mqtt.publish
            service_data:
              payload: "off"
              qos: 0
              retain: false
              topic: ha/lgtv/source
          icon: "mdi:monitor"
          tap_action:
            action: toggle
        - entity: script.tv_mute
          hold_action:
            action: toggle
          icon: "mdi:volume-mute"
          tap_action:
            action: toggle
        - entity: script.tv_volume_down
          hold_action:
            action: toggle
          icon: "mdi:volume-minus"
          tap_action:
            action: toggle
        - entity: script.tv_volume_up
          hold_action:
            action: toggle
          icon: "mdi:volume-plus"
          tap_action:
            action: toggle
        - entity: script.dvd_media_backward
          hold_action:
            action: toggle
          icon: "mdi:skip-previous-circle"
          tap_action:
            action: toggle
        - entity: script.dvd_media_play
          hold_action:
            action: toggle
          icon: "mdi:play-circle"
          tap_action:
            action: toggle
        - entity: script.dvd_media_pause
          hold_action:
            action: toggle
          icon: "mdi:pause-circle"
          tap_action:
            action: toggle
        - entity: script.dvd_media_forward
          hold_action:
            action: toggle
          icon: "mdi:skip-next-circle"
          tap_action:
            action: toggle
        - entity: script.dvd_return
          hold_action:
            action: toggle
          icon: "mdi:undo"
          tap_action:
            action: toggle
        - entity: script.dvd_up
          hold_action:
            action: toggle
          icon: "mdi:arrow-up-bold-circle"
          tap_action:
            action: toggle
        - entity: script.dvd_home
          hold_action:
            action: toggle
          icon: "mdi:home"
          tap_action:
            action: toggle
        - entity: script.fire_netflix
          hold_action:
            action: call-service
            service: mqtt.publish
            service_data:
              payload: FireTV
              qos: "0"
              retain: "false"
              topic: ha/lgtv/source
          icon: "mdi:netflix"
          tap_action:
            action: toggle
        - entity: script.dvd_left
          hold_action:
            action: toggle
          icon: "mdi:arrow-left-bold-circle"
          tap_action:
            action: toggle
        - entity: script.dvd_enter
          hold_action:
            action: toggle
          icon: "mdi:checkbox-blank-outline"
          tap_action:
            action: toggle
        - entity: script.dvd_right
          hold_action:
            action: toggle
          icon: "mdi:arrow-right-bold-circle"
          tap_action:
            action: toggle
        - entity: script.tv_dvd
          hold_action:
            action: toggle
          icon: "mdi:disc-player"
          tap_action:
            action: toggle
        - entity: script.extra_button
          hold_action:
            action: toggle
          icon: "mdi:eject"
          tap_action:
            action: toggle
        - entity: script.nodered_down
          hold_action:
            action: toggle
          icon: "mdi:arrow-down-bold-circle"
          tap_action:
            action: toggle
        - entity: script.nodered_menu
          hold_action:
            action: toggle
          icon: "mdi:menu"
          tap_action:
            action: toggle
        - entity: script.tv_sat
          hold_action:
            action: toggle
          icon: "mdi:satellite-uplink"
          tap_action:
            action: toggle
      show_name: false
      show_state: false
      type: glance
    conditions:
      - entity: sensor.lg_tv_source
        state: DVD Player
    type: conditional
  - card:
      columns: 4
      entities:
        - entity: switch.tv_toggle
          hold_action:
            action: call-service
            service: mqtt.publish
            service_data:
              payload: "off"
              qos: 0
              retain: false
              topic: ha/lgtv/source
          icon: "mdi:monitor"
          tap_action:
            action: toggle
        - entity: script.tv_mute
          hold_action:
            action: toggle
          icon: "mdi:volume-mute"
          tap_action:
            action: toggle
        - entity: script.tv_volume_down
          hold_action:
            action: toggle
          icon: "mdi:volume-minus"
          tap_action:
            action: toggle
        - entity: script.tv_volume_up
          hold_action:
            action: toggle
          icon: "mdi:volume-plus"
          tap_action:
            action: toggle
        - entity: script.fire_media_backward
          hold_action:
            action: toggle
          icon: "mdi:skip-previous-circle"
          tap_action:
            action: toggle
        - entity: script.fire_media_play
          hold_action:
            action: toggle
          icon: "mdi:play-circle"
          tap_action:
            action: toggle
        - entity: script.fire_media_pause
          hold_action:
            action: toggle
          icon: "mdi:pause-circle"
          tap_action:
            action: toggle
        - entity: script.fire_media_forward
          hold_action:
            action: toggle
          icon: "mdi:skip-next-circle"
          tap_action:
            action: toggle
        - entity: script.fire_back
          hold_action:
            action: toggle
          icon: "mdi:undo"
          tap_action:
            action: toggle
        - entity: script.fire_up
          hold_action:
            action: toggle
          icon: "mdi:arrow-up-bold-circle"
          tap_action:
            action: toggle
        - entity: script.fire_home
          hold_action:
            action: toggle
          icon: "mdi:home"
          tap_action:
            action: toggle
        - entity: script.fire_netflix
          hold_action:
            action: toggle
          icon: "mdi:netflix"
          tap_action:
            action: toggle
        - entity: script.fire_left
          hold_action:
            action: toggle
          icon: "mdi:arrow-left-bold-circle"
          tap_action:
            action: toggle
        - entity: script.fire_enter
          hold_action:
            action: toggle
          icon: "mdi:checkbox-blank-outline"
          tap_action:
            action: toggle
        - entity: script.fire_right
          hold_action:
            action: toggle
          icon: "mdi:arrow-right-bold-circle"
          tap_action:
            action: toggle
        - entity: script.tv_dvd
          hold_action:
            action: call-service
            service: mqtt.publish
            service_data:
              payload: DVD Player
              qos: 0
              retain: false
              topic: ha/lgtv/source
          icon: "mdi:disc-player"
          tap_action:
            action: toggle
        - entity: script.fire_netflix_auth
          hold_action:
            action: toggle
          icon: "mdi:key"
          tap_action:
            action: toggle
        - entity: script.fire_down
          hold_action:
            action: toggle
          icon: "mdi:arrow-down-bold-circle"
          tap_action:
            action: toggle
        - entity: script.fire_menu
          hold_action:
            action: toggle
          icon: "mdi:menu"
          tap_action:
            action: toggle
        - entity: script.tv_sat
          hold_action:
            action: toggle
          icon: "mdi:satellite-uplink"
          tap_action:
            action: toggle
      show_name: false
      show_state: false
      type: glance
    conditions:
      - entity: sensor.lg_tv_source
        state: FireTV
      - entity: binary_sensor.frontnode2_status
        state: "on"
    type: conditional
  - card:
      columns: 4
      entities:
        - entity: switch.tv_toggle
          hold_action:
            action: call-service
            service: mqtt.publish
            service_data:
              payload: "off"
              qos: 0
              retain: false
              topic: ha/lgtv/source
          icon: "mdi:monitor"
          tap_action:
            action: toggle
        - entity: script.tv_mute
          hold_action:
            action: toggle
          icon: "mdi:volume-mute"
          tap_action:
            action: toggle
        - entity: script.tv_volume_down
          hold_action:
            action: toggle
          icon: "mdi:volume-minus"
          tap_action:
            action: toggle
        - entity: script.tv_volume_up
          hold_action:
            action: toggle
          icon: "mdi:volume-plus"
          tap_action:
            action: toggle
        - entity: script.fire_media_backward
          hold_action:
            action: toggle
          icon: "mdi:skip-previous-circle"
          tap_action:
            action: call-service
            service: androidtv.adb_command
            service_data:
              entity_id: media_player.fire_tv
              command: "REWIND"
        - entity: script.fire_media_play
          hold_action:
            action: toggle
          icon: "mdi:play-circle"
          tap_action:
            action: call-service
            service: androidtv.adb_command
            service_data:
              entity_id: media_player.fire_tv
              command: "input keyevent 85"
        - entity: script.fire_media_pause
          hold_action:
            action: toggle
          icon: "mdi:pause-circle"
          tap_action:
            action: call-service
            service: androidtv.adb_command
            service_data:
              entity_id: media_player.fire_tv
              command: "input keyevent 127"
        - entity: script.fire_media_forward
          hold_action:
            action: toggle
          icon: "mdi:skip-next-circle"
          tap_action:
            action: call-service
            service: androidtv.adb_command
            service_data:
              entity_id: media_player.fire_tv
              command: "FAST_FORWARD"
        - entity: script.fire_back
          hold_action:
            action: toggle
          icon: "mdi:undo"
          tap_action:
            action: call-service
            service: androidtv.adb_command
            service_data:
              entity_id: media_player.fire_tv
              command: "BACK"
        - entity: script.fire_up
          hold_action:
            action: toggle
          icon: "mdi:arrow-up-bold-circle"
          tap_action:
            action: call-service
            service: androidtv.adb_command
            service_data:
              entity_id: media_player.fire_tv
              command: "UP"
        - entity: script.fire_home
          hold_action:
            action: toggle
          icon: "mdi:home"
          tap_action:
            action: call-service
            service: androidtv.adb_command
            service_data:
              entity_id: media_player.fire_tv
              command: "HOME"
        - entity: script.fire_netflix
          hold_action:
            action: toggle
          icon: "mdi:netflix"
          tap_action:
            action: toggle
        - entity: script.fire_left
          hold_action:
            action: toggle
          icon: "mdi:arrow-left-bold-circle"
          tap_action:
            action: call-service
            service: androidtv.adb_command
            service_data:
              entity_id: media_player.fire_tv
              command: "LEFT"
        - entity: script.fire_enter
          hold_action:
            action: toggle
          icon: "mdi:checkbox-blank-outline"
          tap_action:
            action: call-service
            service: androidtv.adb_command
            service_data:
              entity_id: media_player.fire_tv
              command: "CENTER"
        - entity: script.fire_right
          hold_action:
            action: toggle
          icon: "mdi:arrow-right-bold-circle"
          tap_action:
            action: call-service
            service: androidtv.adb_command
            service_data:
              entity_id: media_player.fire_tv
              command: "RIGHT"
        - entity: script.tv_dvd
          hold_action:
            action: call-service
            service: mqtt.publish
            service_data:
              payload: DVD Player
              qos: 0
              retain: false
              topic: ha/lgtv/source
          icon: "mdi:disc-player"
          tap_action:
            action: toggle
        - entity: script.fire_netflix_auth
          hold_action:
            action: toggle
          icon: "mdi:key"
          tap_action:
            action: toggle
        - entity: script.fire_down
          hold_action:
            action: toggle
          icon: "mdi:arrow-down-bold-circle"
          tap_action:
            action: call-service
            service: androidtv.adb_command
            service_data:
              entity_id: media_player.fire_tv
              command: "DOWN"
        - entity: script.fire_menu
          hold_action:
            action: toggle
          icon: "mdi:menu"
          tap_action:
            action: call-service
            service: androidtv.adb_command
            service_data:
              entity_id: media_player.fire_tv
              command: "MENU"
        - entity: script.tv_sat
          hold_action:
            action: toggle
          icon: "mdi:satellite-uplink"
          tap_action:
            action: toggle
      show_name: false
      show_state: false
      type: glance
    conditions:
      - entity: sensor.lg_tv_source
        state: FireTV
      - entity: binary_sensor.frontnode2_status
        state: "off"
    type: conditional
  - card:
      columns: 4
      entities:
        - entity: switch.tv_toggle
          hold_action:
            action: toggle
          icon: "mdi:monitor"
          tap_action:
            action: toggle
        - entity: script.fire_netflix
          hold_action:
            action: call-service
            service: mqtt.publish
            service_data:
              payload: FireTV
              qos: 0
              retain: false
              topic: ha/lgtv/source
          icon: "mdi:netflix"
          tap_action:
            action: toggle
        - entity: script.tv_dvd
          hold_action:
            action: call-service
            service: mqtt.publish
            service_data:
              payload: DVD Player
              qos: 0
              retain: false
              topic: ha/lgtv/source
          icon: "mdi:disc-player"
          tap_action:
            action: toggle
        - entity: script.tv_sat
          hold_action:
            action: toggle
          icon: "mdi:satellite-uplink"
          tap_action:
            action: toggle
      show_name: false
      show_state: false
      type: glance
    conditions:
      - entity: sensor.lg_tv_source
        state: "off"
    type: conditional
  - card:
      columns: 4
      entities:
        - entity: switch.tv_toggle
          hold_action:
            action: call-service
            service: mqtt.publish
            service_data:
              payload: "off"
              qos: 0
              retain: false
              topic: ha/lgtv/source
          icon: "mdi:monitor"
          tap_action:
            action: toggle
        - entity: script.tv_mute
          hold_action:
            action: toggle
          icon: "mdi:volume-mute"
          tap_action:
            action: toggle
        - entity: script.tv_volume_down
          hold_action:
            action: toggle
          icon: "mdi:volume-minus"
          tap_action:
            action: toggle
        - entity: script.tv_volume_up
          hold_action:
            action: toggle
          icon: "mdi:volume-plus"
          tap_action:
            action: toggle
        - entity: script.tv_media_backward
          hold_action:
            action: toggle
          icon: "mdi:skip-previous-circle"
          tap_action:
            action: toggle
        - entity: script.tv_media_play
          hold_action:
            action: toggle
          icon: "mdi:play-circle"
          tap_action:
            action: toggle
        - entity: script.tv_media_pause
          hold_action:
            action: toggle
          icon: "mdi:pause-circle"
          tap_action:
            action: toggle
        - entity: script.tv_media_forward
          hold_action:
            action: toggle
          icon: "mdi:skip-next-circle"
          tap_action:
            action: toggle
        - entity: script.tv_return
          hold_action:
            action: toggle
          icon: "mdi:undo"
          tap_action:
            action: toggle
        - entity: script.tv_up
          hold_action:
            action: toggle
          icon: "mdi:arrow-up-bold-circle"
          tap_action:
            action: toggle
        - entity: script.tv_list
          hold_action:
            action: toggle
          icon: "mdi:home"
          tap_action:
            action: toggle
        - entity: script.fire_netflix
          hold_action:
            action: toggle
          icon: "mdi:netflix"
          tap_action:
            action: toggle
        - entity: script.tv_left
          hold_action:
            action: toggle
          icon: "mdi:arrow-left-bold-circle"
          tap_action:
            action: toggle
        - entity: script.tv_enter
          hold_action:
            action: toggle
          icon: "mdi:checkbox-blank-outline"
          tap_action:
            action: toggle
        - entity: script.tv_right
          hold_action:
            action: toggle
          icon: "mdi:arrow-right-bold-circle"
          tap_action:
            action: toggle
        - entity: script.tv_dvd
          hold_action:
            action: call-service
            service: mqtt.publish
            service_data:
              payload: DVD Player
              qos: 0
              retain: false
              topic: ha/lgtv/source
          icon: "mdi:disc-player"
          tap_action:
            action: toggle
        - entity: script.tv_source
          hold_action:
            action: toggle
          icon: "mdi:ethernet-cable"
          tap_action:
            action: toggle
        - entity: script.tv_down
          hold_action:
            action: toggle
          icon: "mdi:arrow-down-bold-circle"
          tap_action:
            action: toggle
        - entity: script.tv_menu
          hold_action:
            action: toggle
          icon: "mdi:menu"
          tap_action:
            action: toggle
        - entity: script.tv_sat
          hold_action:
            action: toggle
          icon: "mdi:satellite-uplink"
          tap_action:
            action: toggle
      show_name: false
      show_state: false
      title: TV
      type: glance
    conditions:
      - entity: sensor.lg_tv_source
        state_not: "off"
      - entity: sensor.lg_tv_source
        state_not: "FireTV"
      - entity: sensor.lg_tv_source
        state_not: "DVD Player"
    type: conditional
id: media
title: "\U0001F5A5 Media"
type: "custom:vertical-stack-in-card"

Here is an example of some scripts that are called…

tv_off:
  alias: TV OFF
  sequence:
  - service: mqtt.publish
    data:
      payload: 'off'
      qos: 0
      retain: false
      topic: ha/lgtv/source
  - service: switch.turn_off
    data:
      entity_id: switch.tv_toggle
  - service: mqtt.publish
    data:
      topic: frontNode1/ir/send
      payload: 3,20DFA35C,32,0
      qos: 0
      retain: false
  - service: switch.turn_off
    data:
      entity_id: switch.dvd_toggle
  - service: mqtt.publish
    data:
      topic: frontNode1/ir/send
      payload: 4,F4B92,20,4
      qos: 0
      retain: false
fire_netflix:
  alias: Netflix
  sequence:
  - service: mqtt.publish
    data:
      payload: FireTV
      qos: 0
      retain: false
      topic: ha/lgtv/source
  - service: mqtt.publish
    data:
      payload: FireTV
      qos: 0
      retain: false
      topic: nodeRed1/remote
  - service: androidtv.adb_command
    data:
      entity_id: media_player.fire_tv
      command: "HOME"
  - service: mqtt.publish
    data:
      topic: frontNode2/BleHidControlKey/send
      payload: '0x0223'
      qos: 0
      retain: false
  - service: media_player.select_source
    data:
      entity_id: media_player.fire_tv
      source: 'com.netflix.ninja'
  - service: switch.turn_on
    data:
      entity_id: switch.tv_toggle
3 Likes

@TheDobstopper, First thank you for the topic because I searched a lot and had not found anything like it. I have a question I want to use only the number part of your code. Does this require anything in configuration.yaml or elsewhere in HA?

How did you create the binary sensor?

I’m quite new to HA and I’m looking to replace my current solution (Simple Control with iTach to control IR devices).

Could you share your configuration? Looks like something I could use

@mpi I shared my config on Github, but it is now over a year old and won’t work with the latest version of the custom cards I used. It is still useful for beginners as I explain every single component and Lovelace card used.

I have several versions of this Lovelace setup, depending on whether I have a Home Assistant-compatible TV and AV receiver, or an old TV with Logitech Harmony/Broadlink or device. Tell me your future plans and I’ll give you some advice.

Here is an example of how I did the first row of power and volume buttons. I utilize the template feature for button_card to reduce copy & pasting the same config over and over:

              type: horizontal-stack
              cards:    
                - type: "custom:button-card"
                  color_type: card
                  template: power_button
                  name: Onkyo
                  entity: media_player.av_receiver
                - type: "custom:button-card"
                  color_type: card
                  template: volume_button
                  entity: media_player.av_receiver
                  icon: mdi:volume-minus
                  tap_action: 
                    service: media_player.volume_down
                    action: call-service             
                    service_data:
                      entity_id: media_player.av_receiver                            
                - type: "custom:button-card"
                  color_type: card
                  template: volume_button
                  icon: mdi:volume-plus
                  entity: media_player.av_receiver
                  tap_action: 
                    service: media_player.volume_up
                    action: call-service             
                    service_data:
                      entity_id: media_player.av_receiver  
                - type: "custom:button-card"
                  color_type: card
                  name: TV            
                  entity: binary_sensor.vizio_tv
                  template: power_button
                  tap_action: 
                    action: call-service
                    service: script.toggle
                    service_data:
                      entity_id: script.hm_power_tv

Here is what the button templates look like:

  power_button:
    aspect_ratio: 4/3
    icon: mdi:power
    styles:
      card:
        - filter: opacity(90%)
        - border-radius: 10px      
    tap_action: 
      action: toggle
    hold_action:
      action: more-info  
    color: rgb(255, 255, 255)
    state:                        
      - value: 'on'
        color:  rgb(223, 255, 97)       

  volume_button:
    color: white
    show_name: false
    aspect_ratio: 4/3
    styles:
      card:
        - filter: opacity(90%)
        - border-radius: 10px  
    state:                        
      - value: 'on'
        color:  rgb(223, 255, 97)

and you can achieve something like this (after setting up all components and more):

image

2 Likes

this is great! cn you share the lovelace config please?

- type: conditional
                conditions:
                  - entity: switch.remote
                    state: "on"
                card:
                  type: glance
                  show_name: false
                  show_state: false
                  columns: 4
                  entities:
                    - entity: script.tv_back
                      icon: mdi:undo
                      tap_action:
                       action: toggle
                    - entity: script.tv_up
                      icon: mdi:arrow-up-thick
                      tap_action:
                       action: toggle
                    - entity: script.tv_exit
                      icon: mdi:exit-to-app
                      tap_action:
                       action: toggle
                    - entity: script.tv_open_plex
                      icon: mdi:plex
                      tap_action:
                       action: toggle
                    - entity: script.tv_left
                      icon: mdi:arrow-left-thick
                      tap_action:
                       action: toggle
                    - entity: script.tv_ok
                      icon: mdi:image-filter-center-focus
                      tap_action:
                       action: toggle
                    - entity: script.tv_right
                      icon: mdi:arrow-right-thick
                      tap_action:
                       action: toggle
                    - entity: script.tv_open_netflix
                      icon: mdi:netflix
                      tap_action:
                       action: toggle
                    - entity: script.lr_volume_down
                      icon: mdi:volume-minus
                      tap_action:
                       action: toggle
                    - entity: script.tv_down
                      icon: mdi:arrow-down-thick
                      tap_action:
                       action: toggle
                    - entity: script.lr_volume_up
                      icon: mdi:volume-plus
                      tap_action:
                       action: toggle
                    - entity: script.tv_open_amazon
                      icon: mdi:amazon
                      tap_action:
                       action: toggle

`

Its abit messy yaml wise(and in general), it kept getting turned upside in raw config editor. I couldn’t get the outside border to stick without it flattening the buttons. Works great! I need to change the button links to work to intents for the HA web app, they work perfectly in chrome bookmark on android.

cards:
  - cards:
      - color_type: blank-card
        type: 'custom:button-card'
      - cards:
          - card:
              attribute: app_name
              entity: media_player.chromecast_ultra
              type: 'custom:state-attribute-element'
            conditions:
              - entity: media_player.chromecast_ultra
                state: playing
            type: conditional
        type: vertical-stack
      - color_type: blank-card
        type: 'custom:button-card'
      - color_type: blank-card
        type: 'custom:button-card'
      - color_type: blank-card
        type: 'custom:button-card'
      - aspect_ratio: 1/1
        color: 'rgb(230, 30, 30)'
        icon: 'mdi:power'
        size: 99%
        styles:
          card:
            - border-radius: 50%
        tap_action:
          action: call-service
          service: switch.turn_on
          service_data:
            entity_id: switch.ir_power
        type: 'custom:button-card'
      - color_type: blank-card
        type: 'custom:button-card'
    column_width:
      - 5
      - 150
      - 10
      - 20
      - 80
      - 80
      - 5
    layout: horizontal
    min_columns: 4
    type: 'custom:layout-card'
  - cards:
      - color_type: blank-card
        type: 'custom:button-card'
      - color_type: blank-card
        type: 'custom:button-card'
      - aspect_ratio: 1/1
        icon: 'mdi:undo'
        size: 99%
        styles:
          card:
            - border-radius: 5%
        tap_action:
          action: call-service
          service: switch.turn_on
          service_data:
            entity_id: switch.ir_exit
        type: 'custom:button-card'
      - aspect_ratio: 1/1
        icon: 'mdi:television-classic'
        size: 99%
        styles:
          card:
            - border-radius: 5%
        tap_action:
          action: call-service
          service: switch.turn_on
          service_data:
            entity_id: switch.ir_source
        type: 'custom:button-card'
      - aspect_ratio: 1/1
        icon: 'mdi:ghost'
        size: 99%
        styles:
          card:
            - border-radius: 5%
        tap_action:
          action: call-service
          service: switch.turn_on
          service_data:
            entity_id: switch.ir_menu
        type: 'custom:button-card'
      - color_type: blank-card
        type: 'custom:button-card'
      - color_type: blank-card
        type: 'custom:button-card'
    type: horizontal-stack
  - cards:
      - color_type: blank-card
        type: 'custom:button-card'
      - image: /local/icons/netflix.webp
        tap_action:
          action: url
          url_path: 'http://www.netflix.com'
        type: picture
      - color_type: blank-card
        type: 'custom:button-card'
      - aspect_ratio: 1/1
        icon: 'mdi:menu-up'
        size: 99%
        styles:
          card:
            - border-radius: 5%
        tap_action:
          action: call-service
          service: switch.turn_on
          service_data:
            entity_id: switch.ir_up
        type: 'custom:button-card'
      - color_type: blank-card
        type: 'custom:button-card'
      - image: /local/icons/emby.webp
        tap_action:
          action: url
          url_path: 'https://false.duckdns.org/emby/web/index.html#!/home.html'
        type: picture
      - color_type: blank-card
        type: 'custom:button-card'
    type: horizontal-stack
  - cards:
      - color_type: blank-card
        type: 'custom:button-card'
      - color_type: blank-card
        type: 'custom:button-card'
      - aspect_ratio: 1/1
        icon: 'mdi:menu-left'
        size: 99%
        styles:
          card:
            - border-radius: 5%
        tap_action:
          action: call-service
          service: switch.turn_on
          service_data:
            entity_id: switch.ir_left
        type: 'custom:button-card'
      - aspect_ratio: 1/1
        icon: 'mdi:radiobox-marked'
        size: 99%
        styles:
          card:
            - border-radius: 5%
        tap_action:
          action: call-service
          service: switch.turn_on
          service_data:
            entity_id: switch.ir_ok
        type: 'custom:button-card'
      - aspect_ratio: 1/1
        icon: 'mdi:menu-right'
        size: 99%
        styles:
          card:
            - border-radius: 5%
        tap_action:
          action: call-service
          service: switch.turn_on
          service_data:
            entity_id: switch.ir_right
        type: 'custom:button-card'
      - color_type: blank-card
        type: 'custom:button-card'
      - color_type: blank-card
        type: 'custom:button-card'
    type: horizontal-stack
  - cards:
      - color_type: blank-card
        type: 'custom:button-card'
      - image: /local/icons/youtube.png
        tap_action:
          action: url
          url_path: 'http://www.youtube.com'
        type: picture
      - color_type: blank-card
        type: 'custom:button-card'
      - aspect_ratio: 1/1
        icon: 'mdi:menu-down'
        size: 99%
        styles:
          card:
            - border-radius: 5%
        tap_action:
          action: call-service
          service: switch.turn_on
          service_data:
            entity_id: switch.ir_down
        type: 'custom:button-card'
      - color_type: blank-card
        type: 'custom:button-card'
      - image: /local/icons/flix.png
        tap_action:
          action: url
          url_path: 'http://www.test.site'
        type: picture
      - color_type: blank-card
        type: 'custom:button-card'
    type: horizontal-stack
  - cards:
      - color_type: blank-card
        type: 'custom:button-card'
      - color_type: blank-card
        type: 'custom:button-card'
      - aspect_ratio: 1/1
        icon: 'mdi:volume-off'
        size: 99%
        styles:
          card:
            - border-radius: 5%
        tap_action:
          action: call-service
          service: switch.turn_on
          service_data:
            entity_id: switch.ir_vol_mute
        type: 'custom:button-card'
      - aspect_ratio: 1/1
        hold_action:
          action: call-service
          repeat: 50
          service: switch.turn_on
          service_data:
            entity_id: switch.ir_vol_dn
        icon: 'mdi:volume-low'
        size: 99%
        styles:
          card:
            - border-radius: 5%
        type: 'custom:button-card'
      - aspect_ratio: 1/1
        hold_action:
          action: call-service
          repeat: 50
          service: switch.turn_on
          service_data:
            entity_id: switch.ir_vol_up
        icon: 'mdi:volume-high'
        size: 99%
        styles:
          card:
            - border-radius: 5%
        type: 'custom:button-card'
      - color_type: blank-card
        type: 'custom:button-card'
      - color_type: blank-card
        type: 'custom:button-card'
    type: horizontal-stack
  - cards:
      - color_type: blank-card
        type: 'custom:button-card'
      - artwork: cover
        entity: media_player.chromecast_ultra
        hide:
          controls: false
          name: true
          power: false
          power_state: true
          volume: false
        info: scroll
        replace_mute: stop
        source: icon
        type: 'custom:mini-media-player'
      - color_type: blank-card
        type: 'custom:button-card'
    column_width:
      - 1%
      - 98%
      - 1%
    layout: horizontal
    min_columns: 1
    type: 'custom:layout-card'
  - cards:
      - image: /local/icons/spotify.png
        tap_action:
          action: url
          url_path: 'https://www.spotify.com/au/'
        type: picture
      - image: /local/icons/flix.png
        tap_action:
          action: url
          url_path: 'http://www.test.site'
        type: picture
      - image: /local/icons/abciview.png
        tap_action:
          action: url
          url_path: 'https://iview.abc.net.au/'
        type: picture
      - image: /local/icons/emby.webp
        tap_action:
          action: url
          url_path: 'https://false.duckdns.org/emby/web/index.html#!/home.html'
        type: picture
      - image: /local/icons/youtube.png
        tap_action:
          action: url
          url_path: 'http://www.youtube.com'
        type: picture
      - image: /local/icons/netflix.webp
        tap_action:
          action: url
          url_path: 'http://www.netflix.com'
        type: picture
    type: horizontal-stack
type: vertical-stack

1 Like