danvics/soulsync
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Worker orbs: render the SoulSync logo as the hub nucleus

Browse source 
The Manage Workers hub now draws /static/trans2.png (the SoulSync mark)
at its center instead of a plain colored core, scaled to the pulsing
radius and brightening slightly with energy. Energy-reactive glow, rings
and inbound pulses still surround it. Falls back to the drawn core while
the image loads.
This commit is contained in:
BoulderBadgeDad 2026-06-03 17:24:18 -07:00
parent 44fe7a7c33
commit 37f9046afd
1 changed files with 29 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
webui/static/worker-orbs.js
View file

@ -54,6 +54,10 @@
let collapseDelay = null; let collapseDelay = null;
const COLLAPSE_DELAY_MS = 7000; const COLLAPSE_DELAY_MS = 7000;
// SoulSync logo, drawn as the hub/nucleus once loaded
let hubImage = null;
let hubImageReady = false;
// ── Init ── // ── Init ──
function init() { function init() {
@ -61,6 +65,12 @@
headerActions = document.querySelector('#dashboard-page .header-actions'); headerActions = document.querySelector('#dashboard-page .header-actions');
if (!dashboardHeader || !headerActions) return; if (!dashboardHeader || !headerActions) return;
if (!hubImage) {
hubImage = new Image();
hubImage.onload = () => { hubImageReady = true; };
hubImage.src = '/static/trans2.png';
}
canvas = document.createElement('canvas'); canvas = document.createElement('canvas');
canvas.className = 'worker-orb-canvas'; canvas.className = 'worker-orb-canvas';
canvas.style.cssText = 'position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:5;'; canvas.style.cssText = 'position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:5;';
@ -580,17 +590,25 @@
ctx.fillStyle = halo; ctx.fillStyle = halo;
ctx.fill(); ctx.fill();
// Solid bright core if (hubImageReady) {
ctx.beginPath(); // SoulSync logo as the nucleus — sized to the pulsing radius,
ctx.arc(orb.x, orb.y, hubR, 0, Math.PI * 2); // brightness lifts a touch with energy
ctx.fillStyle = `rgba(${r}, ${g}, ${b}, ${0.8 + energy * 0.15})`; const imgSize = hubR * 3.2;
ctx.fill(); ctx.save();
ctx.globalAlpha = Math.min(1, 0.85 + energy * 0.15 + slow * 0.1);
// Bright inner highlight — hotter when energized ctx.drawImage(hubImage, orb.x - imgSize / 2, orb.y - imgSize / 2, imgSize, imgSize);
ctx.beginPath(); ctx.restore();
ctx.arc(orb.x, orb.y, hubR * 0.5, 0, Math.PI * 2); } else {
ctx.fillStyle = `rgba(255, 255, 255, ${0.3 + energy * 0.25 + slow * 0.2})`; // Fallback while the logo loads: solid bright core + highlight
ctx.fill(); ctx.beginPath();
ctx.arc(orb.x, orb.y, hubR, 0, Math.PI * 2);
ctx.fillStyle = `rgba(${r}, ${g}, ${b}, ${0.8 + energy * 0.15})`;
ctx.fill();
ctx.beginPath();
ctx.arc(orb.x, orb.y, hubR * 0.5, 0, Math.PI * 2);
ctx.fillStyle = `rgba(255, 255, 255, ${0.3 + energy * 0.25 + slow * 0.2})`;
ctx.fill();
}
// Expanding heartbeat ring(s) — radiate faster + brighter with energy // Expanding heartbeat ring(s) — radiate faster + brighter with energy
const ringSpeed = 0.5 + energy * 0.9; const ringSpeed = 0.5 + energy * 0.9;