iobroker.webui 1.21.0 → 1.23.2

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2024 jochen.kuehner@gmx.de
+Copyright (c) 2025 jochen.kuehner@gmx.de
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -133,6 +133,22 @@ runtime.html?screenName=screen2
 	Placeholder for next versions:
 	### __WORK IN PROGRESS__
 -->
+### 1.23.2 (2025-01-19)
+- one more fix in gulpfile
+
+### 1.23.1 (2025-01-19)
+- fix gulp should work again
+
+### 1.23.0 (2025-01-19)
+- fix paste in events assignment
+- iobroker Signal Selector
+- binding to width and height in custom controls
+
+### 1.22.0 (2025-01-15)
+- local signals browser
+- style completition fixes
+- special bindings for "ring" cameras
+
 ### 1.21.0 (2024-12-28)
 - fix scripts with empty names on css
 - css props with only bindings are not shown
@@ -1000,4 +1016,4 @@ runtime.html?screenName=screen2
 ## License
 The MIT License (MIT)
 
-Copyright (c) 2024 jogibear9988 <jochen.kuehner@gmx.de>
+Copyright (c) 2025 jogibear9988 <jochen.kuehner@gmx.de>

package/dist/importmaps/importmap-config.d.ts

@@ -31,5 +31,6 @@ declare const importMapConfig: {
         wunderbaum: string;
         "wunderbaum/": string;
         "toastify-js": string;
+        "iobroker.iobroker-webcomponent-object-selector/": string;
     };
 };

package/dist/importmaps/importmap-config.js

@@ -31,7 +31,8 @@ const importMapConfig = {
         "long": "./node_modules/long/index.js",
         "wunderbaum": "./node_modules/wunderbaum/dist/wunderbaum.esm.min.js",
         "wunderbaum/": "./node_modules/wunderbaum/",
-        "toastify-js": "./node_modules/toastify-js/src/toastify-es.js"
+        "toastify-js": "./node_modules/toastify-js/src/toastify-es.js",
+        "iobroker.iobroker-webcomponent-object-selector/": "./node_modules/iobroker.iobroker-webcomponent-object-selector/"
     }
 };
 //@ts-ignore

package/gulpfile.mjs

@@ -47,14 +47,9 @@ function copyNodeModules() {
         "monaco-editor",
         //"tslib"
         //"wunderbaum",
-        
-        "/node_modules/blockly/blockly_compressed.js",
-        "/node_modules/blockly/blocks_compressed.js",
-        "/node_modules/blockly/javascript_compressed.js",
-        "/node_modules/blockly/msg/en.js",
-        "/node_modules/@blockly/zoom-to-fit/dist/index.js",
-    ]
 
+        "iobroker.iobroker-webcomponent-object-selector"
+    ]
     runtimeModules = runtimeModules.map(x => './node_modules/' + x + '/**/*')
 
     return src(runtimeModules, { base: './', encoding: false })
