iobroker.mywebui 1.42.17 → 1.42.19

package/io-package.json

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

package/package.json

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

@@ -364,6 +364,7 @@ export class IobrokerWebui3DScreenEditor extends BaseCustomWebComponentConstruct
         this._stopAnimation = () => { animating = false; };
 
         this.renderer.domElement.addEventListener('click', (e) => this.onMouseClick(e));
+        this._setupHoverDetection();
         const resizeObs = new ResizeObserver(() => this.onViewportResize());
         resizeObs.observe(viewport);
     }
@@ -379,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();
@@ -447,6 +451,11 @@ export class IobrokerWebui3DScreenEditor extends BaseCustomWebComponentConstruct
             this._threeObjects.push(model);
             if (this.driveEngine && Array.isArray(this.sceneData?.assets)) {
                 this.driveEngine.createFromAssets(this.sceneData.assets, this._threeObjects);
+                // Wrap drives for AtMax/AtMin events
+                if (asset.drives?.length) {
+                    const drives = asset.drives.map((_, i) => this.driveEngine.getDrive(asset.id, i));
+                    this._wrapDriveEvents(asset, drives);
+                }
             }
             // AnimationMixer for built-in GLB animations
             if (gltf.animations?.length > 0) {
@@ -457,6 +466,12 @@ export class IobrokerWebui3DScreenEditor extends BaseCustomWebComponentConstruct
                 }
                 this._mixers.set(asset.id, { mixer, clips: gltf.animations, actions });
                 asset.availableClips = gltf.animations.map(c => c.name);
+                // animationEnd event
+                mixer.addEventListener('finished', (e) => {
+                    const clipName = e.action.getClip().name;
+                    this._executeNodeEvent(model, asset, `animationEnd:${clipName}`);
+                    this._executeNodeEvent(model, asset, 'animationEnd');
+                });
             }
             // Extract named node list for scene tree
             asset._nodeList = this._extractNamedNodes(model);
@@ -512,6 +527,8 @@ export class IobrokerWebui3DScreenEditor extends BaseCustomWebComponentConstruct
 
         if (hitNode && hitAssetRoot) {
             if (hitNode.userData.interaction) this._handleInteraction(hitNode);
+            // Fire node event: check by name AND by uuid
+            this._executeNodeEvent(hitNode, hitAssetRoot.userData.assetData, 'click');
             this.selectNode(hitNode, hitAssetRoot);
         } else {
             this.deselectAll();
@@ -637,6 +654,131 @@ export class IobrokerWebui3DScreenEditor extends BaseCustomWebComponentConstruct
         }
     }
 
