🚧 Make analog indicators clickable
This commit is contained in:
@@ -312,7 +312,8 @@ function renderRail() {
|
||||
html += `<span class="abar-cell">
|
||||
<span class="abar-label top-label">${chNo}</span>
|
||||
<span class="lim-led lim-over" id="${id}-over" title="overflow (> ${rg.max})"></span>
|
||||
<span class="abar" id="${id}" title="${ch.name} (${ch.address}, MB ${ch.modbus})">
|
||||
<span class="abar" id="${id}" title="${ch.name} (${ch.address}, MB ${ch.modbus})"
|
||||
onclick="clickBar('${ch.kind}', ${mod.index}, ${channelNo(ch.address)}, event)">
|
||||
<span class="abar-fill"></span></span>
|
||||
<span class="lim-led lim-under" id="${id}-under" title="underflow (< ${rg.min})"></span>
|
||||
<span class="abar-label bottom-label">${chNo}</span>
|
||||
@@ -392,6 +393,28 @@ async function clickChannel(kind, module, channel) {
|
||||
}
|
||||
}
|
||||
|
||||
async function clickBar(kind, module, channel, ev) {
|
||||
if (READONLY) return;
|
||||
const bar = ev.currentTarget;
|
||||
const rect = bar.getBoundingClientRect();
|
||||
// click height -> fraction of the bar: bottom = range min, top = max
|
||||
const frac = Math.min(1, Math.max(0, 1 - (ev.clientY - rect.top) / rect.height));
|
||||
const chInfo = findChannel(kind, module, channel);
|
||||
const rg = (chInfo && chInfo.range) || {min: 0, max: 4095};
|
||||
const value = Math.round(rg.min + frac * (rg.max - rg.min));
|
||||
try {
|
||||
await api(`/api/channels/${kind}/${module}/${channel}`, {
|
||||
method: "POST",
|
||||
headers: {"Content-Type": "application/json"},
|
||||
body: JSON.stringify({action: "set", value}),
|
||||
});
|
||||
const res = await api("/api/values");
|
||||
applyValues(res.values);
|
||||
} catch (e) {
|
||||
console.warn("write rejected:", e.message);
|
||||
}
|
||||
}
|
||||
|
||||
// ---------------- diagnostics ----------------
|
||||
|
||||
async function renderDiagnostics(diag) {
|
||||
|
||||
@@ -190,6 +190,7 @@ h2 { margin: 4px 0 14px; }
|
||||
border-radius: 3px;
|
||||
overflow: hidden; /* clip the fill inside the rounded bar */
|
||||
display: inline-block;
|
||||
cursor: pointer; /* clickable: sets value at click height */
|
||||
}
|
||||
.abar-fill {
|
||||
position: absolute; bottom: 0; left: 0; right: 0; height: 0%;
|
||||
|
||||
Reference in New Issue
Block a user