iobroker.mywebui 1.42.36 → 1.42.38

package/io-package.json

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

package/package.json

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

package/www/3d-lib/three.webgpu.js

@@ -1,3 +1,9 @@
-// three/webgpu stub — re-exports from standard Three.js bundle
-// Viewport.js only needs PMREMGenerator from this entry point
+// three/webgpu stub — re-exports standard Three.js + stubs WebGPU-only classes
 export * from './three.module.js';
+import { WebGLRenderer } from './three.module.js';
+
+// WebGPURenderer stub: falls back to WebGLRenderer so the editor doesn't crash
+export class WebGPURenderer extends WebGLRenderer {
+    constructor(params) { super(params); }
+    async init() {}
+}

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

@@ -1,5 +1,6 @@
 import { BaseCustomWebComponentConstructorAppend, css, html } from "@gokturk413/base-custom-webcomponent";
 import { iobrokerHandler } from "../common/IobrokerHandler.js";
+import './IobrokerWebui3DScreenPropertiesPanel.js';
 import './IobrokerWebuiMonacoEditor.js';
 
 // Base URL of the three.js editor files (resolved relative to this module)
@@ -97,6 +98,12 @@ export class IobrokerWebui3DScreenEditor extends BaseCustomWebComponentConstruct
 
         if (this._editor) this.sceneData.threeScene = this._editor.toJSON();
 
