Problema con pulsante

<!DOCTYPE html>
<html lang="it">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    html,
    body {
      height: 100%;
      margin: 0;
      overflow: hidden;
    }

    .dashboard-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100vh;
      background-color: #000;
    }

    #animation-container {
      position: relative;
      width: 42px;
      height: 38px;
      z-index: 1;
      top:0px;
    }

    .st0,
    .st1,
    .st2,
    .st3 {
      fill: #777774 !important;
      stroke: #ffffff;
      stroke-width: 0.25;
      stroke-miterlimit: 10;
    }

    .raindrop {
      width: 2px;
      height: 2px;
      background-color: #fff;
      position: absolute;
      transform-origin: center bottom;
      z-index: 2;
      animation: fall linear infinite;
    }

    .paused {
      animation-play-state: paused;
    }

    .invisible {
      visibility: hidden;
    }

    @keyframes fall {
      to {
        transform: translateY(6vh) translateX(3vh) rotate(80deg);
      }
    }

  .round-button {
  height: 50px;
  width:50px;  
  border-radius: 50%;
  border-style: solid;
  border-width: 4px;
  border-color: white;
  color: white;
  background-color: black ;
  font-size: 18px;
  position: absolute;
  top: 10px; /* Regola la posizione in base alle tue esigenze */
  left: 10px; /* Regola la posizione in base alle tue esigenze */
  }
  </style>
</head>

<body>
  <div class="dashboard-container">
    <div id="animation-container">
      <svg version="1.1" id="Livello_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
        x="0px" y="0px" width="80px" height="80px" viewBox="0 0 80 100" style="enable-background:new 0 0 80 100;"
        xml:space="preserve">
        <path class="st0" d="M9.7,87.8c-2.7-13.4,3.3-32,7.5-41.6C22,35,25.5,28.8,33.8,22c12.5-10.1,23.7-7.8,25.8-7.2
                c1.3,0.4,7.6,2.5,6.8,10.8c-0.9,9.3-8.4,13-10.6,14.2c0,0-5.9,3-10.4,3.7c-7.3,1-11.4-3.2-11.4-3.2s-5.4,7.7-9.6,20.7
                c-4.5,14.2-4.9,26.3-4.9,26.3L9.7,87.8z" />
        <path class="st1" d="M34,40.3c0,0-1.8-0.9-2.5-4.5c0-0.2-0.9-3-2.1-2.4c-0.9,0.5-2.5,3.2-2.5,3.2s-6.5,9.4-10.9,25
                c-2.3,8-3,25.7-3,25.7" />
        <path class="st2" d="M34,40.1c-1.9-1.5-3.8-10.4,13.1-19.3c6.8-3.6,16.9-4.8,18.6-0.6" />
        <path class="st1" d="M36.7,42.2c0,0-3.6-5.2,2.5-11.5c3-3,8.5-6.4,11.8-7.6c8.1-2.9,13.9-1.5,15.4,1.2" />
        <path class="st1"
          d="M46.8,43.3c0,0-6.3-1.7-2.8-7.6c1.4-2.3,5.9-5.5,8.5-6.6c5.1-2.2,7.1-1.5,8.9-0.5c2.5,1.4,2.2,4.8,2.2,4.8" />
        <path class="st1" d="M49.9,42.2c0,0-4.1-1.9-3.5-4.4c0.5-2,4.2-4.6,6-5.5c1-0.5,3.2-2,6-0.9c1.8,0.7,1.8,2,1.8,2
                c0.4,4.2-2.6,5.5-0.4,4" />
        <circle class="st3" cx="44.8" cy="39.2" r="0.5" />
        <circle class="st3" cx="45.7" cy="40.8" r="0.5" />
        <circle class="st3" cx="47.1" cy="42" r="0.5" />
        <circle class="st3" cx="45.2" cy="37.2" r="0.5" />
        <circle class="st3" cx="46.3" cy="35" r="0.5" />
        <circle class="st3" cx="48.4" cy="33.4" r="0.5" />
        <circle class="st3" cx="50.6" cy="31.9" r="0.5" />
        <circle class="st3" cx="52.9" cy="30.7" r="0.5" />
        <circle class="st3" cx="55.3" cy="29.8" r="0.5" />
        <circle class="st3" cx="57.8" cy="29.5" r="0.5" />
        <circle class="st3" cx="60" cy="30.3" r="0.5" />
        <circle class="st3" cx="61.4" cy="31.9" r="0.5" />
        <circle class="st3" cx="61.7" cy="33.6" r="0.5" />
        <ellipse class="st0" cx="37" cy="44" rx="1.3" ry="1.5" />
      </svg>
    </div>

    <button class="round-button" onclick="toggleAnimation()" ng-click="send({payload:'30'})">30┬░</button>

    <script>
      function toggleAnimation() {
        const raindrops = document.querySelectorAll('.raindrop');
        raindrops.forEach(raindrop => {
          raindrop.classList.toggle('paused');
          raindrop.classList.toggle('invisible');
        });
      }

      function getRandomArbitrary(min, max) {
        return Math.random() * (max - min) + min;
      }

      const animationContainer = document.getElementById('animation-container');

      for (let i = 0; i < 100; i++) {
        const raindrop = document.createElement('div');
        raindrop.classList.add('raindrop');
        raindrop.style.left = getRandomArbitrary(62, animationContainer.offsetWidth) + 'px';
        raindrop.style.top = '40px';
        raindrop.style.animationDuration = getRandomArbitrary(0.5, 5) + 's';
        raindrop.style.animationDelay = getRandomArbitrary(0, 2) + 's';
        animationContainer.appendChild(raindrop);
      }
    </script>
  </div>
</body>

</html>

vorrei che un pulsante ui button emulasse il pulsante onclick per far partire o fermare l'animazione qualcuno ha qualche suggerimento .Grazie

