edit field matlab app designer

Article Directory

One, App Designer

1. Open App Designer
2. App Designer window

(1) Design view
(2) Code view

Two, App components

1. Types and functions of components
2. Component attributes

Enable attribute
Value property
Limits property
Position attribute

Three, the definition of the class

1. The basic structure of the App class
2. Access rights

4. Design examples of App design tools

1. Open App Designer, add components
2. Use the property panel to set the properties of the component object
3. Write code to implement component functions

(1) Write a custom function
(2) Write component object callback function

4. Run the app
5. Package App

Thinking and experimenting
The problem i encountered

Reprinted in "MATLAB Basics and Application Course (2nd Edition)" Cai Xuhui Liu Weiguo Cai Liyan | WeChat readinglink

App design tool is an application design tool launched by MATLAB R2016a. Like GUIDE, it is also a visual integrated design environment. In addition to providing standard user interface components similar to GUIDE, it also provides components related to industrial applications, such as dashboards, knobs, switches, indicator lights, etc. Using the App design tool, you can develop a MATLAB application module that has a friendly interface and can be shared.

The component element of the App user interface is a component, which refers to an object that can be reused and can interact with other objects. It is an entity that encapsulates one or more entity program modules and can be reused. The component element of the user interface designed by GUIDE is the control. The control is a special component that is only used to visualize data.

One, App Designer

1. Open App Designer

There are two ways to open App Designer:

In the MATLAB desktop, select the "Home" tab, click the "New" button on the toolbar, and select the command item "App Design Tool" under "App" from the pop-up command list to open App Designer.
Enter the "appdesigner" command in the MATLAB command line window to open App Designer.

2. App Designer window

As shown in Figure 10.10, the App Designer window consists of a quick access toolbar, a functional area and an App editor.

The functional area provides tools for operating files, packaging programs, running programs, adjusting the user interface layout, and editing and debugging programs. Both the toolbar in the ribbon and the "Run" button in the quick access toolbar can run the current App.
App Designer is used for user interface design and code editing. The design layout and function implementation code of the user interface are stored in the same .mlapp file. The App editor includes a design view and a code view. Choose a different view, and the content of the editor window is also different.

(1) Design view

The design view is used to edit the user interface. When the design view is selected, the left side of the designer window is the component library panel, the right side is the component browser and properties panel, and the middle area is the user interface design area, called the canvas.
The component library provides component templates for building the user interface of the application, such as coordinate axes, buttons, dashboards, etc. The component browser is used to view the organization structure of the interface, and the property panel is used to view and set the appearance characteristics of the component.
The second tab of the design view ribbon is "Canvas". The buttons in the "Canvas" tab are used to modify the layout of the user interface, including tools such as aligning objects, arranging objects, adjusting spacing, and changing the view display mode.

(2) Code view

The code view is used to edit, debug, and analyze code. When the code view is selected, the left side of the designer window is the code browser and App layout panel, the right side is the component browser and property inspector, and the middle area is the code editing area.
The code browser is used to view and delete the callbacks of graphics windows and control objects, custom functions and application properties. The callback defines how the object processes information and responds to certain events. The properties are used to store callback Data shared with custom functions. The property inspector of the code view is used to view and set the control properties of the component's value, range, visibility, and availability.
The second tab of the code view ribbon is "Editor". The "Editor" tab has 7 groups of buttons. The "Insert" group button is used to insert callbacks, custom functions and attributes in the code, and the "Navigation" group button is used to quickly locate and find content in the .mlapp file, "Edit" The group button is used to add or delete comments and edit code format.

Two, App components

Component objects are the basic elements that constitute the user interface of an application. These components are described below.

1. Types and functions of components

In MATLAB 2017b, App Designer divides components into 4 categories by function.

Common components: components with the same functions and similar appearance as in GUIDE, including axes, buttons, list boxes, sliders, etc. The "editable text" control in GUIDE is divided into two "edit field" components for inputting values and text in the App component library.
Container components: used to group elements on the interface by function, including "panel" and "tab group" components.
Figure window tool: used to create the user interface menu, including the "menu bar" component.
Instrument components: used to simulate the operating platform and operating methods of actual electronic equipment, such as meters, knobs, switches, etc.
The component object can be generated in the design view with components in the component library, or it can be created by calling App component functions (such as uiaxes function, uibutton function, etc.) in the code. The graphic window to which the component object belongs is created by the uifigure function, which is different from the traditional graphic window created in GUIDE.

