SVG für Heizung

[makki]

@Swiss: im Kern ist in den SVG's entweder direkt JS eingebette oder es werden aus der CV, genauso wie für CSS&Co auch, Sachen (Attribute wie "Farbe" im SVG angesprochen..
Gehen tut beides, was nun besser ist wird aufn Anwendungsfall ankommen - Zumindest soweit ichs kapiere

Makki

[Chris M.]

Naja, ich sehe erst mal yellowsubmarine in der Pflicht bei der Doku zu helfen, zumindest bei den Stichpunkten

Die Lösung hier ist bewusst so, dass alles innerhalb von z.B. Inkscape gemacht werden kann.

Also hierfür braucht man noch kein JavaScript oder SVG Details zu lernen

[yellowsubmarine]

so, hier mal einen kurzen Stand sowie die aktuelle config:

• das svg am besten mit inkscape erstellen. Als Basis hatte ich ein vorhandenes Viso verwendet.
• dann die Rohre als Gruppen definieren (entweder in inkscape oder im XML editor). Sprechende Namen als id helfen hier.
• wichtig ist hier sinnvolle Gruppen zu bilden, bzw. die Rohrabschnitte so zu erstellen, dass eine Simulation der Flows in Abhängigkeit der Pumpen (GAs) möglich ist. (in meinem svg ist das noch nicht ideal!)
• dann den Gruppen jeweils ein class Attribut geben:

pipe_group: gibt der Linie das Aussahen von einem Rohr
show_flow: simuliert eine Flüssigkeit im Rohr
data-cometvisu-active="GA": animiert die Flüssigkeit bei aktiver GA (bspw. Pumpe ein) durch hinzufügen von flow_active

  <g
     id="g-RL-KO"
     class="pipe_group show_flow"
     data-cometvisu-active="4/7/21">
    <path
	…..
  </g>

• zuletzt das svg per 2d in die CV einbinden und ggf. info Elemente für bspw. Temperaturen definieren.

Aktuell gibt es (zumindest bei mir) mit Safari und FF das Problem, dass die Animation des Flows (flow_active) die CPU an die 100% treibt.

Das svg zu erstellen und die Gruppen zu definieren ist ein gewisser Aufwand, allerdings gleichen sich die Schemas sicherlich ein Stückweit, so dass bei Veröffentlichung vielleicht irgendwann ein Repertoir entsteht. Das passende kann dann einfach ausgewählt oder angepasst werden. Die Skalierbarkeit dürfte als vektor grafik kein Problem sein.

[Chris M.]

Danke für's Aufschreiben!
Allen andern viel Spaß beim ausprobieren

Bzgl. der hohen CPU-Auslastung hatte ich schon ein paar Experimente gemacht: auch ein Reduzieren der "Ameisen" auf einen simplen Balken (der aktuelle Auf- und Abblendeffekt entsteht durch eine Superposition von vielen Linien) hat leider nicht geholfen.
=> Gibt's einen freiwilligen, der das ganze mal noch weiter reduziert, so dass wir das als Bug-Report an die Browser-Hersteller schicken können?

Es gibt außerdem noch einen Bug bei Webkit Browsern (bei mir zumindest am Chromium gesehen): wenn die Seite gewechselt wird, dann verliert dort die SVG die Info welche Flüsse aktiv sind und welche nicht. Der FF kann's.
=> hier muss auch noch mal genauer geschaut werden, woran das liegt.

(PS: Wer die gepostete CV-Config testen möchte, muss wohl noch das beim Hochladen kaputt gegangene "°" in den Labels fixen...)

[makki]

Nur so eine Idee (weil ich grad weder das Thema komplett nachvollziehen kann - noch die Probleme im Detail untersuchen), aus der hohlen Hüfte:
Würde es nicht Sinn machen, dafür ein für alle zugängliches Testsystem zu haben, wo sich das jeder instant ansehen kann? Kombi aus SVN,Demo,Wiki, keine Ahnung, sowas in der Art?

Makki

[Chris M.]

Klar, sollte auf dem Demo-Wiregate ja leicht machbar sein.

Die um Sonderszeichen entschärfte Config habe ich angehängt, die wird am geschicktesten per Include eingebaut, also per

 <page name="...">
    ...
    <include src="visu_heizung.xml" />
    ...
 </page>

