Neues YouTube-Video: Visualisierung im Devices-Adapter

[docsnyder7]

@frederik-buss

danke für die Antwort... das Wetter Widget hab ich mir schon angesehen und eingerichtet.. aber klappt das mit dem IFrame auch mit der Weltkarte von Spaceweatherlive?

[michl75]

@docsnyder7 Hallo, ja - siehe Bild
Vg M

[docsnyder7]

@michl75

[Aphofis]

@dtp
Moin Moin
magst du deine Views auch anhängen !? oder zu viel arbeit mit passwörter etc entfernen !?
Wäre auf jeden Fall super.
Deine View gefällt mir und würde die gerne als Grundstock nehmen.

[Darth2010]

@strathcole said in Zeigt her eure Visu:

@Grantlhaua Lüftung ist eine ComfoAir 350 (Zehnder). Da habe ich einen RS232 zu Ethernet-Converter angeklemmt und via comfoair Adapter eingebunden. ...

Der Post ist schon recht alt, aber darf ich fragen, wie dein Hardware Setup (welchen Adapter/Kabel) für die Anbindung der Comfair an den ioBroker aussieht?
Habe auch eine 350er und würde gerne die Lüftungsstufen vom ioBroker schalten lassen.

[StrathCole]

@Darth2010

Uff, das ist schon so lange her. Ich habe mir einen kleinen RS over LAN gekauft und dort dann die korrekte Verkabelung anhand eines Posts gemacht, den ich jetzt nicht mehr gefunden habe. Allerdings würde ich heute wohl eher auf so eine Lösung setzen:
https://github.com/murelli146/ComfoAir-MQTT-ESPController

[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