iobroker.mywebui 1.42.33 → 1.42.35

package/io-package.json

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

package/package.json

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

@@ -273,8 +273,12 @@ export class IobrokerWebui3DScreenEditor extends BaseCustomWebComponentConstruct
         // Dispatch resize after layout is complete (container may have 0 size on first tick)
         requestAnimationFrame(() => {
             editor.signals.windowResize.dispatch();
-            // Second dispatch in case WebGL canvas needs re-init
-            requestAnimationFrame(() => editor.signals.windowResize.dispatch());
+            requestAnimationFrame(() => {
+                editor.signals.windowResize.dispatch();
+                // Force continuous render so ViewHelper gizmo is always visible
+                // The three.js editor renders on-demand; we keep it alive via sceneGraphChanged
+                editor.signals.sceneGraphChanged.dispatch();
+            });
         });
     }
 

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

@@ -5,17 +5,37 @@ 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>
+
+            <!-- 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 +47,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 +57,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,46 +67,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  = new THREE.Scene();
                 camera = new THREE.PerspectiveCamera(75, w / h, 0.1, 1000);
                 camera.position.set(10, 10, 10);
 
                 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);
@@ -98,10 +113,8 @@ export class IobrokerWebui3DScreenViewer extends BaseCustomWebComponentConstruct
                 }
             }
 
-            // Ensure scene has a visible background
             if (!scene.background) scene.background = new THREE.Color(0x222222);
 
-            // Ensure scene has at least one light source
             const existingLights = [];
             scene.traverse(o => { if (o.isLight) existingLights.push(o); });
             if (existingLights.length === 0) {
@@ -117,12 +130,10 @@ export class IobrokerWebui3DScreenViewer extends BaseCustomWebComponentConstruct
             const controls = new OrbitControls(camera, renderer.domElement);
             controls.enableDamping = true;
 
-            // Auto-fit camera to scene content after scene/controls are ready
+            // 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);
-                });
+                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();
@@ -139,21 +150,81 @@ export class IobrokerWebui3DScreenViewer extends BaseCustomWebComponentConstruct
                 }
             }
 
-            // Script context helpers
+            // ── 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');
+                // ViewHelper renders into a sub-viewport of the main WebGL canvas
+                viewHelper = new ViewHelper(activeCamera, renderer.domElement);
+                viewHelper.center = controls.target;
+                // Top-right corner (8px from top, 8px from right)
+                viewHelper.location.top   = 8;
+                viewHelper.location.right = 8;
+                viewHelper.location.left  = null;
+                viewHelper.location.bottom = null;
+
+                // Forward clicks on the canvas to ViewHelper for camera snapping
+                renderer.domElement.addEventListener('pointerup', (e) => {
+                    if (viewHelper.animating) viewHelper.handleClick(e);
+                });
+            } 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);
@@ -161,11 +232,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(
@@ -174,31 +243,50 @@ 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);
+
+                // ViewHelper manages its own sub-viewport — just call render
+                if (viewHelper) {
+                    viewHelper.camera = activeCamera;
+                    viewHelper.center = controls.target;
+                    if (viewHelper.animating) viewHelper.update(dt);
+                    renderer.autoClear = false;
+                    viewHelper.render(renderer);
+                    renderer.autoClear = false; // keep false for next frame
+                }
             };
             animate(0);