christian/companion-buttons
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Companion Buttons 1.1.0: pages in the ＋ picker, buttons chosen on the tile

Browse Source 
The picker row (page list, Clear, Done) is gone. Each Companion page is now
its own ＋ entry, titled with the page's name, showing the whole page minus
page up/down. The grid icon switches the tile to choosing: click buttons to
take them out or put them back, click the icon again when done. The gear
holds one switch, Page layout (Companion's rows and columns, or packed).

- Tiles follow their page by Companion's page id and buttons by row/column,
  so inserted pages and re-imported pages keep showing.
- A tile remounted after a settings change asks GET /state for the snapshot
  the already-open stream sent, instead of waiting blank.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
christian
2026-10-15 11:48:24 -04:00
co-authored by Claude Opus 5.5
parent 415453ef5f
commit 0a6cec88aa
8 changed files with 642 additions and 804 deletions
Download Patch File Download Diff File Expand all files Collapse all files
test/companion-mock.js
+28 -5
View File
@@ -8,9 +8,10 @@
*
* then point Companion Buttons at host 127.0.0.1, port 18000 in /admin.
*
* It serves the two subscriptions the module uses — pages.watch and
* preview.graphics.controlId — over a hand-rolled websocket (no deps), with
* three pages. Page 1's first button flips between green and red every two
* It serves the three subscriptions the module uses — pages.watch,
* preview.graphics.controlId and controls.watchControl — over a hand-rolled
* websocket (no deps), with three pages: a status page with a page-up
* button, a camera page, and an unnamed page holding only navigation. Page 1's first button flips between green and red every two
* seconds, like a status button; page 1's second button redraws the same
* picture every 300 ms, like a button fed a variable that has not changed.
* Every 30 s it sends PING and drops a client that does not answer PONG,
@@ -123,9 +124,22 @@ function readFrames(state, data, onText, onClose) {
function startMock(port = 0, { renameAfter = 0, moveAfter = 0, log = () => {} } = {}) {
const pages = {
p1: { id: 'p1', name: '1\\nStatus', controls: { 0: { 0: 'bank:flip', 1: 'bank:steady', 2: 'bank:blue' } } },
p1: { id: 'p1', name: '1\\nStatus', controls: { 0: { 0: 'bank:flip', 1: 'bank:steady', 2: 'bank:blue' }, 1: { 0: 'bank:up1' } } },
p2: { id: 'p2', name: 'Cameras', controls: { 0: { 0: 'bank:cam1' }, 1: { 3: 'bank:cam2' } } },
p3: { id: 'p3', name: 'PAGE', controls: {} },
p3: { id: 'p3', name: 'PAGE', controls: { 0: { 0: 'bank:up3' } } },
};
const layered = (value, isExpression = false) => ({
type: 'button-layered',
style: { layers: [{ id: 'canvas', type: 'canvas' }, { id: 'text0', type: 'text', text: { value, isExpression } }] },
});
const configs = {
'bank:flip': layered('FLIP'),
'bank:steady': layered('Steady'),
'bank:blue': layered('Blue'),
'bank:cam1': { type: 'button', style: { text: 'CAM 1' } },
'bank:cam2': layered('CAM 2'),
'bank:up1': { type: 'pageup', style: {} },
'bank:up3': { type: 'pageup', style: {} },
};
const order = ['p1', 'p2', 'p3'];
const looks = {
@@ -184,6 +198,14 @@ function startMock(port = 0, { renameAfter = 0, moveAfter = 0, log = () => {} }
}
if (msg.method !== 'subscription') return send(client, { id: msg.id, error: { message: 'mock: only subscriptions' } });
const { path, input } = msg.params || {};
if (path === 'controls.watchControl') {
const cfg = configs[input && input.controlId];
if (!cfg) return send(client, { id: msg.id, error: { message: `Control ${input && input.controlId} not found` } });
stats.subscriptions += 1;
client.subs.set(msg.id, { path, input });
send(client, { id: msg.id, result: { type: 'started' } });
return send(client, { id: msg.id, result: { type: 'data', data: { type: 'init', config: cfg, runtime: {} } } });
}
if (path !== 'pages.watch' && path !== 'preview.graphics.controlId') {
return send(client, { id: msg.id, error: { message: `No procedure found on path "${path}"` } });
}
@@ -276,6 +298,7 @@ function startMock(port = 0, { renameAfter = 0, moveAfter = 0, log = () => {} }
redraw,
looks,
pages,
configs,
/** Drop every client without a close frame, as a crash or a cable pull would. */
dropAll() {
for (const c of clients) c.socket.destroy();
test/companion.test.js
+92 -84
View File
@@ -63,9 +63,10 @@ function get(port, path) {
});
}
/** An SSE client that collects `button` events. */
/** An SSE client that collects `page` and `button` events. */
function listen(port, path) {
const events = [];
const pages = [];
const buttons = [];
let req;
const ready = new Promise((resolve) => {
req = http.get({ host: '127.0.0.1', port, path }, (res) => {
@@ -78,13 +79,23 @@ function listen(port, path) {
buf = buf.slice(at + 2);
const name = /^event: (.+)$/m.exec(block);
const data = /^data: (.+)$/m.exec(block);
if (name && data && name[1] === 'button') events.push(JSON.parse(data[1]));
if (!name || !data) continue;
if (name[1] === 'page') pages.push(JSON.parse(data[1]));
if (name[1] === 'button') buttons.push(JSON.parse(data[1]));
}
});
resolve();
});
});
return { events, ready, close: () => req.destroy(), last: () => events[events.length - 1] };
return {
pages,
buttons,
ready,
close: () => req.destroy(),
page: () => pages[pages.length - 1],
/** The latest picture for one row.column, or undefined. */
pic: (key) => [...buttons].reverse().find((b) => b.key === key),
};
}
/* ── pure parts ────────────────────────────────────────────────────────── */
@@ -135,6 +146,8 @@ function testPageBook() {
book.apply({ type: 'update', updatedOrder: ['c', 'b'], added: [], changes: [] });
assert.strictEqual(book.locate('bank:x'), null);
assert.strictEqual(book.count, 2);
assert.strictEqual(book.page('b').number, 2);
assert.strictEqual(book.page('a'), null);
}
/* ── against the mock ─────────────────────────────────────────────────── */
@@ -152,92 +165,91 @@ async function testLive() {
await until('Companion connected', () => handle.health().status === 'ok');
assert.match(handle.health().message, /3 pages/);
// pages for the picker
const pages = JSON.parse((await get(at, '/pages')).body);
assert.strictEqual(pages.status, 'ok');
assert.deepStrictEqual(pages.pages.map((p) => p.name), ['1 Status', '2 Cameras', 'Page 3']);
assert.deepStrictEqual(pages.pages[1].buttons, [
{ row: 0, column: 0, controlId: 'bank:cam1' },
{ row: 1, column: 3, controlId: 'bank:cam2' },
// the ＋ picker: one entry per page with something to show — not the page that is only navigation
await until('nav buttons learned', () => serverEntry.tiles().length === 2);
const tiles = serverEntry.tiles();
assert.deepStrictEqual(tiles.map((t) => [t.id, t.name]), [['p1', '1 Status'], ['p2', '2 Cameras']]);
assert.deepStrictEqual(tiles[0].settings, { page: 'p1' });
assert.deepStrictEqual(Object.keys(tiles[0].instanceSchema), ['layout']);
const pageOptions = JSON.parse((await get(at, '/page-options')).body).options;
assert.deepStrictEqual(pageOptions.map((o) => o.label), ['1 Status', '2 Cameras', 'Page 3']);
// a whole page: every button but the page-up one, laid out where Companion has them
const whole = listen(at, '/stream/p1');
await whole.ready;
await until('whole page', () => whole.page() && whole.page().status === 'ok' && whole.page().spots.length === 3);
assert.deepStrictEqual(whole.page().spots, [
{ key: '0.0', row: 0, column: 0 },
{ key: '0.1', row: 0, column: 1 },
{ key: '0.2', row: 0, column: 2 },
]);
assert.strictEqual(whole.page().name, '1 Status');
await until('three pictures', () => ['0.0', '0.1', '0.2'].every((k) => whole.pic(k) && whole.pic(k).image));
// thumbnails
const img = await get(at, '/image/blue');
assert.strictEqual(img.status, 200);
assert.strictEqual(img.type, 'image/png');
assert.deepStrictEqual([...img.body.subarray(1, 4)], [0x50, 0x4e, 0x47]);
assert.strictEqual((await get(at, '/image/gone')).status, 404);
assert.strictEqual((await get(at, '/image/..%2Fetc')).status, 400);
assert.strictEqual((await get(at, `/image/${'x'.repeat(200)}`)).status, 400);
// the snapshot a remounted tile asks for matches what the stream sent
const snap = JSON.parse((await get(at, '/state/p1')).body);
assert.deepStrictEqual(snap.page.spots, whole.page().spots);
assert.deepStrictEqual(snap.buttons.map((b) => [b.key, Boolean(b.image), b.seen]), [['0.0', true, true], ['0.1', true, true], ['0.2', true, true]]);
assert.strictEqual((await get(at, '/state/p1/x')).status, 400);
// a button that redraws the same picture every 300 ms sends one event, not five
const steady = listen(at, '/stream/1.0.1.steady');
await steady.ready;
await until('steady first frame', () => steady.last() && steady.last().image);
const settled = steady.events.length;
// a button that redraws the same picture every 300 ms is sent once, not five times
const steadyCount = whole.buttons.filter((b) => b.key === '0.1').length;
await sleep(1600);
assert.strictEqual(steady.events.length, settled, 'identical redraws must not be re-sent');
assert.strictEqual(steady.last().key, '1.0.1.steady');
assert.strictEqual(steady.last().controlId, 'bank:steady');
assert.deepStrictEqual(steady.last().location, { page: 1, row: 0, column: 1, pageName: '1 Status' });
assert.strictEqual(whole.buttons.filter((b) => b.key === '0.1').length, steadyCount, 'identical redraws must not be re-sent');
// a status button that changes is forwarded
const flip = listen(at, '/stream/1.0.0.flip');
await flip.ready;
await until('flip first frame', () => flip.last() && flip.last().image);
const firstLook = flip.last().image;
await until('flip redraw', () => flip.last().image !== firstLook, 4000);
const firstLook = whole.pic('0.0').image;
await until('flip redraw', () => whole.pic('0.0').image !== firstLook, 4000);
// one stream carries all of a tile's buttons: each is sent on connect
const pair = listen(at, '/stream/1.0.2.blue/2.1.3.cam2/1.0.2.blue');
await pair.ready;
await until('both buttons', () => new Set(pair.events.filter((e) => e.image).map((e) => e.controlId)).size === 2);
assert.deepStrictEqual([...new Set(pair.events.map((e) => e.key))].sort(), ['1.0.2.blue', '2.1.3.cam2']);
pair.close();
assert.strictEqual((await get(at, `/stream/${Array.from({ length: 65 }, (_, i) => `1.0.${i}.b${i}`).join('/')}`)).status, 400);
assert.strictEqual((await get(at, '/stream/flip')).status, 400);
assert.strictEqual((await get(at, '/stream/1.0.0.bank:flip')).status, 400);
// chosen buttons only, in the order chosen
const some = listen(at, '/stream/p2/1.3/0.0');
await some.ready;
await until('two ticked', () => some.page() && some.page().spots.length === 2 && some.pic('1.3') && some.pic('1.3').image && some.pic('0.0'));
assert.deepStrictEqual(some.page().spots.map((s) => s.key), ['1.3', '0.0']);
// a button that is gone, with nothing at its place either, says so instead of hanging
const gone = listen(at, '/stream/3.0.0.gone');
await gone.ready;
await until('missing button answered', () => gone.last() && gone.last().seen);
assert.strictEqual(gone.last().image, null);
assert.strictEqual(gone.last().controlId, null);
// a chosen place with nothing on it is answered, not left waiting
const hole = listen(at, '/stream/p2/3.3');
await hole.ready;
await until('empty place answered', () => hole.pic('3.3') && hole.pic('3.3').seen);
assert.strictEqual(hole.pic('3.3').image, null);
hole.close();
// an unknown id falls back to what is at its page/row/column
const byPlace = listen(at, '/stream/2.0.0.oldid');
await byPlace.ready;
await until('found by place', () => byPlace.last() && byPlace.last().image);
assert.strictEqual(byPlace.last().controlId, 'bank:cam1');
byPlace.close();
// a page that does not exist says so
const missing = listen(at, '/stream/nope');
await missing.ready;
await until('missing page', () => missing.page());
assert.strictEqual(missing.page().found, false);
missing.close();
// the button moves to another page in Companion: the tile follows it
// bad paths
assert.strictEqual((await get(at, '/stream/p1/abc')).status, 400);
assert.strictEqual((await get(at, '/stream/p:1')).status, 400);
assert.strictEqual((await get(at, `/stream/p1/${Array.from({ length: 65 }, (_, i) => `0.${i}`).join('/')}`)).status, 400);
// the page is re-imported: every button gets a new id, the tile keeps showing the same places
mock.looks['bank:cam2-new'] = mock.looks['bank:cam2'];
mock.configs['bank:cam2-new'] = mock.configs['bank:cam2'];
mock.pageUpdate({
type: 'update',
updatedOrder: null,
added: [],
changes: [
{ id: 'p1', name: null, controls: [{ row: 0, column: 1, controlId: null }] },
{ id: 'p2', name: null, controls: [{ row: 1, column: 0, controlId: 'bank:steady' }] },
],
changes: [{ id: 'p2', name: 'Cameras Renamed', controls: [{ row: 1, column: 3, controlId: 'bank:cam2-new' }] }],
});
await until('moved location', () => steady.last().location && steady.last().location.page === 2);
assert.strictEqual(steady.last().controlId, 'bank:steady');
await until('renamed', () => some.page().name === '2 Cameras Renamed');
await until('re-imported button still shown', () => some.pic('1.3') && some.pic('1.3').image);
// the page is re-imported: every button gets a new id, the tile keeps its place
mock.looks['bank:blue-new'] = mock.looks['bank:blue'];
const blue = listen(at, '/stream/1.0.2.blue');
await blue.ready;
await until('blue', () => blue.last() && blue.last().image);
mock.pageUpdate({
type: 'update',
updatedOrder: null,
added: [],
changes: [{ id: 'p1', name: null, controls: [{ row: 0, column: 2, controlId: 'bank:blue-new' }] }],
});
await until('re-imported button found by place', () => blue.last().controlId === 'bank:blue-new' && blue.last().image);
blue.close();
// a page inserted in front: the tile follows its page, now page 3
mock.pageUpdate({ type: 'update', updatedOrder: ['p0', 'p1', 'p2', 'p3'], added: [{ id: 'p0', name: 'New', controls: {} }], changes: [] });
await until('renumbered', () => some.page().number === 3 && some.page().name === '3 Cameras Renamed');
some.close();
// a button added to a whole-page tile appears in it
mock.looks['bank:new'] = mock.looks['bank:blue'];
mock.configs['bank:new'] = mock.configs['bank:blue'];
mock.pageUpdate({ type: 'update', updatedOrder: null, added: [], changes: [{ id: 'p1', name: null, controls: [{ row: 2, column: 2, controlId: 'bank:new' }] }] });
await until('new button shown', () => whole.page().spots.some((s) => s.key === '2.2') && whole.pic('2.2') && whole.pic('2.2').image);
const flip = { last: () => ({ status: whole.page().status, image: whole.pic('0.0') && whole.pic('0.0').image }) };
// Companion drops: streams say so, then recover by themselves
mock.dropAll();
@@ -254,9 +266,7 @@ async function testLive() {
await until('stream live after restart', () => flip.last().status === 'ok' && flip.last().image, 4000);
// closing a viewer keeps the subscription a little while (remounts are cheap), stop() ends all
steady.close();
flip.close();
gone.close();
whole.close();
await sleep(100);
assert.ok(mock.clients.size === 1, 'one connection to Companion, however many viewers');
} finally {
@@ -275,14 +285,12 @@ async function testUnconfigured() {
try {
assert.strictEqual(handle.health().status, 'error');
assert.match(handle.health().message, /admin/);
const pages = JSON.parse((await get(at, '/pages')).body);
assert.strictEqual(pages.status, 'error');
assert.deepStrictEqual(pages.pages, []);
assert.strictEqual((await get(at, '/image/x')).status, 503);
const s = listen(at, '/stream/1.0.0.x');
assert.deepStrictEqual(JSON.parse((await get(at, '/page-options')).body).options, []);
assert.deepStrictEqual(serverEntry.tiles(), []);
const s = listen(at, '/stream/p1');
await s.ready;
await until('stream answers', () => s.last());
assert.strictEqual(s.last().status, 'error');
await until('stream answers', () => s.page());
assert.strictEqual(s.page().status, 'error');
s.close();
} finally {
handle.stop();