I've been tinkering on a way to handle continuous numeric input. Or, in plainspeak, a *knob*… that you can turn. But it's, like, good, as far as knobs go. (Fake computer knobs, at least.) • It does the usual thing… you can drag up-and-down to turn the knob. Classic. • Oh! You can also drag left and right to turn the knob. That's nice. • Wait… you can crank in circles around the knob? And that works well too? • But but but… you can also crank in circles, like, anywhere on the screen! The goal is "do what I mean" gestural input. Granted, it's currently dumb and could be better, which is why I'm still tinkering on it. You can play with it here. Code is here.

I tried making one once and yeah, its really hard mapping the polar look to mouse. I just did the up or right for +ve and it just seems wrong when its at certain angles. If you do a drag it can be really sensitive to the singularity that exists near the center which is where you naturally start a drag so its pretty interesting you are removing that singularity with a local center of rotation. How are you tracking that? https://observablehq.com/@tomlarkworthy/audio-inputs#cell-906

I remember the path that the mouse has moved, take a bounding box of that path, take the center of the box, and use that as the local center of rotation. I also discard older segments of the path, keeping roughly 4pi*r of them, since that's enough to figure out roughly where the local center ought to be. The logic for switching between modes on the fly (horizontal, vertical, or angular) is a bit dodgy. That's something that could be better, but there are also unavoidable edge cases — like when dragging rightward at the bottom of the circle (which could mean "increase the value" when treating the input as horizontal or "decrease the value" when treating it as angular), so my current approach is just to pick whichever one seems most likely and kinda lock-in on it after a handful of samples.

for me on my mac: works on Chrome, doesn't work on Firefox (looks like it's loading forever), doesn't work on Safari (same).

Weird. I only use safari

For me it works fine in Firefox on the mac.

Is this licensed? I have a couple of ideas to riff on this

@Christopher Shank ah, good point — it's unlicense'd now, have at!

Versatile. Interesting contrast to what I usually see in fancy knobs (and sliders) that use the second dimension for tuning. For example, a radial knob where distance from the center decreases the amount of turning that happens. I was just using this in OmniGraffle a second ago to precisely rotate a shape.

This will absolutely rock on touchscreens!

@wtaysom if you crank circularly around the knob, a bigger radius will give you finer control

I've tried to do touch based integer input many years ago so I'll share some results. I decided to introduce a "digit-cursor" and a dial that would increment/decrement the digit under cursor when the finger was close to the number and which would step between digits when the finger was a little further away. See the attached video. Some special cases accelerated input of numbers with only a single significant digit (crossing 0/9 boundary would also step to the next digit). The difficulty I faced was that accurate multi-digit numbers required seriously lengthy gestures. Digit after digit. And occasional mistakes made the gesturing even longer. In the end I think it might work but would require some more tweaks. I can share the APK if you'd like to play around.

@Marek Rogalski that's wild!

@Ivan Reese I totally forgot to mention, I ported your prototype to a custom HTML element! This makes it easy to pull into any web page, it works with native HTML form submission, and it's easy to extends. Im interested in quirky inputs for the web, so we'll see where it ends up being useful

So cool! Can I see the source? Would love to go the custom element route myself.

ya sure thing https://github.com/folk-systems/folk-canvas/blob/main/packages/labs/src/folk-knob.ts