Search Dial

Moving through time with a hand on it: scrubbing a video or a call recording, stepping through an agent run's trace or a deploy's log, reviewing a sensor's history frame by frame. Bound to an audio or video element it follows the media's time and seeks it. It is a real slider over the timeline (seconds, spoken as minutes, seconds and frame) with arrows for frames, Shift for seconds, Page keys for ten, and J K L; the three modes are a radio group of lit keys.

Copy the search-dial folder from its package next to your page, link its stylesheet and construct it on an element. Every option has a default; the lab’s Code tab writes the same example at any settings, and for React, Vue, Svelte or a custom element (Using a framework).

<link rel="stylesheet" href="search-dial/search-dial.css">
<div id="search-dial" style="width: min(90vw, 400px)"></div>

<script type="module">
  import SearchDial from './search-dial/search-dial.mjs';

  const searchDial = new SearchDial(document.getElementById('search-dial'), {
    mode: 'jog',
    position: 83.56,
    duration: 600,
  });

  // searchDial.update({ … });   change any option in place
  // searchDial.destroy();        and take it away again
</script>

new SearchDial(element, options)

Builds it inside the element with these options.

value

The playhead, seconds.

speed

How fast the playhead runs: the shuttle's while it is off rest or held, else J K L's.

update(opts = {})

Change options in place.

setMode(mode, { user = false } = {})

shuttleKey(k)

J / K / L: play backwards (faster each press), stop, play forwards (faster each press).

destroy()

Stops it and cleans up after it.

Events it fires, which bubble from the element: change, input.

1. At restThe timecode on the lit display, the lamp on the mode in use, the turned face's bow-tie toward the room lamp; nothing runs.
2. JOGThe dial under the finger with no lag; the playhead steps whole frames, two seconds to a turn.
3. SCRLTwelve seconds to a turn; flick and let go and the dial keeps turning, slowed by its own friction, until it stops.
4. SHTLTurn up to 150° either way: the further, the faster, from a quarter to thirty-two times; let go and it swings home and the playhead stops.
5. Tap a sideFor a single pointer with no drag: a click or tap left or right of the dial's centre moves one notch that way. JOG a frame, SCRL a second, both turning the dial as far as a hand would have; SHTL one speed step, latched (faster the same way, slower the other, through stop into reverse). A press that wanders more than 8 px is a turn, not a tap; the middle of the dial takes no tap; touching the wheel in JOG or SCRL stops the transport.
6. J K LL plays, each further L doubles the speed; J the same backwards; K stops.
7. At an endThe playhead stops at the start or the end.
8. MediaBound to an audio or video element it takes the media's length and follows its time; moving the dial seeks it.
9. AluminiumA bead-blasted plate, a turned aluminium dial, a reflective LCD.
10. GraphiteA soft-touch plate, a dark turned dial, a vacuum-fluorescent display.
11. Read-onlyA display of the playhead: the hand does nothing.
12. Off screen or hiddenIt draws nothing.
13. Reduced motionNo coasting and no spring: the dial stops where it is let go; taps step exactly as they do with motion; every reading is the same.

Made of: Turned anisotropic sheen, Heightfield turned metal, Pitch slip rubber ring, Concentric well stack, Room fixed sheen, Jog shuttle scroll, Flywheel friction, Shuttle return spring, Jkl transport, Tap a side notch, Media binding, Sleeping loop.

Original. The dial's face is a heightfield shaded per pixel once per size and finish, with an anisotropic term for the turned grooves; a rubber shuttle ring with grip ridges is baked once and drawn turned by the part of its angle inside one ridge pitch, so it turns in SHTL and springs home; the wheel turns in JOG and SCRL. The well, the wheel's side wall and every shadow are baked once, and the finger cup is a round sprite carried round. A frame is three drawImage calls and two small sprites.