Monatsrückblick Juli / August 2026 ist online!

[znyde]

Moin,

da ich kein extra Thema aufmachen wollte, stelle ich euch mal meine kleine Visualisierung vor. Sie ist losgelöst von der eigentlichen VIS oder VIS-2. Ich bin noch in der Entwicklung aber ich denke es ist schon vorzeigbar.

[ExMatador]

Hallo zusammen,
bin nun auch schon einige Jahre mit ioBroker unterwegs und hab im Grunde all die Jahre auch immer am UI gearbeitet.
Ich setze noch vis-1 ein, hier als zentrale Steuerung aber html/css/javascript.

Mittlerweile habe ich ein Menu als 3D-Würfel realisiert, vor allem um Platz zu sparen, aber eben auch mal etwas Neues auszuprobieren. Basiert auf three.js.

Anbei ein Screenshot und hier ein Demo-Video.
Mir geht es nur um einen Ideenaustausch, vielleicht hat jemand noch eine ganz andere Menüsteuerung erfunden.
Zur Verfügungstellen geht leider nicht, es sind einfach zuviele Abhängigkeiten und spezifischer js-Code vewendet worden.

Danke
ExMatador

[fuerchtischlumpf]

@exmatador Sehr cool - ein ganz anderer Ansatz! Respekt!

[skvarel]

Hier ein Auszug aus meiner VIS-2

Alles mit unseren inventwo Widgets und den neuen inventwo Icons :)

https://forum.iobroker.net/topic/82272/inventwo-vis-2-screenshots

[schaefersklaus]

@michl75 sagte in Zeigt her eure Visu:

hier mal meine...
...

Stark! Gefällt mir sehr gut!
Besonders, wie aufwendig Du alleine die Teich-Steuerung umgesetzt/visualisiert hast!
Wie sind diese Halbkreis-förmigen Stromverbrauchs-Diagramme realisiert worden? Welches Widget?
Finde ich auch für einen Überblick richtig gut gelöst!
Geht etwas in die Richtung "des Balkens" bei evcc, das finde ich auch gut gelöst.
Danke und viele Grüße, Klaus.

[mrMuppet]

Hier fehlt meine Visu ja auch noch. ich hoffe, dass es niemanden stört, dass ich die Bilder hier auch in einem eigenen Thread gepostet habe -ansonsten gern bescheid sagen.
Alles Vis2, komplett nur aus html-Widgets zusammengebaut. Die Hintergründe wechseln natürlich nicht von Seite zu Seite, ich wollte nur das automatische Theme-Engine zeigen: die Farben werden jeweils für den Light- und Dark-mode automatisch berechnet.

Und weil man die Animationen in den Standbilden natürlich nicht gut beurteilen kann, habe ich hier noch ein kleines YouTibe Video dazu gemacht:
https://youtu.be/cMpPOGAlOhc

EDIT: doppeltes Bild gelöscht und YouTubelink ergänzt.

[Horst Böttcher]

würdest du es teilen

[mrMuppet]

@Horst-Böttcher Ich habe begonnen die Skripte hier zu veröffentlichen.

[ExMatador]

Hallo,
das grafische UI von ioBroker kann man wahrscheinlich ein Leben lang ändern, manchmal wirds besser, manchmal aber auch schlechter.
Begonnen habe ich selbst mit einem klassischen Menu an der linken Seite (Version 1), wobei die Steuerung noch weitgehend in vis lag.
Aber die Konfiguration der Main- und Submenu-Buttons war schon selbst gebaut.

Dann habe ich das Menu auf einen 3D-Würfel umgebaut (Version 2). Dafür habe ich die gesamte Steuerung in JS inkl three.js selbst programmiert. Problem: Sieht optisch wirklich gut aus, aber die Bedienung missfiel meiner Frau, und irgendwann auch mir.
Zu kompliziert, zu wenig intuitiv. Hier eine kleine Demo

Dann eine neue Idee. Auf der Haupseite (Startseite) wird direkt das Dashboard angezeigt (Version 3). Klicke ich auf eine Kachel, geht eine vis-view auf.

Die Grundgröße ist ein Quadrat 100px x 100px, daraus kann per Konfiguration jede beliebige Kachelgröße gebaut werden, also 2x2 oder 4+4 (Video), aber auch 2x4. In jeder Kachel können dynamische Inhalte (Referenz auf eine widgetID oder groupID), ein Überwachungsvideo, ein statisches Picture usw. angezeigt werden.
Beim Klick erscheint eine vis-view, bei ESC oder Klick am Rand geht die Kachel wieder zu.
Die Bedienung ist damit super einfach und hat einen hohen WAF.

Die Steuerung ist komplett in JS geschrieben und wird über ein HTML-Widget gestartet.
Die Bandbreite meiner Anwendungen im Dashboard ist mittlerweile sehr groß.

