Jahresrückblick 2025 – unser neuer Blogbeitrag ist online! ✨

[jogibear9988]

So nach einigen Updates, kann ich nun webui als v1.0 veröffentlichen

diese bringt zum letzten stand folgende Neuigkeiten:

• new script command: CalculateSignalValue
• javascript code completition
• better types in code completition
• fix writing of child nodes if content is bound at design time
• use monaco editor in expressions
• use custom var names in expressions
• Screens & Controls can have subfolders
• declaritive shadow dom support
• allow 'local_' as tag prefix for local vars

(link: https://github.com/iobroker-community-adapters/ioBroker.webui)
Eine Live Demo gibt es hier: http://129.159.205.3:8082/webui/index.html

Das ist eine komplett frei Konfigurierbare Visualisierung die auf "webcomponents" basiert.
Dazu hat Sie einen WYSIWYG Editor welcher auch in einer Split View direkt den HTML Code anzeigen kann.
facfb787-2105-4995-84b7-3fde6bd836f1-image.png

Sie bietet die Möglichkeit NPM Pakete mit Webkomponenten einzubinden, und es können auch innerhalb der "webui" eigene Komponenten definiert werden.
Innerhalb von Komponenten und Screens kann mit Hilfe von Javascript und einer eigenen Scriptsprache dynamisiert werden.
Alle Properties (Attribute, Css) von Komponenten können an ioBroker Signale gebunden werden, und über Converter oder Expressions noch modifiziert werden.
f6f2faf8-6ca4-43e1-b3ba-a4c4be169514-image.png

Externe Bilder können per DragDrop oder die Zwischenablage in Screens & Controls eingefügt werden.
Flot & E-Charts können per DragDrop übernommen werden. Alle ioBroker Icons sind per DragDrop verfügbar.

Wenn man ioBroker Signale auf die Screens zieht, wird je nach Signaltyp ein Control mit Anbindung an das Signal erzeugt. Auch kann man die Signale auf existierende Objekte ziehen, oder genauso auf deren Properties. Auch hier wird dann ein entsprechendes Binding erzeugt.

Wer die Webui nutzt und wem sie gefällt, ich freue mich jeder Zeit über eine Stern bei github: https://github.com/iobroker-community-adapters/ioBroker.webui
Auch wäre es schön, wenn Ihr dem Basisprojekt (WebcomponentDesigner) einen Stern gebt: https://github.com/node-projects/web-component-designer

Und wer mich ganz besonders unterstützen will, freu mich jederzeit über Sponsoren https://github.com/jogibear9988 😉