[Edited by admin to fix code not posted correctly]

Hi,
Like this?

$("#id-of-your-button").trigger("click");

If an admin can also move the discussion to Developing Nodes. Thanks

1 Like

where i need to copy that line in the hmtl or in a function node sorry i'm a beginner of node red tx

No worries, where do you want to emulate a user's click?

<button class="round-button" onclick="toggleAnimation()" .
i need a ui button make the same function like the hmtl button .
when i click the button want that toggleAnimation start and when i click again the animation stop like the hmtl button make.
this is the script of animation
function toggleAnimation() {
const raindrops = document.querySelectorAll('.raindrop');
raindrops.forEach(raindrop => {
raindrop.classList.toggle('paused');
raindrop.classList.toggle('invisible');
});
}

  function getRandomArbitrary(min, max) {
    return Math.random() * (max - min) + min;
  }

  const animationContainer = document.getElementById('animation-container');

  for (let i = 0; i < 100; i++) {
    const raindrop = document.createElement('div');
    raindrop.classList.add('raindrop');
    raindrop.style.left = getRandomArbitrary(62, animationContainer.offsetWidth) + 'px';
    raindrop.style.top = '40px';
    raindrop.style.animationDuration = getRandomArbitrary(0.5, 5) + 's';
    raindrop.style.animationDelay = getRandomArbitrary(0, 2) + 's';
    animationContainer.appendChild(raindrop);
  }
</script>

I moved it

EDIT
ignore me

Is this about a custom Node or the dashboard?

:joy: Thanks Marcus :kissing_heart:
I think you will be able to change to General :joy:

You mean a dashboard button? With id it can work :thinking:

<button id="some-id" class="round-button" onclick="toggleAnimation()" ng-click="send({payload:'30'})">30┬░</button>

And in UI button function:

$("#some-id").trigger("click");

Right, I have moved this out of Developing Nodes unless it can be confirmed, this is about developing a Custom Node for Node RED.

1 Like

[
{
"id": "6b127b3d291ec9f2",
"type": "ui_template",
"z": "68270f3958187659",
"group": "be6ab52607c2d8cb",
"name": "",
"order": 4,
"width": 4,
"height": 3,
"format": "\n<html lang="it">\n\n\n <meta charset="UTF-8">\n <meta name="viewport" content="width=device-width, initial-scale=1.0">\n <button class="round-button" onclick="toggleAnimation()" ng-click="send({payload:'30'})" ng-style="{'background-color': msg.payload === '30' ? 'gray' : 'black'}">30┬░\n \n html,\n body {\n height: 100%;\n margin: 0;\n overflow: hidden;\n }\n\n .dashboard-container {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: 300vh;\n background-color: #000;\n }\n\n #animation-container {\n position: relative;\n width: 42px;\n height: 38px;\n z-index: 1;\n top:10px;\n }\n\n .st0,\n .st1,\n .st2,\n .st3 {\n fill: #777774 !important;\n stroke: #ffffff;\n stroke-width: 0.25;\n stroke-miterlimit: 10;\n }\n\n .raindrop {\n width: 2px;\n height: 2px;\n background-color: #fff;\n position: absolute;\n transform-origin: center bottom;\n z-index: 2;\n animation: fall linear infinite;\n }\n\n .paused {\n animation-play-state: paused;\n }\n\n .invisible {\n visibility: hidden;\n }\n\n @keyframes fall {\n to {\n transform: translateY(6vh) translateX(3vh) rotate(80deg);\n }\n }\n\n .round-button {\n height: 50px;\n width:50px; \n border-radius: 50%;\n border-style: solid;\n border-width: 4px;\n border-color: white;\n color: white;\n background-color: black ;\n font-size: 18px;\n position: absolute;\n top: 10px; /* Regola la posizione in base alle tue esigenze /\n left: 10px; / Regola la posizione in base alle tue esigenze */\n\n \n }\n \n \n\n\n\n <div class="dashboard-container">\n <div id="animation-container">\n <svg version="1.1" id="Livello_1" xmlns="http://www.w3.org/2000/svg\" xmlns:xlink="http://www.w3.org/1999/xlink\"\n x="0px" y="0px" width="80px" height="80px" viewBox="0 0 80 100" style="enable-background:new 0 0 80 100;"\n xml:space="preserve">\n <path class="st0" d="M9.7,87.8c-2.7-13.4,3.3-32,7.5-41.6C22,35,25.5,28.8,33.8,22c12.5-10.1,23.7-7.8,25.8-7.2\n c1.3,0.4,7.6,2.5,6.8,10.8c-0.9,9.3-8.4,13-10.6,14.2c0,0-5.9,3-10.4,3.7c-7.3,1-11.4-3.2-11.4-3.2s-5.4,7.7-9.6,20.7\n c-4.5,14.2-4.9,26.3-4.9,26.3L9.7,87.8z" />\n <path class="st1" d="M34,40.3c0,0-1.8-0.9-2.5-4.5c0-0.2-0.9-3-2.1-2.4c-0.9,0.5-2.5,3.2-2.5,3.2s-6.5,9.4-10.9,25\n c-2.3,8-3,25.7-3,25.7" />\n <path class="st2" d="M34,40.1c-1.9-1.5-3.8-10.4,13.1-19.3c6.8-3.6,16.9-4.8,18.6-0.6" />\n <path class="st1" d="M36.7,42.2c0,0-3.6-5.2,2.5-11.5c3-3,8.5-6.4,11.8-7.6c8.1-2.9,13.9-1.5,15.4,1.2" />\n <path class="st1"\n d="M46.8,43.3c0,0-6.3-1.7-2.8-7.6c1.4-2.3,5.9-5.5,8.5-6.6c5.1-2.2,7.1-1.5,8.9-0.5c2.5,1.4,2.2,4.8,2.2,4.8" />\n <path class="st1" d="M49.9,42.2c0,0-4.1-1.9-3.5-4.4c0.5-2,4.2-4.6,6-5.5c1-0.5,3.2-2,6-0.9c1.8,0.7,1.8,2,1.8,2\n c0.4,4.2-2.6,5.5-0.4,4" />\n <circle class="st3" cx="44.8" cy="39.2" r="0.5" />\n <circle class="st3" cx="45.7" cy="40.8" r="0.5" />\n <circle class="st3" cx="47.1" cy="42" r="0.5" />\n <circle class="st3" cx="45.2" cy="37.2" r="0.5" />\n <circle class="st3" cx="46.3" cy="35" r="0.5" />\n <circle class="st3" cx="48.4" cy="33.4" r="0.5" />\n <circle class="st3" cx="50.6" cy="31.9" r="0.5" />\n <circle class="st3" cx="52.9" cy="30.7" r="0.5" />\n <circle class="st3" cx="55.3" cy="29.8" r="0.5" />\n <circle class="st3" cx="57.8" cy="29.5" r="0.5" />\n <circle class="st3" cx="60" cy="30.3" r="0.5" />\n <circle class="st3" cx="61.4" cy="31.9" r="0.5" />\n <circle class="st3" cx="61.7" cy="33.6" r="0.5" />\n <ellipse class="st0" cx="37" cy="44" rx="1.3" ry="1.5" />\n \n \n\n \n\n \n \n\n\n",
"storeOutMessages": true,
"fwdInMessages": true,
"resendOnRefresh": true,
"templateScope": "local",
"className": "",
"x": 340,
"y": 100,
"wires": [
[
"a768c3b7b7385206"
]
]
},
{
"id": "8dff2664da6c06c2",
"type": "debug",
"z": "68270f3958187659",
"name": "debug 87",
"active": true,
"tosidebar": true,
"console": false,
"tostatus": false,
"complete": "payload",
"targetType": "msg",
"statusVal": "",
"statusType": "auto",
"x": 665,
"y": 100,
"wires":
},
{
"id": "a768c3b7b7385206",
"type": "function",
"z": "68270f3958187659",
"name": "function 16",
"func": "msg.payload = Number(msg.payload);\nreturn msg;",
"outputs": 1,
"timeout": 0,
"noerr": 0,
"initialize": "",
"finalize": "",
"libs": ,
"x": 505,
"y": 100,
"wires": [
[
"8dff2664da6c06c2"
]
]
},
{
"id": "9fc44bf3041e3e63",
"type": "debug",
"z": "68270f3958187659",
"name": "debug 89",
"active": true,
"tosidebar": true,
"console": false,
"tostatus": false,
"complete": "false",
"statusVal": "",
"statusType": "auto",
"x": 715,
"y": 25,
"wires":
},
{
"id": "3c2270ae2acf7ef5",
"type": "function",
"z": "68270f3958187659",
"name": "function 18",
"func": "msg.payload = Number(msg.payload);\nreturn msg;",
"outputs": 1,
"timeout": 0,
"noerr": 0,
"initialize": "",
"finalize": "",
"libs": ,
"x": 545,
"y": 25,
"wires": [
[
"9fc44bf3041e3e63"
]
]
},
{
"id": "48f53ea09d76d44a",
"type": "ui_template",
"z": "68270f3958187659",
"group": "be6ab52607c2d8cb",
"name": "custom-button",
"order": 1,
"width": 2,
"height": 2,
"format": "<button id="some-id" class="round-button" onclick="toggleAnimation()" ng-click="send({payload:'30'})">30┬░",
"storeOutMessages": true,
"fwdInMessages": true,
"resendOnRefresh": false,
"templateScope": "local",
"className": "myButton",
"x": 345,
"y": 25,
"wires": [
[
"3c2270ae2acf7ef5",
"6b127b3d291ec9f2"
]
]
},
{
"id": "492030e4f463222e",
"type": "ui_button",
"z": "68270f3958187659",
"name": "some-id",
"group": "be6ab52607c2d8cb",
"order": 12,
"width": 0,
"height": 0,
"passthru": true,
"label": "button",
"tooltip": "",
"color": "",
"bgcolor": "",
"className": "some-id",
"icon": "",
"payload": "",
"payloadType": "str",
"topic": "topic",
"topicType": "msg",
"x": 115,
"y": 25,
"wires": [
[
"48f53ea09d76d44a"
]
]
},
{
"id": "be6ab52607c2d8cb",
"type": "ui_group",
"name": "prova",
"tab": "bd40ca2f3896102d",
"order": 1,
"disp": true,
"width": 5,
"collapse": false,
"className": ""
},
{
"id": "bd40ca2f3896102d",
"type": "ui_tab",
"name": "home",
"icon": "dashboard",
"order": 3,
"disabled": false,
"hidden": false
}
]

@ivanpesenti, please can you post code correctly

No one can help if half your code does not show up, or is corrupted.

Also can you confirm what thei is about. Is it developing a node, dashboard or just serving up a html page.

If ui-template code you do not need <html> or <body> tags.

