feat(display): double-sided mode — mirror one screen across the panel chain (#375)

* feat(display): add double-sided mode to mirror one screen across the panel chain

Renders a plugin once at a logical (per-screen) size, then tiles the
rendered frame across the full physical chain so two (or more) panels show
identical content. A 128x32 chain configured with 2 copies drives two 64x32
screens; vertical axis splits parallel outputs instead of the chain.

Plugins size themselves from matrix.width/height, so a thin _LogicalMatrix
proxy reports the logical size while delegating every real operation
(CreateFrameCanvas, SwapOnVSync, brightness, Clear) to the physical matrix —
no plugin changes required. Duplication is a single PIL paste per copy in
update_display(), so render cost is unchanged.

Config: display.double_sided { enabled, copies, axis }. Invalid config
(non-divisible dimension, bad axis/copies) logs a warning and falls back to
single-screen rather than failing to light up.

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

* feat(web): expose double-sided display config in the settings UI

Adds a Double-Sided Display section to the Display settings page (enabled
checkbox, copies, horizontal/vertical axis) and wires the save handler to
persist it under display.double_sided. Validates copies (2-8) and axis,
returning 400 on bad input; an omitted checkbox is saved as disabled.
Like the other hardware fields, changes take effect after a display restart.

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

* refactor(display): add type hints and docstrings to double-sided proxy

Addresses CodeRabbit nits: sort _LogicalMatrix.__slots__ (Ruff RUF023),
annotate the proxy's __init__/properties/dunders and _resolve_double_sided's
return type, and add docstrings to the property/dunder methods.

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

---------

Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>

web_interface/blueprints/api_v3.py

@@ -773,6 +773,33 @@ def save_main_config():
                     current_config['display']['dynamic_duration'] = {}
                 current_config['display']['dynamic_duration']['max_duration_seconds'] = int(data['max_dynamic_duration_seconds'])
 
+        # Handle double-sided display settings
+        double_sided_fields = ['double_sided_enabled', 'double_sided_copies', 'double_sided_axis']
+        if any(k in data for k in double_sided_fields):
+            if 'display' not in current_config:
+                current_config['display'] = {}
+            if 'double_sided' not in current_config['display']:
+                current_config['display']['double_sided'] = {}
+            ds_config = current_config['display']['double_sided']
+
+            # Enabled checkbox: omitted from the form when unchecked.
+            ds_config['enabled'] = _coerce_to_bool(data.get('double_sided_enabled'))
+
+            if 'double_sided_copies' in data and data['double_sided_copies'] not in ('', None):
+                try:
+                    copies = int(data['double_sided_copies'])
+                except (ValueError, TypeError):
+                    return jsonify({'status': 'error', 'message': "Double-sided copies must be an integer"}), 400
+                if not (2 <= copies <= 8):
+                    return jsonify({'status': 'error', 'message': "Double-sided copies must be between 2 and 8"}), 400
+                ds_config['copies'] = copies
+
+            if 'double_sided_axis' in data:
+                axis = data['double_sided_axis']
+                if axis not in ('horizontal', 'vertical'):
+                    return jsonify({'status': 'error', 'message': "Double-sided axis must be 'horizontal' or 'vertical'"}), 400
+                ds_config['axis'] = axis
+
         # Handle Vegas scroll mode settings
         vegas_fields = ['vegas_scroll_enabled', 'vegas_scroll_speed', 'vegas_separator_width',
                        'vegas_target_fps', 'vegas_buffer_ahead', 'vegas_plugin_order', 'vegas_excluded_plugins']

web_interface/templates/v3/partials/display.html

@@ -258,6 +258,48 @@
             </div>
         </div>
 
+        <!-- Double-Sided Display -->
+        <div class="bg-gray-50 rounded-lg p-4">
+            <h3 class="text-md font-medium text-gray-900 mb-1">Double-Sided Display</h3>
+            <p class="text-sm text-gray-600 mb-4">Show the same content on every panel in the chain &mdash; e.g. two 64&times;32 panels mirrored, or four panels as two identical screens. Rendered once and duplicated, so it adds no extra CPU. Takes effect after a display restart.</p>
+
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <div class="form-group">
+                    <label class="flex items-center gap-2">
+                        <input type="checkbox"
+                               id="double_sided_enabled"
+                               name="double_sided_enabled"
+                               value="true"
+                               {% if main_config.display.get('double_sided', {}).get('enabled') %}checked{% endif %}
+                               class="form-control h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
+                        <span class="text-sm font-medium text-gray-700">Enabled</span>
+                    </label>
+                    <p class="mt-1 text-sm text-gray-600">Mirror one screen across all panels.</p>
+                </div>
+
+                <div class="form-group">
+                    <label for="double_sided_copies" class="block text-sm font-medium text-gray-700">Copies</label>
+                    <input type="number"
+                           id="double_sided_copies"
+                           name="double_sided_copies"
+                           value="{{ main_config.display.get('double_sided', {}).get('copies', 2) }}"
+                           min="2"
+                           max="8"
+                           class="form-control">
+                    <p class="mt-1 text-sm text-gray-600">Number of identical screens. Must divide the panel evenly.</p>
+                </div>
+
+                <div class="form-group">
+                    <label for="double_sided_axis" class="block text-sm font-medium text-gray-700">Split Axis</label>
+                    <select id="double_sided_axis" name="double_sided_axis" class="form-control">
+                        <option value="horizontal" {% if main_config.display.get('double_sided', {}).get('axis', 'horizontal') == 'horizontal' %}selected{% endif %}>Horizontal &mdash; chained panels (side by side)</option>
+                        <option value="vertical" {% if main_config.display.get('double_sided', {}).get('axis', 'horizontal') == 'vertical' %}selected{% endif %}>Vertical &mdash; parallel chains (stacked)</option>
+                    </select>
+                    <p class="mt-1 text-sm text-gray-600">Horizontal splits the chain; vertical splits parallel outputs.</p>
+                </div>
+            </div>
+        </div>
+
         <!-- Display Options -->
         <div class="bg-gray-50 rounded-lg p-4">
             <h3 class="text-md font-medium text-gray-900 mb-4">Display Options</h3>