alexei.dolgolyov/wled-screen-controller-mixed
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Replace blob background with floating particle field

Browse Source 
Canvas-based particle system with 60 glowing dots drifting upward,
tinted with the accent color. Eliminates the gradient banding issue
from the previous CSS blur approach. Renders at native resolution
with radial gradients for perfectly smooth glow.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Admin
2026-03-12 11:27:49 +03:00
parent 012e9f5ddb
commit 4db7cd2d27
4 changed files with 149 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
server/src/wled_controller/templates/index.html
View File

@@ -29,11 +29,7 @@
<script src="https://cdn.jsdelivr.net/npm/chart.js@4/dist/chart.umd.min.js"></script>
</head>
<body style="visibility: hidden;">
<div id="bg-anim-layer">
<div class="bg-blob bg-blob-a"></div>
<div class="bg-blob bg-blob-b"></div>
<div class="bg-blob bg-blob-c"></div>
</div>
<canvas id="bg-anim-canvas"></canvas>
<div id="connection-overlay" class="connection-overlay" style="display:none" aria-hidden="true">
<div class="connection-overlay-content">
<div class="connection-spinner-lg"></div>
@@ -250,6 +246,7 @@
document.documentElement.setAttribute('data-theme', newTheme);
localStorage.setItem('theme', newTheme);
updateThemeIcon(newTheme);
if (window._updateBgAnimTheme) window._updateBgAnimTheme(newTheme === 'dark');
// Re-derive accent text variant for the new theme
const accent = localStorage.getItem('accentColor');
if (accent) applyAccentColor(accent, true);
@@ -289,21 +286,6 @@
return L > 0.36 ? '#1a1a1a' : '#ffffff';
}
function updateBgAnimColors(hex) {
const r = parseInt(hex.slice(1,3),16);
const g = parseInt(hex.slice(3,5),16);
const b = parseInt(hex.slice(5,7),16);
const root = document.documentElement;
const isDark = root.getAttribute('data-theme') !== 'light';
const a = isDark ? 0.12 : 0.10;
// Blob A: accent color
root.style.setProperty('--bg-anim-a', `rgba(${r},${g},${b},${a})`);
// Blob B: hue-shifted ~120° toward blue (swap channels)
root.style.setProperty('--bg-anim-b', `rgba(${b},${r},${g},${a * 0.8})`);
// Blob C: hue-shifted ~240° toward magenta
root.style.setProperty('--bg-anim-c', `rgba(${g},${b},${r},${a * 0.7})`);
}
function applyAccentColor(hex, silent) {
const root = document.documentElement;
root.style.setProperty('--primary-color', hex);
@@ -311,7 +293,8 @@
root.style.setProperty('--primary-text-color', adjustLightness(hex, theme === 'dark' ? 15 : -15));
root.style.setProperty('--primary-hover', adjustLightness(hex, 8));
root.style.setProperty('--primary-contrast', contrastColor(hex));
updateBgAnimColors(hex);
// Update canvas background blobs if module loaded
if (window._updateBgAnimAccent) window._updateBgAnimAccent(hex);
const swatch = document.getElementById('cp-swatch-accent');
if (swatch) swatch.style.background = hex;
const native = document.getElementById('cp-native-accent');
@@ -348,7 +331,6 @@
const savedAccent = localStorage.getItem('accentColor');
if (savedAccent) applyAccentColor(savedAccent, true);
updateBgAnimColors(savedAccent || '#4CAF50');
// Initialize auth state
function updateAuthUI() {