Use of icons on a picture-elements card to build a remote control

Configuration Frontend
1

I’m trying to make a nice, compact remote control for my Harmony system.

I tried putting icons on a blank background and using it for a picture-elements card, but I can’t quite figure out how to make the icons call remote_ABC functions when pressed. I figure it’s got to be some combination of tap_action, call-service, and the required service entries. But when I try to put these together in a sensible way, I get errors like:

Platform rest not ready yet. Retrying in 180 seconds.
5:27 PM helpers/entity_platform.py (WARNING)

Platform rest not ready yet. Retrying in 180 seconds.
5:27 PM helpers/entity_platform.py (WARNING)

Platform rest not ready yet. Retrying in 180 seconds.
5:27 PM helpers/entity_platform.py (WARNING)

The code for one of my icons looks like this:

 - type: icon
         entity: remote.harmony_hub
         icon: mdi:volume-minus
         tap-action: call-service
          style:
             top: 50%
             left: 40%
           service: remote.send_command
           service_data:
             entity_id: remote.harmony_hub
             device: 41961817
             command: VolumeDown

(apologies if the indentation is off… it parses cleanly in real life…)

I’d be grateful for any assistance.

2

I used picture elements with Harmony remote. Here is the code. I created a script for each command and placed them in another yaml file.

  - type: picture-elements
    image: /local/tvremotebig.png
    elements:
      - type: service-button
        title: Back
        service: script.turn_on
        service_data:
          entity_id: script.tv_go_back
        style:
          top: 63%
          left: 65%
      - type: service-button
        title: Right
        service: script.turn_on
        service_data:
          entity_id: script.tv_go_right
        style:
          top: 43%
          left: 65%
      - type: service-button
        title: Left
        service: script.turn_on
        service_data:
          entity_id: script.tv_go_left
        style:
          top: 45%
          left: 35%
      - type: service-button
        title: Pause
        service: script.turn_on
        service_data:
          entity_id: script.tv_go_pause
        style:
          top: 90%
          left: 50%
      - type: service-button
        title: OK
        service: script.turn_on
        service_data:
          entity_id: script.tv_go_ok
        style:
          top: 45%
          left: 50%
      - type: service-button
        title: Down
        service: script.turn_on
        service_data:
          entity_id: script.tv_go_down
        style:
          top: 55%
          left: 50%
      - type: service-button
        title: Up
        service: script.turn_on
        service_data:
          entity_id: script.tv_go_up
        style:
          top: 35%
          left: 50%
      - type: service-button
        title: Up
        service: script.turn_on
        service_data:
          entity_id: script.bose_up
        style:
          top: 38%
          left: 20%
      - type: service-button
        title: Down
        service: script.turn_on
        service_data:
          entity_id: script.bose_down
        style:
          top: 55%
          left: 20%

harmony.yaml:

script:
  tv_go_up:
    sequence:
      - service: remote.send_command
        data_template: { "device":50972604, "command":"DirectionUp"}
  tv_go_down:
    sequence:
      - service: remote.send_command
        data_template: { "device":50972604, "command":"DirectionDown"}
  tv_go_left:
    sequence:
      - service: remote.send_command
        data_template: { "device":50972604, "command":"DirectionLeft"}
  tv_go_right:
    sequence:
      - service: remote.send_command
        data_template: { "device":50972604, "command":"DirectionRight"}
  tv_go_back:
    sequence:
      - service: remote.send_command
        data_template: { "device":50972604, "command":"Back"}
  tv_go_menu:
    sequence:
      - service: remote.send_command
        data_template: { "device":50972604, "command":"Menu"}
  tv_go_home:
    sequence:
      - service: remote.send_command
        data_template: { "device":50972604, "command":"Home"}
  tv_go_power_toggle:
    sequence:
      - service: remote.send_command
        data_template: { "device":50972604, "command":"PowerToggle"}
  tv_go_pause:
    sequence:
      - service: remote.send_command
        data_template: { "device":50972604, "command":"Pause"}
  tv_go_ok:
    sequence:
      - service: remote.send_command
        data_template: { "device":50972604, "command":"OK"}
  bose_toggle:
    sequence:
      - service: remote.send_command
        data_template: { "device":45375003, "command":"PowerToggle"}
  bose_off:
    sequence:
      - service: remote.send_command
        data_template: { "device":45375003, "command":"PowerOff"}
  bose_on:
    sequence:
      - service: remote.send_command
        data_template: { "device":45375003, "command":"PowerOn"}
  bose_mute:
    sequence:
      - service: remote.send_command
        data_template: { "device":45375003, "command":"Mute"}
  bose_down:
    sequence:
      - service: remote.send_command
        data_template: { "device":45375003, "command":"VolumeDown"}
  bose_up:
    sequence:
      - service: remote.send_command
        data_template: { "device":45375003, "command":"VolumeUp"}

Here is the end result (still work-in-progress).

1440×2960 901 KB

3 Likes
3

Been trying to recreate something like this and just found this post.

Looks like I am on the right track but don’t like the words that appear over the buttons.

Is there a way to create a service-button without the text but set the size. So it creates a transparent button over each button on the main image.

4

you can just write no text. Like this “”