Add debug panel with weather, theme, colors and transition info
This commit is contained in:
Richard Zink committed
1 parent
cf9590b2ed
commit
a3deeff487
1 file changed
+124
+124
@@ -8,6 +8,65 @@
|
|||||||
<style>
|
<style>
|
||||||
html, body { margin: 0; padding: 0; overflow: hidden; width: 100%; height: 100%; font-family: monospace; }
|
html, body { margin: 0; padding: 0; overflow: hidden; width: 100%; height: 100%; font-family: monospace; }
|
||||||
#vanta { width: 100vw; height: 100vh; position: fixed; top: 0; left: 0; }
|
#vanta { width: 100vw; height: 100vh; position: fixed; top: 0; left: 0; }
|
||||||
|
#debug-panel {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 2vh;
|
||||||
|
left: 2vh;
|
||||||
|
width: 260px;
|
||||||
|
background: rgba(28, 27, 31, 0.85);
|
||||||
|
border: 1px solid rgba(230, 223, 209, 0.3);
|
||||||
|
border-radius: 0.6vh;
|
||||||
|
padding: 1vh 1vw;
|
||||||
|
color: #e6dfd1;
|
||||||
|
font-family: monospace;
|
||||||
|
font-size: 10px;
|
||||||
|
line-height: 1.4;
|
||||||
|
z-index: 9999;
|
||||||
|
}
|
||||||
|
.debug-title {
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #e0914f;
|
||||||
|
border-bottom: 1px solid rgba(230, 223, 209, 0.3);
|
||||||
|
padding-bottom: 4px;
|
||||||
|
margin-bottom: 6px;
|
||||||
|
}
|
||||||
|
.debug-section {
|
||||||
|
font-size: 10px;
|
||||||
|
color: #b0a89a;
|
||||||
|
margin-top: 6px;
|
||||||
|
margin-bottom: 2px;
|
||||||
|
}
|
||||||
|
.debug-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
|
padding: 1px 0;
|
||||||
|
}
|
||||||
|
.debug-label {
|
||||||
|
color: #b0a89a;
|
||||||
|
min-width: 80px;
|
||||||
|
}
|
||||||
|
.libel {
|
||||||
|
color: #b0a89a;
|
||||||
|
min-width: 50px;
|
||||||
|
}
|
||||||
|
.hex {
|
||||||
|
color: #e6dfd1;
|
||||||
|
font-size: 10px;
|
||||||
|
font-family: monospace;
|
||||||
|
}
|
||||||
|
.swatch {
|
||||||
|
width: 14px;
|
||||||
|
height: 14px;
|
||||||
|
border: 1px solid #999187;
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
@media (orientation: portrait) and (max-width: 700px) {
|
||||||
|
#debug-panel {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
#info-panel {
|
#info-panel {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 2vh;
|
top: 2vh;
|
||||||
@@ -158,6 +217,31 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="vanta"></div>
|
<div id="vanta"></div>
|
||||||
|
<div id="debug-panel">
|
||||||
|
<div class="debug-title">DEBUG</div>
|
||||||
|
<div class="debug-row"><span class="debug-label">Time:</span> <span id="dbg-time">--</span></div>
|
||||||
|
<div class="debug-row"><span class="debug-label">Day%:</span> <span id="dbg-day">--</span></div>
|
||||||
|
<div class="debug-row"><span class="debug-label">Weather:</span> <span id="dbg-weather">--</span></div>
|
||||||
|
<div class="debug-row"><span class="debug-label">Theme:</span> <span id="dbg-theme">--</span></div>
|
||||||
|
<div class="debug-row"><span class="debug-label">Speed:</span> <span id="dbg-speed">--</span></div>
|
||||||
|
<div class="debug-row"><span class="debug-label">Transition:</span> <span id="dbg-trans">--</span></div>
|
||||||
|
<div class="debug-section">Effective theme</div>
|
||||||
|
<div class="debug-row"><span class="libel">sky</span> <div class="swatch" id="dbg-t-sky"></div> <span class="hex" id="dbg-h-sky">--</span></div>
|
||||||
|
<div class="debug-row"><span class="libel">cloud</span> <div class="swatch" id="dbg-t-cloud"></div> <span class="hex" id="dbg-h-cloud">--</span></div>
|
||||||
|
<div class="debug-row"><span class="libel">shadow</span> <div class="swatch" id="dbg-t-cloudShadow"></div> <span class="hex" id="dbg-h-cloudShadow">--</span></div>
|
||||||
|
<div class="debug-row"><span class="libel">sun</span> <div class="swatch" id="dbg-t-sun"></div> <span class="hex" id="dbg-h-sun">--</span></div>
|
||||||
|
<div class="debug-row"><span class="libel">glare</span> <div class="swatch" id="dbg-t-sunGlare"></div> <span class="hex" id="dbg-h-sunGlare">--</span></div>
|
||||||
|
<div class="debug-row"><span class="libel">light</span> <div class="swatch" id="dbg-t-sunLight"></div> <span class="hex" id="dbg-h-sunLight">--</span></div>
|
||||||
|
<div class="debug-row"><span class="libel">bg</span> <div class="swatch" id="dbg-t-bg"></div> <span class="hex" id="dbg-h-bg">--</span></div>
|
||||||
|
<div class="debug-section">Vanta colors</div>
|
||||||
|
<div class="debug-row"><span class="libel">sky</span> <div class="swatch" id="dbg-v-sky"></div> <span class="hex" id="dbg-vh-sky">--</span></div>
|
||||||
|
<div class="debug-row"><span class="libel">cloud</span> <div class="swatch" id="dbg-v-cloud"></div> <span class="hex" id="dbg-vh-cloud">--</span></div>
|
||||||
|
<div class="debug-row"><span class="libel">shadow</span> <div class="swatch" id="dbg-v-cloudShadow"></div> <span class="hex" id="dbg-vh-cloudShadow">--</span></div>
|
||||||
|
<div class="debug-row"><span class="libel">sun</span> <div class="swatch" id="dbg-v-sun"></div> <span class="hex" id="dbg-vh-sun">--</span></div>
|
||||||
|
<div class="debug-row"><span class="libel">glare</span> <div class="swatch" id="dbg-v-sunGlare"></div> <span class="hex" id="dbg-vh-sunGlare">--</span></div>
|
||||||
|
<div class="debug-row"><span class="libel">light</span> <div class="swatch" id="dbg-v-sunLight"></div> <span class="hex" id="dbg-vh-sunLight">--</span></div>
|
||||||
|
<div class="debug-row"><span class="libel">bg</span> <div class="swatch" id="dbg-v-bg"></div> <span class="hex" id="dbg-vh-bg">--</span></div>
|
||||||
|
</div>
|
||||||
<div id="info-panel">
|
<div id="info-panel">
|
||||||
<svg id="analog-clock" viewBox="0 0 280 280">
|
<svg id="analog-clock" viewBox="0 0 280 280">
|
||||||
<!-- Clock face -->
|
<!-- Clock face -->
|
||||||
@@ -869,6 +953,45 @@ var weatherThemes = {
|
|||||||
return (now.getTime() - startOfDay.getTime()) / 86400000;
|
return (now.getTime() - startOfDay.getTime()) / 86400000;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function updateDebug(t, palette, vantaColors, themeName) {
|
||||||
|
var now = new Date();
|
||||||
|
var hh = now.getHours(), mm = now.getMinutes(), ss = now.getSeconds();
|
||||||
|
document.getElementById('dbg-time').textContent =
|
||||||
|
(hh < 10 ? '0' : '') + hh + ':' + (mm < 10 ? '0' : '') + mm + ':' + (ss < 10 ? '0' : '') + ss;
|
||||||
|
document.getElementById('dbg-day').textContent = (t * 100).toFixed(1) + '%';
|
||||||
|
document.getElementById('dbg-weather').textContent =
|
||||||
|
currentWeatherCode + ' (' + (weatherThemes[themeName] ? themeName : '?') + ')';
|
||||||
|
document.getElementById('dbg-theme').textContent = themeName || '-';
|
||||||
|
document.getElementById('dbg-speed').textContent = currentThemeSpeed.toFixed(2);
|
||||||
|
|
||||||
|
var elapsed = Date.now() - transitionStartTime;
|
||||||
|
var transPct = targetThemeColors ? Math.min(100, (elapsed / TRANSITION_DURATION) * 100) : 100;
|
||||||
|
document.getElementById('dbg-trans').textContent = transPct.toFixed(0) + '%';
|
||||||
|
|
||||||
|
var themeColors = getEffectiveThemeColors();
|
||||||
|
if (themeColors) {
|
||||||
|
var keys = ['skyColor', 'cloudColor', 'cloudShadowColor', 'sunColor', 'sunGlareColor', 'sunlightColor', 'backgroundColor'];
|
||||||
|
var keyMap = {skyColor: 'sky', cloudColor: 'cloud', cloudShadowColor: 'cloudShadow', sunColor: 'sun', sunGlareColor: 'sunGlare', sunlightColor: 'sunLight', backgroundColor: 'bg'};
|
||||||
|
for (var i = 0; i < keys.length; i++) {
|
||||||
|
var k = keys[i];
|
||||||
|
var kk = keyMap[k];
|
||||||
|
var c = themeColors[k];
|
||||||
|
document.getElementById('dbg-t-' + kk).style.backgroundColor = '#' + ('00000' + c.toString(16)).slice(-6);
|
||||||
|
document.getElementById('dbg-h-' + kk).textContent = '#' + ('00000' + c.toString(16)).slice(-6);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (vantaColors) {
|
||||||
|
var vKeys = ['sky', 'cloud', 'cloudShadow', 'sun', 'sunGlare', 'sunLight', 'bg'];
|
||||||
|
for (var j = 0; j < vKeys.length; j++) {
|
||||||
|
var vk = vKeys[j];
|
||||||
|
var vc = vantaColors[vk];
|
||||||
|
document.getElementById('dbg-v-' + vk).style.backgroundColor = '#' + ('00000' + vc.toString(16)).slice(-6);
|
||||||
|
document.getElementById('dbg-vh-' + vk).textContent = '#' + ('00000' + vc.toString(16)).slice(-6);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
function animate() {
|
function animate() {
|
||||||
var t = getCurrentDayProgress();
|
var t = getCurrentDayProgress();
|
||||||
var c = getColor(t);
|
var c = getColor(t);
|
||||||
@@ -884,6 +1007,7 @@ var weatherThemes = {
|
|||||||
speed: currentThemeSpeed
|
speed: currentThemeSpeed
|
||||||
});
|
});
|
||||||
document.body.style.backgroundColor = '#' + ('00000' + c.bg.toString(16)).slice(-6);
|
document.body.style.backgroundColor = '#' + ('00000' + c.bg.toString(16)).slice(-6);
|
||||||
|
updateDebug(t, null, c, currentWeatherThemeName);
|
||||||
requestAnimationFrame(animate);
|
requestAnimationFrame(animate);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in new issue
Block a user