Bump Frame Control to 0.4.24

Co-authored-by: SAPHID <saphid@users.noreply.github.com>

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+- Add an explicit host window-switch button to whole-display panels: Alt-Tab
+  on Windows and Command-Tab on macOS. Single-window panels keep their own
+  source, so the button is hidden there.
+
 - Enable the in-app OBS source Start/Stop control on Windows. A control pipe
   lets the Python relay close its SSH child on Stop, app quit or parent exit;
   add a short [Discord guide](docs/streaming-to-discord.md).

app/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "frame-control",
-  "version": "0.4.23",
+  "version": "0.4.24",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "frame-control",
-      "version": "0.4.23",
+      "version": "0.4.24",
       "license": "MIT",
       "devDependencies": {
         "electron": "^44.4.5",

app/package.json

@@ -1,7 +1,7 @@
 {
   "name": "frame-control",
   "productName": "Frame Control",
-  "version": "0.4.23",
+  "version": "0.4.24",
   "description": "Desktop app for managing a Valve Steam Frame over SSH",
   "private": true,
   "main": "main.js",

docs/mac-in-headset.md

@@ -7,6 +7,12 @@ the Mac's own keyboard. Find it under **Tools → Mac in the headset** (macOS
 only). On Windows there's an experimental port,
 [PC in the headset](pc-in-headset.md).
 
+On a **whole Mac display** panel, click **Switch Mac app (⌘Tab)** to send one
+Command-Tab chord to the Mac. The button is absent from single-window panels;
+those already keep their own source. It requires the same Mac Accessibility
+permission as other viewer keyboard input. The chord and button have automated
+checks, but a worn-headset click has not been verified.
+
 The confidence labels are the same as in [ssh.md](ssh.md).
 
 ## Why this design

docs/pc-in-headset.md

@@ -13,6 +13,12 @@ whole screens. Place the panel with the dashboard's Float
 in World, Move and Size, point and click with the laser, scroll with the
 thumbstick, and type on the PC's keyboard.
 
+On a whole-screen panel, click **Switch PC window (Alt+Tab)** to switch the
+foreground Windows window. It sends one explicit Alt-Tab chord through the
+viewer's existing input channel. The button is absent from single-window panels
+when a WGC-enabled build supports them. A real Windows/Frame button click has
+not been verified; use the PC keyboard if focus does not move as expected.
+
 **It's experimental.** A Windows 11 VM has captured its real desktop with
 Desktop Duplication and encoded it with Media Foundation and JPEG. Physical PCs,
 hardware encoding and physical laser input remain unverified. See

tests/page/window_switch.mjs

@@ -0,0 +1,23 @@
+import assert from 'node:assert/strict';
+import { readFileSync } from 'node:fs';
+import { fileURLToPath } from 'node:url';
+import { dirname, join } from 'node:path';
+import vm from 'node:vm';
+
+const root = join(dirname(fileURLToPath(import.meta.url)), '..', '..');
+const page = readFileSync(join(root, 'ui', 'mac-view.html'), 'utf8');
+const match = page.match(/function windowSwitchEvents\(hostName\) \{[\s\S]*?\n\}/);
+assert.ok(match, 'viewer exposes a bounded host-specific switch sequence');
+const events = vm.runInNewContext(`(${match[0]})`);
+for (const [host, modifier, mod] of [
+  ['mac', 'MetaLeft', 'meta'], ['windows', 'AltLeft', 'alt'],
+]) {
+  const sequence = JSON.parse(JSON.stringify(events(host)));
+  assert.deepEqual(sequence.map(x => [x.e, x.code]),
+    [['down', modifier], ['down', 'Tab'], ['up', 'Tab'], ['up', modifier]]);
+  assert.deepEqual(sequence[1].mods, [mod]);
+  assert.deepEqual(sequence[2].mods, [mod]);
+}
+assert.deepEqual(JSON.parse(JSON.stringify(events('linux'))), []);
+assert.match(page, /switchButton\.hidden = !src\.startsWith\("display:"\)/);
+console.log('window switch sequences passed');

tests/test_window_switch.py

@@ -0,0 +1,17 @@
+"""The viewer sends one explicit native window-switch chord per click."""
+from pathlib import Path
+import shutil
+import subprocess
+import unittest
+
+
+class WindowSwitch(unittest.TestCase):
+    @unittest.skipUnless(shutil.which('node'), 'Node is required for the viewer script check')
+    def test_host_chords_and_display_only_guard(self):
+        script = Path(__file__).parent / 'page' / 'window_switch.mjs'
+        result = subprocess.run(['node', str(script)], capture_output=True, text=True, timeout=15)
+        self.assertEqual(result.returncode, 0, result.stdout + result.stderr)
+
+
+if __name__ == '__main__':
+    unittest.main()

ui/frame_macview.py

@@ -411,7 +411,8 @@ class MacView:
         # A single-use ticket for this source, not Frame Control's key: the URL
         # is visible in the Frame's process list.
         ticket = self.call("/ticket", method="POST", src=src)["ticket"]
-        params = {"src": src, "t": ticket, "tag": tag, "codec": q["codec"], "max": q["max"], "fps": q["fps"],
+        params = {"src": src, "t": ticket, "tag": tag, "host": self.host,
+                  "codec": q["codec"], "max": q["max"], "fps": q["fps"],
                   "bpp": q["bpp"]}
         url = f"http://127.0.0.1:{self.remote_port}/view?{urlencode(params)}"
         w, h = fit(width or 1280, height or 720)

ui/mac-view.html

@@ -18,10 +18,16 @@
   #note[hidden] { display: block; opacity: 0; }
   #hud { position: fixed; left: 8px; top: 8px; font: 12px/1.35 ui-monospace, monospace; color: #dfe;
          background: rgba(0,0,0,.72); padding: 6px 9px; border-radius: 6px; pointer-events: none; white-space: pre; }
+  #switchWindow { position: fixed; right: 12px; bottom: 12px; z-index: 2; min-height: 44px;
+          padding: 8px 14px; border: 1px solid #a8c8d9; border-radius: 7px;
+          background: rgba(19,35,48,.9); color: #fff; font: 15px system-ui, sans-serif; cursor: pointer; }
+  #switchWindow:focus-visible { outline: 3px solid #66c0f4; outline-offset: 3px; }
+  #switchWindow:disabled { opacity: .5; cursor: default; }
 </style>
 </head>
 <body>
 <canvas id="c" width="16" height="9"></canvas>
+<button id="switchWindow" type="button" hidden>Switch window</button>
 <div id="note">Connecting to your computer…</div>
 <div id="hud" hidden></div>
 <script>
@@ -29,10 +35,14 @@
 const q = new URLSearchParams(location.search);
 // t: a single-use ticket from Frame Control. After the first connection the
 // Mac sends a reconnect key, kept only in memory.
-const src = q.get("src") || "test", ticket = q.get("t") || "", tag = q.get("tag") || "";
+const src = q.get("src") || "test", ticket = q.get("t") || "", tag = q.get("tag") || "", host = q.get("host") || "";
+document.title = host === "windows" ? "PC" : "Mac";
 let reconnectKey = "";
 const c = document.getElementById("c"), ctx = c.getContext("2d", { alpha: false, desynchronized: true });
 const note = document.getElementById("note");
+const switchButton = document.getElementById("switchWindow");
+switchButton.hidden = !src.startsWith("display:") || !["mac", "windows"].includes(host);
+if (!switchButton.hidden) switchButton.textContent = host === "mac" ? "Switch Mac app (⌘Tab)" : "Switch PC window (Alt+Tab)";
 // Counters for Frame Control's tests (read over DevTools).
 const stats = window.stats = { frames: 0, keyFrames: 0, bytes: 0, dropped: 0, codec: "", errors: [], info: null };
 
@@ -127,6 +137,29 @@ function show(text, ms) {
 }
 
 function send(obj) { if (ws && ws.readyState === 1) ws.send(JSON.stringify(obj)); }
+function windowSwitchEvents(hostName) {
+  const code = hostName === "mac" ? "MetaLeft" : hostName === "windows" ? "AltLeft" : "";
+  if (!code) return [];
+  const key = hostName === "mac" ? "Meta" : "Alt", mod = hostName === "mac" ? "meta" : "alt";
+  return [
+    { t: "k", e: "down", code, key, mods: [] },
+    { t: "k", e: "down", code: "Tab", key: "Tab", mods: [mod] },
+    { t: "k", e: "up", code: "Tab", key: "Tab", mods: [mod] },
+    { t: "k", e: "up", code, key, mods: [] },
+  ];
+}
+switchButton.addEventListener("click", () => {
+  if (!ws || ws.readyState !== 1) return show("Connect to your computer before switching windows.", 4000);
+  const events = windowSwitchEvents(host);
+  if (!events.length) return;
+  switchButton.disabled = true;
+  send(stamp(events[0]));
+  setTimeout(() => {
+    send(stamp(events[1]));
+    send(events[2]);
+    setTimeout(() => { send(events[3]); switchButton.disabled = false; }, 60);
+  }, 40);
+});
 let lastKeyAsk = 0;
 function askKeyFrame() {
   const now = performance.now();
@@ -321,6 +354,7 @@ function flushMove() {
   pendingMove = null;
 }
 addEventListener("pointermove", e => {
+  if (e.target === switchButton) return;
   const p = toPicture(e);
   if (!p.inside && !e.buttons) return;
   pendingMove = { t: "m", e: "move", x: p.x, y: p.y };
@@ -331,6 +365,7 @@ addEventListener("pointermove", e => {
   setTimeout(flushMove, wait);
 });
 addEventListener("pointerdown", e => {
+  if (e.target === switchButton) return;
   const p = toPicture(e);
   if (!p.inside) return;
   if (e.pointerId !== undefined) try { c.setPointerCapture(e.pointerId); } catch (err) {}
@@ -339,6 +374,7 @@ addEventListener("pointerdown", e => {
   e.preventDefault();
 });
 addEventListener("pointerup", e => {
+  if (e.target === switchButton) return;
   const p = toPicture(e);
   send({ t: "m", e: "up", b: e.button < 0 ? 0 : e.button, x: p.x, y: p.y });
 });
@@ -346,6 +382,7 @@ addEventListener("pointerup", e => {
 addEventListener("pointercancel", () => send({ t: "release" }));
 addEventListener("contextmenu", e => e.preventDefault());
 addEventListener("wheel", e => {
+  if (e.target === switchButton) return;
   const p = toPicture(e), unit = e.deltaMode === 1 ? 16 : e.deltaMode === 2 ? innerHeight : 1;
   send(stamp({ t: "wheel", dx: e.deltaX * unit, dy: e.deltaY * unit, x: p.x, y: p.y }, e));
   e.preventDefault();
@@ -354,6 +391,7 @@ function mods(e) {
   return ["shift", "ctrl", "alt", "meta"].filter(m => e[m + "Key"]);
 }
 function onKey(e, down) {
+  if (e.target === switchButton) return;  // let Enter/Space activate the button
   // Ctrl+Alt+Shift+S shows the numbers; it isn't sent to the Mac.
   if (e.code === "KeyS" && e.ctrlKey && e.altKey && e.shiftKey) {
     if (down) showHud(hud.hidden);