Add portal web simulator, SPI bridges, and Pico firmware updates.

Bring the five-panel hex portal online with a browser 3D/schematic preview, Pi SPI backends, and renamed multi-panel Pico UDP firmware.

Co-authored-by: Cursor <cursoragent@cursor.com>

web/js/panel-paint.js

@@ -0,0 +1,51 @@
+export const PANEL_COLORS = [
+  0xff5050, 0x50ff50, 0x50a0ff, 0xffc850, 0xc850ff,
+];
+
+/**
+ * Paint a panel frame. `rgb` is logical [R,G,B,R,G,B,…] from the Python simulator
+ * (same byte order as UDP panel frames). Canvas ImageData uses RGBA.
+ *
+ * @param {CanvasRenderingContext2D} ctx
+ * @param {HTMLCanvasElement} canvas
+ * @param {number[] | Uint8Array} rgb
+ * @param {number} width
+ * @param {number} height
+ */
+export function paintRgb(ctx, canvas, rgb, width, height) {
+  if (canvas.width !== width || canvas.height !== height) {
+    canvas.width = width;
+    canvas.height = height;
+  }
+  const image = ctx.createImageData(width, height);
+  const data = image.data;
+  for (let i = 0, p = 0; i < rgb.length; i += 3, p += 4) {
+    data[p] = rgb[i];
+    data[p + 1] = rgb[i + 1];
+    data[p + 2] = rgb[i + 2];
+    data[p + 3] = 255;
+  }
+  ctx.putImageData(image, 0, 0);
+}
+
+/**
+ * @param {CanvasRenderingContext2D} ctx
+ * @param {HTMLCanvasElement} canvas
+ * @param {number} panelIndex
+ * @param {number} width
+ * @param {number} height
+ */
+export function paintIdentify(ctx, canvas, panelIndex, width, height) {
+  if (canvas.width !== width || canvas.height !== height) {
+    canvas.width = width;
+    canvas.height = height;
+  }
+  ctx.fillStyle = "#000";
+  ctx.fillRect(0, 0, width, height);
+  const hex = PANEL_COLORS[panelIndex % PANEL_COLORS.length].toString(16).padStart(6, "0");
+  ctx.fillStyle = `#${hex}`;
+  ctx.font = `bold ${Math.floor(height * 0.75)}px monospace`;
+  ctx.textAlign = "center";
+  ctx.textBaseline = "middle";
+  ctx.fillText(String(panelIndex), width / 2, height / 2);
+}