Add CSPT entity, processed CSS source type, reverse filter, and UI improvements

- Add Color Strip Processing Template (CSPT) entity: reusable filter chains for 1D LED strip postprocessing (backend, storage, API, frontend CRUD) - Add "processed" color strip source type that wraps another CSS source and applies a CSPT filter chain (dataclass, stream, schema, modal, cards) - Add Reverse filter for strip LED order reversal - Add CSPT and processed CSS nodes/edges to visual graph editor - Add CSPT test preview WS endpoint with input source selection - Add device settings CSPT template selector (add + edit modals with hints) - Use icon grids for palette quantization preset selector in filter lists - Use EntitySelect for template references and test modal source selectors - Fix filters.css_filter_template.desc missing localization - Fix icon grid cell height inequality (grid-auto-rows: 1fr) - Rename "Processed" subtab to "Processing Templates" - Localize all new strings (en/ru/zh) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-15 02:16:59 +03:00
parent 7e78323c9c
commit 294d704eb0
72 changed files with 2992 additions and 1416 deletions
--- a/server/src/wled_controller/static/locales/en.json
+++ b/server/src/wled_controller/static/locales/en.json
@@ -198,6 +198,8 @@
  "device.gamesense.peripheral.mousepad.desc": "Mousepad edge lighting zones",
  "device.gamesense.peripheral.indicator": "Indicator",
  "device.gamesense.peripheral.indicator.desc": "OLED/LED status indicator",
+  "device.css_processing_template": "Strip Processing Template:",
+  "device.css_processing_template.hint": "Default processing template applied to all color strip outputs on this device",
  "device.dmx_protocol": "DMX Protocol:",
  "device.dmx_protocol.hint": "Art-Net uses UDP port 6454, sACN (E1.31) uses UDP port 5568",
  "device.dmx_protocol.artnet.desc": "UDP unicast, port 6454",
@@ -417,6 +419,7 @@
  "streams.description": "Sources define the capture pipeline. A raw source captures from a display using a capture template. A processed source applies postprocessing to another source. Assign sources to devices.",
  "streams.group.raw": "Screen Capture",
  "streams.group.processed": "Processed",
+  "streams.group.css_processing": "Processing Templates",
  "streams.group.color_strip": "Color Strips",
  "streams.group.audio": "Audio",
  "streams.section.streams": "Sources",
@@ -485,12 +488,16 @@
  "filters.color_correction.desc": "White balance and color temperature",
  "filters.filter_template": "Filter Template",
  "filters.filter_template.desc": "Embed another processing template",
+  "filters.css_filter_template": "Strip Filter Template",
+  "filters.css_filter_template.desc": "Embed another strip processing template",
  "filters.frame_interpolation": "Frame Interpolation",
  "filters.frame_interpolation.desc": "Blend between frames for smoother output",
  "filters.noise_gate": "Noise Gate",
  "filters.noise_gate.desc": "Suppress small color changes below threshold",
  "filters.palette_quantization": "Palette Quantization",
  "filters.palette_quantization.desc": "Reduce colors to a limited palette",
+  "filters.reverse": "Reverse",
+  "filters.reverse.desc": "Reverse the LED order in the strip",
  "postprocessing.description_label": "Description (optional):",
  "postprocessing.description_placeholder": "Describe this template...",
  "postprocessing.created": "Template created successfully",
@@ -506,6 +513,21 @@
  "postprocessing.test.running": "Testing processing template...",
  "postprocessing.test.error.no_stream": "Please select a source",
  "postprocessing.test.error.failed": "Processing template test failed",
+  "css_processing.title": "Strip Processing Templates",
+  "css_processing.add": "Add Strip Processing Template",
+  "css_processing.edit": "Edit Strip Processing Template",
+  "css_processing.name": "Template Name:",
+  "css_processing.name_placeholder": "My Strip Processing Template",
+  "css_processing.description_label": "Description (optional):",
+  "css_processing.description_placeholder": "Describe this template...",
+  "css_processing.created": "Strip processing template created",
+  "css_processing.updated": "Strip processing template updated",
+  "css_processing.deleted": "Strip processing template deleted",
+  "css_processing.delete.confirm": "Are you sure you want to delete this strip processing template?",
+  "css_processing.error.required": "Please fill in all required fields",
+  "css_processing.error.load": "Error loading strip processing template",
+  "css_processing.error.delete": "Error deleting strip processing template",
+  "css_processing.error.clone_failed": "Failed to clone strip processing template",
  "device.button.stream_selector": "Source Settings",
  "device.stream_settings.title": "Source Settings",
  "device.stream_selector.label": "Source:",
@@ -1027,6 +1049,14 @@
  "color_strip.candlelight.num_candles.hint": "How many independent candle sources along the strip. Each flickers with its own pattern.",
  "color_strip.candlelight.speed": "Flicker Speed:",
  "color_strip.candlelight.speed.hint": "Speed of the flicker animation. Higher values produce faster, more restless flames.",
+  "color_strip.type.processed": "Processed",
+  "color_strip.type.processed.desc": "Apply a processing template to another source",
+  "color_strip.type.processed.hint": "Wraps an existing color strip source and pipes its output through a filter chain.",
+  "color_strip.processed.input": "Input Source:",
+  "color_strip.processed.input.hint": "The color strip source whose output will be processed",
+  "color_strip.processed.template": "Processing Template:",
+  "color_strip.processed.template.hint": "Filter chain to apply to the input source output",
+  "color_strip.processed.error.no_input": "Please select an input source",
  "color_strip.composite.layers": "Layers:",
  "color_strip.composite.layers.hint": "Stack multiple color strip sources. First layer is the bottom, last is the top. Each layer can have its own blend mode and opacity.",
  "color_strip.composite.add_layer": "+ Add Layer",
@@ -1043,6 +1073,7 @@
  "color_strip.composite.opacity": "Opacity",
  "color_strip.composite.brightness": "Brightness",
  "color_strip.composite.brightness.none": "— None —",
+  "color_strip.composite.processing": "Processing",
  "color_strip.composite.enabled": "Enabled",
  "color_strip.composite.error.min_layers": "At least 1 layer is required",
  "color_strip.composite.error.no_source": "Each layer must have a source selected",
@@ -1182,6 +1213,7 @@
  "streams.group.value": "Value Sources",
  "streams.group.sync": "Sync Clocks",
  "tree.group.picture": "Picture",
+  "tree.group.strip": "Color Strip",
  "tree.group.utility": "Utility",
  "value_source.group.title": "Value Sources",
  "value_source.select_type": "Select Value Source Type",
--- a/server/src/wled_controller/static/locales/ru.json
+++ b/server/src/wled_controller/static/locales/ru.json
@@ -169,6 +169,8 @@
  "device.led_type.hint": "RGB (3 канала) или RGBW (4 канала с выделенным белым)",
  "device.send_latency": "Задержка отправки (мс):",
  "device.send_latency.hint": "Имитация сетевой/серийной задержки на кадр в миллисекундах",
+  "device.css_processing_template": "Шаблон Обработки Полос:",
+  "device.css_processing_template.hint": "Шаблон обработки по умолчанию, применяемый ко всем цветовым полосам на этом устройстве",
  "device.mqtt_topic": "MQTT Топик:",
  "device.mqtt_topic.hint": "MQTT топик для публикации пиксельных данных (напр. mqtt://ledgrab/device/name)",
  "device.mqtt_topic.placeholder": "mqtt://ledgrab/device/гостиная",
@@ -366,6 +368,7 @@
  "streams.description": "Источники определяют конвейер захвата. Сырой источник захватывает экран с помощью шаблона захвата. Обработанный источник применяет постобработку к другому источнику. Назначайте источники устройствам.",
  "streams.group.raw": "Захват Экрана",
  "streams.group.processed": "Обработанные",
+  "streams.group.css_processing": "Шаблоны Обработки",
  "streams.group.color_strip": "Цветовые Полосы",
  "streams.group.audio": "Аудио",
  "streams.section.streams": "Источники",
@@ -434,12 +437,16 @@
  "filters.color_correction.desc": "Баланс белого и цветовая температура",
  "filters.filter_template": "Шаблон фильтров",
  "filters.filter_template.desc": "Встроить другой шаблон обработки",
+  "filters.css_filter_template": "Шаблон Фильтра Полос",
+  "filters.css_filter_template.desc": "Встроить другой шаблон обработки полос",
  "filters.frame_interpolation": "Интерполяция кадров",
  "filters.frame_interpolation.desc": "Сглаживание между кадрами",
  "filters.noise_gate": "Шумоподавление",
  "filters.noise_gate.desc": "Подавление малых изменений цвета ниже порога",
  "filters.palette_quantization": "Квантизация палитры",
  "filters.palette_quantization.desc": "Сокращение цветов до ограниченной палитры",
+  "filters.reverse": "Реверс",
+  "filters.reverse.desc": "Изменить порядок светодиодов на обратный",
  "postprocessing.description_label": "Описание (необязательно):",
  "postprocessing.description_placeholder": "Опишите этот шаблон...",
  "postprocessing.created": "Шаблон успешно создан",
@@ -455,6 +462,21 @@
  "postprocessing.test.running": "Тестирование шаблона фильтра...",
  "postprocessing.test.error.no_stream": "Пожалуйста, выберите источник",
  "postprocessing.test.error.failed": "Тест шаблона фильтра не удался",
+  "css_processing.title": "Шаблоны Обработки Полос",
+  "css_processing.add": "Добавить Шаблон Обработки Полос",
+  "css_processing.edit": "Редактировать Шаблон Обработки Полос",
+  "css_processing.name": "Имя Шаблона:",
+  "css_processing.name_placeholder": "Мой Шаблон Обработки Полос",
+  "css_processing.description_label": "Описание (необязательно):",
+  "css_processing.description_placeholder": "Опишите этот шаблон...",
+  "css_processing.created": "Шаблон обработки полос создан",
+  "css_processing.updated": "Шаблон обработки полос обновлён",
+  "css_processing.deleted": "Шаблон обработки полос удалён",
+  "css_processing.delete.confirm": "Вы уверены, что хотите удалить этот шаблон обработки полос?",
+  "css_processing.error.required": "Заполните все обязательные поля",
+  "css_processing.error.load": "Ошибка загрузки шаблона обработки полос",
+  "css_processing.error.delete": "Ошибка удаления шаблона обработки полос",
+  "css_processing.error.clone_failed": "Не удалось клонировать шаблон обработки полос",
  "device.button.stream_selector": "Настройки источника",
  "device.stream_settings.title": "Настройки источника",
  "device.stream_selector.label": "Источник:",
@@ -976,6 +998,14 @@
  "color_strip.candlelight.num_candles.hint": "Сколько независимых источников свечей вдоль ленты. Каждый мерцает по-своему.",
  "color_strip.candlelight.speed": "Скорость мерцания:",
  "color_strip.candlelight.speed.hint": "Скорость анимации мерцания. Большие значения — более быстрое, беспокойное пламя.",
+  "color_strip.type.processed": "Обработанный",
+  "color_strip.type.processed.desc": "Применить шаблон обработки к другому источнику",
+  "color_strip.type.processed.hint": "Оборачивает существующий источник цветовой полосы и пропускает его вывод через цепочку фильтров.",
+  "color_strip.processed.input": "Входной источник:",
+  "color_strip.processed.input.hint": "Источник цветовой полосы, вывод которого будет обработан",
+  "color_strip.processed.template": "Шаблон обработки:",
+  "color_strip.processed.template.hint": "Цепочка фильтров для применения к выводу входного источника",
+  "color_strip.processed.error.no_input": "Выберите входной источник",
  "color_strip.composite.layers": "Слои:",
  "color_strip.composite.layers.hint": "Наложение нескольких источников. Первый слой — нижний, последний — верхний. Каждый слой может иметь свой режим смешивания и прозрачность.",
  "color_strip.composite.add_layer": "+ Добавить слой",
@@ -992,6 +1022,7 @@
  "color_strip.composite.opacity": "Непрозрачность",
  "color_strip.composite.brightness": "Яркость",
  "color_strip.composite.brightness.none": "— Нет —",
+  "color_strip.composite.processing": "Обработка",
  "color_strip.composite.enabled": "Включён",
  "color_strip.composite.error.min_layers": "Необходим хотя бы 1 слой",
  "color_strip.composite.error.no_source": "Для каждого слоя должен быть выбран источник",
@@ -1131,6 +1162,7 @@
  "streams.group.value": "Источники значений",
  "streams.group.sync": "Часы синхронизации",
  "tree.group.picture": "Изображения",
+  "tree.group.strip": "Цветовые Полосы",
  "tree.group.utility": "Утилиты",
  "value_source.group.title": "Источники значений",
  "value_source.select_type": "Выберите тип источника значений",
--- a/server/src/wled_controller/static/locales/zh.json
+++ b/server/src/wled_controller/static/locales/zh.json
@@ -169,6 +169,8 @@
  "device.led_type.hint": "RGB（3通道）或 RGBW（4通道，带独立白色）",
  "device.send_latency": "发送延迟（毫秒）：",
  "device.send_latency.hint": "每帧模拟网络/串口延迟（毫秒）",
+  "device.css_processing_template": "色带处理模板：",
+  "device.css_processing_template.hint": "应用于此设备所有色带输出的默认处理模板",
  "device.mqtt_topic": "MQTT 主题：",
  "device.mqtt_topic.hint": "用于发布像素数据的 MQTT 主题路径（例如 mqtt://ledgrab/device/name）",
  "device.mqtt_topic.placeholder": "mqtt://ledgrab/device/客厅",
@@ -366,6 +368,7 @@
  "streams.description": "源定义采集管线。原始源使用采集模板从显示器采集。处理源对另一个源应用后处理。将源分配给设备。",
  "streams.group.raw": "屏幕采集",
  "streams.group.processed": "已处理",
+  "streams.group.css_processing": "处理模板",
  "streams.group.color_strip": "色带源",
  "streams.group.audio": "音频",
  "streams.section.streams": "源",
@@ -434,12 +437,16 @@
  "filters.color_correction.desc": "白平衡和色温调整",
  "filters.filter_template": "滤镜模板",
  "filters.filter_template.desc": "嵌入另一个处理模板",
+  "filters.css_filter_template": "色带滤镜模板",
+  "filters.css_filter_template.desc": "嵌入另一个色带处理模板",
  "filters.frame_interpolation": "帧插值",
  "filters.frame_interpolation.desc": "帧间混合以获得更平滑的输出",
  "filters.noise_gate": "噪声门",
  "filters.noise_gate.desc": "抑制低于阈值的细微色彩变化",
  "filters.palette_quantization": "调色板量化",
  "filters.palette_quantization.desc": "将颜色减少到有限调色板",
+  "filters.reverse": "反转",
+  "filters.reverse.desc": "反转色带中的LED顺序",
  "postprocessing.description_label": "描述（可选）：",
  "postprocessing.description_placeholder": "描述此模板...",
  "postprocessing.created": "模板创建成功",
@@ -455,6 +462,21 @@
  "postprocessing.test.running": "正在测试处理模板...",
  "postprocessing.test.error.no_stream": "请选择一个源",
  "postprocessing.test.error.failed": "处理模板测试失败",
+  "css_processing.title": "色带处理模板",
+  "css_processing.add": "添加色带处理模板",
+  "css_processing.edit": "编辑色带处理模板",
+  "css_processing.name": "模板名称：",
+  "css_processing.name_placeholder": "我的色带处理模板",
+  "css_processing.description_label": "描述（可选）：",
+  "css_processing.description_placeholder": "描述此模板...",
+  "css_processing.created": "色带处理模板已创建",
+  "css_processing.updated": "色带处理模板已更新",
+  "css_processing.deleted": "色带处理模板已删除",
+  "css_processing.delete.confirm": "确定要删除此色带处理模板吗？",
+  "css_processing.error.required": "请填写所有必填字段",
+  "css_processing.error.load": "加载色带处理模板出错",
+  "css_processing.error.delete": "删除色带处理模板出错",
+  "css_processing.error.clone_failed": "克隆色带处理模板失败",
  "device.button.stream_selector": "源设置",
  "device.stream_settings.title": "源设置",
  "device.stream_selector.label": "源：",
@@ -976,6 +998,14 @@
  "color_strip.candlelight.num_candles.hint": "灯带上独立蜡烛光源的数量。每支蜡烛有自己的闪烁模式。",
  "color_strip.candlelight.speed": "闪烁速度：",
  "color_strip.candlelight.speed.hint": "闪烁动画的速度。较高的值产生更快、更不安定的火焰。",
+  "color_strip.type.processed": "已处理",
+  "color_strip.type.processed.desc": "将处理模板应用于另一个源",
+  "color_strip.type.processed.hint": "包装现有色带源并通过滤镜链处理其输出。",
+  "color_strip.processed.input": "输入源：",
+  "color_strip.processed.input.hint": "将被处理的色带源",
+  "color_strip.processed.template": "处理模板：",
+  "color_strip.processed.template.hint": "应用于输入源输出的滤镜链",
+  "color_strip.processed.error.no_input": "请选择输入源",
  "color_strip.composite.layers": "图层：",
  "color_strip.composite.layers.hint": "叠加多个色带源。第一个图层在底部，最后一个在顶部。每个图层可以有自己的混合模式和不透明度。",
  "color_strip.composite.add_layer": "+ 添加图层",
@@ -992,6 +1022,7 @@
  "color_strip.composite.opacity": "不透明度",
  "color_strip.composite.brightness": "亮度",
  "color_strip.composite.brightness.none": "— 无 —",
+  "color_strip.composite.processing": "处理",
  "color_strip.composite.enabled": "启用",
  "color_strip.composite.error.min_layers": "至少需要 1 个图层",
  "color_strip.composite.error.no_source": "每个图层必须选择一个源",
@@ -1131,6 +1162,7 @@
  "streams.group.value": "值源",
  "streams.group.sync": "同步时钟",
  "tree.group.picture": "图片",
+  "tree.group.strip": "色带",
  "tree.group.utility": "工具",
  "value_source.group.title": "值源",
  "value_source.select_type": "选择值源类型",