SkyPattern User Guide

SkyPattern is a geometric design tool that allows you to create and manipulate geometric elements in an interactive canvas. This guide will help you understand how to use the application effectively.

• Getting Started
  • Interface Overview
  • Basic Navigation
• Working with Elements
  • Adding New Elements
  • Element Types
    • Base Point
    • Constant
    • Angle Distance
    • Along Line
    • Intersect Lines
    • Intersect X and Y
    • Line
    • Bezier Curve
    • Arc
    • Advanced Intersections
    • Transform Element
    • Pattern Piece
  • Using Mathematical Expressions
    • Basic Arithmetic
    • Dynamic Functions (work with elements)
    • Static Math Functions
    • Constants and Element References
    • Important Notes
  • Element Management
    • Selecting Elements
    • Reordering Elements
    • Renaming Elements
    • Hiding/Showing Elements
    • Working with Layers
    • Deleting Elements
• Canvas Controls
  • Draft Mode vs Piece Mode vs Notes Mode
  • Coordinate System
  • Keyboard Shortcuts
  • Input Controls
• Saving and Loading
  • Cloud Documents
  • Local Backups
• Pattern Wizard
  • Step ① — Adjust Measurements
  • Step ② — Check Placement
  • Step ③ — Confirm PDF Settings
  • Step ④ — Start Making
  • Step ⑤ — Start Sewing
  • Assembling the Printed Pages
    • Understanding the Page Layout
    • Assembly Steps
• Tips and Best Practices
  • Naming Elements
  • Building Complex Designs
  • Formula Examples
  • Troubleshooting
• Advanced Features
  • Bezier Curve Editing
  • Arc-Curve Intersections
  • Dynamic Measurements

Getting Started

Interface Overview

The SkyPattern interface consists of three main areas:

1. Top Toolbar: Contains the SkyPattern logo, mode toggle (Draft/Piece), PDF/SVG export, save/load buttons for local backups, input mode toggle (mouse/trackpad), theme switcher (light/dark), and language selector
2. Canvas Area: Interactive SVG canvas where you can view and manipulate geometric elements
3. Right Panel: Element list with icons, add/remove buttons, and property editors. You can resize this panel by dragging the left edge to make it wider or narrower.
4. Bottom Status Bar: Shows document ID, current mode, and save status

Basic Navigation

SkyPattern supports two input modes, which you can toggle in the toolbar:

Mouse Mode ():

• Pan: Click and drag with the mouse wheel (middle button), or hold Shift and drag with the left mouse button
• Zoom: Scroll with the mouse wheel to zoom in/out

Trackpad Mode ():

• Pan: Two-finger scroll in any direction (up, down, left, right)
• Zoom: Pinch gesture (two-finger pinch in/out)

Both Modes:

• Select Element: Click on any element in the canvas or element list to select it
• Mode Toggle: Switch between "Draft", "Piece", and "Notes" modes using the tabs in the toolbar
• Theme Toggle: Click the theme button to switch between light and dark modes
• Grid Toggle: Click the grid button () to show/hide a 1cm reference grid on the canvas. The grid helps with alignment and measurement verification but does not appear in exports.

Working with Elements

Adding New Elements

1. Click the ➕ button in the right panel, or press n key
2. A new unnamed element will be created and selected
3. Choose the element type from the dropdown in the editor
4. Configure the element properties

Element Types

Base Point

• Purpose: Creates a fixed point at specific X,Y coordinates
• Properties:
  • X coordinate (in cm)
  • Y coordinate (in cm)
• Example: x: 10, y: 20 creates a point at position (10cm, 20cm)

Constant

• Purpose: Defines a reusable numeric value
• Properties:
  • Value (can be a mathematical expression)
  • Description (optional): A text note describing what the constant represents
• Example: value: 15 or value: 10 * 1.5

Angle Distance

• Purpose: Creates a point at a specific angle and distance from another point
• Properties:
  • From Point: Reference point name
  • Angle: Direction in degrees (0° = right/east, 90° = down/south, 180° = left/west, 270° = up/north)
  • Distance: How far from the reference point (in cm)
• Example: From "basePoint", angle 45°, distance 20

Along Line