@@ -113,7 +108,7 @@ function cleanupNodeModules() {
 
 function cleanupMonaco() {
     return deleteAsync([
-        './www/node_modules/monaco-editor/min/vs/basic-languages/**/*', 
+        './www/node_modules/monaco-editor/min/vs/basic-languages/**/*',
         '!./www/node_modules/monaco-editor/min/vs/basic-languages/javascript',
         '!./www/node_modules/monaco-editor/min/vs/basic-languages/typescript',
         '!./www/node_modules/monaco-editor/min/vs/basic-languages/html',

package/io-package.json

@@ -1,7 +1,7 @@
 {
   "common": {
     "name": "webui",
-    "version": "1.21.0",
+    "version": "1.23.2",
     "titleLang": {
       "en": "webui",
       "de": "webui",
@@ -29,6 +29,58 @@
       "zh-cn": "使用万维网传送器的高锰用户接口"
     },
     "news": {
+      "1.23.2": {
+        "en": "one more fix in gulpfile",
+        "de": "noch eine fix in gulpfile",
+        "ru": "еще одно исправление в gulpfile",
+        "pt": "mais uma correção no gulpfile",
+        "nl": "nog een fix in gulpfile",
+        "fr": "une autre correction dans gulpfile",
+        "it": "un altro fix in gulpfile",
+        "es": "uno más se fijan en el archivo del gulp",
+        "pl": "jeszcze jeden fix w gulpfile",
+        "uk": "ще одна фіксація в gulpfile",
+        "zh-cn": "再加一个固醇"
+      },
+      "1.23.1": {
+        "en": "fix gulp should work again",
+        "de": "gulp sollte wieder funktionieren",
+        "ru": "исправить gulp должно работать снова",
+        "pt": "corrigir gulp deve funcionar novamente",
+        "nl": "fix gulp moet weer werken",
+        "fr": "réparer gulp devrait fonctionner à nouveau",
+        "it": "fissare gulp dovrebbe funzionare di nuovo",
+        "es": "arreglar golp debe trabajar de nuevo",
+        "pl": "fix gulp powinien działać ponownie",
+        "uk": "закріпити гельпом потрібно знову",
+        "zh-cn": "修补 gulp 应再次工作"
+      },
+      "1.23.0": {
+        "en": "fix paste in events assignment\niobroker Signal Selector\nbinding to width and height in custom controls",
+        "de": "fixieren sie paste in der ereigniszuordnung\niobroker Signal Selektor\nbindung an breite und höhe in benutzerdefinierten steuerungen",
+        "ru": "фиксация пасты в присвоении событий\niobroker Signal Selector\nпривязки к ширине и высоте в пользовательском контроле",
+        "pt": "corrigir pasta na atribuição de eventos\nseletor de Sinal iobroker\nligação à largura e altura em controles personalizados",
+        "nl": "plak plakken in de opdracht van gebeurtenissen\niobroker-signaalkiezer\nbinding aan breedte en hoogte in aangepaste controles",
+        "fr": "fixer coller dans l'affectation des événements\nsélecteur de signal iobroker\nfixation à la largeur et à la hauteur dans les commandes personnalisées",
+        "it": "correzione della pasta nell'assegnazione degli eventi\niobroker Selettore Segnale\nlegare a larghezza e altezza nei controlli personalizzati",
+        "es": "arreglar pasta en la asignación de eventos\niobroker Signal Selector\nunión a ancho y altura en controles personalizados",
+        "pl": "fix pasta w przyporządkowaniu zdarzeń\niobroker Selektor sygnału\nwiązanie do szerokości i wysokości w sterowaniu własnym",
+        "uk": "фіксувати пасту в появі подій\niobroker Signal Вибратор\nобов'язковий для ширини і висоти в користувацьких управліннях",
+        "zh-cn": "在事件任务中固定粘贴\nio 经纪人信号选择器\n绑定自定义控件中的宽度和高度"
+      },
+      "1.22.0": {
+        "en": "local signals browser\nstyle completition fixes\nspecial bindings for \"ring\" cameras",
+        "de": "lokale signale browser\nstil completition fixes\nspezielle bindungen für \"ring\"-kameras",
+        "ru": "браузер местных сигналов\nстиль комплектации\nспециальные привязки для «кольцовых» камер",
+        "pt": "navegador de sinais locais\ncorreções de conclusão de estilo\nligações especiais para câmeras \"ring\"",
+        "nl": "lokale signalenbrowser\nstijl completitie fixes\nspeciale bindingen voor \"ring\"-camera's",
+        "fr": "navigateur de signaux locaux\ncorrectifs de complétion de style\nfixations spéciales pour caméras \"ring\"",
+        "it": "browser segnali locali\nstile correzioni di completamento\nattacchi speciali per telecamere \"ring\"",
+        "es": "navegador de señales locales\nestilo completition fixes\nencuadernaciones especiales para cámaras \"ring\"",
+        "pl": "przeglądarka lokalnych sygnałów\npoprawki zakończenia stylu\nspecjalne wiązania do kamer \"ring\"",
+        "uk": "веб камера\nфіксація стилів\nспеціальні прив'язки для камер \"обручка\"",
+        "zh-cn": "本地信号浏览器\n样式补丁修正\n“环”相机的特殊装订"
+      },
       "1.21.0": {
         "en": "fix scripts with empty names on css\ncss props with only bindings are not shown\nremove of css prop should remove binding?\nOpen Screen in sub screen command",
         "de": "skripte mit leeren namen auf css fixieren\ncss props mit nur bindungen sind nicht dargestellt\nentfernen css prop sollte bindung entfernen?\nBildschirm im Sub-Bildschirm-Befehl öffnen",
@@ -67,58 +119,6 @@
         "pl": "dodaj kilka pakietów\nuruchom prosty skrypt cmd i uaktualnij wyświetlacz macierzysty\naktualizacja pakietów, downgrade monaco\nnaprawić kopię zapasową",
         "uk": "додати кілька пакетів\nзапустити простий скрипт cmd і оновлення отримати батьківський екран\nоновлення пакетів, град монако\nрезервне копіювання",
         "zh-cn": "添加几个软件包\n运行简单的脚本 cmd 并更新父屏幕\n更新软件包, 降级\n修复备份"
-      },
-      "1.19.4": {
-        "en": "copy & paste events",
-        "de": "kopieren und einfügen von ereignissen",
-        "ru": "копировать события",
-        "pt": "copiar e colar eventos",
-        "nl": "gebeurtenissen kopiëren & plakken",
-        "fr": "copier & coller les événements",
-        "it": "copia & incolla eventi",
-        "es": "copy \" paste events",
-        "pl": "kopiowanie i wklejanie zdarzeń",
-        "uk": "скопіювати та вставляти події",
-        "zh-cn": "复制粘贴事件( p)"
-      },
-      "1.19.3": {
-        "en": "support null value",
-        "de": "unterstützungswert",
-        "ru": "нулевое значение",
-        "pt": "suporte valor nulo",
-        "nl": "steun nulwaarde",
-        "fr": "support valeur null",
-        "it": "supporto valore null",
-        "es": "valor nulo",
-        "pl": "wartość null wsparcia",
-        "uk": "підтримка значення null",
-        "zh-cn": "支持无效值"
-      },
-      "1.19.2": {
-        "en": "use name in classlist",
-        "de": "name in der klassenliste verwenden",
-        "ru": "имя в класслисте",
-        "pt": "use o nome na lista de classes",
-        "nl": "naam gebruiken in klasselijst",
-        "fr": "utiliser le nom dans la liste des classes",
-        "it": "usare il nome in classifica",
-        "es": "nombre de uso en la lista de clases",
-        "pl": "użyj nazwy na liście klas",
-        "uk": "ім'я користувача в класі",
-        "zh-cn": "使用分类列表中的名称"
-      },
-      "1.19.1": {
-        "en": "copy path for screens/controls",
-        "de": "kopierpfad für bildschirme/steuerungen",
-        "ru": "путь копирования для экранов/контролей",
-        "pt": "caminho de cópia para telas / controles",
-        "nl": "pad voor schermen/besturing kopiëren",
-        "fr": "chemin de copie pour les écrans/contrôles",
-        "it": "copiare il percorso per schermi/controlli",
-        "es": "copy path para pantallas/controles",
-        "pl": "ścieżka kopiowania ekranów / urządzeń sterujących",
-        "uk": "копіювання шляху до екранів/контролів",
-        "zh-cn": "屏幕/控件复制路径"
       }
     },
     "icon": "logo.png",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "iobroker.webui",
-  "version": "1.21.0",
+  "version": "1.23.2",
   "description": "ioBroker webui",
   "type": "module",
   "main": "dist/backend/main.js",
@@ -43,31 +43,31 @@
     "node": ">=18"
   },
   "dependencies": {
-    "@iobroker/adapter-core": "^3.2.2",
-    "@types/node": "^22.10.1"
+    "@iobroker/adapter-core": "^3.2.3",
+    "@types/node": "^22.10.7"
   },
   "devDependencies": {
     "@adobe/css-tools": "4.4.1",
     "@alcalzone/release-script": "^3.8.0",
     "@alcalzone/release-script-plugin-iobroker": "^3.7.2",
     "@alcalzone/release-script-plugin-license": "^3.7.0",
-    "@blockly/zoom-to-fit": "^6.0.9",
-    "@iobroker/socket-client": "^3.1.3",
+    "@blockly/zoom-to-fit": "^6.0.12",
+    "@iobroker/socket-client": "^4.0.0",
     "@iobroker/testing": "^5.0.0",
     "@node-projects/base-custom-webcomponent": "0.27.8",
     "@node-projects/lean-he-esm": "^3.3.0",
     "@node-projects/node-html-parser-esm": "^6.2.0",
     "@node-projects/propertygrid.webcomponent": "^1.2.3",
     "@node-projects/splitview.webcomponent": "^1.0.1",
-    "@node-projects/web-component-designer": "^0.1.236",
+    "@node-projects/web-component-designer": "^0.1.239",
     "@node-projects/web-component-designer-codeview-monaco": "^0.1.32",
     "@node-projects/web-component-designer-htmlparserservice-nodehtmlparser": "^0.1.11",
     "@node-projects/web-component-designer-stylesheetservice-css-tools": "^0.1.10",
-    "@node-projects/web-component-designer-visualization-addons": "^0.1.102",
-    "@node-projects/web-component-designer-widgets-wunderbaum": "^0.1.31",
+    "@node-projects/web-component-designer-visualization-addons": "^0.1.112",
+    "@node-projects/web-component-designer-widgets-wunderbaum": "^0.1.32",
     "@types/json-schema": "^7.0.15",
     "@web/dev-server": "^0.4.6",
-    "blockly": "^11.1.1",
+    "blockly": "^11.2.1",
     "chai": "^5.1.2",
     "chai-as-promised": "^8.0.1",
     "construct-style-sheets-polyfill": "^3.1.0",
@@ -75,13 +75,15 @@
     "dayjs": "^1.11.13",
     "del": "^8.0.0",
     "dock-spawn-ts": "^3.2.1",
-    "es-module-shims": "^1.10.1",
-    "eslint": "^9.16.0",
+    "es-module-shims": "^2.0.3",
+    "eslint": "^9.18.0",
     "esprima-next": "^6.0.3",
+    "glob-stream": "^8.0.2",
     "gulp": "^5.0.0",
     "gulp-git": "^2.11.0",
     "gulp-replace": "^1.1.4",
-    "long": "^5.2.3",
+    "iobroker.iobroker-webcomponent-object-selector": "file:binary/iobroker.iobroker-webcomponent-object-selector-0.0.1.tgz",
+    "long": "^5.2.4",
     "mobile-drag-drop": "^3.0.0-rc.0",
     "mocha": "^11.0.1",
     "monaco-editor": "^0.50.0",
@@ -90,8 +92,8 @@
     "toastify-js": "^1.12.0",
     "ts-node": "^10.9.2",
     "tslib": "^2.8.1",
-    "typescript": "^5.7.2",
+    "typescript": "^5.7.3",
     "typescript-json-schema": "^0.65.1",
-    "wunderbaum": "0.11.0"
+    "wunderbaum": "0.12.0"
   }
 }

package/www/dist/frontend/common/IobrokerHandler.d.ts

@@ -75,6 +75,7 @@ export declare class IobrokerHandler implements VisualizationHandler {
         file: ArrayBuffer;
     }>;
     removeAdditionalFile(name: string): Promise<void>;
+    getLocalStateNames(): string[];
     subscribeState(id: string, cb: ioBroker.StateChangeHandler): Promise<void>;
     unsubscribeState(id: string, cb: ioBroker.StateChangeHandler): void;
     getObjectList(type: ioBroker.ObjectType, id: string): Promise<Record<string, ioBroker.AnyObject & {
@@ -95,8 +96,8 @@ export declare class IobrokerHandler implements VisualizationHandler {
     getSignalInformation(signal: any): SignalInformation;
     getHistoricData(id: string, config: any): Promise<{
         values: ioBroker.GetHistoryResult;
-        sessionId: string;
-        stepIgnore: number;
+        sessionId: number;
+        step: number;
     }>;
 }
 export declare const iobrokerHandler: IobrokerHandler;

package/www/dist/frontend/common/IobrokerHandler.js

@@ -336,6 +336,9 @@ export class IobrokerHandler {
     }
     #localSubscriptions = new Map;
     #localValues = new Map;
+    getLocalStateNames() {
+        return Array.from(this.#localSubscriptions.keys());
+    }
     async subscribeState(id, cb) {
         if (id.startsWith('local_')) {
             let arr = this.#localSubscriptions.get(id);

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

@@ -2,7 +2,7 @@ import { BaseCustomWebcomponentBindingsService, EventsService, JsonFileElementsS
 import { NodeHtmlParserService } from '@node-projects/web-component-designer-htmlparserservice-nodehtmlparser';
 import { CodeViewMonaco } from '@node-projects/web-component-designer-codeview-monaco';
 import { CssToolsStylesheetService } from '@node-projects/web-component-designer-stylesheetservice-css-tools';
-import { BindableObjectDragDropService, BindingsEditor, VisualizationBindingsService, PropertyGridDragDropService, ScriptRefactorService, VisualizationBindingsRefactorService } from "@node-projects/web-component-designer-visualization-addons";
+import { VisualizationBindingsService, PropertyGridDragDropService, ScriptRefactorService, VisualizationBindingsRefactorService } from "@node-projects/web-component-designer-visualization-addons";
 import { IobrokerWebuiBindableObjectsService } from "../services/IobrokerWebuiBindableObjectsService.js";
 import { IobrokerWebuiDemoProviderService } from "../services/IobrokerWebuiDemoProviderService.js";
 import { IobrokerWebuiConfirmationWrapper } from "./IobrokerWebuiConfirmationWrapper.js";
@@ -20,13 +20,17 @@ import { IobrokerWebuiScreenContextMenu } from "../services/IobrokerWebuiScreenC
 import { IobrokerWebuiEventsService } from "../services/IobrokerWebuiEventsService.js";
 import { IobrokerWebuiCustomControlEventsService } from "../services/IobrokerWebuiCustomControlEventsService.js";
 import { IobrokerWebuiBindableObjectsForPropertiesService } from "../services/IobrokerWebuiBindableObjectsForPropertiesService.js";
+import { IobrokerWebuiBindableLocalObjectsService } from "../services/IobrokerWebuiBindableLocalObjectsService.js";
+import { IobrokerWebuiBindableObjectDragDropService } from "../services/IobrokerWebuiBindableObjectDragDropService.js";
+import { IobrokerWebuiBindingsEditor } from "./IobrokerWebuiBindingsEditor.js";
 export function configureDesigner(bindingsHelper) {
     const serviceContainer = createDefaultServiceContainer();
     serviceContainer.register("bindingService", new BaseCustomWebcomponentBindingsService());
     serviceContainer.register("htmlParserService", new NodeHtmlParserService());
     serviceContainer.register("bindableObjectsService", new IobrokerWebuiBindableObjectsService());
+    serviceContainer.register("bindableObjectsService", new IobrokerWebuiBindableLocalObjectsService());
     serviceContainer.register("bindableObjectsService", new IobrokerWebuiBindableObjectsForPropertiesService());
-    serviceContainer.register("bindableObjectDragDropService", new BindableObjectDragDropService(bindingsHelper, iobrokerHandler));
+    serviceContainer.register("bindableObjectDragDropService", new IobrokerWebuiBindableObjectDragDropService(bindingsHelper, iobrokerHandler));
     serviceContainer.register("bindingService", new VisualizationBindingsService(bindingsHelper));
     serviceContainer.register("demoProviderService", new IobrokerWebuiDemoProviderService());
     serviceContainer.register("externalDragDropService", new IobrokerWebuiExternalDragDropService());
@@ -60,7 +64,7 @@ export function configureDesigner(bindingsHelper) {
     }
     serviceContainer.config.openBindingsEditor = async (property, designItems, binding, target) => {
         if (!binding || binding.service instanceof VisualizationBindingsService) {
-            let dynEdt = new BindingsEditor(property, binding, target, serviceContainer, designItems[0].instanceServiceContainer, window.appShell);
+            let dynEdt = new IobrokerWebuiBindingsEditor(property, binding, target, serviceContainer, designItems[0].instanceServiceContainer, window.appShell);
             let cw = new IobrokerWebuiConfirmationWrapper();
             cw.title = "Edit Binding of '" + property.name + "' - " + property.propertyType;
             cw.appendChild(dynEdt);

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

@@ -8,6 +8,7 @@ const bindingsHelper = new BindingsHelper(iobrokerHandler);
 LazyLoader.LoadJavascript('./node_modules/monaco-editor/min/vs/loader.js');
 import '@node-projects/web-component-designer';
 import { ValueType } from '@node-projects/web-component-designer';
+import { BindableObjectsBrowser } from '@node-projects/web-component-designer-widgets-wunderbaum';
 import { PanelContainer } from 'dock-spawn-ts/lib/js/PanelContainer.js';
 import { PanelType } from 'dock-spawn-ts/lib/js/enums/PanelType.js';
 import { configureDesigner } from './ConfigureWebcomponentDesigner.js';
@@ -124,6 +125,10 @@ export class IobrokerWebuiAppShell extends BaseCustomWebComponentConstructorAppe
         this.scriptSystem = scriptSystem;
         this.bindingsHelper = bindingsHelper;
     }
+    createBindableObjectBrowser() {
+        return new BindableObjectsBrowser();
+    }
+    ;
     async ready() {
         this._dock = this._getDomElement('dock');
         this._solutionExplorer = this._getDomElement('solutionExplorer');

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

@@ -0,0 +1,25 @@
+import { BindingsEditor } from "@node-projects/web-component-designer-visualization-addons";
+import { openSelectIdDialog } from "iobroker.iobroker-webcomponent-object-selector/dist/selectIdHelper.js";
+//@ts-ignore
+export class IobrokerWebuiBindingsEditor extends BindingsEditor {
+    static is = 'iobroker-webui-bindings-editor';
+    constructor(property, binding, bindingTarget, serviceContainer, instanceServiceContainer, shell) {
+        super(property, binding, bindingTarget, serviceContainer, instanceServiceContainer, shell);
+        let groupObjectNameControl = this._getDomElement('groupObjectName');
+        let btn = document.createElement('button');
+        btn.textContent = 'IOB';
+        btn.title = "iobroker signal selector";
+        btn.style.height = '22px';
+        btn.onclick = async () => {
+            var res = await openSelectIdDialog({ host: window.iobrokerHost, port: window.iobrokerPort, protocol: window.location.protocol, language: 'en', selected: '', allowAll: true });
+            if (res) {
+                if (this.objectNames.length > 1)
+                    this.objectNames += ";";
+                this.objectNames += res;
+                this._bindingsRefresh();
+            }
+        };
+        groupObjectNameControl.appendChild(btn);
+    }
+}
+customElements.define(IobrokerWebuiBindingsEditor.is, IobrokerWebuiBindingsEditor);

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

@@ -0,0 +1,18 @@
+import { SignalPropertyEditor } from "@node-projects/web-component-designer-visualization-addons";
+import { openSelectIdDialog } from "iobroker.iobroker-webcomponent-object-selector/dist/selectIdHelper.js";
+export class IobrokerWebuiSignalPropertyEditor extends SignalPropertyEditor {
+    constructor(property, shell) {
+        super(property, shell);
+        let btn = document.createElement('button');
+        btn.textContent = 'IOB';
+        btn.title = "iobroker signal selector";
+        btn.onclick = async () => {
+            var res = await openSelectIdDialog({ host: window.iobrokerHost, port: window.iobrokerPort, protocol: window.location.protocol, language: 'en', selected: this._ip.value, allowAll: true });
+            if (res) {
+                this._ip.value = res;
+                this._valueChanged(this._ip.value);
+            }
+        };
+        this._container.appendChild(btn);
+    }
+}

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

@@ -74,7 +74,7 @@ export class IobrokerWebuiSolutionExplorer extends BaseCustomWebComponentConstru
             this._createAdditionalFilesNode(),
             this._createChartsNode(),
             this._createIconsFolderNode(),
-            this._createObjectsNode()
+            this._createBindablesNode()
         ]);
         return result.map(x => x.status == 'fulfilled' ? x.value : null);
     }
@@ -726,6 +726,18 @@ export class IobrokerWebuiSolutionExplorer extends BaseCustomWebComponentConstru
         }
         return controlsNode;
     }
+    async _createBindablesNode() {
+        const node = {
+            title: 'Bindables',
+            folder: true,
+            lazy: true,
+            children: [
+                await this._createObjectsNode(),
+                await this._createLocalsNode()
+            ]
+        };
+        return node;
+    }
     async _createObjectsNode() {
         const s = this.serviceContainer.bindableObjectsServices[0];
         const objectsNode = {
@@ -778,6 +790,47 @@ export class IobrokerWebuiSolutionExplorer extends BaseCustomWebComponentConstru
             lazyload: (event, data) => this._lazyLoadObjectNodes(event, data)
         }));
     }
+    async _createLocalsNode() {
+        //Todo: reset lazy load on colapse in local nodes view
+        const s = this.serviceContainer.bindableObjectsServices[1];
+        const objectsNode = {
+            title: 'Locals',
+            data: { service: s },
+            folder: true,
+            lazy: true,
+            key: 'locals',
+            lazyload: (event, data) => this._lazyLoadObjectNodes(event, data),
+            contextMenu: (event) => {
+                ContextMenu.show([{
+                        title: 'Refresh', action: async () => {
+                            s.clearCache();
+                            const objectsNode = this._tree.findKey('locals');
+                            if (objectsNode) {
+                                objectsNode.resetLazy();
+                                await sleep(50);
+                                objectsNode.setExpanded(true);
+                            }
+                        }
+                    }, {
+                        title: 'Add local', action: async () => {
+                            let nm = prompt('new local variable name (without local_ prefix) :');
+                            if (nm) {
+                                if (!nm.startsWith('local_'))
+                                    nm = "local_" + nm;
+                                const cb = () => { };
+                                iobrokerHandler.subscribeState(nm, cb);
+                                iobrokerHandler.unsubscribeState(nm, cb);
+                                const objectsNode = this._tree.findKey('locals');
+                                objectsNode.resetLazy();
+                                await sleep(50);
+                                objectsNode.setExpanded(true);
+                            }
+                        }
+                    }], event);
+            },
+        };
+        return objectsNode;
+    }
     #activeLazyLoads = new Set();
     async _loadTree() {
         let dndSourceNode = null;

package/www/dist/frontend/generated/Properties.json

@@ -39,7 +39,7 @@
                 "arguments",
                 "caller",
                 "name",
-                "__@hasInstance@2369"
+                "__@hasInstance@5144"
             ],
             "type": "object"
         },
@@ -78,6 +78,9 @@
                     },
                     "type": "array"
                 },
+                "bindToSize": {
+                    "type": "boolean"
+                },
                 "height": {
                     "type": "string"
                 },
@@ -93,7 +96,8 @@
                 "width",
                 "height",
                 "useGlobalStyle",
-                "addoptedStyles"
+                "addoptedStyles",
+                "bindToSize"
             ],
             "type": "object"
         },

