dialkit-watt

Turn your page's knobs with Watt, the puck: a round dial on your desk that becomes whatever you're doing. With this, it becomes your DialKit panel: turn for the value, swipe for the next knob, tap to flip a toggle or run an action. The Mac's notch shows which knob and its value.

npm install dialkit-watt

You'll need the Watt app running on your Mac, paired with the puck.

DialKit, in React

Next to your <DialRoot />:

import { DialRoot } from "dialkit";
import { WattBridge } from "dialkit-watt/react";

<DialRoot />
<WattBridge />

It's on in development and off in production builds (enabled overrides that). It renders nothing, and waits quietly while Watt isn't running.

DialKit, anywhere else

Pass the DialStore your app already uses (each DialKit entry has its own):

import { DialStore } from "dialkit/vue"; // or "dialkit/svelte", "dialkit/solid", "dialkit/vanilla"
import { connectDialKit } from "dialkit-watt";

const disconnect = connectDialKit(DialStore);

A game

import { connectWattGame } from "dialkit-watt";

const puck = connectWattGame({
  label: "PLAYER 1",
  onInput: (e) => {
    if (e.input === "turn") paddle.angle += e.value; // degrees, clockwise
    if (e.input === "tap") serve();
  },
});
puck.setAngle(paddle.angle); // the puck draws its paddle there

Anything else

import { connectWatt } from "dialkit-watt";

const watt = connectWatt({ kind: "my-tool", onMessage: (m) => console.log(m) });
watt.send({ type: "state", value: 42 });

Only the tab you're looking at

The page tells Watt when it's the visible tab (and its title), so a DialKit page in a background tab or window never takes the puck while you're doing something else in the browser.

How it connects

The Watt app listens on ws://127.0.0.1:47824 and only accepts pages served from http://localhost or http://127.0.0.1, so a site on the internet can't drive or read the puck. Nothing leaves your Mac.

License

MIT