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.

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

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

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

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

@smilie108
und wie siehts aus?

neues feature:

copy&paste für events:

@smilie108

so, geht nun wieder. War noch ein fehler von mir nach dem umbau.

P.S. nun gibts auch ein copy befehl für den vollen pfad des screen namens (rechte maustaste auf den screen). Das kannst du für das menü doch sicher gebrauchen

Ich schaus mir an. Bin gerade nur unterwegs. Morgen wirds gehn.

@smilie108
Ja, die funktion hab ich umgebaut, da war auch was falsch. Aber eig. Sollts noch gehen.
Da war was seit meinem zoom support total falsch.
Kannst die views auf das demo system laden, dann schau ich.

@smilie108
Und?

Und nochmal was:

Besserer refactor support.

• Properties können umverdrahtet werden.
• ComplexStrings können refactored werden
• Anzeige was das Ziel ist (Signal, Property, Screen, Parameter)

Wozu kann das verwendet werden?

Bspw Ihr habt einige elemente, nun kopiert Ihr diese und müsst nur die Variabelanbindungen und texte ändern, bspw aus AA11 würde BB11 werden usw. könnt ihr das damit machen

Achso, alte JSON exporte können trotzdem noch importiert werden.

So noch mal ein update... 1.18.0

Screens & Controls werden nun als XML exportiert. css, html und scripte werden als CDATA eingebettet. D.h. auch in dem export kann man mit dem Code was anfangen

Bei den bindings werden die properties der controls/screens nun auch in einer Auswahl vorgeschlagen: