Add composable filter templates, skip keepalive for serial devices
Filter Template meta-filter: reference existing PP templates inside others for composable, DRY filter chains. Filters are recursively expanded at pipeline build time with cycle detection. New `select` option type with dynamic choices populated by the API. Keepalive optimization: serial devices (Adalight, AmbiLED) don't need keepalive — they hold last frame indefinitely. Check `standby_required` capability at processor start, skip keepalive sends for serial targets, and hide keepalive metrics in the UI. Rename "Standby Interval" to "Keep Alive Interval" throughout the frontend. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -1175,6 +1175,22 @@ export function renderModalFilterList() {
|
||||
onchange="updateFilterOption(${index}, '${opt.key}', this.checked)">
|
||||
</label>
|
||||
</div>`;
|
||||
} else if (opt.type === 'select' && Array.isArray(opt.choices)) {
|
||||
// Exclude the template being edited from filter_template choices (prevent self-reference)
|
||||
const editingId = document.getElementById('pp-template-id')?.value || '';
|
||||
const filteredChoices = (fi.filter_id === 'filter_template' && opt.key === 'template_id' && editingId)
|
||||
? opt.choices.filter(c => c.value !== editingId)
|
||||
: opt.choices;
|
||||
const options = filteredChoices.map(c =>
|
||||
`<option value="${escapeHtml(c.value)}"${c.value === currentVal ? ' selected' : ''}>${escapeHtml(c.label)}</option>`
|
||||
).join('');
|
||||
html += `<div class="pp-filter-option">
|
||||
<label for="${inputId}"><span>${escapeHtml(opt.label)}:</span></label>
|
||||
<select id="${inputId}"
|
||||
onchange="updateFilterOption(${index}, '${opt.key}', this.value)">
|
||||
${options}
|
||||
</select>
|
||||
</div>`;
|
||||
} else {
|
||||
html += `<div class="pp-filter-option">
|
||||
<label for="${inputId}">
|
||||
@@ -1245,6 +1261,8 @@ export function updateFilterOption(filterIndex, optionKey, value) {
|
||||
const optDef = filterDef.options_schema.find(o => o.key === optionKey);
|
||||
if (optDef && optDef.type === 'bool') {
|
||||
fi.options[optionKey] = !!value;
|
||||
} else if (optDef && optDef.type === 'select') {
|
||||
fi.options[optionKey] = String(value);
|
||||
} else if (optDef && optDef.type === 'int') {
|
||||
fi.options[optionKey] = parseInt(value);
|
||||
} else {
|
||||
|
||||
@@ -85,7 +85,7 @@ class TargetEditorModal extends Modal {
|
||||
device: document.getElementById('target-editor-device').value,
|
||||
css: document.getElementById('target-editor-css').value,
|
||||
fps: document.getElementById('target-editor-fps').value,
|
||||
standby_interval: document.getElementById('target-editor-standby-interval').value,
|
||||
standby_interval: document.getElementById('target-editor-keepalive-interval').value,
|
||||
};
|
||||
}
|
||||
}
|
||||
@@ -122,12 +122,12 @@ function _updateFpsRecommendation() {
|
||||
}
|
||||
}
|
||||
|
||||
function _updateStandbyVisibility() {
|
||||
function _updateKeepaliveVisibility() {
|
||||
const deviceSelect = document.getElementById('target-editor-device');
|
||||
const standbyGroup = document.getElementById('target-editor-standby-group');
|
||||
const keepaliveGroup = document.getElementById('target-editor-keepalive-group');
|
||||
const selectedDevice = _targetEditorDevices.find(d => d.id === deviceSelect.value);
|
||||
const caps = selectedDevice?.capabilities || [];
|
||||
standbyGroup.style.display = caps.includes('standby_required') ? '' : 'none';
|
||||
keepaliveGroup.style.display = caps.includes('standby_required') ? '' : 'none';
|
||||
}
|
||||
|
||||
export async function showTargetEditor(targetId = null) {
|
||||
@@ -179,8 +179,8 @@ export async function showTargetEditor(targetId = null) {
|
||||
const fps = target.fps ?? 30;
|
||||
document.getElementById('target-editor-fps').value = fps;
|
||||
document.getElementById('target-editor-fps-value').textContent = fps;
|
||||
document.getElementById('target-editor-standby-interval').value = target.standby_interval ?? 1.0;
|
||||
document.getElementById('target-editor-standby-interval-value').textContent = target.standby_interval ?? 1.0;
|
||||
document.getElementById('target-editor-keepalive-interval').value = target.standby_interval ?? 1.0;
|
||||
document.getElementById('target-editor-keepalive-interval-value').textContent = target.standby_interval ?? 1.0;
|
||||
document.getElementById('target-editor-title').textContent = t('targets.edit');
|
||||
} else {
|
||||
// Creating new target — first option is selected by default
|
||||
@@ -188,20 +188,20 @@ export async function showTargetEditor(targetId = null) {
|
||||
document.getElementById('target-editor-name').value = '';
|
||||
document.getElementById('target-editor-fps').value = 30;
|
||||
document.getElementById('target-editor-fps-value').textContent = '30';
|
||||
document.getElementById('target-editor-standby-interval').value = 1.0;
|
||||
document.getElementById('target-editor-standby-interval-value').textContent = '1.0';
|
||||
document.getElementById('target-editor-keepalive-interval').value = 1.0;
|
||||
document.getElementById('target-editor-keepalive-interval-value').textContent = '1.0';
|
||||
document.getElementById('target-editor-title').textContent = t('targets.add');
|
||||
}
|
||||
|
||||
// Auto-name generation
|
||||
_targetNameManuallyEdited = !!targetId;
|
||||
document.getElementById('target-editor-name').oninput = () => { _targetNameManuallyEdited = true; };
|
||||
deviceSelect.onchange = () => { _updateStandbyVisibility(); _updateFpsRecommendation(); _autoGenerateTargetName(); };
|
||||
deviceSelect.onchange = () => { _updateKeepaliveVisibility(); _updateFpsRecommendation(); _autoGenerateTargetName(); };
|
||||
cssSelect.onchange = () => _autoGenerateTargetName();
|
||||
if (!targetId) _autoGenerateTargetName();
|
||||
|
||||
// Show/hide standby interval based on selected device capabilities
|
||||
_updateStandbyVisibility();
|
||||
_updateKeepaliveVisibility();
|
||||
_updateFpsRecommendation();
|
||||
|
||||
targetEditorModal.snapshot();
|
||||
@@ -232,7 +232,7 @@ export async function saveTargetEditor() {
|
||||
const name = document.getElementById('target-editor-name').value.trim();
|
||||
const deviceId = document.getElementById('target-editor-device').value;
|
||||
const cssId = document.getElementById('target-editor-css').value;
|
||||
const standbyInterval = parseFloat(document.getElementById('target-editor-standby-interval').value);
|
||||
const standbyInterval = parseFloat(document.getElementById('target-editor-keepalive-interval').value);
|
||||
|
||||
if (!name) {
|
||||
targetEditorModal.showError(t('targets.error.name_required'));
|
||||
@@ -595,10 +595,12 @@ export function createTargetCard(target, deviceMap, colorStripSourceMap) {
|
||||
<div class="metric-label">${t('device.metrics.frames')}</div>
|
||||
<div class="metric-value">${metrics.frames_processed || 0}</div>
|
||||
</div>
|
||||
${state.needs_keepalive !== false ? `
|
||||
<div class="metric">
|
||||
<div class="metric-label">${t('device.metrics.keepalive')}</div>
|
||||
<div class="metric-value">${state.frames_keepalive ?? '-'}</div>
|
||||
</div>
|
||||
` : ''}
|
||||
<div class="metric">
|
||||
<div class="metric-label">${t('device.metrics.errors')}</div>
|
||||
<div class="metric-value">${metrics.errors_count || 0}</div>
|
||||
|
||||
Reference in New Issue
Block a user