Button vibrate in dashboard2

Dashboard
1

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

2

Hi @muggins,
I have not tried it, but step 3 from this article 'might' be what you need:

<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

3

Thanks for that. I'll check it out.

1 Like
4

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

1 Like
5

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.

6

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

7

Works nicely on my Samsung phone

[
    {
        "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"
        }
    }
]
2 Likes
8

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