Complete MATLAB App Design Tutorial

hello everyone and today I have another MATLAB tutorial for you this one covering MATLAB app designing using the guide in app designer utilities this is courtesy of dr. Neumann azam and he has also provided us with a limited number of free coupons into the course on udemy all you need to do is go to the page and enter in YouTube free to redeem a free coupon so if you have any questions following this tutorial you may want to enroll in the course and I'm sure dr. azam can assist you with any questions you may have related to MATLAB so without further ado let's get started welcome to the course MATLAB app designing the ultimate guide for MATLAB apps let's see what we have in this course this course has essentially two segments one the first segment is about creating apps using the MATLAB conventional utility called guide and then in the second segment of this course we will be looking at creating apps using the MATLAB new utility called the app designer essentially in the first segment we have five different portions chapters or parts so in the first chapter we will be looking at the basics of the guide the topics that we will be including are accessing guide the available controls properties of different controls the alignment options the gridlines and many other similar topics in the second segment or chapter of this of this first segment we will be looking at how to link the code with we that is how to write meaningful code behind a different user interface controls in such people be looking 8 how to how to manipulate tables list boxes pop-up menus X's sliders radio buttons checkboxes and other user interface controls that are available in the MATLAB guide in the third chapter of this first segment we will be looking at some of the advanced techniques such as how to pass command land or to the GUI how to pass values between two different keys and similar other topic in the chapter 4 we will be looking at some simple projects that is that can be done with the help of the guide and then finally in chapter 5 we will be looking at more examples and tricks that you can do in order to take full advantage of the guide utility in the second segment of the course we will be looking at the second utility of MATLAB for creating apps that is the app designer it is introduced in the 2016 a and B versions of the MATLAB so this segment essentially is contains four four different bursts of four different chapters so in the first chapter chapter we will be discussing the topics such as the design view and good view of the app designer briefing on available controls the alignment options the spacing options and the gridlines and similarly a similar other topics in the second chapter of this segment we will be looking at some of the tools for correcting errors and detecting errors and some of the useful shortcuts that are available in the app designer in the third chapter we will be looking at all the graphical user interface controls that are available in the F designer we will be looking at detailed examples how to how to actually code the behavior of these different user interface controls in the next chapter we will be looking at some of the advanced techniques such as passing values between two movies packaging your app and many others that will essentially help you in order to create great user interface the final chapter we will be looking at some of the sample projects that can be developed using the app designer hi in this segment I will be showing you how to access the guide utility of MATLAB so basically you need to go to the command line and type guide and then press ENTER so a dialog box will appear over here which have four options so basically in this course we will be using the default option which is a blank cui so when you press Enter the guide utility of MATLAB will appear you can resize the size of this of this guide and you can also save it as well so that's pretty much it in this segment I will be showing you the basic user interface controls that the guide provides so basically it provides you with a push button option as well this button is used to trigger some event until you were GUI for instance the user may enter some values and you want to enter it and some processing to happen after the after you press this particular button the next one is the slider option so basically it provides you with the ability to slide this and to control different items based on that remember you can also use the values you can mention that what's the minimum value when this slider is at one extreme position and you can also mention another value when it is at its other extreme option right I will show you that later on similarly you have radio buttons you have checkboxes checkboxes are basically used where you have multiple options then you want to select a particular one then you have the editable text and static text the editable text is used to take input what do you mean by that is that it is editable and in the static text it's static I mean the user cannot change it by by himself right so this is the basic difference between these two then you have the pop-up menu in the pop-up menu appear something like this that whenever you click this particular drop-down menu so it's a list of options will appear then you have a list box basic difference between these two is that the options will only appear after the user hit this particular area while here all the options are being listed and you can scroll up and down in order to see that then you have the toggle but the toggle button the difference between this and this one is that you can only associate certain actions when pressing this button and releasing it while here you have two separate options that one is for pressing it and the other one is for releasing it then you have tables tables are used to hold tabular data and then you have X's the XS is used for holding images as well as for plotting graphs and other stuff then you have panels if you want to hold multiple items under under one user control for instance I made a panel here and I'd include buttons to it and certain stuff to it right so now this panel is actually holding three items I want them appear to appear together so it's basically for grouping different user interface controls and then you have button group so if you have multiple buttons and if you want to crop them together in a hierarchy so it also provides you with this option activists control it's basically it warns options and mostly we will not be concerned with it but if you want to learn it I will give you some hints in the course okay so these were the available options that you have once you have set up your GUI the next step is to save it so remember that whenever we are saving it we should give it a meaningful name for example this one was our exercise one I'm wicked spelling so follow me so when we save it remember that we are going to have two files for it one is the picker file dot f IG and the other one is taught M file so the M files generate the codes automatically for this particular figure file and the figure file will hold our GUI and this is the code that is working behind dat cui so remember that whenever you save it these two files will always be generated the figure file that controls your queen and the dot M file which contains the code that's automatically being generated based on this particular we and the user interface controls that you have selected okay so that's enough for now see you in the next act okay so in this lecture we will be looking at the properties of different user interface controls and they are very very important a part of this cooee so let us see what are the properties of the push-button so remember you need to include this in order to see the properties of it and when you double-click it the properties of it will appear so you have a very broad array of properties for this push button for example you can set the background color which by default is this one and similarly you can set some data to it we will see some of these properties when we do different kind of an examples and include this push button into those examples so we will see them there but for now you can check that the font size you can change the size of font as well for example you can say well similarly here okay here you do not have any options that are available so how to see the options for the 40 font if you want to change the font name how we can do that well there is a there is a is a command which you can type over here for example you can see a list fonts and it will list all the fonts that are supported by MATLAB so if you like some of these fonts for example I like Times New Roman so I can select it from here and I can paste it into that particular area and the font will automatically change when I press ENTER ok so let's see what's the result okay so it has now been changed to Times New Roman okay similarly you have other properties of the fonts as well you can also add some functions when the key is pressed and the key is released remember this maximum and minimum does not apply to this particular button it applies to some other user interface controls we will see that we do some examples on those particular those particular user interface controls okay the most important the most important that you should note is this property which is known as stake remember we will when we will be writing our code corresponding to this particular GUI or any GUI so you need you will need this takes in order to do some operation on these user interface controls either you want to change some values of it or you want to do some what you want to apply some logic on to this particular user interface control so you will need this this value in order to interact with this particular user interface control so remember it is very very important the other important one is this default value which appears on the user interface control so if I change it to let's say button one so you and and we also remember that you need to press ENTER in order to so that this will take effect on to your GUI as well okay so let's see now it has changed to one and one right so the most important one is this string and take properties and once again the take property will be used in when we write code behind this user interface control and people use this take in order to refer to this particular user interface control so these two are very very important okay and for the rest of these properties they will differ from user interface control to user interface control some of them will remain same and some of them will be keeping on changing so we will we will we will see some of these properties later on when we write different kind of program so they will be used so don't worry about them for now just remember that we need take and string in order to start programming and start using these user interface controls in our program so these are the two very very important property stake and but and the initial strain additional strain change the values of the user interface controls and the tag will be used in our programming when we want to aid or refer to this particular user interface controls okay see you in the next lecture in this segment I will be demonstrating the use of a line utility that is provided you with by the guide so basically it is located over here and it is used to align the user interface controls either horizontally or vertically depending on your choice so I will demonstrate it with the help of a simple example suppose you have radio balance and I copy and paste different instances of it so let's say you have one button over here and another button over here and now you want to align them automatically either horizontally or vertically so you have different options that is provided by this particular utility for example and it is divided into two drops vertical alignment and horizontal alignment and in the vertical alignment again you have two options align and distribute so this distribute basically sets up the space between different user interface controls and again this it provides you with different options for that and again you can set the the space to a particular size which is provided over here okay so this first option it will align all of these controls vertically using this style and this will use this particular style similarly for the horizontal you have so many different options so let's say we first distribute it and after it will take effect after you press apply so now see this button has changed its position so now they are being distributed equally and the next step I want to distribute them in the center so with respect to center they will be aligned so now see all of them has changed their position similarly you can try other options as well and other user interface controls and try different versions of this particular alignment options so that's pretty much it for this segment see you in the next segment in this segment we will be looking at the bread and rulers so it is located here in the tool and you can select it from here ok so what it gives you is the default grid size which is 50 so you can change the grid size either you can decrease it by 10 so you can see now very small and finer grid boxes over here or you can extend it from here let's say you can select 60 or 70 and so on ok the other thing is in this particular dialog box is the show ruler option it gives you the sizes of the grid in the on this GUI in terms of the pixels so remember that each pixel here is 1 over 96th of an inch in Windows and one over 72 of an inch on Macintosh ok the other option is this one slave to gray if you check it what is affecting me is that it will cause any object that is moved closer to a grid line to jump to that line so if you draw a particular component over here and if you want to change its size so see it will it will when it comes close up to this particular grid line it will jump to that line right so see up to this point it is not jumping but after this line it is a jump to this line so it's a particularly useful option that you can use similarly if you want to divide your GUI into some meaningful parts for instance I want to create 4 parts of this GUI so you can actually drag lines from here by clicking it here and dragging it over here so it will serve as reference point in order to group your items onto this free so similarly we can add a vertical line like this and I want and I know what you can learn like this so I can actually divide my GUI into some meaningful portions remember that these lines are not going to be visible on your final movie output so for instance if I run it after saving it so they are not going to appear as part of my queen so the only purpose of these lines is to provide and give you some hint in order to adjust your components on this so this was about a grid and Lions options of you are learning this course and enjoying this course hi so in this segment we will be looking at the tape editor again you can access it from here that is the tools and then you can go here the tape editor order okay so you may have noticed that some of the users they prefer to interact with the buoy from the keyboard rather than with the mouse so when they are using the keyboard the button tape on the keyboard can be used to select or to toggle between different user interface components so a very natural question in that case that comes to the mind is that what should be the order of a different type of controls so when I want to go from one component to another component what will be the order in other words when I press the tape button so what will be the order in which different components will be exist so that order is basically set by the component called a step order editor in order to demonstrate this we will select certain components from here so suppose we have a push button then we have a pop-up menu and then we have list box okay so when we go here again the tabe order editor so you may note that the default order is the order in which I have created these user interface components so suppose if I run it I need to save it before running it so see that this is the first one which is going to be selected then this is the second one and then this is the third one which is going to be selected so if I want to change the order in which they are going to be selected based on the tape that I pressed so again we can go to the tape order editor and then we can say that okay I want this to be the last one to be selected right so now it is at the very end the push back so again if I run it so now the first one is this one is being selected and then this one is being selected and then this was the last one which is being selected okay so important an important point to note is that when we are using this panel or button group so then the items within this button group they will be taped differently I mean they will be taped separately from these particular options so if I add one check box over here and then if I need another check box over here and another check box over here and if I click this one and then again if I go to the tape order so I see only the components that are present over here so this means that the items within the button grow up or in the panel they are going to be taped differently their order will be selected differently and these will be treated differently so again if I run it you can notice that okay so the first one is this one the second one is this one the third one in this one and then in the fourth one I have selected this one in the first this one of the second this one is the third so remember this that these are ordered separately and these items which are not in a group they are ordered separately so this was a particular tool that you can use in your GUI as well thanks in this segment I will be demonstrating two very important functions that are frequently used in the graphical user interface of MATLAB which is guide so these two functions are the set function and the gate functions so another to demonstrate these two functions I consider a very simple example I edit that an editable text box over here and a static text box over here and another thing I need is a push button over here okay so in this example basically I want the user to enter some value over here and then I will display same value over here as well so let's investigate different properties of it so I want the initial text to appear here as now I do not want any text to appear here in the beginning and the tag is edit one in this case then similarly for this text box I will did its take two texts one and the initial text I want so empty that is I do not want any text to appear in the beginning of the program okay then we need to go to the cold eggs over here and then I will demonstrate the two functions here in the callback of this function okay so the two functions are these two that is the first function is the gate function and the second one is reset functions okay let us look at the first function that is the gate function so the syntax here is like this that get and then we need to specify the particular graphical user interface object by specifying its unique tag which in this case is edit one so I am going to retrieve from edit one its string property right so whatever the user entered there it will be retrieved and storing this variable a okay in the second line that is the set function we are setting the property of text 1 and we are setting its strength property and then what we are setting it to its we are setting it to variable a right so in general this gate function is used to retrieve values or properties of certain user interface controls and the set function is used to set a particular properties or builder interface controls so let's run this program okay so the user may enter some values over here and then this value is going to appear over here right so whatever the user enter here it is going to appear there so it was a very simple program and remember these two functions set function and gate functions there will be very very frequently used in this course so try to do a lot of examples using these two functions the set functions and the gate functions remember we can use it with any user interface control and in general the set function is going to set certain properties of the user interface control item that we are specifying and the gate function it will retrieve certain properties of the user interface control okay so see you in the next welcome to the new segment of the course in this segment we will be creating a twee date we'll be serving the purpose of adding two numbers and then showing them a the result of those two numbers to us so it's a very very simple example and I hope you will enjoy it so first we need three static texts which is one and then you can copy it and paste it here so it's the second one and then we need the third one as well we also need three instances of editable text we will use this to enter the values and also show the result and we need another one as well and we also need a push button for this okay so for this one we can change the properties and the initial text we can change it and we can change it to enter first number and then for the second one we can similarly change its properties and we will change the property of the string and we can write enter the second number okay and then we can also change the properties over here and we can say for instance the result okay and similarly we can also change the initial values over here we can change it to zero the default value and we can change the value here as well we can say the default value is let's say zero make sure you press ENTER after setting this value so that it appears and update in the main who years well and then here we can change it also to zero okay and we can push it here so that it is approximately in the center okay so when we stat and the user will enter first value over here second value over here and then the final result will appear over here so we need to save it I will give it a name edition simple addition we have already one instance open of that so we can say addition to okay so now it's saved and if you want to see how the GUI will look so the user will enter first value over here second value over here and then the result will appear automatically over here when we enter the push-button okay so now we go to the callbacks of the push pattern and we will enter some code into it say I have already written the code and I will explain now it to you so first what we are doing is from editable text number one we are taking an input in the form of string and storing it into variable X and then similarly from editable text 2 we are taking the input in the form of a string and storing it in variable Y and then since these two are in string format we need to change it to numeric form so I this is a built-in MATLAB function which will can work this string variable into numeric variable similarly this will also do the job and then in the editable text number three I am showing the result of X plus y so I'm using the set function instead of the cat function so we can run this program and see how it's doing so I enter two I enter five and then when I push the result is seven which is appearing over here so that was a very simple example hope you are enjoying it in this lecture I will be showing you how the slider control works basically we will be using an example to demonstrate this in the example I will be using a slider and then the value of the slider will be used to plot a particular sine function so basically we need a slider here we can drag it from here then we can check its properties remember these two are very important properties of the slider maximum and minimum it means that when you scroll down the slider its value will change between these two extremes 0 the starting value and 1 as the ending value the tail of the slider is slider one the next thing we need is an axis this will hold our graph we want to make it into the center so that it looks better ok the next thing is we need to go to the callback of this particular slider and the callback we will add a couple of lines to demonstrate ok so the first line I get it's very straightforward we are taking the value of the slider so when the user slides between different values it will return different values then this is a variable X basically it is taking values from 0 to 50 and with the step size of 0.1 it means that the first value that will be assigned to X is 0 the next one is 0.1 then 0.2 up to 50 the variable Y it is containing the sign remember the sign is a built-in function in MATLAB so it will multiply this value value a with all the values off and then we are plotting it in the plot function remember we need to aid this handles dot X is 1 this is the axis which will hold this plot and this plot is again a built-in function in MATLAB it will plot the values of X against the values of Y so we need to save it we also need to save it and then we were ready to go so when we change and the value of the X is C the upper graph it is also being changing so it is changing basically based on the value of the slider okay so if you want to see the values of the slider explicitly you can add another text box over here and then we can see what's the take off this particular text box we want to make sure we are using the correct take for this so it is take 1 and then we can go again to the code that we have just written and in this code we can add another line it is so this line is basically setting the property of textbox one or the string property that is it will contain the values of this particular slider that is specified by values a so then we run it again and change the value of the slider we can see that the text box is now containing the values of the slider remember the minimum value is zero that we have set in the properties of this slider and the maximum value is 1 so the council see there is also a so that's pretty much then you can also make other uses of the slider and use it in your code according to your specification thank you for watching as you in the next lecture in this segment I will be demonstrating how to access the app designer and I will be also introducing different components that are available in the graphical user interface of the app designer so first in order to access the app designer you just need to type a designer in the main MATLAB command line so when you enter it the math app designer utility will appear over here so some kind of this window will appear in your screen okay so within this main main window you have different kind of components so on the left hand side you see there is a component library it contains all the graphical user interface controls the app designer allows you and provides you with so here we have an axis we have button checkboxes drop-down menu edit field and many others so we have also some entrusting components which were not available previously in the previous version of the graphical user interface of MATLAB and these are these gadgets and different gadgets that you can use for example discrete knob this knob with this kind of a slider pointed kind of a knob and similarly you have this lame and gadgets so there works like that looks like a speedometer on the car so similarly you have had you have 90-degree gauge which means the scale is the same but you have only 90 degrees of that similarly you have other kind of interesting switches and toggle switches as well so these are different kind of components that are available and the in the course we will be learning all of them in detail okay so okay so in the main window you have two options over here one is the disease you and the other one is the code view so in the design view actually you have all of these user interface controls available to you and you can actually design your cookie over here in the code view when I hit the code view you will notice that this window has now been updated and now you have two more components over here one is the code browser and the other one is a play out so app layout will contain the layout of your of your design so in the code view remember you cannot view the design but here this will give you a rough idea how you were design is so it is very useful for remembering you were design view in the code browser we will be covering it in the later on in the later on lectures so don't worry about this similarly when we go back in the design view we have two more components over here one is called the component browser and the other one is the component properties so for instance if I drag a button over over here so you see that we have an eight dot pattern over here now so this is actually the name of this particular component that we have added and this shows us the properties of date component for example its text and different other properties so that we covered in detail these different graphical user interfaces we will be also discussing the these properties of individual components over here similarly if we add another component so you will see now there is an addition over here and also we have different properties and now the properties have been changed based on our selection so if we select this we have different properties if we select this we have another set of properties so don't worry about this as well for now just this was an introduction that what kind of interface we will be dealing with and we will be covering them in detail so for now you just remember that from where you can eat the components and there are two design view and a code view in the code view we will be writing useful code in order to control the behavior of these controls and similarly we have the browser the component browser which allows us to see different components and along with their different properties so hopefully you will be enjoying this course see you in the next in this segment we will be looking at the available graphical user interface components that are available in the app designer and list is available here on the left-hand side of your app designer so if we want to group them so some of these graphical user interface components are work by pressing by pressing them so a typical example is like button and we have the state buttons we have static buttons and we have some kind of these switches so they typically work by by clicking them the other one is like this one the axes it holds the output of some detail manipulation that you perform and the other group is like selecting from certain options data are available until your GUI for example checkboxes and radio buttons etc okay so if we look from the top we have an axis so typically it will hold grabs and plots similarly you have button so if you want these are typically used when you want to trigger some even in your GUI we have checkboxes checkboxes are typically used for checking a particular option that is available in your design we have drop-down menus drop-down menus contains a list of options and these options can be exist when you hit a drop-down arrow over here similarly you have now two kinds of data entry fields one is for numeric and the other one is for textual data the other component is the static label it contains like static data that is we when we want to include certain text into our GUI and we do not want to manipulate that I mean we do not want to change that similarly you have list box in the list box you have different options but again its style is different from the door drop down menu drop down menu only shows one option and when you click this this arrow like thing so the other options will appear but here depending on the size of this list box you have different options available to you the other one is the radio button group so if you want to select a particular option from here you can select appropriate appropriate radio button or dear similarly we have slider so slider it's used in order to take readings from a particular GUI or if you want to have operations like zoom be zoom in and zoom out and tear on your images you can also use that some of the other options we have is the spinner so again it will hold one value and there is a minimum and maximum value between which you can spin its values similarly we have state buttons text area so text area is used to hold some textual data for instance if we want to displace it and contents of a text file or or some other document that you want to display similarly we have toggle button crops and we have some containers and there is already made templates for you and the most interesting part if you will be working on is these gadgets and different kinds of gadgets so we have very very beautiful interfaces and you craft pollutant interfaces that are equipped here in the app designer so basically we will be looking at these as well which are additional and not were not included in the previous version of the MATLAB GUI so a final comment is that we will be looking at each of these graphical user interface components in detailed in the second section sorry in the third section of this course and we will be elaborating each of them by using suit examples so if the main purpose of this lecture was just to give you an idea about what kind of graphical user interface components you can encounter and you can use in the app designer utility so stay tuned in this segment we will be looking at the alignment and arranging options so in order to demonstrate them we will consider a couple of components there is a button and a checkbox okay so in order to apply these alignment options you have different options that is alignment from the right alignment in the middle and arraignment from the left side i click any one of them for instance alignment from the left so you will notice that the components have changed their locations and now they are being aligned from the left similarly you can apply and use the other option this one is alignment from the middle this one is alignment from the center and this one is alive it from the bottom we do not want that in this case it will be meaningful if you change positions a little bit you see now they are aligned from the bottom one more thing is that when we are trying to select multiple graphical user interface components so there are two options one is to select them using the mouse like this and the other one is to press the control button on your keyboard and then click the individual components like this one right similarly you can use the other options like this one alignment from the center and alignment from the ball from the from the top so you will notice that a little bit changes are also reflected and reflected over these components okay so now let us look at some of the arrange options in the early interactions you in the first one is the same size option so again there are three options over here this one will like them would make the selected components to have the same height so now you will notice that a little bit change in the height of this component remember that the one with the bigger height will be used as a reference in this case okay the other option is is to have the same width so when I apply this one so they have changed a little bit in the in debate and similarly I can apply both of them at the same time right okay the other final option is the grouping option so when I click this one it will make these components to belong to the same group now the benefit of this is that you can drag them together without worrying that some of them might not be selected so when they are in the same group you can actually drag them wherever you want and they will go side by side together that was some of the additional options with regards to aligning and arranging options the alignment options are located over here and they allow you to align your graphical components either horizontally or vertically or from the left or from the middle or from the right and these are this one is used to crop different components together so that you can track them to different places anymore GUI and this one applies the same height orbit of the same height orbit options see you in the next segment so in this segment we will be looking at some of the more options that are available over here to which you can actually manipulate your graphical user interface components so for example we can break a couple of components from here okay so the first option here is the auto spacing option so let's say you can pick some value over here and the values are always going to be in pixels so if I apply the auto spacing option and I want to apply it horizontally and I want the spacing of 50 between all these components so if I apply this one so you can see enough now that these components have a horizontal spacing of 50 pixels similarly if I can also apply the vertical option and now you can see that they have a horizontal sorry a vertical spacing of 50 pixels right similarly there are a few other interesting options over here one of these option is that show alignment hints right so when we are going to change the position of a particular component it's going to give you some alignment in this way so here now it is saying that it is in the middle of your work away and now it is saying that it is along the same line here with this component similarly it will also show you a different alignment options here now it means that it is in the center of the component that is above it right so similarly other options are being shown as well so this is very particularly very very useful if you want to arrange your graphical user interface components onto this GUI okay there are there is another option which is this one it will gives you resizing hints when instance if I select this one and I am interested in changing size of these components right so work with a single one here on these on the left hand side and beneath the right hand side you can see those small numbers it is actually the size in pixels that is being shown over there right so if I change its size you can notice that the numbers on at the bottom and the number on numbers on to the left of this component there are also big changing so they are actually giving you some hints regarding the size of this graphical user interface component again they can be quite useful if you want to find alignment on the you were on your graphical user interface components that's all for this lecture see you next in this segment we will be looking at the great and cribs are very useful for creating the layout of your graphical user interface and it will be useful to align and arrange your different crafts computer interface components on your craft room on your GUI so the great option is basically located over here with the grades we have a couple of more options like the first option we are looking at here is the interval by that we mean the sides of this boxes that are included a be discreet so for instance if I include a higher value for instance 50 you would notice that the box sizes are now quite bigger compared to the previous one similarly we can adjust it to 30 or 35 remember that the minimum value that we can have here is 10 so below 10 at the F design of the model anyone okay so let's suppose we are including some button over here right so with respect to these grid lines I have we have we can noticed and we can have some hints regarding the size of these per user interface component so if I include more more graphical components from here we can actually have a good idea regarding the relative size the other useful option is that snape to create option what it's actually doing is that it will only allow your graphical user interface component to be aligned with these crates right so you will notice that it's now jumping between different boxes so if you want that kind of kind of an alignment so you need to click over here right so again in summary we have two options one is the interval size and other one is the snap to create option you can use either quite useful in arranging your graphical user interface component on the on this canvas so hopefully you're enjoying the course see you in the next lecture in this segment we will be creating a simple program for adding two numbers together so for that we will need a button and we will choose from these two options so both of these options can be used in this case first we will demonstrate using the numeric edit fill and then we will demonstrate the same phenomena using the text edit field so with the numeric edit field it's pretty much straightforward we need a couple of edit boxes it it feels to hold the numeric value and then another one which will store result of the addition of these two numbers so for simplicity remember that this represents actually the name of the field and in within our program within our code people refer to this edit field as a dot value one similarly we will call it value two and we will call it value one and this one we will call it as result okay so now we have three okay so there are a few interesting properties of this edit field the first one that is the caterer here we exactly select this one is the value so this is the default value and you can delete it and then the default value will be an empty similarly this is the minimum and maximum value that it can hold okay so it says that the default value must be present over there and then there are some other display options for instance if you want exactly some number of digits that you want to display or if you want to specify the number of decimals that you want that this edit field should have or if you want to choose only the integer values similarly we can have scientific numbers and we can also define our one custom way of defining the values over here and these are some other properties for example enable/disable will mean that the user cannot change this value and if we make it enable then it means that the user can it is visible inside the GUI when the GUI runs similarly this editable field means that the user can tip the value where here there is he can change the value over here once it is in running form and if we disable this it will mean that user cannot change this value it can only be programmatically changed within the code that you write okay so we now have our GUI ready and we select it as a default value so this one okay so now we will go to code and when I want when the user press this button I want the values that are present within these two idiot fields to be added together and the results will be displayed over here so I ate another function over here that is the callback function of this push button and I will write few lines of code I have already written so I just copy and paste it so now this first line is telling is telling us that get the valve 1 and what I want to get I want to get its value so remember this is the data structure which holds our different components of this cooee so I am interested in this part of this data structure that is well 1 which is our headed field and I am interested in its value right so it will be stored in variable 1 similarly I will store the value 2 from this particular graphical component and I'm store it in two variable P and then finally I am adding the tool together and this will be shown in the edit field result so when I run this program then I can enter some useful values 8 and when I press it so the results should appear over here so that was pretty much straightforward example now we can achieve the same thing using the textual edit field I will show you how so we can to Li instead of using these numeric edit fields we can choose the textual edit field and applying at a slightly different code to that so for instance if I get this one remember this is now the textual edit field so I need 3 instances of this ok and I will change its names so it is it will hold our value 1 so I call it valve 1 ok similarly I will call this well - and I will call it a result and I want the user to add some functionality to the callback of this push button that is when I press this button I want the value of these two to be added together so I have written the code already remember that in this case our the value that we enter is in string form right because we are using the string at the textual edit field so the value here will be in string form so this value is in string so what I am doing I am changing it to numeric value and I'm using the Putin made MATLAB built-in function that is STR - nom so it will convert this value into numeric form and similarly this value will also be converted into numeric form and then these to be added together and since this is also a text related field it can only hold textual data so I am converting the result back again into straight by using this MATLAB function that is num2 str and essentially it will do the same job so if I run it and I enter some values over here five and another five and then when I press this button the result of ten will appear over here but remember this ten is in strength form or in textual form not in numeric form hopefully you are enjoying the in this segment I will demonstrate the use of knobs so they are very much similar to the slider component and they have very similar properties so if we look at this slide it has a default value the minimum and the maximum and the display minor tips so you can change it here resistance I want it to be displayed up funny right you want the magnetics to be here or not it is controlled based in this example we can use the same Gettys and we can add a callback function for the knob and by changing the value of this now knob we will basically change the volume of the gauge so we will say give that gauge dot remember the spanning dot value to be equals to the value of this particular gauge so when we run this program you can see that we can change the volume of this cage based on this knob right similarly another interesting component is this discreet knob remember it has only four values of low medium and high so if we look at the properties you can add some other values here as well for instance you want five others to appear over here so you can add values from here right but in this case we don't want it we want the default values of all off low medium and high and okay so I will add a callback function in order to demonstrate its functioning so we are here so what I want is that if the value is equivalent to off I want a value of zero on the gauge if it is low I want it to be set to 33 if it is medium I want to set the value of this case to 66 and if it is high I want the value to hundred so we can write simple piece of code for that that is f is equal the value if this is equivalent to off remember it's a string value so we want the in that gauge value to the equivalent of 0 else if else if the value is the second value is low in this case so if it is low I will set the app dot gauge dot value to equal to 33 and similarly we can copy the x over there similarly if else if it is equal to equal to let's say medium so I even set it to 66 and if none of these cases apply I will say else in any other case I want to set it to exactly hundred so this is a simple piece of code let's run it again and see how it is working so basically if you're going to set these values now so if it is low we want a value of 23 if it is medium sorry if it is high it is hundred if it is median for millions of how it's not working probably we'd have made some mistake this is a difference so we need to write the correct balance so let's check the medium again my medium you should have 66 value so it's pretty much straight forward in simple example in order to demonstrate levels of mobs hope you're enjoying the car

Channel: Joseph Delgadillo

Views: 122,320

Rating: 4.7451739 out of 5

Keywords: joseph, delgadillo, nouman azam, matlab tutorial, app design in matlab, for noob, beginners, guide, app designer, graphical user interface utility, matlab programming tutorial, matlab for researchers, students, engineers, simulators, programmers, free udemy course, source code, matlab app designer, app designer matlab, matlab app designer tutorial

Id: cl0AcnN3Bmk

Length: 66min 48sec (4008 seconds)

Published: Mon Mar 06 2017