@enrico-fischer
Moin
könntest du dein Projekt veröffentlichen.
Ich finde das Design Hammer
Grüsse
@enrico-fischer achso ich dachte du haste bestimme Hardware
@enrico-fischer sagte in Einfach mal zeigen will….. - Teil 3:
Mir war langweilig.
Hi könntest du die View mit deiner CSS geben. Wäre sehr nett
@ro75 sieht super aus! Wo hast du das iobroker Logo her damit man praktisch nur den Schriftzug hat ohne Hintergrund?
@enrico-fischer
Hi, sieht top aus. Gefällt mir. Würde mich mal interessieren wie du das view dazu aufgebaut hast?
Danke
@peter666666 sagte in Einfach mal zeigen will….. - Teil 3:
Wo hast du das iobroker Logo her damit man praktisch nur den Schriftzug hat ohne Hintergrund?
hier zB
Habe noch einmal alles überarbeitet. Stelle alles (gesamte System) zur Verfügung. Soweit möglich auch alles anonymisiert.
Adapter:
Die in dieser Liste vorhandenen Adapter sind alle konfiguriert. Adapter die ihr nicht verwendet, müsstet ihr dann aus der VIS und den Java-Skripten entfernen. An dieser Stelle gleich der Hinweis, es ist alles eng miteinander verbunden. Und noch ein Hinweis. Benötigte Datenpunkte werden zu 99,9% bei der jeweiligen Funktion gleich mit erstellt, damit alles geht. Daten werden generell in "0_userdata.0" erstellt, abgeholt und gespeichert.
1676055007780-vis.zip
vis_skripte.txt
vis_css.txt
Das ist die komplette VIS mit allen Views. Auflösung 1920 * 1060. Dazu auch die CSS und Skripte innerhalb der VIS.
1676102243305-1676055139628-javascript.zip
Hier sind alle Java - Skripte. Achtung: Nicht gleich alle auf einmal einkopieren und starten. Die Skripte sind in Ordner, für eine bessere Übersicht, abgelegt. Einige Skripte verarbeiten auch Aufzählungen. Da bitte aufpassen.
Diese 4 Dateien sind Bilder und Fonts und müssen zuerst entpackt werden. Dann habt ihr einzelne Ordner und Dateien. Die müssen alle über den Dateimanager (VIS dann System, ...) in den Ordner "/vis.0/" hochgeladen werden.
Viel Spaß. Ich versuche bei Problemen zu helfen. Allerdings ist Support nicht unbedingt meine Stärke (Bei dem was ich heute so im Forum gelesen hab...). Eine Bitte. Wer meine Javascripte optimieren, verbessern, verkürzen,... kann bitte melden. Würde mich freuen.
@fichte Hey, mir gefällt dein Dashboard ganz gut und die Seite mit den Heizungseinstellungen.
Würdest du dieses mal zur Verfügung stellen. Ich bin mit meiner Visu momentan gar nicht zufrieden, weil dort alles so durcheinandergewürfelt ist.
@manner666 Der Menüpunkt Dev. und Info sind noch nicht Fertig. Habs hier hoch geladen.
@enrico-fischer
Moin
könntest du dein Projekt veröffentlichen.
Ich finde das Design Hammer
Grüsse
Nachdem ich 3(!) Jahre Anlauf dafür genommen habe, habe ich nun endlich das Hydraulikschema unserer Heizung fertiggestellt. Ich habe hierzu mit InkScape ein SVG erstellt und dieses mit CSS und JavaScript animiert. Alle Datenpunkte sind mit eigebettet, so dass es auf verschiedenen Endgeräten nach Belieben skaliert werden kann.
Die Pumpen drehen sich in Abhängigkeit zur Modulation, gleichzeitig werden die Striche animiert. Die Leitungsfarben werden in Abhängigkeit der jeweiligen Temperaturen eingestellt.
Therme, Ofen und Wämepufferspeicher habe ich selbst selbst hergestellt. Es gibt zwar einige Vorlagen im WWW, die sind aber keine schöne Vektorgrafiken Und der Kamin sieht so aus wie das Original
Mein Dank geht an @Marc_St , @SBorg , @Stefan-G und viele andere, die mir auf der Reise und dem Weg hierhin geholfen haben.
Hier ein Video:
vis.webm
Das ist ein schönes Projekt und wahrscheinlich nie ganz fertig, aber die größte Hürde ist genommen!
@spampunk Hallo Spampunk, Deine animierte Darstellung der Heizung finde ich ziemlich genial. Würdest Du sie zur Verfügung stellen, vielleicht sogar mit einigen Erklärungen, was man wo anpacken muss, um es auf eigene Bedürfnisse anzupassen?
Das wäre echt super.
Danke!
VG
Hier meine Visu. Läuft auf einem einfachen Lenovo Tab am Schrank in der Küche, entsprechend ist das Design auf die Einrichtung angepasst. Besonders praktisch ist die Sonos Steuerung. Die synchronisiert die kleine Roam Box in der Küche mit dem grossen Sonos im Wohnzimmer, beides lässt sich aber auch einzeln ansteuern. Bei Fragen, fragen
Noch ein paar Details/Highlights zur Automation:
Teilweise ganz schöne Tüftelei, wenn also jemand eine ähnliche Lösung sucht, gerne anschreiben
Teilweise ganz schöne Tüftelei, wenn also jemand eine ähnliche Lösung sucht, gerne anschreiben
Ganz schön beeindruckend, da bin ich mindestens noch 5 Jahre von entfernt.
Hallo Markus,
hier ist der View vom Hydraulikschema. Es besteht aus 2 Basic-HTML-Widgets. Das eine beinhaltet allein das SVG, das andere den CSS- und JavaScript-Code.
Und hier lag für mich auch die größte Herausforderung: keine Ahnung von HTML, CSS, JavaScript und wie das zusammenhängt. Wenn es Dir ähnlich geht, W3Schools ist Dein Freund
Als SVG-Editor funktioniert der kostenlose Inkscape hervorragend. Aber auch hier musst Du Dich erst einmal gut einarbeiten. Der XML-Editor ist dabei eine lohnenswerte Hilfe, um Klassen zu vergeben. Bitte verwende dann nur den Dateityp "Optimiertes SVG " im 'Speichern unter' Dialog. Andernfalls hast Du nachher Probleme auf die Klassen zuzugreifen und die Styles zu manipulieren.
Wenn Du das Prinzip erst einmal verstanden hast, bekommst Du Lust auf mehr. Das nächste Projekt ist bereits im Fokus: die farbliche Echtzeitdarstellung der Lichter im Haus. Wenn es soweit ist, poste ich wieder auf diesem Kanal.
Bei Fragen einfach fragen, ansonsten viel Spaß und Erfolg beim Tüfteln.
Grüßle,
Timo
@woupi Danke Allerdings sind das mit Sicherheit keine 5 Jahre, ich habe vor einem Jahr auch bei Null angefangen und sehr viel Hilfe von vielen Seiten bekommen. Daher freue ich mich meine Erfahrungen und Lösen von Fallstricken auch weiter zu geben und so anderen zu helfen. Letztlich ist das Meiste doch Fleißarbeit, wenn man das Prinzip erst mal verstanden hat...
Und das Wichtigste: Nicht davon abschrecken lassen, dass die umfangreichen Lösungen unerreichbar erscheinen. Nicht alles auf einmal, sondern eins nach dem anderen, dann wächst eine komplexe Hausautomation solide Stück für Stück. Und immer fragen, wenn eine unüberwindbare Hürde vor einem steht!
@frederik-buss sagte in Einfach mal zeigen will….. - Teil 3:
@woupi Danke
Allerdings sind das mit Sicherheit keine 5 Jahre, ich habe vor einem Jahr auch bei Null angefangen und sehr viel Hilfe von vielen Seiten bekommen.
Wow, ich bin schon 3 Jahre dran und habe mit VIS nicht mal angefangen. Gut, jetzt muss man das eventuell auch ein bisschen revidieren, Ich saniere seit dem auch mein Haus und das "ich" muss man wörtlich nehmen. Bis auf ein paar Ausnahmen, habe ich bis jetzt alles selber und alleine gemacht.
Daher freue ich mich meine Erfahrungen und Lösen von Fallstricken auch weiter zu geben und so anderen zu helfen. Letztlich ist das Meiste doch Fleißarbeit, wenn man das Prinzip erst mal verstanden hat...
Das freut mich sehr und werde bestimmt in den nächsten Tagen mal darauf zurück kommen, danke schonmal dafür.
Und das Wichtigste: Nicht davon abschrecken lassen, dass die umfangreichen Lösungen unerreichbar erscheinen. Nicht alles auf einmal, sondern eins nach dem anderen, dann wächst eine komplexe Hausautomation solide Stück für Stück. Und immer fragen, wenn eine unüberwindbare Hürde vor einem steht!
So mache ich es auch.
VG
@spampunk Vielen Dank! Ich werde mich mal daran machen! Das SVG kann ich aus dem HTML Widget rausportieren und mit dem weiterarbeiten?
@ro75 sagte in Einfach mal zeigen will….. - Teil 3:
Hi,
Wie hast du den den Verbrauch tagesbasiert erstellt - ganz rechts unter der Uhr? Also die Balkendiagramm?
Ich habe ein 3EM und den Source Analztics Adapter aber der macht nur Wochenweise. Deines geht ja von (Heute) und zeigt rückwärts die letzen Tahe an?