theater/tendrils
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve Art-Net hover display with device correspondence

Browse Source 
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Ian Gulliver
2026-01-27 16:08:55 -08:00
parent b2f7d44fe9
commit c90275d664
1 changed files with 52 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
static/index.html
View File

@@ -1345,13 +1345,15 @@
if (artnetInfo && artnetInfo.isOut) { if (artnetInfo && artnetInfo.isOut) {
const outEl = document.createElement('div'); const outEl = document.createElement('div');
outEl.className = 'artnet-info out-info'; outEl.className = 'artnet-info out-info';
const firstOut = artnetInfo.outputs[0];
const outLabel = firstOut.firstTarget || firstOut.display;
const outMore = artnetInfo.outputs.length > 1 ? ', ...' : ''; const outMore = artnetInfo.outputs.length > 1 ? ', ...' : '';
outEl.innerHTML = '<span class="lbl">←</span> ' + artnetInfo.outputs[0] + outMore; outEl.innerHTML = '<span class="lbl">←</span> ' + outLabel + outMore;
const detailWrapper = document.createElement('div'); const detailWrapper = document.createElement('div');
detailWrapper.className = 'artnet-detail-wrapper'; detailWrapper.className = 'artnet-detail-wrapper';
const detail = document.createElement('div'); const detail = document.createElement('div');
detail.className = 'artnet-detail'; detail.className = 'artnet-detail';
buildClickableList(detail, artnetInfo.outputs, '←', (l, v) => l + ' ' + v); buildClickableList(detail, artnetInfo.outputs.map(o => o.display), '←', (l, v) => l + ' ' + v);
detailWrapper.appendChild(detail); detailWrapper.appendChild(detail);
outEl.appendChild(detailWrapper); outEl.appendChild(detailWrapper);
div.appendChild(outEl); div.appendChild(outEl);
@@ -1360,13 +1362,15 @@
if (artnetInfo && artnetInfo.isIn) { if (artnetInfo && artnetInfo.isIn) {
const inEl = document.createElement('div'); const inEl = document.createElement('div');
inEl.className = 'artnet-info in-info'; inEl.className = 'artnet-info in-info';
const firstIn = artnetInfo.inputs[0];
const inLabel = firstIn.firstTarget || firstIn.display;
const inMore = artnetInfo.inputs.length > 1 ? ', ...' : ''; const inMore = artnetInfo.inputs.length > 1 ? ', ...' : '';
inEl.innerHTML = '<span class="lbl">→</span> ' + artnetInfo.inputs[0] + inMore; inEl.innerHTML = '<span class="lbl">→</span> ' + inLabel + inMore;
const detailWrapper = document.createElement('div'); const detailWrapper = document.createElement('div');
detailWrapper.className = 'artnet-detail-wrapper'; detailWrapper.className = 'artnet-detail-wrapper';
const detail = document.createElement('div'); const detail = document.createElement('div');
detail.className = 'artnet-detail'; detail.className = 'artnet-detail';
buildClickableList(detail, artnetInfo.inputs, '→', (l, v) => l + ' ' + v); buildClickableList(detail, artnetInfo.inputs.map(i => i.display), '→', (l, v) => l + ' ' + v);
detailWrapper.appendChild(detail); detailWrapper.appendChild(detail);
inEl.appendChild(detailWrapper); inEl.appendChild(detailWrapper);
div.appendChild(inEl); div.appendChild(inEl);
@@ -1749,19 +1753,54 @@
const artnetData = data.artnet_nodes || []; const artnetData = data.artnet_nodes || [];
const artnetNodes = new Map(); const artnetNodes = new Map();
const formatUniverse = (u) => {
const net = (u >> 8) & 0x7f;
const subnet = (u >> 4) & 0x0f;
const universe = u & 0x0f;
return net + ':' + subnet + ':' + universe + ' (' + u + ')';
};
const universeInputs = new Map();
const universeOutputs = new Map();
artnetData.forEach(an => {
const name = getShortLabel(an.node);
(an.inputs || []).forEach(u => {
if (!universeInputs.has(u)) universeInputs.set(u, []);
universeInputs.get(u).push(name);
});
(an.outputs || []).forEach(u => {
if (!universeOutputs.has(u)) universeOutputs.set(u, []);
universeOutputs.get(u).push(name);
});
});
const collapseNames = (names) => {
const counts = {};
names.forEach(n => counts[n] = (counts[n] || 0) + 1);
return Object.entries(counts).map(([name, count]) => count > 1 ? name + ' x' + count : name);
};
artnetData.forEach(an => { artnetData.forEach(an => {
const nodeId = an.node?.typeid; const nodeId = an.node?.typeid;
if (!nodeId) return; if (!nodeId) return;
const formatUniverse = (u) => { const inputs = (an.inputs || []).slice().sort((a, b) => a - b).map(u => {
const net = (u >> 8) & 0x7f; const sources = collapseNames(universeOutputs.get(u) || []);
const subnet = (u >> 4) & 0x0f; const uniStr = formatUniverse(u);
const universe = u & 0x0f; if (sources.length > 0) {
return net + ':' + subnet + ':' + universe + ' (' + u + ')'; return { display: sources[0] + ' [' + uniStr + ']', firstTarget: sources[0] };
}; }
return { display: uniStr, firstTarget: null };
const inputs = (an.inputs || []).slice().sort((a, b) => a - b).map(formatUniverse); });
const outputs = (an.outputs || []).slice().sort((a, b) => a - b).map(formatUniverse); const outputs = (an.outputs || []).slice().sort((a, b) => a - b).map(u => {
const dests = collapseNames(universeInputs.get(u) || []);
const uniStr = formatUniverse(u);
if (dests.length > 0) {
return { display: dests[0] + ' [' + uniStr + ']', firstTarget: dests[0] };
}
return { display: uniStr, firstTarget: null };
});
artnetNodes.set(nodeId, { artnetNodes.set(nodeId, {
isOut: outputs.length > 0, isOut: outputs.length > 0,