Function paint

app/rcc/scripts/painter/segment_display.js:42–123

(ctx, w, h)

}

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

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

  // Header.
  ctx.fillStyle = theme.widget_text;
  ctx.font = "bold 11px sans-serif";
  ctx.textAlign = "start";
  ctx.fillText("7-SEGMENT  READOUT", 14, 18);
  ctx.fillStyle = theme.placeholder_text;
  ctx.font = "10px sans-serif";
  ctx.textAlign = "end";
  ctx.fillText(datasets.length + (datasets.length === 1 ? " channel" : " channels"),
               w - 14, 18);
  ctx.fillStyle = theme.widget_border;
  ctx.fillRect(14, 22, w - 28, 1);

  // Per-row stacked layout.
  const padX = 14;
  const padTop = 32;
  const padBot = 14;
  const gap  = 8;
  const rowH = (h - padTop - padBot - gap * (datasets.length - 1)) / datasets.length;

  for (let i = 0; i < datasets.length; ++i) {
    const ds  = datasets[i];
    const y0  = padTop + i * (rowH + gap);
    const v   = Number.isFinite(ds.value) ? ds.value : 0;
    const txt = v.toFixed(1).padStart(6, " ");

    // "Screen" panel (mint background simulating a backlit LCD).
    ctx.fillStyle = theme.widget_border;
    ctx.fillRect(padX + 1, y0 + 2, w - padX * 2, rowH);
    ctx.fillStyle = theme.alternate_base;
    ctx.fillRect(padX, y0, w - padX * 2, rowH);
    ctx.strokeStyle = theme.widget_border;
    ctx.lineWidth = 1;
    ctx.strokeRect(padX + 0.5, y0 + 0.5, w - padX * 2 - 1, rowH - 1);

    // Title strip.
    ctx.fillStyle = theme.widget_text;
    ctx.font = "bold 9px sans-serif";
    ctx.textAlign = "start";
    ctx.textBaseline = "alphabetic";
    ctx.fillText((ds.title || ("CH " + (i + 1))).toUpperCase(),
                 padX + 8, y0 + 12);
    if (ds.units) {
      ctx.fillStyle = theme.placeholder_text;
      ctx.font = "9px sans-serif";
      ctx.textAlign = "end";
      ctx.fillText(ds.units, w - padX - 8, y0 + 12);
    }

    // Digits.
    const dh = Math.max(12, rowH - 22);