Jimmy
5094c7bcee
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>
52 lines
1.6 KiB
JavaScript
52 lines
1.6 KiB
JavaScript
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);
|
|
}
|