Hallo, die iobroker Visualisierung "webui" ist nun in stable.
(link: https://github.com/iobroker-community-adapters/ioBroker.webui)
Eine Live Demo gibt es hier: http://129.159.205.3:8082/webui/index.html

Screenshots sind hier:
https://forum.iobroker.net/topic/72159/zeigt-her-eure-webui-visualisierung

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.

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.

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

So nun bin ich soweit die webui Visu als Beta zu bezeichnen. Es fehlen zwar imme rnoch Kleinigkeiten, aber sie ist nun nutzbar, und

Was gibts neues:

• neue Verzeichnisstruktur in ioBroker Files, so das die UI im Backup enthalten ist
• NPM Paket installation, feedback dazu, ...
• javascript editor in scripten
• benutzerdefinierte events
• drag drop von Objekten auf properties um bindings zu erzeugen
• mehr unterstützte Pakete
• Bilder werden auch ins Backend geladen und nicht mehr als Base64 gespeichert (kommen mit ins Backup).
• Zurück Button in Runtime
• ...

schaut sie euch live an: http://130.61.246.67:8082/webui/index.html
release als NPM Paket kommt Mitte September, im Moment github installation.

@wal

Okay, hab mal mit ein paar Tutorials angefangen...

WebUI Part1 - Binding an ein Numerisches Signal
https://www.youtube.com/watch?v=5yS2Hpai3XI

WebUI Part2 - Einfache Scripte
https://www.youtube.com/watch?v=E0a7QbHZFqk

WebUI Part3 - NPM Package hinzufügen
https://www.youtube.com/watch?v=f6ICAihdZEg

WebUI Part4 - Custom Control erzeugen
https://www.youtube.com/watch?v=REPFFTc0Zi8

WebUI Part5 - Menü erzeugen
https://www.youtube.com/watch?v=4zt7Wf4qFQg

WebUI Part6 - HabPanel like Menü
https://www.youtube.com/watch?v=eZ-24TN8s4o

WebUI Part7 - Ring Kamera Snapshot einbinden
https://www.youtube.com/watch?v=IV4GayITz2c

In webui gibt es nun blockly als Frontend scriptsprache.

Es werden mit Sicherheit noch ein paar zusätzliche blöcke benötigt (z.b. um element zu finden, um eigenschaften oder attribute zu setzen), aber man kann es schon mal Nutzen.

Würde es eher beim JS-Controller anlegen, da kümmert sich eher jemand drum
Und durch eine Änderung von diesem läuft es ja wohl auch

Hallo,

ich habe einen neuen Visualisierungsadapter für iobroker geschrieben, nennt sich webui.

Ist im Moment nur von github installierbar, einfach bei Adapter von URL installieren auswählen, und folgende URL eingeben:
https://github.com/iobroker-community-adapters/ioBroker.webui.git

Danach noch eine instanz des Adapters hinzufügen, dazu hier auf "+" klicken.

hier gibts ein paar kleine Videos wo ein paar features gezeigt werden:
https://watch.screencastify.com/v/3eqrRsiWyBrga3VX64On
https://watch.screencastify.com/v/BqD5u44w6UtrTygRDgXP
https://watch.screencastify.com/v/QiQXPrk8SCrd8SHDCdPF

Der Adapter ist noch WIP, aber schon benutzbar. Irgendwann in den nächsten 1-2 Monaten wird es auch ein richtiges Release geben, so das man nicht mehr über github installieren muss.

Test Version (live): http://129.159.205.3:8082/webui/index.html

@ldittmar wenn Interesse besteht könnte Ich kurz mal die neue UI vorstellen an der Ich arbeite (webui)

Hallo, ich arbeite an einer neuen Visualiserung, iobroker-webui.

Das github Projekt dazu findet Ihr hier: https://github.com/iobroker-community-adapters/ioBroker.webui
Diese setzt auf html webcomponents, und somit sollten sich alle möglichen Bibliotheken als Widgets nutzen lassen.

Falls es jemand sich anschauen möchte, im Moment ist nur die installation direkt vom github repository möglich.
Ich hab hier noch eine Liste von Punkten welche ich bis zu einer Version 1 erledigen möchte (ich rechne mit der mal so gegen ende Januar 2022):
https://github.com/iobroker-community-adapters/ioBroker.webui/issues/137

Falls jemand Lust hat mitzuentwickeln, meldet euch einfach.

jogibear9988 created this issue in iobroker-community-adapters/ioBroker.webui

closed Todo for v1.0 #137

@blockmove
So wie es aussieht im Moment noch gar nirgends. Baue ich was dafür ein.
Im moment baue ich aber die webui um, so das JQuery und JQuery-FancyTree rausfliegen, und durch den nachfolger Wunderbaum ersetzt werden. (In der Designer Komponente hab ich das schon gemacht). Wenn das durch ist gibts eine neue Version, mit dem fix für "SnapToGrid" und einstellbarem raster.

@blockmove
Das gibts schon:
webui.0.control.command & webui.0.control.data

uiChangeView sollte schon gehen (zum umschalten)
uiChangedView ist noch nicht genutzt (kommt noch)

@meldel

Die Farbe von SVG's welche du als image eingebunden hast, kannst nur mit css filter ändern:

https://change-svg-color.vercel.app/

Alles was dort einfügst wird im head hinzugefügt

@kamikaze

hochladen der scripte bspw in additional files.

und in der webui unter global/settings:

Kann sein, das auch "import" statt "importShim" funktioniert. Kann gerade nur in den dev tools testen. Dort geht nur import, da das script nicht über es-module-shims ausgeführt werden.

Warum importShim? Weil die browser im Moment noch keine dynamischen importmaps supporten, und auch weil sie noch keine importmaps in extra files erlauben: https://github.com/guybedford/es-module-shims

Bspw so:

(wenn meine Webcomponente hinzugefügt wurde)

Willst du chartjs von jsdeliver einbinden? Dann wird immer aufs internet zugeriffen wenn du deine Seite öffnest.

Füg am besten meine chartjs webcomponente hinzu, die ist auch im Beispiuel server:
http://129.159.205.3:8082/webui/index.html

Dann solltest du chartjs direkt via: "await importShim("chart.js")" nutzen können.
Aber du kannst natürlich auch direkt meine Komponente nutzen

Komponente geht nun...

Demo hier: https://node-projects.github.io/web-component-designer-demo/index.html?npm=@node-projects/svghmi.webcomponent@1.0.0&html=<node-projects-svghmi src="https://raw.githubusercontent.com/node-projects/svghmi.webcomponent/refs/heads/main/sample/BatteryCharge.svghmi" -value="60" style="width:331px;height:175px;position:absolute;left:40px;top:74px;"></node-projects-svghmi> <node-projects-svghmi src="https://raw.githubusercontent.com/node-projects/svghmi.webcomponent/refs/heads/main/sample/RegenerativeBlower_WithBox.svghmi" style="width:512px;height:515px;position:absolute;left:456px;top:65px;"></node-projects-svghmi>

@smilie108

Wo was entfernen? Locale variablen sind weg wenn du den browser neu lädst und die nirgends verwendet sind

@smilie108 said in neue Visualisierung "webui" (alternative zu vis & vis-2):

@jogibear9988 hi unter smilie108/grafana2 hab ich es dir rein.
im iframe src ist ein javascript dort siehst du was ich meine

ps beim import fehlt in der style immer die } am ende

würde gerne den korrekturwert in einer session varibel speichern um das blättern in der zeitachse von grafana zu realisieren.
weitere idee noch von mir sind presets kurveneinstellungen in einem cokkie zu speichern um sie wie eine personalisierung zu haben.

gruß smilie108

sollte alles gefixt sein...
deine scripts hab ich nicht angeschaut, aber du solltest sie nun debuggen können.