
Once you’ve completed this section, you’ll have a fully functioning truss analysis calculator. In this lecture, we start by establishing the user input fields.

Since we’re working from a pre-existing script, we have a pretty good idea of what the required inputs are. But if you’re designing an app from the ground up, you should give serious thought to what info you need from your users and how they should interact with your UI.

The overall user experience (UX) of your app can usually be massively improved by carefully thinking through your user’s workflow at this stage!

## 4.1 Simple user inputs

We’ll start with the most basic of user inputs - a `NumberField`. We’ll use this to collect a value for Young’s modulus $(E)$, the element cross-sectional area $(A)$ and a scale factor $(xFac)$, to apply to the deflected shape.

First, we need to import the required components at the top of `app.py`. We’ll import a `NumberField` and a `LineBreak` component so we can have our input boxes appear on separate lines.

Note that I’m only showing the new imports in the code block below; `NumberField` and `LineBreak` are actually added onto our existing list of imports from `viktor.parametrization` - recall that we’ve already imported `Tab`, `Text`, and `Section`.

```python
from viktor.parametrization import ViktorParametrization, NumberField, LineBreak
```

Then, within the first section of our _Data Input_ tab, we’ll add an instance of the `NumberField` to collect the Young’s modulus value.

<Callout type="info" heading="Researching components">
	If you’re not sure what arguments any of these VIKTOR components take, just
	refer to the relevant docs - for example, you can read about the different
	flavours of `NumberField`
	[here](https://docs.viktor.ai/docs/create-apps/user-input/numeric-input/?prt=sean),
	or check out the SDK reference
	[here](https://docs.viktor.ai/sdk/api/parametrization/#NumberField). The same
	can be done for all components.
</Callout>

In our case, we’ll specify a text label, minimum value and default value for the input and, most importantly, assign the variable name `E` so we can access the user-defined value elsewhere…

```python
tab_2.section_1.E = NumberField("Young's Modulus (GPa)", min=0, default=200)
```

We’ll do the same for $A$ and add some `LineBreak()` components as mentioned above. For our deflection scale factor, instead of a single number, we’ll allow the user to specify a value between $1$ and $10,000$ by using a slider. This can be achieved with a `NumberField` simply by specifying `variant='slider'` in the argument list.

When we bring all of this together, the code defining this section of the _Data Input_ tab inside of the `Parametrization()` class should look like this…

#### `app.py`

```python
tab_2 = Tab('Data Input')

#...
#...
#...

# User-defined constants
tab_2.section_1 = Section('Define Analysis Constants')
tab_2.section_1.info = Text(info_constants)
tab_2.section_1.E = NumberField("Young's Modulus (GPa)", min=0, default=200)
tab_2.section_1.lb = LineBreak()
tab_2.section_1.A = NumberField('Cross-sectional Area (m^2)', min=0, default=0.005)
tab_2.section_1.lb1 = LineBreak()
tab_2.section_1.xFac = NumberField('Deflection scale slider', variant='slider', min=1, max=10000, default=500)

#...
#...
#...
```

Note that I’ve also replaced the “Hello World” text in our `Text` component with a string called `info_constants`, stored in our `text.py` file.

#### `text.py`

```
info_constants= """
## Analysis Constants
Here we define the constants used in our analysis:
- Young's Modulus $(GPa)$
- Cross-sectional area of our bar elements $(m^2)$

We could easily adapt this to provide values on a member-by-member basis by, for example, uploading a csv file (as you'll see below), but a single value for each will be sufficient for now.
"""
```

If you run the app now and take a look at your UI, you should see your newly-defined user-input fields, Fig 1.

<Image
	src="/images/courses/using-viktor-to-build-a-shareable-truss-calculator-app/setting-up-input-parameters/img1.png"
	alt="NumberField inputs in the Data Input section of our UI. | EngineeringSkills.com"
	width="1200"
	height="659"
	caption="Fig 1. NumberField inputs in the Data Input section of our UI."
/>

## 4.2 Downloading a demo geometry file

Let’s now turn our attention to implementing a button that will allow the user to download a csv file containing demo geometry data. At a high level, this is how it will work:

- We’ll import a `DownloadButton()` component and add it to our `Parametrization()` class. In the argument list of `DownloadButton()`, we’ll specify a function (method) to execute when the button is clicked.
- The function triggered by clicking the Download button will be defined in the `Controller()` class of `app.py`. We’ll call this function `download_demo_file()` This is where the actual code required to generate the download is called.
- Now, because we’re compartmentalising our code and all of our data input/output code lives in the `dataIO.py` file, `download_demo_file()` will actually call a helper function called `exportDemo()` inside the `dataIO.py` file. This last step is completely optional and only arises because I’ve tried to break the code up into different files - this is just my personal preference.

This may sound quite complicated on first reading, but it’s relatively straightforward and a pattern we’ll repeat.

<Callout type="success" heading="📂 Demo geometry file">
	To get the demo file to work with in your own project, just download it from
	the [completed version of the
	app](https://cloud.viktor.ai/embed/perform-2d-elastic-truss-analysis-powered-by-openseespy/?prt=sean)
	linked to this project. The file is called `demo-geometry.csv`. Then drag it
	into your file directory in your Codespace.
</Callout>

After importing `DownloadButton()` at the top of `app.py`…

#### `app.py`

```python
from viktor.parametrization import DownloadButton
```

…add it to your `Parametrization()` class (along with some helper text, stored in `text.py`),

#### `app.py`

```python
# Geometry
tab_2.section_2 = Section('Define Structure Geometry')
tab_2.section_2.info1 = Text(info_geometry1)
tab_2.section_2.download_demo = DownloadButton('Download Demo Geometry', method='download_demo_file') # Demo file download
```

For reference, here’s `info_geometry1` in `text.py`,

#### `text.py`

```python
info_geometry1="""
## Structure Geometry
Now we upload a csv file containing the nodal positions and member definitions for the truss.

You can download a demo geometry file below. *Modify as needed for your own structure.*
"""
```

Notice the method specified, `method='download_demo_file'`. We define this function inside of `Controller()` as follows:

#### `app.py`

```python
class Controller(ViktorController):
	label = 'OpenSeesPy 2D Truss Analysis - EngineeringSkills.com'
	parametrization = Parametrization

	#Demo geometry file download
	def download_demo_file(self, params, **kwargs):
		file = exportDemo()
		return DownloadResult(file_content=file, file_name='demo-geometry.csv')
```

There are two things of note happening here; first, we’ve used another component, `DownloadResult()`, in which we’ve specified the file that will be downloaded and the name that will be given to that file during the download operation. `DownloadResult(file_content=file, file_name='demo-geometry.csv)`. This requires us to import `DownloadResult()` at the top as follows,

#### `app.py`

```python
from viktor.result import DownloadResult
```

The second thing to notice is that the file contents are actually generated from whatever is being returned from the helper function `exportDemo()` that we defined in the previous lecture. Next, we need to complete this function in `dataIO.py`.

#### `dataIO.py`

```python
#Compile demo geometry file for export
def exportDemo():
	file_path = os.path.join(os.path.dirname(__file__), 'demo-geometry.csv')

	with open(file_path, 'rb') as file:
		file_contents = file.read()
		demo = io.BytesIO(file_contents)

	demo.seek(0) # Reset the pointer to the beginning of the BytesIO object
	return demo
```

In this function, we’re reading the contents of the `demo-geometry.csv` file we uploaded to our working directory earlier. We’re converting the contents to a `BytesIO` object and returning it from the bottom of the function.

The `DownloadResult()` component, back over in `app.py`, expects to be passed a `BytesIO` object so that it can generate the downloadable csv file in the user’s browser.

## 4.3 File upload

The next thing the user will probably want to do is upload their own geometry file - so we’ll implement this next. The good news is that this is much more straightforward than what we just implemented!

We simply import a `FileField()` component,

#### `app.py`

```python
from viktor.parametrization import FileField
```

And then add it to our `Parametrization()` class as usual (along with some helper text).

#### `app.py`

```python
tab_2.section_2.info2 = Text(info_geometry2)
tab_2.section_2.info3 = Text(info_geometry3)
tab_2.section_2.geometry_file = FileField('Upload CSV')
```

Note that we’ve assigned the uploaded file the variable name `geometry_file` - this is how we access it later when we need to parse its contents. Again, for reference, here is the helper text I’ve added from `text.py`.

#### `text.py`

```python
info_geometry2="""
#### CSV file format
The data in geometry csv file is structured as follows:

NODES,
0,6
4,6
8,6
...
MEMBERS,
1,2
2,3
3,4
...

Nodes are defined by their **x** and **y** position and numbered sequentially. The members are defined by the **node numbers** at either end.
"""

info_geometry3="""
### Upload Geometry File
"""
```

You should now have a fully functioning demo file download and upload functionality in the _”Define Structure Geometry”_ section of your _”Data Input”_ tab, Fig 2. Reload your app front-end and see for yourself.

<Image
	src="/images/courses/using-viktor-to-build-a-shareable-truss-calculator-app/setting-up-input-parameters/img2.png"
	alt="Demo file download and geometry file upload functionality added to UI. | EngineeringSkills.com"
	width="1200"
	height="955"
	caption="Fig 2. Demo file download and geometry file upload functionality added to the UI."
/>

## 4.4 Tabular user input data

The last thing we’ll implement is the ability for our users to specify support and loading information using tables. We deal with support/restraint definition first. Our tables will make use of:

- the `Table()` component,
- the `IntegerField()` for specifying integer node numbers
- the `OptionField()` for specifying restraint type

These are imported as follows,

#### `app.py`

```python
from viktor.parametrization import IntegerField, OptionField, Table
```

We add them to `section_3` in `tab_2` of the `Parametrization()` class as follows,

#### `app.py`

```python
# Table to define restraints
tab_2.section_3 = Section('Define Restraints')
tab_2.section_3.info = Text(info_restraints)
tab_2.section_3.table_restraints = Table('Restraint Definition')
tab_2.section_3.table_restraints.col_1 = IntegerField('Node number')
tab_2.section_3.table_restraints.col_2 = OptionField('Restraint Type', options=['Pin', 'X-Roller', 'Y-Roller'])
```

Note that we’re specifying the available support options in the arguments list of the `OptionField()` component. The `info_restraints` text is as follows,

#### `text.py`

```python
info_restraints="""
## Structure Restraints
Next, we'll define the restraints. This will give us a good opportunity to demonstrate how to accept and process tabular data.

At any node (identified by its node number), we can specify:
- A pin support which provides translational restraint in the x nnd y direction
- A horizontal roller which provides translational restraint in the y direction only
- A vertical roller which provides translational restraint in the x direction only
"""
```

We now have a table where we can specify a node number and a restraint type that we want to be applied to that node.

<Image
	src="/images/courses/using-viktor-to-build-a-shareable-truss-calculator-app/setting-up-input-parameters/img3.png"
	alt="Restraint definition table. | EngineeringSkills.com"
	width="1200"
	height="658"
	caption="Fig 3. Restraint definition table."
/>

For now, these are just stored as string values, e.g. `X-Roller`, associated with integers representing node numbers. Before we use this information in our analysis, we’ll need to convert it into a format our analysis script understands. We’ll handle this a little later.

Finally, we’ll repeat the table definition process for our load definition table. This time, the table has three columns instead of two, but the process is pretty much identical. We’re adding the table to `section_4` of `tab_2`.

#### `app.py`

```python
# Table to nodal loads
tab_2.section_4 = Section('Define Applied Loads')
tab_2.section_4.info = Text(info_loads)
tab_2.section_4.table_loads = Table('Load Definition')
tab_2.section_4.table_loads.col_1 = IntegerField('Node number')
tab_2.section_4.table_loads.col_2 = NumberField('Fx (N)')
tab_2.section_4.table_loads.col_3 = NumberField('Fy (N)')
```

The associated text is,

#### `text.py`

```python
info_loads="""
## Applied Loads
Finally, we define any nodal loads applied to the structure. Again, we accept user input in a tabular format here. We could just as easily accept a csv file, in fact, we could combine all structure and loading information into a single cvs file upload if we wanted.

At any node (again identified by its node number), we can specify:
- A horizontal force magnitude, $F_x (N)$
- A vertical force magnitude, $F_y (N)$
"""
```

The resulting load definition table can now be seen, Fig 4.

<Image
	src="/images/courses/using-viktor-to-build-a-shareable-truss-calculator-app/setting-up-input-parameters/img4.png"
	alt="Load definition table. | EngineeringSkills.com"
	width="1200"
	height="675"
	caption="Fig 4. Load definition table."
/>

This completes our input data definition. We’ve seen how to handle simple parameter definitions in the form of single values and structured data in the form of tables. And we’ve also covered how to handle file import and export.

With these under your belt, you can do quite a lot, but there are many other options available with VIKTOR’s library of built-in components. Browse through the options yourself and see what works best for your application. The process of implementing them all, more or less, follows what you’ve seen above.

In the next lecture, we'll parse the user-defined data and prepare it to be used in our analysis script.


Please log in to continue