Cross-Section Diagram

The Cross-Section Diagram is used throughout the modern platform to plot arbitrary cross-sections, potentially with section data such as centroid, mesh, and principal axes. It uses diagram widget type "crossSection".

Implementation

{
    "type": "sheetTemplateWidgets",
    "attributes": {
        "type": "diagram",
        "diagram": [
            {
                "type": "crossSection"
            }
        ],
        "equation": [
            {
                "result": "{PARAMETERS}",
                "condition": "CONDITIONS"
            }
        ],
        "referenceId": "cross_section_diagram"
    }
}

Plot Parameters

Parameter	Format	Example	Description
lines	dict	`xsect.lines`	Format: `[{"points": [{x: 0, y:0},{x: 0, y:L*12}, ...], "color": "#000", "lineWeight": 3, "material": "default"},{"points":...}]`
dimensions	dict	`xsect.dimensions`	Format: `{"name": "dim_name", "type": "outer"/"around"/"radius", "side": "N"/"S"/"E"/"W", "x1": 0, "y1": 0, "x2": 1, "y2": 1}`
labels	dict	`[{text: "hi", loc: [0,0]}]`	Format: `[{text: "text string", loc: [x,y], verticalAnchor: "start"/"end"/"middle", textAnchor: "start"/"end"/"middle", arrowEnd: [x,y]}]`. If `arrowEnd` is omitted or set to `[]`, then no arrow will be displayed (only the text)
domain	2x2 matrix	`xsect.domain`	Format: `[[xmin, xmax], [ymin, ymax]]`
height	integer	`300`	(defaults to `300`)
dimOffset	float	`0.05`	(defaults to `0.05`) The percentage to offset dimensions from the cross-section
lenUnit	string	`"mm"`	(defaults to `"mm"`) The unit to show for the lengths
origin	boolean	`true`	Whether or not to show the origin location
centroid	[float, float]	`[cx, cy]`	(defaults to `false`) Centroid location to plot
principalAxis	float	`5.5`	(defaults to `false`) Angle in degrees of the principal axis. Will plot through the centroid, so a centroid location must be passed
shearCentre	[float, float]	`[sx, sy]`	(defaults to `false`) Shear centre location to plot
plasticCentroid	[float, float]	`[px, px]`	(defaults to `false`) Plastic centroid location to plot
loadAxis	”+x”,“-x”,“+y”,“-y"	"+x”	(defaults to `false`) Axis and direction of primary loading, if that is to be plotted
loadLoc	float	`80`	(defaults to the centre of the diagram - note that this is not necessarily the centroid) Location at which to put the primary loading direction label
rotate	boolean	`true`	(defaults to `false`) Whether or not to rotate the diagram 90 degrees
mirror	string	`"y", "x"`	Mirrors about specified Axis (ex. mirror:“y”)
shift	[float, float]	`[a, a+b], [30, 20]`	Shifts object from its starting point using the specified [x, y] coordinates
compass	object	`compass:{textX: "X", textY: "Y"}`	Shows a X/Y axis label

Short Form Section Names

Within dev-environment/solver, the short form names for sections can be found in the file dsection_properties_v1.py. These names are used within the cross-section remote widget for the type parameter.

Section Shape Names Reference

Shape	Short Form
Rectangular Section	RectangularSection or Rect
Circular Section	CircularSection or Circ
Circular Hollow Section	CHS
Elliptical Section	EllipticalSection or Elli
Elliptical Hollow Section	EHS
Rectangular Hollow Section	RHS
Square Hollow Section	SHS
I-section	ISection or I or UB or WB
Monosymmetric I-section	MonoISection or MonoI
Tapered Flange I-sections	TaperedFlangeISection or TFI
Parallel Flange Channel	PFC or ParallelFlangeChannel
Tapered Flange Channel	TaperedFlangeChannel or TFC
Tee Section	TeeSection or T
Angle Section	AngleSection or L
Cee Section	Cee or C
Zee / Zed Section	ZedSection or ZeeSection or Zed or Zee or Z
Cruciform Section	CruciformSection or Cruciform or X
Polygon Section	PolygonSection or Polygon
Custom Drawn Section	CustomDrawnSection or Custom
Custom Drawn Thin-walled Section	CustomThinWalledSection or CustomThin

General Starting Tips and Pointers for Creating Diagrams

Diagrams can be created just from the diagram widget, specifically using lines and dimensions to outline the shape using the cross-section.

Basic Lines and Dimensions

lines: [
    {
        "points": [
            {x: -1 ft, y: 0 ft},
            {x: L_wall + 1 ft, y: 0 ft}
        ], 
        "color": "brown", 
        "material": "default", 
        "lineWeight": 4
    }
],

dimensions: [
    {
        "name": "h", 
        "type": "outer", 
        "side":"E", 
        "x1" : L_wall, 
        "y1":  i == 1 ? 0 ft : matrixSubset(perStory, i-1,4),
        "x2": L_wall, 
        "y2": matrixSubset(perStory, i,4)
    }
]

Notice that units have to be added to prevent any errors. The points section outlines the line which can be colored and have line weights. The dimensions allows a dimensioning line to go along a certain length based on the values added in the x1, x2, y1, and y2 arguments.

Using Iteration for Complex Diagrams

Iteration is often required for creating diagrams. Take a look at the code for the story cross-sections below from timberShearWallASD:

iterate(1, n_story, 1, {
    type:"Rect", 
    d: matrixSubset(stories,i,2), 
    b: L_wall, 
    shift: [0, matrixSubset(stories,i,3)]
}, i)

This iterate function automatically creates an array which can be concatenated. Otherwise, you’ll need to specify using []. This is later called by the remote widget and sends this argument array to sectionsData.

Working with Remote Widgets

Cross-section diagrams are commonly used with remote widgets that generate section property data:

{
    "type": "sheetTemplateWidgets",
    "attributes": {
        "type": "remote",
        "solver": "crossSection",
        "equation": [
            {
                "condition": "@default",
                "result": "{
                    sectionsData: section_data,
                    plotCentroid: true,
                    plotShearCentre: true
                }"
            }
        ],
        "referenceId": "section_properties"
    }
}

Best Practices

Units: Always include units in coordinate specifications to prevent errors
Organization: Group related lines and dimensions logically
Color Coding: Use consistent colors for different materials or components
Labels: Provide clear labels for dimensions and important features
Iteration: Use the iterate() function for repetitive elements rather than manual arrays

When using the principalAxis parameter, ensure that a centroid location is also provided, as the principal axis will be plotted through the centroid.

Guides

Analysis Calculators

Design Calculators

Calcs Builder

Implementation

Plot Parameters

Short Form Section Names

General Starting Tips and Pointers for Creating Diagrams

Basic Lines and Dimensions

Using Iteration for Complex Diagrams

Working with Remote Widgets

Best Practices

​Implementation

​Plot Parameters

​Short Form Section Names

​General Starting Tips and Pointers for Creating Diagrams

​Basic Lines and Dimensions

​Using Iteration for Complex Diagrams

​Working with Remote Widgets

​Best Practices

Implementation

Plot Parameters

Short Form Section Names

General Starting Tips and Pointers for Creating Diagrams

Basic Lines and Dimensions

Using Iteration for Complex Diagrams

Working with Remote Widgets

Best Practices