Custom Button Card: Insert short delay between multiple calls for a tap_action

Configuration
1

Hello Everyone,

I am building a remote with the picture-elements card. I have managed to set everything up. Single calls (channels with one digit only) work fine. However, when using multi-calls (for channels with 2-3 digits I am setting up for channel shortcuts), it seems the calls are being sent at the same time instead of executing calls sequentially, because digits are sent by my IR transmitter in a random order, so they work sometimes only.

I know I can do this with a script, but I’d rather not to build a single script for every channel/shortcut. I like everything to be in the same place, so please do not suggest to try the script option.

This is the interface:

Movistar
Movistar480×663 45.7 KB

And this is the code (including just one of the shortcut buttons code to make things easier):

type: picture-elements
image: local/img/Mando_Movistar.png
elements:
  - type: custom:button-card
    name: ch121
    styles:
      card:
        - height: 40px
        - width: 40px
        - color: rgb(255, 0, 0, 0.0)
        - background-color: rgb(0, 255, 0, 0.0)
        - box-shadow: none
        - border: 0px
      name:
        - font-size: 10px
    tap_action:
      action: nothing
      multi-calls: |
        [[[
          hass.callService(
            "remote",
            "send_command",
            { entity_id: "remote.rm3_02", device: "movistar", command: "1" }
         );
          hass.callService(
            "remote",
            "send_command",
            { entity_id: "remote.rm3_02", device: "movistar", command: "2" }
         );
          hass.callService(
            "remote",
            "send_command",
            { entity_id: "remote.rm3_02", device: "movistar", command: "1" }
         );
        ]]]
    style:
      top: 34.6%
      left: 83.78%

Any way to insert a short delay between every hass.callService call?

Cheers!

2

Answering to myself just in case it helps to someone else.

Figured out how to do it using setTimeout as below. Do note that the second hass.CallService has a setTimeout value of 500ms and third one is 1000ms, so the three calls can be triggered in a row. Of course, such values should be adjusted according to what you need.

type: picture-elements
image: local/img/Mando_Movistar.png
elements:
  - type: custom:button-card
    name: ch121
    styles:
      card:
        - height: 40px
        - width: 40px
        - color: rgb(255, 0, 0, 0.0)
        - background-color: rgb(0, 255, 0, 0.0)
        - box-shadow: none
        - border: 0px
      name:
        - font-size: 10px
    tap_action:
      action: nothing
      multi-calls: |
        [[[
          hass.callService(
             "remote",
             "send_command",
             { entity_id: "remote.rm3_02", device: "movistar", command: "1" }
          );
          setTimeout(() => {
            hass.callService(
              "remote",
              "send_command",
              { entity_id: "remote.rm3_02", device: "movistar", command: "2" }
            );
          }, 500);
          setTimeout(() => {
            hass.callService(
              "remote",
              "send_command",
              { entity_id: "remote.rm3_02", device: "movistar", command: "1" }
            );
          }, 1000);
        ]]]
    style:
      top: 34.6%
      left: 83.78%