iobroker.mywebui 1.42.23 → 1.42.24

package/io-package.json

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

package/package.json

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

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

@@ -3,247 +3,139 @@ import { iobrokerHandler } from "../common/IobrokerHandler.js";
 
 export class IobrokerWebui3DScreenViewer extends BaseCustomWebComponentConstructorAppend {
     static template = html`
-        <div id="container" style="width:100%;height:100%;position:relative;overflow:hidden;background:#333;">
+        <div id="container" style="width:100%;height:100%;position:relative;overflow:hidden;background:#1a1a1a;">
             <div id="viewport" style="width:100%;height:100%;"></div>
-            <div id="status" style="position:absolute;bottom:10px;left:10px;background:rgba(0,0,0,0.7);color:#0f0;padding:10px;font-family:monospace;font-size:12px;z-index:10;border-radius:3px;">Ready</div>
         </div>
     `;
 
     static style = css`
-        :host {
-            display: block;
-            width: 100%;
-            height: 100%;
-            background: #333;
-        }
+        :host { display:block;width:100%;height:100%; }
     `;
 
     constructor() {
         super();
-        this.scene = null;
-        this.camera = null;
-        this.renderer = null;
-        this.controls = null;
-        this.THREE = null;
-        this.gltfLoader = null;
-        this.sceneData = null;
-        this.sceneNameAttr = null;
+        this._animating = false;
+        this._renderer = null;
     }
 
     async connectedCallback() {
-        this.sceneNameAttr = this.getAttribute('scene-name');
-        if (!this.sceneNameAttr) {
-            this._getDomElement('status').textContent = '❌ No scene name';
-            return;
-        }
+        const sceneName = this.getAttribute('scene-name');
+        const sceneType = this.getAttribute('scene-type') || '3dscreen';
+        if (!sceneName) return;
+        await this._init(sceneName, sceneType);
+    }
 
-        await this.init();
+    disconnectedCallback() {
+        this._animating = false;
+        if (this._renderer) { this._renderer.dispose(); this._renderer.domElement.remove(); this._renderer = null; }
+        window.removeEventListener('resize', this._onResize);
     }
 
-    async init() {
+    async _init(sceneName, sceneType) {
         try {
-            const statusEl = this._getDomElement('status');
-            statusEl.textContent = '⏳ Loading...';
-
-            // Load Three.js
             const THREE = await import('three');
             const { OrbitControls } = await import('three/addons/controls/OrbitControls.js');
-            const { GLTFLoader } = await import('three/addons/loaders/GLTFLoader.js');
 
-            this.THREE = THREE;
-            this.gltfLoader = new GLTFLoader();
+            // Load scene data
+            const sceneData = sceneType === '3dcontrol'
+                ? await iobrokerHandler.getWebuiObject('3dcontrol', sceneName)
+                : await iobrokerHandler.get3DScreen(sceneName);
 
-            // Initialize Three.js
-            this.initThreeJS(THREE, OrbitControls);
+            if (!sceneData) { console.warn('3D scene not found:', sceneName); return; }
 
-            // Load scene
-            await this.loadScene(this.sceneNameAttr);
+            const viewport = this._getDomElement('viewport');
+            const w = viewport.clientWidth || 800;
+            const h = viewport.clientHeight || 600;
 
-            statusEl.textContent = '✅ Ready';
-        } catch (error) {
-            console.error('❌ 3D Viewer init failed:', error);
-            this._getDomElement('status').textContent = '❌ ' + error.message;
-        }
-    }
+            // Renderer
+            const renderer = new THREE.WebGLRenderer({ antialias: true });
+            renderer.setPixelRatio(window.devicePixelRatio);
+            renderer.setSize(w, h);
+            renderer.shadowMap.enabled = true;
+            viewport.appendChild(renderer.domElement);
+            this._renderer = renderer;
 
-    initThreeJS(THREE, OrbitControls) {
-        const viewport = this._getDomElement('viewport');
-        const width = viewport.clientWidth;
-        const height = viewport.clientHeight;
-
-        // Scene
-        this.scene = new THREE.Scene();
-        this.scene.background = new THREE.Color(0x333333);
-
-        // Camera
-        this.camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
-        this.camera.position.set(10, 10, 10);
-
-        // Renderer
-        this.renderer = new THREE.WebGLRenderer({ antialias: true });
-        this.renderer.setSize(width, height);
-        this.renderer.shadowMap.enabled = true;
-        viewport.appendChild(this.renderer.domElement);
-
-        // Lighting
-        const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
-        this.scene.add(ambientLight);
-
-        const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
-        directionalLight.position.set(10, 10, 10);
-        directionalLight.castShadow = true;
-        directionalLight.shadow.mapSize.width = 2048;
-        directionalLight.shadow.mapSize.height = 2048;
-        this.scene.add(directionalLight);
-
-        // Grid
-        const gridHelper = new THREE.GridHelper(20, 20, 0x888888, 0x444444);
-        gridHelper.position.y = -0.01;
-        this.scene.add(gridHelper);
-
-        // Axes
-        const axesHelper = new THREE.AxesHelper(5);
-        this.scene.add(axesHelper);
-
-        // Controls
-        this.controls = new OrbitControls(this.camera, this.renderer.domElement);
-        this.controls.autoRotate = false;
-        this.controls.enableZoom = true;
-        this.controls.enablePan = true;
-
-        // Animation loop
-        let animating = true;
-        const animate = () => {
-            if (animating) {
-                requestAnimationFrame(animate);
-                this.controls.update();
-                this.renderer.render(this.scene, this.camera);
-            }
-        };
-        animate();
+            let scene, camera;
 
-        // Resize
-        window.addEventListener('resize', () => this.onWindowResize());
+            if (sceneData.threeScene && sceneData.threeScene.scene) {
+                // New format: three.js editor JSON → ObjectLoader
+                const loader = new THREE.ObjectLoader();
+                scene = loader.parse(sceneData.threeScene.scene);
 
-        this._stopAnimation = () => { animating = false; };
-    }
-
-    async loadScene(sceneName) {
-        try {
-            this.sceneData = await iobrokerHandler.get3DScreen(sceneName);
-            if (!this.sceneData) {
-                throw new Error(`Scene not found: ${sceneName}`);
-            }
-
-            // Load assets
-            if (this.sceneData.assets) {
-                for (const asset of this.sceneData.assets) {
-                    if (asset.type === 'model' && asset.glbPath) {
-                        await this.loadAsset(asset);
-                    }
+                // Restore camera
+                if (sceneData.threeScene.camera) {
+                    try { camera = loader.parse(sceneData.threeScene.camera); } catch (_) {}
                 }
-            }
-
-            // Add lights
-            if (this.sceneData.lights) {
-                for (const light of this.sceneData.lights) {
-                    this.addLightToScene(light);
+                if (!camera || !(camera.isCamera)) {
+                    camera = new THREE.PerspectiveCamera(50, w / h, 0.1, 10000);
+                    camera.position.set(0, 0, 50);
                 }
-            }
 
-            // Set camera
-            if (this.sceneData.camera) {
-                this.camera.position.set(
-                    this.sceneData.camera.position.x,
-                    this.sceneData.camera.position.y,
-                    this.sceneData.camera.position.z
-                );
-                this.camera.lookAt(
-                    this.sceneData.camera.target.x,
-                    this.sceneData.camera.target.y,
-                    this.sceneData.camera.target.z
-                );
-            }
-
-            console.log('✅ Scene loaded:', sceneName);
-        } catch (error) {
-            console.error('Error loading scene:', error);
-            throw error;
-        }
-    }
-
-    loadAsset(asset) {
-        return new Promise((resolve, reject) => {
-            this.gltfLoader.load(
-                asset.glbPath,
-                (gltf) => {
-                    const model = gltf.scene;
-                    model.position.set(asset.position.x, asset.position.y, asset.position.z);
-                    model.rotation.set(asset.rotation.x, asset.rotation.y, asset.rotation.z);
-                    model.scale.set(asset.scale.x, asset.scale.y, asset.scale.z);
-                    this.scene.add(model);
-                    console.log('✅ Asset loaded:', asset.name);
-                    resolve();
-                },
-                undefined,
-                (error) => {
-                    console.error('Error loading asset:', error);
-                    reject(error);
+                // Renderer settings from project
+                const proj = sceneData.threeScene.project || {};
+                if (proj.shadows !== undefined) renderer.shadowMap.enabled = proj.shadows;
+                if (proj.physicallyCorrectLights) renderer.useLegacyLights = false;
+            } else {
+                // Old format backward compatibility
+                scene = new THREE.Scene();
+                scene.background = new THREE.Color(0x333333);
+                camera = new THREE.PerspectiveCamera(75, w / h, 0.1, 1000);
+                camera.position.set(10, 10, 10);
+
+                scene.add(new THREE.AmbientLight(0xffffff, 0.6));
+                const dir = new THREE.DirectionalLight(0xffffff, 0.8);
+                dir.position.set(10, 10, 10);
+                scene.add(dir);
+
+                if (sceneData.assets) {
+                    const { GLTFLoader } = await import('three/addons/loaders/GLTFLoader.js');
+                    const loader = new GLTFLoader();
+                    for (const asset of sceneData.assets) {
+                        if (asset.type === 'model' && asset.glbPath) {
+                            await new Promise(res => loader.load(asset.glbPath, gltf => {
+                                const m = gltf.scene;
+                                if (asset.position) m.position.set(asset.position.x, asset.position.y, asset.position.z);
+                                if (asset.scale)    m.scale.set(asset.scale.x, asset.scale.y, asset.scale.z);
+                                scene.add(m); res();
+                            }, undefined, res));
+                        }
+                    }
                 }
-            );
-        });
-    }
+            }
 
-    addLightToScene(light) {
-        let threeLight;
-
-        switch (light.type) {
-            case 'ambient':
-                threeLight = new this.THREE.AmbientLight(light.color, light.intensity);
-                break;
-            case 'directional':
-                threeLight = new this.THREE.DirectionalLight(light.color, light.intensity);
-                if (light.position) {
-                    threeLight.position.set(light.position.x, light.position.y, light.position.z);
-                }
-                if (light.castShadow) {
-                    threeLight.castShadow = true;
-                }
-                break;
-            case 'point':
-                threeLight = new this.THREE.PointLight(light.color, light.intensity);
-                if (light.position) {
-                    threeLight.position.set(light.position.x, light.position.y, light.position.z);
-                }
-                break;
-            case 'spot':
-                threeLight = new this.THREE.SpotLight(light.color, light.intensity);
-                if (light.position) {
-                    threeLight.position.set(light.position.x, light.position.y, light.position.z);
-                }
-                break;
-        }
+            camera.aspect = w / h;
+            camera.updateProjectionMatrix();
 
-        if (threeLight) {
-            this.scene.add(threeLight);
-        }
-    }
+            const controls = new OrbitControls(camera, renderer.domElement);
+            controls.enableDamping = true;
 
-    onWindowResize() {
-        const viewport = this._getDomElement('viewport');
-        const width = viewport.clientWidth;
-        const height = viewport.clientHeight;
+            // Run scene script if present
+            if (sceneData.script) {
+                try {
+                    const fn = new Function('THREE', 'scene', 'camera', 'renderer', 'controls', sceneData.script);
+                    fn(THREE, scene, camera, renderer, controls);
+                } catch (e) { console.warn('3D scene script error:', e); }
+            }
 
-        this.camera.aspect = width / height;
-        this.camera.updateProjectionMatrix();
-        this.renderer.setSize(width, height);
-    }
+            this._animating = true;
+            this._onResize = () => {
+                const vw = viewport.clientWidth, vh = viewport.clientHeight;
+                camera.aspect = vw / vh;
+                camera.updateProjectionMatrix();
+                renderer.setSize(vw, vh);
+            };
+            window.addEventListener('resize', this._onResize);
+
+            const animate = () => {
+                if (!this._animating) return;
+                requestAnimationFrame(animate);
+                controls.update();
+                renderer.render(scene, camera);
+            };
+            animate();
 
-    disconnectedCallback() {
-        if (this._stopAnimation) this._stopAnimation();
-        if (this.renderer) {
-            this.renderer.dispose();
-            this.renderer.domElement.remove();
+        } catch (err) {
+            console.error('3D Viewer error:', err);
         }
     }
 }