2. Component attributes

Compared with control objects, component objects have fewer attributes, and the common attributes are as follows.

Enable attribute

Used to control whether the component object is available, the value is'On' (default) or'Off'.

Value property

Used to get and set the current value of the component object. For different types of component objects, their meaning and possible values are different.

● For numeric edit fields, sliders, spinners, meters, and knob objects, the Value property value is a number; for text edit fields and segmented knob objects, the Value property value is a string.
● For drop-down boxes and list box objects, the Value attribute value is the value of the selected list item.
● For checkbox, radio button, and state button objects, when the object is in the selected state, the Value attribute value is true; when the object is in the unselected state, the Value attribute value is false .
● For a switch object, when the object is in the "On" gear, the Value attribute value is the string'On'; when the object is in the "Off" gear, the Value attribute value is the character String'Off'.

Limits property

Used to get and set the value range of component objects such as sliders, spinners, meters, and knobs. The attribute value is a binary vector [Lmin, Lmax], Lmin is used to specify the minimum value of the component object, and Lmax is used to specify the maximum value of the component object.

Position attribute

Used to define the position and size of the component object in the interface, the attribute value is a four-element vector [x,y,w,h]. x and y are the x and y coordinates of the lower left corner of the component object relative to the parent object, and w and h are the width and height of the component object, respectively.

Three, the definition of the class

The application designed with App Designer adopts an object-oriented design pattern. Declaring objects, defining functions, setting properties and sharing data are all encapsulated in a class. A .mlapp file is the definition of a class.
The data becomes the properties of the object, and the functions become the methods of the object.

1. The basic structure of the App class

The basic structure of the App class is as follows:

          classdef　 class name            <matlab.apps.AppBaseproperties            (Access=public)            …… 　　endmethods            (Access=private)            Function function1（app,event） 　　　　　　…… 　　　　　end  　　　　　Function function2（app） 　　　　　　…… 　　　　　end 　　　end end

Among them, classdef is the keyword of the class, and the naming rule of the class name is the same as that of the variable. A string of characters guided by the following "<" indicates that this class inherits from the AppBase subclass of MATLAB's Apps class. The properties section is the definition of properties, which mainly contains property declaration code. The methods section is the definition of the method and consists of several functions.
App design tool automatically generates some function frameworks. The callback function of the control object has two parameters, and most other functions have only one parameter app. The parameter app stores the data of each member in the interface, and event stores the event data.

2. Access rights

Accessing data and calling functions are called accessing object members. There are two types of permissions to access members, namely, private (Private) and public (Public). Private members are only allowed to access in this interface, and public members can be used to share data with other classes of App.
In the .mlapp file, the attribute declaration, the interface startup function startupFcn, the function createComponents for creating interface components, and other callback functions are private by default.

4. Design examples of App design tools

The following examples illustrate the specific use of App design tools.
[Example] Generate an application program for observing the influence of the elevation angle of the viewpoint and the coloring (projection) of the coordinate axis on the 3D graphics display effect. The list at the top right of the interface is used to select the drawing function, the middle knob is used to set the viewpoint, and the segment knob at the bottom right is used to set the axis coloring method.
[ ]
The operation steps are as follows.

1. Open App Designer, add components

Select the "Axes" component [illustration] in the component library on the left of the App Designer window, drag it to the design area, and adjust the size and position. Add a list box, a switch button group, two knobs, a rocker switch and a division knob, and then adjust the position and size of the components as shown in the figure below.
[ ] Rename the control object. Select the knob object Knob in the component browser, and then press the F2 key to rename the knob object Knob to Knob_az; or right-click the knob object and select the "Rename" command item from the shortcut menu to modify. In the same way, rename the knob object Knob2 to Knob_el, rename the segmented knob object Knob3 to Knob_shading, rename the button object Button in the button group ButtonGroup to surfButton, rename the button object Button2 to meshButton, and rename the button object Button3 contour3Button.
Click the "Save" button in the toolbar to save the designed graphical interface as. mlapp file. For example, save it as appdemo0.mlapp.

