ES2D7 System and Software Engineering

Principles - Creating Apps

Dr Thomas Popham
February 7, 2021

1
 ES2D7 - Creating Apps

1 Introduction
The objective of these activities is to create a Matlab app and understand
how this is implemented using a class.

2 Using Matlab class when designing an app

Classes are heavily used when developing apps / user interfaces (see Figure
2). Each item that is seen by the user is a property of the class. Each action
that the user can undertake with the app (e.g. press a button or change
slider) is encoded as a method - see Figure 3. To have a go at creating an
app, go to the ‘Home’ tab and click on the ‘New’, then select ‘App’ (see
Figure 1).

If you have Matlab 2019 (or later) then select ‘Interactive tutorial’ and
follow the instructions and run the app. Otherwise please see the video on
moodle which shows you how to construct an app.

Once you have run the app, take a look at the code and try to understand
how it has been implemented as a class.

Figure 1:

Page 2
 ES2D7 - Creating Apps

Figure 2:

Figure 3:

Learning Problem 1: Drawing SysML block diagram for the tuto-

rialapp

• Draw a SysML block diagram (or UML class diagram) for the tutorial
app.

Page 3
 ES2D7 - Creating Apps

Figure 4:

Page 4
 ES2D7 - Creating Apps

Learning Problem 2: Create an app that plots polynomial of user

choice

• The user should be able to enter the order t of the polynomial

• When the user clicks a draw button, the graph y = xt shall be drawn

• For plotting, use x values from -3 to +3

• See Figure 4 for an example of how the app should look

Some hints:

• When plotting to a figure on the app, you need to tell the plot com-
mand which axis should be plotted to. Instead of plot(t,sin(t)),
you need to use: plot(app.UIAxes, t, sin(t)), where app.UIAxes
is the name of the axis.

• When accessing properties of a normal class, we used obj.property =

..., however in the app, you need to use app.property = ....

Page 5
 ES2D7 - Creating Apps

Learning Problem 3: Create an app that simulates a mass-spring-

damper system

• The input to the system is the force f (t) and the output of the system
is the displacement of the mass x(t) in metres.

• Upon request, the user should be able to see a step response displayed
within the app.

• The user should be able to enter the following parameters into the App:

– Mass in kg
– Spring Constant in N m-1
– Damper co-efficient N s m-1
– Height of step input in N.

• To create a transfer function, you will need to use: sys = tf(...)

(look back at ES197 labsheets)

Page 6