iobroker.mywebui 1.42.1 → 1.42.2

package/package.json

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

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

@@ -6,6 +6,8 @@ export class IobrokerWebui3DScreenEditor extends BaseCustomWebComponentConstruct
         <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="addAssetBtn" style="padding:5px 15px;background:#28a745;color:white;border:none;cursor:pointer;border-radius:3px;">+ Add Asset</button>
+                <input id="fileInput" type="file" accept=".glb,.gltf,.fbx,.obj" style="display:none;">
                 <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>
@@ -13,9 +15,15 @@ export class IobrokerWebui3DScreenEditor extends BaseCustomWebComponentConstruct
                 <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 id="leftPanel" style="width:280px;background:#1e1e1e;border-right:1px solid #444;overflow:auto;display:flex;flex-direction:column;">
+                    <div style="display:flex;border-bottom:1px solid #444;">
+                        <button id="treeTab" style="flex:1;padding:10px;background:#2a2a2a;color:#0f0;border:none;cursor:pointer;font-weight:bold;">Scene</button>
+                        <button id="assetsTab" style="flex:1;padding:10px;background:#1e1e1e;color:#aaa;border:none;cursor:pointer;">Assets</button>
+                    </div>
+                    <div id="sceneTree" style="padding:10px;flex:1;overflow:auto;"></div>
+                    <div id="assetsList" style="padding:10px;flex:1;overflow:auto;display:none;">
+                        <div id="assetsListContent" style="color:#aaa;font-size:12px;">No assets loaded</div>
+                    </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;">
@@ -428,10 +436,14 @@ export class IobrokerWebui3DScreenEditor extends BaseCustomWebComponentConstruct
 
     setupEventListeners() {
         this._getDomElement('saveBtn').addEventListener('click', () => this.saveScene());
+        this._getDomElement('addAssetBtn').addEventListener('click', () => this.onAddAssetClick());
+        this._getDomElement('fileInput').addEventListener('change', (e) => this.onFileSelected(e));
         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());
+        this._getDomElement('treeTab').addEventListener('click', () => this.switchTab('tree'));
+        this._getDomElement('assetsTab').addEventListener('click', () => this.switchTab('assets'));
     }
 
     async saveScene() {
@@ -469,6 +481,96 @@ export class IobrokerWebui3DScreenEditor extends BaseCustomWebComponentConstruct
         this.renderer.setSize(width, height);
     }
 
+    onAddAssetClick() {
+        this._getDomElement('fileInput').click();
+    }
+
+    onFileSelected(event) {
+        const file = event.target.files[0];
+        if (!file) return;
+
+        const reader = new FileReader();
+        reader.onload = (e) => {
+            const arrayBuffer = e.target.result;
+            const blob = new Blob([arrayBuffer]);
+            const url = URL.createObjectURL(blob);
+
+            // Create asset object
+            const assetId = 'asset_' + Date.now().toString(36);
+            const asset = {
+                id: assetId,
+                name: file.name,
+                type: 'model',
+                glbPath: url,
+                position: { x: 0, y: 0, z: 0 },
+                rotation: { x: 0, y: 0, z: 0 },
+                scale: { x: 1, y: 1, z: 1 },
+                visible: true
+            };
+
+            // Add to scene data
+            if (!this.sceneData.assets) {
+                this.sceneData.assets = [];
+            }
+            this.sceneData.assets.push(asset);
+
+            // Load and add to scene
+            this.loadAsset(asset);
+
+            // Update assets list
+            this.updateAssetsList();
+
+            console.log('✅ Asset added:', file.name);
+        };
+        reader.readAsArrayBuffer(file);
+    }
+
+    switchTab(tab) {
+        const sceneTree = this._getDomElement('sceneTree');
+        const assetsList = this._getDomElement('assetsList');
+        const treeTab = this._getDomElement('treeTab');
+        const assetsTab = this._getDomElement('assetsTab');
+
+        if (tab === 'tree') {
+            sceneTree.style.display = 'block';
+            assetsList.style.display = 'none';
+            treeTab.style.background = '#2a2a2a';
+            treeTab.style.color = '#0f0';
+            assetsTab.style.background = '#1e1e1e';
+            assetsTab.style.color = '#aaa';
+        } else {
+            sceneTree.style.display = 'none';
+            assetsList.style.display = 'block';
+            treeTab.style.background = '#1e1e1e';
+            treeTab.style.color = '#aaa';
+            assetsTab.style.background = '#2a2a2a';
+            assetsTab.style.color = '#0f0';
+        }
+    }
+
+    updateAssetsList() {
+        const assetsListContent = this._getDomElement('assetsListContent');
+
+        if (!this.sceneData.assets || this.sceneData.assets.length === 0) {
+            assetsListContent.innerHTML = '<div style="color:#888;">No assets loaded</div>';
+            return;
+        }
+
+        let html = '';
+        for (const asset of this.sceneData.assets) {
+            html += `
+                <div style="padding:8px;background:#242424;margin-bottom:5px;border-radius:3px;cursor:pointer;border:1px solid #333;">
+                    <div style="color:#0f0;font-weight:bold;">${asset.name}</div>
+                    <div style="color:#888;font-size:11px;margin-top:3px;">
+                        Type: ${asset.type}<br>
+                        Pos: (${asset.position.x.toFixed(1)}, ${asset.position.y.toFixed(1)}, ${asset.position.z.toFixed(1)})
+                    </div>
+                </div>
+            `;
+        }
+        assetsListContent.innerHTML = html;
+    }
+
     disconnectedCallback() {
         if (this.renderer) {
             this.renderer.dispose();