2. Use the property panel to set the properties of the component object

In the design area of the design view, select each component object in turn, and set the properties of the component object in the corresponding property panel as follows.
[ ]

3. Write code to implement component functions

(1) Write a custom function

Write the updateplot function for drawing graphics and the updateview function for adjusting the viewpoint.
① updateplot function
Switch to the code view of App Designer, select the "Editor" tab in the ribbon, and click the "Add function" button in the toolbar. At this time, add a Private function framework, the structure is as follows:

          function results=            func1            (app)            end

You can also select the "Function" tab in the code browser of App Designer and click the "Add Function" button at the right end of the "Search" bar to add a private function frame. If you need to add a public function, click the expand arrow of the "Add Function" button and select "Public Function" from the expanded list.
Change the name of the above function func1 to updateplot. Since no return value is needed, delete the string "results =" in the function header. The updateplot function is used to draw graphics. Add the following code to the body of the updateplot function:

                      %According to the selection in the list box, determine the drawing data            switch            app.ListBox.Valuecase            'Sinc'[x,y]            =            meshgrid            (            -            8            :            0.3            :            8            )            ;            r=            sqrt            (x.            ^            2            +y.            ^            2            )            ;            z=            sin            (r)            .            /            (r+eps)            ;case            'Peaks'[x,y,z]            =peaks;case            'Sphere'[x,y,z]            =sphere;            end            %Determine the drawing method according to the button pressed in the switch button group            switch            app.ButtonGroup.SelectedObjectcase            app.surfButtonsurf            (app.UIAxes,x,y,z)            app.Knob_shading.Enable=            'On'            ;case            app.meshButtonmesh            (app.UIAxes,x,y,z)            app.Knob_shading.Enable=            'Off'            ;case            app.contour3Buttoncontour3            (app.UIAxes,x,y,z)            app.Knob_shading.Enable=            'Off'            ;            end

② updateview function
Create the updateview function framework for updating the coordinate axis viewpoint in the same way, and then add the following code to the updateview function body:

          el=app.Knob_el.Value;            az=app.Knob_az.Value;            view            (app.UIAxes,az,el)

(2) Write component object callback function

① Write a response code for opening the user interface. In the design view, right-click the blank area of the graphics window and select the "Add StartupFcn Callback" command item under "Callback" from the shortcut menu. At this time, you will switch to the code view, and the StartupFcn function frame is added to the code. The structure is as follows:

                      %            Code that executes after component creation function            startupFcn            (app)            end

You can also select the "Callback" tab in the code browser, click the "Add Callback Function" button at the right end of the search bar, and select the component, callback, and modify the callback function name in the pop-up "Add Callback Function" dialog box (default The name is the same as the callback), and then click the "OK" button to add the StartupFcn function frame. To open the user interface during operation and use the default data and drawing functions to draw graphics, add the following code to the StartupFcn function body:

                      updateplot            (app)

② Write response codes for the list box and switch button group. In the design view, right-click the list box object ListBox and select the "Add ListBoxValueChanged Callback" command item under "Callback" from the shortcut menu. At this time, you will switch to the code view and add ListBoxValueChanged to the methods section of the code. The function frame is as follows:

          methods            (Access=private)%Value changed function:            ListBox 　　function            ListBoxValueChanged            (app,event)            end end

When the program is running, the user selects a drawing data source in the list box, and the updateplot function is called to draw the graph, so enter the following code in the body of the ListBoxValueChanged function:

                      updateplot            (app)

Clicking a button of the switch button group will also redraw the shape, so create the callback function ButtonGroupSelectionChanged of the button group in the same way, and enter the above code in the function body.
③ Write the response code for the knob object. Establish the callback function Knob_azValueChanged of the knob object for setting the azimuth angle of the viewpoint and the callback function Knob_elValueChanged of the knob object for setting the elevation angle of the viewpoint, and enter the following code in the function body of the two functions:

                      updateview            (app)

