mirror of
https://github.com/myronblair/jarvis
synced 2026-06-30 17:50:23 -05:00
Network map: orbital ring layout, smaller overlay, everything visible and contained
- Overlay shrunk to min(860px, 86vw) x min(570px, 76vh) — fits any screen - Solar system layout: JARVIS hub at center, 4 concentric orbital rings - Ring 1 (green, innermost): Proxmox nodes, rotates clockwise - Ring 2 (gold): Services (HA, AI, PBX, Homebridge), counter-clockwise - Ring 3 (cyan): Linux/Windows agents, slow clockwise - Ring 4 (dim blue, outermost): Network scan devices, slow counter-clockwise - Rings rotate at different speeds/directions (persistent offsets across frames) - Each ring draws dashed track + tick marks every 30 deg + label + online/total count - Nodes evenly spaced on their ring, rotate with it - Spoke lines from each node to hub (straight, low opacity) - Particle flow on spokes: cyan in (data), orange out (commands) - Node positions computed per-frame from angle+ring radius+rotation - Overlay canvas sized exactly to container minus header+legend height
This commit is contained in:
+172
-253
@@ -757,16 +757,18 @@ body::after{
|
||||
|
||||
/* ── NETWORK MAP OVERLAY ─────────────────────────────────────────────── */
|
||||
#netMapOverlay{
|
||||
position:fixed;top:48px;left:0;
|
||||
width:100vw;height:calc(100vh - 80px);
|
||||
position:fixed;top:52px;left:0;
|
||||
width:min(860px,86vw);
|
||||
height:min(570px,76vh);
|
||||
z-index:200;
|
||||
display:none;flex-direction:column;
|
||||
background:rgba(0,4,16,0.97);
|
||||
border-right:1px solid rgba(0,212,255,0.35);
|
||||
border-bottom:1px solid rgba(0,212,255,0.35);
|
||||
background:rgba(0,4,18,0.96);
|
||||
border:1px solid rgba(0,212,255,0.28);
|
||||
border-top:none;border-left:none;
|
||||
transform-origin:0 0;
|
||||
backdrop-filter:blur(12px);
|
||||
backdrop-filter:blur(14px);
|
||||
overflow:hidden;
|
||||
box-shadow:6px 6px 40px rgba(0,0,0,0.75),0 0 50px rgba(0,212,255,0.05);
|
||||
}
|
||||
#netMapOverlay::after{
|
||||
content:'';position:absolute;inset:0;pointer-events:none;z-index:1;
|
||||
@@ -1770,13 +1772,14 @@ function closeNetMap() {
|
||||
}
|
||||
|
||||
|
||||
// Zone definitions — quadrant positions, labels, colors, max visible nodes
|
||||
const NM_ZONES = {
|
||||
proxmox: { label:'PROXMOX CLUSTER', qx:-1, qy:-1, rgb:'0,255,136', nodeR:14, maxNodes:6 },
|
||||
services: { label:'SERVICES', qx: 1, qy:-1, rgb:'255,215,0', nodeR:13, maxNodes:6 },
|
||||
agents: { label:'AGENTS', qx:-1, qy: 1, rgb:'0,212,255', nodeR:11, maxNodes:8 },
|
||||
devices: { label:'NETWORK DEVICES', qx: 1, qy: 1, rgb:'0,160,200', nodeR: 8, maxNodes:10 },
|
||||
};
|
||||
// Orbital ring definitions — each ring has its own radius ratio, speed, color, node cap
|
||||
const NM_RINGS = [
|
||||
{ name:'hub', label:'', rFrac:0, speed: 0, rgb:'0,212,255', nodeR:20, cap:1 },
|
||||
{ name:'proxmox', label:'PROXMOX', rFrac:0.18, speed: 0.006, rgb:'0,255,136', nodeR:13, cap:4 },
|
||||
{ name:'services', label:'SERVICES', rFrac:0.34, speed:-0.004, rgb:'255,215,0', nodeR:12, cap:5 },
|
||||
{ name:'agents', label:'AGENTS', rFrac:0.52, speed: 0.0025, rgb:'0,190,255', nodeR:10, cap:8 },
|
||||
{ name:'devices', label:'NETWORK', rFrac:0.70, speed:-0.0015, rgb:'0,140,180', nodeR: 7, cap:10 },
|
||||
];
|
||||
|
||||
function _classifyDevice(d) {
|
||||
const h = (d.name||'').toLowerCase();
|
||||
@@ -1788,118 +1791,68 @@ function _classifyDevice(d) {
|
||||
return 'agents';
|
||||
}
|
||||
|
||||
function _nodeTypeFromZone(d, zone) {
|
||||
const h = (d.name||'').toLowerCase();
|
||||
if (zone === 'proxmox') return 'proxmox';
|
||||
if (h.includes('homeassist') || h.includes('_ha')) return 'ha';
|
||||
if (h.includes('ollama') || h.includes('ai')) return 'ai';
|
||||
if (h.includes('fusion') || h.includes('pbx')) return 'pbx';
|
||||
if (zone === 'devices') return 'device';
|
||||
return 'agent';
|
||||
function _nodeRgb(n) {
|
||||
if (n.ring === 'hub') return '0,212,255';
|
||||
if (n.ring === 'proxmox') return '0,255,136';
|
||||
if (n.ring === 'services') return '255,215,0';
|
||||
if (n.ring === 'agents') return '0,190,255';
|
||||
if (!n.online) return '255,50,80';
|
||||
return '0,140,180';
|
||||
}
|
||||
|
||||
// Ring rotation offsets (persist across redraws)
|
||||
const _nmRot = [0, 0, 0, 0, 0];
|
||||
|
||||
function _buildNetGraph(devices) {
|
||||
const canvas = document.getElementById('nmCanvas');
|
||||
const W = canvas?.clientWidth || window.innerWidth;
|
||||
const H = canvas?.clientHeight || (window.innerHeight - 130);
|
||||
const ov = document.getElementById('netMapOverlay');
|
||||
const W = ov ? ov.clientWidth : 860;
|
||||
const H = (ov ? ov.clientHeight : 570) - 70; // minus header+legend
|
||||
const cx = W / 2, cy = H / 2;
|
||||
_nmNodes = []; _nmEdges = []; _nmParticles = [];
|
||||
const cx = W/2, cy = H/2, minDim = Math.min(cx, cy);
|
||||
|
||||
// Hub
|
||||
_nmNodes.push({ id:'jarvis', label:'JARVIS', sub:'165.22.1.228 · DO',
|
||||
type:'hub', online:true, agent:true, x:cx, y:cy, r:22, pulse:0, zone:'hub' });
|
||||
// Hub at center
|
||||
_nmNodes.push({ id:'jarvis', label:'JARVIS', sub:'165.22.1.228',
|
||||
type:'hub', online:true, agent:true, ring:'hub', angle:0, r:20, pulse:0, ringIdx:0 });
|
||||
|
||||
// Bucket devices into zones
|
||||
// Bucket into rings
|
||||
const buckets = { proxmox:[], services:[], agents:[], devices:[] };
|
||||
devices.forEach(d => { const z = _classifyDevice(d); buckets[z].push(d); });
|
||||
|
||||
// Place each zone's nodes in their quadrant
|
||||
Object.entries(NM_ZONES).forEach(([zoneName, zd]) => {
|
||||
const list = buckets[zoneName] || [];
|
||||
const visible = list.slice(0, zd.maxNodes);
|
||||
const overflow = list.length - visible.length;
|
||||
|
||||
// Zone anchor: pull toward quadrant corner, leaving breathing room from edges and center
|
||||
const zAnchorX = cx + zd.qx * cx * 0.58;
|
||||
const zAnchorY = cy + zd.qy * cy * 0.60;
|
||||
|
||||
// Arrange nodes in a tidy grid/arc within the zone
|
||||
const count = visible.length;
|
||||
visible.forEach((d, i) => {
|
||||
let nx, ny;
|
||||
if (count === 1) {
|
||||
nx = zAnchorX; ny = zAnchorY;
|
||||
} else if (count <= 3) {
|
||||
const angle = ((i / count) * Math.PI * 0.7) - Math.PI * 0.35;
|
||||
const sectorAngle = Math.atan2(zd.qy, zd.qx);
|
||||
nx = zAnchorX + Math.cos(sectorAngle + angle) * 65;
|
||||
ny = zAnchorY + Math.sin(sectorAngle + angle) * 65;
|
||||
} else {
|
||||
// Grid layout: cols × rows centered on anchor
|
||||
const cols = Math.ceil(Math.sqrt(count * 1.4));
|
||||
const row = Math.floor(i / cols), col = i % cols;
|
||||
const spacing = Math.min(72, (Math.min(cx, cy) * 0.38) / cols);
|
||||
nx = zAnchorX + (col - (cols - 1) / 2) * spacing;
|
||||
ny = zAnchorY + (row - (Math.ceil(count / cols) - 1) / 2) * spacing;
|
||||
}
|
||||
|
||||
// Keep nodes inside canvas with generous margin
|
||||
nx = Math.max(55, Math.min(W - 55, nx + (Math.random() - 0.5) * 12));
|
||||
ny = Math.max(35, Math.min(H - 35, ny + (Math.random() - 0.5) * 12));
|
||||
devices.forEach(d => buckets[_classifyDevice(d)].push(d));
|
||||
|
||||
['proxmox','services','agents','devices'].forEach((ringName, ri) => {
|
||||
const rd = NM_RINGS[ri + 1];
|
||||
const list = buckets[ringName].slice(0, rd.cap);
|
||||
list.forEach((d, i) => {
|
||||
const baseAngle = (ri % 2 === 0 ? -Math.PI/2 : -Math.PI/3);
|
||||
const angle = baseAngle + (i / Math.max(list.length, 1)) * Math.PI * 2;
|
||||
_nmNodes.push({
|
||||
id: d.agent_id || d.ip || (zoneName + i),
|
||||
label: (d.name || d.ip || '?').replace(/_[a-f0-9]{6,}$/, '').substring(0, 13),
|
||||
sub: d.ip || '',
|
||||
type: _nodeTypeFromZone(d, zoneName),
|
||||
id: d.agent_id || d.ip || (ringName+i),
|
||||
label: (d.name||d.ip||'?').replace(/_[a-f0-9]{6,}$/,'').substring(0,11),
|
||||
sub: d.ip||'', type: ringName,
|
||||
online: !!(d.alive||d.status==='online'),
|
||||
agent: d.source==='agent',
|
||||
x: nx, y: ny, r: zd.nodeR,
|
||||
pulse: Math.random() * Math.PI * 2,
|
||||
zone: zoneName,
|
||||
rgb: zd.rgb,
|
||||
ring: ringName, ringIdx: ri+1,
|
||||
angle, r: rd.nodeR, pulse: Math.random()*Math.PI*2,
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// Overflow indicator node ("+N more")
|
||||
if (overflow > 0) {
|
||||
const zAnchorX2 = cx + zd.qx * cx * 0.68;
|
||||
const zAnchorY2 = cy + zd.qy * cy * 0.73;
|
||||
_nmNodes.push({
|
||||
id: zoneName+'_overflow', label:'+'+overflow+' MORE', sub:'',
|
||||
type:'overflow', online:false, agent:false,
|
||||
x: Math.max(40, Math.min(W-40, zAnchorX2)),
|
||||
y: Math.max(30, Math.min(H-30, zAnchorY2)),
|
||||
r: 9, pulse: 0, zone: zoneName, rgb: zd.rgb,
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Edges: every non-hub node → hub
|
||||
// Edges: each node → hub
|
||||
for (let i = 1; i < _nmNodes.length; i++) {
|
||||
const n = _nmNodes[i];
|
||||
if (n.type === 'overflow') continue;
|
||||
_nmEdges.push({ from:i, to:0, strength: n.agent ? 1 : 0.45, zoneName: n.zone });
|
||||
_nmEdges.push({ from:i, to:0, strength: n.agent ? 0.9 : 0.45 });
|
||||
}
|
||||
// Cross-link within proxmox cluster
|
||||
const pveIdx = _nmNodes.map((n,i)=>({n,i})).filter(({n})=>n.zone==='proxmox'&&n.type!=='overflow');
|
||||
for (let a = 0; a < pveIdx.length; a++)
|
||||
for (let b = a+1; b < pveIdx.length; b++)
|
||||
_nmEdges.push({ from:pveIdx[a].i, to:pveIdx[b].i, strength:0.55, intra:true });
|
||||
// Cross-link within services cluster
|
||||
const svcIdx = _nmNodes.map((n,i)=>({n,i})).filter(({n})=>n.zone==='services'&&n.type!=='overflow');
|
||||
for (let a = 0; a < svcIdx.length; a++)
|
||||
for (let b = a+1; b < svcIdx.length; b++)
|
||||
_nmEdges.push({ from:svcIdx[a].i, to:svcIdx[b].i, strength:0.35, intra:true });
|
||||
|
||||
// Spawn particles for hub edges
|
||||
_nmEdges.filter(e => !e.intra).forEach((e, ei) => {
|
||||
const cnt = e.strength > 0.8 ? 4 : 2;
|
||||
for (let p = 0; p < cnt; p++) {
|
||||
_nmParticles.push({ edge:ei, t:Math.random(), dir:'in', speed:0.0025+Math.random()*0.003, r:2+Math.random()*0.8 });
|
||||
if (e.strength > 0.6 && Math.random() > 0.5)
|
||||
_nmParticles.push({ edge:ei, t:Math.random(), dir:'out', speed:0.0016+Math.random()*0.002, r:1.6+Math.random()*0.7 });
|
||||
}
|
||||
// Particles
|
||||
_nmEdges.forEach((e, ei) => {
|
||||
const n = _nmNodes[e.from];
|
||||
const cnt = n.online ? (n.agent ? 3 : 2) : 0;
|
||||
for (let p = 0; p < cnt; p++)
|
||||
_nmParticles.push({ edge:ei, t:Math.random(), dir:'in',
|
||||
speed:0.002+Math.random()*0.0025, r:1.8+Math.random()*0.9 });
|
||||
if (n.online && n.agent && Math.random()>0.45)
|
||||
_nmParticles.push({ edge:ei, t:Math.random(), dir:'out',
|
||||
speed:0.0013+Math.random()*0.0017, r:1.5+Math.random()*0.7 });
|
||||
});
|
||||
|
||||
// Stats
|
||||
@@ -1911,221 +1864,187 @@ function _buildNetGraph(devices) {
|
||||
if(g('nm-agent-count')) g('nm-agent-count').textContent = agt;
|
||||
}
|
||||
|
||||
// Bezier point — bows OUTWARD from hub center so lines don't bundle in center
|
||||
function _bezierPt(ax, ay, bx, by, t, hx, hy) {
|
||||
const mx = (ax+bx)/2, my = (ay+by)/2;
|
||||
const dx = mx-hx, dy = my-hy;
|
||||
const dist = Math.hypot(dx,dy)||1;
|
||||
const bow = 35 + dist * 0.12; // bow scales with distance from center
|
||||
const cpx = mx + (dx/dist)*bow, cpy = my + (dy/dist)*bow;
|
||||
const iv = 1-t;
|
||||
return { x: iv*iv*ax + 2*iv*t*cpx + t*t*bx, y: iv*iv*ay + 2*iv*t*cpy + t*t*by };
|
||||
}
|
||||
|
||||
function _startNetDraw() {
|
||||
if (_nmRaf) cancelAnimationFrame(_nmRaf);
|
||||
const canvas = document.getElementById('nmCanvas');
|
||||
if (!canvas) return;
|
||||
canvas.width = canvas.clientWidth || window.innerWidth;
|
||||
canvas.height = canvas.clientHeight || (window.innerHeight - 130);
|
||||
const ov = document.getElementById('netMapOverlay');
|
||||
canvas.width = ov ? ov.clientWidth : 860;
|
||||
canvas.height = (ov ? ov.clientHeight : 570) - 72;
|
||||
const W = canvas.width, H = canvas.height;
|
||||
const hub = _nmNodes[0];
|
||||
const hx = hub?.x || W/2, hy = hub?.y || H/2;
|
||||
const cx = W/2, cy = H/2, minDim = Math.min(cx, cy);
|
||||
|
||||
function nodePos(n) {
|
||||
if (n.ring === 'hub') return { x:cx, y:cy };
|
||||
const rd = NM_RINGS[n.ringIdx];
|
||||
const rot = _nmRot[n.ringIdx] || 0;
|
||||
const r = minDim * rd.rFrac;
|
||||
return { x: cx + Math.cos(n.angle+rot)*r, y: cy + Math.sin(n.angle+rot)*r };
|
||||
}
|
||||
|
||||
function draw() {
|
||||
if (!document.getElementById('netMapOverlay')?.classList.contains('nm-open')) return;
|
||||
_nmRaf = requestAnimationFrame(draw);
|
||||
_nmT += 0.016;
|
||||
NM_RINGS.forEach((rd,i) => { _nmRot[i] = (_nmRot[i]||0) + rd.speed; });
|
||||
|
||||
const ctx = canvas.getContext('2d');
|
||||
ctx.clearRect(0, 0, W, H);
|
||||
|
||||
// ── Fine grid ────────────────────────────────────────────────────
|
||||
ctx.strokeStyle = 'rgba(0,180,255,0.035)'; ctx.lineWidth = 0.5;
|
||||
for (let x = 0; x < W; x += 40) { ctx.beginPath(); ctx.moveTo(x,0); ctx.lineTo(x,H); ctx.stroke(); }
|
||||
for (let y = 0; y < H; y += 40) { ctx.beginPath(); ctx.moveTo(0,y); ctx.lineTo(W,y); ctx.stroke(); }
|
||||
// Subtle dot grid
|
||||
ctx.fillStyle = 'rgba(0,180,255,0.055)';
|
||||
for (let x = 26; x < W; x += 40) for (let y = 26; y < H; y += 40) {
|
||||
ctx.beginPath(); ctx.arc(x,y,0.7,0,Math.PI*2); ctx.fill();
|
||||
}
|
||||
|
||||
// ── Zone backgrounds + watermark labels ──────────────────────────
|
||||
Object.entries(NM_ZONES).forEach(([zoneName, zd]) => {
|
||||
// Quadrant fill
|
||||
const qx1 = zd.qx < 0 ? 0 : W/2;
|
||||
const qy1 = zd.qy < 0 ? 0 : H/2;
|
||||
const qW = W/2, qH = H/2;
|
||||
const grad = ctx.createRadialGradient(
|
||||
qx1 + (zd.qx<0?qW:0), qy1 + (zd.qy<0?qH:0), 0,
|
||||
qx1 + qW/2, qy1 + qH/2, Math.max(qW,qH)
|
||||
);
|
||||
grad.addColorStop(0, `rgba(${zd.rgb},0.04)`);
|
||||
grad.addColorStop(1, `rgba(${zd.rgb},0)`);
|
||||
ctx.fillStyle = grad;
|
||||
ctx.fillRect(qx1, qy1, qW, qH);
|
||||
// Orbital ring tracks
|
||||
NM_RINGS.slice(1).forEach((rd, i) => {
|
||||
const ri = i+1, r = minDim * rd.rFrac;
|
||||
const hasOn = _nmNodes.some(n=>n.ringIdx===ri&&n.online);
|
||||
ctx.beginPath(); ctx.arc(cx,cy,r,0,Math.PI*2);
|
||||
ctx.strokeStyle = hasOn ? `rgba(${rd.rgb},0.12)` : 'rgba(60,60,80,0.08)';
|
||||
ctx.lineWidth=0.8; ctx.setLineDash([3,9]); ctx.stroke(); ctx.setLineDash([]);
|
||||
|
||||
// Section divider lines (thin, along the midpoint cross)
|
||||
ctx.strokeStyle = 'rgba(0,180,255,0.07)'; ctx.lineWidth = 1;
|
||||
ctx.setLineDash([4,6]);
|
||||
ctx.beginPath(); ctx.moveTo(W/2, 0); ctx.lineTo(W/2, H); ctx.stroke();
|
||||
ctx.beginPath(); ctx.moveTo(0, H/2); ctx.lineTo(W, H/2); ctx.stroke();
|
||||
ctx.setLineDash([]);
|
||||
// Tick marks every 30°
|
||||
for (let a=0; a<Math.PI*2; a+=Math.PI/6) {
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(cx+Math.cos(a)*(r-3), cy+Math.sin(a)*(r-3));
|
||||
ctx.lineTo(cx+Math.cos(a)*(r+3), cy+Math.sin(a)*(r+3));
|
||||
ctx.strokeStyle=`rgba(${rd.rgb},0.18)`; ctx.lineWidth=0.6; ctx.stroke();
|
||||
}
|
||||
|
||||
// Zone watermark label
|
||||
const lx = qx1 + qW/2, ly = qy1 + (zd.qy < 0 ? 18 : qH - 12);
|
||||
ctx.font = '700 11px Share Tech Mono,monospace';
|
||||
ctx.textAlign = 'center';
|
||||
ctx.fillStyle = `rgba(${zd.rgb},0.18)`;
|
||||
ctx.fillText(zd.label, lx, ly);
|
||||
|
||||
// Online/total count per zone
|
||||
const zNodes = _nmNodes.filter(n=>n.zone===zoneName&&n.type!=='overflow');
|
||||
const zOn = zNodes.filter(n=>n.online).length;
|
||||
ctx.font = '9px Share Tech Mono,monospace';
|
||||
ctx.fillStyle = `rgba(${zd.rgb},0.35)`;
|
||||
ctx.fillText(`${zOn}/${zNodes.length} ONLINE`, lx, ly + 14);
|
||||
// Ring label + count at 3 o'clock
|
||||
const zOn = _nmNodes.filter(n=>n.ringIdx===ri&&n.online).length;
|
||||
const zTot = _nmNodes.filter(n=>n.ringIdx===ri).length;
|
||||
ctx.font='700 8px Share Tech Mono,monospace'; ctx.textAlign='left';
|
||||
ctx.fillStyle=`rgba(${rd.rgb},0.42)`;
|
||||
ctx.fillText(rd.label, cx+r+6, cy+2);
|
||||
if (zTot>0) {
|
||||
ctx.font='6.5px Share Tech Mono,monospace';
|
||||
ctx.fillStyle=`rgba(${rd.rgb},0.28)`;
|
||||
ctx.fillText(`${zOn}/${zTot}`, cx+r+6, cy+11);
|
||||
}
|
||||
ctx.textAlign='left';
|
||||
});
|
||||
|
||||
// ── Edges ────────────────────────────────────────────────────────
|
||||
// Live node positions for this frame
|
||||
const pos = _nmNodes.map(n=>nodePos(n));
|
||||
|
||||
// Spoke lines
|
||||
_nmEdges.forEach(e => {
|
||||
const a = _nmNodes[e.from], b = _nmNodes[e.to];
|
||||
if (!a||!b) return;
|
||||
const alive = a.online && b.online;
|
||||
ctx.beginPath();
|
||||
const steps = 50;
|
||||
for (let i = 0; i <= steps; i++) {
|
||||
const p = e.intra
|
||||
? { x: a.x+(b.x-a.x)*(i/steps), y: a.y+(b.y-a.y)*(i/steps) }
|
||||
: _bezierPt(a.x, a.y, b.x, b.y, i/steps, hx, hy);
|
||||
i===0 ? ctx.moveTo(p.x,p.y) : ctx.lineTo(p.x,p.y);
|
||||
}
|
||||
ctx.strokeStyle = alive
|
||||
? (e.intra ? 'rgba(255,215,0,0.18)' : 'rgba(0,180,220,0.15)')
|
||||
: 'rgba(100,20,40,0.1)';
|
||||
ctx.lineWidth = e.strength * 1.2; ctx.stroke();
|
||||
const pa=pos[e.from], pb=pos[e.to]; if(!pa||!pb) return;
|
||||
const n=_nmNodes[e.from], rgb=_nodeRgb(n);
|
||||
ctx.beginPath(); ctx.moveTo(pa.x,pa.y); ctx.lineTo(pb.x,pb.y);
|
||||
ctx.strokeStyle = n.online ? `rgba(${rgb},0.1)` : 'rgba(80,20,30,0.07)';
|
||||
ctx.lineWidth=e.strength*0.9; ctx.stroke();
|
||||
});
|
||||
|
||||
// ── Particles ────────────────────────────────────────────────────
|
||||
// Particles
|
||||
_nmParticles.forEach(p => {
|
||||
p.t=(p.t+p.speed)%1;
|
||||
const e=_nmEdges[p.edge]; if(!e) return;
|
||||
const a = _nmNodes[e.from], b = _nmNodes[e.to];
|
||||
if (!a?.online||!b?.online) return;
|
||||
const pa=pos[e.from], pb=pos[e.to]; if(!pa||!pb) return;
|
||||
if(!_nmNodes[e.from]?.online) return;
|
||||
const t = p.dir==='in' ? p.t : 1-p.t;
|
||||
const pt = _bezierPt(a.x, a.y, b.x, b.y, t, hx, hy);
|
||||
const fade = Math.min(t*7, (1-t)*7, 1);
|
||||
const bright = 0.55 + Math.sin(_nmT*3+p.t*8)*0.3;
|
||||
ctx.beginPath(); ctx.arc(pt.x, pt.y, p.r, 0, Math.PI*2);
|
||||
const px=pa.x+(pb.x-pa.x)*t, py=pa.y+(pb.y-pa.y)*t;
|
||||
const fade=Math.min(t*8,(1-t)*8,1);
|
||||
ctx.beginPath(); ctx.arc(px,py,p.r,0,Math.PI*2);
|
||||
if(p.dir==='in'){
|
||||
ctx.fillStyle = `rgba(0,212,255,${bright*fade})`;
|
||||
ctx.shadowColor='rgba(0,212,255,0.7)';
|
||||
ctx.fillStyle=`rgba(0,210,255,${(0.6+Math.sin(_nmT*3+p.t*10)*0.3)*fade})`;
|
||||
ctx.shadowColor='rgba(0,200,255,0.7)';
|
||||
} else {
|
||||
ctx.fillStyle = `rgba(255,140,0,${(bright*0.85)*fade})`;
|
||||
ctx.shadowColor='rgba(255,120,0,0.6)';
|
||||
ctx.fillStyle=`rgba(255,130,0,${(0.5+Math.sin(_nmT*4+p.t*8)*0.25)*fade})`;
|
||||
ctx.shadowColor='rgba(255,110,0,0.6)';
|
||||
}
|
||||
ctx.shadowBlur=7; ctx.fill(); ctx.shadowBlur=0;
|
||||
ctx.shadowBlur=6; ctx.fill(); ctx.shadowBlur=0;
|
||||
});
|
||||
|
||||
// ── Nodes ────────────────────────────────────────────────────────
|
||||
// Nodes
|
||||
_nmNodes.forEach((n,ni) => {
|
||||
if (n.type === 'overflow') {
|
||||
// Simple dimmed placeholder
|
||||
ctx.beginPath(); ctx.arc(n.x, n.y, n.r, 0, Math.PI*2);
|
||||
ctx.strokeStyle = `rgba(${n.rgb||'0,180,200'},0.3)`; ctx.lineWidth=1; ctx.stroke();
|
||||
ctx.font='7px Share Tech Mono,monospace'; ctx.textAlign='center';
|
||||
ctx.fillStyle=`rgba(${n.rgb||'0,180,200'},0.5)`;
|
||||
ctx.fillText(n.label, n.x, n.y+3); ctx.textAlign='left';
|
||||
return;
|
||||
}
|
||||
|
||||
const rgb = n.rgb || _nodeRgb(n);
|
||||
const p=pos[ni], rgb=_nodeRgb(n);
|
||||
const pulse=0.5+Math.sin(_nmT*1.5+n.pulse)*0.3;
|
||||
const isHub = n.type==='hub';
|
||||
const isHov = _nmHoverNode===ni;
|
||||
const isHub=n.ring==='hub', isHov=_nmHoverNode===ni;
|
||||
const baseR=n.r+(isHov?5:0);
|
||||
|
||||
// Outer glow
|
||||
if(n.online){
|
||||
const gr = baseR + 12 + Math.sin(_nmT+n.pulse)*3;
|
||||
const g = ctx.createRadialGradient(n.x,n.y,baseR*0.4,n.x,n.y,gr);
|
||||
g.addColorStop(0,`rgba(${rgb},${pulse*0.28})`); g.addColorStop(1,`rgba(${rgb},0)`);
|
||||
ctx.beginPath(); ctx.arc(n.x,n.y,gr,0,Math.PI*2); ctx.fillStyle=g; ctx.fill();
|
||||
const gr=baseR+10+Math.sin(_nmT*1.2+n.pulse)*3;
|
||||
const grd=ctx.createRadialGradient(p.x,p.y,baseR*0.3,p.x,p.y,gr);
|
||||
grd.addColorStop(0,`rgba(${rgb},${pulse*0.22})`); grd.addColorStop(1,`rgba(${rgb},0)`);
|
||||
ctx.beginPath(); ctx.arc(p.x,p.y,gr,0,Math.PI*2); ctx.fillStyle=grd; ctx.fill();
|
||||
}
|
||||
|
||||
// Rotating arc for agents and hub
|
||||
if (n.online && (isHub||n.agent)) {
|
||||
ctx.beginPath();
|
||||
const arcStart = _nmT*(isHub?0.7:0.45);
|
||||
ctx.arc(n.x,n.y,baseR+5,arcStart,arcStart+Math.PI*1.3);
|
||||
ctx.strokeStyle=`rgba(${rgb},${0.28+pulse*0.18})`; ctx.lineWidth=isHub?1.5:1; ctx.stroke();
|
||||
// Rotating arc decoration
|
||||
if(n.online){
|
||||
const arcSpd=isHub?0.6:0.38, arcLen=isHub?Math.PI*1.5:Math.PI*0.85;
|
||||
ctx.beginPath(); ctx.arc(p.x,p.y,baseR+4,_nmT*arcSpd,_nmT*arcSpd+arcLen);
|
||||
ctx.strokeStyle=`rgba(${rgb},${0.2+pulse*0.15})`; ctx.lineWidth=isHub?1.5:0.8; ctx.stroke();
|
||||
if(isHub){
|
||||
ctx.beginPath(); ctx.arc(p.x,p.y,baseR+8,-_nmT*0.35,-_nmT*0.35+Math.PI*1.1);
|
||||
ctx.strokeStyle=`rgba(${rgb},0.12)`; ctx.lineWidth=0.6; ctx.stroke();
|
||||
}
|
||||
}
|
||||
|
||||
// Fill + border
|
||||
const fg = ctx.createRadialGradient(n.x,n.y,0,n.x,n.y,baseR);
|
||||
const fa = n.online ? pulse*0.45 : 0.12;
|
||||
fg.addColorStop(0,`rgba(${rgb},${fa})`); fg.addColorStop(1,`rgba(${rgb},${fa*0.25})`);
|
||||
ctx.beginPath(); ctx.arc(n.x,n.y,baseR,0,Math.PI*2);
|
||||
const fg=ctx.createRadialGradient(p.x,p.y,0,p.x,p.y,baseR);
|
||||
const fa=n.online?pulse*0.4:0.09;
|
||||
fg.addColorStop(0,`rgba(${rgb},${fa})`); fg.addColorStop(1,`rgba(${rgb},${fa*0.2})`);
|
||||
ctx.beginPath(); ctx.arc(p.x,p.y,baseR,0,Math.PI*2);
|
||||
ctx.fillStyle=fg; ctx.fill();
|
||||
ctx.strokeStyle=`rgba(${rgb},${n.online?0.65+pulse*0.3:0.22})`; ctx.lineWidth=isHub?2:1.2; ctx.stroke();
|
||||
ctx.strokeStyle=`rgba(${rgb},${n.online?0.58+pulse*0.3:0.18})`; ctx.lineWidth=isHub?2:1; ctx.stroke();
|
||||
|
||||
// Hub cross-hairs
|
||||
// Hub crosshairs
|
||||
if(isHub){
|
||||
ctx.strokeStyle=`rgba(${rgb},0.22)`; ctx.lineWidth=0.6;
|
||||
[[n.x-48,n.y,n.x-baseR-4,n.y],[n.x+baseR+4,n.y,n.x+48,n.y],
|
||||
[n.x,n.y-48,n.x,n.y-baseR-4],[n.x,n.y+baseR+4,n.x,n.y+48]].forEach(([x1,y1,x2,y2])=>{
|
||||
ctx.beginPath();ctx.moveTo(x1,y1);ctx.lineTo(x2,y2);ctx.stroke();});
|
||||
ctx.strokeStyle=`rgba(${rgb},0.2)`; ctx.lineWidth=0.6;
|
||||
[[p.x-44,p.y,p.x-baseR-3,p.y],[p.x+baseR+3,p.y,p.x+44,p.y],
|
||||
[p.x,p.y-44,p.x,p.y-baseR-3],[p.x,p.y+baseR+3,p.x,p.y+44]
|
||||
].forEach(([x1,y1,x2,y2])=>{ ctx.beginPath();ctx.moveTo(x1,y1);ctx.lineTo(x2,y2);ctx.stroke(); });
|
||||
}
|
||||
|
||||
// Label: position OUTWARD from hub center so it never overlaps the node
|
||||
const labelAngle = isHub ? -Math.PI/2 : Math.atan2(n.y-hy, n.x-hx);
|
||||
const labelDist = baseR + (isHub?14:11);
|
||||
const lx = n.x + Math.cos(labelAngle)*labelDist;
|
||||
const ly = n.y + Math.sin(labelAngle)*labelDist + 3;
|
||||
const cosA = Math.cos(labelAngle);
|
||||
ctx.font = `${isHub?'700 10':'8'}px Share Tech Mono,monospace`;
|
||||
ctx.textAlign = isHub ? 'center' : (cosA > 0.25 ? 'left' : cosA < -0.25 ? 'right' : 'center');
|
||||
ctx.fillStyle = n.online ? `rgba(${rgb},0.95)` : 'rgba(200,80,80,0.65)';
|
||||
ctx.fillText(n.label, lx, ly);
|
||||
// Tiny status dot on non-hub nodes
|
||||
if(!isHub){
|
||||
ctx.beginPath(); ctx.arc(p.x+baseR*0.65,p.y-baseR*0.65,2.2,0,Math.PI*2);
|
||||
ctx.fillStyle=n.online?'rgba(0,255,120,0.9)':'rgba(255,50,80,0.9)'; ctx.fill();
|
||||
}
|
||||
|
||||
// Sub (IP) only on hub or hover
|
||||
// Label — outward from center
|
||||
const labelAngle=isHub?-Math.PI/2:Math.atan2(p.y-cy,p.x-cx);
|
||||
const lDist=baseR+(isHub?14:10);
|
||||
const lx=p.x+Math.cos(labelAngle)*lDist, ly=p.y+Math.sin(labelAngle)*lDist+3;
|
||||
ctx.font=`${isHub?'700 10':'7.5'}px Share Tech Mono,monospace`;
|
||||
const ca=Math.cos(labelAngle);
|
||||
ctx.textAlign=isHub?'center': ca>0.2?'left': ca<-0.2?'right':'center';
|
||||
ctx.fillStyle=n.online?`rgba(${rgb},0.92)`:'rgba(200,80,80,0.65)';
|
||||
ctx.fillText(n.label,lx,ly);
|
||||
if(n.sub&&(isHub||isHov)){
|
||||
ctx.font='6.5px Share Tech Mono,monospace';
|
||||
ctx.fillStyle='rgba(150,200,220,0.5)';
|
||||
ctx.fillText(n.sub, lx, ly+(isHub?11:10));
|
||||
ctx.font='6px Share Tech Mono,monospace';
|
||||
ctx.fillStyle='rgba(130,185,205,0.5)';
|
||||
ctx.fillText(n.sub,lx,ly+10);
|
||||
}
|
||||
ctx.textAlign='left';
|
||||
});
|
||||
}
|
||||
draw();
|
||||
|
||||
// Hover detection
|
||||
canvas.onmousemove=function(e){
|
||||
const r=canvas.getBoundingClientRect(), mx=e.clientX-r.left, my=e.clientY-r.top;
|
||||
const positions=_nmNodes.map(n=>nodePos(n));
|
||||
let found=-1;
|
||||
_nmNodes.forEach((n,i)=>{ if(n.type!=='overflow'&&Math.hypot(n.x-mx,n.y-my)<n.r+10) found=i; });
|
||||
positions.forEach((p,i)=>{ if(Math.hypot(p.x-mx,p.y-my)<_nmNodes[i].r+10) found=i; });
|
||||
_nmHoverNode=found>=0?found:null;
|
||||
const info=document.getElementById('nmNodeInfo');
|
||||
if(!info) return;
|
||||
const info=document.getElementById('nmNodeInfo'); if(!info) return;
|
||||
if(found>=0){
|
||||
const n=_nmNodes[found], rgb=n.rgb||_nodeRgb(n);
|
||||
const n=_nmNodes[found], rgb=_nodeRgb(n);
|
||||
document.getElementById('ni-name').textContent=n.label;
|
||||
document.getElementById('ni-name').style.color=`rgb(${rgb})`;
|
||||
document.getElementById('ni-ip').textContent='IP: '+(n.sub||'—');
|
||||
document.getElementById('ni-status').textContent='STATUS: '+(n.online?'ONLINE':'OFFLINE');
|
||||
document.getElementById('ni-type').textContent='TYPE: '+n.type.toUpperCase();
|
||||
info.style.display='block';
|
||||
info.style.left=(mx+16)+'px'; info.style.top=(my-8)+'px';
|
||||
document.getElementById('ni-type').textContent='TYPE: '+n.ring.toUpperCase();
|
||||
info.style.display='block'; info.style.left=(mx+16)+'px'; info.style.top=(my-6)+'px';
|
||||
} else { info.style.display='none'; }
|
||||
};
|
||||
canvas.onmouseleave=()=>{ _nmHoverNode=null; const i=document.getElementById('nmNodeInfo'); if(i) i.style.display='none'; };
|
||||
}
|
||||
|
||||
// Fallback RGB if node has no zone-assigned rgb
|
||||
function _nodeRgb(n) {
|
||||
if (n.type==='hub') return '0,212,255';
|
||||
if (n.type==='proxmox') return '0,255,136';
|
||||
if (n.type==='ha'||n.type==='ai') return '255,215,0';
|
||||
if (n.type==='pbx') return '255,140,0';
|
||||
if (!n.online) return '255,50,80';
|
||||
return '0,180,220';
|
||||
}
|
||||
|
||||
// ── GLOBALS ──────────────────────────────────────────────────────────
|
||||
let sessionToken = '';
|
||||
let sessionUser = '';
|
||||
|
||||
Reference in New Issue
Block a user