How to Create a Web App from a Simulink Model - MATLAB & Simulink
Video Player is loading.
Current Time 0:00
Duration 4:32
Loaded: 3.64%
Stream Type LIVE
Remaining Time 4:32
 
1x
  • Chapters
  • descriptions off, selected
  • en (Main), selected
    Video length is 4:32

    How to Create a Web App from a Simulink Model

    From the series: “How To” Video Series for Biomedical and Pharmaceutical Applications

    Quickly create interactive apps directly from Simulink® to automatically associate the app with the corresponding model. Use App Designer to lay out your app components, such as simulation controls that allow users to start, pause, and stop simulations. Bind timescopes to the desired model signals to visualize results, and bind app controls to the desired model blocks to allow users to interact with simulation variables, even while the simulation is running. Use Simulink Compiler™ to create standalone desktop apps or browser-based web apps, which can be shared with end users without requiring that they have a Simulink installation or license. Use MATLAB Web App Server™ to allow authenticated users to run your web app simulations directly on a web browser.

    Published: 25 Dec 2024

    Hello, everyone. Paul here from MathWorks. Today, I'm going to show you how you can use Simulink Compiler to quickly create an app from your Simulink model without writing any code, and then share it as a browser-based web app. This allows the end user to run your simulation without requiring a Simulink installation, or license.

    We'll once again be working with the simple bioreactor model we built previously. But I encourage you to consider how these techniques might be applied to your own simulations. If you watch the how-to video on Simulink parameter estimation, you may recall that we calculated the kinetic parameters K1, K2, and K3 as a function of temperature.

    As such, I've updated the simple bioreactor model to set these parameters using a lookup table based on temperature. This model currently uses a constant temperature workspace variable T. But instead, we're going to create an app that allows the user to manually vary the temperature while the simulation is running. To allow the user more time to interact with the simulation, we'll slow it down by enabling simulation pacing. We can then create an app directly from this model via the Simulink Apps tab.

    This will open App Designer, and automatically associate the new app with our model. Although not required, I like to start by adding a grid layout, which makes it easier to manage your app's components, and control app resizing behavior. For example, in this case, we'll create a grid with two columns and three rows. The size of the grids can be specified to fit the components they contain explicitly in pixels, or to dynamically fill the remainder of the app window.

    To allow the user to interactively change the bioreactor temperature, we'll add a slider to one of these grid regions, and then customize the title and set the default value and slider limits. Next, we'll add simulation controls so that the user can start, pause, and stop the simulation. Notice that if desired, our app components can span multiple grid regions. We'll then add a time scope so we can visualize log signals such as the nutrient and biomass in this example, and customize the axis labels and limits as desired.

    The last step is to bind the slider and time scope to the desired blocks, or signals, in our simulation. For example, we'll bind the slider to the temperature block and the time scope to both the nutrient signal and also the biomass signal. We'll then finish customizing our app by updating the legend names, time scope title, and slider title. We're then ready to test out our app. After saving the app, we can see how the grid layout affects how our app responds to resizing. We'll then run our simulation and try changing the temperature while it's running.

    In this case, a single small temperature change doesn't significantly impact the maximum biomass yield, but we'll try again once our app is deployed. Finally, we can deploy our app using the Designer tab to access the Share dropdown menu to package our app as a standalone desktop app, or in this case, a web app.

    This will create a CTF archive, which can then be uploaded to our web app server. MATLAB Web App server allows you to authenticate users, specify their roles, and set policies to control which apps they can access. As an author, I can quickly add or remove apps directly from this dashboard. This app will then become available on the homepage to authorize users. You may recall from my batch process optimization webinar, we can achieve a higher biomass yield by keeping the temperature low initially to preserve the nutrient, and then later increasing it to promote biomass growth.

    By doing so, the optimal temperature schedule resulted in about a 40% increase in biomass yield compared to using a constant temperature. I hope this quick demonstration illustrated how easy it is to begin sharing your Simulink models. You can learn more about Simulink Compiler and Web App Server at their respective product pages. And if you'd like to learn more about app building in general, please check out our free app-building onramp at matlabacademy.mathworks.com. This free, interactive tutorial will teach you the basics of practical app building in MATLAB in about an hour. Thanks for watching.