How to Build a GUI in MATLAB using App Designer

hi my name is joe hicklin i'm a senior developer for the mathworks i'm going to show you how to build an app using app designer app designer is a drag and drop environment built right into matlab to help you build apps i'm going to build an app that loads data from the web lets the user control a smoothing parameter and then exports the smoothed data back to the workspace your apps will be much cooler than this but keeping my app simple keeps this video shorter when you build an app you always have two tasks first you must design the layout which controls you're going to use where they're going to go what they're going to look like secondly you need to program the app each control needs to do the right thing when the user uses it and you have to write those programs let's start by doing the layout part first i've drawn a picture on a piece of paper of what my app is going to look like i've found that if i do that first on paper i wind up with a better result and get to it more quickly i'll start app designer by choosing app off the new menu i'm going to choose the blank app layout from the startup screen each of the other layouts has something to teach you and you might work your way through these as you become more experienced with app designer app designer opens in design view and it's ready to start the layout of your app in the center is the blank canvas that's the figure you will build your app in on the left there's a palette of controls for you to use to add a control to the figure you simply drag it from the palette and place it in the canvas anytime a control is selected the inspector shows in the right hand panel the inspector lets you alter the look and behavior of the components and you should just play with it to see what kind of things you can do the defaults have been very carefully designed to give you good results so you'll probably wind up leaving most properties alone you can move and resize your components with the mouse as soon as there's more than one control on the canvas you'll see alignment aids which help you place your components neatly let's build the picture i've drawn i'll just first drag in an axis positioning it in the corner i'll draw in a slider and two push buttons i'll change the label on the buttons to load and export when you select more than one component alignment tools appear on the tool strip if you weren't careful enough placing your components originally you can clean everything up here okay we've got our layout built and it's time to program the app but before we leave design view i want to point out the component browser every component we've added has been added to this component browser here if i click on one of these in the component browser the corresponding control is highlighted in the ui notice that each component has been given a name this is the name we'll use to refer to these components when we program the app to program our app we need to write a function for each one of our controls to be called when that control is used these functions are called callbacks and we need to tell each control which callback it's supposed to use app designer groups all of these functions and the data they share into an object while we were working on our layout app designer has built an object for us all of the components that we use have become properties of the object and all of the callbacks we're going to write will become functions of the object when we move into code view we can see the object that app designer has built for us an object is nothing more than a set of data and a set of functions that share that data when some people hear object oriented programming they think they're going to be asked to learn a lot of exotic programming skills that only professional programmers use to show how cool they are that's not the case here an object is simply the right tool for the job and anything else you might use is just going to be more complicated let's look at the class definition app designer has made for us the object is named with a class def statement the data that's shared between the functions are called properties and they're defined in a properties block we haven't added any properties but app designer has already added a property for each one of the controls we used in our layout functions are defined in a methods block we haven't written any functions yet but app designer has already created a few the first one is called create components and it does exactly what its name implies each of the components we used when we built the layout is created and configured here to match what we built one of the rules for object functions is that the first argument is always the object itself here the figure is created here the axis is created here the slider is created its properties are set notice that the properties are referred to by name just as if the object was a structure all of the work you do in design view is reflected in this function these last two functions are boilerplate that gets your app started and shut down they're always the same you won't change them let's add our callbacks i'll do the load button first i'm going to right click on the load button choose callbacks i'm going to choose add button pushed function app designer has added a new function put us right in there ready to add its guts if we look down in the create components we'll see that for the load button that function has been linked as the callback to call when this button is pushed i want the load button to read some data from the web and then plot it if i write it like this the plot will go into a new figure but that's not what i want i want it to go into the axis i put in my app fortunately all matlab plotting commands can be told where to plot and you do this with a first argument so i want this to plot in my axis well what's my axis called it's ui axis so here if i just place app.ui access that tells it to go in the right place so let's try out this load function i'll run the app and i'll press the load button and there's our data so far so good you've probably already noticed that some of the code is on a gray background and some of the code is on a white background app designer has strong opinions about how the structure of this object should be and it enforces those opinions by controlling which code you can write and which code you can the code on a gray background is not editable but you can edit the code on a white background the day may come when you know more about how things should be arranged than app designer does by the time you get to that point you'll already know how to get around these constraints let's write the code for the slider now again i'll right click on the slider choose callback choose value changing callback and i'm placed in a new function in the slider callback i want to smooth the original data and plot that result but how do i get access to that original data it's locked up here in the load callback well like i said earlier objects use properties to share data between functions so i'm going to create properties to hold the year and the data and i'm going to share them between these two functions to add some properties i click on properties hit the add button and it puts me in the editor in a properties block i'm going to make one property called year i'm going to make another property called data so now that i've made the properties i need to change the load callback to write to them and then i can change the slider callback to read from them so in the load callback i will write the data into the properties now that the load callback has written the data on the app i can read that data in my slider callback and use that to calculate my smooth data now i want to plot this into my axis now that the load callback has written the data onto the object i can read it in my slider callback just like this here i'm plotting the original data and on top of that i'm going to plot the smoothed data and i'm going to have it all go into the axis in my app let's try that out load our data and now we'll move the slider ah and every time we move the slider that slider callback is called smoothing the data and drawing it finally let's add the export callback again create a property i want to export the smoothed data to the workspace but i don't have access to the smooth data again i need to turn it into a property back up to properties plus i'm going to call this uh [Music] data just like that okay so i've added a new property called smoothed data i want to make my slider callback right to that property so i'll change this to app dot smooth data and i'll use that here i want to write the smoothed data to the base workspace and the assign in function does that so i'm going to assign in the base a variable called smooth data and here's the data i'm going to put in there so let's check and see if that worked run the app load the data smooth the data export the data now let's go back to the command line and see if that worked well here in the workspace browser we can see there is smooth data if i plot that data there it is so that worked so that's it we've finished our app all this work has left a file around called app1.mlapp if i double click on that it'll open up in app designer if i just run it or type app one it'll open the app directly there's a lot more that app designer can do for you and if you want to learn more you can follow the links below

Channel: MATLAB

Views: 46,071

Rating: 4.9788637 out of 5

Keywords: MATLAB, Simulink, MathWorks

Id: nb0jHVXKY2w

Length: 10min 26sec (626 seconds)

Published: Fri Nov 13 2020