④ Write a response code for the segmented knob. The segmented knob is used to set the shading method, establish the callback function Knob_shadingValueChanged of the object, and enter the following code in the function body:

                      shading            (app.UIAxes,app.Knob_shading.Value)

⑤ Write the response code for the rocker switch. The rocker switch is used to show/hide the grid, establish the callback function SwitchValueChanged of the object, and enter the following code in the function body:

                      switch            app.Switch.Valuecase            'On'grid            (app.UIAxes,            'On'            )            ;case            'Off'grid            (app.UIAxes,            'Off'            )            ;            end

4. Run the app

Click the "Run" button on the toolbar of the "Designer" tab of the App Designer ribbon (or click the "Run" button in the quick access toolbar, or press the F5 key) to run the program and open the user interface.
In the running window, adjust the amplitude ratio to 3, the phase difference to 90°, the white noise switch to "On", and click the "Start" button.

5. Package App

The program runs successfully, and the program can be packaged as a MATLAB application module. Click the "App Packaging" button in the toolbar of the "Designer" tab of App Designer, and the "Application Packaging" dialog box will pop up.
As shown in Figure 10.13, enter "SuperpositionofWaves" in the application name field under "Describe your App" in the middle of the dialog box, and the output file of "Package as installation file" on the right side of the dialog box Specify the output folder of the packaged file in the "Folder" column. Then click the "Package" button.After packaging is complete, the link "Open output folder" appears on the left of the dialog box. Click this link, you can see that two files are generated in the output folder, namely SuperpositionofWaves.prj and SuperpositionofWaves.mlappinstall.
Find the file Superposi tionofWaves.mlappinstall in the "Current Folder" of the MATLAB desktop, double-click this file, and the "Installation" dialog box shown in Figure 10.14 will pop up.
[ ]
Click the "Install" button in the dialog box to install. After the installation is successful, select the "APP" tab of the MATLAB desktop, click the "Show More" button at the right end of the toolbar, and you can see that this application module has been added to the application list. After that, this module can be used in other MATLAB programs.

Thinking and experimenting

1. Thinking questions
1. Compare the influence of Units attributes on the length of the measurement. Create two windows separately, the first window uses pixels as the unit of measurement, and the window size is 400×300. The second window uses relative measurement units, and the window width and height are respectively 40% and 30% of the screen.
2. In GUIDE, what attributes are commonly used as identifiers to distinguish control objects?
3. Use GUI functions and GUIDE tools to build a graphical user interface, which contains a coordinate axis and a button. Run the user interface, click the button, and draw the function on the coordinate axis $f(x)=sin(1/x)$ curve. Compare the definition methods of the two callback functions.
4. Create an application with GUIDE and App design tools respectively. The user interface of the program contains an editable text box (edit field), a label and a button. Run the program, click the button, enter a real number from the text box, and output the sine value of the number in the label. Compare the two methods of establishing the user interface, and the method of obtaining/setting the property value of the control object in the callback function.
2. Experimental questions
1. Design a user interface, which has a static text object, an editable text box, two check boxes and a set of radio buttons. Enter a number in the edit box and click the button to set the size of the text in the static text box; check boxes are used to set whether the text is bold or italic; radio buttons are used to set the font color.
2. Draw an Archimedes spiral and create a shortcut menu associated with it to control the color of the curve.
3. Design the user interface, input the values of the parameters a, b and n from 3 editable text boxes respectively, and draw the polar coordinate function $ρ=acos(b+nθ)$ Curve, examine the influence of parameters on the curve.
4. Use the App design tool to create an App. The App running interface contains a coordinate axis, a knob, a segmented knob and a button. The value range of the knob is [0,5], and the value range of the segmented knob is [1,4]. Run the app, click the button on the interface, get the value of m from the knob, get the value of n from the segment knob, and draw the following curve on the coordinate axis:

$\begin{cases}x=msint \\ y=ncost \end{cases}$
$t\in[0,2\pi]$

The problem i encountered

When copying the code, there is a red line, indicating that the number of characters is invalid, just delete the red line.

There are also some letter writing errors. After correction, it runs successfully: