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. Variable decleration with const and let can happen at a function level.

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.

SVG Creator Package#

See the SVG Creator Documentation.

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.getCurrentInputValue(key)`	Get the current input value.
`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.isInputDisabled(key)`	Check if an input is disabled.
`SKYCIV_DESIGN.ui.helpers.hideInput(key)`	Hides an input.
`SKYCIV_DESIGN.ui.helpers.showInput(key)`	Shows an input.
`SKYCIV_DESIGN.ui.helpers.isInputVisible(key)`	Check if an input is hidden.
`SKYCIV_DESIGN.ui.helpers.isInputErrored(key)`	Check if an input is currently errored.
`SKYCIV_DESIGN.ui.helpers.updateImage(key, img_url)`	Updates and image so lonng as it is hosted in the images folder.
`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.updateMin(key, value, update)`	Update the min for the input, if `update = true` makes sure the current value is at least the min.
`SKYCIV_DESIGN.ui.helpers.updateMax(key, value, update)`	Update the max for the input, if `update = true` makes sure the current value is at worst the max.
`SKYCIV_DESIGN.ui.helpers.hideHeading(key)`	Hides a heading.
`SKYCIV_DESIGN.ui.helpers.showHeading(key)`	Shows a heading.
`SKYCIV_DESIGN.ui.helpers.updateLabel(key, label_text, preserve_popup)`	Updates a label in the ui only. `preserve_popup` is defulated to true.
`SKYCIV_DESIGN.ui.helpers.returnLabelToDefault(key)`	Returns label to the default in the config.json.
`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.
`SKYCIV_DESIGN.ui.helpers.getSectionTree(filters, callback)`	Get the section tree from the database.
`SKYCIV_DESIGN.ui.helpers.getMaterialTree(filters, callback)`	Get the material tree from the database.

Example getSectionTree and getMaterialTree#

// Full Material Tree
SKYCIV_DESIGN.ui.helpers.getMaterialTree({}, function(data) {
    console.log(data);
});

// Filtered Material Tree
SKYCIV_DESIGN.ui.helpers.getMaterialTree({ units: "Metric", material: "Aluminium" }, function(data) {
    console.log(data);
});

// Full Section Tree
SKYCIV_DESIGN.ui.helpers.getSectionTree({}, function(data) {
    console.log(data);
});

// Filtered Section Tree
SKYCIV_DESIGN.ui.helpers.getSectionTree({ country: "American", library: "ADM", shape: "Zees" }, function(data) {
    console.log(data);
});

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. ::