Help Creating Buttons From Remote Image

I recently purchased a Broadlink RM4 Lite in order to get some of my remote controls into Home Assistant. I have learned the commands from my Dish Network remote into Home Assistant and now want to map them. I saw a pretty cool remote frontend for FireTV remotes in HACS that pretty much looked exactly like the fireTV remote and I was able to press buttons on a “virtual” remote. I was looking to do the same with the Dish remote but have no clue where to start. I have the image below…any help would be appreciated:

Did you have any luck with this?

Nope, didn’t get any responses and I’m not smart enough to figure it out. If you happened to figure anything out, please do share.

Yeah, I got it working with my Dish Hopper 3 and a Broadlink RM4 Pro by using a picture-elements card:

type: picture-elements
image: /local/dish_network_remote3.png
style:
  width: 50%
  height: auto
elements:
  - type: image
    image: /local/transparent3.png
    tap_action:
      action: call-service
      service: script.turn_on
      data:
        entity_id: script.dish_home
    style:
      top: 12.5%
      left: 50.5%
  - type: image
    image: /local/transparent3.png
    tap_action:
      action: call-service
      service: script.turn_on
      data:
        entity_id: script.dish_pause
    style:
      top: 44.5%
      left: 50%
  - type: image
    image: /local/transparent3.png
    tap_action:
      action: call-service
      service: script.turn_on
      data:
        entity_id: script.dish_select
    style:
      top: 28%
      left: 50%
  - type: image
    image: /local/transparent3.png
    tap_action:
      action: call-service
      service: script.turn_on
      data:
        entity_id: script.dish_guide
    style:
      top: 12.5%
      left: 80%
  - type: image
    image: /local/transparent3.png
    tap_action:
      action: call-service
      service: script.turn_on
      data:
        entity_id: script.dish_cancel
    style:
      top: 36.5%
      left: 21%
  - type: image
    image: /local/transparent3.png
    tap_action:
      action: call-service
      service: script.turn_on
      data:
        entity_id: script.dish_chup
    style:
      top: 19.5%
      left: 50%
  - type: image
    image: /local/transparent3.png
    tap_action:
      action: call-service
      service: script.turn_on
      data:
        entity_id: script.dish_chdown
    style:
      top: 36%
      left: 50%
  - type: image
    image: /local/transparent3.png
    tap_action:
      action: call-service
      service: script.turn_on
      data:
        entity_id: script.dish_left
    style:
      top: 28%
      left: 25%
  - type: image
    image: /local/transparent3.png
    tap_action:
      action: call-service
      service: script.turn_on
      data:
        entity_id: script.dish_right
    style:
      top: 28%
      left: 76%
  - type: image
    image: /local/transparent3.png
    tap_action:
      action: call-service
      service: script.turn_on
      data:
        entity_id: script.dish_dvr
    style:
      top: 12.5%
      left: 21.5%
  - type: image
    image: /local/transparent3.png
    tap_action:
      action: call-service
      service: script.turn_on
      data:
        entity_id: script.dish_chup
    style:
      top: 51.5%
      left: 74%
  - type: image
    image: /local/transparent3.png
    tap_action:
      action: call-service
      service: script.turn_on
      data:
        entity_id: script.dish_chdown
    style:
      top: 59%
      left: 74%
  - type: image
    image: /local/transparent3.png
    tap_action:
      action: call-service
      service: script.turn_on
      data:
        entity_id: script.dish_skipback
    hold_action:
      action: call-service
      service: script.turn_on
      data:
        entity_id: script.dish_reverse
    style:
      top: 44.5%
      left: 25%
  - type: image
    image: /local/transparent3.png
    tap_action:
      action: call-service
      service: script.turn_on
      data:
        entity_id: script.dish_skipforward
    hold_action:
      action: call-service
      service: script.turn_on
      data:
        entity_id: script.dish_forward
    style:
      top: 44.5%
      left: 75%
  - type: image
    image: /local/transparent3.png
    tap_action:
      action: call-service
      service: script.turn_on
      data:
        entity_id: script.Office_TV_Volume_Up
    style:
      top: 51.5%
      left: 26%
  - type: image
    image: /local/transparent3.png
    tap_action:
      action: call-service
      service: script.turn_on
      data:
        entity_id: script.Office_TV_Volume_Down
    style:
      top: 59%
      left: 26%
  - type: image
    image: /local/transparent3.png
    tap_action:
      action: call-service
      service: script.turn_on
      data:
        entity_id: script.office_tv_volume_mute
    style:
      top: 59%
      left: 50%
  - type: image
    image: /local/transparent3.png
    tap_action:
      action: call-service
      service: script.turn_on
      data:
        entity_id: script.dish_info
    style:
      top: 36.5%
      left: 78%
  - type: image
    image: /local/transparent3.png
    tap_action:
      action: call-service
      service: script.turn_on
      data:
        entity_id: script.dish_recall
    style:
      top: 53.5%
      left: 50%
  - type: image
    image: /local/transparent3.png
    tap_action:
      action: call-service
      service: script.turn_on
      data:
        entity_id: script.dish_options
    style:
      top: 20%
      left: 20%
  - type: image
    image: /local/transparent4.png
    tap_action:
      action: call-service
      service: script.turn_on
      data:
        entity_id: script.dish_cc
    style:
      top: 81.5%
      left: 70.5%
  - type: image
    image: /local/transparent4.png
    tap_action:
      action: call-service
      service: script.turn_on
      data:
        entity_id: script.dish_0
    style:
      top: 81.5%
      left: 50%
  - type: image
    image: /local/transparent4.png
    tap_action:
      action: call-service
      service: script.turn_on
      data:
        entity_id: script.dish_8
    style:
      top: 76%
      left: 50.5%
  - type: image
    image: /local/transparent4.png
    tap_action:
      action: call-service
      service: script.turn_on
      data:
        entity_id: script.dish_5
    style:
      top: 70.5%
      left: 50.5%
  - type: image
    image: /local/transparent4.png
    tap_action:
      action: call-service
      service: script.turn_on
      data:
        entity_id: script.dish_2
    style:
      top: 65.5%
      left: 50.5%
  - type: image
    image: /local/transparent4.png
    tap_action:
      action: call-service
      service: script.turn_on
      data:
        entity_id: script.dish_1
    style:
      top: 65.5%
      left: 28.5%
  - type: image
    image: /local/transparent4.png
    tap_action:
      action: call-service
      service: script.turn_on
      data:
        entity_id: script.dish_4
    style:
      top: 71%
      left: 28.5%
  - type: image
    image: /local/transparent4.png
    tap_action:
      action: call-service
      service: script.turn_on
      data:
        entity_id: script.dish_7
    style:
      top: 76%
      left: 29.5%
  - type: image
    image: /local/transparent4.png
    tap_action:
      action: call-service
      service: script.turn_on
      data:
        entity_id: script.dish_9
    style:
      top: 76%
      left: 71%
  - type: image
    image: /local/transparent4.png
    tap_action:
      action: call-service
      service: script.turn_on
      data:
        entity_id: script.dish_6
    style:
      top: 70.5%
      left: 71.5%
  - type: image
    image: /local/transparent4.png
    tap_action:
      action: call-service
      service: script.turn_on
      data:
        entity_id: script.dish_3
    style:
      top: 65.5%
      left: 72.5%
  - type: image
    image: /local/transparent4.png
    tap_action:
      action: call-service
      service: script.turn_on
      data:
        entity_id: script.dish_zoom
    style:
      top: 81.5%
      left: 30%
  - type: image
    image: /local/transparent4.png
    tap_action:
      action: call-service
      service: script.turn_on
      data:
        entity_id: script.dish_power
    style:
      top: 7.8%
      left: 25%
card_mod:
  style: |
    ha-card {
      background-color: transparent;
      width: 50%;
      max-width: 100%;
      height: auto;
    }    

Each button has it’s own script. For example, here’s the script for channel up that I named script.dish_chup:

data:
  num_repeats: 1
  delay_secs: 0.4
  hold_secs: 0
  device: Dish
  command: chup
action: remote.send_command
target:
  entity_id: remote.dish_remote