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

Worker orbs/hub: preserve logo aspect ratio + use SoulSync logo on Manage Workers button

Browse source 
- Nucleus logo now fits to the pulsing radius using the image's natural
  width/height, so it no longer stretches to a square.
- Manage Workers button swaps the helix emoji for the SoulSync logo
  (trans2.png) inside the existing accent badge.
This commit is contained in:
BoulderBadgeDad 2026-06-03 17:26:50 -07:00
parent 37f9046afd
commit 6dfe9f3d6a
3 changed files with 10 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
webui/index.html
View file

@ -651,7 +651,7 @@
<button class="em-manage-btn" id="manage-enrichment-btn" <button class="em-manage-btn" id="manage-enrichment-btn"
title="Manage enrichment workers — stats, unmatched items, manual matching" title="Manage enrichment workers — stats, unmatched items, manual matching"
onclick="openEnrichmentManager()"> onclick="openEnrichmentManager()">
<span class="em-manage-btn-icon">🧬</span> <span class="em-manage-btn-icon"><img src="/static/trans2.png" alt="SoulSync" class="em-manage-btn-logo"></span>
<span class="em-manage-btn-label">Manage Workers</span> <span class="em-manage-btn-label">Manage Workers</span>
</button> </button>
</div> </div>

1
webui/static/style.css
View file

@ -64905,6 +64905,7 @@ body.reduce-effects .dash-card::after {
background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.9), rgba(var(--accent-rgb), 0.55)); background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.9), rgba(var(--accent-rgb), 0.55));
box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.5); box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.5);
} }
.em-manage-btn-logo { width: 22px; height: 22px; object-fit: contain; display: block; }
.em-manage-btn-label { background: linear-gradient(90deg, #fff, rgba(255,255,255,0.85)); -webkit-background-clip: text; background-clip: text; } .em-manage-btn-label { background: linear-gradient(90deg, #fff, rgba(255,255,255,0.85)); -webkit-background-clip: text; background-clip: text; }
.enrichment-manager-modal { .enrichment-manager-modal {

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

@ -591,12 +591,16 @@
ctx.fill(); ctx.fill();
if (hubImageReady) { if (hubImageReady) {
// SoulSync logo as the nucleus — sized to the pulsing radius, // SoulSync logo as the nucleus — fit to the pulsing radius while
// brightness lifts a touch with energy // preserving the image's natural aspect ratio (no stretch)
const imgSize = hubR * 3.2; const natW = hubImage.naturalWidth || 1;
const natH = hubImage.naturalHeight || 1;
const fit = (hubR * 3.2) / Math.max(natW, natH);
const dw = natW * fit;
const dh = natH * fit;
ctx.save(); ctx.save();
ctx.globalAlpha = Math.min(1, 0.85 + energy * 0.15 + slow * 0.1); ctx.globalAlpha = Math.min(1, 0.85 + energy * 0.15 + slow * 0.1);
ctx.drawImage(hubImage, orb.x - imgSize / 2, orb.y - imgSize / 2, imgSize, imgSize); ctx.drawImage(hubImage, orb.x - dw / 2, orb.y - dh / 2, dw, dh);
ctx.restore(); ctx.restore();
} else { } else {
// Fallback while the logo loads: solid bright core + highlight // Fallback while the logo loads: solid bright core + highlight