• Purpose: Places a point along the line between two existing points
• Properties:
  • From Point: Start point of the line
  • To Point: End point of the line
  • Length: Distance along the line from start point (in cm)
• Example: Halfway along a line: length: len(@point1, @point2) * 0.5

Intersect Lines

• Purpose: Finds where two lines intersect
• Properties: Define two lines using from/to point pairs
• Example: Line 1 from "point1" to "point2", Line 2 from "point3" to "point4"

Intersect X and Y

• Purpose: Creates a point using X coordinate from one element and Y from another
• Properties:
  • Point X: Element to take X coordinate from
  • Point Y: Element to take Y coordinate from

Line

• Purpose: Draws a visible line between two points
• Properties: From point and to point

Bezier Curve

• Purpose: Creates smooth curved lines with control handles
• Properties: Multiple points with control angles and distances
• Usage: Click and drag the control handles to adjust curve shape

Arc

• Purpose: Creates circular arcs or arc segments
• Properties:
  • Center point: The center of the arc
  • Radius: Arc radius (in cm)
  • Start Angle: Starting angle in degrees (0° = right, 90° = down)
  • End Angle: Ending angle in degrees
• Example: A quarter circle from 0° to 90°, or a full circle from 0° to 360°

Advanced Intersections

• Intersect Arc and Curve: Finds intersection points between arcs and bezier curves
• Intersect Arc and Line: Finds intersection points between arcs and infinite lines defined by two points
• Intersect Bezier and Line: Finds intersection points between bezier curves and infinite lines defined by two points
• Point Along Curve: Places points at specific distances along curves. The distance must not exceed the total length of the curve — if it does, an error is displayed.

Transform Element

• Purpose: Creates transformed copies of elements by applying translation and rotation
• Properties:
  • Elements: Array of element names to transform
  • Translate X: Horizontal offset (in cm)
  • Translate Y: Vertical offset (in cm)
  • Rotation: Angle of rotation in degrees
  • Rotation Pivot: Point to rotate around (optional, defaults to origin 0,0)
• Features:
  • Transforms multiple elements at once
  • Supports rotation around a specified pivot point
  • Works with points, bezier curves, and other geometric elements
  • Transformed elements are named by combining the original element name and transform name (e.g., point1transform1)
• Example: Transform ["point1", "curve1"] with translateX: 10, translateY: 5, rotation: 45, pivot: "centerPoint"
  • Creates point1transform1 and curve1transform1
  • Rotates 45° around centerPoint, then translates 10cm right and 5cm down
• Usage: Create rotated sleeve patterns, arrange collar pieces at different angles, repeat decorative elements around a center point, or position pattern pieces in a circular layout

Pattern Piece

• Purpose: Creates closed polygon shapes by connecting points, lines, curves, and arcs
• Properties:
  • Points array: Element names (points, bezier curves, or arcs) that define the boundary
  • Layout X: Horizontal position for Piece mode (in cm). Can be edited manually or by dragging the pattern piece in Piece mode.
  • Layout Y: Vertical position for Piece mode (in cm). Can be edited manually or by dragging the pattern piece in Piece mode.
  • Layout Rotation: Rotation angle in degrees for Piece mode (rotates around pattern piece center)
  • Grainline Angle: Direction of grainline in degrees (90° = vertical by default)
  • Grainline Length: Length of grainline indicator (in cm)
  • Grainline X: Horizontal offset from piece center (in cm)
  • Grainline Y: Vertical offset from piece center (in cm)
  • Show Grainline: Toggle to show/hide grainline (checkbox)
  • Notches: Array of points from the outline where notches (alignment markers) should appear
• Features:
  • Automatically truncates bezier curves and arcs between adjacent points
  • Renders as a filled, closed path
  • Shows label at the shape's centroid
  • In Draft Mode: Displays at its defined coordinates
  • In Piece Mode: Displays at the Layout X/Y position for arranging pattern pieces, with grainline indicator visible
  • Grainline: Shows a line with arrows at both ends to indicate fabric grain direction. The grainline rotates with the pattern piece when you adjust Layout Rotation.
  • Notches: Small perpendicular lines extending outward from the pattern edge at specified points. Used to mark alignment points when sewing pieces together.
• Example: Points array: ["cornerA", "edgeCurve", "cornerB", "arcSegment", "cornerC"]
  • If edgeCurve is a bezier, it will be automatically truncated between cornerA and cornerB
  • If arcSegment is an arc, it will draw an arc segment between cornerB and cornerC
  • Curves and arcs without adjacent points use their full length
  • Grainline at 90° (vertical) helps orient the piece correctly when cutting fabric
• Usage: Define the boundary of pattern pieces for sewing patterns, technical drawings, or design templates. Use arcs for smooth curved edges like armholes or necklines. The grainline indicator helps ensure proper fabric grain alignment when cutting out pattern pieces.

Using Mathematical Expressions

Most numeric properties accept mathematical expressions. You can use:

Basic Arithmetic

• 10 + 5, width * 2, radius / 3
• (10 + 5) * 2 (parentheses for grouping)
• Supports +, -, *, / operators

Dynamic Functions (work with elements)

• len(@point1, @point2) - distance between two points in cm
• len(@bezierCurve) - total arc length of a bezier curve in cm
• angle(@point1, @point2) - angle from point1 to point2 in degrees
• angle(@point1, @vertex, @point2) - angle at the vertex between two arms (absolute value)
• getX(@pointName) - get X coordinate of a point
• getY(@pointName) - get Y coordinate of a point
• bisect(@point1, @vertex, @point2) - angle that bisects the angle at the vertex between two arms

IMPORTANT: When referencing element names in functions, you must prefix them with @. For example: len(@basePoint, @corner) not len(basePoint, corner).

Static Math Functions

• Trigonometry: sin(radians), cos(radians), tan(radians)
• Inverse trig: asin(value), acos(value), atan(value)
• Two-argument arctangent: atan2(y, x)
• Angle conversion: torad(degrees), todeg(radians)
• Chord functions: crd(radians) (chord = 2×sin(angle/2)), acrd(chord_length) (inverse chord, returns radians)
• Exponential/Logarithmic: exp(x), log(x), log10(x)
• Basic math: sqrt(x), abs(x), pow(base, exponent), sign(x)
• Rounding: ceil(x), floor(x), round(x), trunc(x)
• Multiple arguments: min(a, b, c, ...), max(a, b, c, ...)

Constants and Element References

• Built-in constants: PI (3.14159...), GOLDEN_RATIO (1.618...)
• Element references: Use element names directly: myConstant, centerRadius
• Element names in functions: Use @elementName to reference element names in function calls

Important Notes

• Trigonometric functions expect radians, but SkyPattern angles are in degrees
• Use conversion functions: sin(torad(myAngle)) or todeg(asin(0.5))
• Chord functions also use radians: crd(torad(60)) or todeg(acrd(1.5))
• Element names are case-sensitive
• Functions require parentheses and comma-separated arguments

Element Management

Selecting Elements

• Click on elements in the canvas
• Use the element list in the right panel
• Selected elements are highlighted
• Click the magnifying glass (🔍) button in the element list to activate filter mode and reveal a search box for filtering elements by name

Reordering Elements

• Use ⬆︎ and ⬇︎ buttons to change calculation order
• Elements are calculated in list order, so dependencies must come first

Renaming Elements

• Edit the Name field in the element editor to rename an element
• All references to the renamed element — in formulas, point fields, arrays, and transform-derived names — are updated automatically throughout the document
• For example, renaming p1 also updates any transform-derived names like p1t1 to newNamet1

Hiding/Showing Elements

• Each element has a "Hidden" checkbox in the editor panel
• Hidden elements are not visible on the canvas or in exports
• Useful for temporarily hiding construction elements or managing overlapping elements
• Hidden elements still exist and are calculated, they just aren't displayed

Working with Layers

Layers help you organize complex patterns by grouping related elements together and controlling their visibility.

Assigning Elements to Layers:

• Select an element and open the element editor
• Find the "Layer Name" dropdown in the editor
• Choose an existing layer from the dropdown, or select "+ new" to create a new layer
• When creating a new layer, enter a descriptive name when prompted
• Elements without a layer assignment are always visible

Managing Layer Visibility:

• The Layers panel appears at the top of the right column and can be collapsed or expanded by clicking the triangle toggle (▼/▶) next to the "Layers" heading
• Each layer is shown with a checkbox next to its name
• Checked = Layer is visible on the canvas and in the element list
• Unchecked = Layer is hidden from view
• Click checkboxes to quickly toggle entire groups of elements on and off

Best Practices:

• Use layers to organize construction elements separately from finished pattern pieces
• Group related elements by pattern section (e.g., "Sleeve", "Bodice", "Collar")
• Hide layers you're not currently working on to reduce visual clutter

Example Usage:

• Create a "Construction" layer for guide lines and reference points
• Create a "Pattern" layer for the final pattern pieces

Deleting Elements

• Select the element and click the ➖ button
• Be careful: other elements referencing this one will lose their calculations

Canvas Controls

Draft Mode vs Piece Mode vs Notes Mode

SkyPattern has three modes that you can toggle using the tabs in the toolbar:

• Draft Mode: The default working mode where you create and edit all elements. All points, lines, curves, and pattern pieces are shown at their defined coordinates. Use this mode for drafting your pattern.

• Piece Mode: A layout mode for arranging finished pattern pieces. In this mode:

  • Only pattern pieces are visible (construction elements like points and lines are hidden)
  • Each pattern piece displays at its Layout X/Y position
  • Click and drag pattern pieces to reposition them (automatically updates Layout X/Y values)
  • Useful for arranging pieces for cutting, printing, or exporting
  • Pattern piece labels are larger for better visibility

• Notes Mode: A real-time collaborative text editor for taking notes and sharing information. In this mode:

  • A simple text editor replaces the canvas
  • Real-time collaboration: Multiple users can edit the same document simultaneously
  • Changes are synced automatically across all connected clients
  • Connection status indicator shows when you're connected for real-time collaboration
  • All notes are saved to the database and persist across sessions
  • Useful for pattern instructions, measurement notes, design ideas, or team collaboration

Coordinate System

• Origin (0,0) is at the top-left
• X increases going right (east)
• Y increases going down (south)
• Angles: 0° = right, 90° = down, 180° = left, 270° = up
• All distances are in centimeters (cm)

Keyboard Shortcuts

• n: Add new element
• Click outside elements to deselect

Input Controls

Mouse Mode (default):

• Click: Select elements
• Mouse wheel click and drag: Pan the canvas
• Shift + left click and drag: Pan the canvas
• Mouse wheel scroll: Zoom in/out
• Bezier handles: Click and drag to adjust curve control points

Trackpad Mode:

• Click: Select elements
• Shift + left click and drag: Pan the canvas (alternative to two-finger scroll)
• Two-finger scroll: Pan the canvas in all directions
• Pinch gesture: Zoom in/out (two fingers)
• Bezier handles: Click and drag to adjust curve control points

Use the input mode toggle button (/) in the toolbar to switch between mouse and trackpad modes.

Saving and Loading

Cloud Documents

If you have a document ID (shown in the bottom status bar), your work automatically saves to the cloud every 500ms.

Local Backups

Click the local backup button (database icon) in the toolbar to open the backup dialog.

• Save local backup: Downloads a JSON file of your design to your computer
• Load from backup: Opens a file picker to upload a previously saved JSON file
• Useful for working offline or sharing designs

Pattern Wizard

The Pattern Wizard guides you through the complete workflow of customizing, arranging, and printing a pattern. It is especially useful when working with template patterns that have pre-defined measurements.

Opening the Wizard: Click the magic wand button in the toolbar to open or close the Wizard panel.

Step ① — Adjust Measurements

The wizard lists all Constant elements that have a description. Edit any value to update the pattern in real time — changes are reflected on the canvas immediately, so you can see the effect before proceeding.

Read each field's description to understand what you are adjusting (e.g., "Chest circumference", "Back length").

Step ② — Check Placement

Before printing, each pattern piece needs to be positioned on the virtual print canvas. Switch to Placement (Piece) mode to see and adjust the print position of each piece.

• Auto-calculate placement: Click this button to automatically arrange all pieces so they don't overlap, using a shelf-packing algorithm. The view switches to Piece mode so you can see the result immediately.
• Manual adjustment: Click and drag any piece in Piece mode to fine-tune its position. Manual placement typically achieves much denser, more paper-efficient layouts than the automated algorithm.

