iobroker.mywebui 1.42.13 → 1.42.15

package/io-package.json

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

package/package.json

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

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

@@ -1,5 +1,6 @@
 import { BaseCustomWebComponentConstructorAppend, css, html } from "@gokturk413/base-custom-webcomponent";
 import { iobrokerHandler } from "../common/IobrokerHandler.js";
+import { DriveEngine } from "./IobrokerWebui3DDriveEngine.js";
 
 export class IobrokerWebui3DScreenEditor extends BaseCustomWebComponentConstructorAppend {
     static template = html`
@@ -168,6 +169,8 @@ export class IobrokerWebui3DScreenEditor extends BaseCustomWebComponentConstruct
         this._selectionBox = null;
         this._activeTab = 'all';
         this._collapsedSections = {};
+        this.driveEngine = new DriveEngine();
+        this._threeObjects = [];
     }
 
     async connectedCallback() {
@@ -242,13 +245,14 @@ export class IobrokerWebui3DScreenEditor extends BaseCustomWebComponentConstruct
         this.mouse = new THREE.Vector2();
 
         let animating = true;
-        const animate = () => {
+        const animate = (ts) => {
             if (!animating) return;
             requestAnimationFrame(animate);
+            if (this.driveEngine) this.driveEngine.tickFromRAF(ts);
             this.controls.update();
             this.renderer.render(this.scene, this.camera);
         };
-        animate();
+        requestAnimationFrame(animate);
         this._stopAnimation = () => { animating = false; };
 
         this.renderer.domElement.addEventListener('click', (e) => this.onMouseClick(e));
@@ -327,6 +331,12 @@ export class IobrokerWebui3DScreenEditor extends BaseCustomWebComponentConstruct
             model.rotation.set(asset.rotation?.x ?? 0, asset.rotation?.y ?? 0, asset.rotation?.z ?? 0);
             model.scale.set(asset.scale?.x ?? 1, asset.scale?.y ?? 1, asset.scale?.z ?? 1);
             this.scene.add(model);
+            // Register for DriveEngine
+            this._threeObjects = this._threeObjects.filter(o => o.userData.assetId !== asset.id);
+            this._threeObjects.push(model);
+            if (this.driveEngine && Array.isArray(this.sceneData?.assets)) {
+                this.driveEngine.createFromAssets(this.sceneData.assets, this._threeObjects);
+            }
             this.refreshTree();
         }, undefined, (err) => {
             if (revoke) URL.revokeObjectURL(url);
@@ -458,8 +468,10 @@ export class IobrokerWebui3DScreenEditor extends BaseCustomWebComponentConstruct
         if (showAssets) {
             const filtered = assets.filter(a => !search || a.name.toLowerCase().includes(search));
             this._renderSection(el, 'Assets', 'assets', filtered, (asset) => {
-                const node = this._makeTreeNode('📦', asset.name, 'Drive',
-                    this.selectedObject?.userData.assetData?.id === asset.id);
+                const driveCnt = (asset.drives?.length ?? 0);
+                const badge = driveCnt > 0 ? `${driveCnt} drive${driveCnt>1?'s':''}` : 'model';
+                const isSelected = this.selectedObject?.userData.assetData?.id === asset.id;
+                const node = this._makeTreeNode('📦', asset.name, badge, isSelected, driveCnt > 0 ? 'drive' : '');
                 node.addEventListener('click', () => this._selectAsset(asset));
                 node.addEventListener('contextmenu', (e) => { e.preventDefault(); this._assetContextMenu(asset, e); });
                 return node;
@@ -622,7 +634,8 @@ export class IobrokerWebui3DScreenEditor extends BaseCustomWebComponentConstruct
                 rotation: { x: 0, y: 0, z: 0 },
                 scale: { x: 1, y: 1, z: 1 },
                 visible: true,
-                bindings: {}
+                bindings: {},
+                drives: []
             };
             if (!this.sceneData.assets) this.sceneData.assets = [];
             this.sceneData.assets.push(asset);
@@ -707,6 +720,7 @@ export class IobrokerWebui3DScreenEditor extends BaseCustomWebComponentConstruct
 
     disconnectedCallback() {
         if (this._stopAnimation) this._stopAnimation();
+        if (this.driveEngine) this.driveEngine.destroy();
         if (this.renderer) {
             this.renderer.dispose();
             this.renderer.domElement?.remove();

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

@@ -1498,19 +1498,22 @@ export class IobrokerWebuiAppShell extends BaseCustomWebComponentConstructorAppe
         }
     }
     show3DObjectProperties(obj, onChange) {
-        const id = '3d_properties';
-        // Reuse existing dock or open new one
-        const existing = this.isDockOpenAndActivate(id);
-        let panel;
-        if (!existing) {
+        // Reuse cached panel reference (avoid querySelector with invalid CSS id)
+        let panel = this._tdPropsPanel;
+        if (!panel || !panel.isConnected) {
             panel = document.createElement('div');
-            panel.id = id;
+            panel.id = 'tdPropsPanel';
             panel.title = '3D Properties';
             panel.style.cssText = 'width:100%;height:100%;overflow:auto;background:#1e1e1e;color:#ccc;font-size:12px;font-family:"Segoe UI",sans-serif;';
-            this.openDock(panel);
+            // Dock to right side (attributeDock area)
+            panel.setAttribute('dock-spawn-dock-to', 'attributeDock');
+            panel.setAttribute('dock-spawn-dock-type', 'fill');
+            panel.setAttribute('dock-spawn-panel-type', 'document');
+            this._dock.appendChild(panel);
+            this._tdPropsPanel = panel;
         } else {
-            panel = this.shadowRoot?.querySelector('#' + id) ||
-                    document.querySelector('#' + id);
+            // Activate existing tab
+            this.isDockOpenAndActivate('tdPropsPanel');
         }
         if (!panel) return;
 
@@ -1520,63 +1523,98 @@ export class IobrokerWebuiAppShell extends BaseCustomWebComponentConstructorAppe
         const rot = obj.rotation ?? { x: 0, y: 0, z: 0 };
         const scl = obj.scale ?? { x: 1, y: 1, z: 1 };
 
+        const bindingsHtml = obj.bindings && Object.keys(obj.bindings).length > 0
+            ? Object.entries(obj.bindings).map(([k, bv]) =>
+                `<div style="padding:2px 0;border-bottom:1px solid #3c3c3c;display:flex;gap:4px;">
+                    <span style="color:#4ec9b0;flex:1;">${k}</span>
+                    <span style="color:#888;flex:2;overflow:hidden;text-overflow:ellipsis;">${bv.signal||''}</span>
+                </div>`).join('')
+            : '<span style="font-style:italic;color:#555;">No bindings</span>';
+
+        const drives = Array.isArray(obj.drives) ? obj.drives : [];
+        const drivesHtml = drives.length > 0
+            ? drives.map((d, i) => `
+                <div class="drive-card" data-drive-idx="${i}">
+                    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;">
+                        <span style="color:#4ec9b0;font-size:10px;font-weight:bold;">Drive ${i+1} · ${d.direction||'LinearX'}</span>
+                        <button class="drive-del-btn" data-drive-idx="${i}" style="background:#5a1a1a;color:#f44747;border:1px solid #8a2a2a;border-radius:2px;cursor:pointer;padding:1px 5px;font-size:9px;">✕</button>
+                    </div>
+                    <div style="display:grid;grid-template-columns:1fr 1fr;gap:3px;font-size:10px;">
+                        <div><span style="color:#888;">Type:</span> <span style="color:#ccc;">${d.type||'cylinder'}</span></div>
+                        <div><span style="color:#888;">Speed:</span> <span style="color:#ccc;">${d.targetSpeed||100} mm/s</span></div>
+                        ${d.type==='cylinder'||!d.type ? `
+                        <div><span style="color:#888;">Min:</span> <span style="color:#ccc;">${d.minPos??0} mm</span></div>
+                        <div><span style="color:#888;">Max:</span> <span style="color:#ccc;">${d.maxPos??100} mm</span></div>
+                        <div style="grid-column:1/-1;"><span style="color:#888;">Out signal:</span><br><span style="color:#9cdcfe;word-break:break-all;">${d.signalOut||'—'}</span></div>
+                        <div style="grid-column:1/-1;"><span style="color:#888;">In signal:</span><br><span style="color:#9cdcfe;word-break:break-all;">${d.signalIn||'—'}</span></div>
+                        ` : `
+                        <div style="grid-column:1/-1;"><span style="color:#888;">Forward:</span><br><span style="color:#9cdcfe;word-break:break-all;">${d.signalForward||'—'}</span></div>
+                        <div style="grid-column:1/-1;"><span style="color:#888;">Backward:</span><br><span style="color:#9cdcfe;word-break:break-all;">${d.signalBackward||'—'}</span></div>
+                        `}
+                    </div>
+                </div>`).join('')
+            : '<span style="font-style:italic;color:#555;font-size:10px;">No drives configured</span>';
+
         panel.innerHTML = `
+            <style>
+                .pg-group{margin-bottom:10px;}
+                .pg-header{color:#888;font-size:10px;font-weight:bold;text-transform:uppercase;letter-spacing:0.5px;padding:4px 0;border-bottom:1px solid #3c3c3c;margin-bottom:4px;}
+                .pg-row{display:flex;align-items:center;margin-bottom:3px;}
+                .pg-row label{width:16px;color:#888;font-size:10px;margin-right:6px;}
+                .pg-input{flex:1;background:#3c3c3c;border:1px solid #555;color:#ccc;padding:3px 5px;border-radius:2px;font-size:11px;}
+                .pg-input:focus{outline:none;border-color:#9cdcfe;}
+                .drive-card{background:#1a2a1a;border:1px solid #2a4a2a;border-radius:3px;padding:6px;margin-bottom:6px;}
+            </style>
             <div style="padding:8px;border-bottom:1px solid #3c3c3c;background:#252526;">
-                <div style="color:#9cdcfe;font-weight:bold;font-size:11px;letter-spacing:0.5px;">📦 ${obj.name || 'Object'}</div>
+                <div style="color:#9cdcfe;font-weight:bold;font-size:11px;letter-spacing:0.5px;">&#128230; ${obj.name || 'Object'}</div>
                 <div style="color:#666;font-size:10px;">${obj.type || 'model'}</div>
             </div>
             <div style="padding:8px;">
                 <div class="pg-group">
                     <div class="pg-header">Position</div>
-                    <div class="pg-row"><label>X</label><input class="pg-input" id="px" type="number" step="0.1" value="${(pos.x||0).toFixed(3)}"></div>
-                    <div class="pg-row"><label>Y</label><input class="pg-input" id="py" type="number" step="0.1" value="${(pos.y||0).toFixed(3)}"></div>
-                    <div class="pg-row"><label>Z</label><input class="pg-input" id="pz" type="number" step="0.1" value="${(pos.z||0).toFixed(3)}"></div>
+                    <div class="pg-row"><label>X</label><input class="pg-input" data-fid="px" type="number" step="0.1" value="${(pos.x||0).toFixed(3)}"></div>
+                    <div class="pg-row"><label>Y</label><input class="pg-input" data-fid="py" type="number" step="0.1" value="${(pos.y||0).toFixed(3)}"></div>
+                    <div class="pg-row"><label>Z</label><input class="pg-input" data-fid="pz" type="number" step="0.1" value="${(pos.z||0).toFixed(3)}"></div>
                 </div>
                 <div class="pg-group">
                     <div class="pg-header">Rotation (rad)</div>
-                    <div class="pg-row"><label>X</label><input class="pg-input" id="rx" type="number" step="0.01" value="${(rot.x||0).toFixed(4)}"></div>
-                    <div class="pg-row"><label>Y</label><input class="pg-input" id="ry" type="number" step="0.01" value="${(rot.y||0).toFixed(4)}"></div>
-                    <div class="pg-row"><label>Z</label><input class="pg-input" id="rz" type="number" step="0.01" value="${(rot.z||0).toFixed(4)}"></div>
+                    <div class="pg-row"><label>X</label><input class="pg-input" data-fid="rx" type="number" step="0.01" value="${(rot.x||0).toFixed(4)}"></div>
+                    <div class="pg-row"><label>Y</label><input class="pg-input" data-fid="ry" type="number" step="0.01" value="${(rot.y||0).toFixed(4)}"></div>
+                    <div class="pg-row"><label>Z</label><input class="pg-input" data-fid="rz" type="number" step="0.01" value="${(rot.z||0).toFixed(4)}"></div>
                 </div>
                 <div class="pg-group">
                     <div class="pg-header">Scale</div>
-                    <div class="pg-row"><label>X</label><input class="pg-input" id="sx" type="number" step="0.1" value="${(scl.x||1).toFixed(3)}"></div>
-                    <div class="pg-row"><label>Y</label><input class="pg-input" id="sy" type="number" step="0.1" value="${(scl.y||1).toFixed(3)}"></div>
-                    <div class="pg-row"><label>Z</label><input class="pg-input" id="sz" type="number" step="0.1" value="${(scl.z||1).toFixed(3)}"></div>
+                    <div class="pg-row"><label>X</label><input class="pg-input" data-fid="sx" type="number" step="0.1" value="${(scl.x||1).toFixed(3)}"></div>
+                    <div class="pg-row"><label>Y</label><input class="pg-input" data-fid="sy" type="number" step="0.1" value="${(scl.y||1).toFixed(3)}"></div>
+                    <div class="pg-row"><label>Z</label><input class="pg-input" data-fid="sz" type="number" step="0.1" value="${(scl.z||1).toFixed(3)}"></div>
+                </div>
+                <div class="pg-group">
+                    <div class="pg-header">&#9881; Drives / Kinematics</div>
+                    <div class="drives-list" style="margin-bottom:6px;">${drivesHtml}</div>
+                    <button class="drive-add-btn" style="width:100%;padding:4px;background:#1a2a3a;color:#9cdcfe;border:1px solid #2a4a6a;border-radius:3px;cursor:pointer;font-size:10px;">&#43; Add Drive</button>
                 </div>
                 <div class="pg-group">
                     <div class="pg-header">ioBroker Bindings</div>
-                    <div id="bindList" style="font-size:10px;color:#666;padding:4px 0;">${
-                        obj.bindings && Object.keys(obj.bindings).length > 0
-                            ? Object.entries(obj.bindings).map(([k,v]) =>
-                                `<div style="padding:2px 0;border-bottom:1px solid #3c3c3c;display:flex;gap:4px;">
-                                    <span style="color:#4ec9b0;flex:1;">${k}</span>
-                                    <span style="color:#888;flex:2;overflow:hidden;text-overflow:ellipsis;">${v.signal||''}</span>
-                                </div>`).join('')
-                            : '<span style="font-style:italic;">No bindings</span>'
-                    }</div>
-                    <button id="addBindBtn" style="width:100%;padding:4px;background:#1a3a1a;color:#4ec9b0;border:1px solid #2a5a2a;border-radius:3px;cursor:pointer;font-size:10px;margin-top:4px;">+ Add Binding</button>
+                    <div style="font-size:10px;padding:4px 0;">${bindingsHtml}</div>
+                    <button class="bind-add-btn" style="width:100%;padding:4px;background:#1a3a1a;color:#4ec9b0;border:1px solid #2a5a2a;border-radius:3px;cursor:pointer;font-size:10px;margin-top:4px;">+ Add Binding</button>
                 </div>
             </div>
-            <style>
-                .pg-group { margin-bottom:10px; }
-                .pg-header { color:#888;font-size:10px;font-weight:bold;text-transform:uppercase;letter-spacing:0.5px;padding:4px 0;border-bottom:1px solid #3c3c3c;margin-bottom:4px; }
-                .pg-row { display:flex;align-items:center;margin-bottom:3px; }
-                .pg-row label { width:16px;color:#888;font-size:10px;margin-right:6px; }
-                .pg-input { flex:1;background:#3c3c3c;border:1px solid #555;color:#ccc;padding:3px 5px;border-radius:2px;font-size:11px; }
-                .pg-input:focus { outline:none;border-color:#9cdcfe; }
-            </style>
         `;
 
-        const applyChange = () => {
-            obj.position = { x: parseFloat(panel.querySelector('#px').value)||0, y: parseFloat(panel.querySelector('#py').value)||0, z: parseFloat(panel.querySelector('#pz').value)||0 };
-            obj.rotation = { x: parseFloat(panel.querySelector('#rx').value)||0, y: parseFloat(panel.querySelector('#ry').value)||0, z: parseFloat(panel.querySelector('#rz').value)||0 };
-            obj.scale    = { x: parseFloat(panel.querySelector('#sx').value)||1, y: parseFloat(panel.querySelector('#sy').value)||1, z: parseFloat(panel.querySelector('#sz').value)||1 };
-            if (onChange) onChange(obj);
-        };
+        const p = panel;
+        const v = (id) => parseFloat(p.querySelector('[data-fid="'+id+'"]')?.value) || 0;
+        const v1 = (id) => parseFloat(p.querySelector('[data-fid="'+id+'"]')?.value) || 1;
+
+        p.querySelectorAll('[data-fid]').forEach(inp => {
+            inp.addEventListener('change', () => {
+                obj.position = { x: v('px'), y: v('py'), z: v('pz') };
+                obj.rotation = { x: v('rx'), y: v('ry'), z: v('rz') };
+                obj.scale    = { x: v1('sx'), y: v1('sy'), z: v1('sz') };
+                if (onChange) onChange(obj);
+            });
+        });
 
-        panel.querySelectorAll('.pg-input').forEach(inp => inp.addEventListener('change', applyChange));
-        panel.querySelector('#addBindBtn').addEventListener('click', () => {
+        p.querySelector('.bind-add-btn')?.addEventListener('click', () => {
             const prop = prompt('Property (e.g. position.x, rotation.y, scale.z):', 'position.x');
             if (!prop) return;
             const signal = prompt('ioBroker signal path:', '');
@@ -1585,6 +1623,135 @@ export class IobrokerWebuiAppShell extends BaseCustomWebComponentConstructorAppe
             obj.bindings[prop] = { signal, type: 'number' };
             this.show3DObjectProperties(obj, onChange);
         });
+
+        p.querySelector('.drive-add-btn')?.addEventListener('click', () => {
+            this._showAddDriveDialog(obj, onChange);
+        });
+
+        p.querySelectorAll('.drive-del-btn').forEach(btn => {
+            btn.addEventListener('click', () => {
+                const idx = parseInt(btn.dataset.driveIdx);
+                if (!Array.isArray(obj.drives)) return;
+                obj.drives.splice(idx, 1);
+                if (onChange) onChange(obj);
+                this.show3DObjectProperties(obj, onChange);
+            });
+        });
+    }
+
+    _showAddDriveDialog(obj, onChange) {
+        // Build a modal dialog for drive configuration
+        const overlay = document.createElement('div');
+        overlay.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,0.7);z-index:99999;display:flex;align-items:center;justify-content:center;';
+
+        const DIRECTIONS = ['LinearX','LinearY','LinearZ','RotationX','RotationY','RotationZ'];
+        const dirOptions = DIRECTIONS.map(d => `<option value="${d}">${d}</option>`).join('');
+
+        overlay.innerHTML = `
+            <div style="background:#252526;border:1px solid #3c3c3c;border-radius:6px;padding:16px;width:340px;font-family:'Segoe UI',sans-serif;font-size:12px;color:#ccc;">
+                <div style="color:#9cdcfe;font-weight:bold;font-size:13px;margin-bottom:12px;">&#9881; Add Drive</div>
+                <div style="display:grid;gap:8px;">
+                    <div>
+                        <label style="color:#888;font-size:10px;display:block;margin-bottom:2px;">Type</label>
+                        <select id="drv_type" style="width:100%;background:#3c3c3c;border:1px solid #555;color:#ccc;padding:4px;border-radius:3px;">
+                            <option value="cylinder">Cylinder (Out/In signals)</option>
+                            <option value="simple">Simple (Forward/Backward jog)</option>
+                        </select>
+                    </div>
+                    <div>
+                        <label style="color:#888;font-size:10px;display:block;margin-bottom:2px;">Axis / Direction</label>
+                        <select id="drv_dir" style="width:100%;background:#3c3c3c;border:1px solid #555;color:#ccc;padding:4px;border-radius:3px;">${dirOptions}</select>
+                    </div>
+                    <div>
+                        <label style="color:#888;font-size:10px;display:block;margin-bottom:2px;">Speed (mm/s or deg/s)</label>
+                        <input id="drv_speed" type="number" value="100" style="width:100%;box-sizing:border-box;background:#3c3c3c;border:1px solid #555;color:#ccc;padding:4px;border-radius:3px;">
+                    </div>
+                    <div id="cyl_opts">
+                        <div style="display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:6px;">
+                            <div>
+                                <label style="color:#888;font-size:10px;display:block;margin-bottom:2px;">Min Pos (mm)</label>
+                                <input id="drv_min" type="number" value="0" style="width:100%;box-sizing:border-box;background:#3c3c3c;border:1px solid #555;color:#ccc;padding:4px;border-radius:3px;">
+                            </div>
+                            <div>
+                                <label style="color:#888;font-size:10px;display:block;margin-bottom:2px;">Max Pos (mm)</label>
+                                <input id="drv_max" type="number" value="200" style="width:100%;box-sizing:border-box;background:#3c3c3c;border:1px solid #555;color:#ccc;padding:4px;border-radius:3px;">
+                            </div>
+                        </div>
+                        <div style="display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:6px;">
+                            <div>
+                                <label style="color:#888;font-size:10px;display:block;margin-bottom:2px;">Time Out (s)</label>
+                                <input id="drv_tout" type="number" value="1" step="0.1" style="width:100%;box-sizing:border-box;background:#3c3c3c;border:1px solid #555;color:#ccc;padding:4px;border-radius:3px;">
+                            </div>
+                            <div>
+                                <label style="color:#888;font-size:10px;display:block;margin-bottom:2px;">Time In (s)</label>
+                                <input id="drv_tin" type="number" value="1" step="0.1" style="width:100%;box-sizing:border-box;background:#3c3c3c;border:1px solid #555;color:#ccc;padding:4px;border-radius:3px;">
+                            </div>
+                        </div>
+                        <label style="color:#888;font-size:10px;display:block;margin-bottom:2px;">Signal Out (extend)</label>
+                        <input id="drv_sigout" type="text" placeholder="mywebui.0.device.out" style="width:100%;box-sizing:border-box;background:#3c3c3c;border:1px solid #555;color:#9cdcfe;padding:4px;border-radius:3px;margin-bottom:6px;">
+                        <label style="color:#888;font-size:10px;display:block;margin-bottom:2px;">Signal In (retract)</label>
+                        <input id="drv_sigin" type="text" placeholder="mywebui.0.device.in" style="width:100%;box-sizing:border-box;background:#3c3c3c;border:1px solid #555;color:#9cdcfe;padding:4px;border-radius:3px;margin-bottom:6px;">
+                        <label style="color:#888;font-size:10px;display:block;margin-bottom:2px;">IsOut feedback (optional)</label>
+                        <input id="drv_isout" type="text" placeholder="mywebui.0.device.isout" style="width:100%;box-sizing:border-box;background:#3c3c3c;border:1px solid #555;color:#ccc;padding:4px;border-radius:3px;">
+                    </div>
+                    <div id="simple_opts" style="display:none;">
+                        <label style="color:#888;font-size:10px;display:block;margin-bottom:2px;">Signal Forward</label>
+                        <input id="drv_fwd" type="text" placeholder="mywebui.0.device.forward" style="width:100%;box-sizing:border-box;background:#3c3c3c;border:1px solid #555;color:#9cdcfe;padding:4px;border-radius:3px;margin-bottom:6px;">
+                        <label style="color:#888;font-size:10px;display:block;margin-bottom:2px;">Signal Backward</label>
+                        <input id="drv_bwd" type="text" placeholder="mywebui.0.device.backward" style="width:100%;box-sizing:border-box;background:#3c3c3c;border:1px solid #555;color:#9cdcfe;padding:4px;border-radius:3px;">
+                    </div>
+                </div>
+                <div style="display:flex;gap:8px;margin-top:14px;justify-content:flex-end;">
+                    <button id="drv_cancel" style="padding:5px 14px;background:#3c3c3c;color:#ccc;border:1px solid #555;border-radius:3px;cursor:pointer;">Cancel</button>
+                    <button id="drv_ok" style="padding:5px 14px;background:#0e639c;color:#fff;border:1px solid #1177bb;border-radius:3px;cursor:pointer;">Add Drive</button>
+                </div>
+            </div>
+        `;
+
+        document.body.appendChild(overlay);
+
+        const g = (id) => overlay.querySelector('#' + id);
+        g('drv_type').addEventListener('change', () => {
+            const t = g('drv_type').value;
+            g('cyl_opts').style.display = t === 'cylinder' ? '' : 'none';
+            g('simple_opts').style.display = t === 'simple' ? '' : 'none';
+        });
+
+        g('drv_cancel').addEventListener('click', () => document.body.removeChild(overlay));
+
+        g('drv_ok').addEventListener('click', () => {
+            const type = g('drv_type').value;
+            const direction = g('drv_dir').value;
+            const targetSpeed = parseFloat(g('drv_speed').value) || 100;
+            if (!Array.isArray(obj.drives)) obj.drives = [];
+
+            if (type === 'cylinder') {
+                obj.drives.push({
+                    type: 'cylinder',
+                    direction,
+                    targetSpeed,
+                    minPos:     parseFloat(g('drv_min').value) || 0,
+                    maxPos:     parseFloat(g('drv_max').value) || 200,
+                    timeOut:    parseFloat(g('drv_tout').value) || 1,
+                    timeIn:     parseFloat(g('drv_tin').value) || 1,
+                    signalOut:  g('drv_sigout').value.trim() || null,
+                    signalIn:   g('drv_sigin').value.trim() || null,
+                    signalIsOut: g('drv_isout').value.trim() || null,
+                });
+            } else {
+                obj.drives.push({
+                    type: 'simple',
+                    direction,
+                    targetSpeed,
+                    useLimits: false,
+                    signalForward:  g('drv_fwd').value.trim() || null,
+                    signalBackward: g('drv_bwd').value.trim() || null,
+                });
+            }
+            document.body.removeChild(overlay);
+            if (onChange) onChange(obj);
+            this.show3DObjectProperties(obj, onChange);
+        });
     }
     async open3DScreenEditor(name) {
         let id = '3dscreen_' + name;