touch-sdk

v0.6.1

Published

8 months ago

Doublepoint Touch SDK

Downloads

0High
0Medium
0Low

felixbade

tolvan4

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/[email protected]/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/[email protected]/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
})

Output

Haptics

Intensity is between 0 and 1. Length is milliseconds, between 0 and 5000.

watch.triggerHaptics(intensity, length)

Developing: build a new version

npm install
npm run build
npm publish