iobroker.mywebui 1.42.4 → 1.42.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "iobroker.mywebui",
-  "version": "1.42.4",
+  "version": "1.42.6",
   "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

@@ -27,10 +27,6 @@ export class IobrokerWebui3DScreenEditor extends BaseCustomWebComponentConstruct
                     </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;">
-                    <div style="padding:10px;font-weight:bold;color:#aaa;border-bottom:1px solid #444;">Properties</div>
-                    <div id="propertyPanel" style="padding:10px;"></div>
-                </div>
             </div>
         </div>
     `;
@@ -219,16 +215,20 @@ export class IobrokerWebui3DScreenEditor extends BaseCustomWebComponentConstruct
     updateSceneView() {
         if (!this.sceneData) return;
 
-        // Add assets to scene
-        for (const asset of this.sceneData.assets) {
-            if (asset.type === 'model' && asset.glbPath) {
-                this.loadAsset(asset);
+        // Add assets to scene (safe iteration)
+        if (Array.isArray(this.sceneData.assets)) {
+            for (const asset of this.sceneData.assets) {
+                if (asset.type === 'model' && asset.glbPath) {
+                    this.loadAsset(asset);
+                }
             }
         }
 
-        // Update lights
-        for (const light of this.sceneData.lights) {
-            this.addLightToScene(light);
+        // Update lights (safe iteration)
+        if (Array.isArray(this.sceneData.lights)) {
+            for (const light of this.sceneData.lights) {
+                this.addLightToScene(light);
+            }
         }
 
         // Update camera
@@ -242,9 +242,6 @@ export class IobrokerWebui3DScreenEditor extends BaseCustomWebComponentConstruct
 
         // Update scene tree
         this.updateSceneTree();
-
-        // Update property panel
-        this.updatePropertyPanel();
     }
 
     loadAsset(asset) {
@@ -316,9 +313,18 @@ export class IobrokerWebui3DScreenEditor extends BaseCustomWebComponentConstruct
 
         for (const intersection of intersects) {
             const obj = intersection.object;
-            if (obj.userData.assetId) {
+            if (obj.userData.assetData) {
                 this.selectObject(obj);
-                break;
+                return;
+            }
+            // Try parent objects
+            let parent = obj.parent;
+            while (parent && parent !== this.scene) {
+                if (parent.userData.assetData) {
+                    this.selectObject(parent);
+                    return;
+                }
+                parent = parent.parent;
             }
         }
     }
@@ -326,16 +332,37 @@ export class IobrokerWebui3DScreenEditor extends BaseCustomWebComponentConstruct
     selectObject(obj) {
         if (this.selectedObject === obj) return;
 
-        // Deselect previous
+        // Deselect previous (remove highlight)
         if (this.selectedObject) {
             this.selectedObject.userData.selected = false;
+            // Restore original material
+            this.selectedObject.traverse((child) => {
+                if (child.material && child.userData.originalMaterial) {
+                    child.material = child.userData.originalMaterial;
+                }
+            });
         }
 
-        // Select new
+        // Select new (add yellow highlight)
         this.selectedObject = obj;
         obj.userData.selected = true;
 
-        this.updatePropertyPanel();
+        // Apply highlight material
+        obj.traverse((child) => {
+            if (child.material) {
+                child.userData.originalMaterial = child.material;
+                const hlMat = new this.THREE.MeshStandardMaterial({
+                    color: 0xffff00,
+                    emissive: 0xffff00,
+                    emissiveIntensity: 0.3,
+                    metalness: 0.3,
+                    roughness: 0.4
+                });
+                child.material = hlMat;
+            }
+        });
+
+        console.log('✅ Selected:', obj.userData.assetData.name);
     }
 
     updateSceneTree() {
@@ -343,7 +370,7 @@ export class IobrokerWebui3DScreenEditor extends BaseCustomWebComponentConstruct
         treeEl.innerHTML = '';
 
         // Assets
-        if (this.sceneData.assets && this.sceneData.assets.length > 0) {
+        if (Array.isArray(this.sceneData.assets) && this.sceneData.assets.length > 0) {
             const assetsDiv = document.createElement('div');
             assetsDiv.style.cssText = 'margin-bottom:10px;';
 
@@ -355,8 +382,10 @@ export class IobrokerWebui3DScreenEditor extends BaseCustomWebComponentConstruct
             for (const asset of this.sceneData.assets) {
                 const itemDiv = document.createElement('div');
                 itemDiv.textContent = asset.name;
-                itemDiv.style.cssText = 'padding:5px;cursor:pointer;color:#aaa;margin-left:10px;';
-                itemDiv.addEventListener('click', () => console.log('Select asset:', asset.id));
+                itemDiv.style.cssText = 'padding:5px;cursor:pointer;color:#aaa;margin-left:10px;background:#2a2a1a;border-radius:3px;margin-bottom:3px;';
+                itemDiv.addEventListener('click', () => {
+                    this.selectAssetByName(asset.name);
+                });
                 assetsDiv.appendChild(itemDiv);
             }
 
@@ -364,7 +393,7 @@ export class IobrokerWebui3DScreenEditor extends BaseCustomWebComponentConstruct
         }
 
         // Lights
-        if (this.sceneData.lights && this.sceneData.lights.length > 0) {
+        if (Array.isArray(this.sceneData.lights) && this.sceneData.lights.length > 0) {
             const lightsDiv = document.createElement('div');
             lightsDiv.style.cssText = 'margin-bottom:10px;';
 
@@ -394,6 +423,16 @@ export class IobrokerWebui3DScreenEditor extends BaseCustomWebComponentConstruct
         }
     }
 
+    selectAssetByName(assetName) {
+        // Find and select asset in scene tree
+        for (const obj of this.scene.children) {
+            if (obj.userData.assetData && obj.userData.assetData.name === assetName) {
+                this.selectObject(obj);
+                break;
+            }
+        }
+    }
+
     updatePropertyPanel() {
         const panelEl = this._getDomElement('propertyPanel');
         panelEl.innerHTML = '';

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

@@ -119,8 +119,69 @@ export class IobrokerWebuiSolutionExplorer extends BaseCustomWebComponentConstru
                     try {
                         let screenName = prompt("New " + type + " Name:");
                         if (screenName) {
-                            const defaultScript = type === 'control' ? defaultNewControlScript : null;
-                            window.appShell.openScreenEditor((dir ?? '') + '/' + screenName, type, '', defaultNewStyle, defaultScript, {});
+                            if (type === '3dscreen') {
+                                // Create new 3D screen with default scene
+                                const defaultScene = {
+                                    id: 'scene_' + Date.now().toString(36),
+                                    name: screenName,
+                                    version: '1.0',
+                                    createdAt: new Date().toISOString(),
+                                    modifiedAt: new Date().toISOString(),
+                                    assets: [],
+                                    lights: [
+                                        {
+                                            id: 'ambient_light',
+                                            name: 'Ambient Light',
+                                            type: 'ambient',
+                                            color: '#ffffff',
+                                            intensity: 0.6
+                                        },
+                                        {
+                                            id: 'directional_light',
+                                            name: 'Directional Light',
+                                            type: 'directional',
+                                            color: '#ffffff',
+                                            intensity: 0.8,
+                                            position: { x: 10, y: 10, z: 10 },
+                                            castShadow: true
+                                        }
+                                    ],
+                                    camera: {
+                                        position: { x: 10, y: 10, z: 10 },
+                                        target: { x: 0, y: 0, z: 0 },
+                                        fov: 75
+                                    },
+                                    grid: {
+                                        visible: true,
+                                        size: 20,
+                                        divisions: 20,
+                                        colorCenterLine: '#888888',
+                                        colorGrid: '#444444'
+                                    },
+                                    axes: {
+                                        visible: true,
+                                        size: 5
+                                    },
+                                    settings: {
+                                        backgroundColor: '#333333',
+                                        enableControls: true,
+                                        enableRaycasting: true,
+                                        shadowsEnabled: true,
+                                        antialiasing: true
+                                    },
+                                    edits: {
+                                        ops: []
+                                    }
+                                };
+                                await iobrokerHandler.saveObject('3dscreen', (dir ?? '') + '/' + screenName, defaultScene);
+                                // Open the 3D editor
+                                const editor = document.createElement('iobroker-webui-3dscreen-editor');
+                                editor.setAttribute('scene-name', screenName);
+                                window.appShell.openDialog(editor, { x: 50, y: 50, width: 1200, height: 800 });
+                            } else {
+                                const defaultScript = type === 'control' ? defaultNewControlScript : null;
+                                window.appShell.openScreenEditor((dir ?? '') + '/' + screenName, type, '', defaultNewStyle, defaultScript, {});
+                            }
                         }
                     }
                     catch (err) {