Awatif - Awatif User Interface

Awatif User Interface

Building an interactive web app from scratch is a challenging task. awatif-ui takes care of all the boilerplate and infrastructure, allowing you to focus on the logic of your app. It is based on a simple concept: exposing parameters that you want the user to interact with, and at each parameter change, rerunning the script or algorithm for modeling, analysis, design, and reporting of your structure.

For Structural Engineers

Components for visualizing engineering results & reports.

Open source

Full control of behavior and looks

Extensible

Built on Three.js library for drawing complex geometry

Installation

npm install awatif-ui

Usage

import { Node, Element, AnalysisInput } from "awatif-data-structure";
import { app, Parameters, Model } from "awatif-ui";
import { analyze } from "awatif-fem";

const parameters: Parameters = {
  xPosition: { value: 12, min: 1, max: 20 },
  zPosition: { value: 0, min: 1, max: 10 },
};

function onParameterChange(parameters: Parameters): Model {
  const nodes: Node[] = [
    [5, 0, 0],
    [parameters.xPosition.value, 0, parameters.zPosition.value],
    [5, 0, 8],
  ];
  const elements: Element[] = [
    [0, 1],
    [1, 2],
  ];

  const analysisInputs: AnalysisInputs = {
    materials: new Map(),
    sections: new Map(),
    pointSupports: new Map(),
    pointLoads: new Map(),
  };

  analysisInputs.materials?.set(0, { elasticity: 200 });
  analysisInputs.sections?.set(0, { area: 1.2 });
  analysisInputs.materials?.set(1, { elasticity: 200 });
  analysisInputs.sections?.set(1, { area: 1.2 });
  analysisInputs.pointSupports?.set(0, [true, true, true, true, true, true]);
  analysisInputs.pointSupports?.set(2, [true, true, true, true, true, true]);
  analysisInputs.pointLoads?.set(1, [0, 0, -10, 0, 0, 0]);

  const analysisOutputs = analyze(nodes, elements, analysisInputs);

  return { nodes, elements, analysisInputs, analysisOutputs };
}

app({
  parameters,
  onParameterChange,
});

Examples

When you toggle the bending moment setting located at the top-left corner, you should see this:

API Reference

This library exposes a single function called app, which accepts the following inputs: Parameters, OnParameterChange, and Settings. It then returns a 3D HTML canvas appended to the body element.

This is a list of parameters that your app exposes to end-users. It follows this data structure:

type Parameters = Record<
  string,
  {
    value: number | boolean;
    min?: number;
    max?: number;
    step?: number;
    label?: string;
  }
>

`value`: The initial value of the parameter, which can either be a number or boolean.
`min`: In the case of a number parameter, this is the minimum value.
`max`: In the case of a number parameter, this is the maximum value.
`step`: In the case of a number parameter, this is the step value.
`label`: Optimally defines a different parameter label rather than the parameter key.

Here is where all the magic happens. It is a function that will be triggered as the user changes the parameters. It takes the parameters list as input and returns a new model as output. The model consists of nodes, elements, analysisInputs, and analysis outputs, as described in awatif-data-structure.

function onParameterChange(parameters) {
    // Recompute the model according to the newly changed parameters
    // ...
    return { nodes, elements, analysisInputs, analysisOutputs };
}

A settings object is used to control the user interface.

type Settings = {
  gridSize?: number;
  displayScale?: number;
  nodes?: boolean;
  elements?: boolean;
  nodesIndexes?: boolean;
  elementsIndexes?: boolean;
  orientations?: boolean;
  supports?: boolean;
  loads?: boolean;
  deformedShape?: boolean;
  elementResults?: string;
  nodeResults?: string;
};

`gridSize`: This determines the size of the grid and, consequently, the size of your model. The default value is 25, resulting in a grid size of 25x25 units in length
`displayScale`: Controls the scale of diagrams and labels presented in the viewer
`nodes`: Toggles nodes on and off
`elements`: Toggles elements on and off
`nodesIndexes`: Toggles nodes indexes on and off
`elementsIndexes`: Toggles elements indexes on and off
`orientations`: Toggles orientations on and off, using red, green, and blue for the x-axis, y-axis, and z-axis, respectively
`supports`: Toggles supports indexes on and off
`loads`: Toggles loads indexes on and off
`deformedShape`: Shows the deformed shape after the application of loads
`elementResults`: Switches between analysis results related to elements
`nodeResults`: Switches between analysis results related to nodes

source code