Function preloadAllTabs

web/scripts/ragnar_modern.js:2497–2566

()

        });
        // 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));
        if (o.big) {
            ctx.fillStyle = '#475569'; ctx.font = '10px sans-serif';
            ctx.fillText('channel', (r.x0 + r.x1) / 2, H - padB + 28);
        }
        if (bands.length > 1) { ctx.strokeStyle = '#334155'; ctx.beginPath(); ctx.moveTo(r.x1 + gap / 2, padT); ctx.lineTo(r.x1 + gap / 2, H - padB); ctx.stroke(); }
    });
    // Baseline
    ctx.strokeStyle = '#334155'; ctx.beginPath(); ctx.moveTo(padL, H - padB); ctx.lineTo(W - padR, H - padB); ctx.stroke();
    // Sort so weaker drawn first (stronger on top)
    const aps = [...d.aps].filter(a => bands.includes(a.band)).sort((a, b) => (a.signal || -999) - (b.signal || -999));
    aps.forEach(a => {
        const centerCh = a.center_freq ? _wifiFreqToChannel(a.center_freq) : a.channel;
        const half = a.width / 10;               // channel-number half-width
        const seg = ranges[a.band];
        const clamp = (x) => Math.max(seg.x0, Math.min(seg.x1, x));
        const xC = clamp(xFor(a.band, centerCh));
        const xL = clamp(xFor(a.band, centerCh - half)), xR = clamp(xFor(a.band, centerCh + half));
        const y = yFor(a.signal); const col = _wifiSignalColor(a.signal);
        const sel = _wifiState.selected === a.bssid;
        const hov = _wifiState.hoverBssid === a.bssid;
        // Pixel box → BSSID, for hover/click. Recorded in draw order, so a
        // reverse scan finds whatever is visually on top.
        canvas._wifiHits.push({ bssid: a.bssid, x0: Math.min(xL, xC - 2), x1: Math.max(xR, xC + 2), y0: y - 12, y1: H - padB });
        if (_wifiState.view === 'bar') {
            ctx.fillStyle = col + (sel ? 'ff' : hov ? 'ee' : 'cc');
            ctx.fillRect(xL, y, Math.max(3, xR - xL), (H - padB) - y);
            ctx.strokeStyle = sel || hov ? '#fff' : col; ctx.lineWidth = sel ? 2 : hov ? 1.5 : 1;
            ctx.strokeRect(xL, y, Math.max(3, xR - xL), (H - padB) - y);
        } else {
            // Dome: bell curve centred on channel, spanning its width
            ctx.beginPath(); ctx.moveTo(xL, H - padB);
            const steps = 28;
            for (let s = 0; s <= steps; s++) {
                const t = s / steps; const x = xL + (xR - xL) * t;
                const bell = Math.cos((t - 0.5) * Math.PI);   // 0..1..0
                const yy = (H - padB) - bell * ((H - padB) - y);
                ctx.lineTo(x, yy);
            }
            ctx.lineTo(xR, H - padB); ctx.closePath();
            const grad = ctx.createLinearGradient(0, y, 0, H - padB);
            grad.addColorStop(0, col + (sel ? 'cc' : hov ? '99' : '66')); grad.addColorStop(1, col + '08');
            ctx.fillStyle = grad; ctx.fill();
            ctx.strokeStyle = sel || hov ? '#fff' : col; ctx.lineWidth = sel ? 2.5 : hov ? 2 : 1.5; ctx.stroke();
        }
        // WIDS-flagged AP: red dashed locator line + outline so it stands out
        // even in a crowded band (highlight persists until dismissed).
        if (_wifiState.flagged && _wifiState.flagged.bssid === a.bssid) {
            ctx.save();
            ctx.strokeStyle = '#ef4444'; ctx.lineWidth = 1; ctx.setLineDash([5, 4]);
            ctx.beginPath(); ctx.moveTo(xC, padT); ctx.lineTo(xC, H - padB); ctx.stroke();
            ctx.lineWidth = 2; ctx.setLineDash([4, 3]);
            ctx.strokeRect(xL - 2, y - 2, Math.max(3, xR - xL) + 4, (H - padB) - y + 2);
            ctx.restore();
            ctx.fillStyle = '#f87171'; ctx.font = `bold ${10 * K}px sans-serif`; ctx.textAlign = 'center';
            ctx.fillText('⚠ WIDS', xC, y - 16 * K);