30: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; }31:[] 2e:{"title":"Knob input","cells":[{"id":0,"value":"# Knob input","pinned":false,"hidden":false,"mode":"md"},{"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"},{"id":685,"value":"knob({ value: 42, size: 300 })","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":707,"value":"value","pinned":false,"hidden":false,"mode":"ojs"},{"id":703,"value":"viewof value = knob({ title: \"Value\" })","pinned":true,"hidden":false,"mode":"ojs"},{"id":720,"value":"md`Or you can combine several knobs and create your own custom _view_.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":647,"value":"knobGroup","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":990,"value":"minmaxKnob","pinned":false,"hidden":false,"mode":"ojs"},{"id":751,"value":"viewof minmaxKnob = knob({ value: 2.5, max: 10, step: 0.05, sensitivity: 2 })","pinned":true,"hidden":false,"mode":"ojs"},{"id":914,"value":"md`And who doesn't like a little bit of color?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":993,"value":"rgb","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":971,"value":"automatedKnob","pinned":false,"hidden":false,"mode":"ojs"},{"id":889,"value":"viewof automatedKnob = knob({ min: -1, max: 1, step: 0.01, automated: true });","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":712,"value":"md`---\n## Implementation\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":519,"value":"function clamp(min, max) {\n return (value) => Math.min(Math.max(value, min), max);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":592,"value":"function round(step) {\n return (number) => Math.round(number / step) * step;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":1072,"value":"import { view } from \"@tomlarkworthy/view\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}