iobroker.mywebui 1.41.7 → 1.42.1

package/io-package.json

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

package/package.json

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

package/www/3d-editor/tsconfig.json

@@ -16,7 +16,11 @@
     "resolveJsonModule": true,
     "allowSyntheticDefaultImports": true,
     "removeComments": false,
-    "baseUrl": "./src"
+    "baseUrl": "./",
+    "paths": {
+      "three": ["../node_modules/three/build/three.module.js"],
+      "three/*": ["../node_modules/three/*"]
+    }
   },
   "include": ["src/**/*"],
   "exclude": ["node_modules", "dist", "**/*.test.ts"]

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: []
+    }
+  };
+}