npm - iobroker.webui - Versions diffs - 1.20.1 → 1.22.0 - Mend

iobroker.webui 1.20.1 → 1.22.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (36) hide show

package/LICENSE CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -21,14 +21,14 @@ This is a complete visualization system for ioBroker.
 It includes features like:
-  - own simple scripting language
+  - simple scripting language
   - binding to ioBroker objects including converters & javascript expressions
-  - paste of images from clipboard
-  - drag drop of external images
-  - drag drop of ioBroker objects to automaticy create bindings
-  - drag drop of ioBroker objects to Properties to create Bindings to them
-  - relative signal paths to ioBroker objects in screens (the full path can be hand over from outside to screen)
-  - split view edit of html code
+  - pasting of images from clipboard
+  - drag&drop of external images
+  - drag&drop of ioBroker objects to automaticy create bindings
+  - drag&drop of ioBroker objects to Properties to create Bindings to them
+  - relative signal paths to ioBroker objects in screens (the full path can be handed over from outside into the screen)
+  - split view editing of layout and html code
   - global stylesheet support
   - usage of npm packages containing webcomponents
   - screens inside of screens
@@ -36,6 +36,8 @@ It includes features like:
   - use charts from ioBroker
   - use combined signals object id's  e.g. "webui.0.test3.{webui.0.test3.select}" -> this will use the value from webui.0.test3.select for the signal name
