iobroker.mywebui 1.42.1 → 1.42.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "iobroker.mywebui",
-  "version": "1.42.1",
+  "version": "1.42.3",
   "description": "ioBroker mywebui - Custom edited mywebui by gokturk413 with 3D Editor",
   "type": "module",
   "main": "dist/backend/main.js",

package/www/dist/frontend/config/IobrokerWebui3DScreenEditor.js

@@ -6,6 +6,9 @@ export class IobrokerWebui3DScreenEditor extends BaseCustomWebComponentConstruct
         <div id="editor-container" style="width:100%;height:100%;display:flex;flex-direction:column;overflow:hidden;">
             <div id="toolbar" style="height:40px;background:#2a2a2a;border-bottom:1px solid #444;display:flex;align-items:center;padding:0 10px;gap:10px;">
                 <button id="saveBtn" style="padding:5px 15px;background:#0078d4;color:white;border:none;cursor:pointer;border-radius:3px;">Save</button>
+                <button id="addAssetBtn" style="padding:5px 15px;background:#28a745;color:white;border:none;cursor:pointer;border-radius:3px;">+ Asset</button>
+                <button id="addLightBtn" style="padding:5px 15px;background:#ffa500;color:white;border:none;cursor:pointer;border-radius:3px;">+ Light</button>
+                <input id="fileInput" type="file" accept=".glb,.gltf,.fbx,.obj" style="display:none;">
                 <button id="undoBtn" style="padding:5px 15px;background:#444;color:#aaa;border:none;cursor:pointer;border-radius:3px;">↶ Undo</button>
                 <button id="redoBtn" style="padding:5px 15px;background:#444;color:#aaa;border:none;cursor:pointer;border-radius:3px;">↷ Redo</button>
                 <div style="flex:1;"></div>
@@ -13,9 +16,15 @@ export class IobrokerWebui3DScreenEditor extends BaseCustomWebComponentConstruct
                 <button id="axesToggle" style="padding:5px 10px;background:#444;color:#aaa;border:none;cursor:pointer;border-radius:3px;">Axes</button>
             </div>
             <div id="mainContent" style="flex:1;display:flex;overflow:hidden;">
-                <div id="leftPanel" style="width:250px;background:#1e1e1e;border-right:1px solid #444;overflow:auto;">
-                    <div style="padding:10px;font-weight:bold;color:#aaa;border-bottom:1px solid #444;">Scene Tree</div>
-                    <div id="sceneTree" style="padding:10px;"></div>
+                <div id="leftPanel" style="width:280px;background:#1e1e1e;border-right:1px solid #444;overflow:auto;display:flex;flex-direction:column;">
+                    <div style="display:flex;border-bottom:1px solid #444;">
+                        <button id="treeTab" style="flex:1;padding:10px;background:#2a2a2a;color:#0f0;border:none;cursor:pointer;font-weight:bold;">Scene</button>
+                        <button id="assetsTab" style="flex:1;padding:10px;background:#1e1e1e;color:#aaa;border:none;cursor:pointer;">Assets</button>
+                    </div>
+                    <div id="sceneTree" style="padding:10px;flex:1;overflow:auto;"></div>
+                    <div id="assetsList" style="padding:10px;flex:1;overflow:auto;display:none;">
+                        <div id="assetsListContent" style="color:#aaa;font-size:12px;">No assets loaded</div>
+                    </div>
                 </div>
                 <div id="viewport" style="flex:1;background:#333;position:relative;overflow:hidden;"></div>
                 <div id="rightPanel" style="width:300px;background:#1e1e1e;border-left:1px solid #444;overflow:auto;">
@@ -366,8 +375,18 @@ export class IobrokerWebui3DScreenEditor extends BaseCustomWebComponentConstruct
 
             for (const light of this.sceneData.lights) {
                 const itemDiv = document.createElement('div');
-                itemDiv.textContent = light.name;
-                itemDiv.style.cssText = 'padding:5px;cursor:pointer;color:#aaa;margin-left:10px;';
+                itemDiv.textContent = `${light.name} [${light.type}]`;
+                itemDiv.style.cssText = 'padding:5px;cursor:pointer;color:#ff0;margin-left:10px;background:#2a2a1a;border-radius:3px;margin-bottom:3px;';
+                itemDiv.addEventListener('click', () => this.showLightEditor(light));
+                itemDiv.addEventListener('dblclick', () => {
+                    if (confirm(`Delete light "${light.name}"?`)) {
+                        const idx = this.sceneData.lights.indexOf(light);
+                        if (idx > -1) {
+                            this.sceneData.lights.splice(idx, 1);
+                            this.updateSceneTree();
+                        }
+                    }
+                });
                 lightsDiv.appendChild(itemDiv);
             }
 
