node-red-contrib-knx-ultimate 7.1.4 → 8.0.2

package/nodes/matter-config.html

@@ -1,578 +0,0 @@
-<script type="text/javascript" src="resources/node-red-contrib-knx-ultimate/htmlUtils.js"></script>
-<script type="text/javascript" src="resources/node-red-contrib-knx-ultimate/matterQrScanner.js"></script>
-
-<script type="text/javascript">
-    RED.nodes.registerType('matter-config', {
-        category: 'config',
-        icon: 'node-matter-controller-icon.svg',
-        defaults: {
-            name: { value: "Matter Controller" },
-            fabricLabel: { value: "KNX-Ultimate" }
-        },
-        oneditprepare: function () {
-            // Go to the help panel
-            try {
-                RED.sidebar.show("help");
-            } catch (error) { }
-
-            var node = this;
-            var $pairButton = $("#matterPairButton");
-            var $pairingCode = $("#matter-pairing-code");
-            var $pairingName = $("#matter-pairing-name");
-            var $devicesBody = $("#matter-devices-body");
-            var $refreshDevices = $("#matterRefreshDevices");
-            var $pairSpinner = $("#matterPairSpinner");
-            var $pairProgress = $("#matter-pairing-progress");
-            var $pairProgressBar = $("#matter-pairing-progress-bar");
-            var $pairProgressPercent = $("#matter-pairing-progress-percent");
-            var $pairProgressDescription = $("#matter-pairing-progress-description");
-            var $pairProgressDevice = $("#matter-pairing-progress-device");
-            var $storageExport = $('#matter-storage-export');
-            var $storageImport = $('#matter-storage-import');
-            var $storageFile = $('#matter-storage-file');
-            var $qrCameraButton = $('#matter-qr-camera');
-            var $qrImageButton = $('#matter-qr-image');
-            var $qrImageFile = $('#matter-qr-image-file');
-            var $qrCameraPanel = $('#matter-qr-camera-panel');
-            var $qrCameraVideo = $('#matter-qr-camera-video');
-            var $qrCameraStop = $('#matter-qr-camera-stop');
-            var $qrCameraWarning = $('#matter-qr-camera-warning');
-            var qrScannerControls = null;
-            var qrScannerStarting = false;
-            var qrUtils = window.KNXUltimateMatterQrScanner;
-            var pairingProgressTimer = null;
-            var pairingOperationId = '';
-
-            function qrText(key) {
-                return RED._("node-red-contrib-knx-ultimate/matter-config:matter-config.properties." + key);
-            }
-
-            function setQrButtonsDisabled(disabled) {
-                $qrCameraButton.prop('disabled', disabled);
-                $qrImageButton.prop('disabled', disabled);
-            }
-
-            function stopQrCamera() {
-                qrScannerStarting = false;
-                if (qrScannerControls && typeof qrScannerControls.stop === 'function') {
-                    try { qrScannerControls.stop(); } catch (error) { }
-                }
-                qrScannerControls = null;
-                if (qrUtils) qrUtils.stopVideo($qrCameraVideo[0]);
-                $qrCameraPanel.hide();
-                setQrButtonsDisabled(false);
-            }
-
-            function notifyQrError(key, error) {
-                var message = qrText(key);
-                if (error && error.message) message += ': ' + error.message;
-                RED.notify(message, { type: 'error', fixed: true });
-            }
-
-            function applyQrResult(result, scannerControls) {
-                if (scannerControls && typeof scannerControls.stop === 'function') {
-                    try { scannerControls.stop(); } catch (error) { }
-                }
-                stopQrCamera();
-                var value = qrUtils ? qrUtils.normalizeMatterQrPayload(qrUtils.getResultText(result)) : null;
-                if (!value) {
-                    RED.notify(qrText('qr_invalid_matter'), { type: 'warning', fixed: true });
-                    return false;
-                }
-                $pairingCode.val(value).trigger('change').focus();
-                RED.notify(qrText('qr_found'), { type: 'success' });
-                $pairButton.trigger('click');
-                return true;
-            }
-
-            function loadQrDecoder() {
-                if (window.ZXingBrowser && window.ZXingBrowser.BrowserQRCodeReader) return Promise.resolve(window.ZXingBrowser);
-                if (window.knxUltimateMatterQrDecoderPromise) return window.knxUltimateMatterQrDecoderPromise;
-                window.knxUltimateMatterQrDecoderPromise = new Promise(function (resolve, reject) {
-                    var script = document.createElement('script');
-                    script.async = true;
-                    script.src = 'resources/node-red-contrib-knx-ultimate/zxing-browser-0.2.0.min.js';
-                    script.onload = function () {
-                        if (window.ZXingBrowser && window.ZXingBrowser.BrowserQRCodeReader) {
-                            resolve(window.ZXingBrowser);
-                        } else {
-                            reject(new Error(qrText('qr_decoder_unavailable')));
-                        }
-                    };
-                    script.onerror = function () {
-                        reject(new Error(qrText('qr_decoder_unavailable')));
-                    };
-                    document.head.appendChild(script);
-                }).catch(function (error) {
-                    window.knxUltimateMatterQrDecoderPromise = null;
-                    throw error;
-                });
-                return window.knxUltimateMatterQrDecoderPromise;
-            }
-
-            function createQrReader(ZXingBrowser) {
-                return qrUtils.enableInvertedQrFallback(new ZXingBrowser.BrowserQRCodeReader());
-            }
-
-            function scanQrImage(file) {
-                if (!file) return;
-                stopQrCamera();
-                setQrButtonsDisabled(true);
-                loadQrDecoder().then(function (ZXingBrowser) {
-                    var imageUrl = URL.createObjectURL(file);
-                    var reader = createQrReader(ZXingBrowser);
-                    return reader.decodeFromImageUrl(imageUrl).then(function (result) {
-                        applyQrResult(result);
-                    }).finally(function () {
-                        URL.revokeObjectURL(imageUrl);
-                    });
-                }).catch(function (error) {
-                    notifyQrError('qr_image_failed', error);
-                }).finally(function () {
-                    setQrButtonsDisabled(false);
-                });
-            }
-
-            function startQrCamera() {
-                var cameraStatus = qrUtils ? qrUtils.getCameraStatus(window, navigator) : { available: false, reason: 'unsupported' };
-                if (!cameraStatus.available) {
-                    var warningKey = cameraStatus.reason === 'insecure' ? 'qr_camera_insecure' : 'qr_camera_unsupported';
-                    RED.notify(qrText(warningKey), { type: 'warning', fixed: true });
-                    return;
-                }
-                stopQrCamera();
-                qrScannerStarting = true;
-                setQrButtonsDisabled(true);
-                $qrCameraPanel.show();
-                loadQrDecoder().then(function (ZXingBrowser) {
-                    if (!qrScannerStarting) return null;
-                    var reader = createQrReader(ZXingBrowser);
-                    return reader.decodeFromConstraints({
-                        audio: false,
-                        video: { facingMode: { ideal: 'environment' } }
-                    }, $qrCameraVideo[0], function (result, error, controls) {
-                        if (error) { /* ZXing keeps trying while the QR is outside the frame. */ }
-                        if (result) applyQrResult(result, controls);
-                    });
-                }).then(function (controls) {
-                    if (!controls) return;
-                    if (!qrScannerStarting) {
-                        try { controls.stop(); } catch (error) { }
-                        return;
-                    }
-                    qrScannerControls = controls;
-                    qrScannerStarting = false;
-                    $qrCameraButton.prop('disabled', true);
-                    $qrImageButton.prop('disabled', false);
-                }).catch(function (error) {
-                    stopQrCamera();
-                    if (qrUtils && qrUtils.isCameraPermissionError(error)) {
-                        notifyQrError('qr_camera_permission_denied');
-                    } else {
-                        notifyQrError('qr_camera_failed', error);
-                    }
-                });
-            }
-
-            var initialCameraStatus = qrUtils ? qrUtils.getCameraStatus(window, navigator) : { available: false, reason: 'unsupported' };
-            if (!initialCameraStatus.available) {
-                $qrCameraWarning.text(qrText(initialCameraStatus.reason === 'insecure' ? 'qr_camera_insecure' : 'qr_camera_unsupported')).show();
-            }
-
-            $qrCameraButton.on('click', startQrCamera);
-            $qrCameraStop.on('click', stopQrCamera);
-            $qrImageButton.on('click', function () {
-                stopQrCamera();
-                $qrImageFile.trigger('click');
-            });
-            $qrImageFile.on('change', function () {
-                var file = this.files && this.files[0];
-                this.value = '';
-                scanQrImage(file);
-            });
-            node._matterQrCleanup = function () {
-                stopQrCamera();
-                stopPairingProgress();
-            };
-
-            function storageExportUrl() {
-                var adminRoot = (RED.settings && typeof RED.settings.httpAdminRoot === 'string') ? RED.settings.httpAdminRoot : '/';
-                adminRoot = String(adminRoot || '/').trim();
-                adminRoot = adminRoot === '/' ? '' : '/' + adminRoot.replace(/^\/+|\/+$/g, '');
-                var params = new URLSearchParams();
-                params.set('serverId', node.id);
-                params.set('_', String(Date.now()));
-                try {
-                    var tokens = (RED.settings && typeof RED.settings.get === 'function') ? RED.settings.get('auth-tokens') : null;
-                    if (tokens && typeof tokens.access_token === 'string' && tokens.access_token.trim() !== '') params.set('access_token', tokens.access_token.trim());
-                } catch (error) { }
-                return adminRoot + '/KNXUltimateMatterStorageExport?' + params.toString();
-            }
-
-            function notifyPairingError(msg) {
-                var text = RED._("node-red-contrib-knx-ultimate/matter-config:matter-config.properties.pairing_failed") + ': ' + (msg || '');
-                try { console.error('[matter-config] ' + text); } catch (error) { }
-                RED.notify(text, {
-                    type: 'error',
-                    fixed: true,
-                    modal: false
-                });
-            }
-
-            function setPairingProgress(data) {
-                if (!data) return;
-                var percent = Number(data.percent);
-                if (!isFinite(percent)) percent = 0;
-                percent = Math.max(0, Math.min(100, Math.round(percent)));
-                $pairProgress.attr('aria-valuenow', percent);
-                $pairProgressBar.css('width', percent + '%');
-                $pairProgressPercent.text(percent + '%');
-                if (data.message) $pairProgressDescription.text(data.message);
-                if (data.device && data.device.productName) {
-                    var details = data.device.productName;
-                    if (data.device.vendorId !== undefined) details += ' · VID ' + data.device.vendorId;
-                    if (data.device.productId !== undefined) details += ' · PID ' + data.device.productId;
-                    $pairProgressDevice.text(details).show();
-                }
-            }
-
-            function stopPairingProgress() {
-                if (pairingProgressTimer !== null) clearInterval(pairingProgressTimer);
-                pairingProgressTimer = null;
-                pairingOperationId = '';
-            }
-
-            function startPairingProgress(operationId) {
-                stopPairingProgress();
-                pairingOperationId = operationId;
-                $pairProgressDevice.empty().hide();
-                setPairingProgress({ percent: 2, message: 'Preparing Matter commissioning…' });
-                pairingProgressTimer = setInterval(function () {
-                    var activeOperationId = pairingOperationId;
-                    if (!activeOperationId) return;
-                    $.getJSON('KNXUltimateMatterPairProgress?serverId=' + encodeURIComponent(node.id) + '&operationId=' + encodeURIComponent(activeOperationId) + '&_=' + Date.now(), function (data) {
-                        if (activeOperationId !== pairingOperationId || !data || data.operationId !== activeOperationId) return;
-                        setPairingProgress(data);
-                    });
-                }, 400);
-            }
-
-            function renderDevices(devices) {
-                $devicesBody.empty();
-                if (!Array.isArray(devices) || devices.length === 0) {
-                    $devicesBody.append('<tr><td colspan="5" style="text-align:center; color:#999;">' + RED._("node-red-contrib-knx-ultimate/matter-config:matter-config.properties.no_devices") + '</td></tr>');
-                    return;
-                }
-                devices.forEach(function (dev) {
-                    var stateColor = dev.connectionState === 'connected' ? '#1b7d33' : '#c00';
-                    var $tr = $('<tr></tr>');
-                    $tr.append($('<td></td>').text(dev.name || ''));
-                    $tr.append($('<td></td>').text((dev.vendorName || '') + (dev.productName ? ' ' + dev.productName : '')));
-                    $tr.append($('<td style="font-family:monospace;"></td>').text(dev.nodeId));
-                    $tr.append($('<td></td>').append($('<span></span>').css('color', stateColor).text(dev.connectionState)));
-                    var $rename = $('<button type="button" class="red-ui-button" style="margin-right:6px; color:#1b7d33; border-color:#1b7d33;" title="' + (RED._("node-red-contrib-knx-ultimate/matter-config:matter-config.properties.rename_button") || 'Rename') + '"><i class="fa fa-pencil"></i></button>');
-                    $rename.on('click', function () {
-                        var currentName = dev.name || '';
-                        var promptMsg = RED._("node-red-contrib-knx-ultimate/matter-config:matter-config.properties.rename_prompt") || 'New device name';
-                        var newName = window.prompt(promptMsg, currentName);
-                        if (newName === null) return;
-                        newName = (newName || '').trim();
-                        if (newName === '' || newName === currentName) return;
-                        $rename.prop('disabled', true);
-                        $.getJSON('KNXUltimateMatterRename?serverId=' + node.id + '&nodeId=' + encodeURIComponent(dev.nodeId) + '&name=' + encodeURIComponent(newName), function (data) {
-                            if (data && data.error) {
-                                RED.notify(data.error, { type: 'error', fixed: true });
-                            } else {
-                                RED.notify(RED._("node-red-contrib-knx-ultimate/matter-config:matter-config.properties.rename_ok") || 'Device renamed', { type: 'success' });
-                            }
-                            loadDevices();
-                        }).fail(function (jqXHR, textStatus, errorThrown) {
-                            RED.notify('Rename failed: ' + (errorThrown || textStatus), { type: 'error', fixed: true });
-                            $rename.prop('disabled', false);
-                        });
-                    });
-                    var $unpair = $('<button type="button" class="red-ui-button" style="color:#c00; border-color:#c00;"><i class="fa fa-trash"></i></button>');
-                    $unpair.on('click', function () {
-                        var confirmMsg = RED._("node-red-contrib-knx-ultimate/matter-config:matter-config.properties.unpair_confirm") + ' "' + (dev.name || dev.nodeId) + '"?';
-                        if (!window.confirm(confirmMsg)) return;
-                        $unpair.prop('disabled', true);
-                        $.getJSON('KNXUltimateMatterUnpair?serverId=' + node.id + '&nodeId=' + encodeURIComponent(dev.nodeId), function (data) {
-                            if (data && data.error) {
-                                RED.notify(data.error, { type: 'error' });
-                            } else {
-                                RED.notify(RED._("node-red-contrib-knx-ultimate/matter-config:matter-config.properties.unpair_ok"), { type: 'success' });
-                            }
-                            loadDevices();
-                        }).fail(function (jqXHR, textStatus, errorThrown) {
-                            RED.notify('Unpair failed: ' + (errorThrown || textStatus), { type: 'error' });
-                            $unpair.prop('disabled', false);
-                        });
-                    });
-                    $tr.append($('<td style="text-align:right;"></td>').append($rename).append($unpair));
-                    $devicesBody.append($tr);
-                });
-            }
-
-            function loadDevices() {
-                $devicesBody.empty();
-                $devicesBody.append('<tr><td colspan="5" style="text-align:center;"><i class="fa fa-circle-notch fa-spin"></i></td></tr>');
-                $.getJSON('KNXUltimateMatterGetNodes?serverId=' + node.id + '&_=' + Date.now(), function (data) {
-                    if (data && data.error) {
-                        $devicesBody.empty();
-                        $devicesBody.append('<tr><td colspan="5" style="text-align:center; color:#c00;">' + data.error + '</td></tr>');
-                        return;
-                    }
-                    renderDevices(data && data.devices ? data.devices : []);
-                }).fail(function () {
-                    $devicesBody.empty();
-                    $devicesBody.append('<tr><td colspan="5" style="text-align:center; color:#999;">' + RED._("node-red-contrib-knx-ultimate/matter-config:matter-config.properties.deploy_first") + '</td></tr>');
-                });
-            }
-
-            $refreshDevices.on('click', function () {
-                loadDevices();
-            });
-
-            $pairButton.on('click', function () {
-                var code = ($pairingCode.val() || '').trim();
-                var desiredName = ($pairingName.val() || '').trim();
-                if (code === '') {
-                    RED.notify(RED._("node-red-contrib-knx-ultimate/matter-config:matter-config.properties.pairing_code_missing"), { type: 'warning' });
-                    return;
-                }
-                $pairButton.prop('disabled', true);
-                var operationId = 'matter-' + Date.now() + '-' + Math.random().toString(36).slice(2, 10);
-                var pairingSucceeded = false;
-                startPairingProgress(operationId);
-                $pairSpinner.show();
-                $.ajax({
-                    url: 'KNXUltimateMatterPair?serverId=' + encodeURIComponent(node.id) + '&operationId=' + encodeURIComponent(operationId) + '&code=' + encodeURIComponent(code) + (desiredName !== '' ? '&name=' + encodeURIComponent(desiredName) : ''),
-                    dataType: 'json',
-                    timeout: 180000
-                }).done(function (data) {
-                    if (data && data.error) {
-                        notifyPairingError(data.error);
-                    } else {
-                        pairingSucceeded = true;
-                        setPairingProgress({ percent: 100, message: 'Matter commissioning completed successfully.' });
-                        var pairedName = data.name || data.productName || data.nodeId;
-                        RED.notify(RED._("node-red-contrib-knx-ultimate/matter-config:matter-config.properties.pairing_ok") + ' ' + pairedName + ' (Node ID ' + data.nodeId + ')', { type: 'success' });
-                        if (data.renameError) RED.notify(data.renameError, { type: 'warning', fixed: true });
-                        $pairingCode.val('');
-                        $pairingName.val('');
-                        loadDevices();
-                    }
-                }).fail(function (jqXHR, textStatus, errorThrown) {
-                    var msg = '';
-                    try { msg = jqXHR.responseJSON.error; } catch (e) { msg = errorThrown || textStatus; }
-                    notifyPairingError(msg);
-                }).always(function () {
-                    stopPairingProgress();
-                    $pairButton.prop('disabled', false);
-                    if (pairingSucceeded) setTimeout(function () { $pairSpinner.hide(); }, 350);
-                    else $pairSpinner.hide();
-                });
-            });
-
-            loadDevices();
-
-            $storageExport.on('click', function () {
-                window.location = storageExportUrl();
-            });
-            $storageImport.on('click', function () { $storageFile.trigger('click'); });
-            $storageFile.on('change', function () {
-                var file = this.files && this.files[0];
-                this.value = '';
-                if (!file || !window.confirm(RED._('node-red-contrib-knx-ultimate/matter-config:matter-config.properties.storage_import_confirm'))) return;
-                var reader = new FileReader();
-                reader.onload = function () {
-                    var backup;
-                    try { backup = JSON.parse(reader.result); } catch (error) { RED.notify(error.message, { type: 'error' }); return; }
-                    $storageImport.prop('disabled', true);
-                    $.ajax({
-                        url: 'KNXUltimateMatterStorageImport?serverId=' + encodeURIComponent(node.id),
-                        method: 'POST', contentType: 'application/json', data: JSON.stringify(backup)
-                    }).done(function () {
-                        RED.notify(RED._('node-red-contrib-knx-ultimate/matter-config:matter-config.properties.storage_import_ok'), { type: 'success' });
-                        loadDevices();
-                    }).fail(function (xhr) {
-                        RED.notify((xhr.responseJSON && xhr.responseJSON.error) || xhr.statusText, { type: 'error', fixed: true });
-                    }).always(function () { $storageImport.prop('disabled', false); });
-                };
-                reader.readAsText(file);
-            });
-        },
-        oneditsave: function () {
-            if (typeof this._matterQrCleanup === 'function') this._matterQrCleanup();
-            delete this._matterQrCleanup;
-            // Return to the info tab
-            try {
-                RED.sidebar.show("info");
-            } catch (error) { }
-        },
-        oneditcancel: function () {
-            if (typeof this._matterQrCleanup === 'function') this._matterQrCleanup();
-            delete this._matterQrCleanup;
-        },
-        oneditdelete: function () {
-            if (typeof this._matterQrCleanup === 'function') this._matterQrCleanup();
-            delete this._matterQrCleanup;
-        },
-        label: function () {
-            return this.name || "Matter Controller";
-        }
-    });
-</script>
-
-<script type="text/html" data-template-name="matter-config">
-    <div class="form-row knx-ultimate-v8-upgrade-row">
-        <button type="button" class="red-ui-button knx-ultimate-v8-upgrade-button" data-i18n="[title]node-red-contrib-knx-ultimate/knxUltimateUtility:knxUltimateUtility.v8_upgrade.button_title">
-            <i class="fa fa-arrow-circle-up" aria-hidden="true"></i>
-            <span data-i18n="node-red-contrib-knx-ultimate/knxUltimateUtility:knxUltimateUtility.v8_upgrade.button"></span>
-        </button>
-    </div>
-  <div class="form-row" style="margin-bottom:10px;">
-    <span style="color:#ff0000"><i class="fa fa-youtube"></i></span>&nbsp;<a target="_blank" href="https://www.youtube.com/playlist?list=PL9Yh1bjbLAYrU8PsVhW4xzEug2WtVFv3E"><b>KNX-Ultimate video tutorials (YouTube playlist)</b></a>
-  </div>
-
-  <div class="form-row">
-    <p align="center" style="margin:8px 0;">
-      <svg width="70" height="77" viewBox="0 8 40 44" xmlns="http://www.w3.org/2000/svg" aria-label="Matter" style="vertical-align:middle;">
-        <g fill="currentColor" stroke="none">
-          <circle cx="20" cy="30" r="4.5"/>
-          <g>
-            <rect x="18.4" y="9" width="3.2" height="11"/>
-            <path d="M 14.5 18.5 L 25.5 18.5 L 20 25.5 Z"/>
-          </g>
-          <g transform="rotate(120 20 30)">
-            <rect x="18.4" y="9" width="3.2" height="11"/>
-            <path d="M 14.5 18.5 L 25.5 18.5 L 20 25.5 Z"/>
-          </g>
-          <g transform="rotate(240 20 30)">
-            <rect x="18.4" y="9" width="3.2" height="11"/>
-            <path d="M 14.5 18.5 L 25.5 18.5 L 20 25.5 Z"/>
-          </g>
-        </g>
-      </svg>
-      <br/>
-      <span style="font-size:18px; font-weight:600; letter-spacing:1px;" data-i18n="matter-config.properties.title"></span>
-    </p>
-  </div>
-
-  <div class="form-row">
-    <label for="node-config-input-name">
-      <i class="fa fa-tag"></i>
-      <span data-i18n="matter-config.properties.node-config-input-name"></span>
-    </label>
-    <input type="text" id="node-config-input-name">
-  </div>
-
-  <div class="form-row">
-    <label for="node-config-input-fabricLabel">
-      <i class="fa fa-id-card"></i>
-      <span data-i18n="matter-config.properties.fabric_label"></span>
-    </label>
-    <input type="text" id="node-config-input-fabricLabel" placeholder="KNX-Ultimate">
-  </div>
-
-  <hr/>
-
-  <div class="form-row">
-    <b><i class="fa fa-qrcode"></i>&nbsp;<span data-i18n="matter-config.properties.pairing_title"></span></b>
-  </div>
-
-  <div class="form-row">
-    <label for="matter-pairing-name">
-      <i class="fa fa-tag"></i>
-      <span data-i18n="matter-config.properties.pairing_name"></span>
-    </label>
-    <input type="text" id="matter-pairing-name" placeholder="Kitchen plug" style="width:250px;">
-  </div>
-
-  <div class="form-row">
-    <label>
-      <i class="fa fa-qrcode"></i>
-      <span data-i18n="matter-config.properties.qr_acquire"></span>
-    </label>
-    <button type="button" id="matter-qr-camera" class="red-ui-button">
-      <i class="fa fa-camera"></i>&nbsp;<span data-i18n="matter-config.properties.qr_scan_camera"></span>
-    </button>
-    <button type="button" id="matter-qr-image" class="red-ui-button">
-      <i class="fa fa-image"></i>&nbsp;<span data-i18n="matter-config.properties.qr_scan_image"></span>
-    </button>
-    <input type="file" id="matter-qr-image-file" accept="image/*" style="display:none;">
-  </div>
-
-  <div class="form-row" id="matter-qr-camera-warning" role="status" style="display:none; margin-left:105px; width:calc(100% - 105px); color:#b36b00;"></div>
-
-  <div class="form-row" id="matter-qr-camera-panel" style="display:none; margin-left:105px; width:calc(100% - 105px);">
-    <video id="matter-qr-camera-video" autoplay muted playsinline style="display:block; width:100%; max-width:430px; max-height:300px; background:#111; border-radius:4px; object-fit:cover;"></video>
-    <button type="button" id="matter-qr-camera-stop" class="red-ui-button" style="margin-top:6px;">
-      <i class="fa fa-stop"></i>&nbsp;<span data-i18n="matter-config.properties.qr_stop_camera"></span>
-    </button>
-  </div>
-
-  <div class="form-row">
-    <label for="matter-pairing-code">
-      <i class="fa fa-key"></i>
-      <span data-i18n="matter-config.properties.pairing_code"></span>
-    </label>
-    <input type="text" id="matter-pairing-code" placeholder="3497-011-2332 or MT:Y.K90...." style="width:250px;">
-    <button type="button" id="matterPairButton" class="red-ui-button" style="margin-left:6px; color:#1b7d33; border-color:#1b7d33;">
-      <i class="fa fa-link"></i>&nbsp;<span data-i18n="matter-config.properties.pair_button"></span>
-    </button>
-  </div>
-  <hr/>
-
-  <div class="form-row">
-    <b><i class="fa fa-microchip"></i>&nbsp;<span data-i18n="matter-config.properties.devices_title"></span></b>
-    <button type="button" id="matterRefreshDevices" class="red-ui-button" style="margin-left:6px; color:#1b7d33; border-color:#1b7d33;">
-      <i class="fa fa-refresh"></i>
-    </button>
-  </div>
-
-  <div class="form-row">
-    <table style="width:100%; border-collapse:collapse;" class="red-ui-editableList">
-      <thead>
-        <tr style="border-bottom:1px solid #ccc; text-align:left;">
-          <th data-i18n="matter-config.properties.col_name"></th>
-          <th data-i18n="matter-config.properties.col_product"></th>
-          <th>Node ID</th>
-          <th data-i18n="matter-config.properties.col_state"></th>
-          <th></th>
-        </tr>
-      </thead>
-      <tbody id="matter-devices-body"></tbody>
-    </table>
-  </div>
-
-  <hr/>
-
-  <div class="form-row">
-    <b><i class="fa fa-database"></i>&nbsp;<span data-i18n="matter-config.properties.storage_title"></span></b>
-    <button type="button" id="matter-storage-export" class="red-ui-button" style="margin-left:8px;"><i class="fa fa-download"></i>&nbsp;<span data-i18n="matter-config.properties.storage_export"></span></button>
-    <button type="button" id="matter-storage-import" class="red-ui-button"><i class="fa fa-upload"></i>&nbsp;<span data-i18n="matter-config.properties.storage_import"></span></button>
-    <input type="file" id="matter-storage-file" accept="application/json,.json" style="display:none;">
-  </div>
-
-  <div id="matterPairSpinner" role="alertdialog" aria-modal="true" aria-labelledby="matter-pairing-overlay-message"
-       style="display:none; position:fixed; inset:0; z-index:100000; background:rgba(20, 24, 28, 0.72); cursor:wait;">
-    <div style="position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:460px; max-width:80vw; padding:28px 34px; border-radius:8px; background:#fff; color:#333; text-align:center; box-shadow:0 8px 30px rgba(0,0,0,0.4);">
-      <strong id="matter-pairing-overlay-message" data-i18n="matter-config.properties.pairing_wait" style="display:block; margin-bottom:18px; font-size:16px;"></strong>
-      <div id="matter-pairing-progress" role="progressbar" aria-label="Matter commissioning progress" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"
-           style="position:relative; width:100%; height:20px; overflow:hidden; border-radius:10px; background:#66717a; box-shadow:inset 0 1px 3px rgba(0,0,0,0.22);">
-        <div id="matter-pairing-progress-bar" style="width:0; height:100%; border-radius:10px; background:#1b7d33; transition:width 250ms ease;"></div>
-        <span id="matter-pairing-progress-percent" style="position:absolute; inset:0; color:#fff; font-size:12px; font-weight:bold; line-height:20px; text-shadow:0 1px 2px #000;">0%</span>
-      </div>
-      <div id="matter-pairing-progress-description" aria-live="polite" style="min-height:20px; margin-top:14px; font-size:14px; line-height:20px;">Preparing Matter commissioning…</div>
-      <div id="matter-pairing-progress-device" style="display:none; margin-top:7px; color:#666; font-size:12px;"></div>
-    </div>
-  </div>
-
-  <br/>
-  <br/>
-  <br/>
-  <br/>
-  <br/>
-  <br/>
-</script>