Use lovelace card to send Harmony Hub commands

Third party integrations
1

I need some help sending commands with the Logitech Harmony Hub through Home Assistant using a lovelace card.
I’m trying to set it up to have a picture elements card that uses an image of a remote I made which looks like this:

remote_controller
remote_controller1026×2219 51.2 KB

Then I will place icons over it which will function as buttons so the overall look will be like this:

remote_controller_icons
remote_controller_icons1026×2219 59.6 KB

I added the first icon/button and positioned it and it looks pretty good:

Screen Shot 2020-08-30 at 1.43.41 AM
Screen Shot 2020-08-30 at 1.43.41 AM914×1446 84.3 KB

The code I used is as follows:

elements:
  - entity: remote.universal_remote
    icon: 'mdi:power'
    style:
      '--mdc-icon-size': 70%
      left: 19.6%
      top: 10.0%
    tap_action:
      action: call-service
      service: remote.send_command
      data:
        command: PowerToggle
        device: 51124197
    type: state-icon
image: /local/remote/remote_controller.svg
type: picture-elements

When I click the power icon/button which should send the command to toggle the power of my TV, instead it displays an error message that says:
Failed to call service remote/send_command. required key not provided @ data[‘command’]

So I’m just not sure what to do here to get it working. Your help is hugely appreciated.

Bonus points if anyone can tell me how to achieve the following:

  • How can I set the icon colour to something different than what it is due to the theme?
  • Can I make the power icon change colour if the state of any of the remote’s activities is on?
2

did you figure out to use commands in Lovelace?

3

tap action is configured wrong. Check out the docs, data is not a valid key. service_data is.

    tap_action:
      action: call-service
      service: remote.send_command
      service_data:
        command: PowerToggle
        device: 51124197