Signalsmith-Audio/basics
1
0
Fork 0
Code

Support scroll-wheel on dials, use symbol for temporary data

Browse Source
This commit is contained in:
Geraint 2025-07-01 23:30:22 +01:00
parent cd947e7d63
commit 1797274fbb
1 changed files with 51 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

91
stfx/ui/html/generic.html
View File

@ -126,13 +126,24 @@
<label class="param-range" @if="${d => d.$type == 'ParamRange'}">
<div class="param-range-name">{name}</div>
<script>
let gestureUnit = Symbol(), scrollTimeout = Symbol();
function move(data, dx, dy, element) {
let prev = data.gesture ? data._gestureUnit : data.rangeUnit;
data._gestureUnit = data.rangeUnit = Math.min(1, Math.max(0, prev - dy/250));
let prev = data.gesture ? data[gestureUnit] : data.rangeUnit;
data[gestureUnit] = data.rangeUnit = Math.min(1, Math.max(0, prev - dy/250));
}
function press(data, count) {
function scroll(data, dx, dy, element) {
let prev = data.gesture ? data[gestureUnit] : data.rangeUnit;
clearTimeout(element[scrollTimeout]);
data.gesture = true;
data._gestureUnit = data.rangeUnit;
element[scrollTimeout] = setTimeout(_ => data.gesture = false, 500);
data[gestureUnit] = data.rangeUnit = Math.min(1, Math.max(0, prev + dy/250));
}
function press(data, count, event, element) {
clearTimeout(element[scrollTimeout]);
data.gesture = true;
data[gestureUnit] = data.rangeUnit;
if (count == 2) {
data.value = data.defaultValue;
data.gesture = false;
@ -141,49 +152,48 @@
function unpress(data) {
data.gesture = false;
}
function drawDial(data, canvas) {
let scale = window.devicePixelRatio;
let pixels = canvas.offsetWidth*scale;
if (canvas.width != pixels) canvas.width = pixels;
if (canvas.height != pixels) canvas.height = pixels;
let context = canvas.getContext('2d');
context.resetTransform();
context.clearRect(0, 0, pixels, pixels);
context.scale(pixels/2, pixels/2);
context.translate(1, 1);
context.beginPath();
context.ellipse(0, 0, 0.8, 0.8, 0, 0, Math.PI*2);
context.fillStyle = '#FFF';
context.fill();
context.lineWidth = 0.2;
context.lineCap = 'round';
context.beginPath();
context.ellipse(0, 0, 0.9, 0.9, 0, Math.PI*-1.25, Math.PI*0.25);
context.strokeStyle = '#0001';
context.stroke();
let rangeUnit = data.rangeUnit;
if (data.gesture) rangeUnit = data[gestureUnit];
context.beginPath();
context.ellipse(0, 0, 0.9, 0.9, 0, Math.PI*-1.25, Math.PI*(-1.249 + rangeUnit*1.499));
context.strokeStyle = '#000';
context.stroke();
}
</script>
<div class="param-range-value" $move="${move}" $press="${press}" $unpress="${unpress}">
<div class="param-range-value" $move="${move}" $scroll="${scroll}" $press="${press}" $unpress="${unpress}">
<canvas class="param-range-dial" $update="${drawDial}"></canvas>
<output class="param-range-text">{text}</output><br>
<div class="param-range-units">{textUnits}</div>
</div>
</label>
</template>
<script>
function drawDial(data, canvas) {
let scale = window.devicePixelRatio;
let pixels = canvas.offsetWidth*scale;
if (canvas.width != pixels) canvas.width = pixels;
if (canvas.height != pixels) canvas.height = pixels;
let context = canvas.getContext('2d');
context.resetTransform();
context.clearRect(0, 0, pixels, pixels);
context.scale(pixels/2, pixels/2);
context.translate(1, 1);
context.beginPath();
context.ellipse(0, 0, 0.8, 0.8, 0, 0, Math.PI*2);
context.fillStyle = '#FFF';
context.fill();
context.lineWidth = 0.2;
context.lineCap = 'round';
context.beginPath();
context.ellipse(0, 0, 0.9, 0.9, 0, Math.PI*-1.25, Math.PI*0.25);
context.strokeStyle = '#0001';
context.stroke();
let rangeUnit = data.rangeUnit;
if (data.gesture) rangeUnit = data._gestureUnit;
context.beginPath();
context.ellipse(0, 0, 0.9, 0.9, 0, Math.PI*-1.25, Math.PI*(-1.249 + rangeUnit*1.499));
context.strokeStyle = '#000';
context.stroke();
}
</script>
</section>
<template @foreach>
<div class="plot" @if="${d => d.$type == 'Spectrum'}" $fullscreentoggle='foo'>
@ -308,6 +318,7 @@
let state = Matsui.replace(document.body, {name: "..."});
state.trackMerges(merge => {
console.log(JSON.stringify(merge));
window.parent.postMessage(CBOR.encode(merge), '*');
});
let pendingMerge = null;