Function buildLastSyncDisplay

web/scripts/ragnar_modern.js:2762–2801

(stats)

        ctx.fillStyle = '#64748b'; ctx.textAlign = 'center'; ctx.font = `${11 * K}px sans-serif`;
        ctx.fillText('No APs on selected band', W / 2, H / 2);
        canvas._wifiGeom = null;
        return;
    }
    // Per-band channel range + x segment
    const gap = Math.round(14 * K), segW = (plotW - gap * (bands.length - 1)) / bands.length;
    const ranges = {};
    bands.forEach((b, i) => {
        // The range has to cover the channels an AP actually *occupies*, not
        // just its centre — otherwise a 160 MHz BSS draws off the end of its
        // band segment and over the neighbouring one.
        const list = d.aps.filter(a => a.band === b);
        const edges = [];
        list.forEach(a => {
            const c = a.center_freq ? _wifiFreqToChannel(a.center_freq) : a.channel;
            const half = (a.width || 20) / 10;
            edges.push(a.channel, c - half, c + half);
        });
        let lo = Math.min(...edges), hi = Math.max(...edges);
        if (b === '2.4') { lo = Math.min(lo, 1); hi = Math.max(hi, 13); }
        const padCh = b === '2.4' ? 0.5 : 2;
        lo -= padCh; hi += padCh; if (hi - lo < 4) { hi += 2; lo -= 2; }
        const x0 = padL + i * (segW + gap);
        ranges[b] = { lo, hi, x0, x1: x0 + segW };
    });
    const xFor = (band, ch) => { const r = ranges[band]; return r.x0 + (ch - r.lo) / (r.hi - r.lo) * (r.x1 - r.x0); };
    const chFor = (band, x) => { const r = ranges[band]; return r.lo + (x - r.x0) / (r.x1 - r.x0) * (r.hi - r.lo); };
    // Band labels + channel ticks + DFS shading
    ctx.textAlign = 'center';
    bands.forEach(b => {
        const r = ranges[b];
        ctx.fillStyle = _WIFI_BAND_COLOR[b]; ctx.font = `bold ${11 * K}px sans-serif`;
        ctx.fillText(b + ' GHz', (r.x0 + r.x1) / 2, padT - 4);
        // DFS channel shading
        (d.radar_channels[b] || []).forEach(ch => {
            if (ch < r.lo || ch > r.hi) return;
            const cx = xFor(b, ch);
            ctx.fillStyle = 'rgba(167,139,250,0.08)';
            ctx.fillRect(cx - 3 * K, padT, 6 * K, plotH);
        });
        // Channel ticks (channels present)
        ctx.fillStyle = '#64748b'; ctx.font = `${9 * K}px sans-serif`;
        const present = [...new Set(d.aps.filter(a => a.band === b).map(a => a.channel))].sort((x, y) => x - y);
        present.forEach(ch => ctx.fillText(ch + '', xFor(b, ch), H - padB + 12 * K));