Matlab app designer руководство

MATLAB is a powerful, high-level programming language. Matlab is widely used for designing systems by engineers and scientists and we all know that the best way to represent any idea is by using a simple but effective GUI. Matlab app builder provides you the power to build different apps, to represent your idea in a GUI-friendly manner. 

In this article were going to learn how to create any app in Matlab App Designer.

Step 1: You can start working on the MATLAB APP Builder in two ways. Either go to Home>New>App. 

Alternatively, for going to the Matlab app builder section, Select Apps from the Menubar, and then go to Design App.

Step 2: A new pop-up is opened. It provides a different layout for stating the app. It has also come examples for a better understanding.

Step 3: You can choose any App option to build a MATLAB app. There are mainly three layouts available on the go. These includes

• Blank App
• 2-Panel App with Auto-Reflow
• 3-Panel App with Auto-Reflow

Step 4:  MATLAB consists of various components like:

• Components
• Customizing Components

Components are the pre-built shapes that are designed for particular tasks, and that could be imported to the design tab. In Matlab, the Component Library is situated in the leftmost part of the window. 

For importing any component to your design right-click on the component and drag it to the design tab and drop it wherever you want to place it.

By using customizing components you can customize your components as per your requirements, using the Component browser. It is situated in the rightmost part of the App Builder Window. Using the Component Browser you can change information about the component, Font and Color, Interactivity with the user, Position of the component in the design view, CallBack Execution Controls, Parents/Child members, and Identifiers. It also contains the list of the component adopted in your app.

Let’s understand more about app-building by making a simple app that calculates both simple and compound interest. For working on this app, create a select a blank workbook. Now the workspace will be opened. You can design the app in the Design tab and code it in the Code tab. 

Designing the app takes five edit test fields (numeric), three of them would be editable for principal, rate, and time, whereas two would be non-editable holding the value of Simple Interest and Compound Interest. You can also add a label for a better design view. Also import a button that does the whole calculation and shows the result.

Let’s move to the coding part now. For adding the functionality of the Calculate button, add a push-back function. You can add a push-back function by right click on the button and then going to callbacks and then clicking on add a push-back function. 

Example:

Output:

Last Updated :
15 Mar, 2022

Like Article

Save Article

Разработайте приложения в интерактивном режиме с помощью App Designer

Рекомендуемые примеры

Once the App Designer is launched, you should have the following screen in front of you.

On the top side of the designer tab, you have the following options – New, Open, Save, App Details, Share, and Run.

The first three options are self-explanatory. ‘App Details’ option shows your app’s name, summary, and description.

In the app, I want to show three graphs for the message signal, carrier signal, and the modulated result respectively; therefore, I will have to set three axes on the design sheet.

As you keep dragging specific components in the sheet, you might have noticed that new entries automatically appear in the component browser on the window’s right side. You can also edit certain properties by selecting the specific component and modifying it in the properties section below.

We will change the title, x, and y-axis only for now. You can also double-click on the text to edit it.

Now I want to give some input to my app. Since the information needs to be numeric, I have to use Edit Field (Numeric) component, Slider component, or Knob component. I will be using the first two components mentioned earlier, so let’s drag them to our design sheet.

As you can see, I have used four numeric fields and one slider component. I have already changed the labels of all the added components. Vm and Vc fields will be used to get the voltage or amplitude of the message and carrier signal. Similarly, Fm and Fc will be used to get the frequency of the message and carrier signal. Let’s add additional labels to them by dragging the Label component.

I will change the labels to ‘Voltage’ and ‘Frequency’, respectively. You should get the following UI in your design view if you have been following along until now.

For now, our work in the design view is completed. Click on the Code View to switch to the coding part of the App Designer.

You will notice specific new options have come out while some things have changed. Let’s quickly glance over the new stuff. The first thing is the Editor tab on the top. It has some essential elements in the insert part. These are Callback, Function, Property, and App Input Arguments.

After clicking on add callback button, your cursor will be placed in the following section.

Here, we are also reading the value of the Vm edit field, but there is no response for that in the app. The moment we get the frequency or Fm, we plot the graph. So you can say that the Fm edit filed is creating some response in the app. Add another callback function for the Fc edit field by following the above steps. After adding the callback, write the following lines of code in the function.

Typing the command appdesigner in the Command Window will bring up the App Designer. Fig. 1 shows the App Designer; in the middle is the blank layout under “Design View.” The Component Library on the left shows the icons of the components that can be created. On the right are the Component Browser and Component Properties Windows. In the Component Browser, the default name for the blank figure, app. UIFigure, can be seen.

>> appdesigner

Fig. 2  shows the remainder of the Component Library, including the Container and Instrumentation components. Clicking on “Code View” instead of “Design View” shows the code that has been created for the blank app. App Designer creates a class named Appl that is derived from a MATLAB apps superclass called matlab.apps.AppBase. The properties will consist of all of the components; for now, there is just one property, which is the UI Figure Window. There are also two private methods blocks and one public methods block.

