iobroker.mywebui 1.42.14 → 1.42.16

package/io-package.json

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

package/package.json

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

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

@@ -0,0 +1,565 @@
+/**
+ * 3D Drive Engine for mywebui 3D Screen Editor
+ *
+ * Kinematics system inspired by realvirtual's architecture.
+ * Written from scratch - no code copied, same logic independently implemented.
+ *
+ * Concepts:
+ *   Drive       - moves a Three.js Object3D along an axis (linear mm or rotation deg)
+ *   SignalBus   - subscribes to ioBroker signals via iobrokerHandler
+ *   DriveCylinder - extends/retracts between MinPos/MaxPos on ioBroker bool signals
+ *   DriveSimple   - jogs continuously Forward/Backward on ioBroker bool signals
+ */
+
+import { iobrokerHandler } from '../common/IobrokerHandler.js';
+
+// ── Constants ────────────────────────────────────────────────────────────────
+
+const MM_TO_M = 0.001;
+const DEG_TO_RAD = Math.PI / 180;
+
+// ── Drive directions ─────────────────────────────────────────────────────────
+
+export const DriveDirection = {
+    LinearX: 'LinearX',
+    LinearY: 'LinearY',
+    LinearZ: 'LinearZ',
+    RotationX: 'RotationX',
+    RotationY: 'RotationY',
+    RotationZ: 'RotationZ',
+};
+
+function isRotation(dir) {
+    return dir === DriveDirection.RotationX ||
+           dir === DriveDirection.RotationY ||
+           dir === DriveDirection.RotationZ;
+}
+
+// ── Signal Bus ───────────────────────────────────────────────────────────────
+
+/**
+ * SignalBus - bridges ioBroker states to the drive engine.
+ * Subscribes to ioBroker signals and dispatches value changes to listeners.
+ * ioBrokerHandler.subscribeState is used for live updates.
+ */
+export class SignalBus {
+    constructor() {
+        /** signalPath → current value */
+        this._values = new Map();
+        /** signalPath → Set<callback> */
+        this._listeners = new Map();
+        /** signalPath → unsubscribe function */
+        this._unsubs = new Map();
+    }
+
+    /** Subscribe to an ioBroker signal. Returns unsubscribe function. */
+    subscribe(signalPath, cb) {
+        if (!signalPath) return () => {};
+
+        // Register listener
+        if (!this._listeners.has(signalPath)) {
+            this._listeners.set(signalPath, new Set());
+        }
+        this._listeners.get(signalPath).add(cb);
+
+        // Subscribe to ioBroker if not already
+        if (!this._unsubs.has(signalPath)) {
+            const unsub = iobrokerHandler.subscribe(signalPath, (id, state) => {
+                const val = state?.val ?? false;
+                this._values.set(signalPath, val);
+                const subs = this._listeners.get(signalPath);
+                if (subs) for (const fn of subs) fn(val);
+            });
+            this._unsubs.set(signalPath, unsub);
+        }
+
+        // Fire immediately with current value if known
+        if (this._values.has(signalPath)) {
+            cb(this._values.get(signalPath));
+        }
+
+        return () => {
+            const subs = this._listeners.get(signalPath);
+            if (subs) {
+                subs.delete(cb);
+                if (subs.size === 0) {
+                    this._listeners.delete(signalPath);
+                    const unsub = this._unsubs.get(signalPath);
+                    if (unsub) unsub();
+                    this._unsubs.delete(signalPath);
+                }
+            }
+        };
+    }
+
+    /** Get current value of a signal (or undefined) */
+    get(signalPath) {
+        return this._values.get(signalPath);
+    }
+
+    /** Write a value back to ioBroker (for feedback signals) */
+    set(signalPath, value) {
+        if (!signalPath) return;
+        iobrokerHandler.setState(signalPath, value);
+    }
+
+    /** Dispose all subscriptions */
+    dispose() {
+        for (const unsub of this._unsubs.values()) {
+            try { unsub(); } catch (_) {}
+        }
+        this._values.clear();
+        this._listeners.clear();
+        this._unsubs.clear();
+    }
+}
+
+// ── Drive ────────────────────────────────────────────────────────────────────
+
+/**
+ * Drive - moves a Three.js Object3D along a single axis.
+ *
+ * Position units: mm for linear, degrees for rotation.
+ * Three.js units: meters for linear, radians for rotation.
+ */
+export class Drive {
+    /**
+     * @param {Object3D} node - Three.js object to animate
+     * @param {object} config - drive configuration from asset.drives[]
+     */
+    constructor(node, config = {}) {
+        this.node = node;
+        this.name = node.name || 'Drive';
+
+        // Config (from asset JSON)
+        this.direction     = config.direction     ?? DriveDirection.LinearX;
+        this.reverseDir    = config.reverseDir     ?? false;
+        this.offset        = config.offset         ?? 0;
+        this.startPosition = config.startPosition  ?? 0;
+        this.targetSpeed   = config.targetSpeed    ?? 100;  // mm/s or deg/s
+        this.acceleration  = config.acceleration   ?? 0;    // 0 = instant
+        this.useLimits     = config.useLimits      ?? false;
+        this.lowerLimit    = config.lowerLimit     ?? -180;
+        this.upperLimit    = config.upperLimit     ?? 180;
+
+        // Runtime state
+        this.currentPosition = this.startPosition;
+        this.targetPosition  = this.startPosition;
+        this.currentSpeed    = 0;
+        this.isRunning       = false;
+        this.jogForward      = false;
+        this.jogBackward     = false;
+
+        // Base transform (rest position)
+        this._basePos = node.position.clone();
+        this._baseQuat = node.quaternion.clone();
+
+        this._isRotation = isRotation(this.direction);
+
+        // Callbacks
+        this.onAfterUpdate = null;  // (drive) => void
+
+        // Apply start position immediately
+        this._applyToNode();
+    }
+
+    get isAtTarget() {
+        return Math.abs(this.currentPosition - this.targetPosition) < 0.01;
+    }
+
+    /** Move to a specific position */
+    moveTo(pos, speed) {
+        this.targetPosition = pos;
+        if (speed !== undefined) this.targetSpeed = speed;
+        this.isRunning = true;
+    }
+
+    stop() {
+        this.isRunning = false;
+        this.currentSpeed = 0;
+    }
+
+    /** Called every frame from DriveEngine tick */
+    update(dt) {
+        if (this.jogForward || this.jogBackward) {
+            // Jog mode: continuous motion (conveyor-style)
+            this.currentSpeed = this.targetSpeed;
+            const dir = this.jogForward ? 1 : -1;
+            let next = this.currentPosition + dir * this.currentSpeed * dt;
+            if (this.useLimits) {
+                next = Math.max(this.lowerLimit, Math.min(this.upperLimit, next));
+            }
+            this.currentPosition = next;
+            this._applyToNode();
+            this.onAfterUpdate?.(this);
+            return;
+        }
+
+        if (!this.isRunning) return;
+
+        const dist = this.targetPosition - this.currentPosition;
+        if (Math.abs(dist) < 0.01) {
+            this.currentPosition = this.targetPosition;
+            this.isRunning = false;
+            this.currentSpeed = 0;
+            this._applyToNode();
+            this.onAfterUpdate?.(this);
+            return;
+        }
+
+        const dir = Math.sign(dist);
+        const spd = this.targetSpeed;
+
+        if (this.acceleration > 0) {
+            // Kinematic acceleration/deceleration
+            const stopDist = (this.currentSpeed * this.currentSpeed) / (2 * this.acceleration);
+            if (stopDist >= Math.abs(dist)) {
+                this.currentSpeed = Math.max(0, this.currentSpeed - this.acceleration * dt);
+            } else if (this.currentSpeed < spd) {
+                this.currentSpeed = Math.min(spd, this.currentSpeed + this.acceleration * dt);
+            }
+        } else {
+            this.currentSpeed = spd;
+        }
+
+        let next = this.currentPosition + dir * this.currentSpeed * dt;
+        // Clamp to target
+        if (dir > 0 && next > this.targetPosition) next = this.targetPosition;
+        if (dir < 0 && next < this.targetPosition) next = this.targetPosition;
+        // Apply limits
+        if (this.useLimits) {
+            next = Math.max(this.lowerLimit, Math.min(this.upperLimit, next));
+        }
+
+        this.currentPosition = next;
+        this._applyToNode();
+        this.onAfterUpdate?.(this);
+    }
+
+    _applyToNode() {
+        const pos = this.currentPosition + this.offset;
+        const sign = this.reverseDir ? -1 : 1;
+
+        switch (this.direction) {
+            case DriveDirection.LinearX:
+                this.node.position.x = this._basePos.x + sign * pos * MM_TO_M;
+                break;
+            case DriveDirection.LinearY:
+                this.node.position.y = this._basePos.y + sign * pos * MM_TO_M;
+                break;
+            case DriveDirection.LinearZ:
+                this.node.position.z = this._basePos.z + sign * pos * MM_TO_M;
+                break;
+            case DriveDirection.RotationX: {
+                const rad = sign * pos * DEG_TO_RAD;
+                this.node.quaternion.copy(this._baseQuat);
+                this.node.rotateX(rad);
+                break;
+            }
+            case DriveDirection.RotationY: {
+                const rad = sign * pos * DEG_TO_RAD;
+                this.node.quaternion.copy(this._baseQuat);
+                this.node.rotateY(rad);
+                break;
+            }
+            case DriveDirection.RotationZ: {
+                const rad = sign * pos * DEG_TO_RAD;
+                this.node.quaternion.copy(this._baseQuat);
+                this.node.rotateZ(rad);
+                break;
+            }
+        }
+    }
+
+    /** Serialize current config back to JSON */
+    toConfig() {
+        return {
+            direction:     this.direction,
+            reverseDir:    this.reverseDir,
+            offset:        this.offset,
+            startPosition: this.startPosition,
+            targetSpeed:   this.targetSpeed,
+            acceleration:  this.acceleration,
+            useLimits:     this.useLimits,
+            lowerLimit:    this.lowerLimit,
+            upperLimit:    this.upperLimit,
+        };
+    }
+}
+
+// ── DriveCylinder ─────────────────────────────────────────────────────────────
+
+/**
+ * DriveCylinder - pneumatic/hydraulic cylinder automation.
+ *
+ * Listens to two ioBroker signals (Out/In).
+ * Out=true  → moves to MaxPos at stroke/TimeOut speed
+ * In=true   → moves to MinPos at stroke/TimeIn speed
+ * Writes feedback signals: IsOut, IsIn, IsMovingOut, IsMovingIn
+ */
+export class DriveCylinder {
+    /**
+     * @param {Drive} drive - the underlying drive
+     * @param {SignalBus} bus - signal bus
+     * @param {object} config - cylinder config
+     */
+    constructor(drive, bus, config = {}) {
+        this.drive = drive;
+        this.bus   = bus;
+        this.name  = drive.name;
+
+        this.minPos       = config.minPos       ?? 0;
+        this.maxPos       = config.maxPos       ?? 100;
+        this.timeOut      = config.timeOut      ?? 1;    // seconds to extend
+        this.timeIn       = config.timeIn       ?? 1;    // seconds to retract
+        this.oneBit       = config.oneBit       ?? false;
+        this.invertLogic  = config.invertLogic  ?? false;
+
+        // ioBroker signal paths
+        this.signalOut      = config.signalOut      ?? null;
+        this.signalIn       = config.signalIn       ?? null;
+        this.signalIsOut    = config.signalIsOut    ?? null;
+        this.signalIsIn     = config.signalIsIn     ?? null;
+        this.signalMovingOut = config.signalMovingOut ?? null;
+        this.signalMovingIn  = config.signalMovingIn  ?? null;
+
+        this._unsubs = [];
+        this._init();
+    }
+
+    _init() {
+        const { drive, bus } = this;
+        const stroke = Math.abs(this.maxPos - this.minPos);
+
+        // Set initial position
+        drive.currentPosition = this.minPos;
+        drive._applyToNode();
+
+        if (this.signalOut) {
+            const unsub = bus.subscribe(this.signalOut, (val) => {
+                let v = Boolean(val);
+                if (this.invertLogic) v = !v;
+                if (this.oneBit) {
+                    drive.targetSpeed = stroke / (v ? this.timeOut : this.timeIn);
+                    drive.moveTo(v ? this.maxPos : this.minPos);
+                } else if (v) {
+                    drive.targetSpeed = stroke / this.timeOut;
+                    drive.moveTo(this.maxPos);
+                }
+            });
+            this._unsubs.push(unsub);
+        }
+
+        if (this.signalIn && !this.oneBit) {
+            const unsub = bus.subscribe(this.signalIn, (val) => {
+                let v = Boolean(val);
+                if (this.invertLogic) v = !v;
+                if (v) {
+                    drive.targetSpeed = stroke / this.timeIn;
+                    drive.moveTo(this.minPos);
+                }
+            });
+            this._unsubs.push(unsub);
+        }
+
+        // Feedback signals via onAfterUpdate
+        if (this.signalIsOut || this.signalIsIn || this.signalMovingOut || this.signalMovingIn) {
+            let prevIsOut = false, prevIsIn = true;
+            drive.onAfterUpdate = (d) => {
+                const atMax     = Math.abs(d.currentPosition - this.maxPos) < 0.01;
+                const atMin     = Math.abs(d.currentPosition - this.minPos) < 0.01;
+                const movingOut = d.isRunning && d.targetPosition === this.maxPos;
+                const movingIn  = d.isRunning && d.targetPosition === this.minPos;
+
+                if (atMax !== prevIsOut) {
+                    if (this.signalIsOut) bus.set(this.signalIsOut, atMax);
+                    if (this.signalIsOut) bus.set(this.signalIsOut + '_max', atMax);
+                    prevIsOut = atMax;
+                }
+                if (atMin !== prevIsIn) {
+                    if (this.signalIsIn) bus.set(this.signalIsIn, atMin);
+                    prevIsIn = atMin;
+                }
+                if (this.signalMovingOut) bus.set(this.signalMovingOut, movingOut);
+                if (this.signalMovingIn)  bus.set(this.signalMovingIn,  movingIn);
+            };
+        }
+    }
+
+    dispose() {
+        for (const fn of this._unsubs) fn();
+        this._unsubs = [];
+    }
+
+    toConfig() {
+        return {
+            type:       'cylinder',
+            minPos:     this.minPos,
+            maxPos:     this.maxPos,
+            timeOut:    this.timeOut,
+            timeIn:     this.timeIn,
+            oneBit:     this.oneBit,
+            invertLogic: this.invertLogic,
+            signalOut:  this.signalOut,
+            signalIn:   this.signalIn,
+            signalIsOut: this.signalIsOut,
+            signalIsIn:  this.signalIsIn,
+            signalMovingOut: this.signalMovingOut,
+            signalMovingIn:  this.signalMovingIn,
+        };
+    }
+}
+
+// ── DriveSimple ───────────────────────────────────────────────────────────────
+
+/**
+ * DriveSimple - continuous jog motion (conveyor belt, rotating drum).
+ * Forward=true → jog forward, Backward=true → jog backward
+ */
+export class DriveSimple {
+    constructor(drive, bus, config = {}) {
+        this.drive = drive;
+        this.bus   = bus;
+        this.signalForward  = config.signalForward  ?? null;
+        this.signalBackward = config.signalBackward ?? null;
+        this._unsubs = [];
+        this._init();
+    }
+
+    _init() {
+        const { drive, bus } = this;
+        if (this.signalForward) {
+            const unsub = bus.subscribe(this.signalForward, (v) => {
+                drive.jogForward = Boolean(v);
+                if (drive.jogForward) drive.jogBackward = false;
+            });
+            this._unsubs.push(unsub);
+        }
+        if (this.signalBackward) {
+            const unsub = bus.subscribe(this.signalBackward, (v) => {
+                drive.jogBackward = Boolean(v);
+                if (drive.jogBackward) drive.jogForward = false;
+            });
+            this._unsubs.push(unsub);
+        }
+    }
+
+    dispose() {
+        for (const fn of this._unsubs) fn();
+        this._unsubs = [];
+    }
+
+    toConfig() {
+        return {
+            type:           'simple',
+            signalForward:  this.signalForward,
+            signalBackward: this.signalBackward,
+        };
+    }
+}
+
+// ── DriveEngine ───────────────────────────────────────────────────────────────
+
+/**
+ * DriveEngine - main animation/kinematics engine.
+ *
+ * Manages all drives and ticks them on each animation frame.
+ * Integrates with the 3D editor's animation loop.
+ *
+ * Usage:
+ *   const engine = new DriveEngine();
+ *   engine.createFromAssets(sceneData.assets, threeObjects);
+ *   // In animation loop:
+ *   engine.tick(dt);
+ */
+export class DriveEngine {
+    constructor() {
+        this.bus     = new SignalBus();
+        this.drives  = [];     // Drive[]
+        this.controllers = []; // DriveCylinder | DriveSimple
+        this._lastTime = null;
+    }
+
+    /**
+     * Create drives from sceneData assets.
+     * Each asset can have an array `drives` in its config:
+     *
+     * asset.drives = [{
+     *   direction: 'LinearY',
+     *   targetSpeed: 50,
+     *   type: 'cylinder',
+     *   minPos: 0, maxPos: 200,
+     *   timeOut: 1.5, timeIn: 1.0,
+     *   signalOut: 'mywebui.0.device.cylinder_out',
+     *   signalIn:  'mywebui.0.device.cylinder_in',
+     *   signalIsOut: 'mywebui.0.device.cylinder_isout',
+     * }]
+     */
+    createFromAssets(assets, threeObjects) {
+        this.dispose();
+
+        for (const asset of assets) {
+            if (!asset.drives || asset.drives.length === 0) continue;
+
+            // Find matching Three.js object
+            const obj = threeObjects.find(o => o.userData.assetData?.id === asset.id);
+            if (!obj) continue;
+
+            for (const driveCfg of asset.drives) {
+                const drive = new Drive(obj, driveCfg);
+                this.drives.push(drive);
+
+                if (driveCfg.type === 'cylinder') {
+                    const ctrl = new DriveCylinder(drive, this.bus, driveCfg);
+                    this.controllers.push(ctrl);
+                } else if (driveCfg.type === 'simple') {
+                    const ctrl = new DriveSimple(drive, this.bus, driveCfg);
+                    this.controllers.push(ctrl);
+                }
+            }
+        }
+    }
+
+    /**
+     * Tick all drives. Call this in the Three.js animation loop.
+     * @param {number} dt - delta time in seconds
+     */
+    tick(dt) {
+        for (const drive of this.drives) {
+            drive.update(dt);
+        }
+    }
+
+    /** Called from Three.js requestAnimationFrame - auto-computes dt */
+    tickFromRAF(timestamp) {
+        if (this._lastTime === null) { this._lastTime = timestamp; return; }
+        const dt = Math.min((timestamp - this._lastTime) / 1000, 0.1); // cap at 100ms
+        this._lastTime = timestamp;
+        this.tick(dt);
+    }
+
+    /** Dispose all subscriptions and clear drives */
+    dispose() {
+        for (const ctrl of this.controllers) ctrl.dispose();
+        this.controllers = [];
+        this.drives = [];
+    }
+
+    /** Full dispose including signal bus */
+    destroy() {
+        this.dispose();
+        this.bus.dispose();
+    }
+
+    /** Get drive by asset id and drive index */
+    getDrive(assetId, driveIndex = 0) {
+        let count = 0;
+        for (const drive of this.drives) {
+            if (drive.node.userData.assetData?.id === assetId) {
+                if (count === driveIndex) return drive;
+                count++;
+            }
+        }
+        return null;
+    }
+}