Function paint

app/rcc/scripts/painter/status_grid.js:22–110

(ctx, w, h)

}

function paint(ctx, w, h) {
  // Cream paper background.
  ctx.fillStyle = theme.widget_base;
  ctx.fillRect(0, 0, w, h);

  const n = datasets.length;
  if (n === 0) return;

  // Header.
  const headerH = 22;
  ctx.fillStyle = theme.widget_text;
  ctx.font = "bold 11px sans-serif";
  ctx.textAlign = "start";
  ctx.fillText("STATUS  GRID", 14, 16);
  ctx.fillStyle = theme.placeholder_text;
  ctx.font = "10px sans-serif";
  ctx.textAlign = "end";
  ctx.fillText(n + " channels", w - 14, 16);
  ctx.fillStyle = theme.widget_border;
  ctx.fillRect(14, 20, w - 28, 1);

  const cols = Math.max(1, group.columns || Math.min(n, Math.max(1, Math.round(Math.sqrt(n * w / (h - headerH))))));
  const rows = Math.ceil(n / cols);
  const padX = 14;
  const padY = headerH + 6;
  const gap  = 8;
  const cellW = (w - padX * 2 - gap * (cols - 1)) / cols;
  const cellH = (h - padY - padX - gap * (rows - 1)) / rows;

  for (let i = 0; i < n; ++i) {
    const r = Math.floor(i / cols);
    const c = i % cols;
    const x = padX + c * (cellW + gap);
    const y = padY + r * (cellH + gap);
    const ds = datasets[i];
    const status = status_color(ds);

    // Card with shadow.
    ctx.fillStyle = theme.widget_border;
    ctx.fillRect(x + 1, y + 2, cellW, cellH);
    ctx.fillStyle = theme.alternate_base;
    ctx.fillRect(x, y, cellW, cellH);
    ctx.strokeStyle = theme.widget_border;
    ctx.lineWidth = 1;
    ctx.strokeRect(x + 0.5, y + 0.5, cellW - 1, cellH - 1);

    // Coloured accent strip on the left edge.
    ctx.fillStyle = status.color;
    ctx.fillRect(x, y, 4, cellH);

    // Status pill in the top-right corner.
    const pillW = 38;
    const pillH = 14;
    ctx.fillStyle = status.color;
    ctx.fillRect(x + cellW - pillW - 6, y + 6, pillW, pillH);
    ctx.fillStyle = theme.highlighted_text;
    ctx.font = "bold 9px sans-serif";
    ctx.textAlign = "center";