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.

@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

So, nun bin ich zurück...

Es gibt ne neue Version. Erstmal, in der geht 0 als default value von Properties.

Hab in das Beispiel nun auch was reingemacht, einmal eine lokale Signal, wo ich den default value über ein Script setze, und einmal eine Screen Property welche besser mit default value benutzt werden kann.

Vlt baue ich noch was ein, das man für lokale Signale einfach einen default value setzen kann, aber im Moment gibts nix dazu.

Und die SimpleScript Commands gehen nun auch um properties zu setzen. Schau mal in die 2ten buttons des controls

@smilie108

Das control selbst soll ja von der Seite außen (da wo es benutzt wird), nix wissen. Es soll ja wiederverwendbar sein

@smilie108

schau noch mal ins beispiel. hab das nun an eine variable gebunden. Ist das was du willst?

@smilie108

Schau in "counter/CounterScreen"

Die befehle, incrementSignalValue etc... gehen nur für signals...
Würd ich mittlerweile vlt. anderst machen, ist aber gewachsen...

Muss mir mal überlegen wie man das verbessern kann....

Was auch nicht geht (hab ich gerade gemerkt), 0 als default value für ne number property.
Schau ich mir an, aber nicht mehr heute...

@smilie108

Mach mal ein Beispiel wo es nicht geht.

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

http://10.25.11.52:8082/webui/runtime.html#screenName=Schrankensteuerung/ParkplatzÜbersicht

S

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

@jogibear9988 Hab da mal ne frage. Einzelne unterseiten alleine kann mman die lauffähig machen oder geht das nur über die index seite ? würde gerne zu manchen seiten direkt links erstellen aber dann funktionieren die eingebettenten sachen nicht wie werte von objekt ändern usw.
wenn ich die seite über die index und das menue auswähle gehts aber wenn ich zb direkt auf http://10.25.11.52:8082/webui/runtime.html#screenName=Schrankensteuerung/ParkplatzÜbersicht springe dann gehen die werte ändern nicht.

Danke im voraus

Sollte gehen....
Im Beispielserver sieht das gut aus:

http://129.159.205.3:8082/webui/runtime.html#screenName=TestCircle

@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