@@ -386,15 +405,24 @@ export class IobrokerWebui3DScreenEditor extends BaseCustomWebComponentConstruct
 
         const asset = this.selectedObject.userData.assetData;
 
+        // Asset name
+        const nameGroup = document.createElement('div');
+        nameGroup.className = 'property-group';
+        nameGroup.innerHTML = `
+            <div class="property-label">Asset Name</div>
+            <input type="text" id="assetName" value="${asset.name}" class="property-input" style="width:100%;">
+        `;
+        panelEl.appendChild(nameGroup);
+
         // Position
         const posGroup = document.createElement('div');
         posGroup.className = 'property-group';
         posGroup.innerHTML = `
-            <div class="property-label">Position</div>
+            <div class="property-label">📍 Position</div>
             <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:5px;">
-                <input type="number" id="posX" value="${asset.position.x}" step="0.1" class="property-input" placeholder="X">
-                <input type="number" id="posY" value="${asset.position.y}" step="0.1" class="property-input" placeholder="Y">
-                <input type="number" id="posZ" value="${asset.position.z}" step="0.1" class="property-input" placeholder="Z">
+                <input type="number" id="posX" value="${asset.position.x.toFixed(2)}" step="0.1" class="property-input" placeholder="X" data-prop="position.x">
+                <input type="number" id="posY" value="${asset.position.y.toFixed(2)}" step="0.1" class="property-input" placeholder="Y" data-prop="position.y">
+                <input type="number" id="posZ" value="${asset.position.z.toFixed(2)}" step="0.1" class="property-input" placeholder="Z" data-prop="position.z">
             </div>
         `;
         panelEl.appendChild(posGroup);
@@ -403,11 +431,11 @@ export class IobrokerWebui3DScreenEditor extends BaseCustomWebComponentConstruct
         const rotGroup = document.createElement('div');
         rotGroup.className = 'property-group';
         rotGroup.innerHTML = `
-            <div class="property-label">Rotation</div>
+            <div class="property-label">🔄 Rotation (rad)</div>
             <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:5px;">
-                <input type="number" id="rotX" value="${asset.rotation.x}" step="0.1" class="property-input" placeholder="X">
-                <input type="number" id="rotY" value="${asset.rotation.y}" step="0.1" class="property-input" placeholder="Y">
-                <input type="number" id="rotZ" value="${asset.rotation.z}" step="0.1" class="property-input" placeholder="Z">
+                <input type="number" id="rotX" value="${asset.rotation.x.toFixed(2)}" step="0.01" class="property-input" placeholder="X" data-prop="rotation.x">
+                <input type="number" id="rotY" value="${asset.rotation.y.toFixed(2)}" step="0.01" class="property-input" placeholder="Y" data-prop="rotation.y">
+                <input type="number" id="rotZ" value="${asset.rotation.z.toFixed(2)}" step="0.01" class="property-input" placeholder="Z" data-prop="rotation.z">
             </div>
         `;
         panelEl.appendChild(rotGroup);
@@ -416,22 +444,244 @@ export class IobrokerWebui3DScreenEditor extends BaseCustomWebComponentConstruct
         const scaleGroup = document.createElement('div');
         scaleGroup.className = 'property-group';
         scaleGroup.innerHTML = `
-            <div class="property-label">Scale</div>
+            <div class="property-label">📏 Scale</div>
             <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:5px;">
-                <input type="number" id="scaleX" value="${asset.scale.x}" step="0.1" class="property-input" placeholder="X">
-                <input type="number" id="scaleY" value="${asset.scale.y}" step="0.1" class="property-input" placeholder="Y">
-                <input type="number" id="scaleZ" value="${asset.scale.z}" step="0.1" class="property-input" placeholder="Z">
+                <input type="number" id="scaleX" value="${asset.scale.x.toFixed(2)}" step="0.1" class="property-input" placeholder="X" data-prop="scale.x">
+                <input type="number" id="scaleY" value="${asset.scale.y.toFixed(2)}" step="0.1" class="property-input" placeholder="Y" data-prop="scale.y">
+                <input type="number" id="scaleZ" value="${asset.scale.z.toFixed(2)}" step="0.1" class="property-input" placeholder="Z" data-prop="scale.z">
             </div>
         `;
         panelEl.appendChild(scaleGroup);
+
+        // Bindings section
+        const bindingsGroup = document.createElement('div');
+        bindingsGroup.className = 'property-group';
+        bindingsGroup.style.borderTop = '2px solid #0f0';
+        bindingsGroup.innerHTML = `
+            <div class="property-label" style="color:#0f0;margin-bottom:10px;">🔗 ioBroker Bindings</div>
+            <div id="bindingsList" style="font-size:11px;"></div>
+            <button id="addBindingBtn" style="width:100%;padding:8px;margin-top:10px;background:#1a5a1a;color:#0f0;border:1px solid #0f0;cursor:pointer;border-radius:3px;">+ Add Binding</button>
+        `;
+        panelEl.appendChild(bindingsGroup);
+
+        // Add property change listeners
+        panelEl.querySelectorAll('input[data-prop]').forEach(input => {
+            input.addEventListener('change', (e) => {
+                const prop = e.target.dataset.prop;
+                const value = parseFloat(e.target.value);
+                this.updateAssetProperty(asset, prop, value);
+            });
+        });
+
+        // Add binding button
+        panelEl.querySelector('#addBindingBtn').addEventListener('click', () => {
+            this.showBindingEditor(asset);
+        });
+
+        // Asset name listener
+        panelEl.querySelector('#assetName').addEventListener('change', (e) => {
+            asset.name = e.target.value;
+            this.selectedObject.userData.assetData.name = e.target.value;
+        });
+
+        // Update bindings list
+        this.updateBindingsList(asset, panelEl);
+    }
+
+    updateAssetProperty(asset, propPath, value) {
+        const parts = propPath.split('.');
+        let obj = asset;
+        for (let i = 0; i < parts.length - 1; i++) {
+            obj = obj[parts[i]];
+        }
+        obj[parts[parts.length - 1]] = value;
+
+        // Update Three.js object
+        if (this.selectedObject) {
+            if (propPath.startsWith('position')) {
+                this.selectedObject.position.set(asset.position.x, asset.position.y, asset.position.z);
+            } else if (propPath.startsWith('rotation')) {
+                this.selectedObject.rotation.set(asset.rotation.x, asset.rotation.y, asset.rotation.z);
+            } else if (propPath.startsWith('scale')) {
+                this.selectedObject.scale.set(asset.scale.x, asset.scale.y, asset.scale.z);
+            }
+        }
+    }
+
+    updateBindingsList(asset, panelEl) {
+        const bindingsList = panelEl.querySelector('#bindingsList');
+        if (!asset.bindings || Object.keys(asset.bindings).length === 0) {
+            bindingsList.innerHTML = '<div style="color:#888;padding:5px;">No bindings configured</div>';
+            return;
+        }
+
+        let html = '';
+        for (const [prop, binding] of Object.entries(asset.bindings)) {
+            html += `
+                <div style="padding:5px;background:#1a1a1a;margin-bottom:3px;border-left:2px solid #0f0;font-family:monospace;">
+                    <div style="color:#0f0;">${prop}</div>
+                    <div style="color:#888;font-size:10px;">→ ${binding.signal || 'unset'}</div>
+                </div>
+            `;
+        }
+        bindingsList.innerHTML = html;
+    }
+
+    showBindingEditor(asset) {
+        const propInput = prompt('Property path (e.g., position.x, rotation.y, scale.z):', 'position.x');
+        if (!propInput) return;
+
+        const signalInput = prompt('ioBroker signal (e.g., system.adapter.0.alive):', '');
+        if (!signalInput) return;
+
+        if (!asset.bindings) {
+            asset.bindings = {};
+        }
+
+        asset.bindings[propInput] = {
+            signal: signalInput,
+            type: 'number',
+            min: 0,
+            max: 100
+        };
+
+        this.updatePropertyPanel();
+        console.log('✅ Binding added:', propInput, '→', signalInput);
+    }
+
+    showLightCreationDialog() {
+        const lightType = prompt('Light type:\n1 = Ambient\n2 = Directional\n3 = Point\n4 = Spot\n\nEnter number (default: 2):', '2');
+        if (!lightType) return;
+
+        const typeMap = { '1': 'ambient', '2': 'directional', '3': 'point', '4': 'spot' };
+        const type = typeMap[lightType] || 'directional';
+
+        const name = prompt(`Create new ${type} light\n\nLight name:`, `${type}_${Date.now().toString(36).substring(5)}`);
+        if (!name) return;
+
+        const light = {
+            id: 'light_' + Date.now().toString(36),
+            name: name,
+            type: type,
+            color: '#ffffff',
+            intensity: type === 'ambient' ? 0.6 : 0.8,
+            position: type === 'directional' ? { x: 10, y: 10, z: 10 } : { x: 0, y: 5, z: 0 },
+            castShadow: type !== 'ambient',
+            visible: true
+        };
+
+        if (!this.sceneData.lights) {
+            this.sceneData.lights = [];
+        }
+        this.sceneData.lights.push(light);
+
+        // Add to Three.js scene
+        this.addLightToScene(light);
+
+        // Update scene tree
+        this.updateSceneTree();
+
+        console.log('✅ Light created:', name);
+    }
+
+    showLightEditor(light) {
+        const panelEl = this._getDomElement('propertyPanel');
+        panelEl.innerHTML = '';
+
+        // Light name
+        const nameGroup = document.createElement('div');
+        nameGroup.className = 'property-group';
+        nameGroup.innerHTML = `
+            <div class="property-label">💡 Light: ${light.type}</div>
+            <input type="text" id="lightName" value="${light.name}" class="property-input" style="width:100%;">
+        `;
+        panelEl.appendChild(nameGroup);
+
+        // Color
+        const colorGroup = document.createElement('div');
+        colorGroup.className = 'property-group';
+        colorGroup.innerHTML = `
+            <div class="property-label">Color</div>
+            <input type="color" id="lightColor" value="${light.color}" class="property-input" style="width:100%;height:35px;">
+        `;
+        panelEl.appendChild(colorGroup);
+
+        // Intensity
+        const intensityGroup = document.createElement('div');
+        intensityGroup.className = 'property-group';
+        intensityGroup.innerHTML = `
+            <div class="property-label">Intensity: <span id="intensityValue">${light.intensity.toFixed(2)}</span></div>
+            <input type="range" id="lightIntensity" min="0" max="2" step="0.1" value="${light.intensity}" style="width:100%;">
+        `;
+        panelEl.appendChild(intensityGroup);
+
+        // Position (if applicable)
+        if (light.position) {
+            const posGroup = document.createElement('div');
+            posGroup.className = 'property-group';
+            posGroup.innerHTML = `
+                <div class="property-label">📍 Position</div>
+                <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:5px;">
+                    <input type="number" id="lightPosX" value="${light.position.x.toFixed(2)}" step="0.5" class="property-input" placeholder="X">
+                    <input type="number" id="lightPosY" value="${light.position.y.toFixed(2)}" step="0.5" class="property-input" placeholder="Y">
+                    <input type="number" id="lightPosZ" value="${light.position.z.toFixed(2)}" step="0.5" class="property-input" placeholder="Z">
+                </div>
+            `;
+            panelEl.appendChild(posGroup);
+
+            panelEl.querySelector('#lightPosX').addEventListener('change', (e) => {
+                light.position.x = parseFloat(e.target.value);
+            });
+            panelEl.querySelector('#lightPosY').addEventListener('change', (e) => {
+                light.position.y = parseFloat(e.target.value);
+            });
+            panelEl.querySelector('#lightPosZ').addEventListener('change', (e) => {
+                light.position.z = parseFloat(e.target.value);
+            });
+        }
+
+        // Cast Shadow (if applicable)
+        if (light.castShadow !== undefined) {
+            const shadowGroup = document.createElement('div');
+            shadowGroup.className = 'property-group';
+            shadowGroup.innerHTML = `
+                <div class="property-label">Cast Shadow</div>
+                <input type="checkbox" id="lightShadow" ${light.castShadow ? 'checked' : ''} style="width:20px;height:20px;cursor:pointer;">
+            `;
+            panelEl.appendChild(shadowGroup);
+
+            panelEl.querySelector('#lightShadow').addEventListener('change', (e) => {
+                light.castShadow = e.target.checked;
+            });
+        }
+
+        // Event listeners
+        panelEl.querySelector('#lightName').addEventListener('change', (e) => {
+            light.name = e.target.value;
+            this.updateSceneTree();
+        });
+
+        panelEl.querySelector('#lightColor').addEventListener('change', (e) => {
+            light.color = e.target.value;
+        });
+
+        panelEl.querySelector('#lightIntensity').addEventListener('input', (e) => {
+            light.intensity = parseFloat(e.target.value);
+            panelEl.querySelector('#intensityValue').textContent = light.intensity.toFixed(2);
+        });
     }
 
     setupEventListeners() {
         this._getDomElement('saveBtn').addEventListener('click', () => this.saveScene());
+        this._getDomElement('addAssetBtn').addEventListener('click', () => this.onAddAssetClick());
+        this._getDomElement('addLightBtn').addEventListener('click', () => this.showLightCreationDialog());
+        this._getDomElement('fileInput').addEventListener('change', (e) => this.onFileSelected(e));
         this._getDomElement('undoBtn').addEventListener('click', () => console.log('Undo'));
         this._getDomElement('redoBtn').addEventListener('click', () => console.log('Redo'));
         this._getDomElement('gridToggle').addEventListener('click', () => this.toggleGrid());
         this._getDomElement('axesToggle').addEventListener('click', () => this.toggleAxes());
+        this._getDomElement('treeTab').addEventListener('click', () => this.switchTab('tree'));
+        this._getDomElement('assetsTab').addEventListener('click', () => this.switchTab('assets'));
     }
 
     async saveScene() {
@@ -469,6 +719,96 @@ export class IobrokerWebui3DScreenEditor extends BaseCustomWebComponentConstruct
         this.renderer.setSize(width, height);
     }
 
+    onAddAssetClick() {
+        this._getDomElement('fileInput').click();
+    }
+
+    onFileSelected(event) {
+        const file = event.target.files[0];
+        if (!file) return;
+
+        const reader = new FileReader();
+        reader.onload = (e) => {
+            const arrayBuffer = e.target.result;
+            const blob = new Blob([arrayBuffer]);
+            const url = URL.createObjectURL(blob);
+
+            // Create asset object
+            const assetId = 'asset_' + Date.now().toString(36);
+            const asset = {
+                id: assetId,
+                name: file.name,
+                type: 'model',
+                glbPath: url,
+                position: { x: 0, y: 0, z: 0 },
+                rotation: { x: 0, y: 0, z: 0 },
+                scale: { x: 1, y: 1, z: 1 },
+                visible: true
+            };
+
+            // Add to scene data
+            if (!this.sceneData.assets) {
+                this.sceneData.assets = [];
+            }
+            this.sceneData.assets.push(asset);
+
+            // Load and add to scene
+            this.loadAsset(asset);
+
+            // Update assets list
+            this.updateAssetsList();
+
+            console.log('✅ Asset added:', file.name);
+        };
+        reader.readAsArrayBuffer(file);
+    }
+
+    switchTab(tab) {
+        const sceneTree = this._getDomElement('sceneTree');
+        const assetsList = this._getDomElement('assetsList');
+        const treeTab = this._getDomElement('treeTab');
+        const assetsTab = this._getDomElement('assetsTab');
+
+        if (tab === 'tree') {
+            sceneTree.style.display = 'block';
+            assetsList.style.display = 'none';
+            treeTab.style.background = '#2a2a2a';
+            treeTab.style.color = '#0f0';
+            assetsTab.style.background = '#1e1e1e';
+            assetsTab.style.color = '#aaa';
+        } else {
+            sceneTree.style.display = 'none';
+            assetsList.style.display = 'block';
+            treeTab.style.background = '#1e1e1e';
+            treeTab.style.color = '#aaa';
+            assetsTab.style.background = '#2a2a2a';
+            assetsTab.style.color = '#0f0';
+        }
+    }
+
+    updateAssetsList() {
+        const assetsListContent = this._getDomElement('assetsListContent');
+
+        if (!this.sceneData.assets || this.sceneData.assets.length === 0) {
+            assetsListContent.innerHTML = '<div style="color:#888;">No assets loaded</div>';
+            return;
+        }
+
+        let html = '';
+        for (const asset of this.sceneData.assets) {
+            html += `
+                <div style="padding:8px;background:#242424;margin-bottom:5px;border-radius:3px;cursor:pointer;border:1px solid #333;">
+                    <div style="color:#0f0;font-weight:bold;">${asset.name}</div>
+                    <div style="color:#888;font-size:11px;margin-top:3px;">
+                        Type: ${asset.type}<br>
+                        Pos: (${asset.position.x.toFixed(1)}, ${asset.position.y.toFixed(1)}, ${asset.position.z.toFixed(1)})
+                    </div>
+                </div>
+            `;
+        }
+        assetsListContent.innerHTML = html;
+    }
+
     disconnectedCallback() {
         if (this.renderer) {
             this.renderer.dispose();