Add Picture Streams architecture with postprocessing templates and stream test UI
Introduce Picture Stream abstraction that separates the capture pipeline into composable layers: raw streams (display + capture engine + FPS) and processed streams (source stream + postprocessing template). Devices reference a picture stream instead of managing individual capture settings. - Add PictureStream and PostprocessingTemplate data models and stores - Add CRUD API endpoints for picture streams and postprocessing templates - Add stream chain resolution in ProcessorManager for start_processing - Add picture stream test endpoint with postprocessing preview support - Add Stream Settings modal with border_width and interpolation_mode controls - Add stream test modal with capture preview and performance metrics - Add full frontend: Picture Streams tab, Processing Templates tab, stream selector on device cards, test buttons on stream cards - Add localization keys for all new features (en, ru) - Migrate existing devices to picture streams on startup Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -36,7 +36,9 @@
|
||||
<div class="tab-bar">
|
||||
<button class="tab-btn active" data-tab="devices" onclick="switchTab('devices')"><span data-i18n="devices.title">💡 Devices</span></button>
|
||||
<button class="tab-btn" data-tab="displays" onclick="switchTab('displays')"><span data-i18n="displays.layout">🖥️ Displays</span></button>
|
||||
<button class="tab-btn" data-tab="streams" onclick="switchTab('streams')"><span data-i18n="streams.title">📺 Picture Streams</span></button>
|
||||
<button class="tab-btn" data-tab="templates" onclick="switchTab('templates')"><span data-i18n="templates.title">🎯 Capture Templates</span></button>
|
||||
<button class="tab-btn" data-tab="pp-templates" onclick="switchTab('pp-templates')"><span data-i18n="postprocessing.title">🎨 Processing Templates</span></button>
|
||||
</div>
|
||||
|
||||
<div class="tab-panel active" id="tab-devices">
|
||||
@@ -62,6 +64,17 @@
|
||||
<div id="displays-list" style="display: none;"></div>
|
||||
</div>
|
||||
|
||||
<div class="tab-panel" id="tab-streams">
|
||||
<p class="section-tip">
|
||||
<span data-i18n="streams.description">
|
||||
Picture streams define the capture pipeline. A raw stream captures from a display using a capture template. A processed stream applies postprocessing to another stream. Assign streams to devices.
|
||||
</span>
|
||||
</p>
|
||||
<div id="streams-list" class="templates-grid">
|
||||
<div class="loading-spinner"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tab-panel" id="tab-templates">
|
||||
<p class="section-tip">
|
||||
<span data-i18n="templates.description">
|
||||
@@ -72,6 +85,17 @@
|
||||
<div class="loading-spinner"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tab-panel" id="tab-pp-templates">
|
||||
<p class="section-tip">
|
||||
<span data-i18n="postprocessing.description">
|
||||
Processing templates define color correction and smoothing settings. Assign them to processed picture streams for consistent postprocessing across devices.
|
||||
</span>
|
||||
</p>
|
||||
<div id="pp-templates-list" class="templates-grid">
|
||||
<div class="loading-spinner"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="app-footer">
|
||||
@@ -244,44 +268,47 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Capture Settings Modal -->
|
||||
<div id="capture-settings-modal" class="modal">
|
||||
<!-- Stream Settings Modal (picture stream + LED projection settings) -->
|
||||
<div id="stream-selector-modal" class="modal">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h2 data-i18n="settings.capture.title">🎬 Capture Settings</h2>
|
||||
<button class="modal-close-btn" onclick="closeCaptureSettingsModal()" title="Close">✕</button>
|
||||
<h2 data-i18n="device.stream_settings.title">📺 Stream Settings</h2>
|
||||
<button class="modal-close-btn" onclick="closeStreamSelectorModal()" title="Close">✕</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form id="capture-settings-form">
|
||||
<input type="hidden" id="capture-settings-device-id">
|
||||
<form id="stream-selector-form">
|
||||
<input type="hidden" id="stream-selector-device-id">
|
||||
|
||||
<div class="form-group">
|
||||
<label for="capture-settings-display-index" data-i18n="settings.display_index">Display:</label>
|
||||
<select id="capture-settings-display-index"></select>
|
||||
<small class="input-hint" data-i18n="settings.display_index.hint">Which screen to capture for this device</small>
|
||||
<label for="stream-selector-stream" data-i18n="device.stream_selector.label">Assigned Picture Stream:</label>
|
||||
<select id="stream-selector-stream"></select>
|
||||
<small class="input-hint" data-i18n="device.stream_selector.hint">Select a picture stream that defines what this device captures and processes</small>
|
||||
</div>
|
||||
|
||||
<div id="stream-selector-info" class="stream-info-panel" style="display: none;"></div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="stream-selector-border-width" data-i18n="device.stream_settings.border_width">Border Width (px):</label>
|
||||
<input type="number" id="stream-selector-border-width" min="1" max="100" value="10">
|
||||
<small class="input-hint" data-i18n="device.stream_settings.border_width_hint">How many pixels from the screen edge to sample for LED colors (1-100)</small>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="capture-settings-fps" data-i18n="settings.fps">Target FPS:</label>
|
||||
<div class="slider-row">
|
||||
<input type="range" id="capture-settings-fps" min="10" max="90" value="30" oninput="document.getElementById('capture-settings-fps-value').textContent = this.value">
|
||||
<span id="capture-settings-fps-value" class="slider-value">30</span>
|
||||
</div>
|
||||
<small class="input-hint" data-i18n="settings.fps.hint">Target frames per second (10-90)</small>
|
||||
<label for="stream-selector-interpolation" data-i18n="device.stream_settings.interpolation">Interpolation Mode:</label>
|
||||
<select id="stream-selector-interpolation">
|
||||
<option value="average" data-i18n="device.stream_settings.interpolation.average">Average</option>
|
||||
<option value="median" data-i18n="device.stream_settings.interpolation.median">Median</option>
|
||||
<option value="dominant" data-i18n="device.stream_settings.interpolation.dominant">Dominant</option>
|
||||
</select>
|
||||
<small class="input-hint" data-i18n="device.stream_settings.interpolation_hint">How to calculate LED color from sampled pixels</small>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="capture-settings-template" data-i18n="settings.capture_template">Capture Template:</label>
|
||||
<select id="capture-settings-template"></select>
|
||||
<small class="input-hint" data-i18n="settings.capture_template.hint">Screen capture engine and configuration for this device</small>
|
||||
</div>
|
||||
|
||||
<div id="capture-settings-error" class="error-message" style="display: none;"></div>
|
||||
<div id="stream-selector-error" class="error-message" style="display: none;"></div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-icon btn-secondary" onclick="closeCaptureSettingsModal()" title="Cancel">✕</button>
|
||||
<button class="btn btn-icon btn-primary" onclick="saveCaptureSettings()" title="Save">✓</button>
|
||||
<button class="btn btn-icon btn-secondary" onclick="closeStreamSelectorModal()" title="Cancel">✕</button>
|
||||
<button class="btn btn-icon btn-primary" onclick="saveStreamSelector()" title="Save">✓</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -465,6 +492,189 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Test Stream Modal -->
|
||||
<div id="test-stream-modal" class="modal">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h2 data-i18n="streams.test.title">Test Picture Stream</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 Test</span>
|
||||
</button>
|
||||
|
||||
<div id="test-stream-results" style="display: none; margin-top: 16px;">
|
||||
<div class="test-results-container">
|
||||
<div class="test-preview-section">
|
||||
<div id="test-stream-preview-image" class="test-preview-image"></div>
|
||||
</div>
|
||||
|
||||
<div class="test-performance-section">
|
||||
<div class="test-performance-stats">
|
||||
<div class="stat-item">
|
||||
<span data-i18n="templates.test.results.duration">Duration:</span>
|
||||
<strong id="test-stream-actual-duration">-</strong>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span data-i18n="templates.test.results.frame_count">Frames:</span>
|
||||
<strong id="test-stream-frame-count">-</strong>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span data-i18n="templates.test.results.actual_fps">Actual FPS:</span>
|
||||
<strong id="test-stream-actual-fps">-</strong>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span data-i18n="templates.test.results.avg_capture_time">Avg Capture:</span>
|
||||
<strong id="test-stream-avg-capture-time">-</strong>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Picture Stream 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 Picture Stream</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">Stream Name:</label>
|
||||
<input type="text" id="stream-name" data-i18n-placeholder="streams.name.placeholder" placeholder="My Stream" required>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="stream-type" data-i18n="streams.type">Stream Type:</label>
|
||||
<select id="stream-type" onchange="onStreamTypeChange()">
|
||||
<option value="raw" data-i18n="streams.type.raw">Screen Capture</option>
|
||||
<option value="processed" data-i18n="streams.type.processed">Processed</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Raw stream fields -->
|
||||
<div id="stream-raw-fields">
|
||||
<div class="form-group">
|
||||
<label for="stream-display-index" data-i18n="streams.display">Display:</label>
|
||||
<select id="stream-display-index"></select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="stream-capture-template" data-i18n="streams.capture_template">Capture Template:</label>
|
||||
<select id="stream-capture-template"></select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="stream-target-fps" data-i18n="streams.target_fps">Target FPS:</label>
|
||||
<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 stream fields -->
|
||||
<div id="stream-processed-fields" style="display: none;">
|
||||
<div class="form-group">
|
||||
<label for="stream-source" data-i18n="streams.source">Source Stream:</label>
|
||||
<select id="stream-source"></select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="stream-pp-template" data-i18n="streams.pp_template">Processing Template:</label>
|
||||
<select id="stream-pp-template"></select>
|
||||
</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 stream...">
|
||||
</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>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="pp-template-gamma">
|
||||
<span data-i18n="postprocessing.gamma">Gamma:</span>
|
||||
<span id="pp-template-gamma-value">2.2</span>
|
||||
</label>
|
||||
<input type="range" id="pp-template-gamma" min="0.1" max="5.0" step="0.1" value="2.2" oninput="document.getElementById('pp-template-gamma-value').textContent = this.value">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="pp-template-saturation">
|
||||
<span data-i18n="postprocessing.saturation">Saturation:</span>
|
||||
<span id="pp-template-saturation-value">1.0</span>
|
||||
</label>
|
||||
<input type="range" id="pp-template-saturation" min="0.0" max="2.0" step="0.1" value="1.0" oninput="document.getElementById('pp-template-saturation-value').textContent = this.value">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="pp-template-brightness">
|
||||
<span data-i18n="postprocessing.brightness">Brightness:</span>
|
||||
<span id="pp-template-brightness-value">1.0</span>
|
||||
</label>
|
||||
<input type="range" id="pp-template-brightness" min="0.0" max="1.0" step="0.05" value="1.0" oninput="document.getElementById('pp-template-brightness-value').textContent = this.value">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="pp-template-smoothing">
|
||||
<span data-i18n="postprocessing.smoothing">Smoothing:</span>
|
||||
<span id="pp-template-smoothing-value">0.3</span>
|
||||
</label>
|
||||
<input type="range" id="pp-template-smoothing" min="0.0" max="1.0" step="0.05" value="0.3" oninput="document.getElementById('pp-template-smoothing-value').textContent = this.value">
|
||||
</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>
|
||||
|
||||
Reference in New Issue
Block a user