iobroker.mywebui 1.42.18 → 1.42.19

package/io-package.json

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

package/package.json

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

package/www/dist/frontend/common/IobrokerHandler.js

@@ -37,6 +37,7 @@ export class IobrokerHandler {
         this.#cache.set('screen', new Map());
         this.#cache.set('control', new Map());
         this.#cache.set('3dscreen', new Map());
+        this.#cache.set('3dcontrol', new Map());
     }
     getNormalizedSignalName(id, relativeSignalPath, element) {
         return (relativeSignalPath ?? '') + id;
@@ -208,6 +209,8 @@ export class IobrokerHandler {
             return this.getCustomControl(name);
         else if (type == '3dscreen')
             return this.get3DScreen(name);
+        else if (type == '3dcontrol')
+            return this.get3DControl(name);
         return null;
     }
     async getScreen(name) {
@@ -244,6 +247,23 @@ export class IobrokerHandler {
         }
         return scene;
     }
+    async get3DControl(name) {
+        if (name[0] == '/')
+            name = name.substring(1);
+        let ctrl = this.#cache.get('3dcontrol').get(name);
+        if (!ctrl) {
+            if (this._readyPromises)
+                await this.waitForReady();
+            try {
+                ctrl = await this._getObjectFromFile(this.configPath + "3dcontrols/" + name + '.3dcontrol');
+            }
+            catch (err) {
+                console.error("Error reading 3D Control", ctrl, err);
+            }
+            this.#cache.get('3dcontrol').set(name, ctrl);
+        }
+        return ctrl;
+    }
     async saveObject(type, name, data) {
         await this._saveObjectToFile(data, "/" + this.configPath + type + "s/" + name + '.' + type);
         if (this.#cache.has(type))

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

@@ -1,5 +1,6 @@
 import { iobrokerHandler } from '../common/IobrokerHandler.js';
 import { IobrokerWebuiScreenEditor, defaultNewStyle, defaultNewControlScript } from './IobrokerWebuiScreenEditor.js';
+import { IobrokerWebui3DScreenEditor } from './IobrokerWebui3DScreenEditor.js';
 export class CommandHandling {
     dockManager;
     iobrokerWebuiAppShell;
@@ -17,6 +18,10 @@ export class CommandHandling {
             if (target instanceof IobrokerWebuiScreenEditor) {
                 window.open("runtime.html#screenName=" + target.name);
             }
+            else if (target instanceof IobrokerWebui3DScreenEditor) {
+                const scName = target.sceneData?.name || target.getAttribute?.('scene-name') || '';
+                window.open("runtime.html#3dscreen=" + encodeURIComponent(scName));
+            }
             else {
                 window.open("runtime.html");
             }

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

@@ -380,10 +380,13 @@ export class IobrokerWebui3DScreenEditor extends BaseCustomWebComponentConstruct
 
     async loadScene(sceneName) {
         try {
-            this.sceneData = await iobrokerHandler.get3DScreen(sceneName);
+            const sceneType = this.getAttribute('scene-type') || '3dscreen';
+            this.sceneData = sceneType === '3dcontrol'
+                ? await iobrokerHandler.getWebuiObject('3dcontrol', sceneName)
+                : await iobrokerHandler.get3DScreen(sceneName);
             if (!this.sceneData) { console.warn('Scene not found:', sceneName); return; }
-            // Ensure script/style fields exist
-            if (!this.sceneData.script) this.sceneData.script = '';
+            // Ensure script/style fields exist with default boilerplate
+            if (!this.sceneData.script) this.sceneData.script = `// Available: THREE, scene, camera, renderer, controls\n// assets (Map<name, Object3D>)  mixers  driveEngine\n// setState(signal, val)  getState(signal)  subscribe(signal, cb)\n// onFrame(fn)  onSelect(fn)  log(...)\n\nonFrame((dt, ts) => {\n    // Runs every animation frame. dt = delta seconds.\n});\n`;
             if (!this.sceneData.style)  this.sceneData.style  = '';
             console.log('Scene loaded:', sceneName);
             this._buildSceneView();
@@ -1113,51 +1116,99 @@ export class IobrokerWebui3DScreenEditor extends BaseCustomWebComponentConstruct
 
     // ── Library tab in left panel ─────────────────────────
 
-    _renderLibraryTab(el) {
+    async _renderLibraryTab(el) {
         el.innerHTML = '';
         const search = (this._getDomElement('treeSearch')?.value ?? '').toLowerCase();
-        const assets = Array.isArray(this.sceneData?.assets) ? this.sceneData.assets : [];
-        const filtered = assets.filter(a => !search || a.name.toLowerCase().includes(search));
 
         // Show/hide add button
         const addRow = this._getDomElement('libAddRow');
         if (addRow) addRow.style.display = '';
 
-        if (filtered.length === 0) {
-            el.innerHTML = `<div style="color:#555;padding:16px 8px;font-size:11px;text-align:center;line-height:1.8;">
-                No 3D components yet.<br>
-                <span style="color:#9cdcfe;">Import GLB</span> to create<br>a reusable component.
-            </div>`;
-            return;
+        // ── Section 1: Scene-local assets (instances) ──────────────────
+        const assets = Array.isArray(this.sceneData?.assets) ? this.sceneData.assets : [];
+        const filteredAssets = assets.filter(a => !search || a.name.toLowerCase().includes(search));
+
+        const secHdr1 = document.createElement('div');
+        secHdr1.style.cssText = 'padding:4px 8px;color:#888;font-size:10px;text-transform:uppercase;letter-spacing:0.5px;background:#2d2d2d;border-bottom:1px solid #3c3c3c;';
+        secHdr1.textContent = 'Scene Assets';
+        el.appendChild(secHdr1);
+
+        if (filteredAssets.length === 0) {
+            const empty = document.createElement('div');
+            empty.style.cssText = 'color:#555;padding:8px;font-size:11px;text-align:center;';
+            empty.textContent = 'No local assets';
+            el.appendChild(empty);
+        } else {
+            for (const asset of filteredAssets) {
+                const shortName = asset.name.replace(/\.(glb|gltf)$/i, '');
+                const driveCnt  = asset.drives?.length ?? 0;
+                const clipCnt   = asset.availableClips?.length ?? 0;
+                const interCnt  = Object.keys(asset.interactions ?? {}).length;
+                const meta = [driveCnt?`${driveCnt}D`:'', clipCnt?`${clipCnt}A`:'', interCnt?`${interCnt}I`:''].filter(Boolean).join(' · ') || 'GLB';
+                const item = document.createElement('div');
+                item.className = 'lib-item';
+                item.innerHTML = `<span class="lib-icon">📦</span><div class="lib-info"><div class="lib-name" title="${asset.name}">${shortName}</div><div class="lib-meta">${meta}</div></div><span class="lib-add" title="Add instance">+</span>`;
+                item.querySelector('.lib-add')?.addEventListener('click', (e) => { e.stopPropagation(); this._addAssetInstance(asset); });
+                item.addEventListener('click', () => this._selectAsset(asset));
+                el.appendChild(item);
+            }
         }
 
-        for (const asset of filtered) {
-            const shortName = asset.name.replace(/\.(glb|gltf)$/i, '');
-            const driveCnt  = asset.drives?.length ?? 0;
-            const clipCnt   = asset.availableClips?.length ?? 0;
-            const interCnt  = Object.keys(asset.interactions ?? {}).length;
-            const meta = [
-                driveCnt  ? `${driveCnt}D` : '',
-                clipCnt   ? `${clipCnt}A` : '',
-                interCnt  ? `${interCnt}I` : '',
-            ].filter(Boolean).join(' · ') || 'GLB';
-
-            const item = document.createElement('div');
-            item.className = 'lib-item';
-            item.innerHTML = `
-                <span class="lib-icon">📦</span>
-                <div class="lib-info">
-                    <div class="lib-name" title="${asset.name}">${shortName}</div>
-                    <div class="lib-meta">${meta}</div>
-                </div>
-                <span class="lib-add" title="Add instance to scene">+</span>
-            `;
-            item.querySelector('.lib-add')?.addEventListener('click', (e) => {
-                e.stopPropagation();
-                this._addAssetInstance(asset);
-            });
-            item.addEventListener('click', () => this._selectAsset(asset));
-            el.appendChild(item);
+        // ── Section 2: 3D Custom Controls from backend ─────────────────
+        const secHdr2 = document.createElement('div');
+        secHdr2.style.cssText = 'padding:4px 8px;color:#888;font-size:10px;text-transform:uppercase;letter-spacing:0.5px;background:#2d2d2d;border-bottom:1px solid #3c3c3c;border-top:1px solid #3c3c3c;margin-top:4px;';
+        secHdr2.textContent = '3D Custom Controls';
+        el.appendChild(secHdr2);
+
+        try {
+            const ctrlNames = await iobrokerHandler.getAllNames('3dcontrol', '');
+            const filteredCtrls = ctrlNames.filter(n => !search || n.toLowerCase().includes(search));
+            if (filteredCtrls.length === 0) {
+                const empty = document.createElement('div');
+                empty.style.cssText = 'color:#555;padding:8px;font-size:11px;text-align:center;';
+                empty.textContent = 'No 3D controls yet';
+                el.appendChild(empty);
+            } else {
+                for (const ctrlName of filteredCtrls) {
+                    const shortName = ctrlName.replace(/^\/+/, '').split('/').pop();
+                    const item = document.createElement('div');
+                    item.className = 'lib-item';
+                    item.innerHTML = `<span class="lib-icon">🔧</span><div class="lib-info"><div class="lib-name" title="${ctrlName}">${shortName}</div><div class="lib-meta">3D Control</div></div><span class="lib-add" title="Add to scene">+</span>`;
+                    item.querySelector('.lib-add')?.addEventListener('click', async (e) => {
+                        e.stopPropagation();
+                        await this._addControlToScene(ctrlName);
+                    });
+                    el.appendChild(item);
+                }
+            }
+        } catch(err) {
+            const errDiv = document.createElement('div');
+            errDiv.style.cssText = 'color:#666;padding:8px;font-size:10px;';
+            errDiv.textContent = 'Could not load 3D controls';
+            el.appendChild(errDiv);
+        }
+    }
+
+    async _addControlToScene(ctrlName) {
+        try {
+            const ctrl = await iobrokerHandler.getWebuiObject('3dcontrol', ctrlName);
+            if (!ctrl?.assets?.length) { alert('3D Control has no assets'); return; }
+            const firstAsset = ctrl.assets[0];
+            const newId = 'asset_' + Date.now().toString(36);
+            const instance = JSON.parse(JSON.stringify(firstAsset));
+            instance.id = newId;
+            const shortName = ctrlName.replace(/^\/+/, '').split('/').pop();
+            instance.name = shortName + '_' + newId.slice(-4);
+            instance.position = { x: Math.random() * 4 - 2, y: 0, z: Math.random() * 4 - 2 };
+            if (!this.sceneData.assets) this.sceneData.assets = [];
+            this.sceneData.assets.push(instance);
+            this.loadAsset(instance);
+            this.refreshTree();
+            this._setStatus('Added: ' + instance.name);
+            setTimeout(() => this._setStatus(''), 2000);
+        } catch(err) {
+            console.error('Error adding 3D control to scene:', err);
+            alert('Error adding 3D control: ' + err.message);
         }
     }
 
@@ -1234,7 +1285,8 @@ export class IobrokerWebui3DScreenEditor extends BaseCustomWebComponentConstruct
     async saveScene() {
         try {
             this._setStatus('Saving...');
-            const ok = await iobrokerHandler.saveObject('3dscreen', this.sceneData.name, this.sceneData);
+            const sceneType = this.getAttribute('scene-type') || '3dscreen';
+            const ok = await iobrokerHandler.saveObject(sceneType, this.sceneData.name, this.sceneData);
             this._setStatus(ok ? 'Saved ✓' : 'Save failed');
             setTimeout(() => this._setStatus(''), 2000);
         } catch (err) {

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

@@ -1721,50 +1721,6 @@ export class IobrokerWebuiAppShell extends BaseCustomWebComponentConstructorAppe
               </div>`
             : `<div style="color:#555;font-size:10px;font-style:italic;padding:4px 0;">No interaction</div>`;
 
-        // ── Events ──
-        const nodeEvents = asset?.events?.[nodeKey] ?? {};
-        const nodeEventEntries = Object.entries(nodeEvents);
-        // Build list of available preset events for "Add" dropdown
-        const presetEvents = [
-            { key: 'click',           label: '🖱️ click' },
-            { key: 'mouseenter',      label: '↗️ mouseenter' },
-            { key: 'mouseleave',      label: '↙️ mouseleave' },
-            { key: 'animationEnd',    label: '🎬 animationEnd (any clip)' },
-            ...( (asset?.availableClips ?? []).map(c => ({ key: `animationEnd:${c}`, label: `🎬 animationEnd:${c}` })) ),
-            ...( (asset?.drives ?? []).map((_, i) => ([
-                { key: `driveAtMax:${i}`, label: `⬆️ driveAtMax:${i}` },
-                { key: `driveAtMin:${i}`, label: `⬇️ driveAtMin:${i}` },
-            ])).flat() ),
-        ].filter(p => !nodeEvents[p.key]); // hide already-configured ones
-
-        const presetOptsHtml = presetEvents.map(p => `<option value="${p.key}">${p.label}</option>`).join('');
-
-        const eventsHtml = nodeEventEntries.length > 0
-            ? nodeEventEntries.map(([evtKey, script]) => `
-                <div class="evt-row" style="background:#1a1a2e;border:1px solid #2a2a4a;border-radius:3px;padding:5px;margin-bottom:4px;">
-                    <div style="display:flex;align-items:center;gap:4px;margin-bottom:3px;">
-                        <span style="color:#dcdcaa;font-size:10px;flex:1;font-family:monospace;">${evtKey}</span>
-                        <button class="evt-del-btn tb-btn" data-evtkey="${evtKey}" style="padding:0px 5px;font-size:9px;background:#5a1a1a;color:#f44747;border-color:#8a2a2a;">✕</button>
-                    </div>
-                    <textarea class="evt-script" data-evtkey="${evtKey}" rows="3"
-                        style="width:100%;box-sizing:border-box;background:#0d0d1a;border:1px solid #3c3c5c;color:#d4d4d4;font-family:'Consolas',monospace;font-size:10px;padding:4px;resize:vertical;line-height:1.4;"
-                        spellcheck="false"
-                        placeholder="// context: node, assetData, THREE, scene, camera&#10;// setState(signal, val), getState(signal), subscribe(signal, cb)&#10;// assets Map, mixers Map, driveEngine"
-                    >${this._escHtml(script)}</textarea>
-                </div>`).join('')
-            : `<div style="color:#555;font-size:10px;font-style:italic;padding:4px 0;">No events configured</div>`;
-
-        const eventsAddHtml = presetEvents.length > 0
-            ? `<div style="display:flex;gap:4px;margin-top:4px;">
-                <select class="evt-preset-sel" style="flex:1;background:#3c3c3c;border:1px solid #555;color:#ccc;padding:2px 4px;border-radius:3px;font-size:10px;">
-                    <option value="">— select event type —</option>
-                    ${presetOptsHtml}
-                    <option value="__custom__">Custom event name...</option>
-                </select>
-                <button class="evt-add-btn tb-btn" style="padding:1px 10px;font-size:10px;">+ Add</button>
-              </div>`
-            : `<div style="color:#555;font-size:9px;margin-top:4px;">All event types configured</div>`;
-
         panel.innerHTML = `
             <style>
                 .pg-group{margin-bottom:8px;}
@@ -1815,19 +1771,6 @@ export class IobrokerWebuiAppShell extends BaseCustomWebComponentConstructorAppe
                     <div class="pg-header">🖱️ Interaction (onClick) <button class="inter-add-btn tb-btn" style="padding:1px 8px;font-size:9px;">+ Set</button></div>
                     ${interHtml}
                 </div>
-                <div class="pg-group">
-                    <div class="pg-header">⚡ Events
-                        <span style="color:#555;font-size:9px;font-weight:normal;">node: ${nodeKey}</span>
-                    </div>
-                    ${eventsHtml}
-                    ${eventsAddHtml}
-                    <div style="color:#555;font-size:9px;margin-top:6px;line-height:1.5;">
-                        Script context:<br>
-                        <code style="color:#888;">node, assetData, THREE, scene</code><br>
-                        <code style="color:#888;">setState(sig,val) · getState(sig)</code><br>
-                        <code style="color:#888;">assets(Map) · mixers · driveEngine</code>
-                    </div>
-                </div>
             </div>
         `;
 
@@ -1913,9 +1856,92 @@ export class IobrokerWebuiAppShell extends BaseCustomWebComponentConstructorAppe
             }
         });
 
-        // ── Events wiring ──
-        // Script textarea auto-save on blur
-        p.querySelectorAll('.evt-script').forEach(ta => {
+        // Show events in native Events dock
+        this._show3DEventsInDock(node, asset, nodeKey, onChange);
+    }
+
+    _escHtml(str) {
+        return (str || '').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
+    }
+
+    _show3DEventsInDock(node, asset, nodeKey, onChange) {
+        const dock = this._getDomElement('eventsDock');
+        if (!dock) return;
+
+        // Get or create the 3D events overlay container
+        let d3 = dock.querySelector('#_3dEventsOverlay');
+        if (!d3) {
+            d3 = document.createElement('div');
+            d3.id = '_3dEventsOverlay';
+            d3.style.cssText = 'width:100%;height:100%;overflow:auto;box-sizing:border-box;background:#1e1e1e;color:#ccc;font-family:"Segoe UI",sans-serif;font-size:12px;';
+            dock.insertBefore(d3, dock.firstChild);
+        }
+        d3.style.display = 'block';
+
+        // Hide native event assignment
+        const nativeEvt = this._getDomElement('eventsList');
+        if (nativeEvt) nativeEvt.style.display = 'none';
+
+        // Build events HTML
+        const nodeEvents = asset?.events?.[nodeKey] ?? {};
+        const nodeEventEntries = Object.entries(nodeEvents);
+        const presetEvents = [
+            { key: 'click',        label: '🖱️ click' },
+            { key: 'mouseenter',   label: '↗️ mouseenter' },
+            { key: 'mouseleave',   label: '↙️ mouseleave' },
+            { key: 'animationEnd', label: '🎬 animationEnd' },
+            ...((asset?.availableClips ?? []).map(c => ({ key: `animationEnd:${c}`, label: `🎬 animationEnd:${c}` }))),
+            ...((asset?.drives ?? []).flatMap((_, i) => [
+                { key: `driveAtMax:${i}`, label: `⬆️ driveAtMax:${i}` },
+                { key: `driveAtMin:${i}`, label: `⬇️ driveAtMin:${i}` }
+            ])),
+        ].filter(p => !nodeEvents[p.key]);
+
+        const evtRowsHtml = nodeEventEntries.length > 0
+            ? nodeEventEntries.map(([evtKey, script]) => `
+                <div style="background:#1a1a2e;border:1px solid #2a2a4a;border-radius:3px;padding:5px;margin-bottom:6px;">
+                    <div style="display:flex;align-items:center;gap:4px;margin-bottom:3px;">
+                        <span style="color:#dcdcaa;font-size:11px;flex:1;font-family:monospace;">${evtKey}</span>
+                        <button class="evt-del-btn" data-evtkey="${evtKey}" style="padding:1px 6px;font-size:10px;background:#5a1a1a;color:#f44747;border:1px solid #8a2a2a;border-radius:3px;cursor:pointer;">✕</button>
+                    </div>
+                    <textarea class="evt-script" data-evtkey="${evtKey}" rows="4"
+                        style="width:100%;box-sizing:border-box;background:#0d0d1a;border:1px solid #3c3c5c;color:#d4d4d4;font-family:'Consolas',monospace;font-size:11px;padding:4px;resize:vertical;line-height:1.4;border-radius:2px;"
+                        spellcheck="false"
+                        placeholder="// context: node, assetData, THREE, scene&#10;// setState(sig,val)  getState(sig)&#10;// assets(Map)  mixers  driveEngine"
+                    >${this._escHtml(script)}</textarea>
+                </div>`).join('')
+            : `<div style="color:#555;font-size:11px;font-style:italic;padding:8px 0;">No events configured</div>`;
+
+        const presetOptsHtml = presetEvents.map(p => `<option value="${p.key}">${p.label}</option>`).join('');
+        const addRowHtml = presetEvents.length > 0
+            ? `<div style="display:flex;gap:4px;margin-top:6px;">
+                <select class="evt-preset-sel" style="flex:1;background:#3c3c3c;border:1px solid #555;color:#ccc;padding:3px 4px;border-radius:3px;font-size:11px;">
+                    <option value="">— select event type —</option>
+                    ${presetOptsHtml}
+                    <option value="__custom__">Custom event name...</option>
+                </select>
+                <button class="evt-add-btn" style="padding:2px 12px;background:#3c3c3c;color:#ccc;border:1px solid #555;border-radius:3px;cursor:pointer;font-size:11px;">+ Add</button>
+               </div>`
+            : `<div style="color:#555;font-size:10px;margin-top:6px;">All standard events configured</div>`;
+
+        d3.innerHTML = `
+            <div style="padding:6px 8px;border-bottom:1px solid #3c3c3c;background:#252526;display:flex;align-items:center;gap:6px;">
+                <span style="color:#dcdcaa;font-size:11px;font-weight:bold;">⚡ 3D Events</span>
+                <span style="color:#555;font-size:10px;">node: ${nodeKey}</span>
+            </div>
+            <div style="padding:8px;">
+                ${evtRowsHtml}
+                ${addRowHtml}
+                <div style="color:#555;font-size:10px;margin-top:8px;line-height:1.6;">
+                    Context: <code style="color:#888;">node, assetData, THREE, scene</code><br>
+                    <code style="color:#888;">setState(sig,val) · getState(sig)</code><br>
+                    <code style="color:#888;">assets(Map) · mixers · driveEngine</code>
+                </div>
+            </div>
+        `;
+
+        // Wire textarea auto-save
+        d3.querySelectorAll('.evt-script').forEach(ta => {
             ta.addEventListener('blur', () => {
                 const evtKey = ta.dataset.evtkey;
                 if (!asset.events) asset.events = {};
@@ -1925,22 +1951,22 @@ export class IobrokerWebuiAppShell extends BaseCustomWebComponentConstructorAppe
             });
         });
 
-        // Delete event
-        p.querySelectorAll('.evt-del-btn').forEach(btn => {
+        // Wire delete buttons
+        d3.querySelectorAll('.evt-del-btn').forEach(btn => {
             btn.addEventListener('click', () => {
                 const evtKey = btn.dataset.evtkey;
                 if (asset?.events?.[nodeKey]) {
                     delete asset.events[nodeKey][evtKey];
                     if (Object.keys(asset.events[nodeKey]).length === 0) delete asset.events[nodeKey];
                     if (onChange) onChange(asset);
-                    this.show3DNodeProperties(node, asset, mixerInfo, onChange);
+                    this._show3DEventsInDock(node, asset, nodeKey, onChange);
                 }
             });
         });
 
-        // Add event from preset dropdown
-        p.querySelector('.evt-add-btn')?.addEventListener('click', () => {
-            const sel = p.querySelector('.evt-preset-sel');
+        // Wire add button
+        d3.querySelector('.evt-add-btn')?.addEventListener('click', () => {
+            const sel = d3.querySelector('.evt-preset-sel');
             let evtKey = sel?.value;
             if (!evtKey) return;
             if (evtKey === '__custom__') {
@@ -1949,16 +1975,22 @@ export class IobrokerWebuiAppShell extends BaseCustomWebComponentConstructorAppe
             }
             if (!asset.events) asset.events = {};
             if (!asset.events[nodeKey]) asset.events[nodeKey] = {};
-            if (!asset.events[nodeKey][evtKey]) {
-                asset.events[nodeKey][evtKey] = '// event: ' + evtKey + '\n';
-            }
+            if (!asset.events[nodeKey][evtKey]) asset.events[nodeKey][evtKey] = '// event: ' + evtKey + '\n';
             if (onChange) onChange(asset);
-            this.show3DNodeProperties(node, asset, mixerInfo, onChange);
+            this._show3DEventsInDock(node, asset, nodeKey, onChange);
         });
+
+        // Activate the events dock panel
+        this.activateDockById('eventsDock');
     }
 
-    _escHtml(str) {
-        return (str || '').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
+    _restore3DEventsDock() {
+        const dock = this._getDomElement('eventsDock');
+        if (!dock) return;
+        const d3 = dock.querySelector('#_3dEventsOverlay');
+        if (d3) d3.style.display = 'none';
+        const nativeEvt = this._getDomElement('eventsList');
+        if (nativeEvt) nativeEvt.style.display = '';
     }
 
     _showAddDriveDialog(obj, onChange) {
@@ -2082,6 +2114,18 @@ export class IobrokerWebuiAppShell extends BaseCustomWebComponentConstructorAppe
             editor.id = id;
             editor.title = '3D: ' + name;
             editor.setAttribute('scene-name', name);
+            editor.setAttribute('scene-type', '3dscreen');
+            this.openDock(editor);
+        }
+    }
+    async open3DControlEditor(name) {
+        let id = '3dcontrol_' + name;
+        if (!this.isDockOpenAndActivate(id)) {
+            let editor = new IobrokerWebui3DScreenEditor();
+            editor.id = id;
+            editor.title = '3D Ctrl: ' + name;
+            editor.setAttribute('scene-name', name);
+            editor.setAttribute('scene-type', '3dcontrol');
             this.openDock(editor);
         }
     }

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

@@ -5,6 +5,17 @@ import { exportData, openFileDialog } from "../helper/Helper.js";
 import { getCustomControlName, webuiCustomControlPrefix } from "../runtime/CustomControls.js";
 import { defaultOptions, defaultStyle } from "@gokturk413/web-component-designer-widgets-wunderbaum";
 import { Wunderbaum } from 'wunderbaum';
+const default3DScript = `// 3D Scene Script
+// Context: THREE, scene, camera, renderer, controls
+// assets (Map<name, Object3D>)  mixers (Map<assetId, {mixer, clips, actions}>)
+// driveEngine  setState(signal, val)  getState(signal)
+// subscribe(signal, cb) → returns unsubscribe fn
+// onFrame(fn)  onSelect(fn)  log(...)
+
+onFrame((dt, ts) => {
+    // Runs every animation frame. dt = delta seconds.
+});
+`;
 //@ts-ignore
 import wunderbaumStyle from 'wunderbaum/dist/wunderbaum.css' with { type: 'css' };
 import { defaultNewStyle, defaultNewControlScript } from "./IobrokerWebuiScreenEditor.js";
@@ -102,6 +113,7 @@ export class IobrokerWebuiSolutionExplorer extends BaseCustomWebComponentConstru
         const result = await Promise.allSettled([
             this._createFolderNode('screen'),
             this._createFolderNode('3dscreen'),
+            this._createFolderNode('3dcontrol'),
             this._createControlsNode(),
             this._createGlobalNode(),
             this._createNpmsNode(),
@@ -119,62 +131,32 @@ export class IobrokerWebuiSolutionExplorer extends BaseCustomWebComponentConstru
                     try {
                         let screenName = prompt("New " + type + " Name:");
                         if (screenName) {
-                            if (type === '3dscreen') {
-                                // Create new 3D screen with default scene
-                                const defaultScene = {
+                            if (type === '3dscreen' || type === '3dcontrol') {
+                                const makeDefaultScene = (nm) => ({
                                     id: 'scene_' + Date.now().toString(36),
-                                    name: screenName,
+                                    name: nm,
                                     version: '1.0',
                                     createdAt: new Date().toISOString(),
                                     modifiedAt: new Date().toISOString(),
                                     assets: [],
+                                    script: default3DScript,
+                                    style: '',
                                     lights: [
-                                        {
-                                            id: 'ambient_light',
-                                            name: 'Ambient Light',
-                                            type: 'ambient',
-                                            color: '#ffffff',
-                                            intensity: 0.6
-                                        },
-                                        {
-                                            id: 'directional_light',
-                                            name: 'Directional Light',
-                                            type: 'directional',
-                                            color: '#ffffff',
-                                            intensity: 0.8,
-                                            position: { x: 10, y: 10, z: 10 },
-                                            castShadow: true
-                                        }
+                                        { id: 'ambient_light', name: 'Ambient Light', type: 'ambient', color: '#ffffff', intensity: 0.6 },
+                                        { id: 'directional_light', name: 'Directional Light', type: 'directional', color: '#ffffff', intensity: 0.8, position: { x: 10, y: 10, z: 10 }, castShadow: true }
                                     ],
-                                    camera: {
-                                        position: { x: 10, y: 10, z: 10 },
-                                        target: { x: 0, y: 0, z: 0 },
-                                        fov: 75
-                                    },
-                                    grid: {
-                                        visible: true,
-                                        size: 20,
-                                        divisions: 20,
-                                        colorCenterLine: '#888888',
-                                        colorGrid: '#444444'
-                                    },
-                                    axes: {
-                                        visible: true,
-                                        size: 5
-                                    },
-                                    settings: {
-                                        backgroundColor: '#333333',
-                                        enableControls: true,
-                                        enableRaycasting: true,
-                                        shadowsEnabled: true,
-                                        antialiasing: true
-                                    },
-                                    edits: {
-                                        ops: []
-                                    }
-                                };
-                                await iobrokerHandler.saveObject('3dscreen', (dir ?? '') + '/' + screenName, defaultScene);
-                                window.appShell.open3DScreenEditor((dir ?? '') + '/' + screenName);
+                                    camera: { position: { x: 10, y: 10, z: 10 }, target: { x: 0, y: 0, z: 0 }, fov: 75 },
+                                    grid: { visible: true, size: 20, divisions: 20, colorCenterLine: '#888888', colorGrid: '#444444' },
+                                    axes: { visible: true, size: 5 },
+                                    settings: { backgroundColor: '#333333', enableControls: true, enableRaycasting: true, shadowsEnabled: true, antialiasing: true },
+                                    edits: { ops: [] }
+                                });
+                                const fullName = (dir ?? '') + '/' + screenName;
+                                await iobrokerHandler.saveObject(type, fullName, makeDefaultScene(fullName));
+                                if (type === '3dcontrol')
+                                    window.appShell.open3DControlEditor(fullName);
+                                else
+                                    window.appShell.open3DScreenEditor(fullName);
                             } else {
                                 const defaultScript = type === 'control' ? defaultNewControlScript : null;
                                 window.appShell.openScreenEditor((dir ?? '') + '/' + screenName, type, '', defaultNewStyle, defaultScript, {});
@@ -263,6 +245,9 @@ export class IobrokerWebuiSolutionExplorer extends BaseCustomWebComponentConstru
             case '3dscreen':
                 name = "3D Screens";
                 break;
+            case '3dcontrol':
+                name = "3D Custom Controls";
+                break;
             //case '':
             //    name='Additional Files';
             //    break;
@@ -368,6 +353,9 @@ export class IobrokerWebuiSolutionExplorer extends BaseCustomWebComponentConstru
                     else if (type == '3dscreen') {
                         window.appShell.open3DScreenEditor(nm);
                     }
+                    else if (type == '3dcontrol') {
+                        window.appShell.open3DControlEditor(nm);
+                    }
                 });
             },
             data: { type, name: (dir ?? '') + '/' + x }

package/www/runtime.html

@@ -49,6 +49,7 @@
 
 <body>
   <iobroker-webui-screen-viewer id="viewer"></iobroker-webui-screen-viewer>
+  <div id="viewer3dContainer" style="display:none;width:100%;height:100%;position:fixed;top:0;left:0;"></div>
   <div id="overlayLayer"></div>
 </body>
 
@@ -68,16 +69,35 @@
   async function checkHash() {
     const viewer = document.getElementById('viewer');
     const par = new URLSearchParams(location.hash.substring(1));
-    let screen = (par).get('screenName');
+    const threeDScreen = par.get('3dscreen');
+
+    if (threeDScreen) {
+      // 3D screen runtime mode
+      viewer.style.display = 'none';
+      const container = document.getElementById('viewer3dContainer');
+      container.style.display = 'block';
+      container.innerHTML = '';
+      await importShim('./dist/frontend/config/IobrokerWebui3DScreenViewer.js');
+      await customElements.whenDefined('iobroker-webui-3dscreen-viewer');
+      const v3d = document.createElement('iobroker-webui-3dscreen-viewer');
+      v3d.setAttribute('scene-name', threeDScreen);
+      v3d.style.cssText = 'width:100%;height:100%;display:block;';
+      container.appendChild(v3d);
+      let imp = await importShim(iobrokerWebuiRootUrl + "dist/frontend/common/IobrokerHandler.js");
+      imp.iobrokerHandler.sendCommand("uiChangedView", threeDScreen);
+      return;
+    }
+
+    let screen = par.get('screenName');
     if (screen) {
       await customElements.whenDefined(viewer.localName);
     } else {
       screen = 'start';
     }
     await viewer.setScreenNameAndLoad(screen);
-    let subScreen = (par).get('subScreen');
+    let subScreen = par.get('subScreen');
     if (subScreen) {
-      const targetSelector =  (par).get('targetSelector') ?? 'iobroker-webui-screen-viewer';
+      const targetSelector = par.get('targetSelector') ?? 'iobroker-webui-screen-viewer';
       const sv = viewer._getDomElements(targetSelector)[0];
       sv.removeAttribute('screen-name');
       sv.screenName = subScreen;