UI File

The ui.js file constitutes a dynamic solution for updating the user interface of our calculator, which responds in real-time to user inputs. The file is constructed using javascript, featuring compatibility with either jQuery or generic vanilla javascript for DOM manipulation. Upon each user input, the file is executed for seamless interface updates.

Moreover, the file is capable of updating both the canvas and div elements specified within the input variables of your config.json, making it a versatile tool for UI enhancements.

tip

Use var instead of let in the ui.js to avoid console errors.

Template#

// Note:
// You must use var instead of let in this template to have the ui.js working properly.

// Get the current input from your calculator
var input = SKYCIV_DESIGN.generateInput()

// Replace ui-canvas with whatever id you have given your canvas
var canvas = document.getElementById("ui-canvas");
var ctx = canvas.getContext("2d");

// Clear the previous data on the canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);

ctx.fillText("Updating the canvas with some text");

Getting input in the ui.js#

SKYCIV_DESIGN.generateInput(convert_to_base_unit_system)#

The SKYCIV_DESIGN.generateInput(convert_to_base_unit_system) function is used to get the current input in the ui.js file. The convert_to_base_unit_system flag can be used convert the input back to the default_unit_system used in the calculate.js.

Structuring graphics to work with both unit systems#

It is suggested the the following layout can be used to create graphics that work with both unit systems.

// Get the current converted input from your calculator
var input = SKYCIV_DESIGN.generateInput(true);

// Get the current input to display in the labels
var input_labels = SKYCIV_DESIGN.generateInput(false);

// Deal with unit systems if needed
var units = {
    F: 'kN',
    L: 'mm',
    M: 'kN/m'
};

if (SKYCIV_DESIGN.units.getCurrentUnitSystem() == 'imperial') {
    units.F = 'kip';
    units.L = 'in';
    units.M = 'kip/ft';
}

Packages#

SVG Section Dimensions#

See the SVG Section Dimensions Documentation.

SVGCreator#

Sample UI.js that uses the Section SVGCreator Package

var creator = SVGCreator;
creator.initialize({
    total_height: 100,
    total_width: 150,
    align: 'left'
});

creator.addText({
    text_value: 'TEST SVG CREATOR'
});

creator.addRect({
    x: 0,
    y: 20,
    width: 50,
    height: 40,
    fill_color: 'green'
});

creator.endSVG();

var html = creator.getSVGHtml();
ui_div.outerHTML = html;

Available Methods#

Method	Description
`addMarker(marker_obj)`	Adds a marker to the SVG for arrows on dimension lines.
`addRect(rect_obj)`	Creates a rectangle element in the SVG.
`addPath(path_obj)`	Creates a path element in the SVG defined by a series of coordinates.
`addCircle(circle_obj)`	Adds a circle element to the SVG.
`addLine(line_obj)`	Creates a line element in the SVG with options for stroke color, width, dasharray, and marker definitions.
`addText(text_obj)`	Adds a text element to the SVG with options for position, font family, size, and color.
`endSVG()`	Ends the SVG structure by closing the SVG and div tags.
`getSVGHtml()`	Returns the SVG HTML string generated by the SVGCreator object.

marker_obj

A JavaScript Object that can contain the following properties.

Property	Description
`marker_id`	Specifies the unique identifier for the marker.
`marker_width`	Sets the width of the marker.
`marker_height`	Sets the height of the marker.
`refX`	Defines the x-coordinate for the reference point of the marker.
`refY`	Defines the y-coordinate for the reference point of the marker.
`marker_dims`	Contains an array of coordinate pairs defining the polygonal shape of the marker..
`fill_color`	Defines the fill color of the marker.
`transform`	Transform string. See SVG docs

rect_obj

A JavaScript Object that can contain the following properties.

Property	Description
`x`	Specifies the x-coordinate of the upper-left corner of the rectangle.
`y`	Specifies the y-coordinate of the upper-left corner of the rectangle.
`rx`	Rounding of rectangle corner on x side.
`ry`	Rounding of rectangle corner on y side.
`width`	Sets the width of the rectangle.
`height`	Sets the height of the rectangle.
`fill_color`	Defines the fill color of the rectangle.
`fill_opacity`	Defines the fill opacity of the rectangle.
`stroke`	Defines the stroke color of the rectangle.
`stroke_linejoin`	Defines the stroke line join of the rectangle.
`stroke_width`	Defines the stroke width of the rectangle.
`stroke_dasharray`	Sets the dash pattern for the line's stroke, if provided as an array.
`stroke_opacity`	Sets the stroke opacity of the rectangles line.
`transform`	Transform string. See SVG docs

path_obj

A JavaScript Object that can contain the following properties.

