
What our app really needs now is some plots to help the user get a better feel for the structure and how it responds to the specified loads. In this lecture, we’re going to generate three plots:

- a plot showing the structure that will appear as soon as the geometry csv file is uploaded
- an axial force diagram indicating tension and compression members that will appear as soon as the structure and its restraints are defined
- a deflected shape diagram that will also appear once the geometry and restraints are defined by the user

We’ll use `matplotlib` to generate our plots. All of the plotting code has been covered in the original tutorial so I won’t go over that in detail here. In this lecture, we want to focus on how we make these plots appear and update within our app.

## 7.1 Visualising the structure

We start by defining an `ImageView()` decorator to a function we’ll call `createStructurePlot()`, located in the `Controller()` class. We’ll also need to import `ImageView()` and an `ImageResult()` component into `app.py`.

#### `app.py`

```python
from viktor.views import ImageResult, ImageView
```

We only want to try and plot the structure if a geometry file has been uploaded, so we’ll add a check to make sure we don’t try to generate the plot if no geometry is available.

In the event that a geometry file hasn’t yet been uploaded we’ll get the `ImageResult()` to return a placeholder image, since the `ImageView()` needs to return an image - otherwise it will throw an error.

I’ll use a version of the EngineeringSkills logo as my placeholder image - you can use anything you like but a company logo is always a good option.

We’ll create an `assets` folder in our working directory and add the placeholder image to it.

<Callout type="warning" heading="Assets and the viktor.config file">

If you want to use static assets on your app, like images, you will need tp update the `viktor.config.toml` file in your working directory to point to the location of your assets.

This is what the file should look like after being updated - note the `asset_path` has been updated to point to the new `assets` folder.

#### `viktor.config.toml`

```python
# For all available configuration settings, please go to:
#   https://docs.viktor.ai/docs/create-apps/references/viktor-config-toml

app_type = 'editor'
assets_path = 'assets'
# packages = []
python_version = '3.10'  # '3.9' | '3.10' | '3.11' | '3.12'
# welcome_text = 'welcome.md'
# registered_name = 'app-name'
```

</Callout>

We’ll need to construct the path to the assets folder, so import `Path` from `pathlib` at the top of `app.py`,

Now our `ImageView()` function should look like this,

#### `app.py`

```python
@ImageView("Structure", duration_guess=1)
def createStructurePlot(self, params, **kwargs):
	#Only plot structure if geometry uploaded
	if params.tab_2.section_2.geometry_file:
		nodes, members = processGeometryFile(params.tab_2.section_2.geometry_file)
		svg_data = plotStructure(nodes, members)
		return ImageResult(svg_data)
	#Else plot placeholder image
	else:
		image_path = Path(__file__).parent /'assets' / 'es.png'
		return ImageResult.from_path(image_path)
```

<Callout type="warning" heading="Stateless development">
One thing you might find odd is that in the above function, we’re calling `processGeometryFile()` again - when we already called this in our `createResultsData()` function in the previous lecture.

Your programmer’s mind might be shouting at you right now because you’re calling the same function to recalculate something you’ve already calculated! Shouldn’t you just store the data the first time you calculated it so you can reference it in the future? No! not when you’re developing a VIKTOR app.

This is an important paradigm to be aware of - the VIKTOR development workflow is **stateless**. This means that state (the state of the app, i.e. the data in it at some instant in time) is not maintained across functions. So, even though we built a `nodes` and `members` array already in another function, if we need that information in the current function we need to generate it again.

Although it might feel a little counter-intuitive at first - the benefit is that our app’s state (the state of data within the app) is always a function of the most up-to-date user inputs. There is no risk of the internal state of our app going stale or out of date because it’s being recalculated _‘on the fly’_ every time it’s needed.

