Context aware Harmony remote setup

Hi all,

i am trying to adapt the harmony remote to my system but it seems that the following css style option always breaks my lovelace config:

           <<: *style_anchor

Can anybody tell me what this used for and why it possibly breaks lovelace ?

For example:

      card:
        type: picture-elements
        image: /local/lovelace/icons_harmony_remote/empty.png?v2.4
        elements: 
        - type: icon  # Menu
          tap_action:
            action: call-service
            service: remote.send_command
            service_data:
              entity_id: remote.harmonyhub
              device: 54869661
              command: Menu
          # image: /local/lovelace/icons_harmony_remote/menu.svg?v1
          icon: mdi:menu
          style: 
            <<: *style_anchor
            top: 15%
            left: 20%

The second issue i have is as soon as i add a second button the first one disappears without any error shown in lovelace…

Greetings

It’s a yaml anchor that enables you to define repetitive code once and reuse it.

You may have deleted the definition, it’s in the original code. You can alter it once and all the buttons will change.

It’s the bit that starts <<: &style_anchor

1 Like

Ah ok perfect i´ll take a look again! Thanks very much!

Tbh, although this works, there have been a few improvements since I did it. I think I’d use https://github.com/thomasloven/hass-lovelace_gen if I was starting again.

Strange thing do you happen to know why the icons are not in the middle ?

grafik

Cos you’ve not configured it right?

No idea unless you post your yaml,

Ah i did in my post above :slight_smile:

        type: picture-elements
        image: /local/lovelace/icons_harmony_remote/empty.png?v2.4
        elements: 
        - type: icon  # Menu
          tap_action:
            action: call-service
            service: remote.send_command
            service_data:
              entity_id: remote.harmonyhub
              device: 54869661
              command: Menu
          # image: /local/lovelace/icons_harmony_remote/menu.svg?v1
          icon: mdi:menu
          style: 
            #<<: *style_anchor
            top: 15%
            left: 20%
            <<: &style_anchor 
              width: 2em
              height: 2em
              padding: 15px
              background-color: grey #var(--paper-item-icon-color)
              border-radius: 50%
              box-shadow: 0 3px 5px -1px rgba(0,0,0,.2), 0 6px 10px 0 rgba(0,0,0,.14), 0 1px 18px 0 rgba(0,0,0,.12)

I am quite sure i am missing something…

Solved it …my fault! As i use icons needed to remove width/height in style…

Is there a way to highlight the buttons on click (changing color or whatsoever)?

Here is mine so far:

So, as mentioned above, if I was doing this again I’d use lovelace_gen from Thomas Loven.

My configuration, just for the remote, had grown to over 500 rows, much of it repetitive, it’s now 157.

I’ve learned more about CSS styling and so was able to overcome the issues I’d previously had with using icons. So this is much neater, easier to modify and easier to maintain.

Buttons still appear when they’re relevant and disappear when not and it looks similar but is much easier to adapt for different styles as well. The application buttons at the bottom are new and result from me getting an NVidia Shield and using the Android TV component. Took a while to figure out the commands for some of the apps, whichever one’s active gets coloured in.


What it looks like on my phone.

# lovelace_gen

