iobroker.mywebui 1.42.0 → 1.42.1

package/package.json

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

@@ -36,6 +36,7 @@ export class IobrokerHandler {
         this.clientId = Date.now().toString(16);
         this.#cache.set('screen', new Map());
         this.#cache.set('control', new Map());
+        this.#cache.set('3dscreen', new Map());
     }
     getNormalizedSignalName(id, relativeSignalPath, element) {
         return (relativeSignalPath ?? '') + id;
@@ -205,6 +206,8 @@ export class IobrokerHandler {
             return this.getScreen(name);
         else if (type == 'control')
             return this.getCustomControl(name);
+        else if (type == '3dscreen')
+            return this.get3DScreen(name);
         return null;
     }
     async getScreen(name) {
@@ -224,6 +227,23 @@ export class IobrokerHandler {
         }
         return screen;
     }
+    async get3DScreen(name) {
+        if (name[0] == '/')
+            name = name.substring(1);
+        let scene = this.#cache.get('3dscreen').get(name);
+        if (!scene) {
+            if (this._readyPromises)
+                await this.waitForReady();
+            try {
+                scene = await this._getObjectFromFile(this.configPath + "3dscreens/" + name + '.3dscreen');
+            }
+            catch (err) {
+                console.error("Error reading 3D Screen", scene, err);
+            }
+            this.#cache.get('3dscreen').set(name, scene);
+        }
+        return scene;
+    }
     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/3d-scene-store.ts

@@ -0,0 +1,304 @@
+/**
+ * 3D Scene Store
+ *
+ * Manages scene state, undo/redo, and persistence
+ * Adapts realvirtual's scene store pattern for mywebui
+ */
+
+import { TypedEvent } from "@gokturk413/base-custom-webcomponent";
+import {
+  Scene3D,
+  Scene3DSession,
+  EditOp,
+  Asset,
+  Light,
+  CameraPreset,
+  createDefaultScene,
+  SetAssetPropertyOp,
+  TransformAssetOp,
+  AddAssetOp,
+  RemoveAssetOp,
+  Vector3
+} from './3d-scene-types';
+import { iobrokerHandler } from "../common/IobrokerHandler.js";
+
+export class Scene3DStore {
+  private session: Scene3DSession;
+  private undoStack: EditOp[] = [];
+  private redoStack: EditOp[] = [];
+
+  sceneChanged = new TypedEvent<Scene3D>();
+  selectionChanged = new TypedEvent<string | null>();
+  dirty = new TypedEvent<boolean>();
+
+  private selectedId: string | null = null;
+
+  constructor(scene: Scene3D) {
+    this.session = {
+      saved: JSON.parse(JSON.stringify(scene)),
+      draft: JSON.parse(JSON.stringify(scene)),
+      isDraft: false,
+      dirty: false
+    };
+  }
+
+  // ─── Getters ────────────────────────────────────────────────────────
+
+  getDraft(): Scene3D {
+    return this.session.draft;
+  }
+
+  getSaved(): Scene3D | null {
+    return this.session.saved;
+  }
+
+  isDirty(): boolean {
+    return this.session.dirty;
+  }
+
+  getSelectedId(): string | null {
+    return this.selectedId;
+  }
+
+  // ─── Selection ───────────────────────────────────────────────────────
+
+  select(id: string | null): void {
+    this.selectedId = id;
+    this.selectionChanged.emit(id);
+  }
+
+  getSelected(): Asset | Light | null {
+    if (!this.selectedId) return null;
+
+    const asset = this.session.draft.assets.find(a => a.id === this.selectedId);
+    if (asset) return asset;
+
+    const light = this.session.draft.lights.find(l => l.id === this.selectedId);
+    return light || null;
+  }
+
+  // ─── Operations ──────────────────────────────────────────────────────
+
+  setAssetProperty(assetId: string, property: string, value: any): void {
+    const asset = this.session.draft.assets.find(a => a.id === assetId);
+    if (!asset) return;
+
+    const prev = this.getNestedProperty(asset, property);
+    this.setNestedProperty(asset, property, value);
+
+    const op: SetAssetPropertyOp = {
+      id: this.generateOpId(),
+      ts: Date.now(),
+      schemaV: 1,
+      kind: 'setAssetProperty',
+      assetId,
+      property,
+      value,
+      prev
+    };
+
+    this.applyOp(op);
+  }
+
+  setLightProperty(lightId: string, property: string, value: any): void {
+    const light = this.session.draft.lights.find(l => l.id === lightId);
+    if (!light) return;
+
+    const prev = this.getNestedProperty(light, property);
+    this.setNestedProperty(light, property, value);
+
+    const op = {
+      id: this.generateOpId(),
+      ts: Date.now(),
+      schemaV: 1,
+      kind: 'setLightProperty' as const,
+      lightId,
+      property,
+      value,
+      prev
+    };
+
+    this.applyOp(op);
+  }
+
+  transformAsset(assetId: string, position: Vector3, rotation: Vector3, scale: Vector3): void {
+    const asset = this.session.draft.assets.find(a => a.id === assetId);
+    if (!asset) return;
+
+    const prev = {
+      position: { ...asset.position },
+      rotation: { ...asset.rotation },
+      scale: { ...asset.scale }
+    };
+
+    asset.position = position;
+    asset.rotation = rotation;
+    asset.scale = scale;
+
+    const op: TransformAssetOp = {
+      id: this.generateOpId(),
+      ts: Date.now(),
+      schemaV: 1,
+      kind: 'transformAsset',
+      assetId,
+      position,
+      rotation,
+      scale,
+      prev
+    };
+
+    this.applyOp(op);
+  }
+
+  addAsset(asset: Asset): void {
+    this.session.draft.assets.push(asset);
+
+    const op: AddAssetOp = {
+      id: this.generateOpId(),
+      ts: Date.now(),
+      schemaV: 1,
+      kind: 'addAsset',
+      asset: JSON.parse(JSON.stringify(asset))
+    };
+
+    this.applyOp(op);
+  }
+
+  removeAsset(assetId: string): void {
+    const index = this.session.draft.assets.findIndex(a => a.id === assetId);
+    if (index === -1) return;
+
+    const asset = this.session.draft.assets[index];
+    this.session.draft.assets.splice(index, 1);
+
+    const op: RemoveAssetOp = {
+      id: this.generateOpId(),
+      ts: Date.now(),
+      schemaV: 1,
+      kind: 'removeAsset',
+      assetId,
+      asset: JSON.parse(JSON.stringify(asset))
+    };
+
+    this.applyOp(op);
+  }
+
+  setCamera(camera: CameraPreset): void {
+    const prev = { ...this.session.draft.camera };
+    this.session.draft.camera = camera;
+
+    const op = {
+      id: this.generateOpId(),
+      ts: Date.now(),
+      schemaV: 1,
+      kind: 'setCamera' as const,
+      camera,
+      prev
+    };
+
+    this.applyOp(op);
+  }
+
+  // ─── Undo/Redo ───────────────────────────────────────────────────────
+
+  canUndo(): boolean {
+    return this.undoStack.length > 0;
+  }
+
+  canRedo(): boolean {
+    return this.redoStack.length > 0;
+  }
+
+  undo(): void {
+    if (!this.canUndo()) return;
+
+    const op = this.undoStack.pop()!;
+    this.redoStack.push(op);
+    this.inverseOp(op);
+  }
+
+  redo(): void {
+    if (!this.canRedo()) return;
+
+    const op = this.redoStack.pop()!;
+    this.undoStack.push(op);
+    this.applyOp(op);
+  }
+
+  // ─── Persistence ────────────────────────────────────────────────────
+
+  async save(): Promise<boolean> {
+    try {
+      const success = await iobrokerHandler.saveObject('3dscreen', this.session.draft.name, this.session.draft);
+      if (success) {
+        this.session.saved = JSON.parse(JSON.stringify(this.session.draft));
+        this.session.dirty = false;
+        this.dirty.emit(false);
+        return true;
+      }
+      return false;
+    } catch (err) {
+      console.error('Error saving 3D scene:', err);
+      return false;
+    }
+  }
+
+  // ─── Private helpers ────────────────────────────────────────────────
+
+  private applyOp(op: EditOp): void {
+    this.undoStack.push(op);
+    this.redoStack = [];
+    this.session.draft.edits.ops.push(op);
+    this.markDirty();
+  }
+
+  private inverseOp(op: EditOp): void {
+    if (op.kind === 'setAssetProperty') {
+      const asset = this.session.draft.assets.find(a => a.id === op.assetId);
+      if (asset) {
+        this.setNestedProperty(asset, op.property, op.prev);
+      }
+    } else if (op.kind === 'transformAsset') {
+      const asset = this.session.draft.assets.find(a => a.id === op.assetId);
+      if (asset) {
+        asset.position = op.prev.position;
+        asset.rotation = op.prev.rotation;
+        asset.scale = op.prev.scale;
+      }
+    } else if (op.kind === 'addAsset') {
+      this.session.draft.assets = this.session.draft.assets.filter(a => a.id !== op.asset.id);
+    } else if (op.kind === 'removeAsset') {
+      this.session.draft.assets.push(op.asset);
+    } else if (op.kind === 'setCamera') {
+      this.session.draft.camera = op.prev;
+    }
+    this.markDirty();
+  }
+
+  private markDirty(): void {
+    this.session.dirty = true;
+    this.dirty.emit(true);
+    this.sceneChanged.emit(this.session.draft);
+  }
+
+  private getNestedProperty(obj: any, path: string): any {
+    return path.split('.').reduce((curr, prop) => curr?.[prop], obj);
+  }
+
+  private setNestedProperty(obj: any, path: string, value: any): void {
+    const parts = path.split('.');
+    const last = parts.pop();
+    if (!last) return;
+
+    let current = obj;
+    for (const part of parts) {
+      if (!current[part]) current[part] = {};
+      current = current[part];
+    }
+    current[last] = value;
+  }
+
+  private generateOpId(): string {
+    return 'op_' + Date.now().toString(36) + '_' + Math.random().toString(36).substr(2, 6);
+  }
+}

package/www/dist/frontend/config/3d-scene-types.ts

@@ -0,0 +1,277 @@
+/**
+ * 3D Scene Type Definitions
+ *
+ * A 3D Scene consists of:
+ * - Assets (GLB models with position, rotation, scale)
+ * - Lights (ambient, directional, point, spot)
+ * - Camera presets
+ * - Bindings (signals to properties)
+ * - Animations (from GLB or custom)
+ */
+
+export interface Vector3 {
+  x: number;
+  y: number;
+  z: number;
+}
+
+export interface Binding {
+  signal?: string;
+  scale?: number;
+  offset?: number;
+  min?: number;
+  max?: number;
+  type?: 'boolean' | 'color' | 'number' | 'string';
+  expression?: string;
+  [key: string]: any;
+}
+
+export interface Material {
+  color?: string;
+  emissive?: string;
+  metalness?: number;
+  roughness?: number;
+  opacity?: number;
+  [key: string]: any;
+}
+
+export interface Animation {
+  id: string;
+  name: string;
+  duration: number;
+  loop?: boolean;
+  speed?: number;
+  binding?: {
+    monitoredState?: string;
+    behavior?: 'autoplay' | 'monitorstate';
+    stateMaxValue?: number;
+    startValue?: number;
+    repeat?: boolean;
+  };
+}
+
+export interface Asset {
+  id: string;
+  name: string;
+  type: 'model' | 'light' | 'control';
+  glbPath?: string;
+  position: Vector3;
+  rotation: Vector3;
+  scale: Vector3;
+  visible: boolean;
+  material?: Material;
+  bindings?: Record<string, Binding>;
+  animations?: Animation[];
+  userData?: Record<string, any>;
+}
+
+export interface Light {
+  id: string;
+  name: string;
+  type: 'ambient' | 'directional' | 'point' | 'spot';
+  color: string;
+  intensity: number;
+  position?: Vector3;
+  castShadow?: boolean;
+  binding?: Record<string, Binding>;
+}
+
+export interface CameraPreset {
+  position: Vector3;
+  target: Vector3;
+  fov?: number;
+  binding?: Record<string, Binding>;
+}
+
+export interface GridConfig {
+  visible: boolean;
+  size: number;
+  divisions: number;
+  colorCenterLine: string;
+  colorGrid: string;
+}
+
+export interface AxesConfig {
+  visible: boolean;
+  size: number;
+}
+
+export interface SceneSettings {
+  backgroundColor: string;
+  enableControls: boolean;
+  enableRaycasting: boolean;
+  enablePropertyPanel: boolean;
+  shadowsEnabled: boolean;
+  antialiasing: boolean;
+  [key: string]: any;
+}
+
+export interface SceneEdits {
+  ops: EditOp[];
+  workspaceSettings?: Record<string, any>;
+}
+
+export type EditOp =
+  | SetAssetPropertyOp
+  | SetLightPropertyOp
+  | SetCameraOp
+  | AddAssetOp
+  | RemoveAssetOp
+  | TransformAssetOp
+  | AddLightOp
+  | RemoveLightOp
+  | TransformLightOp;
+
+export interface EditOpBase {
+  id: string;
+  ts: number;
+  schemaV: 1;
+  selectionAfter?: string | null;
+  selectionBefore?: string | null;
+}
+
+export interface SetAssetPropertyOp extends EditOpBase {
+  kind: 'setAssetProperty';
+  assetId: string;
+  property: string;
+  value: any;
+  prev: any;
+}
+
+export interface SetLightPropertyOp extends EditOpBase {
+  kind: 'setLightProperty';
+  lightId: string;
+  property: string;
+  value: any;
+  prev: any;
+}
+
+export interface SetCameraOp extends EditOpBase {
+  kind: 'setCamera';
+  camera: CameraPreset;
+  prev: CameraPreset;
+}
+
+export interface AddAssetOp extends EditOpBase {
+  kind: 'addAsset';
+  asset: Asset;
+}
+
+export interface RemoveAssetOp extends EditOpBase {
+  kind: 'removeAsset';
+  assetId: string;
+  asset: Asset;
+}
+
+export interface TransformAssetOp extends EditOpBase {
+  kind: 'transformAsset';
+  assetId: string;
+  position: Vector3;
+  rotation: Vector3;
+  scale: Vector3;
+  prev: { position: Vector3; rotation: Vector3; scale: Vector3 };
+}
+
+export interface AddLightOp extends EditOpBase {
+  kind: 'addLight';
+  light: Light;
+}
+
+export interface RemoveLightOp extends EditOpBase {
+  kind: 'removeLight';
+  lightId: string;
+  light: Light;
+}
+
+export interface TransformLightOp extends EditOpBase {
+  kind: 'transformLight';
+  lightId: string;
+  position: Vector3;
+  prev: Vector3;
+}
+
+export interface Scene3D {
+  id: string;
+  name: string;
+  description?: string;
+  version: string;
+  createdAt: string;
+  modifiedAt: string;
+
+  assets: Asset[];
+  lights: Light[];
+  camera: CameraPreset;
+
+  grid: GridConfig;
+  axes: AxesConfig;
+  settings: SceneSettings;
+
+  edits: SceneEdits;
+  properties?: Record<string, any>;
+  bindings?: Record<string, any>;
+
+  thumbnailDataUrl?: string;
+}
+
+export interface Scene3DSession {
+  saved: Scene3D | null;
+  draft: Scene3D;
+  isDraft: boolean;
+  dirty: boolean;
+}
+
+export function createDefaultScene(id: string, name: string): Scene3D {
+  return {
+    id,
+    name,
+    version: '1.0',
+    createdAt: new Date().toISOString(),
+    modifiedAt: new Date().toISOString(),
+    assets: [],
+    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
+      }
+    ],
+    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,
+      enablePropertyPanel: true,
+      shadowsEnabled: true,
+      antialiasing: true
+    },
+    edits: {
+      ops: []
+    }
+  };
+}

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

@@ -0,0 +1,480 @@
+import { BaseCustomWebComponentConstructorAppend, LazyLoader, css, html } from "@gokturk413/base-custom-webcomponent";
+import { iobrokerHandler } from "../common/IobrokerHandler.js";
+
+export class IobrokerWebui3DScreenEditor extends BaseCustomWebComponentConstructorAppend {
+    static template = html`
+        <div id="editor-container" style="width:100%;height:100%;display:flex;flex-direction:column;overflow:hidden;">
+            <div id="toolbar" style="height:40px;background:#2a2a2a;border-bottom:1px solid #444;display:flex;align-items:center;padding:0 10px;gap:10px;">
+                <button id="saveBtn" style="padding:5px 15px;background:#0078d4;color:white;border:none;cursor:pointer;border-radius:3px;">Save</button>
+                <button id="undoBtn" style="padding:5px 15px;background:#444;color:#aaa;border:none;cursor:pointer;border-radius:3px;">↶ Undo</button>
+                <button id="redoBtn" style="padding:5px 15px;background:#444;color:#aaa;border:none;cursor:pointer;border-radius:3px;">↷ Redo</button>
+                <div style="flex:1;"></div>
+                <button id="gridToggle" style="padding:5px 10px;background:#444;color:#aaa;border:none;cursor:pointer;border-radius:3px;">Grid</button>
+                <button id="axesToggle" style="padding:5px 10px;background:#444;color:#aaa;border:none;cursor:pointer;border-radius:3px;">Axes</button>
+            </div>
+            <div id="mainContent" style="flex:1;display:flex;overflow:hidden;">
+                <div id="leftPanel" style="width:250px;background:#1e1e1e;border-right:1px solid #444;overflow:auto;">
+                    <div style="padding:10px;font-weight:bold;color:#aaa;border-bottom:1px solid #444;">Scene Tree</div>
+                    <div id="sceneTree" style="padding:10px;"></div>
+                </div>
+                <div id="viewport" style="flex:1;background:#333;position:relative;overflow:hidden;"></div>
+                <div id="rightPanel" style="width:300px;background:#1e1e1e;border-left:1px solid #444;overflow:auto;">
+                    <div style="padding:10px;font-weight:bold;color:#aaa;border-bottom:1px solid #444;">Properties</div>
+                    <div id="propertyPanel" style="padding:10px;"></div>
+                </div>
+            </div>
+        </div>
+    `;
+
+    static style = css`
+        :host {
+            display: block;
+            width: 100%;
+            height: 100%;
+            background: #1a1a1a;
+            color: #aaa;
+        }
+
+        button:hover {
+            background: #555 !important;
+        }
+
+        button:active {
+            background: #666 !important;
+        }
+
+        input, select {
+            background: #333;
+            color: #aaa;
+            border: 1px solid #444;
+            padding: 5px;
+            border-radius: 3px;
+        }
+
+        .property-group {
+            margin-bottom: 15px;
+            padding: 10px;
+            background: #242424;
+            border-radius: 3px;
+            border: 1px solid #333;
+        }
+
+        .property-label {
+            font-size: 12px;
+            color: #888;
+            margin-bottom: 5px;
+        }
+
+        .property-input {
+            width: 100%;
+            box-sizing: border-box;
+        }
+    `;
+
+    constructor() {
+        super();
+        this.scene = null;
+        this.camera = null;
+        this.renderer = null;
+        this.controls = null;
+        this.raycaster = null;
+        this.mouse = null;
+        this.THREE = null;
+        this.gltfLoader = null;
+        this.loadedModel = null;
+        this.selectedObject = null;
+        this.sceneData = null;
+        this.sceneStore = null;
+    }
+
+    async connectedCallback() {
+        await this.init();
+    }
+
+    async init() {
+        try {
+            const statusEl = document.createElement('div');
+            statusEl.textContent = '⏳ Loading Three.js...';
+            statusEl.style.cssText = 'position:absolute;top:10px;left:10px;background:rgba(0,0,0,0.7);color:#0f0;padding:10px;font-family:monospace;z-index:100;';
+            this._getDomElement('viewport').appendChild(statusEl);
+
+            // Load Three.js
+            const THREE = await import('/mywebui.0.widgets/node_modules/three/build/three.module.js');
+            const { OrbitControls } = await import('/mywebui.0.widgets/node_modules/three/examples/jsm/controls/OrbitControls.js');
+            const { GLTFLoader } = await import('/mywebui.0.widgets/node_modules/three/examples/jsm/loaders/GLTFLoader.js');
+
+            this.THREE = THREE;
+            this.gltfLoader = new GLTFLoader();
+
+            statusEl.textContent = '⏳ Initializing scene...';
+
+            // Initialize Three.js
+            this.initThreeJS(THREE, OrbitControls);
+
+            // Load scene data
+            const sceneName = this.getAttribute('scene-name') || 'new-scene';
+            await this.loadScene(sceneName);
+
+            statusEl.textContent = '✅ 3D Editor Ready';
+            setTimeout(() => statusEl.remove(), 2000);
+
+            this.setupEventListeners();
+        } catch (error) {
+            console.error('❌ 3D Editor init failed:', error);
+        }
+    }
+
+    initThreeJS(THREE, OrbitControls) {
+        const viewport = this._getDomElement('viewport');
+        const width = viewport.clientWidth;
+        const height = viewport.clientHeight;
+
+        // Scene
+        this.scene = new THREE.Scene();
+        this.scene.background = new THREE.Color(0x333333);
+
+        // Camera
+        this.camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
+        this.camera.position.set(10, 10, 10);
+
+        // Renderer
+        this.renderer = new THREE.WebGLRenderer({ antialias: true });
+        this.renderer.setSize(width, height);
+        this.renderer.shadowMap.enabled = true;
+        viewport.appendChild(this.renderer.domElement);
+
+        // Lighting
+        const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
+        this.scene.add(ambientLight);
+
+        const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
+        directionalLight.position.set(10, 10, 10);
+        directionalLight.castShadow = true;
+        directionalLight.shadow.mapSize.width = 2048;
+        directionalLight.shadow.mapSize.height = 2048;
+        this.scene.add(directionalLight);
+
+        // Grid
+        const gridHelper = new THREE.GridHelper(20, 20, 0x888888, 0x444444);
+        gridHelper.position.y = -0.01;
+        gridHelper.userData.isGrid = true;
+        this.scene.add(gridHelper);
+
+        // Axes
+        const axesHelper = new THREE.AxesHelper(5);
+        axesHelper.userData.isAxes = true;
+        this.scene.add(axesHelper);
+
+        // Controls
+        this.controls = new OrbitControls(this.camera, this.renderer.domElement);
+        this.controls.autoRotate = false;
+        this.controls.enableZoom = true;
+        this.controls.enablePan = true;
+
+        // Raycasting
+        this.raycaster = new THREE.Raycaster();
+        this.mouse = new THREE.Vector2();
+
+        // Animation loop
+        const animate = () => {
+            requestAnimationFrame(animate);
+            this.controls.update();
+            this.renderer.render(this.scene, this.camera);
+        };
+        animate();
+
+        // Mouse click
+        this.renderer.domElement.addEventListener('click', (e) => this.onMouseClick(e));
+
+        // Resize
+        window.addEventListener('resize', () => this.onWindowResize());
+    }
+
+    async loadScene(sceneName) {
+        try {
+            this.sceneData = await iobrokerHandler.get3DScreen(sceneName);
+            if (!this.sceneData) {
+                console.warn(`Scene not found: ${sceneName}`);
+                return;
+            }
+
+            console.log('✅ Scene loaded:', this.sceneData);
+
+            // Update viewport
+            this.updateSceneView();
+        } catch (error) {
+            console.error('Error loading scene:', error);
+        }
+    }
+
+    updateSceneView() {
+        if (!this.sceneData) return;
+
+        // Add assets to scene
+        for (const asset of this.sceneData.assets) {
+            if (asset.type === 'model' && asset.glbPath) {
+                this.loadAsset(asset);
+            }
+        }
+
+        // Update lights
+        for (const light of this.sceneData.lights) {
+            this.addLightToScene(light);
+        }
+
+        // Update camera
+        if (this.sceneData.camera) {
+            this.camera.position.set(
+                this.sceneData.camera.position.x,
+                this.sceneData.camera.position.y,
+                this.sceneData.camera.position.z
+            );
+        }
+
+        // Update scene tree
+        this.updateSceneTree();
+
+        // Update property panel
+        this.updatePropertyPanel();
+    }
+
+    loadAsset(asset) {
+        if (!asset.glbPath) return;
+
+        this.gltfLoader.load(
+            asset.glbPath,
+            (gltf) => {
+                const model = gltf.scene;
+                model.userData.assetId = asset.id;
+                model.userData.assetData = asset;
+                model.position.set(asset.position.x, asset.position.y, asset.position.z);
+                model.rotation.set(asset.rotation.x, asset.rotation.y, asset.rotation.z);
+                model.scale.set(asset.scale.x, asset.scale.y, asset.scale.z);
+                this.scene.add(model);
+                console.log('✅ Asset loaded:', asset.name);
+            },
+            undefined,
+            (error) => console.error('Error loading asset:', error)
+        );
+    }
+
+    addLightToScene(light) {
+        let threeLight;
+
+        switch (light.type) {
+            case 'ambient':
+                threeLight = new this.THREE.AmbientLight(light.color, light.intensity);
+                break;
+            case 'directional':
+                threeLight = new this.THREE.DirectionalLight(light.color, light.intensity);
+                if (light.position) {
+                    threeLight.position.set(light.position.x, light.position.y, light.position.z);
+                }
+                if (light.castShadow) {
+                    threeLight.castShadow = true;
+                }
+                break;
+            case 'point':
+                threeLight = new this.THREE.PointLight(light.color, light.intensity);
+                if (light.position) {
+                    threeLight.position.set(light.position.x, light.position.y, light.position.z);
+                }
+                break;
+            case 'spot':
+                threeLight = new this.THREE.SpotLight(light.color, light.intensity);
+                if (light.position) {
+                    threeLight.position.set(light.position.x, light.position.y, light.position.z);
+                }
+                break;
+        }
+
+        if (threeLight) {
+            threeLight.userData.lightId = light.id;
+            threeLight.userData.lightData = light;
+            this.scene.add(threeLight);
+        }
+    }
+
+    onMouseClick(event) {
+        if (!this.scene || !this.camera) return;
+
+        const rect = this.renderer.domElement.getBoundingClientRect();
+        this.mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1;
+        this.mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1;
+
+        this.raycaster.setFromCamera(this.mouse, this.camera);
+        const intersects = this.raycaster.intersectObjects(this.scene.children, true);
+
+        for (const intersection of intersects) {
+            const obj = intersection.object;
+            if (obj.userData.assetId) {
+                this.selectObject(obj);
+                break;
+            }
+        }
+    }
+
+    selectObject(obj) {
+        if (this.selectedObject === obj) return;
+
+        // Deselect previous
+        if (this.selectedObject) {
+            this.selectedObject.userData.selected = false;
+        }
+
+        // Select new
+        this.selectedObject = obj;
+        obj.userData.selected = true;
+
+        this.updatePropertyPanel();
+    }
+
+    updateSceneTree() {
+        const treeEl = this._getDomElement('sceneTree');
+        treeEl.innerHTML = '';
+
+        // Assets
+        if (this.sceneData.assets && this.sceneData.assets.length > 0) {
+            const assetsDiv = document.createElement('div');
+            assetsDiv.style.cssText = 'margin-bottom:10px;';
+
+            const assetsTitle = document.createElement('div');
+            assetsTitle.textContent = '📦 Assets';
+            assetsTitle.style.cssText = 'color:#0f0;margin-bottom:5px;font-weight:bold;';
+            assetsDiv.appendChild(assetsTitle);
+
+            for (const asset of this.sceneData.assets) {
+                const itemDiv = document.createElement('div');
+                itemDiv.textContent = asset.name;
+                itemDiv.style.cssText = 'padding:5px;cursor:pointer;color:#aaa;margin-left:10px;';
+                itemDiv.addEventListener('click', () => console.log('Select asset:', asset.id));
+                assetsDiv.appendChild(itemDiv);
+            }
+
+            treeEl.appendChild(assetsDiv);
+        }
+
+        // Lights
+        if (this.sceneData.lights && this.sceneData.lights.length > 0) {
+            const lightsDiv = document.createElement('div');
+            lightsDiv.style.cssText = 'margin-bottom:10px;';
+
+            const lightsTitle = document.createElement('div');
+            lightsTitle.textContent = '💡 Lights';
+            lightsTitle.style.cssText = 'color:#ff0;margin-bottom:5px;font-weight:bold;';
+            lightsDiv.appendChild(lightsTitle);
+
+            for (const light of this.sceneData.lights) {
+                const itemDiv = document.createElement('div');
+                itemDiv.textContent = light.name;
+                itemDiv.style.cssText = 'padding:5px;cursor:pointer;color:#aaa;margin-left:10px;';
+                lightsDiv.appendChild(itemDiv);
+            }
+
+            treeEl.appendChild(lightsDiv);
+        }
+    }
+
+    updatePropertyPanel() {
+        const panelEl = this._getDomElement('propertyPanel');
+        panelEl.innerHTML = '';
+
+        if (!this.selectedObject || !this.selectedObject.userData.assetData) {
+            panelEl.innerHTML = '<div style="color:#888;">No selection</div>';
+            return;
+        }
+
+        const asset = this.selectedObject.userData.assetData;
+
+        // Position
+        const posGroup = document.createElement('div');
+        posGroup.className = 'property-group';
+        posGroup.innerHTML = `
+            <div class="property-label">Position</div>
+            <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:5px;">
+                <input type="number" id="posX" value="${asset.position.x}" step="0.1" class="property-input" placeholder="X">
+                <input type="number" id="posY" value="${asset.position.y}" step="0.1" class="property-input" placeholder="Y">
+                <input type="number" id="posZ" value="${asset.position.z}" step="0.1" class="property-input" placeholder="Z">
+            </div>
+        `;
+        panelEl.appendChild(posGroup);
+
+        // Rotation
+        const rotGroup = document.createElement('div');
+        rotGroup.className = 'property-group';
+        rotGroup.innerHTML = `
+            <div class="property-label">Rotation</div>
+            <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:5px;">
+                <input type="number" id="rotX" value="${asset.rotation.x}" step="0.1" class="property-input" placeholder="X">
+                <input type="number" id="rotY" value="${asset.rotation.y}" step="0.1" class="property-input" placeholder="Y">
+                <input type="number" id="rotZ" value="${asset.rotation.z}" step="0.1" class="property-input" placeholder="Z">
+            </div>
+        `;
+        panelEl.appendChild(rotGroup);
+
+        // Scale
+        const scaleGroup = document.createElement('div');
+        scaleGroup.className = 'property-group';
+        scaleGroup.innerHTML = `
+            <div class="property-label">Scale</div>
+            <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:5px;">
+                <input type="number" id="scaleX" value="${asset.scale.x}" step="0.1" class="property-input" placeholder="X">
+                <input type="number" id="scaleY" value="${asset.scale.y}" step="0.1" class="property-input" placeholder="Y">
+                <input type="number" id="scaleZ" value="${asset.scale.z}" step="0.1" class="property-input" placeholder="Z">
+            </div>
+        `;
+        panelEl.appendChild(scaleGroup);
+    }
+
+    setupEventListeners() {
+        this._getDomElement('saveBtn').addEventListener('click', () => this.saveScene());
+        this._getDomElement('undoBtn').addEventListener('click', () => console.log('Undo'));
+        this._getDomElement('redoBtn').addEventListener('click', () => console.log('Redo'));
+        this._getDomElement('gridToggle').addEventListener('click', () => this.toggleGrid());
+        this._getDomElement('axesToggle').addEventListener('click', () => this.toggleAxes());
+    }
+
+    async saveScene() {
+        try {
+            const success = await iobrokerHandler.saveObject('3dscreen', this.sceneData.name, this.sceneData);
+            if (success) {
+                console.log('✅ Scene saved:', this.sceneData.name);
+            }
+        } catch (error) {
+            console.error('Error saving scene:', error);
+        }
+    }
+
+    toggleGrid() {
+        const grid = this.scene.children.find(c => c.userData.isGrid);
+        if (grid) {
+            grid.visible = !grid.visible;
+        }
+    }
+
+    toggleAxes() {
+        const axes = this.scene.children.find(c => c.userData.isAxes);
+        if (axes) {
+            axes.visible = !axes.visible;
+        }
+    }
+
+    onWindowResize() {
+        const viewport = this._getDomElement('viewport');
+        const width = viewport.clientWidth;
+        const height = viewport.clientHeight;
+
+        this.camera.aspect = width / height;
+        this.camera.updateProjectionMatrix();
+        this.renderer.setSize(width, height);
+    }
+
+    disconnectedCallback() {
+        if (this.renderer) {
+            this.renderer.dispose();
+            this.renderer.domElement.remove();
+        }
+    }
+}
+
+customElements.define('iobroker-webui-3dscreen-editor', IobrokerWebui3DScreenEditor);

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

@@ -0,0 +1,251 @@
+import { BaseCustomWebComponentConstructorAppend, css, html } from "@gokturk413/base-custom-webcomponent";
+import { iobrokerHandler } from "../common/IobrokerHandler.js";
+
+export class IobrokerWebui3DScreenViewer extends BaseCustomWebComponentConstructorAppend {
+    static template = html`
+        <div id="container" style="width:100%;height:100%;position:relative;overflow:hidden;background:#333;">
+            <div id="viewport" style="width:100%;height:100%;"></div>
+            <div id="status" style="position:absolute;bottom:10px;left:10px;background:rgba(0,0,0,0.7);color:#0f0;padding:10px;font-family:monospace;font-size:12px;z-index:10;border-radius:3px;">Ready</div>
+        </div>
+    `;
+
+    static style = css`
+        :host {
+            display: block;
+            width: 100%;
+            height: 100%;
+            background: #333;
+        }
+    `;
+
+    constructor() {
+        super();
+        this.scene = null;
+        this.camera = null;
+        this.renderer = null;
+        this.controls = null;
+        this.THREE = null;
+        this.gltfLoader = null;
+        this.sceneData = null;
+        this.sceneNameAttr = null;
+    }
+
+    async connectedCallback() {
+        this.sceneNameAttr = this.getAttribute('scene-name');
+        if (!this.sceneNameAttr) {
+            this._getDomElement('status').textContent = '❌ No scene name';
+            return;
+        }
+
+        await this.init();
+    }
+
+    async init() {
+        try {
+            const statusEl = this._getDomElement('status');
+            statusEl.textContent = '⏳ Loading...';
+
+            // Load Three.js
+            const THREE = await import('/mywebui.0.widgets/node_modules/three/build/three.module.js');
+            const { OrbitControls } = await import('/mywebui.0.widgets/node_modules/three/examples/jsm/controls/OrbitControls.js');
+            const { GLTFLoader } = await import('/mywebui.0.widgets/node_modules/three/examples/jsm/loaders/GLTFLoader.js');
+
+            this.THREE = THREE;
+            this.gltfLoader = new GLTFLoader();
+
+            // Initialize Three.js
+            this.initThreeJS(THREE, OrbitControls);
+
+            // Load scene
+            await this.loadScene(this.sceneNameAttr);
+
+            statusEl.textContent = '✅ Ready';
+        } catch (error) {
+            console.error('❌ 3D Viewer init failed:', error);
+            this._getDomElement('status').textContent = '❌ ' + error.message;
+        }
+    }
+
+    initThreeJS(THREE, OrbitControls) {
+        const viewport = this._getDomElement('viewport');
+        const width = viewport.clientWidth;
+        const height = viewport.clientHeight;
+
+        // Scene
+        this.scene = new THREE.Scene();
+        this.scene.background = new THREE.Color(0x333333);
+
+        // Camera
+        this.camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
+        this.camera.position.set(10, 10, 10);
+
+        // Renderer
+        this.renderer = new THREE.WebGLRenderer({ antialias: true });
+        this.renderer.setSize(width, height);
+        this.renderer.shadowMap.enabled = true;
+        viewport.appendChild(this.renderer.domElement);
+
+        // Lighting
+        const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
+        this.scene.add(ambientLight);
+
+        const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
+        directionalLight.position.set(10, 10, 10);
+        directionalLight.castShadow = true;
+        directionalLight.shadow.mapSize.width = 2048;
+        directionalLight.shadow.mapSize.height = 2048;
+        this.scene.add(directionalLight);
+
+        // Grid
+        const gridHelper = new THREE.GridHelper(20, 20, 0x888888, 0x444444);
+        gridHelper.position.y = -0.01;
+        this.scene.add(gridHelper);
+
+        // Axes
+        const axesHelper = new THREE.AxesHelper(5);
+        this.scene.add(axesHelper);
+
+        // Controls
+        this.controls = new OrbitControls(this.camera, this.renderer.domElement);
+        this.controls.autoRotate = false;
+        this.controls.enableZoom = true;
+        this.controls.enablePan = true;
+
+        // Animation loop
+        let animating = true;
+        const animate = () => {
+            if (animating) {
+                requestAnimationFrame(animate);
+                this.controls.update();
+                this.renderer.render(this.scene, this.camera);
+            }
+        };
+        animate();
+
+        // Resize
+        window.addEventListener('resize', () => this.onWindowResize());
+
+        this._stopAnimation = () => { animating = false; };
+    }
+
+    async loadScene(sceneName) {
+        try {
+            this.sceneData = await iobrokerHandler.get3DScreen(sceneName);
+            if (!this.sceneData) {
+                throw new Error(`Scene not found: ${sceneName}`);
+            }
+
+            // Load assets
+            if (this.sceneData.assets) {
+                for (const asset of this.sceneData.assets) {
+                    if (asset.type === 'model' && asset.glbPath) {
+                        await this.loadAsset(asset);
+                    }
+                }
+            }
+
+            // Add lights
+            if (this.sceneData.lights) {
+                for (const light of this.sceneData.lights) {
+                    this.addLightToScene(light);
+                }
+            }
+
+            // Set camera
+            if (this.sceneData.camera) {
+                this.camera.position.set(
+                    this.sceneData.camera.position.x,
+                    this.sceneData.camera.position.y,
+                    this.sceneData.camera.position.z
+                );
+                this.camera.lookAt(
+                    this.sceneData.camera.target.x,
+                    this.sceneData.camera.target.y,
+                    this.sceneData.camera.target.z
+                );
+            }
+
+            console.log('✅ Scene loaded:', sceneName);
+        } catch (error) {
+            console.error('Error loading scene:', error);
+            throw error;
+        }
+    }
+
+    loadAsset(asset) {
+        return new Promise((resolve, reject) => {
+            this.gltfLoader.load(
+                asset.glbPath,
+                (gltf) => {
+                    const model = gltf.scene;
+                    model.position.set(asset.position.x, asset.position.y, asset.position.z);
+                    model.rotation.set(asset.rotation.x, asset.rotation.y, asset.rotation.z);
+                    model.scale.set(asset.scale.x, asset.scale.y, asset.scale.z);
+                    this.scene.add(model);
+                    console.log('✅ Asset loaded:', asset.name);
+                    resolve();
+                },
+                undefined,
+                (error) => {
+                    console.error('Error loading asset:', error);
+                    reject(error);
+                }
+            );
+        });
+    }
+
+    addLightToScene(light) {
+        let threeLight;
+
+        switch (light.type) {
+            case 'ambient':
+                threeLight = new this.THREE.AmbientLight(light.color, light.intensity);
+                break;
+            case 'directional':
+                threeLight = new this.THREE.DirectionalLight(light.color, light.intensity);
+                if (light.position) {
+                    threeLight.position.set(light.position.x, light.position.y, light.position.z);
+                }
+                if (light.castShadow) {
+                    threeLight.castShadow = true;
+                }
+                break;
+            case 'point':
+                threeLight = new this.THREE.PointLight(light.color, light.intensity);
+                if (light.position) {
+                    threeLight.position.set(light.position.x, light.position.y, light.position.z);
+                }
+                break;
+            case 'spot':
+                threeLight = new this.THREE.SpotLight(light.color, light.intensity);
+                if (light.position) {
+                    threeLight.position.set(light.position.x, light.position.y, light.position.z);
+                }
+                break;
+        }
+
+        if (threeLight) {
+            this.scene.add(threeLight);
+        }
+    }
+
+    onWindowResize() {
+        const viewport = this._getDomElement('viewport');
+        const width = viewport.clientWidth;
+        const height = viewport.clientHeight;
+
+        this.camera.aspect = width / height;
+        this.camera.updateProjectionMatrix();
+        this.renderer.setSize(width, height);
+    }
+
+    disconnectedCallback() {
+        if (this._stopAnimation) this._stopAnimation();
+        if (this.renderer) {
+            this.renderer.dispose();
+            this.renderer.domElement.remove();
+        }
+    }
+}
+
+customElements.define('iobroker-webui-3dscreen-viewer', IobrokerWebui3DScreenViewer);

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