+There is more information about specific topics in the [wiki](https://github.com/iobroker-community-adapters/ioBroker.webui/wiki) (the German section has a few more articles than the English one).
 ## Installation
 ### Dependecies
@@ -46,18 +48,20 @@ It includes features like:
 ### Description
-The Designer uses Webcomponents, so the HTML you Design is inside of a Shdowroot of a Webcomponent. This mens, you cannot style <body> or <html> inside of the Stylesheet. To style the outer Layout, use the ":host" selector.
+The Designer uses Web Components, so the HTML you design is inside of a Shadowroot of a Webcomponent. This means, you cannot style <body> or <html> inside of the Stylesheet. To style the outer Layout, use the ":host" selector.
 This also means, you cannot use "on..." eventhandlers. Use the "@..." event assignment.
 ### Custom Controls in WebUI
-You can create own reusable CustomControls in WebUI. This can have individual Javascript, Properties and a template.
+You can create your own reusable CustomControls in WebUI, each of which can have its own Javascript, Properties and a template.
-You can use Double-Bracket Syntax and Double-Curly-Braket Syntax of "BaseCustomWebcomponent" to create bindings from the Template to the properties defined in the Designer. Curylbrackets create two way Bindings.
+You can use Double-Bracket Syntax and Double-Curly-Bracket Syntax of the "BaseCustomWebcomponent" to create bindings from the Template to the properties defined in the Designer. Curylbrackets create two way Bindings.
 If you use the Bindings Dialog, you can Bind to a Property with ??Propertyname and to IoBroker Object in the Property via ?Propertyname.
 In Scripts you can also write to Signals defined in Custom Properties.
-You could also include Javascript in your CustomControl or Screen. Also you could use export a function "init(instance)" wich will be called when your CustomControl will be instanciated. (and also the connected and disconnected functions could be used)
+You can include Javascript in your CustomControl or Screen.
+In addition, you can export a function `init(instance)` wich will be called when your CustomControl will be instantiated.
+Finally, `connected()` and `disconnected()` functions can be defined to be called when ...
 ## Sponsoring
@@ -129,6 +133,17 @@ runtime.html?screenName=screen2
 	Placeholder for next versions:
 	### __WORK IN PROGRESS__
 -->
+### 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
+- remove of css prop should remove binding?
+- Open Screen in sub screen command
 ### 1.20.1 (2024-12-03)
 - fix in designer with svgs
@@ -990,4 +1005,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/io-package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "common": {
     "name": "webui",
-    "version": "1.20.1",
+    "version": "1.22.0",
     "titleLang": {
       "en": "webui",
       "de": "webui",
@@ -29,6 +29,32 @@
       "zh-cn": "使用万维网传送器的高锰用户接口"
     },
     "news": {
+      "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",
+        "ru": "исправить сценарии с пустыми именами на css\ncss реквизиты только связывания не показаны\nудаление css prop должно удалить связывания?\nОткрытый экран в командном пункте",
+        "pt": "corrigir scripts com nomes vazios no css\ncss adereços com apenas ligações não são mostrados\nremover de css prop deve remover a ligação?\nAbra a tela no comando sub screen",
+        "nl": "scripts herstellen met lege namen op css\ncss rekwisieten met alleen bindingen worden niet getoond\nverwijderen van css prop moet binden verwijderen?\nScherm openen in subschermcommando",
+        "fr": "corriger des scripts avec des noms vides sur css\nles accessoires css avec uniquement des fixations ne sont pas montrés\nenlever de css prop devrait supprimer la liaison?\nOuvre l'écran dans la commande sous-écran",
+        "it": "correggere gli script con nomi vuoti su css\ncss props con solo binding non sono mostrati\nrimuovere di css prop dovrebbe rimuovere il legame?\nSchermo aperto nel comando sotto schermata",
+        "es": "fijar scripts con nombres vacíos en css\ncss props with only bindings are not shown\nremover el css prop debe eliminar la unión?\nPantalla abierta en el comando sub pantalla",
+        "pl": "naprawić skrypty z pustymi nazwami na css\npropy css z tylko wiązaniami nie są wyświetlane\nusunięcie rekwizytu css powinno usunąć wiązanie?\nOtwórz ekran w komendzie podekranu",
+        "uk": "виправлено сценарії з порожніми іменами на css\ncss пропси з тільки зв'язками не показані\nприбрати css проп слід видалити зв'язок?\nВідкритий екран в командному режимі",
+        "zh-cn": "css 上的空名脚本\n未显示只装订的 cs 道具\n删除 css 道具应删除绑定吗 ?\n在子屏幕命令中打开屏幕"
+      },
       "1.20.1": {
         "en": "fix in designer with svgs",
         "de": "fix in designer mit svgs",
@@ -93,32 +119,6 @@
         "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": "屏幕/控件复制路径"
-      },
-      "1.19.0": {
-        "en": "fix error in script system",
-        "de": "fehler im skriptsystem beheben",
-        "ru": "исправление ошибки в системе сценариев",
-        "pt": "corrigir erro no sistema de script",
-        "nl": "fix error in script systeem",
-        "fr": "correction d'erreur dans le système de script",
-        "it": "errore di correzione nel sistema di script",
-        "es": "corregir error en el sistema script",
-        "pl": "naprawić błąd w systemie skryptu",
-        "uk": "виправлено помилку в системі скриптів",
-        "zh-cn": "修补脚本系统错误"
       }
     },
     "icon": "logo.png",

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "iobroker.webui",
-  "version": "1.20.1",
+  "version": "1.22.0",
   "description": "ioBroker webui",
   "type": "module",
   "main": "dist/backend/main.js",
@@ -20,7 +20,7 @@
     "coverage": "nyc npm run test:ts",
     "lint": "eslint --ext .ts src/",
     "reflection": "npm run reflection-scripts && npm run reflection-props",
-    "reflection-scripts": "cross-env typescript-json-schema './node_modules/@node-projects/web-component-designer-visualization-addons/dist/scripting/ScriptCommands.d.ts' '*' --ignoreErrors --strictNullChecks --propOrder > ./src/frontend/generated/ScriptCommands.json",
+    "reflection-scripts": "cross-env typescript-json-schema './dist/frontend/scripting/IobrokerWebuiScriptCommands.d.ts' '*' --ignoreErrors --strictNullChecks --propOrder > ./src/frontend/generated/ScriptCommands.json",
     "reflection-props": "cp ./node_modules/@node-projects/web-component-designer-visualization-addons/dist/interfaces/IScriptMultiplexValue.d.ts ./src/frontend/interfaces/ && cross-env typescript-json-schema './src/frontend/interfaces/*.ts' '*' --ignoreErrors --strictNullChecks --propOrder > ./src/frontend/generated/Properties.json",
     "release": "release-script"
   },
@@ -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.6"
   },
   "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.237",
     "@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-visualization-addons": "^0.1.103",
     "@node-projects/web-component-designer-widgets-wunderbaum": "^0.1.31",
     "@types/json-schema": "^7.0.15",
     "@web/dev-server": "^0.4.6",
-    "blockly": "^11.1.1",
+    "blockly": "^11.2.0",
     "chai": "^5.1.2",
     "chai-as-promised": "^8.0.1",
     "construct-style-sheets-polyfill": "^3.1.0",
@@ -75,13 +75,13 @@
     "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",
     "gulp": "^5.0.0",
     "gulp-git": "^2.11.0",
     "gulp-replace": "^1.1.4",
-    "long": "^5.2.3",
+    "long": "^5.2.4",
     "mobile-drag-drop": "^3.0.0-rc.0",
     "mocha": "^11.0.1",
     "monaco-editor": "^0.50.0",
@@ -90,8 +90,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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 { BindingsEditor, 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,16 @@ 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";
 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());

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

@@ -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;