Simulink Simulation Web App

This example shows how to create a web app containing a Simulink^® simulation and host it on the MATLAB^® Web App Server™. The example uses the mass spring damper model in Simulink and a MATLAB app that invokes the model as a basis for the web app. The APIs for creating a simulation can be found in the Simulink Compiler™ product. In the workflow, you:

• Package the MATLAB app containing Simulink simulation using the Web App Compiler app in MATLAB Compiler. This step creates a web app archive (.ctf) file.

• Deploy the web app archive (.ctf) file to the MATLAB Web App Server.

• Run the web app from the web apps home page.

Prerequisites

Note

This example requires the Simulink Compiler product. For details, see Simulink Compiler Workflow Overview (Simulink Compiler).

1. Install the MATLAB Web App Server product and set up the server.

   • For more information on installing the product, see Install or Uninstall MATLAB Web App Server Product.

   • For more information on setting up the server, see Set Up MATLAB Web App Server.

2. Copy the Simulink model file MassSpringDamperModel.slx and the corresponding MATLAB app MassSpringDamperApp.mlapp to your current working directory. The default location for the files is:

   Operating System	Default Location for Files
   Windows®	C:\Program Files\MATLAB\R2020b\examples\simulinkcompiler\main\
   Linux®	/usr/local/MATLAB/R2020b/examples/simulinkcompiler/main
   macOS	/Applications/MATLAB/R2020b.app/examples/simulinkcompiler/main

3. Open the MassSpringDamperApp.mlapp in MATLAB App Designer and switch to Code View. Verify that the Simulink Compiler APIs to create a simulation are present in the SimulateButtonPushed callback.

Package and Create Web App

1. Start MATLAB.

2. Type webAppCompiler at the MATLAB command line to open the Web App Compiler app.

3. In the MAIN FILE section of the toolstrip, click the button to add the MassSpringDamperApp.mlapp file to the project. The Web App Compiler automatically resizes to include an App details section that contains information about the app such as app name, author, summary, description, and version. You can edit information about the app in App Designer by clicking Edit App Details. Click Refresh to update Web App Compiler with any changes you have made.

   • (Optional) Make sure to use a display name that is easy to distinguish when your web app is deployed to the server.

   • (Optional) Provide a version number for tracking purposes. The version number is visible on the web apps home page.

   • (Optional) Add a description for your web app in the Summary field. This description is visible on the web apps home page.

4. In the Archive information section, specify the archive name as mySimulinkSimulationWebApp.

5. Click Package to package the app, and create a web app archive (.ctf file).

   In the Save Project dialog box that opens, specify a project name and a location where you want to save the web app project. Web App Compiler saves your project and opens a Package dialog box.

6. Once packaging is complete, in the Package dialog box, click Open output folder. This opens the project folder, which contains the following files:

   • mySimulinkSimulationWebApp.ctf

   • mccExcludedFiles.log

   • PackagingLog.html

   • requiredMCRProducts.txt

   You can view the log file, PackagingLog.html, to see the exact mcc syntax used to package and create the web app archive.

Deploy Web App

1. Navigate to the project folder generated by Web App Compiler during the packaging process.

2. Copy the web app archive file mySimulinkSimulationWebApp.ctf to the app folder configured by the server. The default location is:

   Operating System	Apps Folder Location
   Windows	%ProgramData%\MathWorks\webapps\R2020b\apps
   Linux	/local/MathWorks/webapps/R2020b/apps
   macOS	/Library/Application Support/MathWorks/webapps/R2020b/apps

   You can also get the location of the apps folder by executing webapps-status at the system command shell.

3. Open a web browser and navigate to the web apps home page using the URL obtained from executing the webapps-status command. You see a tile displaying the simple mortgage calculator web app. Your web app is now deployed.

Run Web App

1. To run a web app, click the mySimulinkSimulationWebApp tile on the web apps home page.

   The web app opens in a new tab.

2. Click the Simulate button to run the simulation.

   You have successfully created, deployed, and run a web app.

Related Topics

• Create Web App
• Deploy Web App
• Run Web App
• Simple Mortgage Calculator Web App