Share your Lovelace Home Theater Remote Setup

Could you please help to explain how to get the border/outline removed from the invisible buttons on top of play button? Thank you.

image

I suspect that the borders are showing due to the theme you are using. I used the IOS themes from the HACS frontend store. Maybe that makes a difference for you.

I control most everything through my Fire Cube Gen 3, so this HACS card works perfectly for me out of the box …it also helps that I wrote the card too :wink:

I use the same card with different configuration values for my bedroom TV as well

Can I have a code in the middle column? Please? Thanks.

Sure. It’s a lot of code so I’ll put in just a portion but if you need something specific I can add it.

This is the start of the middle column (vertical stack)

  - type: conditional
    conditions: []
    card:
      type: vertical-stack
      cards:
        - type: horizontal-stack
          cards:
            - show_name: false
              show_icon: true
              type: custom:button-card
              entity: input_text.remote_state
              tap_action:
                action: call-service
                service: script.remote_set_state_apple
                data: {}
                target: {}
              icon: si:appletv
              color: rgb(32, 33, 36)
              color_type: card
              styles:
                card: null
              state:
                - value: Apple
                  color: rgb(55, 65, 82)
              show_state: false
            - show_name: false
              show_icon: true
              type: custom:button-card
              entity: input_text.remote_state
              tap_action:
                action: call-service
                service: script.remote_set_state_receiver
                data: {}
                target: {}
              icon: mdi:audio-video
              color: rgb(32, 33, 36)
              color_type: card
              styles:
                card: null
              state:
                - value: Receiver
                  color: rgb(55, 65, 82)
              show_state: false
            - show_name: false
              show_icon: true
              type: custom:button-card
              entity: input_text.remote_state
              tap_action:
                action: call-service
                service: script.remote_set_state_bluray
                data: {}
                target: {}
              icon: mdi:disc
              color: rgb(32, 33, 36)
              color_type: card
              styles:
                card: null
              state:
                - value: Bluray
                  color: rgb(55, 65, 82)
              show_state: false
            - show_name: false
              show_icon: true
              type: custom:button-card
              entity: input_text.remote_state
              tap_action:
                action: call-service
                service: script.remote_set_state_projector
                data: {}
                target: {}
              icon: mdi:projector
              color: rgb(32, 33, 36)
              color_type: card
              styles:
                card: null
              state:
                - value: Projector
                  color: rgb(55, 65, 82)
              show_state: false
            - show_name: false
              show_icon: true
              type: custom:button-card
              entity: input_text.remote_state
              tap_action:
                action: call-service
                service: script.remote_set_state_xfinity
                data: {}
                target: {}
              icon: mdi:television-box
              color: rgb(32, 33, 36)
              color_type: card
              styles:
                card: null
              state:
                - value: Xfinity
                  color: rgb(55, 65, 82)
              show_state: false

Then the code continues with additional horizontal stacks

        - type: horizontal-stack
          cards:
            - show_name: false
              show_icon: true
              type: button
              icon: none
              hold_action:
                action: none
            - show_name: false
              show_icon: true
              type: button
              tap_action:
                action: call-service
                service: script.remote_arrow_up
                data: {}
                target: {}
              icon: mdi:arrow-up
            - show_name: false
              show_icon: true
              type: button
              tap_action:
                action: call-service
                service: script.remote_menu
                data: {}
                target: {}
              icon: mdi:menu
        - type: horizontal-stack
          cards:
            - show_name: false
              show_icon: true
              type: button
              tap_action:
                action: call-service
                service: script.remote_arrow_left
                data: {}
                target: {}
              name: Left
              icon: mdi:arrow-left
              entity: script.remote_arrow_left
            - show_name: false
              show_icon: true
              type: button
              tap_action:
                action: call-service
                service: script.remote_select
                data: {}
                target: {}
              icon: mdi:circle
            - show_name: false
              show_icon: true
              type: button
              tap_action:
                action: call-service
                service: script.remote_arrow_right
                data: {}
                target: {}
              icon: mdi:arrow-right

The code then repeats a lot of this for each display of buttons. A lot of the buttons are calling generic scripts, such as remote_arrow_up. This script is composed of a bunch of conditions to determine which device I have selected and then send the arrow up command to the correct equipment.

Hopefully this helps, let me know if there is something more needed.

Can I have a code for a script? I try to figure out how this works. Please and Thanks.

Sure - You will see each icon calls a script related to the button. I’ll walk you through the “Remote Arrow Up” script calls.

This script checks a remote state variable I created to understand which “mode” the screen is in. For instance, I may want to use the arrow keys on my marantz menu but then later on use those same keys for the blueray player. Depending on the mode will cause which script to be called.

remote_arrow_up:
sequence:
- choose:
- conditions:
- condition: state
entity_id: input_text.remote_state
state: “Apple”
sequence:
- service: script.remote_apple_command
data:
command: up
- conditions:
- condition: state
entity_id: input_text.remote_state
state: “Receiver”
sequence:
- service: script.remote_marantz_direction_up
- conditions:
- condition: state
entity_id: input_text.remote_state
state: “Bluray”
sequence:
- service: script.remote_bluray_up
- conditions:
- condition: state
entity_id: input_text.remote_state
state: “Xfinity”
sequence:
- service: script.remote_cable_up
- conditions:
- condition: state
entity_id: input_text.remote_state
state: “Projector”
sequence:
- service: script.remote_projector_up

Let’s say we are in the marantz receiver mode. The “remote_marantz_direction_up” script will be called which will send the specific instructions to the marantz device.

remote_marantz_direction_up:
alias: Remote Marantz Direction Up
sequence:
- service: denonavr.get_command
data:
entity_id: media_player.marantz_av7705
command: /goform/formiPhoneAppDirect.xml?MNCUP

In this marantz example I’m using the direct integration capabilities with HA. Some of these devices I have to use an IR relay command. Almost all of the buttons behave in this manner for the middle section.

Hopefully this helps!

thanks for sharing, I slightly modified it to make a simple Player pop remote, it was very usefull :pray:
I don’t know why but the power icon is not centered :man_shrugging: