Add Flip filter with bool option support and calibration UI polish

- New FlipFilter with horizontal/vertical bool options (np.fliplr/flipud)
- Add bool option type to filter system (base.py validate, app.js toggle UI)
- Rearrange calibration preview: direction toggle above LED count
- Normalize direction/offset control heights, brighten offset icon

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

server/src/wled_controller/core/filters/base.py

@@ -77,13 +77,16 @@ class PostprocessingFilter(ABC):
                 val = float(raw)
             elif opt_def.option_type == "int":
                 val = int(raw)
+            elif opt_def.option_type == "bool":
+                val = bool(raw) if not isinstance(raw, bool) else raw
             else:
                 val = raw
-            # Clamp to range
+            # Clamp to range (skip for bools)
-            if opt_def.min_value is not None and val < opt_def.min_value:
+            if opt_def.option_type != "bool":
-                val = opt_def.min_value
+                if opt_def.min_value is not None and val < opt_def.min_value:
-            if opt_def.max_value is not None and val > opt_def.max_value:
+                    val = opt_def.min_value
-                val = opt_def.max_value
+                if opt_def.max_value is not None and val > opt_def.max_value:
+                    val = opt_def.max_value
             cleaned[opt_def.key] = val
         return cleaned
 

server/src/wled_controller/core/filters/builtin.py

@@ -280,3 +280,43 @@ class AutoCropFilter(PostprocessingFilter):
         result = image_pool.acquire(cropped_h, cropped_w, channels)
         np.copyto(result, image[top:bottom, left:right])
         return result
+
+
+@FilterRegistry.register
+class FlipFilter(PostprocessingFilter):
+    """Flips the image horizontally and/or vertically."""
+
+    filter_id = "flip"
+    filter_name = "Flip"
+
+    @classmethod
+    def get_options_schema(cls) -> List[FilterOptionDef]:
+        return [
+            FilterOptionDef(
+                key="horizontal",
+                label="Horizontal",
+                option_type="bool",
+                default=False,
+                min_value=None,
+                max_value=None,
+                step=None,
+            ),
+            FilterOptionDef(
+                key="vertical",
+                label="Vertical",
+                option_type="bool",
+                default=False,
+                min_value=None,
+                max_value=None,
+                step=None,
+            ),
+        ]
+
+    def process_image(self, image: np.ndarray, image_pool: ImagePool) -> Optional[np.ndarray]:
+        h = self.options.get("horizontal", False)
+        v = self.options.get("vertical", False)
+        if h:
+            image[:] = np.fliplr(image)
+        if v:
+            image[:] = np.flipud(image)
+        return None

server/src/wled_controller/static/app.js

@@ -3808,15 +3808,26 @@ function renderModalFilterList() {
             for (const opt of filterDef.options_schema) {
                 const currentVal = fi.options[opt.key] !== undefined ? fi.options[opt.key] : opt.default;
                 const inputId = `filter-${index}-${opt.key}`;
-                html += `<div class="pp-filter-option">
+                if (opt.type === 'bool') {
-                    <label for="${inputId}">
+                    const checked = currentVal === true || currentVal === 'true';
-                        <span>${escapeHtml(opt.label)}:</span>
+                    html += `<div class="pp-filter-option pp-filter-option-bool">
-                        <span id="${inputId}-display">${currentVal}</span>
+                        <label for="${inputId}">
-                    </label>
+                            <span>${escapeHtml(opt.label)}</span>
-                    <input type="range" id="${inputId}"
+                            <input type="checkbox" id="${inputId}" ${checked ? 'checked' : ''}
-                        min="${opt.min_value}" max="${opt.max_value}" step="${opt.step}" value="${currentVal}"
+                                onchange="updateFilterOption(${index}, '${opt.key}', this.checked)">
-                        oninput="updateFilterOption(${index}, '${opt.key}', this.value); document.getElementById('${inputId}-display').textContent = this.value;">
+                        </label>
-                </div>`;
+                    </div>`;
+                } else {
+                    html += `<div class="pp-filter-option">
+                        <label for="${inputId}">
+                            <span>${escapeHtml(opt.label)}:</span>
+                            <span id="${inputId}-display">${currentVal}</span>
+                        </label>
+                        <input type="range" id="${inputId}"
+                            min="${opt.min_value}" max="${opt.max_value}" step="${opt.step}" value="${currentVal}"
+                            oninput="updateFilterOption(${index}, '${opt.key}', this.value); document.getElementById('${inputId}-display').textContent = this.value;">
+                    </div>`;
+                }
             }
         }
 
@@ -3873,7 +3884,9 @@ function updateFilterOption(filterIndex, optionKey, value) {
         const filterDef = _availableFilters.find(f => f.filter_id === fi.filter_id);
         if (filterDef) {
             const optDef = filterDef.options_schema.find(o => o.key === optionKey);
-            if (optDef && optDef.type === 'int') {
+            if (optDef && optDef.type === 'bool') {
+                fi.options[optionKey] = !!value;
+            } else if (optDef && optDef.type === 'int') {
                 fi.options[optionKey] = parseInt(value);
             } else {
                 fi.options[optionKey] = parseFloat(value);

server/src/wled_controller/static/index.html

@@ -82,16 +82,14 @@
                     <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>
-                            <div class="preview-screen-controls">
+                            <label class="offset-control" title="LED offset from LED 0 to start corner">
-                                <button type="button" class="direction-toggle" onclick="toggleDirection()" title="Toggle direction">
+                                <span>⊕</span>
-                                    <span id="direction-icon">↻</span> <span id="direction-label">CW</span>
+                                <input type="number" id="cal-offset" min="0" value="0" oninput="updateCalibrationPreview()">
-                                </button>
+                            </label>
-                                <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>
                         </div>
 
                         <!-- Edge bars with span controls and LED count inputs -->

server/src/wled_controller/static/locales/en.json

@@ -257,6 +257,7 @@
   "filters.downscaler": "Downscaler",
   "filters.pixelate": "Pixelate",
   "filters.auto_crop": "Auto Crop",
+  "filters.flip": "Flip",
   "postprocessing.description_label": "Description (optional):",
   "postprocessing.description_placeholder": "Describe this template...",
   "postprocessing.created": "Template created successfully",

server/src/wled_controller/static/locales/ru.json

@@ -257,6 +257,7 @@
   "filters.downscaler": "Уменьшение",
   "filters.pixelate": "Пикселизация",
   "filters.auto_crop": "Авто Обрезка",
+  "filters.flip": "Отражение",
   "postprocessing.description_label": "Описание (необязательно):",
   "postprocessing.description_placeholder": "Опишите этот шаблон...",
   "postprocessing.created": "Шаблон успешно создан",

server/src/wled_controller/static/style.css

@@ -1173,11 +1173,14 @@ input:-webkit-autofill:focus {
     display: flex;
     align-items: center;
     gap: 3px;
-    padding: 4px 8px;
+    height: 26px;
+    padding: 0 10px;
     background: rgba(255, 255, 255, 0.15);
     border: 1px solid rgba(255, 255, 255, 0.3);
     border-radius: 12px;
     font-size: 12px;
+    color: rgba(255, 255, 255, 0.9);
+    box-sizing: border-box;
     cursor: pointer;
     user-select: none;
 }
@@ -1499,12 +1502,15 @@ input:-webkit-autofill:focus {
     display: flex;
     align-items: center;
     gap: 4px;
-    padding: 4px 10px;
+    height: 26px;
+    padding: 0 10px;
     background: rgba(255, 255, 255, 0.15);
     border: 1px solid rgba(255, 255, 255, 0.3);
     border-radius: 12px;
     color: white;
+    font-family: inherit;
     font-size: 12px;
+    box-sizing: border-box;
     cursor: pointer;
     transition: background 0.2s;
     user-select: none;
@@ -1515,7 +1521,7 @@ input:-webkit-autofill:focus {
 }
 
 .direction-toggle #direction-icon {
-    font-size: 16px;
+    font-size: 14px;
 }
 
 .preview-hint {
@@ -2060,6 +2066,53 @@ input:-webkit-autofill:focus {
     width: 100%;
 }
 
+.pp-filter-option-bool label {
+    justify-content: space-between;
+    gap: 8px;
+    align-items: center;
+    cursor: pointer;
+    padding: 4px 0;
+}
+
+.pp-filter-option-bool input[type="checkbox"] {
+    appearance: none;
+    -webkit-appearance: none;
+    width: 34px;
+    min-width: 34px;
+    height: 18px;
+    background: var(--border-color);
+    border-radius: 9px;
+    position: relative;
+    cursor: pointer;
+    transition: background 0.2s;
+    order: 1;
+    margin: 0;
+}
+
+.pp-filter-option-bool input[type="checkbox"]::after {
+    content: '';
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    width: 14px;
+    height: 14px;
+    background: white;
+    border-radius: 50%;
+    transition: transform 0.2s;
+}
+
+.pp-filter-option-bool input[type="checkbox"]:checked {
+    background: var(--primary-color);
+}
+
+.pp-filter-option-bool input[type="checkbox"]:checked::after {
+    transform: translateX(16px);
+}
+
+.pp-filter-option-bool span {
+    order: 0;
+}
+
 .pp-add-filter-row {
     display: flex;
     gap: 8px;