alexei.dolgolyov
58df163ded
- Rename "WLED Grab" to "LED Grab" across all files (title, logs, locales) - Merge Devices and Targets into a single Targets tab with WLED sub-tab containing Devices and Targets sections (like Sources tab pattern) - Make target card source name label full-width - Render engine template config as two-column key-value grid - Update CLAUDE.md: no server restart needed for frontend-only changes Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
843 lines
46 KiB
HTML
843 lines
46 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>LED Grab</title>
|
|
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='0.9em' font-size='90'>💡</text></svg>">
|
|
<link rel="stylesheet" href="/static/style.css">
|
|
</head>
|
|
<body style="visibility: hidden;">
|
|
<div class="container">
|
|
<header>
|
|
<div class="header-title">
|
|
<span id="server-status" class="status-badge">●</span>
|
|
<h1 data-i18n="app.title">LED Grab</h1>
|
|
<span id="server-version"><span id="version-number"></span></span>
|
|
</div>
|
|
<div class="server-info">
|
|
<button class="theme-toggle" onclick="toggleTheme()" data-i18n-title="theme.toggle" title="Toggle theme">
|
|
<span id="theme-icon">🌙</span>
|
|
</button>
|
|
<select id="locale-select" onchange="changeLocale()" data-i18n-title="locale.change" title="Change language" style="margin-left: 10px; padding: 6px 12px; border: 1px solid var(--border-color); border-radius: 4px; background: var(--bg-color); color: var(--text-color); font-size: 0.9rem; cursor: pointer;">
|
|
<option value="en">English</option>
|
|
<option value="ru">Русский</option>
|
|
</select>
|
|
<button id="login-btn" class="btn btn-primary" onclick="showLogin()" style="display: none; padding: 6px 16px; font-size: 0.85rem; margin-left: 10px;">
|
|
🔑 <span data-i18n="auth.login">Login</span>
|
|
</button>
|
|
<button id="logout-btn" class="btn btn-danger" onclick="logout()" style="display: none; padding: 6px 16px; font-size: 0.85rem; margin-left: 10px;">
|
|
🚪 <span data-i18n="auth.logout">Logout</span>
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="tabs">
|
|
<div class="tab-bar">
|
|
<button class="tab-btn active" data-tab="targets" onclick="switchTab('targets')"><span data-i18n="targets.title">⚡ Targets</span></button>
|
|
<button class="tab-btn" data-tab="streams" onclick="switchTab('streams')"><span data-i18n="streams.title">📺 Sources</span></button>
|
|
</div>
|
|
|
|
<div class="tab-panel active" id="tab-targets">
|
|
<div id="targets-panel-content">
|
|
<div class="loading-spinner"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tab-panel" id="tab-streams">
|
|
<div id="streams-list">
|
|
<div class="loading-spinner"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<footer class="app-footer">
|
|
<div class="footer-content">
|
|
<p>
|
|
Created by <strong>Alexei Dolgolyov</strong>
|
|
• <a href="mailto:dolgolyov.alexei@gmail.com">dolgolyov.alexei@gmail.com</a>
|
|
• <a href="https://git.dolgolyov-family.by/alexei.dolgolyov/wled-screen-controller-mixed" target="_blank" rel="noopener">Source Code</a>
|
|
</p>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
|
|
<div id="toast" class="toast"></div>
|
|
|
|
<!-- Calibration Modal -->
|
|
<div id="calibration-modal" class="modal">
|
|
<div class="modal-content" style="max-width: 700px;">
|
|
<div class="modal-header">
|
|
<h2 data-i18n="calibration.title">📐 LED Calibration</h2>
|
|
<button class="tutorial-trigger-btn" onclick="startCalibrationTutorial()" data-i18n-title="calibration.tutorial.start" title="Start tutorial">?</button>
|
|
<button class="modal-close-btn" onclick="closeCalibrationModal()" title="Close">✕</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<input type="hidden" id="calibration-device-id">
|
|
<!-- Interactive Preview with integrated LED inputs and test toggles -->
|
|
<div style="margin-bottom: 12px; padding: 0 24px;">
|
|
<div class="calibration-preview">
|
|
<!-- Screen with direction toggle, total LEDs, and offset -->
|
|
<div class="preview-screen">
|
|
<button type="button" class="direction-toggle" onclick="toggleDirection()" title="Toggle direction">
|
|
<span id="direction-icon">↻</span> <span id="direction-label">CW</span>
|
|
</button>
|
|
<div class="preview-screen-total" onclick="toggleEdgeInputs()" title="Toggle edge LED inputs"><span id="cal-total-leds-inline">0</span> / <span id="cal-device-led-count-inline">0</span></div>
|
|
<label class="offset-control" title="LED offset from LED 0 to start corner">
|
|
<span>⊕</span>
|
|
<input type="number" id="cal-offset" min="0" value="0" oninput="updateCalibrationPreview()">
|
|
</label>
|
|
</div>
|
|
|
|
<!-- Edge bars with span controls and LED count inputs -->
|
|
<div class="preview-edge edge-top">
|
|
<div class="edge-span-bar" data-edge="top">
|
|
<div class="edge-span-handle edge-span-handle-start" data-edge="top" data-handle="start"></div>
|
|
<div class="edge-span-handle edge-span-handle-end" data-edge="top" data-handle="end"></div>
|
|
</div>
|
|
<input type="number" id="cal-top-leds" class="edge-led-input" min="0" value="0"
|
|
oninput="updateCalibrationPreview()">
|
|
</div>
|
|
<div class="preview-edge edge-right">
|
|
<div class="edge-span-bar" data-edge="right">
|
|
<div class="edge-span-handle edge-span-handle-start" data-edge="right" data-handle="start"></div>
|
|
<div class="edge-span-handle edge-span-handle-end" data-edge="right" data-handle="end"></div>
|
|
</div>
|
|
<input type="number" id="cal-right-leds" class="edge-led-input" min="0" value="0"
|
|
oninput="updateCalibrationPreview()">
|
|
</div>
|
|
<div class="preview-edge edge-bottom">
|
|
<div class="edge-span-bar" data-edge="bottom">
|
|
<div class="edge-span-handle edge-span-handle-start" data-edge="bottom" data-handle="start"></div>
|
|
<div class="edge-span-handle edge-span-handle-end" data-edge="bottom" data-handle="end"></div>
|
|
</div>
|
|
<input type="number" id="cal-bottom-leds" class="edge-led-input" min="0" value="0"
|
|
oninput="updateCalibrationPreview()">
|
|
</div>
|
|
<div class="preview-edge edge-left">
|
|
<div class="edge-span-bar" data-edge="left">
|
|
<div class="edge-span-handle edge-span-handle-start" data-edge="left" data-handle="start"></div>
|
|
<div class="edge-span-handle edge-span-handle-end" data-edge="left" data-handle="end"></div>
|
|
</div>
|
|
<input type="number" id="cal-left-leds" class="edge-led-input" min="0" value="0"
|
|
oninput="updateCalibrationPreview()">
|
|
</div>
|
|
|
|
<!-- Edge test toggle zones (outside container border, in tick area) -->
|
|
<div class="edge-toggle toggle-top" onclick="toggleTestEdge('top')"></div>
|
|
<div class="edge-toggle toggle-right" onclick="toggleTestEdge('right')"></div>
|
|
<div class="edge-toggle toggle-bottom" onclick="toggleTestEdge('bottom')"></div>
|
|
<div class="edge-toggle toggle-left" onclick="toggleTestEdge('left')"></div>
|
|
|
|
<!-- Corner start position buttons -->
|
|
<div class="preview-corner corner-top-left" onclick="setStartPosition('top_left')">●</div>
|
|
<div class="preview-corner corner-top-right" onclick="setStartPosition('top_right')">●</div>
|
|
<div class="preview-corner corner-bottom-left" onclick="setStartPosition('bottom_left')">●</div>
|
|
<div class="preview-corner corner-bottom-right" onclick="setStartPosition('bottom_right')">●</div>
|
|
|
|
<!-- Canvas overlay for ticks, arrows, start label -->
|
|
<canvas id="calibration-preview-canvas"></canvas>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Hidden selects (used by saveCalibration) -->
|
|
<div style="display: none;">
|
|
<select id="cal-start-position">
|
|
<option value="bottom_left">Bottom Left</option>
|
|
<option value="bottom_right">Bottom Right</option>
|
|
<option value="top_left">Top Left</option>
|
|
<option value="top_right">Top Right</option>
|
|
</select>
|
|
<select id="cal-layout">
|
|
<option value="clockwise">Clockwise</option>
|
|
<option value="counterclockwise">Counterclockwise</option>
|
|
</select>
|
|
</div>
|
|
|
|
|
|
<!-- Tutorial Overlay -->
|
|
<div id="tutorial-overlay" class="tutorial-overlay">
|
|
<div class="tutorial-backdrop"></div>
|
|
<div class="tutorial-ring"></div>
|
|
<div class="tutorial-tooltip">
|
|
<div class="tutorial-tooltip-header">
|
|
<span class="tutorial-step-counter"></span>
|
|
<button class="tutorial-close-btn" onclick="closeTutorial()">×</button>
|
|
</div>
|
|
<p class="tutorial-tooltip-text"></p>
|
|
<div class="tutorial-tooltip-nav">
|
|
<button class="tutorial-prev-btn" onclick="tutorialPrev()">←</button>
|
|
<button class="tutorial-next-btn" onclick="tutorialNext()">→</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="calibration-error" class="error-message" style="display: none;"></div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button class="btn btn-icon btn-secondary" onclick="closeCalibrationModal()" title="Cancel">✕</button>
|
|
<button class="btn btn-icon btn-primary" onclick="saveCalibration()" title="Save">✓</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- General Settings Modal -->
|
|
<div id="device-settings-modal" class="modal">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h2 data-i18n="settings.general.title">⚙️ General Settings</h2>
|
|
<button class="modal-close-btn" onclick="closeDeviceSettingsModal()" title="Close">✕</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form id="device-settings-form">
|
|
<input type="hidden" id="settings-device-id">
|
|
|
|
<div class="form-group">
|
|
<label for="settings-device-name" data-i18n="device.name">Device Name:</label>
|
|
<input type="text" id="settings-device-name" data-i18n-placeholder="device.name.placeholder" placeholder="Living Room TV" required>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<div class="label-row">
|
|
<label for="settings-device-url" data-i18n="device.url">WLED URL:</label>
|
|
<button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?">?</button>
|
|
</div>
|
|
<small class="input-hint" style="display:none" data-i18n="settings.url.hint">IP address or hostname of your WLED device</small>
|
|
<input type="url" id="settings-device-url" data-i18n-placeholder="device.url.placeholder" placeholder="http://192.168.1.100" required>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<div class="label-row">
|
|
<label for="settings-health-interval" data-i18n="settings.health_interval">Health Check Interval (s):</label>
|
|
<button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?">?</button>
|
|
</div>
|
|
<small class="input-hint" style="display:none" data-i18n="settings.health_interval.hint">How often to check the WLED device status (5-600 seconds)</small>
|
|
<input type="number" id="settings-health-interval" min="5" max="600" value="30">
|
|
</div>
|
|
|
|
<div id="settings-error" class="error-message" style="display: none;"></div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button class="btn btn-icon btn-secondary" onclick="closeDeviceSettingsModal()" title="Cancel">✕</button>
|
|
<button class="btn btn-icon btn-primary" onclick="saveDeviceSettings()" title="Save">✓</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Target Editor Modal (name, device, source, settings) -->
|
|
<div id="target-editor-modal" class="modal">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h2 id="target-editor-title" data-i18n="targets.add">🎯 Add Target</h2>
|
|
<button class="modal-close-btn" onclick="closeTargetEditorModal()" title="Close">✕</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form id="target-editor-form">
|
|
<input type="hidden" id="target-editor-id">
|
|
|
|
<div class="form-group">
|
|
<label for="target-editor-name" data-i18n="targets.name">Target Name:</label>
|
|
<input type="text" id="target-editor-name" data-i18n-placeholder="targets.name.placeholder" placeholder="My Target" required>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<div class="label-row">
|
|
<label for="target-editor-device" data-i18n="targets.device">WLED Device:</label>
|
|
<button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?">?</button>
|
|
</div>
|
|
<small class="input-hint" style="display:none" data-i18n="targets.device.hint">Select the WLED device to stream to</small>
|
|
<select id="target-editor-device"></select>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<div class="label-row">
|
|
<label for="target-editor-source" data-i18n="targets.source">Picture Source:</label>
|
|
<button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?">?</button>
|
|
</div>
|
|
<small class="input-hint" style="display:none" data-i18n="targets.source.hint">Select a source that defines what to capture</small>
|
|
<select id="target-editor-source"></select>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<div class="label-row">
|
|
<label for="target-editor-border-width" data-i18n="targets.border_width">Border Width (px):</label>
|
|
<button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?">?</button>
|
|
</div>
|
|
<small class="input-hint" style="display:none" data-i18n="targets.border_width.hint">How many pixels from the screen edge to sample for LED colors (1-100)</small>
|
|
<input type="number" id="target-editor-border-width" min="1" max="100" value="10">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<div class="label-row">
|
|
<label for="target-editor-interpolation" data-i18n="targets.interpolation">Interpolation Mode:</label>
|
|
<button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?">?</button>
|
|
</div>
|
|
<small class="input-hint" style="display:none" data-i18n="targets.interpolation.hint">How to calculate LED color from sampled pixels</small>
|
|
<select id="target-editor-interpolation">
|
|
<option value="average">Average</option>
|
|
<option value="median">Median</option>
|
|
<option value="dominant">Dominant</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<div class="label-row">
|
|
<label for="target-editor-smoothing">
|
|
<span data-i18n="targets.smoothing">Smoothing:</span>
|
|
<span id="target-editor-smoothing-value">0.3</span>
|
|
</label>
|
|
<button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?">?</button>
|
|
</div>
|
|
<small class="input-hint" style="display:none" data-i18n="targets.smoothing.hint">Temporal blending between frames (0=none, 1=full). Reduces flicker.</small>
|
|
<input type="range" id="target-editor-smoothing" min="0.0" max="1.0" step="0.05" value="0.3" oninput="document.getElementById('target-editor-smoothing-value').textContent = this.value">
|
|
</div>
|
|
|
|
<div id="target-editor-error" class="error-message" style="display: none;"></div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button class="btn btn-icon btn-secondary" onclick="closeTargetEditorModal()" title="Cancel">✕</button>
|
|
<button class="btn btn-icon btn-primary" onclick="saveTargetEditor()" title="Save">✓</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Login Modal -->
|
|
<div id="api-key-modal" class="modal">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h2 data-i18n="auth.title">🔑 Login to WLED Controller</h2>
|
|
<button class="modal-close-btn" id="modal-close-x-btn" onclick="closeApiKeyModal()" title="Close">✕</button>
|
|
</div>
|
|
<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 LED Grab.
|
|
</p>
|
|
<div class="form-group">
|
|
<div class="label-row">
|
|
<label for="api-key-input" data-i18n="auth.label">API Key:</label>
|
|
<button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?">?</button>
|
|
</div>
|
|
<small class="input-hint" style="display:none" data-i18n="auth.hint">Your API key will be stored securely in your browser's local storage.</small>
|
|
<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>
|
|
</div>
|
|
<div id="api-key-error" class="error-message" style="display: none;"></div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-icon btn-secondary" onclick="closeApiKeyModal()" id="modal-cancel-btn" title="Cancel">✕</button>
|
|
<button type="submit" class="btn btn-icon btn-primary" title="Login">✓</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Confirmation Modal -->
|
|
<div id="confirm-modal" class="modal">
|
|
<div class="modal-content" style="max-width: 450px;">
|
|
<div class="modal-header">
|
|
<h2 id="confirm-title">Confirm Action</h2>
|
|
<button class="modal-close-btn" onclick="closeConfirmModal(false)" title="Close">✕</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p id="confirm-message" class="modal-description"></p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button class="btn btn-secondary" id="confirm-no-btn" onclick="closeConfirmModal(false)">No</button>
|
|
<button class="btn btn-danger" id="confirm-yes-btn" onclick="closeConfirmModal(true)">Yes</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Add Device Modal -->
|
|
<div id="add-device-modal" class="modal">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h2 data-i18n="devices.add">Add New Device</h2>
|
|
<button class="modal-close-btn" onclick="closeAddDeviceModal()" title="Close">✕</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form id="add-device-form">
|
|
<div class="form-group">
|
|
<label for="device-name" data-i18n="device.name">Device Name:</label>
|
|
<input type="text" id="device-name" data-i18n-placeholder="device.name.placeholder" placeholder="Living Room TV" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="device-url" data-i18n="device.url">WLED URL:</label>
|
|
<input type="url" id="device-url" data-i18n-placeholder="device.url.placeholder" placeholder="http://192.168.1.100" required>
|
|
</div>
|
|
<div id="add-device-error" class="error-message" style="display: none;"></div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button class="btn btn-icon btn-secondary" onclick="closeAddDeviceModal()" title="Cancel">✕</button>
|
|
<button class="btn btn-icon btn-primary" onclick="document.getElementById('add-device-form').requestSubmit()" title="Add Device">✓</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Template Modal -->
|
|
<div id="template-modal" class="modal">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h2 id="template-modal-title" data-i18n="templates.add">Add Capture Template</h2>
|
|
<button class="modal-close-btn" onclick="closeTemplateModal()" title="Close">✕</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<input type="hidden" id="template-id">
|
|
<form id="template-form">
|
|
<div class="form-group">
|
|
<label for="template-name" data-i18n="templates.name">Template Name:</label>
|
|
<input type="text" id="template-name" data-i18n-placeholder="templates.name.placeholder" placeholder="My Custom Template" required>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="template-description" data-i18n="templates.description.label">Description (optional):</label>
|
|
<input type="text" id="template-description" data-i18n-placeholder="templates.description.placeholder" placeholder="Describe this template..." maxlength="500">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<div class="label-row">
|
|
<label for="template-engine" data-i18n="templates.engine">Capture Engine:</label>
|
|
<button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?">?</button>
|
|
</div>
|
|
<small class="input-hint" style="display:none" data-i18n="templates.engine.hint">Select the screen capture technology to use</small>
|
|
<select id="template-engine" onchange="onEngineChange()" required>
|
|
</select>
|
|
<small id="engine-availability-hint" class="form-hint" style="display: none;"></small>
|
|
</div>
|
|
|
|
<div id="engine-config-section" style="display: none;">
|
|
<h3 data-i18n="templates.config">Configuration</h3>
|
|
<div id="engine-config-fields"></div>
|
|
</div>
|
|
|
|
<div id="template-error" class="error-message" style="display: none;"></div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button class="btn btn-icon btn-secondary" onclick="closeTemplateModal()" title="Cancel">✕</button>
|
|
<button class="btn btn-icon btn-primary" onclick="saveTemplate()" title="Save">✓</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Test Template Modal -->
|
|
<div id="test-template-modal" class="modal">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h2 data-i18n="templates.test.title">Test Capture Template</h2>
|
|
<button class="modal-close-btn" onclick="closeTestTemplateModal()" title="Close">✕</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="form-group">
|
|
<label data-i18n="templates.test.display">Display:</label>
|
|
<input type="hidden" id="test-template-display" value="">
|
|
<button type="button" class="btn btn-display-picker" id="test-display-picker-btn" onclick="openDisplayPicker(onTestDisplaySelected, document.getElementById('test-template-display').value)">
|
|
<span id="test-display-picker-label" data-i18n="displays.picker.select">Select display...</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="test-template-duration">
|
|
<span data-i18n="templates.test.duration">Capture Duration (s):</span>
|
|
<span id="test-template-duration-value">5</span>
|
|
</label>
|
|
<input type="range" id="test-template-duration" min="1" max="10" step="1" value="5" oninput="updateCaptureDuration(this.value)" />
|
|
</div>
|
|
|
|
<button type="button" class="btn btn-primary" onclick="runTemplateTest()" style="margin-top: 16px;">
|
|
<span data-i18n="templates.test.run">🧪 Run</span>
|
|
</button>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Test Source Modal -->
|
|
<div id="test-stream-modal" class="modal">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h2 data-i18n="streams.test.title">Test Source</h2>
|
|
<button class="modal-close-btn" onclick="closeTestStreamModal()" title="Close">✕</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="form-group">
|
|
<label for="test-stream-duration">
|
|
<span data-i18n="streams.test.duration">Capture Duration (s):</span>
|
|
<span id="test-stream-duration-value">5</span>
|
|
</label>
|
|
<input type="range" id="test-stream-duration" min="1" max="10" step="1" value="5" oninput="updateStreamTestDuration(this.value)" />
|
|
</div>
|
|
|
|
<button type="button" class="btn btn-primary" onclick="runStreamTest()" style="margin-top: 16px;">
|
|
<span data-i18n="streams.test.run">🧪 Run</span>
|
|
</button>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Test PP Template Modal -->
|
|
<div id="test-pp-template-modal" class="modal">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h2 data-i18n="postprocessing.test.title">Test Processing Template</h2>
|
|
<button class="modal-close-btn" onclick="closeTestPPTemplateModal()" title="Close">✕</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="form-group">
|
|
<label data-i18n="postprocessing.test.source_stream">Source:</label>
|
|
<select id="test-pp-source-stream"></select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="test-pp-duration">
|
|
<span data-i18n="streams.test.duration">Capture Duration (s):</span>
|
|
<span id="test-pp-duration-value">5</span>
|
|
</label>
|
|
<input type="range" id="test-pp-duration" min="1" max="10" step="1" value="5" oninput="updatePPTestDuration(this.value)" />
|
|
</div>
|
|
|
|
<button type="button" class="btn btn-primary" onclick="runPPTemplateTest()" style="margin-top: 16px;">
|
|
<span data-i18n="streams.test.run">🧪 Run</span>
|
|
</button>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Source Modal -->
|
|
<div id="stream-modal" class="modal">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h2 id="stream-modal-title" data-i18n="streams.add">Add Source</h2>
|
|
<button class="modal-close-btn" onclick="closeStreamModal()" title="Close">✕</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<input type="hidden" id="stream-id">
|
|
<form id="stream-form">
|
|
<div class="form-group">
|
|
<label for="stream-name" data-i18n="streams.name">Source Name:</label>
|
|
<input type="text" id="stream-name" data-i18n-placeholder="streams.name.placeholder" placeholder="My Source" required>
|
|
</div>
|
|
|
|
<input type="hidden" id="stream-type" value="raw">
|
|
|
|
<!-- Raw source fields -->
|
|
<div id="stream-raw-fields">
|
|
<div class="form-group">
|
|
<div class="label-row">
|
|
<label data-i18n="streams.display">Display:</label>
|
|
<button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?">?</button>
|
|
</div>
|
|
<small class="input-hint" style="display:none" data-i18n="streams.display.hint">Which screen to capture</small>
|
|
<input type="hidden" id="stream-display-index" value="">
|
|
<button type="button" class="btn btn-display-picker" id="stream-display-picker-btn" onclick="openDisplayPicker(onStreamDisplaySelected, document.getElementById('stream-display-index').value)">
|
|
<span id="stream-display-picker-label" data-i18n="displays.picker.select">Select display...</span>
|
|
</button>
|
|
</div>
|
|
<div class="form-group">
|
|
<div class="label-row">
|
|
<label for="stream-capture-template" data-i18n="streams.capture_template">Capture Template:</label>
|
|
<button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?">?</button>
|
|
</div>
|
|
<small class="input-hint" style="display:none" data-i18n="streams.capture_template.hint">Engine template defining how the screen is captured</small>
|
|
<select id="stream-capture-template"></select>
|
|
</div>
|
|
<div class="form-group">
|
|
<div class="label-row">
|
|
<label for="stream-target-fps" data-i18n="streams.target_fps">Target FPS:</label>
|
|
<button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?">?</button>
|
|
</div>
|
|
<small class="input-hint" style="display:none" data-i18n="streams.target_fps.hint">Target frames per second for capture (10-90)</small>
|
|
<div class="slider-row">
|
|
<input type="range" id="stream-target-fps" min="10" max="90" value="30" oninput="document.getElementById('stream-target-fps-value').textContent = this.value">
|
|
<span id="stream-target-fps-value" class="slider-value">30</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Processed source fields -->
|
|
<div id="stream-processed-fields" style="display: none;">
|
|
<div class="form-group">
|
|
<div class="label-row">
|
|
<label for="stream-source" data-i18n="streams.source">Source:</label>
|
|
<button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?">?</button>
|
|
</div>
|
|
<small class="input-hint" style="display:none" data-i18n="streams.source.hint">The source to apply processing filters to</small>
|
|
<select id="stream-source"></select>
|
|
</div>
|
|
<div class="form-group">
|
|
<div class="label-row">
|
|
<label for="stream-pp-template" data-i18n="streams.pp_template">Processing Template:</label>
|
|
<button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?">?</button>
|
|
</div>
|
|
<small class="input-hint" style="display:none" data-i18n="streams.pp_template.hint">Filter template to apply to the source</small>
|
|
<select id="stream-pp-template"></select>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Static image fields -->
|
|
<div id="stream-static-image-fields" style="display: none;">
|
|
<div class="form-group">
|
|
<div class="label-row">
|
|
<label for="stream-image-source" data-i18n="streams.image_source">Image Source:</label>
|
|
<button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?">?</button>
|
|
</div>
|
|
<small class="input-hint" style="display:none" data-i18n="streams.image_source.hint">Enter a URL (http/https) or local file path to an image</small>
|
|
<input type="text" id="stream-image-source" data-i18n-placeholder="streams.image_source.placeholder" placeholder="https://example.com/image.jpg or C:\path\to\image.png">
|
|
</div>
|
|
<div id="stream-image-preview-container" class="image-preview-container" style="display: none;">
|
|
<img id="stream-image-preview" class="stream-image-preview" src="" alt="Preview">
|
|
<div id="stream-image-info" class="stream-image-info"></div>
|
|
</div>
|
|
<div id="stream-image-validation-status" class="validation-status" style="display: none;"></div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="stream-description" data-i18n="streams.description_label">Description (optional):</label>
|
|
<input type="text" id="stream-description" data-i18n-placeholder="streams.description_placeholder" placeholder="Describe this source...">
|
|
</div>
|
|
|
|
<div id="stream-error" class="error-message" style="display: none;"></div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button class="btn btn-icon btn-secondary" onclick="closeStreamModal()" title="Cancel">✕</button>
|
|
<button class="btn btn-icon btn-primary" onclick="saveStream()" title="Save">✓</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Processing Template Modal -->
|
|
<div id="pp-template-modal" class="modal">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h2 id="pp-template-modal-title" data-i18n="postprocessing.add">Add Processing Template</h2>
|
|
<button class="modal-close-btn" onclick="closePPTemplateModal()" title="Close">✕</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<input type="hidden" id="pp-template-id">
|
|
<form id="pp-template-form">
|
|
<div class="form-group">
|
|
<label for="pp-template-name" data-i18n="postprocessing.name">Template Name:</label>
|
|
<input type="text" id="pp-template-name" data-i18n-placeholder="postprocessing.name.placeholder" placeholder="My Processing Template" required>
|
|
</div>
|
|
|
|
<!-- Dynamic filter list -->
|
|
<div id="pp-filter-list" class="pp-filter-list"></div>
|
|
|
|
<!-- Add filter control -->
|
|
<div class="pp-add-filter-row">
|
|
<select id="pp-add-filter-select" class="pp-add-filter-select">
|
|
<option value="" data-i18n="filters.select_type">Select filter type...</option>
|
|
</select>
|
|
<button type="button" class="pp-add-filter-btn" onclick="addFilterFromSelect()" title="Add Filter">+</button>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="pp-template-description" data-i18n="postprocessing.description_label">Description (optional):</label>
|
|
<input type="text" id="pp-template-description" data-i18n-placeholder="postprocessing.description_placeholder" placeholder="Describe this template...">
|
|
</div>
|
|
|
|
<div id="pp-template-error" class="error-message" style="display: none;"></div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button class="btn btn-icon btn-secondary" onclick="closePPTemplateModal()" title="Cancel">✕</button>
|
|
<button class="btn btn-icon btn-primary" onclick="savePPTemplate()" title="Save">✓</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Device Tutorial Overlay (viewport-level) -->
|
|
<div id="device-tutorial-overlay" class="tutorial-overlay tutorial-overlay-fixed">
|
|
<div class="tutorial-backdrop"></div>
|
|
<div class="tutorial-ring"></div>
|
|
<div class="tutorial-tooltip">
|
|
<div class="tutorial-tooltip-header">
|
|
<span class="tutorial-step-counter"></span>
|
|
<button class="tutorial-close-btn" onclick="closeTutorial()">×</button>
|
|
</div>
|
|
<p class="tutorial-tooltip-text"></p>
|
|
<div class="tutorial-tooltip-nav">
|
|
<button class="tutorial-prev-btn" onclick="tutorialPrev()">←</button>
|
|
<button class="tutorial-next-btn" onclick="tutorialNext()">→</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Image Lightbox -->
|
|
<div id="image-lightbox" class="lightbox" onclick="closeLightbox(event)">
|
|
<button class="lightbox-close" onclick="closeLightbox()" title="Close">✕</button>
|
|
<div class="lightbox-content">
|
|
<img id="lightbox-image" src="" alt="Full size preview">
|
|
<div id="lightbox-stats" class="lightbox-stats" style="display: none;"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Display Picker Lightbox -->
|
|
<div id="display-picker-lightbox" class="lightbox" onclick="closeDisplayPicker(event)">
|
|
<button class="lightbox-close" onclick="closeDisplayPicker()" title="Close">✕</button>
|
|
<div class="lightbox-content display-picker-content">
|
|
<h3 class="display-picker-title" data-i18n="displays.picker.title">Select a Display</h3>
|
|
<div id="display-picker-canvas" class="display-picker-canvas">
|
|
<div class="loading-spinner"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="/static/app.js"></script>
|
|
<script>
|
|
// Initialize theme
|
|
const savedTheme = localStorage.getItem('theme') || 'dark';
|
|
document.documentElement.setAttribute('data-theme', savedTheme);
|
|
updateThemeIcon(savedTheme);
|
|
|
|
function updateThemeIcon(theme) {
|
|
const icon = document.getElementById('theme-icon');
|
|
icon.textContent = theme === 'dark' ? '☀️' : '🌙';
|
|
}
|
|
|
|
function toggleTheme() {
|
|
const currentTheme = document.documentElement.getAttribute('data-theme');
|
|
const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
|
|
|
|
document.documentElement.setAttribute('data-theme', newTheme);
|
|
localStorage.setItem('theme', newTheme);
|
|
updateThemeIcon(newTheme);
|
|
showToast(`Switched to ${newTheme} theme`, 'info');
|
|
}
|
|
|
|
// Initialize auth state
|
|
function updateAuthUI() {
|
|
const apiKey = localStorage.getItem('wled_api_key');
|
|
const loginBtn = document.getElementById('login-btn');
|
|
const logoutBtn = document.getElementById('logout-btn');
|
|
|
|
if (apiKey) {
|
|
loginBtn.style.display = 'none';
|
|
logoutBtn.style.display = 'inline-block';
|
|
} else {
|
|
loginBtn.style.display = 'inline-block';
|
|
logoutBtn.style.display = 'none';
|
|
}
|
|
}
|
|
|
|
function showLogin() {
|
|
showApiKeyModal(t('auth.message'));
|
|
document.getElementById('modal-cancel-btn').style.display = 'inline-block';
|
|
}
|
|
|
|
async function logout() {
|
|
const confirmed = await showConfirm(t('auth.logout.confirm'));
|
|
if (!confirmed) {
|
|
return;
|
|
}
|
|
|
|
localStorage.removeItem('wled_api_key');
|
|
apiKey = null;
|
|
updateAuthUI();
|
|
showToast(t('auth.logout.success'), 'info');
|
|
|
|
// Clear the UI
|
|
document.getElementById('targets-panel-content').innerHTML = `<div class="loading">${t('auth.please_login')}</div>`;
|
|
}
|
|
|
|
// Initialize on load
|
|
updateAuthUI();
|
|
|
|
// Modal functions
|
|
function togglePasswordVisibility() {
|
|
const input = document.getElementById('api-key-input');
|
|
const button = document.querySelector('.password-toggle');
|
|
if (input.type === 'password') {
|
|
input.type = 'text';
|
|
button.textContent = '🙈';
|
|
} else {
|
|
input.type = 'password';
|
|
button.textContent = '👁️';
|
|
}
|
|
}
|
|
|
|
function showApiKeyModal(message, hideCancel = false) {
|
|
const modal = document.getElementById('api-key-modal');
|
|
const description = document.querySelector('.modal-description');
|
|
const input = document.getElementById('api-key-input');
|
|
const error = document.getElementById('api-key-error');
|
|
const cancelBtn = document.getElementById('modal-cancel-btn');
|
|
|
|
if (message) {
|
|
description.textContent = message;
|
|
}
|
|
|
|
input.value = '';
|
|
input.placeholder = 'Enter your API key...';
|
|
error.style.display = 'none';
|
|
modal.style.display = 'flex';
|
|
lockBody();
|
|
|
|
// Hide cancel button and close X if this is required login (no existing session)
|
|
cancelBtn.style.display = hideCancel ? 'none' : 'inline-block';
|
|
const closeXBtn = document.getElementById('modal-close-x-btn');
|
|
if (closeXBtn) closeXBtn.style.display = hideCancel ? 'none' : '';
|
|
|
|
setTimeout(() => input.focus(), 100);
|
|
}
|
|
|
|
function closeApiKeyModal() {
|
|
const modal = document.getElementById('api-key-modal');
|
|
modal.style.display = 'none';
|
|
unlockBody();
|
|
}
|
|
|
|
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();
|
|
|
|
if (!key) {
|
|
error.textContent = t('auth.error.required');
|
|
error.style.display = 'block';
|
|
return;
|
|
}
|
|
|
|
// Store the key
|
|
localStorage.setItem('wled_api_key', key);
|
|
apiKey = key;
|
|
updateAuthUI();
|
|
|
|
closeApiKeyModal();
|
|
showToast(t('auth.success'), 'success');
|
|
|
|
// Reload data
|
|
loadServerInfo();
|
|
loadDisplays();
|
|
loadTargetsTab();
|
|
|
|
// Start auto-refresh if not already running
|
|
if (!refreshInterval) {
|
|
startAutoRefresh();
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|