zink/animated_wallpaper
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Auto-populate debug select dropdowns from config.js THEMES

Browse Source
This commit is contained in:
Richard Zink committed 2026-10-07 12:38:03 +02:00
1 parent 591f5b2f24
commit f726b76b7d
2 files changed
+66 -11
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

config.js
+9
View File
@@ -10,3 +10,12 @@ window.CONFIG = {
units: 'metric',
language: 'de'
};
// List of available themes. The key is the theme id (used in config.theme),
// the value is the CSS file name. Add a new theme by adding a new entry here
// and dropping the corresponding CSS file in the same directory.
window.THEMES = {
'ash': 'ash.css',
'gruvbox': 'gruvbox.css',
'nord': 'nord.css'
};
index.html
+57 -11
View File
@@ -8,9 +8,9 @@
<script>
(function() {
var theme = (window.CONFIG && window.CONFIG.theme) || 'ash';
var themeMap = { ash: 'ash.css', gruvbox: 'gruvbox.css', nord: 'nord.css' };
var cssFile = window.THEMES && window.THEMES[theme];
var css = document.getElementById('theme-css');
if (css) css.href = themeMap[theme] || themeMap.ash;
if (css) css.href = cssFile || (window.THEMES && window.THEMES.ash) || 'ash.css';
})();
</script>
<link id="theme-css" rel="stylesheet" href="ash.css">
@@ -311,17 +311,13 @@
<div id="debug-content" class="debug-content">
<div class="debug-controls">
<select id="dbg-theme-select" class="debug-select" onchange="setDebugTheme(this.value)">
<option value="ash">Ash</option>
<option value="gruvbox">Gruvbox</option>
<option value="nord">Nord</option>
<!-- Populated dynamically by populateDebugSelects() -->
</select>
<select id="dbg-units-select" class="debug-select" onchange="setDebugUnits(this.value)">
<option value="metric">°C, km/h</option>
<option value="imperial">°F, mph</option>
<!-- Populated dynamically by populateDebugSelects() -->
</select>
<select id="dbg-language-select" class="debug-select" onchange="setDebugLanguage(this.value)">
<option value="de">DE</option>
<option value="en">EN</option>
<!-- Populated dynamically by populateDebugSelects() -->
</select>
</div>
<div class="debug-row"><span class="debug-label">Time:</span> <span id="dbg-time">--</span></div>
@@ -1270,10 +1266,59 @@ window.weatherThemes = {
}
}
var UNITS_OPTIONS = [
{ value: 'metric', label: '°C, km/h' },
{ value: 'imperial', label: '°F, mph' }
];
var LANGUAGE_OPTIONS = [
{ value: 'de', label: 'DE' },
{ value: 'en', label: 'EN' }
];
function populateDebugSelects() {
// Theme select (from window.THEMES)
var themeSelect = document.getElementById('dbg-theme-select');
themeSelect.innerHTML = '';
if (window.THEMES) {
for (var key in window.THEMES) {
if (window.THEMES.hasOwnProperty(key)) {
var opt = document.createElement('option');
opt.value = key;
opt.textContent = key.charAt(0).toUpperCase() + key.slice(1);
if (key === window.CONFIG.theme) opt.selected = true;
themeSelect.appendChild(opt);
}
}
}
// Units select
var unitsSelect = document.getElementById('dbg-units-select');
unitsSelect.innerHTML = '';
for (var i = 0; i < UNITS_OPTIONS.length; i++) {
var opt2 = document.createElement('option');
opt2.value = UNITS_OPTIONS[i].value;
opt2.textContent = UNITS_OPTIONS[i].label;
if (UNITS_OPTIONS[i].value === window.CONFIG.units) opt2.selected = true;
unitsSelect.appendChild(opt2);
}
// Language select
var langSelect = document.getElementById('dbg-language-select');
langSelect.innerHTML = '';
for (var j = 0; j < LANGUAGE_OPTIONS.length; j++) {
var opt3 = document.createElement('option');
opt3.value = LANGUAGE_OPTIONS[j].value;
opt3.textContent = LANGUAGE_OPTIONS[j].label;
if (LANGUAGE_OPTIONS[j].value === window.CONFIG.language) opt3.selected = true;
langSelect.appendChild(opt3);
}
}
function setDebugTheme(theme) {
var themeMap = { ash: 'ash.css', gruvbox: 'gruvbox.css', nord: 'nord.css' };
var cssFile = window.THEMES && window.THEMES[theme];
var css = document.getElementById('theme-css');
if (css && themeMap[theme]) css.href = themeMap[theme];
if (css && cssFile) css.href = cssFile;
setTimeout(function() {
rebuildFromColors();
document.getElementById('dbg-palette-name').textContent = theme.charAt(0).toUpperCase() + theme.slice(1);
@@ -1575,6 +1620,7 @@ window.weatherThemes = {
}
// Update weather every 15 minutes
populateDebugSelects();
animate();
tick();