Understanding Vector Drawing Tools
Available Shape Tools
Tool | Purpose | Drawing Method |
---|
Rectangle | Basic shapes, containers | Click and drag |
Ellipse | Circles, rounded elements | Click and drag |
Polygon | Closed multi-point shapes | Click points, close to finish |
Polyline | Open paths, piping | Click points, Enter to finish |
Spline Curves | Smooth curved paths | Click 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
- Select Polyline tool from left toolbar
- Click to place first point
- Click to add subsequent points
- Press Enter or right-click to finish
- 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
- Select Polygon tool
- Click to place vertices
- Shape auto-closes when clicking near start point
- 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:
- Select Spline tool from toolbar
- Click to place control points
- Curve automatically smooths between points
- 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
Feature | Polyline | Spline |
---|
Path type | Straight segments | Smooth curves |
Control | Direct points | Control points |
Use case | Piping, straight paths | Natural curves |
Editing | Move vertices | Adjust curve tension |
SVG Image Importer (New Feature)
Importing SVG Graphics
- Go to File → Import → SVG
- Select SVG file
- 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
- Enable Connections property on shapes:
- Select rectangle/ellipse
- Check "Connections" in properties
- Draw GridLine between shapes:
- Select GridLine tool
- Click on first shape edge
- Click on second shape edge
- Line auto-routes
- 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:
Operation | Result | Use Case |
---|
Union | Merges shapes | Complex equipment |
Intersect | Overlap only | Cutouts, windows |
Exclude | Remove overlap | Hollow shapes |
Exclusive-Or | Non-overlap parts | Frames, borders |
Example: Creating a Valve Symbol
- Draw circle (valve body)
- Draw triangle (flow direction)
- Select both → Union
- Add rectangle (stem)
- Union again
- Apply dynamics to combined shape
Display Save Shortcuts (New Feature)
Quick Save Options
New keyboard shortcuts while saving:
Shortcut | Action | Use Case |
---|
Ctrl+S | Save + Open XAML | View/edit raw XAML |
Shift+S | Save + Show tag usage | Audit tag references |
Alt+S | Save + Preview mode | Test 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
- Draw standard pipe section with polyline
- Add standard width and color
- Save as symbol: "Pipe_Horizontal"
- Create variants: "Pipe_Vertical", "Pipe_Elbow"
- 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:
- Click Grid Definition button
- Set grid spacing: 10 pixels
- Enable Snap to Grid
- 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.