2b:null 2c:["$","title",null,{"children":"Knob input | Torben Jansen | Observable"}] 31:Tea7,function knob({ value, min, max, step, sensitivity, size, title = "", color = "steelblue", automated = false } = {}) { const { sin, cos, PI } = Math; min = +min || 0; max = +max || 100; step = +step || 1; sensitivity = +sensitivity || 10; size = +size || 100; const alpha = (30 * PI) / 180; const beta = (330 * PI) / 180; const r = 0.6; const p1 = [cos(alpha) * r, sin(alpha) * r]; const p2 = [cos(beta) * r, sin(beta) * r]; const interpolateValue = interpolate(min, max); const interpolateAngle = interpolate(alpha, beta); const clampValue = clamp(min, max); const roundValue = round(step); const stepPrecision = precision(step); const parseValue = (v) => parseFloat(roundValue(clampValue(v)).toFixed(stepPrecision)); value = parseValue(isNaN(value) ? (min + max) / 2 : value); let t, phi, start, delta, _value = value; function mousedown(evt) { evt.preventDefault(); start = [evt.clientX, evt.clientY]; ui.style.cursor = "grabbing"; } function mousemove(evt) { if (!evt.buttons) start = null; if (!start) return; delta = start[1] - evt.clientY; start[1] -= delta; const offset = (delta * sensitivity) / width; _value = parseValue(interpolateValue(t + offset)); update(); } function mouseup(evt) { start = null; ui.style.cursor = "grab"; } function touchstart(evt) { evt.preventDefault(); } function doubleclick(evt) { _value = value; update(); } function update(raiseEvent = true) { t = interpolateValue.invert(_value); phi = interpolateAngle(t); pointer.transform.baseVal .getItem(0) .setRotate((phi * 180) / PI + 180, 0, 0); arc.setAttribute("d", `M ${cos(phi) * r} ${sin(phi) * r} A ${r} ${r} 0 ${+(phi >= PI + alpha)} 0 ${p1}`); val.textContent = _value; if (raiseEvent) ui.dispatchEvent(new CustomEvent("input", { bubbles: true })); } const ui = svg` `; const pointer = ui.querySelector(".pointer"); const arc = ui.querySelector(".arc .top"); const val = ui.querySelector(".value"); update(); if (!automated) { ui.style.cursor = "grab"; ui.addEventListener("pointerdown", mousedown); ui.addEventListener("dblclick", doubleclick); ui.addEventListener("touchstart", touchstart); document.addEventListener("pointermove", mousemove); document.addEventListener("pointerup", mouseup); invalidation.then(() => { ui.removeEventListener("pointerdown", mousedown); ui.removeEventListener("dblclick", doubleclick); ui.removeEventListener("touchstart", touchstart); document.removeEventListener("pointermove", mousemove); document.removeEventListener("pointerup", mouseup); }); } function setValue(v) { _value = parseValue(v); update(false); } ui.setValue = setValue; Object.defineProperty(ui, "value", { get: () => _value, set: setValue }); return ui; }32:[] 2f:{"id":"77b34c02595f3d02","slug":"knob-input","title":"Knob input","thumbnail":"af743529f49084eab92d790b9bcf0dad70c892f57bd80564d790c75ea4e04a40","access_level":"public","create_time":"$D2021-09-12T20:30:13.781Z","update_time":"$D2024-10-14T07:59:01.623Z","view_time":null,"first_public_time":"$D2021-09-26T12:58:44.387Z","fork":false,"stars":28,"starred":false,"owner":{"type":"team","id":"03836a98946da550","login":"toja","name":"Torben Jansen","avatar_url":"https://avatars-next.observableusercontent.com/f79c27ca86680a3a399f6eb78b22436d6dd665b49ad284ba1ccfb405bfc89fe0","tier":"starter_2024"},"version":1082,"publish_version":1082,"role":null,"authored":false,"authors":[{"type":"individual","id":"9334261743951ef0","login":"toja","name":"Torben Jansen","avatar_url":"https://avatars-next.observableusercontent.com/f79c27ca86680a3a399f6eb78b22436d6dd665b49ad284ba1ccfb405bfc89fe0","tier":null}],"members":[{"type":"individual","id":"9334261743951ef0","login":"toja","name":"Torben Jansen","avatar_url":"https://avatars-next.observableusercontent.com/f79c27ca86680a3a399f6eb78b22436d6dd665b49ad284ba1ccfb405bfc89fe0","tier":null,"role":"editor"}],"comments":[{"id":"33974b4f07be03ba","reply_to_id":null,"content":"Way cool. Any chance of adding a centered title too?","create_time":"$D2021-09-27T02:04:20.753Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"591dcad3c6121253","login":"esperanc","name":"Claudio Esperança","avatar_url":"https://avatars-next.observableusercontent.com/91db65fe4bf8e490e5ff1a548612f36ccc04fa7781189e7e4dc7ba6633a66e52","tier":null}},{"id":"9e663d80688fb93d","reply_to_id":"33974b4f07be03ba","content":"Thanks! Do you mean like inside the ring? There's already an option to set and display a title above the knob","create_time":"$D2021-09-27T15:54:53.850Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"9334261743951ef0","login":"toja","name":"Torben Jansen","avatar_url":"https://avatars-next.observableusercontent.com/f79c27ca86680a3a399f6eb78b22436d6dd665b49ad284ba1ccfb405bfc89fe0","tier":null}},{"id":"7c4c69f60e5605c9","reply_to_id":"33974b4f07be03ba","content":"Of course. I missed that first example. Thanks!","create_time":"$D2021-09-27T21:10:34.722Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"591dcad3c6121253","login":"esperanc","name":"Claudio Esperança","avatar_url":"https://avatars-next.observableusercontent.com/91db65fe4bf8e490e5ff1a548612f36ccc04fa7781189e7e4dc7ba6633a66e52","tier":null}},{"id":"3c0bb01478220432","reply_to_id":null,"content":"Reminds me of the dials from YUI... https://clarle.github.io/yui3/yui/docs/dial/dial-basic.html","create_time":"$D2021-09-29T16:45:02.274Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"1d55995fe48aa1ea","login":"lukesmurray","name":"Luke Murray","avatar_url":"https://avatars-next.observableusercontent.com/71a8e2c24320cb7d8a88bd0d0ab7cb1cd2b09805978c252cbcc5facac7a97c8b","tier":null}}],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":7,"collection":{"id":"92e0ca29c645d922","slug":"inputs-views","title":"Inputs & views","owner":{"id":"03836a98946da550","login":"toja","name":"Torben Jansen"}},"type":"notebook","body":{"title":"Knob input","cells":[{"id":0,"value":"# Knob input","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":7,"value":"md`As Tom Larkworthy [has put it](https://observablehq.com/@tomlarkworthy/audio-inputs): Knobs are an inferior but cooler way of implementing a slider. Not sure if they are really inferior, but they are definitely cool!\n\n~~~javascript\nimport { knob } from \"@toja/knob-input\"\n~~~\n\nSo here's my version of a knob input. Drag up and down to increase or decrease the value. On double click the knob will reset to its default value.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":685,"value":"knob({ value: 42, size: 300 })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":700,"value":"md`Of course you can use the knob input as a _view_ to control a value in your notebook.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":707,"value":"value","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":703,"value":"viewof value = knob({ title: \"Value\" })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":720,"value":"md`Or you can combine several knobs and create your own custom _view_.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":647,"value":"knobGroup","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":636,"value":"viewof knobGroup = {\n return view`\n ${[\"a\", knob({ value: 0 })]}\n ${[\"b\", knob({ value: 25 })]}\n ${[\"c\", knob({ value: 50 })]}\n ${[\"d\", knob({ value: 75 })]}\n `;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":786,"value":"md`It's possible to specify the _minimum_, _maximum_ and _step size_, as well as the _sensitivity_ of a knob. By default the minimum is 0 and the maximum 100.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":990,"value":"minmaxKnob","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":751,"value":"viewof minmaxKnob = knob({ value: 2.5, max: 10, step: 0.05, sensitivity: 2 })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":914,"value":"md`And who doesn't like a little bit of color?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":993,"value":"rgb","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":917,"value":"viewof rgb = {\n return view`\n ${[\"r\", knob({ color: \"#ea0000\", value: 220, max: 255 })]}\n ${[\"g\", knob({ color: \"#00aa00\", value: 80, max: 255 })]}\n ${[\"b\", knob({ color: \"#0000da\", value: 200, max: 255 })]}\n `;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":978,"value":"md`Last but not least knobs can be automated. To disable all user interactions set automated = true. A little dot indicates that the knob is automated.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":971,"value":"automatedKnob","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":889,"value":"viewof automatedKnob = knob({ min: -1, max: 1, step: 0.01, automated: true });","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":820,"value":"{\n let value = Math.sin(now / 1000);\n viewof automatedKnob.value = value;\n viewof automatedKnob.dispatchEvent(new Event(\"input\", { bubbles: true }));\n return value;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":712,"value":"md`---\n## Implementation\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":165,"value":"function interpolate(a, b) {\n const interpolator = (t) => a * (1 - t) + b * t;\n interpolator.invert = (v) => (v - a) / (b - a);\n return interpolator;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":519,"value":"function clamp(min, max) {\n return (value) => Math.min(Math.max(value, min), max);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":592,"value":"function round(step) {\n return (number) => Math.round(number / step) * step;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":791,"value":"function precision(step) {\n if (!isFinite(step)) return 0;\n let e = 1, p = 0;\n while (Math.round(step * e) / e !== step) (e *= 10, p++);\n return p;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1072,"value":"import { view } from \"@tomlarkworthy/view\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"