NEWS
Zeigt her eure Visu
-
würdest du es teilen
-
würdest du es teilen
-
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 ÜbersichtsdemoDas zu erreichen ist recht aufwändig und funktioniert in 5 Schritten.
- Erstellung des 3D-Hauses in sweethome3D (super Tool, aber leider Jahreslizenz von 70€ erforderlich)
- Exportieren der Etagen (heißen dort Niveau) als obj-File
- Jede Lampe, jedes Rollo, jede Temperaturanzeige einzeln by name ebenfalls als obj-File exportieren
- In Blender importieren und je Etage die zugehörenden Lampen, Rollos, Temperaturanzeigen ebenfalls importieren
- 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 -
@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

-
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. -
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 WetterRo75.
-
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 WetterRo75.
-
-
Also ich habe gefragt ob er Widgets gestalten kann, zum Beispiel Slider, Toggle, Buttons, Options, etc. ob er diagramme erstellen kann. Habe geschrieben VIS1, iobroker und das ich es umstellen möchte auf html, css und script.
Habe meine Wünsche geäußert, also Größe vom Widget - Style, sprich glass effect.
Habe alles etappenweise gemacht. Also bei großen Views erstmal die Segmente (Kacheln, mit Bezeichnung) erstellen lassen. Und dann Gesagt was drauf soll. Eine Liste (json), ein Button zum Schalten, Anzeige von Werten und immer den Datenpunkt (OID) dazu. Bei json zeigen wie der Inhalt aussieht.
Ja und dann sagen Datenaktualisierung wie oft, was zu schalten, was sichtbar was nicht - ALSO das typische an den VIS1 VIS2 Elementen.
WICHTIG IST - SIMPLEAPI - sonst geht es nicht. Da pro Widget die Obergrenze von 50 Datenpunkten besteht. Wichtig ist auch und das musst du der KI antrainieren, dass keine {} Literale vorkommen dürfen.
Alles andere ist probieren. Ich habe ChatGPT, Gemini KI versucht - purer Horror. Habe dann Cluade um Hilfe gebeten und ging sofort. Habe mir ein kleines Abo genommen.
Ro75.
-
Also ich habe gefragt ob er Widgets gestalten kann, zum Beispiel Slider, Toggle, Buttons, Options, etc. ob er diagramme erstellen kann. Habe geschrieben VIS1, iobroker und das ich es umstellen möchte auf html, css und script.
Habe meine Wünsche geäußert, also Größe vom Widget - Style, sprich glass effect.
Habe alles etappenweise gemacht. Also bei großen Views erstmal die Segmente (Kacheln, mit Bezeichnung) erstellen lassen. Und dann Gesagt was drauf soll. Eine Liste (json), ein Button zum Schalten, Anzeige von Werten und immer den Datenpunkt (OID) dazu. Bei json zeigen wie der Inhalt aussieht.
Ja und dann sagen Datenaktualisierung wie oft, was zu schalten, was sichtbar was nicht - ALSO das typische an den VIS1 VIS2 Elementen.
WICHTIG IST - SIMPLEAPI - sonst geht es nicht. Da pro Widget die Obergrenze von 50 Datenpunkten besteht. Wichtig ist auch und das musst du der KI antrainieren, dass keine {} Literale vorkommen dürfen.
Alles andere ist probieren. Ich habe ChatGPT, Gemini KI versucht - purer Horror. Habe dann Cluade um Hilfe gebeten und ging sofort. Habe mir ein kleines Abo genommen.
Ro75.
ChatGPT
für komplexere Dinge, die mehr recherche benötigen benötigt man ein abo.
dann kann man codex von openai verwenden (das agentenprogramm von openai, funktioniert ähnlich wie claude). kostenlos nutzt man codex mini mit begrenztem kontingent. wenn, dann nutzen, wenn in USA gerade nachruhe ist. ist aber weit weniger leistungsfähig wie codex mit solin der kostenlosen version hat man aktuell in der version 5.6 auch nur das kleineren modelle luna.
es gibt dann noch terra und solsol liefert auch hervorragende ergebnisse.
ich empfehle aber vorher mal mit dem kostenlosen chatgpt bei kleineren aufgaben zu üben. wenn man schlecht promptet, kommt auch kein gutes ergebnis raus.
orientieren kann man sich an mein KI Template für den json-template adapter (den man nicht nutzen muss, aber von der Struktur der Überschriften, was man alles mitgeben sollte.)
https://github.com/oweitman/ioBroker.vis-jsontemplate/blob/main/documentation/KI-DE.mdhier das visuelle Ergebnis des Beispielprompts aus den verschiedenen KIs
https://forum.iobroker.net/topic/31521/test-widget-json-template/71?_=1788166272740
Hey! Du scheinst an dieser Unterhaltung interessiert zu sein, hast aber noch kein Konto.
Hast du es satt, bei jedem Besuch durch die gleichen Beiträge zu scrollen? Wenn du dich für ein Konto anmeldest, kommst du immer genau dorthin zurück, wo du zuvor warst, und kannst dich über neue Antworten benachrichtigen lassen (entweder per E-Mail oder Push-Benachrichtigung). Du kannst auch Lesezeichen speichern und Beiträge positiv bewerten, um anderen Community-Mitgliedern deine Wertschätzung zu zeigen.
Mit deinem Input könnte dieser Beitrag noch besser werden 💗
Registrieren Anmelden