In order to make code readable and usable it is necessary to surround your code with three backticks (also known as a left quote or backquote ```)

``` 
   code goes here 
```

You can edit and correct your post by clicking the pencil :pencil2: icon.

See this post for more details - How to share code or flow json

2 Likes

I'm going out on a limb, and its about using the dashboard ui_template, given the flow export

"type": "ui_template",

But one more change to the category wouldn't hurt - it is Christmas after all :rofl:

t[
    {
        "id": "6b127b3d291ec9f2",
        "type": "ui_template",
        "z": "68270f3958187659",
        "group": "be6ab52607c2d8cb",
        "name": "",
        "order": 4,
        "width": 4,
        "height": 3,
        "format": "<!DOCTYPE html>\n<html lang=\"it\">\n\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <button class=\"round-button\" onclick=\"toggleAnimation()\" ng-click=\"send({payload:'30'})\" ng-style=\"{'background-color': msg.payload === '30' ? 'gray' : 'black'}\">30┬░</button>\n  <style>\n    html,\n    body {\n      height: 100%;\n      margin: 0;\n      overflow: hidden;\n    }\n\n    .dashboard-container {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      height: 300vh;\n      background-color: #000;\n    }\n\n    #animation-container {\n      position: relative;\n      width: 42px;\n      height: 38px;\n      z-index: 1;\n      top:10px;\n    }\n\n    .st0,\n    .st1,\n    .st2,\n    .st3 {\n      fill: #777774 !important;\n      stroke: #ffffff;\n      stroke-width: 0.25;\n      stroke-miterlimit: 10;\n    }\n\n    .raindrop {\n      width: 2px;\n      height: 2px;\n      background-color: #fff;\n      position: absolute;\n      transform-origin: center bottom;\n      z-index: 2;\n      animation: fall linear infinite;\n    }\n\n    .paused {\n      animation-play-state: paused;\n    }\n\n    .invisible {\n      visibility: hidden;\n    }\n\n    @keyframes fall {\n      to {\n        transform: translateY(6vh) translateX(3vh) rotate(80deg);\n      }\n    }\n\n  .round-button {\n  height: 50px;\n  width:50px;  \n  border-radius: 50%;\n  border-style: solid;\n  border-width: 4px;\n  border-color: white;\n  color: white;\n  background-color: black ;\n  font-size: 18px;\n  position: absolute;\n  top: 10px; /* Regola la posizione in base alle tue esigenze */\n  left: 10px; /* Regola la posizione in base alle tue esigenze */\n\n \n  }\n  \n  </style>\n</head>\n\n<body>\n  <div class=\"dashboard-container\">\n    <div id=\"animation-container\">\n      <svg version=\"1.1\" id=\"Livello_1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n        x=\"0px\" y=\"0px\" width=\"80px\" height=\"80px\" viewBox=\"0 0 80 100\" style=\"enable-background:new 0 0 80 100;\"\n        xml:space=\"preserve\">\n        <path class=\"st0\" d=\"M9.7,87.8c-2.7-13.4,3.3-32,7.5-41.6C22,35,25.5,28.8,33.8,22c12.5-10.1,23.7-7.8,25.8-7.2\n                c1.3,0.4,7.6,2.5,6.8,10.8c-0.9,9.3-8.4,13-10.6,14.2c0,0-5.9,3-10.4,3.7c-7.3,1-11.4-3.2-11.4-3.2s-5.4,7.7-9.6,20.7\n                c-4.5,14.2-4.9,26.3-4.9,26.3L9.7,87.8z\" />\n        <path class=\"st1\" d=\"M34,40.3c0,0-1.8-0.9-2.5-4.5c0-0.2-0.9-3-2.1-2.4c-0.9,0.5-2.5,3.2-2.5,3.2s-6.5,9.4-10.9,25\n                c-2.3,8-3,25.7-3,25.7\" />\n        <path class=\"st2\" d=\"M34,40.1c-1.9-1.5-3.8-10.4,13.1-19.3c6.8-3.6,16.9-4.8,18.6-0.6\" />\n        <path class=\"st1\" d=\"M36.7,42.2c0,0-3.6-5.2,2.5-11.5c3-3,8.5-6.4,11.8-7.6c8.1-2.9,13.9-1.5,15.4,1.2\" />\n        <path class=\"st1\"\n          d=\"M46.8,43.3c0,0-6.3-1.7-2.8-7.6c1.4-2.3,5.9-5.5,8.5-6.6c5.1-2.2,7.1-1.5,8.9-0.5c2.5,1.4,2.2,4.8,2.2,4.8\" />\n        <path class=\"st1\" d=\"M49.9,42.2c0,0-4.1-1.9-3.5-4.4c0.5-2,4.2-4.6,6-5.5c1-0.5,3.2-2,6-0.9c1.8,0.7,1.8,2,1.8,2\n                c0.4,4.2-2.6,5.5-0.4,4\" />\n        <circle class=\"st3\" cx=\"44.8\" cy=\"39.2\" r=\"0.5\" />\n        <circle class=\"st3\" cx=\"45.7\" cy=\"40.8\" r=\"0.5\" />\n        <circle class=\"st3\" cx=\"47.1\" cy=\"42\" r=\"0.5\" />\n        <circle class=\"st3\" cx=\"45.2\" cy=\"37.2\" r=\"0.5\" />\n        <circle class=\"st3\" cx=\"46.3\" cy=\"35\" r=\"0.5\" />\n        <circle class=\"st3\" cx=\"48.4\" cy=\"33.4\" r=\"0.5\" />\n        <circle class=\"st3\" cx=\"50.6\" cy=\"31.9\" r=\"0.5\" />\n        <circle class=\"st3\" cx=\"52.9\" cy=\"30.7\" r=\"0.5\" />\n        <circle class=\"st3\" cx=\"55.3\" cy=\"29.8\" r=\"0.5\" />\n        <circle class=\"st3\" cx=\"57.8\" cy=\"29.5\" r=\"0.5\" />\n        <circle class=\"st3\" cx=\"60\" cy=\"30.3\" r=\"0.5\" />\n        <circle class=\"st3\" cx=\"61.4\" cy=\"31.9\" r=\"0.5\" />\n        <circle class=\"st3\" cx=\"61.7\" cy=\"33.6\" r=\"0.5\" />\n        <ellipse class=\"st0\" cx=\"37\" cy=\"44\" rx=\"1.3\" ry=\"1.5\" />\n      </svg>\n    </div>\n\n   \n\n    <script>\n      function toggleAnimation() {\n        const raindrops = document.querySelectorAll('.raindrop');\n        raindrops.forEach(raindrop => {\n          raindrop.classList.toggle('paused');\n          raindrop.classList.toggle('invisible');\n        });\n      }\n\n      function getRandomArbitrary(min, max) {\n        return Math.random() * (max - min) + min;\n      }\n\n      const animationContainer = document.getElementById('animation-container');\n\n      for (let i = 0; i < 100; i++) {\n        const raindrop = document.createElement('div');\n        raindrop.classList.add('raindrop');\n        raindrop.style.left = getRandomArbitrary(62, animationContainer.offsetWidth) + 'px';\n        raindrop.style.top = '40px';\n        raindrop.style.animationDuration = getRandomArbitrary(0.5, 5) + 's';\n        raindrop.style.animationDelay = getRandomArbitrary(0, 2) + 's';\n        animationContainer.appendChild(raindrop);\n      }\n    </script>\n  </div>\n</body>\n\n</html>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 340,
        "y": 100,
        "wires": [
            [
                "a768c3b7b7385206"
            ]
        ]
    },
    {
        "id": "8dff2664da6c06c2",
        "type": "debug",
        "z": "68270f3958187659",
        "name": "debug 87",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "payload",
        "targetType": "msg",
        "statusVal": "",
        "statusType": "auto",
        "x": 665,
        "y": 100,
        "wires": []
    },
    {
        "id": "a768c3b7b7385206",
        "type": "function",
        "z": "68270f3958187659",
        "name": "function 16",
        "func": "msg.payload = Number(msg.payload);\nreturn msg;",
        "outputs": 1,
        "timeout": 0,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 505,
        "y": 100,
        "wires": [
            [
                "8dff2664da6c06c2"
            ]
        ]
    },
    {
        "id": "9fc44bf3041e3e63",
        "type": "debug",
        "z": "68270f3958187659",
        "name": "debug 89",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "false",
        "statusVal": "",
        "statusType": "auto",
        "x": 715,
        "y": 25,
        "wires": []
    },
    {
        "id": "3c2270ae2acf7ef5",
        "type": "function",
        "z": "68270f3958187659",
        "name": "function 18",
        "func": "msg.payload = Number(msg.payload);\nreturn msg;",
        "outputs": 1,
        "timeout": 0,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 545,
        "y": 25,
        "wires": [
            [
                "9fc44bf3041e3e63"
            ]
        ]
    },
    {
        "id": "48f53ea09d76d44a",
        "type": "ui_template",
        "z": "68270f3958187659",
        "group": "be6ab52607c2d8cb",
        "name": "custom-button",
        "order": 1,
        "width": 2,
        "height": 2,
        "format": "<button id=\"some-id\" class=\"round-button\" onclick=\"toggleAnimation()\" ng-click=\"send({payload:'30'})\">30┬░</button>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": false,
        "templateScope": "local",
        "className": "myButton",
        "x": 345,
        "y": 25,
        "wires": [
            [
                "3c2270ae2acf7ef5",
                "6b127b3d291ec9f2"
            ]
        ]
    },
    {
        "id": "492030e4f463222e",
        "type": "ui_button",
        "z": "68270f3958187659",
        "name": "some-id",
        "group": "be6ab52607c2d8cb",
        "order": 12,
        "width": 0,
        "height": 0,
        "passthru": true,
        "label": "button",
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "some-id",
        "icon": "",
        "payload": "",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "x": 115,
        "y": 25,
        "wires": [
            [
                "48f53ea09d76d44a"
            ]
        ]
    },
    {
        "id": "be6ab52607c2d8cb",
        "type": "ui_group",
        "name": "prova",
        "tab": "bd40ca2f3896102d",
        "order": 1,
        "disp": true,
        "width": 5,
        "collapse": false,
        "className": ""
    },
    {
        "id": "bd40ca2f3896102d",
        "type": "ui_tab",
        "name": "home",
        "icon": "dashboard",
        "order": 3,
        "disabled": false,
        "hidden": false
    }
]ype or paste code here

I'll try to explain my problem: I've created a custom icon that is a hand shower and I've created an animation that simulates the water coming out of the hand shower. I was able to control the animation with an HMTL button on click that manages the animation but I would need to do the same thing with a button on the Node Red dashboard but I can't simulate on click with the dashboard button tx for the patient

The problem is triggering a JQuery event in a node that only accepts a message

how i can do can u write me the right code ? tx

With this:

[{"id":"8dff2664da6c06c2","type":"debug","z":"15cdbf1d258ebb57","name":"debug 87","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":705,"y":480,"wires":[]},{"id":"a768c3b7b7385206","type":"function","z":"15cdbf1d258ebb57","name":"function 16","func":"msg.payload = Number(msg.payload);\nreturn msg;","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":545,"y":480,"wires":[["8dff2664da6c06c2"]]},{"id":"9fc44bf3041e3e63","type":"debug","z":"15cdbf1d258ebb57","name":"debug 89","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":755,"y":405,"wires":[]},{"id":"3c2270ae2acf7ef5","type":"function","z":"15cdbf1d258ebb57","name":"function 18","func":"msg.payload = Number(msg.payload);\nreturn msg;","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":585,"y":405,"wires":[["9fc44bf3041e3e63"]]},{"id":"492030e4f463222e","type":"ui_button","z":"15cdbf1d258ebb57","name":"some-id","group":"be6ab52607c2d8cb","order":12,"width":0,"height":0,"passthru":true,"label":"button","tooltip":"","color":"","bgcolor":"","className":"some-id","icon":"","payload":"","payloadType":"str","topic":"topic","topicType":"msg","x":155,"y":405,"wires":[["48f53ea09d76d44a"]]},{"id":"6b127b3d291ec9f2","type":"ui_template","z":"15cdbf1d258ebb57","group":"be6ab52607c2d8cb","name":"","order":4,"width":4,"height":3,"format":"<!DOCTYPE html>\n<html lang=\"it\">\n\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <style>\n    html,\n    body {\n      height: 100%;\n      margin: 0;\n      overflow: hidden;\n    }\n\n    .dashboard-container {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      height: 100vh;\n      background-color: #000;\n    }\n\n    #animation-container {\n      position: relative;\n      width: 42px;\n      height: 38px;\n      z-index: 1;\n      top:0px;\n    }\n\n    .st0,\n    .st1,\n    .st2,\n    .st3 {\n      fill: #777774 !important;\n      stroke: #ffffff;\n      stroke-width: 0.25;\n      stroke-miterlimit: 10;\n    }\n\n    .raindrop {\n      width: 2px;\n      height: 2px;\n      background-color: #fff;\n      position: absolute;\n      transform-origin: center bottom;\n      z-index: 2;\n      animation: fall linear infinite;\n    }\n\n    .paused {\n      animation-play-state: paused;\n    }\n\n    .invisible {\n      visibility: hidden;\n    }\n\n    @keyframes fall {\n      to {\n        transform: translateY(6vh) translateX(3vh) rotate(80deg);\n      }\n    }\n\n  .round-button {\n  height: 50px;\n  width:50px;  \n  border-radius: 50%;\n  border-style: solid;\n  border-width: 4px;\n  border-color: white;\n  color: white;\n  background-color: black ;\n  font-size: 18px;\n  position: absolute;\n  top: 10px; /* Regola la posizione in base alle tue esigenze */\n  left: 10px; /* Regola la posizione in base alle tue esigenze */\n  }\n  </style>\n</head>\n\n<body>\n  <div class=\"dashboard-container\">\n    <div id=\"animation-container\">\n      <svg version=\"1.1\" id=\"Livello_1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n        x=\"0px\" y=\"0px\" width=\"80px\" height=\"80px\" viewBox=\"0 0 80 100\" style=\"enable-background:new 0 0 80 100;\"\n        xml:space=\"preserve\">\n        <path class=\"st0\" d=\"M9.7,87.8c-2.7-13.4,3.3-32,7.5-41.6C22,35,25.5,28.8,33.8,22c12.5-10.1,23.7-7.8,25.8-7.2\n                c1.3,0.4,7.6,2.5,6.8,10.8c-0.9,9.3-8.4,13-10.6,14.2c0,0-5.9,3-10.4,3.7c-7.3,1-11.4-3.2-11.4-3.2s-5.4,7.7-9.6,20.7\n                c-4.5,14.2-4.9,26.3-4.9,26.3L9.7,87.8z\" />\n        <path class=\"st1\" d=\"M34,40.3c0,0-1.8-0.9-2.5-4.5c0-0.2-0.9-3-2.1-2.4c-0.9,0.5-2.5,3.2-2.5,3.2s-6.5,9.4-10.9,25\n                c-2.3,8-3,25.7-3,25.7\" />\n        <path class=\"st2\" d=\"M34,40.1c-1.9-1.5-3.8-10.4,13.1-19.3c6.8-3.6,16.9-4.8,18.6-0.6\" />\n        <path class=\"st1\" d=\"M36.7,42.2c0,0-3.6-5.2,2.5-11.5c3-3,8.5-6.4,11.8-7.6c8.1-2.9,13.9-1.5,15.4,1.2\" />\n        <path class=\"st1\"\n          d=\"M46.8,43.3c0,0-6.3-1.7-2.8-7.6c1.4-2.3,5.9-5.5,8.5-6.6c5.1-2.2,7.1-1.5,8.9-0.5c2.5,1.4,2.2,4.8,2.2,4.8\" />\n        <path class=\"st1\" d=\"M49.9,42.2c0,0-4.1-1.9-3.5-4.4c0.5-2,4.2-4.6,6-5.5c1-0.5,3.2-2,6-0.9c1.8,0.7,1.8,2,1.8,2\n                c0.4,4.2-2.6,5.5-0.4,4\" />\n        <circle class=\"st3\" cx=\"44.8\" cy=\"39.2\" r=\"0.5\" />\n        <circle class=\"st3\" cx=\"45.7\" cy=\"40.8\" r=\"0.5\" />\n        <circle class=\"st3\" cx=\"47.1\" cy=\"42\" r=\"0.5\" />\n        <circle class=\"st3\" cx=\"45.2\" cy=\"37.2\" r=\"0.5\" />\n        <circle class=\"st3\" cx=\"46.3\" cy=\"35\" r=\"0.5\" />\n        <circle class=\"st3\" cx=\"48.4\" cy=\"33.4\" r=\"0.5\" />\n        <circle class=\"st3\" cx=\"50.6\" cy=\"31.9\" r=\"0.5\" />\n        <circle class=\"st3\" cx=\"52.9\" cy=\"30.7\" r=\"0.5\" />\n        <circle class=\"st3\" cx=\"55.3\" cy=\"29.8\" r=\"0.5\" />\n        <circle class=\"st3\" cx=\"57.8\" cy=\"29.5\" r=\"0.5\" />\n        <circle class=\"st3\" cx=\"60\" cy=\"30.3\" r=\"0.5\" />\n        <circle class=\"st3\" cx=\"61.4\" cy=\"31.9\" r=\"0.5\" />\n        <circle class=\"st3\" cx=\"61.7\" cy=\"33.6\" r=\"0.5\" />\n        <ellipse class=\"st0\" cx=\"37\" cy=\"44\" rx=\"1.3\" ry=\"1.5\" />\n      </svg>\n    </div>\n\n    <button class=\"round-button\" onclick=\"toggleAnimation()\" ng-click=\"send({payload:'30'})\">30┬░</button>\n\n    <script>\n      function toggleAnimation() {\n        const raindrops = document.querySelectorAll('.raindrop');\n        raindrops.forEach(raindrop => {\n          raindrop.classList.toggle('paused');\n          raindrop.classList.toggle('invisible');\n        });\n      }\n\n      function getRandomArbitrary(min, max) {\n        return Math.random() * (max - min) + min;\n      }\n\n      const animationContainer = document.getElementById('animation-container');\n\n      for (let i = 0; i < 100; i++) {\n        const raindrop = document.createElement('div');\n        raindrop.classList.add('raindrop');\n        raindrop.style.left = getRandomArbitrary(62, animationContainer.offsetWidth) + 'px';\n        raindrop.style.top = '40px';\n        raindrop.style.animationDuration = getRandomArbitrary(0.5, 5) + 's';\n        raindrop.style.animationDelay = getRandomArbitrary(0, 2) + 's';\n        animationContainer.appendChild(raindrop);\n      }\n\n      $('.nr-dashboard-button.some-id').find(\"button\").on('click', () => toggleAnimation());\n    </script>\n  </div>\n</body>\n\n</html>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":380,"y":480,"wires":[["a768c3b7b7385206"]]},{"id":"48f53ea09d76d44a","type":"ui_template","z":"15cdbf1d258ebb57","group":"be6ab52607c2d8cb","name":"custom-button","order":1,"width":2,"height":2,"format":"<button id=\"some-id\" class=\"round-button\" onclick=\"toggleAnimation()\" ng-click=\"send({payload:'30'})\">30┬░</button>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","className":"myButton","x":385,"y":405,"wires":[["3c2270ae2acf7ef5","6b127b3d291ec9f2"]]},{"id":"be6ab52607c2d8cb","type":"ui_group","name":"prova","tab":"bd40ca2f3896102d","order":1,"disp":true,"width":5,"collapse":false,"className":""},{"id":"bd40ca2f3896102d","type":"ui_tab","name":"home","icon":"dashboard","order":3,"disabled":false,"hidden":false}]

i imported flow but if i click button some-id doesnt start and doesnt stop the animation :frowning:
you tried?
and what i notice the animation doesnt start i f i dont refresh thr page too

Sorry, should works now
Added timeout

[{"id":"8dff2664da6c06c2","type":"debug","z":"15cdbf1d258ebb57","name":"debug 87","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":700,"y":440,"wires":[]},{"id":"a768c3b7b7385206","type":"function","z":"15cdbf1d258ebb57","name":"function 16","func":"msg.payload = Number(msg.payload);\nreturn msg;","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":540,"y":440,"wires":[["8dff2664da6c06c2"]]},{"id":"9fc44bf3041e3e63","type":"debug","z":"15cdbf1d258ebb57","name":"debug 89","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":750,"y":365,"wires":[]},{"id":"3c2270ae2acf7ef5","type":"function","z":"15cdbf1d258ebb57","name":"function 18","func":"msg.payload = Number(msg.payload);\nreturn msg;","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":580,"y":365,"wires":[["9fc44bf3041e3e63"]]},{"id":"492030e4f463222e","type":"ui_button","z":"15cdbf1d258ebb57","name":"some-id","group":"be6ab52607c2d8cb","order":12,"width":0,"height":0,"passthru":true,"label":"button","tooltip":"","color":"","bgcolor":"","className":"some-id","icon":"","payload":"","payloadType":"str","topic":"topic","topicType":"msg","x":150,"y":365,"wires":[["48f53ea09d76d44a"]]},{"id":"6b127b3d291ec9f2","type":"ui_template","z":"15cdbf1d258ebb57","group":"be6ab52607c2d8cb","name":"","order":4,"width":4,"height":3,"format":"<!DOCTYPE html>\n<html lang=\"it\">\n\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <style>\n    html,\n    body {\n      height: 100%;\n      margin: 0;\n      overflow: hidden;\n    }\n\n    .dashboard-container {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      height: 100vh;\n      background-color: #000;\n    }\n\n    #animation-container {\n      position: relative;\n      width: 42px;\n      height: 38px;\n      z-index: 1;\n      top:0px;\n    }\n\n    .st0,\n    .st1,\n    .st2,\n    .st3 {\n      fill: #777774 !important;\n      stroke: #ffffff;\n      stroke-width: 0.25;\n      stroke-miterlimit: 10;\n    }\n\n    .raindrop {\n      width: 2px;\n      height: 2px;\n      background-color: #fff;\n      position: absolute;\n      transform-origin: center bottom;\n      z-index: 2;\n      animation: fall linear infinite;\n    }\n\n    .paused {\n      animation-play-state: paused;\n    }\n\n    .invisible {\n      visibility: hidden;\n    }\n\n    @keyframes fall {\n      to {\n        transform: translateY(6vh) translateX(3vh) rotate(80deg);\n      }\n    }\n\n  .round-button {\n  height: 50px;\n  width:50px;  \n  border-radius: 50%;\n  border-style: solid;\n  border-width: 4px;\n  border-color: white;\n  color: white;\n  background-color: black ;\n  font-size: 18px;\n  position: absolute;\n  top: 10px; /* Regola la posizione in base alle tue esigenze */\n  left: 10px; /* Regola la posizione in base alle tue esigenze */\n  }\n  </style>\n</head>\n\n<body>\n  <div class=\"dashboard-container\">\n    <div id=\"animation-container\">\n      <svg version=\"1.1\" id=\"Livello_1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n        x=\"0px\" y=\"0px\" width=\"80px\" height=\"80px\" viewBox=\"0 0 80 100\" style=\"enable-background:new 0 0 80 100;\"\n        xml:space=\"preserve\">\n        <path class=\"st0\" d=\"M9.7,87.8c-2.7-13.4,3.3-32,7.5-41.6C22,35,25.5,28.8,33.8,22c12.5-10.1,23.7-7.8,25.8-7.2\n                c1.3,0.4,7.6,2.5,6.8,10.8c-0.9,9.3-8.4,13-10.6,14.2c0,0-5.9,3-10.4,3.7c-7.3,1-11.4-3.2-11.4-3.2s-5.4,7.7-9.6,20.7\n                c-4.5,14.2-4.9,26.3-4.9,26.3L9.7,87.8z\" />\n        <path class=\"st1\" d=\"M34,40.3c0,0-1.8-0.9-2.5-4.5c0-0.2-0.9-3-2.1-2.4c-0.9,0.5-2.5,3.2-2.5,3.2s-6.5,9.4-10.9,25\n                c-2.3,8-3,25.7-3,25.7\" />\n        <path class=\"st2\" d=\"M34,40.1c-1.9-1.5-3.8-10.4,13.1-19.3c6.8-3.6,16.9-4.8,18.6-0.6\" />\n        <path class=\"st1\" d=\"M36.7,42.2c0,0-3.6-5.2,2.5-11.5c3-3,8.5-6.4,11.8-7.6c8.1-2.9,13.9-1.5,15.4,1.2\" />\n        <path class=\"st1\"\n          d=\"M46.8,43.3c0,0-6.3-1.7-2.8-7.6c1.4-2.3,5.9-5.5,8.5-6.6c5.1-2.2,7.1-1.5,8.9-0.5c2.5,1.4,2.2,4.8,2.2,4.8\" />\n        <path class=\"st1\" d=\"M49.9,42.2c0,0-4.1-1.9-3.5-4.4c0.5-2,4.2-4.6,6-5.5c1-0.5,3.2-2,6-0.9c1.8,0.7,1.8,2,1.8,2\n                c0.4,4.2-2.6,5.5-0.4,4\" />\n        <circle class=\"st3\" cx=\"44.8\" cy=\"39.2\" r=\"0.5\" />\n        <circle class=\"st3\" cx=\"45.7\" cy=\"40.8\" r=\"0.5\" />\n        <circle class=\"st3\" cx=\"47.1\" cy=\"42\" r=\"0.5\" />\n        <circle class=\"st3\" cx=\"45.2\" cy=\"37.2\" r=\"0.5\" />\n        <circle class=\"st3\" cx=\"46.3\" cy=\"35\" r=\"0.5\" />\n        <circle class=\"st3\" cx=\"48.4\" cy=\"33.4\" r=\"0.5\" />\n        <circle class=\"st3\" cx=\"50.6\" cy=\"31.9\" r=\"0.5\" />\n        <circle class=\"st3\" cx=\"52.9\" cy=\"30.7\" r=\"0.5\" />\n        <circle class=\"st3\" cx=\"55.3\" cy=\"29.8\" r=\"0.5\" />\n        <circle class=\"st3\" cx=\"57.8\" cy=\"29.5\" r=\"0.5\" />\n        <circle class=\"st3\" cx=\"60\" cy=\"30.3\" r=\"0.5\" />\n        <circle class=\"st3\" cx=\"61.4\" cy=\"31.9\" r=\"0.5\" />\n        <circle class=\"st3\" cx=\"61.7\" cy=\"33.6\" r=\"0.5\" />\n        <ellipse class=\"st0\" cx=\"37\" cy=\"44\" rx=\"1.3\" ry=\"1.5\" />\n      </svg>\n    </div>\n\n    <button class=\"round-button\" onclick=\"toggleAnimation()\" ng-click=\"send({payload:'30'})\">30┬░</button>\n\n    <script>\n      function toggleAnimation() {\n        const raindrops = document.querySelectorAll('.raindrop');\n        raindrops.forEach(raindrop => {\n          raindrop.classList.toggle('paused');\n          raindrop.classList.toggle('invisible');\n        });\n      }\n\n      function getRandomArbitrary(min, max) {\n        return Math.random() * (max - min) + min;\n      }\n\n      const animationContainer = document.getElementById('animation-container');\n\n      for (let i = 0; i < 100; i++) {\n        const raindrop = document.createElement('div');\n        raindrop.classList.add('raindrop');\n        raindrop.style.left = getRandomArbitrary(62, animationContainer.offsetWidth) + 'px';\n        raindrop.style.top = '40px';\n        raindrop.style.animationDuration = getRandomArbitrary(0.5, 5) + 's';\n        raindrop.style.animationDelay = getRandomArbitrary(0, 2) + 's';\n        animationContainer.appendChild(raindrop);\n      }\n\n    setTimeout(() => $('.nr-dashboard-button.some-id').find(\"button\").on('click', () => toggleAnimation()), 250);\n    </script>\n  </div>\n</body>\n\n</html>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":375,"y":440,"wires":[["a768c3b7b7385206"]]},{"id":"48f53ea09d76d44a","type":"ui_template","z":"15cdbf1d258ebb57","group":"be6ab52607c2d8cb","name":"custom-button","order":1,"width":2,"height":2,"format":"<button class=\"round-button\" onclick=\"toggleAnimation()\" ng-click=\"send({payload:'30'})\">30┬░</button>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","className":"myButton","x":380,"y":365,"wires":[["3c2270ae2acf7ef5","6b127b3d291ec9f2"]]},{"id":"be6ab52607c2d8cb","type":"ui_group","name":"prova","tab":"bd40ca2f3896102d","order":1,"disp":true,"width":5,"collapse":false,"className":""},{"id":"bd40ca2f3896102d","type":"ui_tab","name":"home","icon":"dashboard","order":3,"disabled":false,"hidden":false}]