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>
|
||||
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; }
|
||||
#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 {
|
||||
position: fixed;
|
||||
top: 2vh;
|
||||
@@ -158,6 +217,31 @@
|
||||
</head>
|
||||
<body>
|
||||
<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">
|
||||
<svg id="analog-clock" viewBox="0 0 280 280">
|
||||
<!-- Clock face -->
|
||||
@@ -869,6 +953,45 @@ var weatherThemes = {
|
||||
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() {
|
||||
var t = getCurrentDayProgress();
|
||||
var c = getColor(t);
|
||||
@@ -884,6 +1007,7 @@ var weatherThemes = {
|
||||
speed: currentThemeSpeed
|
||||
});
|
||||
document.body.style.backgroundColor = '#' + ('00000' + c.bg.toString(16)).slice(-6);
|
||||
updateDebug(t, null, c, currentWeatherThemeName);
|
||||
requestAnimationFrame(animate);
|
||||
}
|
||||
|
||||
|
||||
Reference in new issue
Block a user