• Anzeige der Tagesrouten im gpx-Format inkl. Waypoints.
• Music- und Video Player von eigenen Videos mit Integration ins Auto via Carplay.
• Natürlich Überwachung der ganzen Geräte wie 3D-Drucker, RasenBot, 2 Wisch-Roboter im Haus, Kameras, viele ESP32 usw.
• Kamera Integration mittels Frigate (Docker)

Das mMn nach interessantes Thema ist aber die Darstellung des Hauses als virtuelles 3D-Haus.
Wenn man eine Lampe schaltet, geht im virtuellen 3D-Haus genau dort die Lampe an. Auch Rollos fahren im 3D-Haus hoch und runter wie in echt.
Hier eine Übersichtsdemo

Das zu erreichen ist recht aufwändig und funktioniert in 5 Schritten.

1. Erstellung des 3D-Hauses in sweethome3D (super Tool, aber leider Jahreslizenz von 70€ erforderlich)
2. Exportieren der Etagen (heißen dort Niveau) als obj-File
3. Jede Lampe, jedes Rollo, jede Temperaturanzeige einzeln by name ebenfalls als obj-File exportieren
4. In Blender importieren und je Etage die zugehörenden Lampen, Rollos, Temperaturanzeigen ebenfalls importieren
5. Exportieren der einzelnen Etagen als glb-File (glTF 2.0)

Dann benötigt man einen passenden JS-Code, der über eine Schnittstelle die virtuellen Lampen, Rollos etc. "schaltet".
Richtig aufwändig wird es, wenn die Commands auch über Alexa zur echten Lampe UND zur virtuellen Lampe durchgereicht werden müssen (iot-Adapter).

Im Video zeige ich kurz, wie eine Lampe geschaltet und das Terrassenrollos hoch und runter fährt. 3D Haus Demo
Natürlich kann man Wände und das Dach transparent machen - sonst sieht man eher nichts.

Im Grunde nutze ich ioBroker auf der technischen Seite wie vorgesehen als Integrationsplattform, gestalte das UI aber komplett selbst.
Muss man natürlich nicht tun, aber macht Spaß und man lernt extrem viel.

Ich poste das hier nur als Idee, dass es neben den vielen vorhandene UI-Varianten im ioBroker-Umfeld immer noch Platz für eigene Umsetzungen gibt.
Falls Fragen auftauchen, versuche ich die gern zu beantworten.

Vielen Dank
VG ExMatador

[DasBo1975]

@exmatador
Hat was, das gefällt mir.

Ich bin gerade dabei meine eigene Visualisierung zu bauen, da mir die vorhandenen Möglichkeiten nicht ausreichen bzw. zu träge geworden sind. Heute mal die Pool Seite in Angriff genommen

[hansmeier]

Moin !
ich möchte einen mobilen, smarten Luftentfeuchter (Klamer) der mit der Tuya App komplett gesteuert werden kann visualisieren. Ich suche noch nach einer Inspiration, wie dich eine Visualisierung umsetzten kann.
Hat jemand ein Beispiel oder etwas ähnliches schon umgesetzt und würde es gerne mal zeigen ?
Danke.

[znyde]

meine neue eigene Visualisierung, steuerbar entweder per Touch oder Sprachbefehl, Animationen sind jetzt auf den Bildern nicht zu sehen.

[UHU01]

Hi,
hier ein paar Bilder meiner Handy-Visu. Alles als HTML Webseite mit Claude Code gebaut, Zugriff via Simple API. Viele der Seiten lassen sich direkt auf der Webseite konfigurieren. Beispielsweise neue Sensoren zufügen und ähnliches.

[Ro75]

Ich reihe mich mal mit ein. Ich hatte in den letzten Wochen Zeit gehabt und meine VIS umgestellt, von VIS1 auf VIS1. Ja, bin bei VIS1 erstmal noch geblieben. Aber ich kann jetzt problemlos umstellen auf VIS2, da ich nur noch ein Widget benötige - HTML. Ein umbau von meiner jetzigen VIS1 auf VIS2 mit den entsprechenden Widgts hätte nie funktioniert.

Also habe ich mit der Hilfe der KI jetzt alles umgestellt. Ergebnis: Alles deutlich schneller, weniger Speicher und und und.

So, das sind meine Adapter - mehr habe ich nicht im Einsatz. Alles was ihr so sehen werdet, läuft mit eigenen Skripten - Adpaterersatz.

Das Dashboard.

Echos, Einkaufsliste, Radiostationen

Beleuchtung. Fast alles Hue.

Hier gibt es ein paar zentrale Einstellungen und die XMas-Timer

Alles aus dem Bereich Energie.

Meine Programmzeitschrift - endlich so wie ich es wollte.

Alles was die Fritzbox betrifft.

Der Kalender, als Basis das Ical-Skript.

Ein Teil unserer Kontakte.

Unser Roborock "Roberta".

Informationen zum Gesamtsystem.

Tanken, leider ein teurer Spaß.

Und zum Schluss - das Wetter

Ro75.

[Negalein]

@Ro75 sagte:

Also habe ich mit der Hilfe der KI jetzt alles umgestellt.

kannst du deinen Prompt zeigen?
Welche KI hast du verwendet?