@airnexus/node-red-contrib-matter-airnexus 0.2.4-airnexus.1

package/matter-bridge.html

@@ -0,0 +1,263 @@
+<style>
+    .matter-qr-tooltip {
+        position: absolute;
+        background: white;
+        border: 1px solid #999;
+        padding: 10px;
+        border-radius: 5px;
+        box-shadow: 0 2px 10px rgba(0,0,0,0.2);
+        z-index: 1000;
+        display: none;
+        text-align: center;
+        max-width: 400px;
+    }
+    .matter-qr-tooltip pre {
+        font-family: monospace;
+        font-size: 6px;
+        line-height: 1;
+        margin: 5px 0;
+    }
+    .matter-qr-tooltip .manual-code {
+        font-size: 14px;
+        font-weight: bold;
+        margin-top: 10px;
+    }
+</style>
+
+<script type="text/javascript">
+    RED.nodes.registerType('matter-dynamic-bridge', {
+        category: 'config',
+        defaults: {
+            name: {value: "Matter Bridge"},
+            vendorId: {value: "65521", required: true, validate: RED.validators.number()},
+            productId: {value: "32768", required: true, validate: RED.validators.number()},
+            vendorName: {value: "Node-RED"},
+            productName: {value: "Dynamic Matter Bridge"},
+            networkInterface: {value: ""},
+            storageLocation: {value: ""},
+            port: {value: "5540", validate: RED.validators.number()},
+            logLevel: {value: "INFO"}
+        },
+        label: function() {
+            return this.name || "Matter Bridge";
+        },
+        labelStyle: function() {
+            return this.name ? "node_label_italic" : "";
+        },
+        info: function() {
+            // Show QR code in node info panel
+            var info = "<p>Matter Bridge for dynamic devices.</p>";
+            
+            if (this.id) {
+                info += '<div id="bridge-info-qr-' + this.id + '"></div>';
+                
+                // Load QR code async
+                setTimeout(() => {
+                    $.getJSON('_matterbridge/qrcode/' + node.id, function(data) {
+                        if (data.qrCode && !data.commissioned) {
+                            var html = '<h3>Matter Pairing Code</h3>';
+                            if (data.qrSvg) {
+                                html += '<div style="text-align: center;">' + data.qrSvg + '</div>';
+                            } else {
+                                html += '<pre style="font-family: monospace; font-size: 6px; line-height: 1;">' + data.qrCode + '</pre>';
+                            }
+                            html += '<p><b>Manual Code: ' + data.manualCode + '</b></p>';
+                            $('#bridge-info-qr-' + node.id).html(html);
+                        } else if (data.commissioned) {
+                            $('#bridge-info-qr-' + node.id).html('<p><i>Bridge is commissioned</i></p>');
+                        }
+                    });
+                }, 100);
+            }
+            
+            return info;
+        },
+        oneditprepare: function() {
+            var node = this;
+            
+            // Create QR tooltip element
+            if (!$('#matter-qr-tooltip').length) {
+                $('body').append('<div id="matter-qr-tooltip" class="matter-qr-tooltip"></div>');
+            }
+            
+            // Setup QR display on hover
+            var configNodes = $(".red-ui-palette-node-config-list .red-ui-palette-node");
+            configNodes.each(function() {
+                var configNode = $(this);
+                if (configNode.data('node-id') === node.id) {
+                    configNode.hover(
+                        function(e) {
+                            // Mouse enter - show QR code
+                            $.getJSON('_matterbridge/qrcode/' + node.id, function(data) {
+                                if (data.qrCode && !data.commissioned) {
+                                    var tooltip = $('#matter-qr-tooltip');
+                                    var html = '<h4>Matter QR Code</h4>';
+                                    if (data.qrSvg) {
+                                        html += data.qrSvg;
+                                    } else {
+                                        html += '<pre>' + data.qrCode + '</pre>';
+                                    }
+                                    html += '<div class="manual-code">Code: ' + data.manualCode + '</div>';
+                                    tooltip.html(html);
+                                    tooltip.css({
+                                        left: e.pageX + 20,
+                                        top: e.pageY - 100
+                                    }).show();
+                                }
+                            });
+                        },
+                        function() {
+                            // Mouse leave - hide QR code
+                            $('#matter-qr-tooltip').hide();
+                        }
+                    );
+                }
+            });
+            
+            // Load network interfaces
+            $.getJSON('_matterbridge/interfaces', function(data) {
+                $("#node-config-input-networkInterface").empty();
+                $("#node-config-input-networkInterface").append('<option value="">Default</option>');
+                data.forEach(function(iface) {
+                    $("#node-config-input-networkInterface").append('<option value="' + iface + '">' + iface + '</option>');
+                });
+                $("#node-config-input-networkInterface").val($("#node-config-input-networkInterface").data('current'));
+            });
+            
+            // Store current value
+            $("#node-config-input-networkInterface").data('current', this.networkInterface);
+            
+            // Load QR code if node exists (simplified - only show if not commissioned)
+            if (node.id) {
+                $.getJSON('_matterbridge/qrcode/' + node.id, function(data) {
+                    if (data.qrCode && !data.commissioned) {
+                        if (data.qrSvg) {
+                            $("#matter-qr-code").html(data.qrSvg);
+                        } else {
+                            $("#matter-qr-code").html('<pre style="font-family: monospace; font-size: 6px; line-height: 1;">' + data.qrCode + '</pre>');
+                        }
+                        $("#matter-manual-code").text("Manual Code: " + data.manualCode);
+                        $("#matter-qr-container").show();
+                    } else if (data.commissioned) {
+                        $("#matter-commissioned-info").show();
+                        $("#matter-qr-container").hide();
+                    }
+                }).fail(function() {
+                    $("#matter-qr-container").hide();
+                });
+            }
+        }
+    });
+</script>
+
+<script type="text/x-red" data-template-name="matter-dynamic-bridge">
+    <div id="matter-qr-container" style="text-align: center; padding: 10px; display: none;">
+        <h3>Matter Pairing Code</h3>
+        <div id="matter-qr-code" style="text-align: center; margin: 10px 0;"></div>
+        <div id="matter-manual-code" style="margin-top: 10px;"></div>
+    </div>
+    
+    <div id="matter-commissioned-info" style="display: none; background: #e8f4f8; border: 1px solid #bee5eb; border-radius: 8px; padding: 20px; margin: 10px 0;">
+        <h3 style="margin-top: 0; color: #0c5460; text-align: center;">Device Commissioned</h3>
+        <p style="color: #0c5460; margin-bottom: 15px; text-align: center;">This bridge is already paired with a Matter controller.</p>
+        <div style="background: white; border-radius: 6px; padding: 15px;">
+            <p style="margin-top: 0; font-weight: bold; color: #333;">To add to another ecosystem:</p>
+            <ol style="margin: 10px 0 0 0; padding-left: 25px; color: #555;">
+                <li style="margin-bottom: 8px;">Open the existing controller app (e.g., Apple Home)</li>
+                <li style="margin-bottom: 8px;">Find this bridge device</li>
+                <li style="margin-bottom: 8px;">Use "Turn On Pairing Mode" or similar option</li>
+                <li style="margin-bottom: 0;">Pair with the new controller</li>
+            </ol>
+        </div>
+    </div>
+    
+    <div class="form-row">
+        <label for="node-config-input-name"><i class="fa fa-tag"></i> Name</label>
+        <input type="text" id="node-config-input-name" placeholder="Matter Bridge">
+    </div>
+    
+    <div class="form-row">
+        <label for="node-config-input-vendorId"><i class="fa fa-building"></i> Vendor ID</label>
+        <input type="text" id="node-config-input-vendorId" placeholder="65521">
+    </div>
+    
+    <div class="form-row">
+        <label for="node-config-input-productId"><i class="fa fa-barcode"></i> Product ID</label>
+        <input type="text" id="node-config-input-productId" placeholder="32768">
+    </div>
+    
+    <div class="form-row">
+        <label for="node-config-input-vendorName"><i class="fa fa-building-o"></i> Vendor Name</label>
+        <input type="text" id="node-config-input-vendorName" placeholder="Node-RED">
+    </div>
+    
+    <div class="form-row">
+        <label for="node-config-input-productName"><i class="fa fa-cube"></i> Product Name</label>
+        <input type="text" id="node-config-input-productName" placeholder="Dynamic Matter Bridge">
+    </div>
+    
+    <div class="form-row">
+        <label for="node-config-input-networkInterface"><i class="fa fa-sitemap"></i> Network Interface</label>
+        <select id="node-config-input-networkInterface" style="width:70%;">
+            <option value="">Default</option>
+        </select>
+    </div>
+    
+    <div class="form-row">
+        <label for="node-config-input-storageLocation"><i class="fa fa-folder"></i> Storage Location</label>
+        <input type="text" id="node-config-input-storageLocation" placeholder="Leave empty for default">
+    </div>
+    
+    <div class="form-row">
+        <label for="node-config-input-port"><i class="fa fa-plug"></i> Port</label>
+        <input type="text" id="node-config-input-port" placeholder="5540">
+    </div>
+    
+    <div class="form-row">
+        <label for="node-config-input-logLevel"><i class="fa fa-file-text"></i> Log Level</label>
+        <select id="node-config-input-logLevel" style="width:70%;">
+            <option value="FATAL">Fatal</option>
+            <option value="ERROR">Error</option>
+            <option value="WARN">Warning</option>
+            <option value="INFO" selected>Info</option>
+            <option value="DEBUG">Debug</option>
+        </select>
+    </div>
+</script>
+
+<script type="text/x-red" data-help-name="matter-dynamic-bridge">
+    <p>Matter Bridge configuration node for dynamic Matter devices.</p>
+    
+    <h3>Configuration</h3>
+    <dl class="message-properties">
+        <dt>Name <span class="property-type">string</span></dt>
+        <dd>Display name for the bridge</dd>
+        
+        <dt>Vendor ID <span class="property-type">number</span></dt>
+        <dd>Vendor ID (default: 65521 for testing)</dd>
+        
+        <dt>Product ID <span class="property-type">number</span></dt>
+        <dd>Product ID (default: 32768)</dd>
+        
+        <dt>Network Interface <span class="property-type">string</span></dt>
+        <dd>Network interface to use for Matter communication</dd>
+        
+        <dt>Storage Location <span class="property-type">string</span></dt>
+        <dd>Custom storage location for Matter data</dd>
+        
+        <dt>Port <span class="property-type">number</span></dt>
+        <dd>Port number for Matter server (default: 5540)</dd>
+    </dl>
+    
+    <h3>Details</h3>
+    <p>This node creates a Matter bridge that can host multiple dynamic Matter devices.</p>
+    
+    <h3>Multi-Admin Support</h3>
+    <p>The bridge supports Matter Multi-Admin, allowing you to connect it to multiple ecosystems simultaneously:</p>
+    <ul>
+        <li><b>First pairing:</b> Use the QR code shown when the bridge starts</li>
+        <li><b>Additional pairings:</b> Use your existing controller (HomeKit, Alexa, etc.) to enable pairing mode</li>
+        <li>You can pair with HomeKit, Alexa, Google Home, SmartThings, and other Matter controllers</li>
+        <li>All controllers will have local access to your devices</li>
+    </ul>
+</script>