package/www/dist/frontend/generated/ScriptCommands.json

@@ -970,9 +970,6 @@
         },
         "WebuiScriptCommands": {
             "anyOf": [
-                {
-                    "$ref": "#/definitions/Comment"
-                },
                 {
                     "$ref": "#/definitions/OpenUrl"
                 },
@@ -1040,31 +1037,34 @@
                     "$ref": "#/definitions/ClearSiganlsInGroup"
                 },
                 {
-                    "$ref": "#/definitions/Condition"
+                    "$ref": "#/definitions/RunScript"
                 },
                 {
-                    "$ref": "#/definitions/Exit"
+                    "$ref": "#/definitions/CopySignalValuesFromFolder"
                 },
                 {
-                    "$ref": "#/definitions/Label"
+                    "$ref": "#/definitions/ShowMessageBox"
                 },
                 {
-                    "$ref": "#/definitions/RunScript"
+                    "$ref": "#/definitions/ExportSignalValuesAsJson"
                 },
                 {
-                    "$ref": "#/definitions/Goto"
+                    "$ref": "#/definitions/ImportSignalValuesFromJson"
                 },
                 {
-                    "$ref": "#/definitions/CopySignalValuesFromFolder"
+                    "$ref": "#/definitions/Comment"
                 },
                 {
-                    "$ref": "#/definitions/ShowMessageBox"
+                    "$ref": "#/definitions/Condition"
                 },
                 {
-                    "$ref": "#/definitions/ExportSignalValuesAsJson"
+                    "$ref": "#/definitions/Exit"
                 },
                 {
-                    "$ref": "#/definitions/ImportSignalValuesFromJson"
+                    "$ref": "#/definitions/Label"
+                },
+                {
+                    "$ref": "#/definitions/Goto"
                 },
                 {
                     "$ref": "#/definitions/OpenScreen"