Main Content

Generate and Deploy a MATLAB App with SimAppTemplate for a Model

Open Live Script

This example shows you how to use the simulink.compiler.genapp function to generate a MATLAB® app for a model, that is deployable. Typically when a Simulink® model is functionally complete, it is often used to run multiple simulations different input and parameter values. To try simulations for your model with different input and parameter values, you can generate a MATLAB App. You can also deploy this generated app for use outside of MATLAB.

This example illustrates the use of simulink.compiler.genapp function to generate a starter app for the model f14, using the generated app to tune the parameters of the model and simulate it, and customizing the app in the MATLAB App Designer.

Open the Model

The simulink.compiler.example.AppGeneration command loads the example project on your path. This project contains all the files required for this example including the model. Open the model f14.

simulink.compiler.example.AppGeneration;
open_system('f14')

Generate a MATLAB App for the Model

Use the simulink.compiler.genapp function to generate an app for the f14 model. Running the simulink.compiler.genapp function with the model name as an argument generates an App named f14app. Simulink Compiler™ uses a default template to generate the app. The generated app provides an ability to tune the parameters and simulate the model for which the app is generated. The generated app also provides the plot of the simulation results. All the files are generated into the f14app directory.

To generate the app, the SaveFormat for the output data must be Dataset or Structure with time. To change SaveFormat for the f14 model, in the Modelling tab of the Simulink Toolstrip, go to Model Settings. In the Data Import/Export pane, change Format to Dataset.

simulink.compiler.genapp('f14', 'AppName', 'f14app','Template', 'SimAppTemplate');

After generating the app, click Simulate to simulate the app.

Along with the app, the following artifacts are generated :

  • f14app.mlapp file -- This file contains the code for the generated app. Open this file in App Designer for editing.

  • Files starting with the default prefix -- Functions returning default values used by the app such as, model name, model image aspect ratio, model image file, and input MAT-file name.

  • Model Image, ( f14app_image.svg ) -- Image of the Simulink Model.

  • Inputs used in the simulation ( f14app_inputs.mat ) -- MAT file containing all the inputs that are used in the simulation of the model.

  • App labels file setLabels.m -- File specifying label contents.

  • Default Simulink logo ( SimulinkLogo.png ) -- File used as a placeholder for the model image.

  • pragma.m directives file -- File used by Simulink Compiler to generate the deployable app.

  • Set of MATLAB functions as M-files -- Files that the app uses to control user interface of the app.

Compile and Deploy the Generated App

You can use the MATLAB App Designer to compile and deploy the app. You can also use deploytool. For more information on compiling and deploying with App Designer, see Develop Apps Using App Designer, Web Apps and Application Compiler.

In this example, we compile the app, with the mcc command followed by the app name. 

mcc -m f14app

Customize the Generated App

You can also customize the generated app. To customize the app, use the App designer. The generated app f14 is generic, but it allows you to easily customize it in the App Designer. In this section, we are going to replace the one axis in the generated app with two axes. Open the generated app in the app designer.

appdesigner('f14app');

The idea of customization is to replace the Axes component with two Axes components. To get two Axes components, use a grid with two rows and one column and placing the two components in the grid cells (the customized app, f14customapp is included as a part of this example project file for your reference). You can follow:

  1. In Design View, select and delete the default Axes component.

  2. Go to Component Library on the left side of the window. From the Component Library, drag and drop a Grid Layout component under the Containers section in place of the removed Axes component. In Component Browser on the right, on the Inspection tab under the Grid Layout, update ColumnWidth and RowHeight properties to '1x' and '1x,1x', respectively. This updates the grid to have two vertical cells. Drag two Axes components from the Common section in Component Library and place them in the two grid cells.

  3. The external input references to UIAxes (the original Axes component) have to be updated to UIAxes2. If you added the top Axes first, UIAxes refers to Logged Signals and UIAxes2 to External Inputs. You can check by switching to Design View and verifying which Axes gets the focus when the component is selected in Component Browser.

  4. Now find and replace these occurrences in the Code View. Using the Find & Replace dialog, replace UIAxes with UIAxes2 or additions. Once you complete the replacements, add the following line code to the cbkSimulate(app, event) function. After the line for UIAxes: app.SimulationHelper.UserInterface.clearGridAndLegend(app.UIAxes2).

  5. Save the app.

Use the Modified App to Simulate the Model

Now that you have modified the app to show two axes, you can use that app to simulate the model. You can then compile and deploy the app. To simulate the app, click Load Input MAT-file and choose the externalInputs.mat file to attach an external input signal to Inport 1 of the f14 model. This activates the External Input drop down and displays the loaded signal, Signal.RandomStickPosition in the list box under the drop down. Select the loaded signal to display in the bottom Axes component. Click Simulate. After the simulation completes, the two Axes components update. You can observe the effect of the loaded input signal on the logged signals in the top Axes.