1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
|
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Desktop Settings — levels casting: detent fader + single drum</title>
<link rel="stylesheet" href="desktop-settings-shared.css">
<style>
:root{
--ground:#151311; --panel:#100f0f; --well:#0a0c0d; --raise:#1a1917;
--silver:#bfc4d0; --cream:#f3e7c5; --steel:#969385; --dim:#7c838a;
--slate:#424f5e; --slate-hi:#54677d; --wash:#2c2f32;
--pass:#74932f; --fail:#cb6b4d;
--phos:#7fe0a0; --phos-dim:#1c3626; --vfd:#63e6c8;
--sevgrn:#57d357; --sevred:#e2543f; --sevoff:#1a1613;
--jewel-r:#ff5b45; --jewel-a:#ffb43a; --jewel-g:#6fce33;
--gold:#e2a038; --gold-hi:#ffbe54;
--amber-grad-top:#f2c76a; --amber-grad-mid:#d29638; --amber-grad-bot:#8f671f;
--amber-edge:#7d5c16; --amber-warn:#f0b552;
--glow-hi:255,190,84; --glow-lo:226,160,56;
--mono:"BerkeleyMono Nerd Font","Berkeley Mono",monospace;
--pulse-rate:1s;
}
.page-cap { width: 100%; text-align: center; color: var(--dim); font-size: 12px; letter-spacing: 0.04em; max-width: 560px; }
.page-cap b { color: var(--gold); }
.row { display: flex; justify-content: center; align-items: center; gap: 14px; flex-wrap: wrap; }
.readout { text-align: center; color: var(--steel); font-size: 11px; letter-spacing: 0.1em; min-height: 15px; }
.readout b { color: var(--gold-hi); font-weight: 400; }
</style>
</head>
<body class="ds-stage">
<div class="page-cap">
<b>Levels casting.</b> Brightness: the new multi-detent slide attenuator —
drag slowly across 25 / 50 / 75 and feel the thumb park until you push
through (the tick lights while parked). Keyboard: the generalized drum
roller running a single drum, 0-10.
</div>
<div class="ds-panel" style="width:320px">
<div class="ds-face"><span class="glyph">⚙</span><span class="title">Levels</span></div>
<div class="ds-engrave">Brightness — detent fader (new)</div>
<div class="row" id="fader-well"></div>
<div class="readout" id="ro-b"></div>
<div class="ds-engrave">Keyboard — drum roller ×10 (upgraded)</div>
<div class="row" id="drum-well"></div>
<div class="readout" id="ro-k"></div>
<div class="ds-toast" id="toast"></div>
</div>
<script src="widgets.js"></script>
<script src="dupre-kit-additions.js"></script>
<script src="desktop-settings-shared.js"></script>
<script>
const h = DS.h;
DS.bindToast(document.getElementById("toast"));
let booting = true;
const debounce = (fn, ms) => { let t; return (...a) => { clearTimeout(t); t = setTimeout(() => fn(...a), ms); }; };
function render() {
booting = true;
const fw = document.getElementById("fader-well");
fw.innerHTML = "";
const roB = document.getElementById("ro-b");
const commitB = debounce((v) => {
const pct = Math.max(DS.SLIDERS.brightness.floor, v);
if (pct !== DS.state.brightness) DS.setSlider("brightness", pct, fw);
}, 350);
DUPRE.detentFader(fw, {
value: DS.state.brightness,
detents: [25, 50, 75],
onChange: (v, label) => {
roB.innerHTML = "brightness: <b>" + v + "%</b>" + (label.includes("detent") ? " · <b>parked</b>" : "");
if (!booting) commitB(v);
},
});
const dw = document.getElementById("drum-well");
dw.innerHTML = "";
const roK = document.getElementById("ro-k");
const commitK = debounce((vals) => {
const pct = Math.round(vals[0]) * 10;
if (pct !== DS.state.kbd) DS.setSlider("kbd", pct, dw);
}, 350);
DUPRE.drumRoller(dw, {
title: "KBD BACKLIGHT ×10",
channels: [{ name: "KBD", v: Math.round(DS.state.kbd / 10) }],
min: 0,
max: 10,
onChange: (vals) => {
roK.innerHTML = "keyboard: <b>" + Math.round(vals[0]) * 10 + "%</b>";
if (!booting) commitK(vals);
},
});
booting = false;
}
DS.onChange(render);
render();
</script>
</body>
</html>
|