(Man kann den Inhalt natürlich auch direkt in seine Config einbauen; für die Demo hier ist aber ein Include der geringere Aufwand).

Jetzt nur noch die SVG nach .../media/heizung.svg und das Demo läuft

(Und wer Pech hat, dass seine Temperatur-Sensoren auf anderen GAs liegen - ich hatte bei mir Glück - der ändert halt schnell noch die Adressen in der visu_heizung.xml)

[makki]

Habs jetzt mal husch reingebaut (wahlose dummy-Werte!), aber Chris, das war schonmal cooler als Werte in x/y reinzumalen - so mit sich drehenden Pumpen und sich bewegendem, farblich passendem Wasser in den Rohren - also wenn schon für den NBF malen - dann richtig cool
Das wär ja der Witz des SVG IMHO..

Makki

[Chris M.]

Habs jetzt mal husch reingebaut (wahlose dummy-Werte!), aber Chris, das war schonmal cooler als Werte in x/y reinzumalen - so mit sich drehenden Pumpen und sich bewegendem, farblich passendem Wasser in den Rohren - also wenn schon für den NBF malen - dann richtig cool
Das wär ja der Witz des SVG IMHO..

Das Wasser sollte fließen - warum es das gerade nicht tut muss ich analysieren. Bei mir ist's zumindest geflossen.
Per GA sogar individuell schaltbar (s.o.).

Drehende Pumpen sind da leider (noch?) nicht drinnen.

[Chris M.]

OK, Problem ist simpel: den <g> im SVG fehlt die (zusätzliche) Klasse "flow_active"!

Das kann entweder per Hand in der SVG hinzugefügt werden - oder wird automatisch gesetzt, wenn an der GA im Attribut data-cometvisu-active des <g> der Wert 1 anliegt.

=> Am besten noch die passenden Switches mit diesen GAs auf diese(!) Seite einbauen.
(Hintergrund: Webkit vergisst diesen Zustand gerne beim Seitenwechsel. Muss ich noch analysieren...)

[makki]

So Chris, und jetzt steh ich wieder wie doofie auf dem Schlauchboot im Nebel

Was ich mit dem vorletzen Beitrag hier meinte: es ist total cool! Aber es kann brutal anstregend sein, sich da einzudenken (vermutlich nicht nur für mich..)
Ich denke es wäre cool wenn der Autor (von mir aus eine sep.), sep. funktionierende Demo-config für sowas erstellen würde, wo man ultimativ nachsehen kann, wie es geht..
Zumindest bis es eine perfekte Doku (auch nicht meine Stärke..) dazu gibt..

Makki

[Chris M.]

Aber es kann brutal anstregend sein, sich da einzudenken (vermutlich nicht nur für mich..)

Richtig - daher probiere ich es wie ein klassischer Dealer zu machen: erst anfixen und dann abkassieren.

=> Die Demo-Konfig (oder das WG Demo) soll das Interesse wecken, die Anwenderfreundlichkeit inkl. gutem Tutorial kommt dann hoffentlich halbwegs automatisch

[makki]

Ich bin ja auch nur Dealer, wer macht nun den Paten
Im ernst, schickt mir gerne Demos (oder besser: funktionierend ins SVN), ehrlich, ich komm da sonst momentan nicht hinterher.. Diese schau ich mir morgen mal an..

Makki

[dundee]

Hallo Chris,

Richtig - daher probiere ich es wie ein klassischer Dealer zu machen: erst anfixen und dann abkassieren.

You made my day!!!

[vlamers]

Ich hab einige Stunden darauf verwendet die svgs für meine Heizung zu machen, um anschliessend festzustellen, dass die droiden das gar nicht fressen. Da wird die visu Seite erst gar nicht geladen... (Ausnahme FF der lädt die Seite aber keine Grafiken) ist das nur bei mir so oder ein globales Problem? (Android 4.04, 4.1.2, 3.2, 2.3)

Gruß

[daviid]

Mal nach zu den Werten IN dem SVG.

Es ist doch auch möglich diese direkt im SVG ein zu binden, ohne die über feste x,y Positionen fest zu legen, das gefällt mir gar nicht.

Nur wie ging das doch gleich?