iobroker.mywebui 1.42.32 → 1.42.34

package/io-package.json

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

package/package.json

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

@@ -5,17 +5,43 @@ export class IobrokerWebui3DScreenViewer extends BaseCustomWebComponentConstruct
     static template = html`
         <div id="container" style="width:100%;height:100%;position:relative;overflow:hidden;background:#1a1a1a;">
             <div id="viewport" style="width:100%;height:100%;"></div>
+
+            <!-- Camera label (top-left) -->
+            <div id="camLabel" style="
+                position:absolute;top:10px;left:12px;
+                color:#ddd;font-size:11px;font-family:monospace;
+                background:rgba(0,0,0,0.45);padding:2px 7px;border-radius:3px;
+                pointer-events:none;user-select:none;">Persp</div>
+
+            <!-- Orientation gizmo canvas (top-right) -->
+            <canvas id="gizmoCanvas" width="96" height="96" style="
+                position:absolute;top:8px;right:8px;
+                width:96px;height:96px;cursor:pointer;
+                border-radius:4px;background:transparent;"></canvas>
+
+            <!-- Camera buttons (bottom-right) -->
+            <div id="camButtons" style="
+                position:absolute;bottom:12px;right:12px;
+                display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end;"></div>
         </div>
     `;
 
     static style = css`
         :host { display:block;width:100%;height:100%; }
+        #camButtons button {
+            background:rgba(30,30,30,0.82);color:#ddd;
+            border:1px solid #555;border-radius:4px;
+            padding:4px 11px;font-size:11px;cursor:pointer;
+            font-family:monospace;white-space:nowrap;
+        }
+        #camButtons button:hover  { background:rgba(80,80,80,0.9);color:#fff; }
+        #camButtons button.active { background:rgba(0,120,200,0.85);border-color:#1177bb;color:#fff; }
     `;
 
     constructor() {
         super();
         this._animating = false;
-        this._renderer = null;
+        this._renderer  = null;
     }
 
     async connectedCallback() {
@@ -27,7 +53,7 @@ export class IobrokerWebui3DScreenViewer extends BaseCustomWebComponentConstruct
 
     disconnectedCallback() {
         this._animating = false;
-        if (this._cleanup) { this._cleanup(); this._cleanup = null; }
+        if (this._cleanup)  { this._cleanup();  this._cleanup  = null; }
         if (this._renderer) { this._renderer.dispose(); this._renderer.domElement.remove(); this._renderer = null; }
         window.removeEventListener('resize', this._onResize);
     }
@@ -37,7 +63,6 @@ export class IobrokerWebui3DScreenViewer extends BaseCustomWebComponentConstruct
             const THREE = await import('three');
             const { OrbitControls } = await import('three/addons/controls/OrbitControls.js');
 
-            // Load scene data
             const sceneData = sceneType === '3dcontrol'
                 ? await iobrokerHandler.getWebuiObject('3dcontrol', sceneName)
                 : await iobrokerHandler.get3DScreen(sceneName);
@@ -48,52 +73,42 @@ export class IobrokerWebui3DScreenViewer extends BaseCustomWebComponentConstruct
             const w = viewport.clientWidth || 800;
             const h = viewport.clientHeight || 600;
 
-            // Renderer
             const renderer = new THREE.WebGLRenderer({ antialias: true });
             renderer.setPixelRatio(window.devicePixelRatio);
             renderer.setSize(w, h);
             renderer.shadowMap.enabled = true;
+            renderer.autoClear = false;
             viewport.appendChild(renderer.domElement);
             this._renderer = renderer;
 
             let scene, camera;
 
             if (sceneData.threeScene && sceneData.threeScene.scene) {
-                // New format: three.js editor JSON → ObjectLoader
                 const loader = new THREE.ObjectLoader();
                 scene = loader.parse(sceneData.threeScene.scene);
 
-                // Restore camera
                 if (sceneData.threeScene.camera) {
                     try { camera = loader.parse(sceneData.threeScene.camera); } catch (_) {}
                 }
-                if (!camera || !(camera.isCamera)) {
+                if (!camera || !camera.isCamera) {
                     camera = new THREE.PerspectiveCamera(50, w / h, 0.1, 10000);
                     camera.position.set(0, 0, 50);
                 }
 
-                // Renderer settings from project
                 const proj = sceneData.threeScene.project || {};
-                if (proj.shadows !== undefined) renderer.shadowMap.enabled = proj.shadows;
-                if (proj.physicallyCorrectLights) renderer.useLegacyLights = false;
+                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);
+                scene  = new THREE.Scene();
                 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();
+                    const ldr = new GLTFLoader();
                     for (const asset of sceneData.assets) {
                         if (asset.type === 'model' && asset.glbPath) {
-                            await new Promise(res => loader.load(asset.glbPath, gltf => {
+                            await new Promise(res => ldr.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);
@@ -104,27 +119,124 @@ export class IobrokerWebui3DScreenViewer extends BaseCustomWebComponentConstruct
                 }
             }
 
+            if (!scene.background) scene.background = new THREE.Color(0x222222);
+
+            const existingLights = [];
+            scene.traverse(o => { if (o.isLight) existingLights.push(o); });
+            if (existingLights.length === 0) {
+                scene.add(new THREE.AmbientLight(0xffffff, 0.6));
+                const dl = new THREE.DirectionalLight(0xffffff, 1.0);
+                dl.position.set(5, 10, 7.5);
+                scene.add(dl);
+            }
+
             camera.aspect = w / h;
             camera.updateProjectionMatrix();
 
             const controls = new OrbitControls(camera, renderer.domElement);
             controls.enableDamping = true;
 
-            // Script context helpers
+            // Auto-fit camera to scene mesh bounds
+            {
+                const box = new THREE.Box3();
+                scene.traverse(o => { if (o.isMesh || o.isPoints || o.isLine) box.expandByObject(o); });
+                if (!box.isEmpty()) {
+                    const center = new THREE.Vector3();
+                    const size   = new THREE.Vector3();
+                    box.getCenter(center);
+                    box.getSize(size);
+                    const maxDim = Math.max(size.x, size.y, size.z);
+                    const dist   = maxDim / (2 * Math.tan((camera.fov * Math.PI / 180) / 2)) * 1.5;
+                    camera.position.set(center.x + dist * 0.6, center.y + dist * 0.4, center.z + dist);
+                    camera.near = dist / 100;
+                    camera.far  = dist * 100;
+                    camera.updateProjectionMatrix();
+                    controls.target.copy(center);
+                    controls.update();
+                }
+            }
+
+            // ── Camera label ─────────────────────────────────────
+            const camLabel = this._getDomElement('camLabel');
+            const updateCamLabel = (cam) => {
+                if (!camLabel) return;
+                camLabel.textContent = cam.isOrthographicCamera ? 'Ortho' : 'Persp';
+            };
+            updateCamLabel(camera);
+
+            // ── Collect named cameras from scene ─────────────────
+            let activeCamera = camera;
+            const sceneCameras = [];
+            scene.traverse(obj => {
+                if (obj.isCamera && obj !== camera) sceneCameras.push(obj);
+            });
+
+            const switchCamera = (cam, btnEl) => {
+                activeCamera = cam;
+                activeCamera.aspect = viewport.clientWidth / viewport.clientHeight;
+                activeCamera.updateProjectionMatrix?.();
+                controls.object = activeCamera;
+                controls.update();
+                updateCamLabel(activeCamera);
+                // Update active button style
+                this._getDomElement('camButtons')
+                    ?.querySelectorAll('button')
+                    .forEach(b => b.classList.remove('active'));
+                if (btnEl) btnEl.classList.add('active');
+            };
+
+            // Build camera buttons
+            const camBtns = this._getDomElement('camButtons');
+            if (camBtns) {
+                // Default camera button
+                const btnDefault = document.createElement('button');
+                btnDefault.textContent = 'HOME';
+                btnDefault.classList.add('active');
+                btnDefault.addEventListener('click', () => switchCamera(camera, btnDefault));
+                camBtns.appendChild(btnDefault);
+
+                // Named scene cameras
+                sceneCameras.forEach((cam, i) => {
+                    const btn = document.createElement('button');
+                    btn.textContent = cam.name || ('CAM ' + (i + 1));
+                    btn.addEventListener('click', () => switchCamera(cam, btn));
+                    camBtns.appendChild(btn);
+                });
+            }
+
+            // ── Orientation gizmo ────────────────────────────────
+            let viewHelper = null;
+            try {
+                const { ViewHelper } = await import('three/addons/helpers/ViewHelper.js');
+                const gizmoCanvas = this._getDomElement('gizmoCanvas');
+                if (gizmoCanvas) {
+                    // ViewHelper renders into a sub-viewport of the main renderer
+                    viewHelper = new ViewHelper(activeCamera, renderer.domElement);
+                    viewHelper.center = controls.target;
+
+                    // Click on gizmo → snap camera
+                    gizmoCanvas.addEventListener('pointerdown', (e) => {
+                        // Map click to renderer domElement coords
+                        const rect = renderer.domElement.getBoundingClientRect();
+                        const gRect = gizmoCanvas.getBoundingClientRect();
+                        const synth = new PointerEvent('pointerdown', {
+                            clientX: gRect.left + (e.offsetX / gizmoCanvas.width)  * gRect.width,
+                            clientY: gRect.top  + (e.offsetY / gizmoCanvas.height) * gRect.height,
+                            bubbles: true
+                        });
+                        renderer.domElement.dispatchEvent(synth);
+                    });
+                }
+            } catch (_) { /* ViewHelper not available */ }
+
+            // ── Script context ───────────────────────────────────
             const frameCallbacks = [];
-            const selectCallbacks = [];
             const _subscriptions = [];
-
             const onFrame  = (fn) => frameCallbacks.push(fn);
-            const onSelect = (fn) => selectCallbacks.push(fn);
+            const onSelect = (fn) => {};
             const log      = (...args) => console.log('[3D]', ...args);
-
-            const setState = (id, val) => {
-                try { iobrokerHandler.setState(id, val); } catch (_) {}
-            };
-            const getState = async (id) => {
-                try { return await iobrokerHandler.getState(id); } catch (_) { return null; }
-            };
+            const setState = (id, val) => { try { iobrokerHandler.setState(id, val); } catch (_) {} };
+            const getState = async (id) => { try { return await iobrokerHandler.getState(id); } catch (_) { return null; } };
             const subscribe = (id, cb) => {
                 try {
                     const unsub = iobrokerHandler.subscribeState(id, cb);
@@ -132,11 +244,9 @@ export class IobrokerWebui3DScreenViewer extends BaseCustomWebComponentConstruct
                     return unsub;
                 } catch (_) { return () => {}; }
             };
+            const assets = new Map();
+            const mixers = new Map();
 
-            const assets  = new Map();
-            const mixers  = new Map();
-
-            // Run scene script if present
             if (sceneData.script) {
                 try {
                     const fn = new Function(
@@ -145,31 +255,54 @@ export class IobrokerWebui3DScreenViewer extends BaseCustomWebComponentConstruct
                         'assets', 'mixers', 'log',
                         sceneData.script
                     );
-                    fn(THREE, scene, camera, renderer, controls,
+                    fn(THREE, scene, activeCamera, renderer, controls,
                        onFrame, onSelect, setState, getState, subscribe,
                        assets, mixers, log);
                 } catch (e) { console.warn('3D scene script error:', e); }
             }
 
             this._animating = true;
-            this._cleanup = () => { _subscriptions.forEach(u => { try { u(); } catch (_) {} }); };
-            this._onResize = () => {
+            this._cleanup   = () => { _subscriptions.forEach(u => { try { u(); } catch (_) {} }); };
+            this._onResize  = () => {
                 const vw = viewport.clientWidth, vh = viewport.clientHeight;
-                camera.aspect = vw / vh;
-                camera.updateProjectionMatrix();
+                if (activeCamera.isPerspectiveCamera) {
+                    activeCamera.aspect = vw / vh;
+                    activeCamera.updateProjectionMatrix();
+                }
                 renderer.setSize(vw, vh);
+                if (viewHelper) viewHelper.camera = activeCamera;
             };
             window.addEventListener('resize', this._onResize);
 
+            // ── Render loop ──────────────────────────────────────
             let _lastTime = 0;
             const animate = (ts) => {
                 if (!this._animating) return;
                 requestAnimationFrame(animate);
                 const dt = _lastTime ? (ts - _lastTime) / 1000 : 0;
                 _lastTime = ts;
+
+                controls.object = activeCamera;
                 controls.update(dt);
+
                 for (const cb of frameCallbacks) { try { cb(dt, ts / 1000); } catch (_) {} }
-                renderer.render(scene, camera);
+
+                renderer.clear();
+                renderer.render(scene, activeCamera);
+
+                // Draw gizmo overlay (top-right corner)
+                if (viewHelper) {
+                    const size = 96 * window.devicePixelRatio;
+                    const cw   = renderer.domElement.width;
+                    const ch   = renderer.domElement.height;
+                    renderer.setViewport(cw - size, ch - size, size, size);
+                    renderer.setScissor(cw - size, ch - size, size, size);
+                    renderer.setScissorTest(true);
+                    viewHelper.camera = activeCamera;
+                    viewHelper.render(renderer);
+                    renderer.setScissorTest(false);
+                    renderer.setViewport(0, 0, cw, ch);
+                }
             };
             animate(0);