iobroker.mywebui 1.42.11 → 1.42.12

package/io-package.json

@@ -1,7 +1,7 @@
 {
   "common": {
     "name": "mywebui",
-    "version": "1.42.11",
+    "version": "1.42.12",
     "titleLang": {
       "en": "mywebui",
       "de": "mywebui",

package/package.json

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

@@ -230,7 +230,7 @@ export class IobrokerWebui3DScreenEditor extends BaseCustomWebComponentConstruct
         // 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) {
+                if (asset.type === 'model' && (asset.glbPath || asset.glbData)) {
                     this.loadAsset(asset);
                 }
             }
@@ -257,11 +257,31 @@ export class IobrokerWebui3DScreenEditor extends BaseCustomWebComponentConstruct
     }
 
     loadAsset(asset) {
-        if (!asset.glbPath) return;
+        // Support both base64 embedded data and external URL
+        let url = null;
+        let revokeAfterLoad = false;
+
+        if (asset.glbData) {
+            // base64 data URL → Blob URL for Three.js loader
+            const base64 = asset.glbData;
+            const byteString = atob(base64.split(',')[1]);
+            const mimeType = base64.split(',')[0].split(':')[1].split(';')[0];
+            const ab = new ArrayBuffer(byteString.length);
+            const ia = new Uint8Array(ab);
+            for (let i = 0; i < byteString.length; i++) ia[i] = byteString.charCodeAt(i);
+            const blob = new Blob([ab], { type: mimeType });
+            url = URL.createObjectURL(blob);
+            revokeAfterLoad = true;
+        } else if (asset.glbPath) {
+            url = asset.glbPath;
+        }
+
+        if (!url) return;
 
         this.gltfLoader.load(
-            asset.glbPath,
+            url,
             (gltf) => {
+                if (revokeAfterLoad) URL.revokeObjectURL(url);
                 const model = gltf.scene;
                 model.userData.assetId = asset.id;
                 model.userData.assetData = asset;
@@ -272,7 +292,10 @@ export class IobrokerWebui3DScreenEditor extends BaseCustomWebComponentConstruct
                 console.log('✅ Asset loaded:', asset.name);
             },
             undefined,
-            (error) => console.error('Error loading asset:', error)
+            (error) => {
+                if (revokeAfterLoad) URL.revokeObjectURL(url);
+                console.error('Error loading asset:', error);
+            }
         );
     }
 
@@ -330,10 +353,16 @@ export class IobrokerWebui3DScreenEditor extends BaseCustomWebComponentConstruct
         for (const intersection of intersects) {
             let obj = intersection.object;
 
-            // Skip grid, axes, lights
-            if (obj.userData.isGrid || obj.userData.isAxes || obj.userData.lightId) {
+            // Skip grid, axes, lights, selection helper
+            if (obj.userData.isGrid || obj.userData.isAxes || obj.userData.lightId || obj.userData.isSelectionHelper) {
                 continue;
             }
+            let rootCheck = obj;
+            while (rootCheck && rootCheck !== this.scene) {
+                if (rootCheck.userData.isSelectionHelper) break;
+                rootCheck = rootCheck.parent;
+            }
+            if (rootCheck && rootCheck !== this.scene && rootCheck.userData.isSelectionHelper) continue;
 
             // Find root asset containing this mesh
             while (obj && obj !== this.scene) {
@@ -356,41 +385,27 @@ export class IobrokerWebui3DScreenEditor extends BaseCustomWebComponentConstruct
     selectObject(obj) {
         if (this.selectedObject === obj) return;
 
-        // Deselect previous (remove highlight)
+        // Deselect previous - remove bounding box helper
         if (this.selectedObject) {
             this.selectedObject.userData.selected = false;
-            // Restore original materials
-            this.selectedObject.traverse((child) => {
-                if (child.isMesh && child.userData.originalMaterial) {
-                    child.material = child.userData.originalMaterial;
-                    delete child.userData.originalMaterial;
-                }
-            });
+            if (this._selectionBox) {
+                this.scene.remove(this._selectionBox);
+                this._selectionBox.geometry.dispose();
+                this._selectionBox = null;
+            }
         }
 
-        // Select new (add subtle highlight)
         this.selectedObject = obj;
         obj.userData.selected = true;
 
-        // Apply very subtle highlight - only emissive, preserve all other properties
-        obj.traverse((child) => {
-            if (child.isMesh && child.material && !Array.isArray(child.material)) {
-                // Store original if not already stored
-                if (!child.userData.originalMaterial) {
-                    child.userData.originalMaterial = child.material;
-                }
+        // Show bounding box outline instead of material change - no yellow viewport
+        const box = new this.THREE.Box3().setFromObject(obj);
+        const boxHelper = new this.THREE.Box3Helper(box, 0x00ff00);
+        boxHelper.userData.isSelectionHelper = true;
+        this.scene.add(boxHelper);
+        this._selectionBox = boxHelper;
 
-                // Clone and apply subtle glow
-                const hlMat = child.material.clone();
-                if (hlMat.emissive) {
-                    hlMat.emissive.setHex(0xffff00);
-                    hlMat.emissiveIntensity = 0.1; // Even more subtle
-                }
-                child.material = hlMat;
-            }
-        });
-
-        console.log('✅ Selected:', obj.userData.assetData.name);
+        console.log('✅ Selected:', obj.userData.assetData?.name);
     }
 
     updateSceneTree() {
@@ -796,38 +811,33 @@ export class IobrokerWebui3DScreenEditor extends BaseCustomWebComponentConstruct
 
         const reader = new FileReader();
         reader.onload = (e) => {
-            const arrayBuffer = e.target.result;
-            const blob = new Blob([arrayBuffer]);
-            const url = URL.createObjectURL(blob);
+            // Store as base64 in JSON so it persists across refresh/restart
+            const base64 = e.target.result; // readAsDataURL gives data:...;base64,...
 
-            // Create asset object
             const assetId = 'asset_' + Date.now().toString(36);
             const asset = {
                 id: assetId,
                 name: file.name,
                 type: 'model',
-                glbPath: url,
+                glbData: base64,   // base64 embedded - survives refresh
+                glbPath: null,     // no temp blob 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);
+            console.log('✅ Asset added (base64):', file.name);
         };
-        reader.readAsArrayBuffer(file);
+        reader.readAsDataURL(file); // base64 data URL
     }
 
     switchTab(tab) {