SVG Section Dimensions

The SVG Section Drawer has been developed to easily draw cross section dimensions for different geometries in SkyCiv Quick Design.

Supported Sections#

Rectangular
Hollow Rectangular
Hollow Circular
Circular
I-Beam
T-Section
Angle
Channel
Hat Shape

Functions#

`drawRectangularTube`#

Draws a rectangular tube.

Parameter	Type	Description
`color`	string	The color of the tube.
`bInput`	number	The section width.
`dInput`	number	The section height.
`tFInput`	number	The flange thickness.
`tWInput`	number	The web thickness.
`width`	number	The width of the drawing area.
`height`	number	The height of the drawing area.
`units`	string	The unit string for the dimensions.
`axis`	bool or object	`false` is default for no axis, otherwise an Axis Object.
`rotation_anticlockwise`	bool	`true` rotates sections 90 degrees anticlockwise.

Returns: string - The SVG HTML representing the drawn rectangular tube.

`drawRectangle`#

Draws a rectangle.

Parameter	Type	Description
`color`	string	The color of the rectangle.
`bInput`	number	The section width.
`dInput`	number	The section height.
`width`	number	The width of the drawing area.
`height`	number	The height of the drawing area.
`units`	string	The unit string for the dimensions.
`axis`	bool or object	`false` is default for no axis, otherwise an Axis Object.
`rotation_anticlockwise`	bool	`true` rotates sections 90 degrees anticlockwise.

Returns: string - The SVG HTML representing the drawn rectangle.

`drawIBeam`#

Draws an I beam.

Parameter	Type	Description
`color`	string	The color of the beam.
`bInput`	number	The section width.
`dInput`	number	The section height.
`tFInput`	number	The flange thickness.
`tWInput`	number	The web thickness.
`width`	number	The width of the drawing area.
`height`	number	The height of the drawing area.
`units`	string	The unit string for the dimensions.
`axis`	bool or object	`false` is default for no axis, otherwise an Axis Object.
`rotation_anticlockwise`	bool	`true` rotates sections 90 degrees anticlockwise.

Returns: string - The SVG HTML representing the drawn I beam.

`drawCircularTube`#

Draws a circular tube.

Parameter	Type	Description
`color`	string	The color of the tube.
`dInput`	number	The section diameter.
`tInput`	number	The wall thickness.
`width`	number	The width of the drawing area.
`height`	number	The height of the drawing area.
`units`	string	The unit string for the dimensions.
`axis`	bool or object	`false` is default for no axis, otherwise an Axis Object

Returns: string - The SVG HTML representing the drawn circular tube.

`drawCircle`#

Draws a circe.

Parameter	Type	Description
`color`	string	The color of the tube.
`dInput`	number	The section diameter.
`width`	number	The width of the drawing area.
`height`	number	The height of the drawing area.
`units`	string	The unit string for the dimensions.
`axis`	bool or object	`false` is default for no axis, otherwise an Axis Object

Returns: string - The SVG HTML representing the drawn circular tube.

`drawChannel`#

Draws a channel.

Parameter	Type	Description
`color`	string	The color of the channel.
`bInput`	number	The section width.
`dInput`	number	The section height.
`tFInput`	number	The flange thickness.
`tWInput`	number	The web thickness.
`width`	number	The width of the drawing area.
`height`	number	The height of the drawing area.
`units`	string	The unit string for the dimensions.
`axis`	bool or object	`false` is default for no axis, otherwise an Axis Object.
`rotation_anticlockwise`	bool	`true` rotates sections 90 degrees anticlockwise.

Returns: string - The SVG HTML representing the drawn channel.

`drawTSection`#

Draws a T Section.

Parameter	Type	Description
`color`	string	The color of the t section.
`bInput`	number	The section width.
`dInput`	number	The section height.
`tFInput`	number	The flange thickness.
`tWInput`	number	The web thickness.
`width`	number	The width of the drawing area.
`height`	number	The height of the drawing area.
`units`	string	The unit string for the dimensions.
`axis`	bool or object	`false` is default for no axis, otherwise an Axis Object
`rotation_anticlockwise`	bool	`true` rotates sections 90 degrees anticlockwise.
`flip`	bool	`true` flips the section.