Property	Description
`starting_x`	Represents the x-coordinate of the starting point of the path.
`starting_y`	Represents the y-coordinate of the starting point of the path.
`dims_arr`	An array containing pairs of x and y coordinates, defining the subsequent line segments of the path.
`d`	Is the `d` parameter of the svg path. Overrides the `dims_arr`.
`stroke`	Sets the color of the path's stroke.
`stroke_width`	Sets the width of the path's stroke.
`stroke_linejoin`	Defines the stroke line join of the path.
`fill_color`	Defines the fill color of the path.
`marker_end_def`	Specifies the marker definition for the end of the path, if provided.
`marker_start_def`	Specifies the marker definition for the start of the path, if provided.
`transform`	Transform string. See SVG docs

circle_obj

A JavaScript Object that can contain the following properties.

Property	Description
`center_x`	Represents the x-coordinate of the circle's center.
`center_y`	Represents the y-coordinate of the circle's center.
`radius`	Sets the radius of the circle.
`stroke`	Sets the color of the circle's stroke.
`stroke_width`	Sets the stroke width of the circle's stroke.
`stroke_opacity`	Sets the stroke opacity of the circle's line.
`fill_color`	Sets the fill color of the circle.
`fill_opacity`	Sets the fill opacity of the circle.
`transform`	Transform string. See SVG docs

line_obj

A JavaScript Object that can contain the following properties.

Property	Description
`start_x`	Specifies the x-coordinate of the starting point of the line.
`start_y`	Specifies the y-coordinate of the starting point of the line.
`end_x`	Specifies the x-coordinate of the ending point of the line.
`end_y`	Specifies the y-coordinate of the ending point of the line.
`stroke`	Sets the color of the line's stroke.
`stroke_width`	Sets the width of the line's stroke, if provided.
`stroke_dasharray`	Sets the dash pattern for the line's stroke, if provided as an array.
`stroke_linejoin`	Sets the stroke linejoin for the line's stroke.
`marker_end_def`	Specifies the marker definition for the end of the line, if provided.
`marker_start_def`	Specifies the marker definition for the start of the line, if provided.
`opacity`	Sets the text opacity.
`transform`	Transform string. See SVG docs

text_obj

A JavaScript Object that can contain the following properties.

Property	Description
`x`	Specifies the x-coordinate of the starting point of the text.
`y`	Specifies the y-coordinate of the starting point of the text.
`font_family`	Defines the font family of the text, defaulting to "Helvetica, Segoe UI Emoji" if not provided.
`font_size`	Sets the font size of the text, defaulting to "12px" if not provided.
`font_weight`	Sets the font weight of the text, defaulting to "normal" (normal, bold, bolder, lighter).
`fill_color`	Sets the fill color of the text, defaulting to "#000000" if not provided.
`text_value`	Contains the actual text value to be displayed.
`text_decoration`	Sets the text decoration, defaulting to "none" (underline, line-through).
`text_anchor`	The text anchor position. Default `start`.
`opacity`	Set the text opacity.
`direction`	The text direction. Default `ltr`.
`transform`	Transform string. See SVG docs

Helper Functions#

The following helper functions have been made available in the UI.js to make the input form easier to modify.

Function	Description
`SKYCIV_DESIGN.ui.helpers.setInputValue(key, value)`	Sets the value of a input.
`SKYCIV_DESIGN.ui.helpers.setInputValues(obj)`	Takes an object of key-values to set.
`SKYCIV_DESIGN.ui.helpers.setInputDisabled(key)`	Sets an input to disabled.
`SKYCIV_DESIGN.ui.helpers.setInputEnabled(key)`	Enables a disabled input.
`SKYCIV_DESIGN.ui.helpers.updateDropdownValues(key, new_values)`	Enables a disabled input.
`SKYCIV_DESIGN.ui.helpers.setDropdownValueDisabled(key, value)`	Disables a dropdown value.
`SKYCIV_DESIGN.ui.helpers.setDropdownValueEnabled(key, value)`	Enables a dropdown value.
`SKYCIV_DESIGN.ui.helpers.setDropdownValueHidden(key, value)`	Hides a dropdown value.
`SKYCIV_DESIGN.ui.helpers.setDropdownValueVisible(key, value)`	Shows a dropdown value.
`SKYCIV_DESIGN.ui.helpers.getKeysChanged()`	Gets a list of keys changed since last ui update.
`SKYCIV_DESIGN.ui.helpers.wasInputChanged(key)`	Checks if an input keys was changed.
`SKYCIV_DESIGN.ui.helpers.requireJSON(name, callback)`	Require a .json file from the `/json` directory. Callback is optional.
`SKYCIV_DESIGN.ui.helpers.getSection(selections, unit_system, callback)`	Get a sections data from the database.
`SKYCIV_DESIGN.ui.helpers.getMaterial(selections, callback)`	Get a materials data from the database.

Tips#

tip

You can set the window.SKIP_UI_UPDATE to true avoid the ui.js script running in a loop when you update a dropdown in the ui.js. ::

Template
Getting input in the ui.js
- SKYCIV_DESIGN.generateInput(convert_to_base_unit_system)
Structuring graphics to work with both unit systems
Packages
- SVG Section Dimensions
- SVGCreator
Helper Functions
Tips