🔗 You can read more about VIKTOR’s Call Flow [here](https://docs.viktor.ai/docs/create-apps/fundamentals/call-flow/?prt=sean). This will give you a good sense of when your code is executed.

A good rule to keep in mind is that your entire app’s code will be re-executed every time…

- input data is modified,
- a view is refreshed
- a button is clicked.

</Callout>

The other thing to note about the function above is that it’s calling the `plotStructure()` function we defined previously in `visualisation.py`. This function is returning something called `svgData` which is being passed to the `ImageResult()` that gets returned from the function. The `ImageResult()` is what generates the plot in our UI.

Now we can fill in the body of the `createStructurePlot()` function over in `visualisation.py`.

The vast majority of the code contained within `createStructurePlot()` is associated with generating the `matplotlib` figure - as I said, we won’t focus on that here. The code were interested in is the bit at the very end, after `axes.grid()`.

#### `visualisation.py`

```python
def plotStructure(nodes, members):
	fig = plt.figure()
	width = 0.8 # 80% of the figure's width
	height = 0.8 # 80% of the figure's height

	# Calculate 'left' and 'bottom' to center the axes
	left = (1 - width) / 2
	bottom = (1 - height) / 2

	axes = fig.add_axes([left, bottom, width, height])
	fig.gca().set_aspect('equal', adjustable='box')

	for mbr in members:
		node_i = mbr[0] #Node number for node i of this member
		node_j = mbr[1] #Node number for node j of this member

		ix = nodes[node_i-1,0] #x-coord of node i of this member
		iy = nodes[node_i-1,1] #y-coord of node i of this member
		jx = nodes[node_j-1,0] #x-coord of node j of this member
		jy = nodes[node_j-1,1] #y-coord of node j of this member
		axes.plot([ix,jx],[iy,jy],'b') #Member

	#Plot nodes
	for i, n in enumerate(nodes):
		axes.plot([n[0]],[n[1]],'bo', ms=4)
		label = str(i+1) #The node number label string
		offX = (nodes[:, 0].max() - nodes[:, 0].min()) / 70
		offY = (nodes[:, 1].max() - nodes[:, 1].min()) / 70
		axes.text(n[0]+offX, n[1]+offY, label, fontsize=12)

	axes.set_xlabel('Distance (m)')
	axes.set_ylabel('Distance (m)')
	axes.set_title('Structure')
	margin = (nodes[:, 0].max() - nodes[:, 0].min()) / 10
	axes.set_xlim([nodes[:, 0].min() - margin, nodes[:, 0].max() + margin])
	axes.set_ylim([nodes[:, 1].min() - margin, nodes[:, 1].max() + margin])
	axes.grid()

	svg_data = StringIO()
	fig.savefig(svg_data, format='svg')
	plt.close(fig)

	return svg_data
```

The string buffer is used by the `ImageResult()` in our `createStructurePlot()` function to generate the `matplotlib` figure in our UI. This will appear as soon as our geometry file is uploaded.

Try it yourself, refresh your app, upload a geometry file and you should see the structure appear on the right-hand-side of your app, Fig 1.

<Image
	src="/images/courses/using-viktor-to-build-a-shareable-truss-calculator-app/visualising-the-structure-and-its-response/img1.png"
	alt="The structure as defined in the uploaded geometry file. | EngineeringSkills.com"
	width="1200"
	height="705"
	caption="Fig 1. The structure as defined in the uploaded geometry file."
/>

## 7.2 Visualising the axial forces and deflections

To generate the axial force diagram and deflected shape, we'll use exactly the same workflow - obviously, the plotting code will be different, but the VIKTOR side of things will be the same.

For these results visualisations, we’ll implement the same checks we did on our `DataView()` in the previous lecture, i.e. we’ll only try and generate results plots if:

- Some geometry has been uploaded
- At least two supports have been defined
- None of the restraints that have been specified are just empty table rows

Our new `ImageView()` and associated `createResultsPlot()` functions are as follows:

#### `app.py`

```python
@ImageView("Graphical Results", duration_guess=1)
def createResultsPlot(self, params, **kwargs):

	image_path = Path(__file__).parent /'assets' / 'es.png'

	#Only attempt workflow if geometry uploaded and at least two supports defined
	if params.tab_2.section_2.geometry_file and len(params.tab_2.section_3.table_restraints)>1:

		#Make sure there are no 'None' restraint values
		if all(item.col_2 is not None for item in params.tab_2.section_3.table_restraints):
			nodes, members = processGeometryFile(params.tab_2.section_2.geometry_file)
			restraints = computeRestraintArray(params.tab_2.section_3.table_restraints)
			forces = computeForceArray(params.tab_2.section_4.table_loads)
			mbr_disp, mbr_forces, node_disp, reactions = analyseStructure(params.tab_2.section_1.E, params.tab_2.section_1.A, nodes, members, restraints, forces)

			svg_data = plotResponse(nodes, members, mbr_disp, mbr_forces, params.tab_2.section_1.xFac)

			return ImageResult(svg_data)

		#Else plot placeholder image
		else:
			return ImageResult.from_path(image_path)
	#Else plot placeholder image
	else:
		return ImageResult.from_path(image_path)
```

Again note that we’re executing all the functions needed in the chain to produce the results data (remember, stateless code).

This time, we’re calling `plotResponse()` from `visualisation.py`. We’ll take a look at this function next.

#### `visualisation.py`

```python
def plotResponse(nodes, members, nodal_disp, mbr_forces, xFac):
	fig, (ax1, ax2) = plt.subplots(2, 1, sharex='all', figsize=(8, 10))
	fig.subplots_adjust(hspace=0.4)
	ax1.set_aspect('equal', adjustable='box')
	ax2.set_aspect('equal', adjustable='box')

	# Call separate functions for each subplot
	subplotForces(ax1, nodes, members, mbr_forces)
	subplotDeflection(ax2, nodes, members, nodal_disp, xFac)

	svg_data = StringIO()
	fig.savefig(svg_data, format='svg')
	plt.close(fig)

	return svg_data # Make sure to return the SVG data as a string
```

This function is setting up our figure and adding two subplots, one stacked on top of the other. The first one will contain the axial force diagram and the second will contain the deflected shape diagram.

The plotting itself is handed off to two helper functions - provided below for reference…

#### `visualisation.py`

```python
def subplotForces(ax, nodes, members, mbr_forces):
	# Plot tension/compression members
	for n, mbr in enumerate(members):
		node_i = mbr[0]
		node_j = mbr[1]

		ix = nodes[node_i-1,0]
		iy = nodes[node_i-1,1]
		jx = nodes[node_j-1,0]
		jy = nodes[node_j-1,1]

		if(abs(mbr_forces[n]) < 0.001):
			ax.plot([ix,jx],[iy,jy],'grey', linestyle='--') # Zero force in member
		elif(mbr_forces[n] > 0):
			ax.plot([ix,jx],[iy,jy],'b') # Member in tension
		else:
			ax.plot([ix,jx],[iy,jy],'r') # Member in compression

	ax.set_xlabel('Distance (m)')
	ax.set_ylabel('Distance (m)')
	ax.set_title('Tension/compression members')
	ax.grid()
```

#### `visualisation.py`

```python
def subplotDeflection(ax, nodes, members, nodal_disp, xFac):
	# Plot deformed members
	for i, mbr in enumerate(members):
		node_i = int(mbr[0])
		node_j = int(mbr[1])

		ix = nodes[node_i-1,0]
		iy = nodes[node_i-1,1]
		jx = nodes[node_j-1,0]
		jy = nodes[node_j-1,1]

		ax.plot([ix,jx],[iy,jy],'grey', lw=0.75) # Member

		ux_i = nodal_disp[i][0]
		uy_i = nodal_disp[i][1]
		ux_j = nodal_disp[i][2]
		uy_j = nodal_disp[i][3]

		ax.plot([ix + ux_i*xFac, jx + ux_j*xFac], [iy + uy_i*xFac, jy + uy_j*xFac],'r') # Deformed member

	ax.set_xlabel('Distance (m)')
	ax.set_ylabel('Distance (m)')
	ax.set_title('Deflected shape')
	ax.grid()
```

When the plotting is completed, the figure svg data is saved into a `StringIO()` buffer and passed back at the bottom of `plotResponse()` and displayed in the UI just like we did for the previous plot of the structure.

If you now generate a set of results on your app, you should be able to see these new plots. A nice feature of the way VIKTOR’s call stack operates is that we see our results plots update in real time as we add new loads. You can also now use the `xFac` slider to scale the deflected shape plot and see it respond immediately.

<Image
	src="/images/courses/using-viktor-to-build-a-shareable-truss-calculator-app/visualising-the-structure-and-its-response/img2.png"
	alt="UI showing results plots, axial force diagram and deflected shape. | EngineeringSkills.com"
	width="1200"
	height="955"
	caption="Fig 2. UI showing results plots, axial force diagram and deflected shape."
/>

<Callout type="success" heading="Plotting options">
The results visualisations we’ve built here are quite simple. A great exercise for you to complete, now that you understand how to make plots appear in your UI, is to spruce up these visualisations!

Why not add a heatmap that indicates the magnitude of axial force or perhaps add a new visualisation that plots the structure in 3D, allowing you to rotate it - while you’re at it, why not redo this app for [3D spaceframe structures](https://www.engineeringskills.com/course/three-d-truss-analysis-using-the-direct-stiffness-method)?!

Swapping out `matplotlib` for `plotly` would also be a great exercise!

The goal of this project is simply to get you up and running…there are endless possibilities for app development once you’re comfortable with the basics!

</Callout>

In the next lecture, we’ll finish the development of our app by implementing the ability for our user to download a csv file containing their results.

💡 Commit your code!


Please log in to continue