Equation Widget

The equation widget is used for doing engineering calculations. It’s the primary calculation engine in Calcs.com templates.

UI Experience

Not interactive for the user
Displays the equation used for the calculation
Shows the calculated value to the user

Data Organization and Manipulation

Primary widget for:

Mathematical calculations and algebraic expressions
Conditional statements and checks
Iterations and matrix/vector manipulation

Watch tutorials:

Equation Structure

Single Equation

{
  "type": "computed",
  "label": "Area",
  "symbol": "A",
  "units": "mm^2",
  "equation": [
    {
      "result": "width * height",
      "condition": "@default"
    }
  ],
  "referenceId": "area"
}

Multiple Conditional Equations

{
  "type": "computed",
  "label": "Capacity Factor",
  "symbol": "φ",
  "equation": [
    {
      "result": "0.9",
      "condition": "loadType == 'tension'"
    },
    {
      "result": "0.85",
      "condition": "loadType == 'compression'"
    },
    {
      "result": "0.75",
      "condition": "@default"
    }
  ],
  "referenceId": "phi"
}

Using @ Shortcuts

Simplify equation building by using ”@” to reference other widgets:

{
  "equation": [
    {
      "result": "@width * @height",
      "condition": "@default"
    }
  ]
}

The ”@” symbol searches by label, symbol, and reference ID, automatically inserting the correct references.

Watch tutorial: Using @ in equations

Error Handling

ThrowError vs Throw

throwError: Displays a specific message to the user
throw: Shows generic “Unexpected Error” message

{
  "equation": [
    {
      "result": "width / height",
      "condition": "height != 0"
    },
    {
      "result": "throwError('Height cannot be zero')",
      "condition": "@default"
    }
  ]
}

For exporting data to Member Schedule:

{
  "type": "computed",
  "label": "Members Export",
  "export": true,
  "hidden": true,
  "equation": [
    {
      "condition": "@default",
      "result": "[
        { 
          id: 'member',
          designation: designation,
          length: L,
          lengthUnit: 'm',
          nCom: N_compression,
          comments: 'Main beam'
        }
      ]"
    }
  ],
  "referenceId": "members"
}

Advanced Features

Matrix Operations

{
  "result": "[[1,2,3], [4,5,6]] * transpose([[7], [8], [9]])"
}

Iterations

{
  "result": "sum(iterate(1, 10, 1, i^2, i))"
}

Unit Conversions

{
  "result": "convert(length, 'mm', 'm')"
}

Conditional Logic

Using @default

The @default condition acts as an “else” statement:

{
  "equation": [
    {
      "result": "value1",
      "condition": "type == 'A'"
    },
    {
      "result": "value2",
      "condition": "type == 'B'"
    },
    {
      "result": "value3",
      "condition": "@default"
    }
  ]
}

Watch tutorial: Using @default

Best Practices

Use meaningful variable names
Add comments in authorNotes for complex calculations
Include proper error handling
Reference relevant standards in the references field
Use @default for catch-all conditions
Test edge cases thoroughly

Common Patterns

Safety Factor Application

{
  "result": "phi * capacity",
  "condition": "@default"
}

Min/Max Selection

{
  "result": "min(value1, value2, value3)",
  "condition": "@default"
}

Rounding

{
  "result": "round(value, 2)",
  "condition": "@default"
}

Examples from Current Calculators

ReferenceId	Calculator
`s_t-`	EU Steel Column

Guides

Analysis Calculators

Design Calculators

Calcs Builder

Widget Core Function

UI Experience

Data Organization and Manipulation

Equation Structure

Single Equation

Multiple Conditional Equations

Using @ Shortcuts

Error Handling

ThrowError vs Throw

Special “members” Equation Widget

Advanced Features

Matrix Operations

Iterations

Unit Conversions

Conditional Logic

Using @default

Best Practices

Common Patterns

Safety Factor Application

Min/Max Selection

Rounding

Examples from Current Calculators

​Widget Core Function

​UI Experience

​Data Organization and Manipulation

​Equation Structure

​Single Equation

​Multiple Conditional Equations

​Using @ Shortcuts

​Error Handling

​ThrowError vs Throw

​Special “members” Equation Widget

​Advanced Features

​Matrix Operations

​Iterations

​Unit Conversions

​Conditional Logic

​Using @default

​Best Practices

​Common Patterns

​Safety Factor Application

​Min/Max Selection

​Rounding

​Examples from Current Calculators

Widget Core Function

UI Experience

Data Organization and Manipulation

Equation Structure

Single Equation

Multiple Conditional Equations

Using @ Shortcuts

Error Handling

ThrowError vs Throw

Special “members” Equation Widget

Advanced Features

Matrix Operations

Iterations

Unit Conversions

Conditional Logic

Using @default

Best Practices

Common Patterns

Safety Factor Application

Min/Max Selection

Rounding

Examples from Current Calculators