Step ③ — Confirm PDF Settings

Click PDF Print Settings to open the print dialog. Configure your paper size, orientation, overlap margin, and page grid (columns × rows).

• Auto-calculate page count: Automatically computes the minimum number of pages needed to fit all pieces, choosing portrait or landscape orientation to minimise the total page count.

Step ④ — Start Making

Once your PDF is printed, assemble the pages into a full-size pattern. The wizard includes step-by-step assembly instructions — see Assembling the Printed Pages below.

Step ⑤ — Start Sewing

Click Open Notes tab to read any construction notes and sewing instructions attached to this pattern document.

Assembling the Printed Pages

After printing, follow these steps to assemble the individual pages into one large pattern sheet.

Understanding the Page Layout

Each printed page contains:

• A page label in the top-left corner: "Page(1,1)", "Page(2,1)", etc.
  • First number = column (left to right)
  • Second number = row (top to bottom)
• Overlap margins with two types of lines:
  • Solid line — trim edge (cut here)
  • Dashed line — overlap boundary
• Pattern lines in the centre

Assembly Steps

1. Lay out all pages (on a large table or the floor)
   • Arrange in a grid according to the page labels
   • Page(1,1) top-left, Page(2,1) to its right, and so on
2. Trim the interior pages
   • For pages that have neighbours on all four sides, trim along the solid overlap line
   • Leave overlap margins on edge pages
3. Align and tape
   • Start with the top row
   • Overlap pages, matching pattern lines and marks
   • Use the overlap zone to align precisely
   • Tape from the back for a clean front surface
   • Work row by row, then join the rows together
4. Check the alignment
   • Pattern lines should connect smoothly across page boundaries
   • If lines don't match, check that you printed at 100% scale

Tips and Best Practices

Naming Elements

• Use descriptive names like "centerPoint", "radius", "cornerAngle"
• Names are used in formulas, so avoid spaces and special characters
• Use camelCase or underscores: baseWidth or base_width
• Full-width characters are automatically normalized: if you type element names using full-width characters (e.g. from a Japanese or Chinese keyboard), they are automatically converted to their half-width equivalents (e.g. ａ → a, １ → 1)

Building Complex Designs

1. Start with base points to establish key positions
2. Create constants for important measurements
3. Use angle/distance and along-line elements to create related points
4. Add lines and curves to visualize the design
5. Use intersections to find derived points

Formula Examples

• Constants: myRadius / 2 - half the radius constant
• Perpendicular angle: angle(@center, @corner) + 90 - 90 degrees from the angle
• Shifted position: getX(@point1) + 5 - X position shifted 5cm right
• Midpoint distance: len(@point1, @point2) * 0.5 - half the distance between points
• Fraction along line: len(@point1, @point2) / 3 - one third the distance
• Trigonometry: sin(angle(@p1, @p2) * PI / 180) * 10 - sine of angle times 10
• Complex expressions: sqrt(pow(getX(@p2) - getX(@p1), 2) + pow(getY(@p2) - getY(@p1), 2)) - distance formula
• Angle bisector: bisect(@arm1, @vertex, @arm2) - angle that splits two arms evenly
• Min/max: max(getX(@p1), getX(@p2), getX(@p3)) - rightmost X coordinate

Troubleshooting

• Element not calculating: Check that all referenced elements exist and are calculated first
• Unexpected positions: Verify formulas and element order
• Performance issues: Simplify complex curves or reduce the number of elements
• Point Along Curve "distance out of range" error: The distance value exceeds the total length of the curve. Reduce the distance or use len(@curveName) to check the curve's length.

Advanced Features

Bezier Curve Editing

• Select a bezier curve to see control handles
• Drag handles to adjust curve shape
• Control angles are in degrees, distances in canvas units (cm)

Arc-Curve Intersections

• Useful for finding precise intersection points
• Intersection index selects which intersection point to use (0, 1, 2...)

Dynamic Measurements

• Elements update automatically when dependencies change
• Create parametric designs by changing base values

This guide covers the essential features of SkyPattern. Experiment with different element types and formulas to create complex geometric designs!