Instructions for creating an animated hydraulic plan

Requirement

  • Inkscape

We create a buffer

  • Start Inkscape Start

  • Create a rectangle

Puffer1.png

  • Select fill and contour

Puffer2.png

  • Set the color of the outline to gray

Puffer3.png

  • Set the width of the contour

Puffer4.png

  • Result

Puffer5.png

  • Create fill with gradient

Puffer6.png

  • Use the edit function to apply two colors to the gradient, Color 1 (red) Assign with 100% coverage

Puffer7.png

  • Color two (blue) with 50% coverage

Puffer8.png

  • Change color gradient by rotate the object

Puffer9.png

  • Change color gradient by moving the gradient line

Puffer10.png

  • Round off the corners

Puffer11.png

We create Pipes

Pipes are created with the freehand-line draftsman. It is also possible to draw straight lines Click on the starting point with the mouse. Click on the target point again, the line is finished. If you start with the new line at the last box of the old line, the lines will be connected. The drawing direction determines how later the animation runs. Drawn from right to left, fluid flows from right to left.

Rohr1.png Rohr2.png

  • Give line a volume, Filling the contour, Pattern of the contour

Rohr3.png

  • Color of the contour

Rohr4.png
Rohr5.png

  • Assign a name to the object. Will be needed later for the animation.

    • Click on the line with the right mouse button

      • Select object properties

Rohr6.png

  • Change ID

Rohr7.png

Customize XML file (Inkscape)

Now comes the mystery of the animated lines

  • To form groups, The required values can only be entered if the line has been defined as a group.

XML1.png

  • Assign parameters to the group

    • id=”<unique id>”

    • class=”pipe_group show_flow flow_control”

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

The parameters pipe_group, show_flow, data-cometvisu-active and flow_control mean:

  • pipe_group => from the path a tubular shape is created

  • show_flow => a flowing (abstract) fluid is “simulated”.

  • data-cometvisu-active=”<ga>” => animates the fluid when GA is active

  • flow_control => Animation

XML2.png

Adapt XML-File (Editor)

It is also possible to edit the SVG file directly via the editor. Basis is the line framed as a group

  • Open the svg file with an editor and search for the ID (blue pipe)

XML3.png

  • enrich the section with the following code.

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

The finished result in the web browser

XML5.png