title: Remote
path: remote
icon: mdi:play-pause
background: center / cover no-repeat url("/local/images/backgrounds/remote.jpg") fixed rgba(170, 170, 170, 1)
panel: true
cards:
  - type: custom:layout-card
    layout: vertical
    cards:

    ############################################
    ##  Activities
    ############################################
    {% macro activity(entity, top, left) -%}
          - type: state-icon
            entity: {{ entity }}
            tap_action:
              action: toggle
            style:
              top: {{ top }}%
              left: {{ left }}%
              <<: &style_anchor
                transform: matrix(1.8, 0, 0, 1.8, -20, -20)
                background: rgb(105, 199, 252, .9)
                filter: drop-shadow(2px 2px 5px rgb(100, 100, 100, 1)
                border-radius: 100%
    {%- endmacro %}

      - type: picture-elements
        image: /local/images/short-empty.png
        elements: 
          {{ activity('switch.lounge_tv', 50, 12.5) }}
          {{ activity('switch.usbc', 50, 37.5) }}
          {{ activity('switch.ps3', 50, 62.5) }}
          {{ activity('switch.soundbar', 50, 87.5) }}

    ############################################
    ##  Conditional Activity Buttons
    ############################################
    {% macro button(device, command, icon, top, left) -%}
            - type: state-icon
              entity: remote.lounge
              tap_action:
                action: call-service
                service: remote.send_command
                service_data:
                  entity_id: remote.lounge
                  device: {{ device }}
                  command: {{ command }}
              icon: mdi:{{ icon }}
              style:
                <<: *style_anchor
                top: {{ top }}%
                left: {{ left }}%
    {%- endmacro %}

    {% macro nsbutton(device, command, icon, top, left) -%}
            - type: state-icon
              entity: remote.lounge
              tap_action:
                action: call-service
                service: remote.send_command
                service_data:
                  entity_id: remote.lounge
                  device: {{ device }}
                  command: {{ command }}
              icon: mdi:{{ icon }}
              style:
                transform: matrix(2.5, 0, 0, 2.5, -20, -20)
                top: {{ top }}%
                left: {{ left }}%
    {%- endmacro %}

    ############################################
    ##  Volume controls for all activities
    ############################################
      - type: conditional
        conditions:
          - entity: remote.lounge
            state: "on"
        card:
          type: picture-elements
          image: /local/images/short-empty.png
          elements:
            {{ button(29590185, 'VolumeDown', 'volume-minus', 50, 12.5) }}
            {{ button(29590185, 'VolumeUp', 'volume-plus', 50, 37.5) }}
            {{ button(29590185, 'Mute', 'volume-off', 50, 62.5) }}
            {{ button(29590185, 'PowerToggle', 'speaker', 50, 87.5) }}

    ############################################
    ##  Shield Remote
    ############################################
      - type: conditional
        conditions:
          - entity: switch.lounge_tv
            state: "on"
        card:
          type: picture-elements
          image: /local/images/empty.png
          elements:
            - type: image
              image: /local/images/remotecircle.png
              style:
                top: 50%
                left: 50%
                width: 60%
                opacity: 0.9
                filter: drop-shadow(2px 2px 5px rgb(100, 100, 100, 1)
                border-radius: 100%

            {{ button(64042126, 'Home', 'home-outline', 15, 12.5) }}
            {{ button(64042126, 'Back', 'undo-variant', 15, 87.5) }}
            {{ button(64042126, 'Select', 'keyboard-return', 50, 50) }}
                transform: matrix(2.2, 0, 0, 2.2, -20, -20)
            {{ nsbutton(64042126, 'DirectionUp', 'chevron-up', 22, 50) }}
            {{ nsbutton(64042126, 'DirectionDown', 'chevron-down', 78, 50) }}
            {{ nsbutton(64042126, 'DirectionLeft', 'chevron-left', 50, 27.5) }}
            {{ nsbutton(64042126, 'DirectionRight', 'chevron-right', 50, 72.5) }}
            {{ button(64042126, 'Pause', 'pause', 85, 12.5) }}
            {{ button(64042126, 'Play', 'play', 85, 87.5) }}
            
    ############################################
    ##  Applications
    ############################################
    {% macro activity(app, top, left, adbcommand) -%}
          - type: image
            entity: sensor.cur_shield_app
            tap_action:
              action: call-service
              service: script.launch_shield_app
              service_data:
                adbcommand: am start -a android.intent.action.VIEW -d -n {{ adbcommand }}
            image: /local/images/logos/{{app}}.png
            filter: grayscale(0.95) drop-shadow(2px 2px 5px rgb(100, 100, 100, 1) 
            state_filter:
              '{{app}}': drop-shadow(2px 2px 5px rgb(100, 100, 100, 1)
            style:
              background: transparent
              border-radius: 100%
              top: {{ top }}%
              left: {{ left }}%
              width: 72px
    {%- endmacro %}

      - type: picture-elements
        image: /local/images/medium-empty.png
        elements: 
          {{ activity('iPlayer', 27.5, 12.5, 'com.nvidia.bbciplayer/.MainPlayerActivity') }}
          {{ activity('PrimeVideo', 27.5, 37.5, 'com.amazon.amazonvideo.livingroom/com.amazon.ignition.IgnitionActivity') }}
          {{ activity('Netflix', 27.5, 62.5, 'com.netflix.ninja/.MainActivity') }}
          {{ activity('Kodi', 27.5, 87.5, 'org.xbmc.kodi/.Splash') }}
          {{ activity('YouTube', 72.5, 12.5, 'com.google.android.youtube.tv/com.google.android.apps.youtube.tv.activity.ShellActivity') }}
          {{ activity('RedBullTV', 72.5, 37.5, 'com.nousguide.android.rbtv/com.redbull.launch.SplashActivity') }}
          {{ activity('ITVHub', 72.5, 62.5, 'air.ITVMobilePlayer/com.itv.tenft.itvhub.MainActivity') }}
          {{ activity('GooglePlayMusic', 72.5, 87.5, 'com.google.android.music/.tv.HomeActivity') }}

5 Likes

Hey eggman,

love you second attempt remote setup. I would like to use it in my setup, but I am not sure where to start and it this is there is other part to this that I should be looking at before making this decision. I would like to use this setup to control a LG TV/ Denon AVR/ PS4 and Nvidia shield. Is the other part to you config file that I would need to ask for and edit before I could get this to work? With no apparent scripts or automation references in your file, how does the control know what state the devices are constantly in? Would I be able to work something similar without having a main hub such as your harmony setup? I know that I am trying to jump into the deep end without first spending some time in the shallow end.

The top row, controls some harmony activities, that turn on whatever devices I need for each one. They are then configured in home-assistant as switches. If you’ve not got a harmony remote I’m sure other methods could be used. As a minimum, you could have a switch for each device and turn on the ones you want manually.

The main section of controls just call a service to do whatever, there’s no other config supporting this, the service parameters are all in the card config and the service itself is for the harmony remote. Again, as long as you can use a service call of some type for each button, you can replace that fairly easily. If you need to use different services for different devices then use conditional cards to swap things in and out.

The bottom section is dependant on the AndroidTV config, a sensor containing the currently running app and a script, called by the buttons, to swap apps.

All the elements this depends on are in the code below.

#################################################
# Hamrony Remote Setup
#################################################

remote:
  - platform: harmony
    host: 192.168.1.69
    name: lounge
    activity: TV

switch:
  - platform: template
    switches:
      lounge_tv:
        friendly_name: Lounge TV
        value_template: "{{ is_state_attr('remote.lounge', 'current_activity', 'SHIELD TV') }}"
        turn_on:
          service: remote.turn_on
          data:
            entity_id: remote.lounge
            activity: "SHIELD TV"
        turn_off:
          service: remote.turn_on
          data:
            entity_id: remote.lounge
            activity: "PowerOff"
        icon_template: >-
          {% if is_state_attr('remote.lounge', 'current_activity', 'SHIELD TV') %}
            mdi:television
          {% else %}
            mdi:television-off
          {% endif %}

      soundbar:
        friendly_name: Soundbar
        value_template: "{{ is_state_attr('remote.lounge', 'current_activity', 'Soundbar') }}"
        turn_on:
          service: remote.turn_on
          data:
            entity_id: remote.lounge
            activity: "Soundbar"
        turn_off:
          service: remote.turn_on
          data:
            entity_id: remote.lounge
            activity: "PowerOff"
        icon_template: >-
          {% if is_state_attr('remote.lounge', 'current_activity', 'Soundbar') %}
            mdi:music
          {% else %}
            mdi:music-off
          {% endif %}

      ps3:
        friendly_name: PS4
        value_template: "{{ is_state_attr('remote.lounge', 'current_activity', 'PS4') }}"
        turn_on:
          service: remote.turn_on
          data:
            entity_id: remote.lounge
            activity: "PS4"
        turn_off:
          service: remote.turn_on
          data:
            entity_id: remote.lounge
            activity: "PowerOff"
        icon_template: >-
          {% if is_state_attr('remote.lounge', 'current_activity', 'PS4') %}
            mdi:playstation
          {% else %}
            mdi:playstation
          {% endif %}

      usbc:
        friendly_name: USB-C
        value_template: "{{ is_state_attr('remote.lounge', 'current_activity', 'USB-C Cable') }}"
        turn_on:
          service: remote.turn_on
          data:
            entity_id: remote.lounge
            activity: "USB-C Cable"
        turn_off:
          service: remote.turn_on
          data:
            entity_id: remote.lounge
            activity: "PowerOff"
        icon_template: >-
          {% if is_state_attr('remote.lounge', 'current_activity', 'USB-C Cable') %}
            mdi:cellphone-play
          {% else %}
            mdi:cellphone
          {% endif %}

#################################################
# Shield TV Setup
#################################################
media_player:
  - platform: androidtv
    name: Shield
    host: 192.168.1.18
    # adbkey: "/config/adbkey/adbkey"
    device_class: androidtv
    apps:
      com.amazon.amazonvideo.livingroom: "PrimeVideo"
      com.google.android.tvlauncher: "Home"
      com.nvidia.bbciplayer: "iPlayer"
      com.channel5.my5: "My5"
      com.nousguide.android.rbtv: "RedBullTV"
      com.google.android.music: "GooglePlayMusic"
      air.ITVMobilePlayer: "ITVHub"

    state_detection_rules:
      "com.google.android.tvlauncher":
        - "standby"
      "com.amazon.amazonvideo.livingroom":
        - "paused":
            "wake_lock_size": 0
        - "playing":
            "wake_lock_size": 2
        - "standby"
      "com.nvidia.bbciplayer":
        - "paused":
            "wake_lock_size": 1
        - "playing":
            "wake_lock_size": 2
        - "standby"

script:
  launch_shield_app:
    sequence:
      - service: switch.turn_on
        entity_id: switch.lounge_tv

      - wait_template: "{{ is_state('switch.lounge_tv', 'on') }}"
        timeout: "00:01:00"
        continue_on_timeout: "false"

      - service: androidtv.adb_command
        data_template:
          command: "{{ adbcommand }}"
          entity_id: media_player.shield

sensor:
  - platform: template
    sensors:
      cur_shield_app:
        friendly_name: "Shield App"
        value_template: "{{ state_attr('media_player.shield', 'app_name') }}"
1 Like

@eggman Any chance you can share the new images you’re using? Thanks for your examples - I’ve learned so much from them!

Yes, the set up looks awesome. Great if we can get the shared package. Thanks so much

Apologies, it’s taken me a while to get round to uploading all the files they can be found in my home assistant configuration here:

I’ve been tweaking in the meantime and tweaked a few things, mostly moving to this theme

Off

On

1 Like

looks awesome
but i guess too much work to setup for me :confused:
stuff like this should be much faster been adopted to default :frowning:

1 Like

Thanks for sharing this but could I ask you to add the missing dpad.svg file to the repo.

This is what mine looks like:

And of course I can click each button on the “Virtual RC” just as if it was real. The card is a vertical stack with support for 8 mediaplayers of various types spread around my house. It only shows media player cards when a player is active.

3 Likes

Drew, did you get de dpad file, i’m in the need of that one to but kind find it.

Hi everyone - I have been following this thread and find this entire customization amazing. I am brand new to HA and YAML as well. Is there a place where I can find step by step instructions on how to create the harmony remote dashboard mentioned here? I have no clue how to create a custom dashboard using YAML and would appreciate any help. Thank you!

1 Like

You need to start easy if you have little or no previous experience. If you are persistent, it’ll take you a month or more to get to up to speed. Don’t jump right into advanced YAML structures from day one. It will only frustrate you. Sorry for that.