SVG für Heizung

[daviid]

Moin,

ich hab die nächste Zeit mal wieder bischen Zeit..
Und hab mir gedacht, seit neustem gehen ja SVGs, da kann man sich ja wunderbar die Heizung damit visualisieren, nur wie?

Zur Verfügung hab ich u.A. Illustrator, hab zwar noch nie wirklich mit SVGs gearbeitet, aber was nicht is kann ja noch werden.

Aber wie kann der Comet verändert auf das SVG zugreifen?
Gibts da schon ne Doku dazu (sry war die letzten Monate nicht wirklich aktiv ...)

David

[Chris M.]

Erst mal ist eine SVG eine ganz normale Grafik-Datei wie z.B. JPEG für Fotos.
Die kann auch ganz normal - wie andere Bild-Dateiformate auch - in der CometVisu sowohl im <image> Widget als auch (und da wird's für diesen Anwendungsfall spannend!) als Hintergrund für 2D-Seiten verwendet werden.

Bei den 2D Seiten kannst Du die Widgets frei positionieren, also z.B. einen Heizkessel malen und ein <info>-Widget mit der Temperatur mittig drüber legen. (Dazu im <layout> Element die Attribute "x" und "y" setzen, vgl. Demo-Config)

Hinweis: die 2D Seiten sind zwischen Alpha- und Beta-Status. D.h. es kann durchaus erst mal zu Problemen kommen. Aber lass Dich davon nicht abschrecken - im Gegenteil, nimm es als Motivation, dass wir nun die erste reale Anwendung haben anhand der wir die 2D-Seiten auf Stand bringen können!

Bis hier hin ist alles Standard. Und auch per JPEG oder PNG lösbar (auch wenn SVG schon mal die Stärke ausspielt ein Vektor-Format zu sein, d.h. auf unterschiedlichen Auflösungen gut auszusehen)

Nun kann man aber einen Schritt weiter gehen, der aber auch tieferes Wissen braucht: Im Thread https://knx-user-forum.de/cometvisu/...3d-seiten.html habe ich gezeigt, wie sich die Hintergrund-SVG dynamisch verändern kann.
Hier fängt man aber auch erst mal mit einer "normalen" SVG an. Man sollte dort nur versuchen eine möglichst einfache aber saubere Struktur der Elemente anzulegen, da man diese ja später per JavaScript dynamisch verändern muss.

Wenn's also nur um einen Tank-Füllstand geht (wie im verlinkten Beispiel) würde ich eher ein extra Widget bauen (wie damals angekündigt).
Wenn's aber um eine ganze Heizungsanlage geht mit temperaturabhängigen Farben, animierten Stellgliedern und Flüssen, etc. pp. dann ist die dort beschriebene Lösung die richtige.
Aber bevor Du Dich dort im Wald verliertst: erstelle erst mal das Bild und ändere dynamisch die Farben. Das geht noch sehr einfach.
Wenn das vollständig verstanden ist, kann's gerne an die Geometrie gehen.

=> Wenn Du willst können wie hier das Thema gemeinsam durchexerzieren.
Ich biete neben der Beratung an die CV an den notwendigen Stellen weiter zu entwickeln. Dafür darfst Du ein HowTo für das Homepage-Wiki daraus erstellen

[StefanW]

=> Wenn Du willst können wie hier das Thema gemeinsam durchexerzieren.
Ich biete neben der Beratung an die CV an den notwendigen Stellen weiter zu entwickeln. Dafür darfst Du ein HowTo für das Homepage-Wiki daraus erstellen

Ein wunderbarer Vorschlag. Ich werde das sehr aufmerksam begleiten, weil ich meine Teichsteuerung gerne auf diese Weise in 2D Visualisieren möchte. Sollte auch zusammen mit dem Planet-Design funktionieren.

lg

Stefan

[daviid]

OK, ich fang dann irgendwann die Tage mal an.

Nur ein Problem hab ich noch, kennt jemand so Symbole von ner Heizung, nem Puffer, Heizkörper usw, und auch Ventile.

Die Lust dass alles selber zu zeichnen hält sich irgendwie in Grenzen ...

[Chris M.]

Nur ein Problem hab ich noch, kennt jemand so Symbole von ner Heizung, nem Puffer, Heizkörper usw, und auch Ventile.

Die Lust dass alles selber zu zeichnen hält sich irgendwie in Grenzen ...

Ja, schau mal hier: Grafikbausatz "Rohre & Fittings" © - E-Books vom EM ebook Verlag

Aber: damit bekommst Du kein SVG hin, das sind Pixel-Grafiken.

PS: Um eine Animation wie

am besten in SVG Realiseren zu können, hab ich mal eine Frage gestellt: Best way to display flow motion in a SVG? - Stack Overflow

[Chris M.]

hab ich mal eine Frage gestellt: Best way to display flow motion in a SVG? - Stack Overflow

Und mit etwas probieren auch selbst beantworten können... vgl. auch jsFiddle

Folglich sollte es relativ einfach gehen die notwendigen Elemente in Inkscape alle von Scratch neu zu zeichnen:

Jeder Tank ist wird wie in /media/demo_2d_backdrop_red_pot.svg gezeichnet, also nur ein paar Ellipsen, Linien und gefüllte Rechtecke.
Für die Verbindungen einfach einen Pfad erstellen, gerne ausreichend dick. Den dann je nach gewünschter Form mehrfach duplizieren und einfärben.

Für die anderen Elemente wie Anzeigen, Ventile, Pumpen gibt's wohl keine schnelle Lösung, da muss man wohl richtig ran.

[StefanW]

Ich habe beim googlen nach einem SVG-Editor den svg-edit auf Google Code gefunden, der komplett im Browser läuft. Hat damit jemand Erfahrungen gemacht?

Edit: Habe eben den Hinweis auf Inkscape von Chris im vorherigen Posting entdeckt, besser erst lesen dann posten....

lg

Stefan

[Chris M.]

Für die Verbindungen einfach einen Pfad erstellen, gerne ausreichend dick. Den dann je nach gewünschter Form mehrfach duplizieren und einfärben.

Vorschlag: mal einfach den Pfad, färbe ihn auf die "Basis"-Farbe und mach ihn so dick wie benötigt.

Ich werde dann einen Automatismus einbauen, der da draus die animierbare Röhren-Form bastelt.

Genau so werde ich noch ein kleines Framework schreiben, mit dem die KNX-Werte an das SVG übergeben werden, so dass dort ganz leicht drauf reagiert werden kann (z.B. um den Füllstand zu ändern).
Aber dafür haben wir ja noch bisschen Zeit - Du musst vorher mal das Bild erstellen

[Chris M.]

PS: Um eine Animation wie

am besten in SVG Realiseren zu können, [...]

Und mit etwas probieren auch selbst beantworten können... vgl. auch jsFiddle

Und ab jetzt auch hier im Forum postbar:

[daviid]

Nen Schönheitspreis gewinnt das im momentanen Zustand bestimmt noch nicht ...

[makki]

Ein universelles Heizungs-Schema (ist ja eh immer dasselbe, 1-3 HK, Puffer, Solarthemie, Theme/WP VL/RL, ...) wo man das unrelevante ausblenedet, wär so meine Vorstellungvon einem guten SVG dafür

Makki

[henfri]

Nen Schönheitspreis gewinnt das im momentanen Zustand bestimmt noch nicht ...

Hm. Ich hätt's anders formuliert:

Beeindruckend. Eigentlich wollte ich ein statisches Bild nehmen. Aber so langsam glaube ich, dass ich mir die Arbeit machen werde. Beeindruckend, was geht/und dass du die Idee hattest.

"Standard-Heizungsschema": Da bin ich skeptisch. Aber man könnte ja eine "Upload" Funktion erstellen, mit denen man eigene Schemata ins SVN laden kann, so dass sich nach und nach so viele darin befinden, dass für jeden eins dabei ist, mit denen nur kleine Änderungen nötig sind.

Gruß,
Hendrik

[makki]

"Standard-Heizungsschema":

Der Witz an der Sache wäre: man könnte je nachdem was man hat nur das einblenden was man hat, es müsste nur ein "fähiger" einmal das SVG in der "maximalversion" machen, den Rest kann man dann programmatisch lösen..

Makki

[Chris M.]

Mit Revision 897 gibt's jetzt eine Pipe-o-Matic und eine Flow-o-Matic die hier unterstützen können.

Wenn die Hintergrund SVG eine group mit der Klasse pipe_group enthält, wird aus dem Pfad eine Röhrenform gemacht (vgl. blauer "Kreis"). Breite und Farbe bleiben erhalten!
Enthält sie außerdem die Klasse show_flow, wird für eine Flussbewegung ein (abstraktes) Fluid "simuliert". Und steht da auch noch flow_active drinnen, wird das sogar animiert.
(-> später soll die Animation natürlich per KNX schaltbar sein...)

Das kann man nun im 2d3d Demo sehen - und probiert mal so eine Rohrform mit den kaufbaren Rohstücken

Unten drei Bilder:

• Das erste ein (natürlich) statischer Screenshot, wie die 2d3d Demo aussieht
• Das zweite ist die Ausgangs-Hintergunddatei
• Das dritte eine per Hand gefakte Version, die dem entspricht, was der Browser intern zusammen bastelt, so dass man die mal im Browser öffnen kann um einen Eindruck zu bekommen, ohne die CV anwerfen zu müssen (bzw. die SVN Version installieren zu müssen...)

[daviid]

Du willst mich glaub ver*******

Ich bin natürlich mangels Zeit kaum weiter gekommen, aber dass! Unglaublich gut, bei Gelegenheit mal probieren.

Aber das schwierigste wenn man seine Heizung in "schön" visualisieren will sind die Bilder/Symbole für Heizung, Heizkörper, Kollektor, usw.
Hat da jemand noch ne Idee?