Committed and Pushed by ButtonClick

public/app.js

@@ -0,0 +1,72 @@
+// /public/app.js
+// Small bootstrap moved out of index.html to satisfy CSP (`script-src 'self'`).
+(function () {
+  const isSecure = location.protocol === 'https:';
+  const wsProto = isSecure ? 'wss' : 'ws';
+  const base = `${wsProto}://${location.host}`;
+
+  // Camera 0 with control channel
+  window.VideoService.attachStream({
+    url: `${base}/ws/video0`,
+    canvas: document.getElementById('canvas0'),
+    statusEl: document.getElementById('status0'),
+    control: {
+      resSelect: document.getElementById('res0'),
+      fpsSelect: document.getElementById('fps0'),
+      qSelect: document.getElementById('q0'),
+      applyBtn: document.getElementById('apply0'),
+      snapshotBtn: document.getElementById('snap0'),
+      startBtn: document.getElementById('start0'),
+      stopBtn: document.getElementById('stop0'),
+      snapshotOutEl: document.getElementById('snapshotLink'),
+    }
+  });
+
+  // Camera 1 (no control)
+  window.VideoService.attachStream({
+    url: `${base}/ws/video1`,
+    canvas: document.getElementById('canvas1'),
+    statusEl: document.getElementById('status1'),
+  });
+
+  // Run an automatic snapshot shortly after the page loads so the client
+  // receives the freshest annotated image/CSV on startup. This uses a
+  // synthetic click on the snapshot button; the handler will no-op if the
+  // WebSocket isn't open yet.
+  setTimeout(() => {
+    const snapBtn = document.getElementById('snap0');
+    if (snapBtn) snapBtn.click();
+  }, 200);
+
+  // Attach handlers for the Point/Up/Down buttons (no inline JS, CSP-safe)
+  const btnPoint = document.getElementById('btnPoint');
+  const btnDown = document.getElementById('btnDown');
+  const btnUp = document.getElementById('btnUp');
+  if (btnPoint) btnPoint.addEventListener('click', () => {
+    console.log('FPoint!');
+    try { socketDriver.send('FPoint'); socketDriver.send('FShow'); } catch (e) { console.error(e); }
+  });
+  if (btnDown) btnDown.addEventListener('click', () => {
+    console.log('FPlus');
+    try { socketDriver.send('FPlus'); socketDriver.send('FShow'); } catch (e) { console.error(e); }
+  });
+  if (btnUp) btnUp.addEventListener('click', () => {
+    console.log('FMinus');
+    try { socketDriver.send('FMinus'); socketDriver.send('FShow'); } catch (e) { console.error(e); }
+  });
+
+  // Other buttons that were previously using inline onclicks.
+  const btnInfo = document.getElementById('b_M114');
+  const btnNull = document.getElementById('b_G28');
+  const btnListFile = document.getElementById('btnListFile');
+  const btnSendGCode = document.getElementById('btnSendGCode');
+  if (btnInfo) btnInfo.addEventListener('click', () => { try { socketDriver.send('M114'); } catch (e) { console.error(e); } });
+  if (btnNull) btnNull.addEventListener('click', () => { try { socketDriver.send('G28'); } catch (e) { console.error(e); } });
+  if (btnListFile) btnListFile.addEventListener('click', () => { try { socketDriver.send('FShow'); } catch (e) { console.error(e); } });
+  if (btnSendGCode) btnSendGCode.addEventListener('click', () => {
+    try {
+      const input = document.getElementById('GKarth');
+      if (input && input.value) socketDriver.send(input.value);
+    } catch (e) { console.error(e); }
+  });
+})();