Fix numpy serialization and add comprehensive error logging
Some checks failed
Validate / validate (push) Failing after 9s

Server fixes:
- Fix numpy uint8 JSON serialization by converting to Python int
- Change WLED payload to flat array format [r,g,b,r,g,b,...]
- Add payload debugging logs (size, LED count, sample data)

Web UI improvements:
- Add comprehensive console logging for device errors
- Log actual error messages from state.errors array
- Log device operations (start/stop/add) with details
- Fix password field form validation warning

The HTTP API may have payload size limitations for large LED counts.
Consider UDP protocols (DDP/E1.31) for better real-time performance.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
2026-02-06 20:25:58 +03:00
parent eca81e11cf
commit ec3c40d59c
4 changed files with 84 additions and 41 deletions

View File

@@ -266,32 +266,34 @@
<div class="modal-header">
<h2 data-i18n="auth.title">🔑 Login to WLED Controller</h2>
</div>
<div class="modal-body">
<p class="modal-description" data-i18n="auth.message">
Please enter your API key to authenticate and access the WLED Screen Controller.
</p>
<div class="form-group">
<label for="api-key-input" data-i18n="auth.label">API Key:</label>
<div class="password-input-wrapper">
<input
type="password"
id="api-key-input"
data-i18n-placeholder="auth.placeholder"
placeholder="Enter your API key..."
autocomplete="off"
>
<button type="button" class="password-toggle" onclick="togglePasswordVisibility()">
👁️
</button>
<form id="api-key-form" onsubmit="submitApiKey(event)">
<div class="modal-body">
<p class="modal-description" data-i18n="auth.message">
Please enter your API key to authenticate and access the WLED Screen Controller.
</p>
<div class="form-group">
<label for="api-key-input" data-i18n="auth.label">API Key:</label>
<div class="password-input-wrapper">
<input
type="password"
id="api-key-input"
data-i18n-placeholder="auth.placeholder"
placeholder="Enter your API key..."
autocomplete="off"
>
<button type="button" class="password-toggle" onclick="togglePasswordVisibility()">
👁️
</button>
</div>
<small class="input-hint" data-i18n="auth.hint">Your API key will be stored securely in your browser's local storage.</small>
</div>
<small class="input-hint" data-i18n="auth.hint">Your API key will be stored securely in your browser's local storage.</small>
<div id="api-key-error" class="error-message" style="display: none;"></div>
</div>
<div id="api-key-error" class="error-message" style="display: none;"></div>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" onclick="closeApiKeyModal()" id="modal-cancel-btn" data-i18n="auth.button.cancel">Cancel</button>
<button class="btn btn-primary" onclick="submitApiKey()" data-i18n="auth.button.login">Login</button>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" onclick="closeApiKeyModal()" id="modal-cancel-btn" data-i18n="auth.button.cancel">Cancel</button>
<button type="submit" class="btn btn-primary" data-i18n="auth.button.login">Login</button>
</div>
</form>
</div>
</div>
@@ -425,7 +427,11 @@
document.body.classList.remove('modal-open');
}
function submitApiKey() {
function submitApiKey(event) {
if (event) {
event.preventDefault();
}
const input = document.getElementById('api-key-input');
const error = document.getElementById('api-key-error');
const key = input.value.trim();
@@ -454,15 +460,6 @@
startAutoRefresh();
}
}
// Handle Enter key in modal
document.addEventListener('DOMContentLoaded', () => {
document.getElementById('api-key-input').addEventListener('keypress', (e) => {
if (e.key === 'Enter') {
submitApiKey();
}
});
});
</script>
</body>
</html>