The methods are used for all of the app functions, including eventually callback functions. For now, with just a blank UI Figure Window, the public methods include the constructor function Appl, and a function delete that deletes the figure when the app is deleted. The constructor calls a private function createComponents, which creates a UI Figure using the uifigure function. It then uses the dot notation to set properties for the app. UIFigure, including its Name and Position. Note that the dot notation is used twice here, as in app.UIFigure. Name.

The function startupFcn executes when components are created. It is called by a function in the constructor. Within the Code View, most of the window is grey, which means that the code cannot be modified. However, within the startupFcn function there is a white box, which means that code can be inserted in that function. Fig. 3 shows the startupFcn function in Code View.

We have seen the code that is generated with just a blank canvas. In the Design View of the App Designer environment, components can be dragged from the Component Library onto the blank layout. When this is done, the code will be updated to create a new property for each component, and to initialize some of its properties (for example, the Position property will be based on the location to which the component was dragged). Properties can then be modified in the Component Properties Window to the right of the layout.

For example, dragging a Label (generically named ‘Label’!) into the design area causes the Design View to look like Fig. 4.

Clicking on the label itself in the Design View will change “Component Properties” to “Label Properties.” Properties such as the text on the label, its justification, font name, font size, and so forth can then be modified from the Label Properties window. Each of these will modify the code that is created.
Assuming that no properties have been modified, and there is just a generic label in the layout as shown in Fig. 4, most of the code remains the same as with just a blank UI Figure Window. Choosing Code View will show that the class App 1 now has a new property Label, and the createComponents method creates a Label using the uilabel function and gives it a Position. The added code is shown in bold here (not in App Designer itself).

classdef Appl < matlab.apps.AppBase
     % Properties that correspond to app components
     properties (Access= public)
         UIFigure matlab.ui.Figure % UI Figure
         Label matlab.ui.control.Label % Label
     end
% Create UIFigure
   function createComponents (app) 
       app.UIFigure = uifigure;
       app.UIFigure.Position = [100 100 640 480];
       app.UIFigure.Name = 'UI Figure' ;
       setAutoResize(app, app.UIFigure, true)
       % Create Label
       app.Label = uilabel (app. UIFigure);
       app.Label.Position = [421 431 30 151];
   end
end

Modifying a property, such as changing the text of the label in the Label Properties window to be “Hello” instead of “Label” will modify the code in
createComponents to:

% Create Label
 app.Label = uilabel(app.UIFigure);
 app.Label.Position = [421 43130151;
 app.Label.Text = 'Hello';

It is also possible programmatically to modify properties such as app. Label. Text in the startupFcn function, but it is preferable and easier to do this from the Design View.

To run the app, click on the green Run arrow. This brings up a dialog box that asks for the name of the file that will be created; the default name that shows is “App 1.mlapp.” Changing the name to “HelloLabel.mlapp” will create a file with this name and bring up a UI Figure Window. The upper right portion of this is shown in Fig. 5.

Note that the App Designer creates one file with the extension ‘.mlapp,’ unlike GUIDE, which creates two files: a .m file and a .fig file.
While this example shows the basics of App Designer and the object-based code that it creates, it did not involve any callbacks.

UI Figure Functions

Traditional GUis create different types of objects by specifying the Style property in the uicontrol function. For example, a slider is created with uicontrol(‘Style’, ‘slider’). By contrast, App Designer uses separate functions to create the different component types; for example, a slider is created with the uislider function. In the previous section, we saw two of these functions: uifigure, which creates the UI Figure Window, and uilabel, which creates a static text box.
All of these functions can be called directly from the Command Window or from any script or function. For example, the following code will bring up the UI Figure Window shown in Fig. 6.

>> uif = uifigure;
>> uif .Name= 'Simple UI Fig Slider';
>> uislid = uislider(uif);

By creating a UI Figure Window first, and then passing its handle to the uislider function, the slider is put inside that UI Figure Window (otherwise, a new UI Figure Window would be created for the slider). The Value property of the slider can be inspected, e.g.,

>> uislid.Value
    ans=
         0

Of course, to do anything with the value of the slider would require more complicated code with callback functions. For sliders, there are two:

• ValueChangedFcn‘: executes when the slider value has been changed
• ValueChangingFcn‘: executes as the slider is being moved

For example, the function uislideruilabel creates a UI Figure Window with a slider and a label. When the slider has been moved, the ValueChangedFcn‘ callback is called, which puts the value of the slider in the label as seen in Fig. 13.35. Many of the concepts here are similar to those used in GUI callbacks.
The function uislideruilabel is a function that has a nested callback function, whatslid. Since the whatslid function is nested, the variable scope is such that the variables uilab and uislid can be used within the callback function without passing them. The callback function has two input arguments representing the source of the callback (in this case uislid) and the eventdata, just like GUI callback functions.

function uislideruilabel
      uif= uifigure;
      uif.Name = 'UI Fig Slider with Callback' ;
      uislid = uislider (uif) ;
      uilab = uilabel (uif , ' Position ', [150 200 30 15] );
      uilab.Text = 'O' ;
      uislid.ValueChangedFcn= @whatslid;
      function whatslid (source, event)
           uilab.Text = num2str(round(uislid.Value));
      end
end

The list of UI functions that create object components can be found in the App Designer documentation. The documentation for each function describes the properties that can be used for each, including all of the possible callback functions.