iobroker.mywebui 1.42.17 → 1.42.18

package/io-package.json

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

package/package.json

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

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

@@ -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);
     }
@@ -447,6 +448,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 +463,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 +524,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 +651,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) {

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;">
@@ -1721,6 +1721,50 @@ 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;}
@@ -1771,6 +1815,19 @@ 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>
         `;
 
@@ -1855,6 +1912,53 @@ export class IobrokerWebuiAppShell extends BaseCustomWebComponentConstructorAppe
                 this.show3DNodeProperties(node, asset, mixerInfo, onChange);
             }
         });
+
+        // ── Events wiring ──
+        // Script textarea auto-save on blur
+        p.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);
+            });
+        });
+
+        // Delete event
+        p.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);
+                }
+            });
+        });
+
+        // Add event from preset dropdown
+        p.querySelector('.evt-add-btn')?.addEventListener('click', () => {
+            const sel = p.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.show3DNodeProperties(node, asset, mixerInfo, onChange);
+        });
+    }
+
+    _escHtml(str) {
+        return (str || '').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
     }
 
     _showAddDriveDialog(obj, onChange) {