Returns: string - The SVG HTML representing the drawn T Section.

`drawAngle`#

Draws a Angle Section.

Parameter	Type	Description
`color`	string	The color of the angle section.
`bInput`	number	The section width.
`dInput`	number	The section height.
`tFInput`	number	The flange thickness.
`tWInput`	number	The web thickness.
`width`	number	The width of the drawing area.
`height`	number	The height of the drawing area.
`units`	string	The unit string for the dimensions.
`axis`	bool or object	`false` is default for no axis, otherwise an Axis Object
`rotation_anticlockwise`	bool	`true` rotates sections 90 degrees anticlockwise.
`flip`	bool	`true` flips the section.

Returns: string - The SVG HTML representing the drawn Angle Section.

`drawHatSection`#

Draws a Hat Section

Parameter	Type	Description
`color`	string	The color of the hat section.
`b1Input`	string	The top flange width.
`b2Input`	string	The bottom flange width.
`dInput`	string	The section height.
`tFInput`	number	The flange thickness.
`tWInput`	number	The web thickness.
`width`	number	The width of the drawing area.
`height`	number	The height of the drawing area.
`units`	string	The unit string for the dimensions.
`axis`	bool or object	`false` is default for no axis, otherwise an Axis Object
`flip`	bool	`true` flips the section.

Returns: string - The SVG HTML representing the drawn Hat Section.

Axis Object#

The axis object can contain the following key-value pairs. The object can be set to false to exclude the axis. An empty {} object can be used to include the default axis.

Property	Default Value	Description
vertical_label	'Z'	The label for the vertical axis.
horizontal_label	'Y'	The label for the horizontal axis.
vertical_color	'blue'	The color for the vertical axis.
horizontal_color	'green'	The color for the horizontal axis.
vertical_axis_label_color	'blue'	The label color for the vertical axis.
horizontal_axis_label_color	'green'	The label color for the horizontal axis.
axis_size	'small'	The size of the axis. `"small", "medium", "large"`.
out_of_plane_label	'X'	The label for the out of plane axis.
out_of_plane_label_color	'red'	The label color for the out of plane axis.
out_of_plane_color	'red'	The color for the out of plane axis.
out_of_plane_dir	'cross'	The direction of the axis. `"in", "out", "cross"`.
show_out_of_plane_axis	`false`	Indicates if the out of plane axis should be shown.

Example Code#

In the ui.js file:

var section_drawer = SectionDrawer();
svg_html = section_drawer.drawRectangularTube(
    'black', 
    100, 
    200,
    10, 
    12,  
    300,
    150,
    'mm',
    false
);
div_input = jQuery('#div_input')
div_input.html(svg_html)

In the calculate.js file:

let sectionDrawer = SectionDrawer;
svg_html = sectionDrawer.drawRectangularTube(
    'black', 
    100, 
    200,
    10, 
    12,  
    300,
    150,
    'mm',
    false,
    false
);
ReportHelpers.print("", svg_html, "");

In the ui.js with axis object:

var axis = false;
if (input.show_axis) {
    axis = {
        vertical_label: input.vertical_axis_label,
        horizontal_label: input.horizontal_axis_label,
        vertical_color: input.vertical_axis_color,
        horizontal_color: input.horizontal_axis_color,
    }
}

var section_drawer = SectionDrawer();
svg_html = section_drawer.drawRectangularTube(
    'black', 
    100, 
    200,
    10, 
    12,  
    300,
    150,
    'mm',
    axis,
    false
);

div_input = jQuery('#div_input')
div_input.html(svg_html)

Sample Calculator#

You can find a sample calculator to view all the options for SVG Section Dimensions here.

Supported Sections#

Functions#

drawRectangularTube#

drawRectangle#

drawIBeam#

drawCircularTube#

drawCircle#

drawChannel#

drawTSection#

drawAngle#

drawHatSection#