This guide walks you through creating precise vector graphics using polylines, polygons, and the new spline curves feature. Learn to draw custom shapes, import SVG graphics, and use advanced drawing techniques for professional process graphics.

Prerequisites:

  • Basic understanding of the Draw environment
  • Familiarity with selection tools
  • Knowledge of display creation



Understanding Vector Drawing Tools

Available Shape Tools

ToolPurposeDrawing Method
RectangleBasic shapes, containersClick and drag
EllipseCircles, rounded elementsClick and drag
PolygonClosed multi-point shapesClick points, close to finish
PolylineOpen paths, pipingClick points, Enter to finish
Spline CurvesSmooth curved pathsClick control points

Drawing Modes

  • Click-and-drag: For rectangles and ellipses
  • Point-by-point: For polylines and polygons
  • Direct manipulation: Edit points after creation

Drawing Polylines (Piping and Connections)

Creating a Polyline

  1. Select Polyline tool from left toolbar
  2. Click to place first point
  3. Click to add subsequent points
  4. Press Enter or right-click to finish
  5. Press Esc to cancel

Tips for Piping Diagrams

? Hold Shift while clicking for straight horizontal/vertical segments ? Use grid snap for aligned piping ? Double-clicklast point to auto-close to first point

Editing Polyline Points

Using the Direct Selection Tool (black arrow):

  • Move point: Click and drag any point
  • Add point: Double-click on line segment
  • Delete point: Right-click on point
  • Convert corner: Alt-click on point (smooth/sharp)

Creating Polygons (Closed Shapes)

Drawing Custom Equipment Shapes

  1. Select Polygon tool
  2. Click to place vertices
  3. Shape auto-closes when clicking near start point
  4. Or press Enter to auto-close

Example: Tank Shape

1. Draw hexagon base (6 clicks)
2. Use Direct Selection to adjust points
3. Apply fill color for liquid level
4. Add Bargraph dynamic for animation

Using Spline Curves (New Feature)

Creating Smooth Curves

Spline curves create smooth paths through control points:

  1. Select Spline tool from toolbar
  2. Click to place control points
  3. Curve automatically smooths between points
  4. Adjust tension for curve tightness

Best Uses for Splines

  • Flow lines with natural curves
  • Organic shapes like rivers or borders
  • Smooth transitions between equipment
  • Decorative elements requiring fluidity

Spline vs Polyline

FeaturePolylineSpline
Path typeStraight segmentsSmooth curves
ControlDirect pointsControl points
Use casePiping, straight pathsNatural curves
EditingMove verticesAdjust curve tension

SVG Image Importer (New Feature)

Importing SVG Graphics

  1. Go to File → Import → SVG
  2. Select SVG file
  3. Choose import options:
    • Convert to shapes: Editable vectors
    • Keep as image: Single element
    • Scale: Maintain aspect ratio

Editing Imported SVGs

When converted to shapes:

  • Ungroup to access individual elements
  • Modify colors and properties
  • Add dynamics to specific parts
  • Save as symbol for reuse

SVG Best Practices

? Clean SVG files before import (remove unnecessary groups) ? Check scale - adjust to display units ? Simplify pathsfor better performance ? Test dynamics on individual elements


Connecting Shapes with GridLines

Creating Connected Diagrams

  1. Enable Connections property on shapes:
    • Select rectangle/ellipse
    • Check "Connections" in properties
  2. Draw GridLine between shapes:
    • Select GridLine tool
    • Click on first shape edge
    • Click on second shape edge
    • Line auto-routes
  3. Move shapes - connections follow!

Connection Properties

  • Auto-routing: Finds best path
  • Orthogonal: Right-angle segments only
  • Direct: Straight line connection

Combining Shapes

Boolean Operations

Use toolbar buttons to combine selected shapes:

OperationResultUse Case
UnionMerges shapesComplex equipment
IntersectOverlap onlyCutouts, windows
ExcludeRemove overlapHollow shapes
Exclusive-OrNon-overlap partsFrames, borders

Example: Creating a Valve Symbol

  1. Draw circle (valve body)
  2. Draw triangle (flow direction)
  3. Select both → Union
  4. Add rectangle (stem)
  5. Union again
  6. Apply dynamics to combined shape

Display Save Shortcuts (New Feature)

Quick Save Options

New keyboard shortcuts while saving:

ShortcutActionUse Case
Ctrl+SSave + Open XAMLView/edit raw XAML
Shift+SSave + Show tag usageAudit tag references
Alt+SSave + Preview modeTest without running

Using XAML View (Ctrl+S)

Opens Notepad with display XAML:

  • Search for specific elements
  • Bulk find/replace operations
  • Copy complex structures
  • Debug binding issues

Tag Usage Report (Shift+S)

Shows all tags used in display:

  • List of referenced tags
  • Dynamic connections
  • Missing tag warnings
  • Cross-reference tool

Advanced Drawing Techniques

Creating Reusable Pipe Segments

  1. Draw standard pipe section with polyline
  2. Add standard width and color
  3. Save as symbol: "Pipe_Horizontal"
  4. Create variants: "Pipe_Vertical", "Pipe_Elbow"
  5. Build diagrams by combining segments

Using Layers (Z-Order)

Control what appears on top:

Background shapes → Send to Back
Piping → Middle layer
Equipment → Default layer
Labels/Values → Bring to Front

Grid and Snap Settings

For precise technical drawings:

  1. Click Grid Definition button
  2. Set grid spacing: 10 pixels
  3. Enable Snap to Grid
  4. Show Rulers for measurements

Performance Tips

Optimizing Complex Drawings

? Combine static shapes using Union ? Limit polyline points - use minimum needed ? Group related elements for easier selection ? Lock background elements to prevent accidental moves ? Hide complex elements while editing others

Managing Many Shapes

When working with 100+ shapes:

  • Use layers effectively
  • Group by system (cooling, heating, etc.)
  • Create symbols for repeated elements
  • Use Hide/Show during editing

Troubleshooting

Polyline won't close

  • Click near first point (within 5 pixels)
  • Or press Enter to auto-close
  • Use Polygon tool if always need closed shape

Can't edit imported SVG

  • Must convert to shapes on import
  • Ungroup after import
  • Some complex SVGs may need simplification

Connections not following shapes

  • Ensure "Connections" enabled on both shapes
  • GridLine must start/end on shape edges
  • Try deleting and redrawing connection

Spline curve too complex

  • Reduce number of control points
  • Adjust tension settings
  • Consider using polyline for simpler paths

This guide covered creating and editing vector graphics in displays, from basic polylines to advanced spline curves and SVG imports, enabling professional technical drawings and process graphics.