+        // Save ioBroker bindings from properties panel
+        const iobPropPanel = this._getDomElement('iobPropPanel');
+        if (iobPropPanel?.getBindings) {
+            this.sceneData.bindings = iobPropPanel.getBindings();
+        }
+
         try {
             const sceneType = this.getAttribute('scene-type') || '3dscreen';
             const ok = await iobrokerHandler.saveObject(sceneType, this.sceneData.name, this.sceneData);

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

@@ -0,0 +1,329 @@
+import { BaseCustomWebComponentConstructorAppend, css, html } from "@gokturk413/base-custom-webcomponent";
+import { iobrokerHandler } from "../common/IobrokerHandler.js";
+
+const EDITOR_BASE = new URL('../../../3d-editor/', import.meta.url).href;
+
+/**
+ * IobrokerWebui3DScreenPropertiesPanel
+ * Injected into the webui's "Properties" (attributeDock) when a 3D screen editor is active.
+ * Has sub-tabs: Scene | Object | Geom | Mater — no own bottom tab bar.
+ * connect(editor, editorHost) must be called after Three.js editor is ready.
+ */
+export class IobrokerWebui3DScreenPropertiesPanel extends BaseCustomWebComponentConstructorAppend {
+
+    static template = html`
+    <div id="root">
+        <!-- Sub-tab bar: Scene / Object / Geom / Mater -->
+        <div id="subBar">
+            <span class="stab active" data-sub="scene">Scene</span>
+            <span class="stab" data-sub="object">Object</span>
+            <span class="stab" data-sub="geom">Geom</span>
+            <span class="stab" data-sub="mater">Mater</span>
+        </div>
+
+        <!-- Sub-tab panels -->
+        <div id="subScene" class="spanel active"></div>
+
+        <div id="subObject" class="spanel" style="display:none;">
+            <!-- Three.js SidebarObject embedded here -->
+            <div id="objThreeWrap"></div>
+            <!-- ioBroker bindings section -->
+            <div id="bindSection">
+                <div class="sechdr">Bindings (ioBroker states)</div>
+                <div id="bindRows"></div>
+            </div>
+        </div>
+
+        <div id="subGeom" class="spanel" style="display:none;"></div>
+        <div id="subMater" class="spanel" style="display:none;"></div>
+
+        <!-- Binding dialog (inline overlay) -->
+        <div id="bdOverlay">
+            <div id="bdBox">
+                <div id="bdTitle">Binding — <span id="bdPropName"></span></div>
+                <div class="bdr">
+                    <div class="bdl">ioBroker State ID</div>
+                    <div style="display:flex;gap:4px;">
+                        <input id="bdSig" type="text" placeholder="mywebui.0.data.value" autocomplete="off" />
+                        <button id="bdBrowse">...</button>
+                    </div>
+                </div>
+                <div class="bdr">
+                    <div class="bdl">Formula <small>(use <b>val</b> for state value)</small></div>
+                    <input id="bdForm" type="text" placeholder="val" />
+                </div>
+                <div class="bdr" style="display:flex;align-items:center;gap:8px;">
+                    <input id="bdTw" type="checkbox" />
+                    <span style="color:#ccc;font-size:11px;">Two-way (write back)</span>
+                </div>
+                <div id="bdFoot">
+                    <button id="bdClear">Clear</button>
+                    <button id="bdCancel">Cancel</button>
+                    <button id="bdOk" class="primary">OK</button>
+                </div>
+            </div>
+        </div>
+    </div>
+    `;
+
+    static style = css`
+        :host { display:block;width:100%;height:100%;overflow:hidden; }
+        #root { width:100%;height:100%;display:flex;flex-direction:column;overflow:hidden;background:#1a1a1a;color:#ccc;font-family:Helvetica,Arial,sans-serif;font-size:12px;position:relative; }
+
+        /* Sub-tab bar */
+        #subBar { display:flex;background:#2d2d30;border-bottom:1px solid #3c3c3c;flex-shrink:0; }
+        .stab { padding:6px 12px;cursor:pointer;font-size:11px;color:#888;border-right:1px solid #3c3c3c;white-space:nowrap;user-select:none; }
+        .stab:hover { color:#ddd;background:#3e3e42; }
+        .stab.active { color:#fff;background:#1e1e1e;border-top:2px solid #4ec9b0; }
+
+        /* Sub-tab panels */
+        .spanel { flex:1;overflow:auto;min-height:0; }
+
+        /* Section header */
+        .sechdr { background:#2d2d30;color:#9cdcfe;padding:5px 8px;font-size:10px;font-weight:bold;text-transform:uppercase;border-top:1px solid #3c3c3c;border-bottom:1px solid #3c3c3c;letter-spacing:.5px; }
+
+        /* Binding rows */
+        #bindRows { padding:2px 0; }
+        .brow { display:flex;align-items:center;padding:3px 6px;gap:5px;border-bottom:1px solid #252526;min-height:22px; }
+        .brow:hover { background:#252526; }
+        .blbl { width:96px;color:#888;font-size:10px;flex-shrink:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
+        .bsig { flex:1;color:#4ec9b0;font-size:10px;font-family:monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
+        .bsig.none { color:#555; }
+        .bedit { padding:1px 6px;background:#2d2d30;border:1px solid #555;color:#ccc;cursor:pointer;font-size:10px;flex-shrink:0; }
+        .bedit:hover { border-color:#4ec9b0;color:#4ec9b0; }
+
+        /* Three.js panel host — reset some Three.js CSS for dark bg */
+        #objThreeWrap { overflow:auto; }
+        #subScene { overflow:auto; }
+        #subGeom  { overflow:auto; }
+        #subMater { overflow:auto; }
+
+        /* Binding dialog */
+        #bdOverlay { display:none;position:absolute;inset:0;background:rgba(0,0,0,0.78);z-index:300;align-items:center;justify-content:center; }
+        #bdOverlay.open { display:flex; }
+        #bdBox { background:#252526;border:1px solid #555;border-radius:4px;padding:14px;width:90%;max-width:310px;color:#ccc;font-size:12px; }
+        #bdTitle { font-weight:bold;color:#9cdcfe;margin-bottom:10px;font-size:12px; }
+        .bdr { margin-bottom:8px; }
+        .bdl { color:#888;font-size:10px;margin-bottom:3px; }
+        .bdr input[type="text"] { width:100%;background:#3c3c3c;border:1px solid #555;color:#ccc;padding:4px;font-size:11px;box-sizing:border-box; }
+        .bdr input[type="text"]:focus { border-color:#4ec9b0;outline:none; }
+        #bdBrowse { padding:3px 8px;background:#3c3c3c;border:1px solid #555;color:#ccc;cursor:pointer;font-size:11px; }
+        #bdFoot { display:flex;justify-content:flex-end;gap:6px;margin-top:12px; }
+        #bdFoot button { padding:4px 12px;border:1px solid #555;background:#3c3c3c;color:#ccc;cursor:pointer;font-size:11px; }
+        #bdFoot button.primary { background:#0e639c;border-color:#1177bb;color:#fff; }
+    `;
+
+    _editor = null;
+    _editorHost = null;
+    _bindings = {};
+    _selectedObj = null;
+    _bindTarget = null;
+
+    // ── Public API ─────────────────────────────────────────────────────────────
+
+    async connect(editor, editorHost) {
+        this._editor     = editor;
+        this._editorHost = editorHost;
+        this._bindings   = editorHost?.sceneData?.bindings ?? {};
+
+        await this._injectThreeCSS();
+        await this._mountThreePanels();
+        this._setupSubTabs();
+        this._setupBindingRows();
+        this._setupBindingDialog();
+
+        editor.signals.objectSelected.add(obj => {
+            this._selectedObj = obj;
+            this._refreshBindRows();
+        });
+        editor.signals.objectChanged.add(obj => {
+            if (obj && obj === this._selectedObj) this._refreshBindRows();
+        });
+
+        this._refreshBindRows();
+    }
+
+    getBindings() { return this._bindings; }
+
+    setBindings(b) {
+        this._bindings = b || {};
+        this._refreshBindRows();
+    }
+
+    // ── Three.js CSS ────────────────────────────────────────────────────────────
+
+    async _injectThreeCSS() {
+        const sr = this.shadowRoot;
+        if (!sr || sr.querySelector('#tcss')) return;
+        const l = document.createElement('link');
+        l.id = 'tcss'; l.rel = 'stylesheet';
+        l.href = EDITOR_BASE + 'css/main.css';
+        sr.appendChild(l);
+    }
+
+    // ── Mount Three.js sidebar sub-panels ──────────────────────────────────────
+
+    async _mountThreePanels() {
+        const base = EDITOR_BASE + 'js/';
+        const ed = this._editor;
+        const [
+            { SidebarScene },
+            { SidebarObject },
+            { SidebarGeometry },
+            { SidebarMaterial },
+        ] = await Promise.all([
+            import(/* @vite-ignore */ base + 'Sidebar.Scene.js'),
+            import(/* @vite-ignore */ base + 'Sidebar.Object.js'),
+            import(/* @vite-ignore */ base + 'Sidebar.Geometry.js'),
+            import(/* @vite-ignore */ base + 'Sidebar.Material.js'),
+        ]);
+
+        this._getDomElement('subScene').appendChild(new SidebarScene(ed).dom);
+        this._getDomElement('objThreeWrap').appendChild(new SidebarObject(ed).dom);
+        this._getDomElement('subGeom').appendChild(new SidebarGeometry(ed).dom);
+        this._getDomElement('subMater').appendChild(new SidebarMaterial(ed).dom);
+    }
+
+    // ── Sub-tabs ────────────────────────────────────────────────────────────────
+
+    _setupSubTabs() {
+        const bar = this._getDomElement('subBar');
+        const panels = {
+            scene:  this._getDomElement('subScene'),
+            object: this._getDomElement('subObject'),
+            geom:   this._getDomElement('subGeom'),
+            mater:  this._getDomElement('subMater'),
+        };
+        bar?.querySelectorAll('.stab').forEach(btn => {
+            btn.addEventListener('click', () => {
+                bar.querySelectorAll('.stab').forEach(b => b.classList.remove('active'));
+                btn.classList.add('active');
+                Object.values(panels).forEach(p => { if (p) p.style.display = 'none'; });
+                const p = panels[btn.dataset.sub];
+                if (p) p.style.display = 'block';
+            });
+        });
+    }
+
+    // ── Bindable properties list ────────────────────────────────────────────────
+
+    _BINDABLE = [
+        { key: 'position.x',       label: 'Position X' },
+        { key: 'position.y',       label: 'Position Y' },
+        { key: 'position.z',       label: 'Position Z' },
+        { key: 'rotation.x',       label: 'Rotation X (°)' },
+        { key: 'rotation.y',       label: 'Rotation Y (°)' },
+        { key: 'rotation.z',       label: 'Rotation Z (°)' },
+        { key: 'scale.x',          label: 'Scale X' },
+        { key: 'scale.y',          label: 'Scale Y' },
+        { key: 'scale.z',          label: 'Scale Z' },
+        { key: 'visible',          label: 'Visible' },
+        { key: 'material.opacity', label: 'Opacity' },
+        { key: 'material.color',   label: 'Color (hex)' },
+    ];
+
+    _setupBindingRows() {
+        const cont = this._getDomElement('bindRows');
+        if (!cont) return;
+        cont.innerHTML = '';
+        this._BINDABLE.forEach(({ key, label }) => {
+            const row = document.createElement('div');
+            row.className = 'brow';
+            row.dataset.key = key;
+
+            const lbl = document.createElement('span');
+            lbl.className = 'blbl';
+            lbl.textContent = label;
+
+            const sig = document.createElement('span');
+            sig.className = 'bsig none';
+            sig.textContent = '—';
+
+            const btn = document.createElement('button');
+            btn.className = 'bedit';
+            btn.textContent = '□ bind';
+            btn.addEventListener('click', () => this._openBindDlg(key, label));
+
+            row.appendChild(lbl);
+            row.appendChild(sig);
+            row.appendChild(btn);
+            cont.appendChild(row);
+        });
+    }
+
+    _refreshBindRows() {
+        const cont = this._getDomElement('bindRows');
+        if (!cont) return;
+        const uuid = this._selectedObj?.uuid;
+        cont.querySelectorAll('.brow').forEach(row => {
+            const key  = row.dataset.key;
+            const sig  = row.querySelector('.bsig');
+            const btn  = row.querySelector('.bedit');
+            const bind = uuid ? this._bindings[uuid]?.[key] : null;
+            if (sig) { sig.textContent = bind?.signal || '—'; sig.className = 'bsig' + (bind?.signal ? '' : ' none'); }
+            if (btn) { btn.textContent = bind?.signal ? '■ bound' : '□ bind'; btn.style.color = bind?.signal ? '#4ec9b0' : ''; }
+        });
+    }
+
+    // ── Binding dialog ──────────────────────────────────────────────────────────
+
+    _setupBindingDialog() {
+        const ov = this._getDomElement('bdOverlay');
+
+        this._getDomElement('bdCancel')?.addEventListener('click', () => {
+            ov?.classList.remove('open'); this._bindTarget = null;
+        });
+
+        this._getDomElement('bdClear')?.addEventListener('click', () => {
+            const { uuid, key } = this._bindTarget || {};
+            if (uuid && key) {
+                delete this._bindings[uuid]?.[key];
+                if (this._bindings[uuid] && !Object.keys(this._bindings[uuid]).length) delete this._bindings[uuid];
+                this._syncHost(); this._refreshBindRows();
+            }
+            ov?.classList.remove('open'); this._bindTarget = null;
+        });
+
+        this._getDomElement('bdOk')?.addEventListener('click', () => {
+            const { uuid, key } = this._bindTarget || {};
+            const signal  = this._getDomElement('bdSig')?.value?.trim();
+            const formula = this._getDomElement('bdForm')?.value?.trim() || 'val';
+            const twoWay  = this._getDomElement('bdTw')?.checked ?? false;
+            if (uuid && key && signal) {
+                if (!this._bindings[uuid]) this._bindings[uuid] = {};
+                this._bindings[uuid][key] = { signal, formula, twoWay };
+                this._syncHost(); this._refreshBindRows();
+            }
+            ov?.classList.remove('open'); this._bindTarget = null;
+        });
+
+        this._getDomElement('bdBrowse')?.addEventListener('click', async () => {
+            try {
+                const id = await iobrokerHandler.showSelectIdDialog?.();
+                if (id) { const inp = this._getDomElement('bdSig'); if (inp) inp.value = id; }
+            } catch (_) {}
+        });
+    }
+
+    _openBindDlg(key, label) {
+        if (!this._selectedObj) { alert('Select a 3D object first.'); return; }
+        const uuid = this._selectedObj.uuid;
+        this._bindTarget = { uuid, key };
+        const ex = this._bindings[uuid]?.[key];
+        const sigEl  = this._getDomElement('bdSig');
+        const frmEl  = this._getDomElement('bdForm');
+        const twEl   = this._getDomElement('bdTw');
+        const nmEl   = this._getDomElement('bdPropName');
+        if (sigEl)  sigEl.value  = ex?.signal  || '';
+        if (frmEl)  frmEl.value  = ex?.formula || 'val';
+        if (twEl)   twEl.checked = ex?.twoWay  || false;
+        if (nmEl)   nmEl.textContent = label + ' [' + (this._selectedObj.name || uuid.slice(0,8)) + ']';
+        this._getDomElement('bdOverlay')?.classList.add('open');
+    }
+
+    _syncHost() {
+        if (this._editorHost?.sceneData) this._editorHost.sceneData.bindings = this._bindings;
+    }
+}
+
+customElements.define('iobroker-webui-3dscreen-properties', IobrokerWebui3DScreenPropertiesPanel);

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

@@ -235,6 +235,68 @@ export class IobrokerWebui3DScreenViewer extends BaseCustomWebComponentConstruct
             const assets = new Map();
             const mixers = new Map();
 
+            // ── ioBroker state bindings ──────────────────────────────────────
+            if (sceneData.bindings && Object.keys(sceneData.bindings).length > 0) {
+                const objectByUUID = {};
+                scene.traverse(obj => { objectByUUID[obj.uuid] = obj; });
+
+                const applyBinding = (obj, prop, rawVal) => {
+                    try {
+                        const parts = prop.split('.');
+                        if (parts.length === 2) {
+                            const [p0, p1] = parts;
+                            if (obj[p0] == null) return;
+                            if (p0 === 'rotation') {
+                                // store as degrees, apply as radians
+                                obj[p0][p1] = parseFloat(rawVal) * DEG2RAD_RT;
+                            } else if (p0 === 'material' && p1 === 'color') {
+                                obj[p0]?.color?.set?.(rawVal);
+                                if (obj[p0]) obj[p0].needsUpdate = true;
+                            } else if (p0 === 'material') {
+                                if (obj[p0] != null) { obj[p0][p1] = parseFloat(rawVal); obj[p0].needsUpdate = true; }
+                            } else {
+                                obj[p0][p1] = parseFloat(rawVal);
+                            }
+                            obj.updateMatrixWorld?.(true);
+                        } else if (parts.length === 1) {
+                            if (prop === 'visible') obj.visible = !!rawVal;
+                        }
+                    } catch (_) {}
+                };
+
+                const DEG2RAD_RT = Math.PI / 180;
+
+                for (const [uuid, propMap] of Object.entries(sceneData.bindings)) {
+                    const obj = objectByUUID[uuid];
+                    if (!obj) continue;
+                    for (const [prop, cfg] of Object.entries(propMap)) {
+                        if (!cfg?.signal) continue;
+                        (async () => {
+                            // Apply current value immediately
+                            try {
+                                const state = await iobrokerHandler.getState(cfg.signal);
+                                if (state?.val != null) {
+                                    const val = cfg.formula && cfg.formula !== 'val'
+                                        ? new Function('val', `return (${cfg.formula})`)(state.val)
+                                        : state.val;
+                                    applyBinding(obj, prop, val);
+                                }
+                            } catch (_) {}
+
+                            // Subscribe for future changes
+                            const unsub = subscribe(cfg.signal, (id, state) => {
+                                if (state?.val == null) return;
+                                const val = cfg.formula && cfg.formula !== 'val'
+                                    ? new Function('val', `return (${cfg.formula})`)(state.val)
+                                    : state.val;
+                                applyBinding(obj, prop, val);
+                            });
+                            _subscriptions.push(unsub);
+                        })();
+                    }
+                }
+            }
+
             if (sceneData.script) {
                 try {
                     const fn = new Function(

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

@@ -108,7 +108,7 @@ export class IobrokerWebuiAppShell extends BaseCustomWebComponentConstructorAppe
           <div id="visibilityDock" title="Visibility" style="overflow: auto; width: 100%;" dock-spawn-dock-to="attributeDock">
           </div>
 
-          <div id="effectsDock" title="Effects" style="overflow: auto; width: 100%;" dock-spawn-dock-to="attributeDock">
+          <div id="effectsDock" title="Effects / Project" style="overflow: auto; width: 100%;" dock-spawn-dock-to="attributeDock">
           </div>
 
           <div id="animationsDock" title="Animations" style="overflow: auto; width: 100%;" dock-spawn-dock-to="attributeDock">
@@ -182,11 +182,15 @@ export class IobrokerWebuiAppShell extends BaseCustomWebComponentConstructorAppe
                     let element = this._dock.getElementInSlot(previousPanel.elementContent);
                     if (element?.deactivated)
                         element?.deactivated();
+                    if (element instanceof IobrokerWebui3DScreenEditor)
+                        this._deactivate3DPropertiesMode();
                 }
                 if (panel) {
                     let element = this._dock.getElementInSlot(panel.elementContent);
                     if (element?.activated)
                         element?.activated();
+                    if (element instanceof IobrokerWebui3DScreenEditor)
+                        this._activate3DPropertiesMode(element);
                 }
             },
             onClosePanel: (manager, panel) => {
@@ -2129,6 +2133,188 @@ export class IobrokerWebuiAppShell extends BaseCustomWebComponentConstructorAppe
             this.openDock(scriptEditor);
         }
     }
+
+    // ── 3D Screen Properties Mode ──────────────────────────────────────────────
+
+    _3dPropsActive = false;
+    _3dPropsPanel  = null;
+    _3dSettPanel   = null;
+    _3dProjPanel   = null;
+
+    _activate3DPropertiesMode(editor3DEl) {
+        if (this._3dPropsActive) return;
+        this._3dPropsActive = true;
+
+        // Helper: hide existing children and track state
+        const hideChildren = (el) => {
+            for (const c of el.children) {
+                c.__3d_prev_display = c.style.display;
+                c.style.display = 'none';
+            }
+        };
+        // Helper: restore
+        const showChildren = (el) => {
+            for (const c of el.children) {
+                if (c.__3d_prev_display !== undefined) {
+                    c.style.display = c.__3d_prev_display;
+                    delete c.__3d_prev_display;
+                }
+            }
+        };
+
+        const attrDock  = this._getDomElement('attributeDock');
+        const settiDock = this._getDomElement('settingsDock');
+        const projDock  = this._getDomElement('effectsDock');   // reuse effectsDock for Project
+
+        if (attrDock)  hideChildren(attrDock);
+        if (settiDock) hideChildren(settiDock);
+        if (projDock)  hideChildren(projDock);
+
+        const tryConnect = () => {
+            if (!editor3DEl._editor) { setTimeout(tryConnect, 200); return; }
+            const ed = editor3DEl._editor;
+            const base = new URL('../../../3d-editor/js/', import.meta.url).href;
+
+            // ── attributeDock: Scene / Object / Geom / Mater ───────────────
+            if (attrDock) {
+                const propPanel = document.createElement('iobroker-webui-3dscreen-properties');
+                propPanel.id = '__3d_attr';
+                propPanel.style.cssText = 'display:block;width:100%;height:100%;';
+                attrDock.appendChild(propPanel);
+                propPanel.connect(ed, editor3DEl).catch(e => console.warn('3D props connect:', e));
+                this._3dPropsPanel = propPanel;
+            }
+
+            // ── settingsDock: SidebarSettings + Visibility ─────────────────
+            if (settiDock) {
+                const wrap = document.createElement('div');
+                wrap.id = '__3d_setti';
+                wrap.style.cssText = 'width:100%;height:100%;overflow:auto;background:#1a1a1a;color:#ccc;font-family:Helvetica,Arial,sans-serif;font-size:12px;';
+
+                Promise.all([
+                    import(/* @vite-ignore */ base + 'Sidebar.Settings.js'),
+                ]).then(([{ SidebarSettings }]) => {
+                    const settPanel = new SidebarSettings(ed);
+                    settPanel.dom.style.cssText = 'padding:8px;';
+                    wrap.appendChild(settPanel.dom);
+
+                    // ── Visibility section ─────────────────────────────────
+                    const visDiv = document.createElement('div');
+                    visDiv.style.cssText = 'border-top:1px solid #3c3c3c;margin-top:8px;padding:10px;';
+                    visDiv.innerHTML = `
+                        <div style="color:#9cdcfe;font-size:10px;font-weight:bold;text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px;">
+                            Screen Visibility Control
+                        </div>
+                        <label style="display:flex;align-items:center;gap:8px;margin-bottom:8px;cursor:pointer;font-size:11px;">
+                            <input type="checkbox" id="__3d_vis_en" />
+                            Enable Visibility Control
+                        </label>
+                        <div style="font-size:11px;color:#888;margin-bottom:4px;">Only for groups:</div>
+                        <div id="__3d_vis_groups" style="border:1px solid #444;padding:6px;max-height:100px;overflow-y:auto;background:#111;font-size:11px;margin-bottom:8px;">
+                            <span style="color:#555;">Loading...</span>
+                        </div>
+                        <div style="font-size:11px;color:#888;margin-bottom:4px;">If not in group:</div>
+                        <select id="__3d_vis_act" style="width:100%;background:#3c3c3c;border:1px solid #555;color:#ccc;padding:4px;font-size:11px;margin-bottom:8px;">
+                            <option value="hide">Show "Access Denied"</option>
+                            <option value="redirect">Redirect to screen</option>
+                        </select>
+                        <div id="__3d_vis_rdiv" style="display:none;">
+                            <div style="font-size:11px;color:#888;margin-bottom:4px;">Redirect screen:</div>
+                            <input id="__3d_vis_redir" type="text" style="width:100%;background:#3c3c3c;border:1px solid #555;color:#ccc;padding:4px;font-size:11px;box-sizing:border-box;" />
+                        </div>
+                    `;
+
+                    const settings = editor3DEl.sceneData?.settings ?? {};
+                    editor3DEl.sceneData = editor3DEl.sceneData ?? {};
+                    editor3DEl.sceneData.settings = settings;
+                    if (!settings.visibilityEnabled)      settings.visibilityEnabled = false;
+                    if (!settings.visibilityGroups)       settings.visibilityGroups  = [];
+                    if (!settings.visibilityAction)       settings.visibilityAction  = 'hide';
+                    if (!settings.visibilityRedirectScreen) settings.visibilityRedirectScreen = '';
+
+                    const save = () => {};
+                    const enEl  = visDiv.querySelector('#__3d_vis_en');
+                    const actEl = visDiv.querySelector('#__3d_vis_act');
+                    const rdDiv = visDiv.querySelector('#__3d_vis_rdiv');
+                    const rdEl  = visDiv.querySelector('#__3d_vis_redir');
+
+                    if (enEl)  { enEl.checked = settings.visibilityEnabled; enEl.addEventListener('change', e => { settings.visibilityEnabled = e.target.checked; }); }
+                    if (actEl) { actEl.value = settings.visibilityAction; actEl.addEventListener('change', e => { settings.visibilityAction = e.target.value; if (rdDiv) rdDiv.style.display = e.target.value === 'redirect' ? 'block' : 'none'; }); }
+                    if (rdDiv) rdDiv.style.display = settings.visibilityAction === 'redirect' ? 'block' : 'none';
+                    if (rdEl)  { rdEl.value = settings.visibilityRedirectScreen || ''; rdEl.addEventListener('input', e => { settings.visibilityRedirectScreen = e.target.value; }); }
+
+                    // Load groups
+                    const grpEl = visDiv.querySelector('#__3d_vis_groups');
+                    iobrokerHandler.getUserGroups?.().then(groups => {
+                        if (!grpEl) return;
+                        if (!groups?.length) { grpEl.innerHTML = '<span style="color:#555;">No groups</span>'; return; }
+                        grpEl.innerHTML = '';
+                        groups.forEach(g => {
+                            const id  = typeof g === 'string' ? g : (g.id ?? g._id ?? g.name ?? g);
+                            const lbl = typeof g === 'string' ? g : (g.name ?? id);
+                            const chk = (settings.visibilityGroups || []).includes(id);
+                            const row = document.createElement('label');
+                            row.style.cssText = 'display:flex;align-items:center;gap:6px;padding:2px 0;cursor:pointer;';
+                            row.innerHTML = `<input type="checkbox" ${chk ? 'checked' : ''} />${lbl}`;
+                            row.querySelector('input').addEventListener('change', ev => {
+                                const arr = settings.visibilityGroups || [];
+                                if (ev.target.checked) { if (!arr.includes(id)) arr.push(id); }
+                                else { const i = arr.indexOf(id); if (i >= 0) arr.splice(i, 1); }
+                                settings.visibilityGroups = arr;
+                            });
+                            grpEl.appendChild(row);
+                        });
+                    }).catch(() => { if (grpEl) grpEl.innerHTML = '<span style="color:#555;">—</span>'; });
+
+                    wrap.appendChild(visDiv);
+                });
+
+                settiDock.appendChild(wrap);
+                this._3dSettPanel = wrap;
+            }
+
+            // ── effectsDock: SidebarProject (Geometries / Materials / Textures) ──
+            if (projDock) {
+                const wrap = document.createElement('div');
+                wrap.id = '__3d_proj';
+                wrap.style.cssText = 'width:100%;height:100%;overflow:auto;background:#1a1a1a;';
+                import(/* @vite-ignore */ base + 'Sidebar.Project.js').then(({ SidebarProject }) => {
+                    const p = new SidebarProject(ed);
+                    p.dom.style.cssText = 'padding:8px;';
+                    wrap.appendChild(p.dom);
+                });
+                projDock.appendChild(wrap);
+                this._3dProjPanel = wrap;
+            }
+        };
+
+        tryConnect();
+    }
+
+    _deactivate3DPropertiesMode() {
+        if (!this._3dPropsActive) return;
+        this._3dPropsActive = false;
+
+        const restore = (dockId, panelEl) => {
+            const dock = this._getDomElement(dockId);
+            if (!dock) return;
+            panelEl?.remove();
+            for (const c of dock.children) {
+                if (c.__3d_prev_display !== undefined) {
+                    c.style.display = c.__3d_prev_display;
+                    delete c.__3d_prev_display;
+                }
+            }
+        };
+
+        restore('attributeDock',  this._3dPropsPanel);
+        restore('settingsDock',   this._3dSettPanel);
+        restore('effectsDock',    this._3dProjPanel);
+
+        this._3dPropsPanel = null;
+        this._3dSettPanel  = null;
+        this._3dProjPanel  = null;
+    }
 }
 window.customElements.define('iobroker-webui-app-shell', IobrokerWebuiAppShell);
 const err = console.error;

package/www/dist/importmaps/importmap-config.js

@@ -49,6 +49,7 @@ const importMapConfig = {
         "toastify-js": "./node_modules/toastify-js/src/toastify-es.js",
         "@iobroker/webcomponent-selectid-dialog/": "./node_modules/@iobroker/webcomponent-selectid-dialog/",
         "three": "./3d-lib/three.module.js",
+        "three/webgpu": "./3d-lib/three.webgpu.js",
         "three/addons/": "./3d-lib/jsm/",
         "three-gpu-pathtracer": "data:text/javascript,export class WebGLPathTracer{constructor(){}setScene(){}renderSample(){}updateCamera(){}updateEnvironment(){}updateMaterials(){}get samples(){return 0;}filterGlossyFactor=0.5;}",
         "three-mesh-bvh": "data:text/javascript,export const MeshBVH={};export const acceleratedRaycast=()=>{};export const computeBoundsTree=()=>{};export const disposeBoundsTree=()=>{};"