Vorsicht

Dies ist die Dokumentation des aktuellen Entwicklungszweigs der CometVisu. Es besteht daher die Möglichkeit, dass einige der hier beschriebenen Features mit dem aktuellsten Release der CometVisu nicht genutzt werden können.

Anleitung zum Erstellen eines Animierten Hydraulikplans

Voraussetzung

  • Inkscape

Wir erstellen einen Puffer

  • Inkscape Starten

  • Rechteck erstellen

Puffer1.png

  • Füllen und Kontur auswählen

Puffer2.png

  • Farbe der Kontur auf Grau stellen

Puffer3.png

  • Breite der Kontur einstellen

Puffer4.png

  • Ergebnis

Puffer5.png

  • Füllung mit Farbverlauf erstellen

Puffer6.png

  • Mit der Bearbeitungsfunktion zwei Farben für den Verlauf zuweisen

    • Farbe 1 (rot) Zuweisen mit 100% Deckung

Puffer7.png

    • Farbe zwei (blau) mit 50% Deckung

Puffer8.png

  • Farbverlauf ändern

    • es gibt zwei Möglichkeiten

      • Objekt drehen

Puffer9.png

      • Farbverlauflinie verschieben

Puffer10.png

  • Ecken abrunden

Puffer11.png

Wir erstellen Leitungen

Rohre werden mit dem Freihandlinien Zeichner erstellt. Es ist damit möglich auch gerade Linien zu Zeichnen Am Startpunkt mit der Maus klicken. Am Zielpunk wider klicken, fertig ist die Gerade. Wenn man mit der neuen Linie am letzten Kästchen der alte Linie beginnt werden die Linien zusammenhängen. Die Zeichenrichtung bestimmt wie später die Animation läuft. Von rechts nach links gezeichnet, Flüssigkeit fließt von rechts nach links.

Rohr1.png Rohr2.png

  • Linie ein Volumen geben

    • Füllung der Kontur

      • Muster der Kontur

Rohr3.png

      • Farbe der Kontur

Rohr4.png
Rohr5.png

  • Dem Objekt einen Namen zuweisen. Wird später für die Animation benötigt.

    • Linie mit der rechten Maustaste anklicken

      • Objekteigenschaften wählen

Rohr6.png

  • ID ändern

Rohr7.png

XML-File anpassen (Inkscape)

Nun kommt das Geheimnis der animierten Leitungen

  • Gruppen Bilden

Die benötigte Werte können nur eingetragen werden, wenn die Leitung als Gruppe definiert wurde.

XML1.png

  • Parameter der Gruppe zuordnen

    • id=“<eindeutige id>“

    • class=“pipe_group show_flow flow_control“

    • data-cometvisu-active=“1/0/3“

Die Parameter pipe_group, show_flow, data-cometvisu-active und flow_control bedeuten:

  • pipe_group => aus dem Pfad wird eine Röhrenform erzeugt

  • show_flow => wird eine fliesende (abstraktes) Fluid „simuliert“.

  • data-cometvisu-active=“<ga>“ => animiert die Flüssigkeit bei aktiver GA

  • flow_control => Animation

XML2.png

XML-File anpassen (Editor)

Es ist auch möglich die SVG Datei direkt per Editor zu bearbeiten. Basis ist die Leitung als Gruppe eingefasst

  • Mit einem Editor die svg Datei öffnen und nach dem Kenner (blaues Rohr) suchen

XML3.png

  • den Abschnitt mit dem folgendem Code anreichern.

<g
id="<eindeutige id>"
class="pipe_group show_flow flow_control"
data-cometvisu-active="1/0/3">
<path />
</g>
XML4.png

Das Fertige Ergebnis im Webbrowser

XML5.png