Touch-sdk NPM | npm.io

Touch SDK Web

npm npm bundle size NPM npm downloads Discord

Connects to Doublepoint Touch SDK compatible Bluetooth devices – like this WearOS app.

Works with Chrome-based browsers. (more info)

Importing (URL)

<script src="https://cdn.jsdelivr.net/npm/touch-sdk@0.6.0/dist/main.js"></script>

const Watch = TouchSDK.Watch

Importing (NPM)

npm install touch-sdk

import { Watch } from 'touch-sdk'

Example using URL import

<!DOCTYPE html>
<html>
    <head>
        <script src="https://cdn.jsdelivr.net/npm/touch-sdk@0.5.2/dist/main.js"></script>
    </head>
    <body>
        <script>
            const watch = new TouchSDK.Watch()

            const connectButton = watch.createConnectButton()
            document.body.appendChild(connectButton)

            watch.addEventListener('tap', () => {
                console.log('tap')
            })
        </script>
    </body>
</html>

Reference

Connection

`watch.createConnectButton`

Returns a button element with the following properties:

onclick calls watch.requestConnection
Text: Connect Touch SDK Controller
Class (for CSS): touch-sdk-connect-button
When the user selects a Touch SDK compatible device, the button is hidden.
When the watch disconnects, the button is shown again.

This function does not add the button to the DOM.

`watch.requestConnection`

Can only be called as a result of a user action, for example a button click. Otherwise doesn't do anything.

watch.requestConnection().then(() => {
    console.log('connected')
}, error => {
    alert(error.message)
})

Input events

Gesture prediction

watch.addEventListener('tap', (event) => {
    console.log('tap')
})

```javascript
watch.addEventListener('probability', (event) => {
    console.log("gesture probability:", event.detail)
})

Ray casting (arm direction)

watch.addEventListener('armdirectionchanged', event => {
    const { dx, dy } = event.detail
    console.log(dx, dy)
})

Raw motion (IMU)

All applicable units are SI-based.

Acceleration

watch.addEventListener('accelerationchanged', (event) => {
    const { x, y, z } = event.detail
    console.log(x, y, z)
})

Rotation (gyroscope)

watch.addEventListener('angularvelocitychanged', (event) => {
    const { x, y, z } = event.detail
    console.log(x, y, z)
})

Gravity Vector

watch.addEventListener('gravityvectorchanged', (event) => {
    const { x, y, z } = event.detail
    console.log(x, y, z)
})

Orientation (quaternion)

watch.addEventListener('orientationchanged', (event) => {
    const { x, y, z, w } = event.detail
    console.log(x, y, z, w)
})

Touch Screen

Touch Start

watch.addEventListener('touchstart', (event) => {
    const { x, y } = event.detail
    console.log(x, y)
})

Touch Move

watch.addEventListener('touchmove', (event) => {
    const { x, y } = event.detail
    console.log(x, y)
})

Touch End

watch.addEventListener('touchend', (event) => {
    const { x, y } = event.detail
    console.log(x, y)
})

Touch Cancel

For example the user swiped from the edge of the screen, and triggered an operating system gesture. Usually touchcancel should be handled the same way as touchend.

watch.addEventListener('touchcancel', (event) => {
    const { x, y } = event.detail
    console.log(x, y)
})

Mechanical

Rotary Dial

watch.addEventListener('rotary', (event) => {
    const { step } = event.detail
    console.log(step)
})

Button

In Wear OS this is the back button. Only clicks are registered, no button down and button up events.

watch.addEventListener('button', (event) => {
    console.log('button')
})

Miscellaneous

After the connected event, several watch properties become available.

watch.addEventListener('connected', (event) => {
    watch.hand // 'left' or 'right'
    watch.hapticsAvailable // true or false
    watch.touchScreenResolution // (width, height). (0, 0) if no touch screen
    watch.batteryPercentage // 0-100
})