Function paint

app/rcc/scripts/painter/audio_meter.js:91–162

(ctx, w, h)

}

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

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

  // Card background.
  const pad = 14;
  ctx.fillStyle = theme.alternate_base;
  ctx.fillRect(pad, pad, w - pad * 2, h - pad * 2);
  ctx.strokeStyle = theme.widget_border;
  ctx.lineWidth = 1;
  ctx.strokeRect(pad + 0.5, pad + 0.5, w - pad * 2 - 1, h - pad * 2 - 1);

  // Header strip.
  const headerY = pad + 10;
  ctx.fillStyle = theme.widget_text;
  ctx.font = "bold 11px sans-serif";
  ctx.textAlign = "start";
  ctx.fillText("LEVEL  METER", pad + 16, headerY + 4);
  ctx.fillStyle = theme.placeholder_text;
  ctx.font = "9px sans-serif";
  ctx.textAlign = "end";
  ctx.fillText(datasets.length === 1 ? datasets[0].title : "MULTI",
               w - pad - 16, headerY + 4);
  ctx.fillStyle = theme.widget_border;
  ctx.fillRect(pad + 12, headerY + 12, w - (pad + 12) * 2, 1);

  // Bars geometry.
  const labelW = 28;
  const valueW = 64;
  const barX   = pad + 12 + labelW;
  const barW   = w - pad * 2 - 24 - labelW - valueW;
  const barH   = 16;

  // Vertically distribute bars.
  const top    = headerY + 24;
  const bot    = h - pad - 16;
  const gap    = 6;
  const total  = datasets.length * barH + (datasets.length - 1) * gap;
  let          y = top + Math.max(0, ((bot - top) - total) * 0.5);

  for (let i = 0; i < datasets.length; ++i) {
    const ds   = datasets[i];
    const span = (ds.max - ds.min) || 1;
    const norm = Number.isFinite(ds.value)
      ? clamp01((ds.value - ds.min) / span)
      : 0;

    // Channel label on the left.
    ctx.fillStyle = theme.widget_text;
    ctx.font = "bold 12px sans-serif";
    ctx.textAlign = "center";
    const tag = ds.title ? ds.title.substring(0, 2).toUpperCase() : "" + (i + 1);
    ctx.fillText(tag, pad + 12 + labelW * 0.5, y + barH * 0.5 + 4);

    draw_bar(ctx, barX, y, barW, barH, norm, peaks[i] || 0);