# Button vibrate in dashboard2

**URL:** <https://discourse.nodered.org/t/button-vibrate-in-dashboard2/90639>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [2 September 2024 11:10 UTC](https://discourse.nodered.org/t/button-vibrate-in-dashboard2/90639 "2024-09-02T11:10:51Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![muggins](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/muggins/32/63013_2.png) [@muggins](https://discourse.nodered.org/u/muggins)\
**Post date:** [2 September 2024 11:10 UTC](https://discourse.nodered.org/t/button-vibrate-in-dashboard2/90639/1 "2024-09-02T11:10:51Z")

</div>

Hi in dashboard-1 I had a template button with..  
\<md-button class="vibrate filled touched smallfont rounded"  
which gave a haptic feedback on my mobile phone. Is there an equivalent in DB2?  
thanks

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [3 September 2024 19:39 UTC](https://discourse.nodered.org/t/button-vibrate-in-dashboard2/90639/2 "2024-09-03T19:39:45Z")

</div>

Hi @muggins,  
I have not tried it, but step 3 from [this](https://30dayscoding.com/blog/implementing-vuejs-and-haptic-technologies) article 'might' be what you need:

```auto
<template>
  <button @click="vibrate">Click me!</button>
</template>

<script>
export default {
  methods: {
    vibrate() {
      window.navigator.vibrate(200); // Vibrate for 200ms
    }
  }
}
</script>

```

It uses the `vibrate` API, which they claim is offered by most modern browsers.

Bart

---

<div class="post-metadata">

**Author:** ![muggins](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/muggins/32/63013_2.png) [@muggins](https://discourse.nodered.org/u/muggins)\
**Post date:** [3 September 2024 19:55 UTC](https://discourse.nodered.org/t/button-vibrate-in-dashboard2/90639/3 "2024-09-03T19:55:53Z")

</div>

Thanks for that. I'll check it out.

---

<div class="post-metadata">

**Author:** ![muggins](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/muggins/32/63013_2.png) [@muggins](https://discourse.nodered.org/u/muggins)\
**Post date:** [4 September 2024 07:39 UTC](https://discourse.nodered.org/t/button-vibrate-in-dashboard2/90639/4 "2024-09-04T07:39:47Z")

</div>

Got it working and sending a payload.... thanks again

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [4 September 2024 08:22 UTC](https://discourse.nodered.org/t/button-vibrate-in-dashboard2/90639/5 "2024-09-04T08:22:22Z")

</div>

Don't forget that you should really check first to see if the client browser actually supports window.navigator.vibrate. Unless you know for sure what browsers will be in use.

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [4 September 2024 13:16 UTC](https://discourse.nodered.org/t/button-vibrate-in-dashboard2/90639/6 "2024-09-04T13:16:43Z")

</div>

> [@muggins](#):
>
> Got it working and sending a payload.... thanks again

Glad to hear!!  
It would be nice if you could export an example flow and share it here, so others can easily test it.

---

<div class="post-metadata">

**Author:** ![muggins](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/muggins/32/63013_2.png) [@muggins](https://discourse.nodered.org/u/muggins)\
**Post date:** [4 September 2024 15:29 UTC](https://discourse.nodered.org/t/button-vibrate-in-dashboard2/90639/7 "2024-09-04T15:29:49Z")

</div>

Works nicely on my Samsung phone

```auto
[
    {
        "id": "11630dfec7c7118d",
        "type": "debug",
        "z": "8c28c548e9dc1527",
        "name": "debug 8",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "false",
        "statusVal": "",
        "statusType": "auto",
        "x": 1320,
        "y": 1380,
        "wires": []
    },
    {
        "id": "ac05354da95eb10e",
        "type": "ui-template",
        "z": "8c28c548e9dc1527",
        "group": "cc05ce8b40f451e3",
        "page": "",
        "ui": "",
        "name": "Click_vibrate",
        "order": 0,
        "width": "3",
        "height": "1",
        "head": "",
        "format": "<template>\n<v-btn @click=\"vibrate\" \nrounded=\"xl\" size=\"large\" color=\"yellow\" >\nClick me\n</v-btn>\n</template>\n\n<script>\nexport default {\n methods: {\n vibrate() {\n this.send({topic: 'myTopic',payload: 'myPayload'})\n window.navigator.vibrate(200); // Vibrate for 200ms\n }\n }\n}\n</script>\n\n\n\n\n",
        "storeOutMessages": true,
        "passthru": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 1110,
        "y": 1380,
        "wires": [
            [
                "11630dfec7c7118d"
            ]
        ]
    },
    {
        "id": "cc05ce8b40f451e3",
        "type": "ui-group",
        "name": "humiG",
        "page": "b13a3963679b7287",
        "width": "6",
        "height": "1",
        "order": 1,
        "showTitle": true,
        "className": "",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "b13a3963679b7287",
        "type": "ui-page",
        "name": "humi",
        "ui": "255a505aeaa8f56b",
        "path": "/humi",
        "icon": "home",
        "layout": "grid",
        "theme": "9273d2fc8b92c1dd",
        "order": 3,
        "className": "",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "255a505aeaa8f56b",
        "type": "ui-base",
        "name": "My Dashboard",
        "path": "/dashboard",
        "includeClientData": true,
        "acceptsClientConfig": [
            "ui-notification",
            "ui-control"
        ],
        "showPathInSidebar": false,
        "showPageTitle": true,
        "navigationStyle": "default",
        "titleBarStyle": "hidden"
    },
    {
        "id": "9273d2fc8b92c1dd",
        "type": "ui-theme",
        "name": "Default",
        "colors": {
            "surface": "#404040",
            "primary": "#109fbc",
            "bgPage": "#e8e8e8",
            "groupBg": "#d6d6d6",
            "groupOutline": "#6fbc10"
        },
        "sizes": {
            "pagePadding": "0px",
            "groupGap": "0px",
            "groupBorderRadius": "0px",
            "widgetGap": "0px"
        }
    }
]

```

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [18 September 2024 15:29 UTC](https://discourse.nodered.org/t/button-vibrate-in-dashboard2/90639/8 "2024-09-18T15:29:51Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.