Page History

Draw scalable vector graphics in displays.

How-to → Pillars → Operator → Displays → Vector

Understanding Vector Drawing Tools

Available Shape Tools

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

SVG Image Importer

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:

1. Displays → Images → Click "Add +" or "Import a File"
2. Select your SVG file and click Open

Editing Imported SVGs

When adding an SVG image into the Draw environment, if you double click it, you will have all the reference points of the file that can be edited as needed

SVG Best Practices

• Clean SVG files before import (remove unnecessary groups)

• Check scale - adjust to display units

• Simplify paths for 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:

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:

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.

In this section...