+    // ── Event execution ───────────────────────────────────
+
+    /**
+     * Execute a node event handler stored in asset.events[nodeName][eventKey].
+     * eventKey: 'click' | 'mouseenter' | 'mouseleave' | 'animationEnd' | 'animationEnd:ClipName' |
+     *           'driveAtMax:N' | 'driveAtMin:N' | 'signalChange:path'
+     * Node name '__root__' = the asset root object.
+     */
+    _executeNodeEvent(node, asset, eventKey) {
+        if (!asset?.events) return;
+        const nodeKey = (node?.userData?.assetData === asset || !node?.name) ? '__root__' : node.name;
+        const script = asset.events[nodeKey]?.[eventKey];
+        if (!script?.trim()) return;
+
+        const ctx = {
+            node,
+            assetData: asset,
+            THREE:     this.THREE,
+            scene:     this.scene,
+            camera:    this.camera,
+            renderer:  this.renderer,
+            controls:  this.controls,
+            assets:    this._buildAssetsMap(),
+            mixers:    this._mixers,
+            driveEngine: this.driveEngine,
+            setState(signal, val) { iobrokerHandler.setState(signal, val); },
+            getState:  (s) => this.driveEngine.bus.get(s),
+            subscribe: (s, cb) => { const u = this.driveEngine.bus.subscribe(s, cb); this._scriptUnsubs.push(u); return u; },
+            log:       (...a) => console.log('[3D Event]', nodeKey, eventKey, ...a),
+        };
+        try {
+            new Function(...Object.keys(ctx), script)(...Object.values(ctx));
+        } catch (err) {
+            console.error(`[3D Event ${nodeKey}:${eventKey}]`, err.message);
+        }
+    }
+
+    _buildAssetsMap() {
+        const m = new Map();
+        for (const obj of this.scene.children) {
+            if (obj.userData.assetData) {
+                m.set(obj.userData.assetData.name, obj);
+                m.set(obj.userData.assetData.id, obj);
+            }
+        }
+        return m;
+    }
+
+    // ── Hover detection ───────────────────────────────────
+
+    _setupHoverDetection() {
+        let hoverNode = null;
+        let hoverAsset = null;
+        let throttle = null;
+
+        this.renderer.domElement.addEventListener('mousemove', (e) => {
+            if (throttle) return;
+            throttle = setTimeout(() => { throttle = null; }, 50); // 20 fps check
+
+            const rect = this.renderer.domElement.getBoundingClientRect();
+            this.mouse.x = ((e.clientX - rect.left) / rect.width) * 2 - 1;
+            this.mouse.y = -((e.clientY - rect.top) / rect.height) * 2 + 1;
+            this.raycaster.setFromCamera(this.mouse, this.camera);
+            const hits = this.raycaster.intersectObjects(this.scene.children, true);
+
+            let newNode = null, newRoot = null;
+            for (const hit of hits) {
+                const o = hit.object;
+                if (o.userData.isGrid || o.userData.isAxes || o.userData.isSelectionHelper) continue;
+                let p = o;
+                while (p && p !== this.scene) {
+                    if (p.userData.assetData) { newRoot = p; break; }
+                    p = p.parent;
+                }
+                if (newRoot) { newNode = o; break; }
+            }
+
+            if (newNode !== hoverNode) {
+                if (hoverNode && hoverAsset) {
+                    this._executeNodeEvent(hoverNode, hoverAsset, 'mouseleave');
+                    this.renderer.domElement.style.cursor = 'default';
+                }
+                if (newNode && newRoot) {
+                    const asset = newRoot.userData.assetData;
+                    this._executeNodeEvent(newNode, asset, 'mouseenter');
+                    // Change cursor if node has any event or interaction
+                    const hasEvent = asset?.events || newNode.userData.interaction;
+                    if (hasEvent) this.renderer.domElement.style.cursor = 'pointer';
+                }
+                hoverNode  = newNode;
+                hoverAsset = newRoot?.userData.assetData ?? null;
+            }
+        });
+
+        this.renderer.domElement.addEventListener('mouseleave', () => {
+            if (hoverNode && hoverAsset) {
+                this._executeNodeEvent(hoverNode, hoverAsset, 'mouseleave');
+            }
+            hoverNode = null; hoverAsset = null;
+            this.renderer.domElement.style.cursor = 'default';
+        });
+    }
+
+    // ── Drive events (AtMax / AtMin) ──────────────────────
+    // Called from DriveEngine after createFromAssets - wraps onAfterUpdate
+    _wrapDriveEvents(asset, drives) {
+        for (let i = 0; i < drives.length; i++) {
+            const drive = drives[i];
+            if (!drive) continue;
+            const cfg = asset.drives?.[i];
+            const origCb = drive.onAfterUpdate;
+            drive.onAfterUpdate = (d) => {
+                if (origCb) origCb(d);
+                const root = this._threeObjects.find(o => o.userData.assetId === asset.id);
+                if (!root) return;
+                const atMax = cfg?.maxPos !== undefined ? Math.abs(d.currentPosition - cfg.maxPos) < 0.1 : false;
+                const atMin = cfg?.minPos !== undefined ? Math.abs(d.currentPosition - cfg.minPos) < 0.1 : false;
+                if (atMax && !d._evtWasAtMax) this._executeNodeEvent(root, asset, `driveAtMax:${i}`);
+                if (atMin && !d._evtWasAtMin) this._executeNodeEvent(root, asset, `driveAtMin:${i}`);
+                d._evtWasAtMax = atMax;
+                d._evtWasAtMin = atMin;
+            };
+        }
+    }
+
     _extractNamedNodes(obj, depth = 0, result = []) {
         if (depth > 7) return result;
         if (depth > 0 && obj.name) {
@@ -974,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);
         }
     }
 
@@ -1095,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

@@ -1710,7 +1710,7 @@ export class IobrokerWebuiAppShell extends BaseCustomWebComponentConstructorAppe
             : `<div style="color:#555;font-size:10px;font-style:italic;padding:4px 0;">No drives configured</div>`;
 
         // ── Interaction binding ──
-        const nodeKey = nodeName;
+        const nodeKey = (node?.userData?.assetData === asset || !node?.name) ? '__root__' : (node?.name || nodeName);
         const inter = asset?.interactions?.[nodeKey];
         const interHtml = inter
             ? `<div style="background:#1a2a1a;border:1px solid #2a4a2a;border-radius:3px;padding:6px;font-size:10px;">
@@ -1855,6 +1855,142 @@ export class IobrokerWebuiAppShell extends BaseCustomWebComponentConstructorAppe
                 this.show3DNodeProperties(node, asset, mixerInfo, onChange);
             }
         });
+
+        // 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 = {};
+                if (!asset.events[nodeKey]) asset.events[nodeKey] = {};
+                asset.events[nodeKey][evtKey] = ta.value;
+                if (onChange) onChange(asset);
+            });
+        });
+
+        // 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._show3DEventsInDock(node, asset, nodeKey, onChange);
+                }
+            });
+        });
+
+        // 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__') {
+                evtKey = prompt('Custom event name:', 'signalChange:mywebui.0.signal.path');
+                if (!evtKey) return;
+            }
+            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 (onChange) onChange(asset);
+            this._show3DEventsInDock(node, asset, nodeKey, onChange);
+        });
+
+        // Activate the events dock panel
+        this.activateDockById('eventsDock');
+    }
+
+    _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) {
@@ -1978,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;