@@ -99,6 +99,7 @@ export class IobrokerWebuiSolutionExplorer extends BaseCustomWebComponentConstru
     async createTreeNodes() {
         const result = await Promise.allSettled([
             this._createFolderNode('screen'),
+            this._createFolderNode('3dscreen'),
             this._createControlsNode(),
             this._createGlobalNode(),
             this._createNpmsNode(),
@@ -199,6 +200,9 @@ export class IobrokerWebuiSolutionExplorer extends BaseCustomWebComponentConstru
             case 'screen':
                 name = "Screens";
                 break;
+            case '3dscreen':
+                name = "3D Screens";
+                break;
             //case '':
             //    name='Additional Files';
             //    break;
@@ -301,6 +305,11 @@ export class IobrokerWebuiSolutionExplorer extends BaseCustomWebComponentConstru
                     else if (type == 'control') {
                         window.appShell.openScreenEditor(nm, type, s.html, s.style, s.script, s.settings, s.properties);
                     }
+                    else if (type == '3dscreen') {
+                        const editor = document.createElement('iobroker-webui-3dscreen-editor');
+                        editor.setAttribute('scene-name', nm);
+                        window.appShell.openDialog(editor, { x: 50, y: 50, width: 1200, height: 800 });
+                    }
                 });
             },
             data: { type, name: (dir ?? '') + '/' + x }