Visual Graphical User Interface Design of MATLAB

1. Graphical user interface design

• MATLAB provides a Graphical User Interface Development Environment (GUIDE), in which the user interface design becomes convenient and intuitive, realizing the visual design of "what you see is what you get".

1. Graphical User Interface Design Window

1.1 Graphical User Interface Design Template

• Enter guidecommands in the MATLAB Command Window, or select the Home tab in the MATLAB main window, click the New command button in the File command group, and choose Application ⟶ \ $⟶$ GUIDE command, the "GUIDE Quick Start" window pops up, as shown in the figure below.

• MATLAB has prepared 4 templates for graphical user interface design, namely Blank GUI (Default), GUI with Uicontrols (graphical user interface template with control objects), GUI with Axes and Menu (graphical user interface template with coordinate axes and menus) ) and Modal Question Dialog (GUI template with modal question dialog).
• When the user selects a different template, the GUI corresponding to the template can be previewed in the "Preview" bar.

1.2 Graphical User Interface Design Window

• Select a template in the GUI design template, and then click the "OK" button, and the GUI design window will open. Selecting different GUI design modes will result in different results displayed in the GUI design window. The figure below shows the GUI design window displayed after selecting the Blank GUI design template.

• The graphical user interface design window is composed of menu bar, tool bar, control toolbox, graphic object design area and other parts.
• On the left side of the graphical user interface design window is the control toolbox, which contains controls such as "button", "editable text", "coordinate axis", "panel" and "button group". Select a control and add it to the graphic object design area by dragging to generate a control object.
• Right-click the graphic object, and a shortcut menu will pop up, from which the user can select a menu item for corresponding design.
• For example, if we select the CallBack, CreateFcn, DeleteFcn, ButtonDownFen, KeyPressFcn and other commands in the "View Callback" submenu, we can open the code editor to write the program code that needs to be executed when the corresponding event occurs.
• The status bar at the lower part of the GUI design window is used to display the Tag property and position property of the current object.

2. Visual GUI design tool

• The GUI design tools commonly used in MATLAB are Object Property Inspector, Menu Editor, Toolbar Editor, Align Object Tool, Object Browser, and Tab Order Editor.

1.1 Object Properties Inspector

• Using the object property inspector, you can check the property values ​​of each object, and you can also modify and set the property values ​​of the objects. By double-clicking an object, or with an object selected, click the Properties Inspector command button from the GUI Design window toolbar, or select View $⟶$ "Property Inspector" command to open the "Object Property Inspector" window, as shown in the figure below.

• Alternatively, enter the command "inspect" on the command line of the MATLAB Command Window to open the Object Property Inspector.
• After selecting an object, you can view the properties of the object through the object property inspector, and you can also modify the properties of the object conveniently.

2.2 Menu Editor

• Using the menu editor, you can create, set, and modify drop-down menus and shortcut menus. Click the Menu Editor command button from the toolbar of the GUI design window, or select Tools $⟶$ "Menu Editor" command to open the "Menu Editor" window, as shown in the figure below.

• The first button in the upper left corner of the menu editor is used to create a first-level menu item, which can be clicked to create a first-level menu item. The second button is used to create a submenu. After selecting the created first-level menu item, you can click this button to create a submenu of the selected first-level menu item.
• After selecting a created menu item, the right side of the menu editor will display the relevant properties of the menu item, where you can set and modify the properties of the menu item.
• The figure below shows the two first-level menu items of "Draw Curve" and "Parameter Setting" created by the menu editor, and under the first-level menu of "Draw Curve", two items of "Sine Curve" and "Cosine Curve" have been created. There are three submenus under the first-level menu of "Parameter Setting", three submenus are "Frame Line", "Color" and "Mark".

• The 4th and 5th buttons on the upper left corner of the menu editor [used to change the level of menu items, the 6th and 7th buttons are used to move up and down the selected menu horizontally, and finally The button on the right is used to delete the selected menu.
• The main properties of the menu are listed on the right side of the menu editor. The value of the "label" attribute is a string, which is used as the identifier of the menu item; the value of the "label" attribute is a string, which is used to define the name of the menu item; the value of the "shortcut key" attribute is any letter, used for Define the shortcut key of the menu item; the 3 check boxes represent the appearance attribute of the menu item; the value of the "callback" attribute is a string, which can be a script file name or a group of MATLAB commands.
• After the menu item is selected, MATLAB will automatically call this callback function to respond to the corresponding menu item.
• The menu editor has two tabs, select the "Menu Bar" tab to create a drop-down menu.
• Select the "Context menu" tab to create a shortcut menu. When the Context Menus tab is selected, the 3rd button in the upper left corner of the menu editor becomes available, click this button to create a shortcut menu.

2.3 Toolbar Editor

• Use the toolbar editor to create, set, and modify toolbars.
• Click the Toolbar Editor command button from the toolbar of the GUI design window, or select Tools $⟶$ "Toolbar Editor" command to open the "Toolbar Editor" window, as shown in the figure below.

• The upper part of the "Toolbar Editor" window is the designed toolbar, the left half is the tool palette, and the right half is used to add and delete tool buttons and set the properties of tool buttons and toolbars. By using separators, the grouping effect of tool buttons can be achieved.
• Buttons such as "New" and "Open" can only design callback methods when they are clicked, and generally use the default callback method. Toggle buttons such as "Zoom in" and "Zoom out" can not only design the "click callback" method, but also design the callback method when the button is turned on and off.

2.4 Align Object Tool

• Using the Align Object tool, you can adjust the position of multiple objects in the GUI object design area.
• With multiple objects selected, click the Align Objects command button string on the GUI Design window toolbar, or choose Tools $⟶$ "Align Object" command to open the "Align Object" window, as shown in the figure below.

• The "Align" group buttons in the "Align Objects" window are used to adjust the alignment direction, and the "Distribute" group buttons are used to adjust the object spacing.

2.5 Object Browser

• Using the Object Browser, you can view each handle graphic object at the current design stage.
• Click the Object Browser command button pad from the toolbar of the GUI design window, or choose View $⟶$ "Object Browser" command to open the "Object Browser" window, as shown in the figure below.

• In the "Object Browser" window, you can see each graphics object that has been created, as well as the graphics window object. Double-click any object in the diagram with the mouse to enter the object's property inspector interface.

2.6 Tab sequence editor

• With the Tab key order editor, you can set the order in which objects are selected when the user presses the Tab key on the keyboard.
• Click the Tab Order Editor button from the toolbar of the GUI design window, or select Tools $⟶$ "Tab Key Order Editor" command to open the "Tab Key Order Editor" window.
• For example, if 3 objects are created in the GUI design window, the tab sequence editor corresponding to them is as shown.

• In the Tab Order Editor window, you can see the objects you have added. There are two buttons on the upper left corner of the interface, which are respectively used to set the order in which objects are selected when the Tab key is pressed.

3. Visual GUI Design Example

• Using the graphical user interface design tools introduced above, you can design a graphical user interface with friendly interface, easy operation, and powerful functions, and then complete the corresponding tasks by writing the event response process of the object. The specific usage methods of these tools are illustrated below through examples.
• For example, we utilize a graphical user interface design tool to design the user interface shown in the figure below. The interface includes an axes object for displaying graphics, including surface plots, grid plots, and contour plots. The function of drawing graphics is realized through 3 command buttons, and users can draw corresponding graphics by clicking the corresponding buttons. The data needed to draw the graph is selected through a list box. There are 3 options in the list box, respectively corresponding to MATLAB's data functions Peaks, Membrane and user-defined drawing data Sinc, and the user can load the corresponding drawing data by selecting the corresponding option.

• The operation steps are as follows.
• (1) Open the graphical user interface design window and add related graphic objects.
• First open the "GUIDE Quick Start" window, select the Blank GUI (Default) option, and click the "OK" button to open the graphical user interface design window. Select the "Coordinate Axes" control in the GUI Design Window Control Toolbox, and drag a rectangle in the graphics window to adjust the size and position of the rectangle. Add 3 more buttons, a list box, and a static text box, and adjust their size and position.
• (2) Use the property inspector to set the properties of the interface object.
• Set the String property and Tag property of the first button to "Mesh", set the String property and Tag property of the second button to "Surf", and set the String property and Tag property of the third button to "Contour3".
• Set the Tag property of the list box to ChooseFun, and then add list items: Click the icon behind the String property name, enter 3 options in the opened text editor: Peaks, Membrane and Sinc, use "I" as a separator between each option character, or use the Enter key as a delimiter. Note that 3 lines are entered, one option per line.
• Set the String property of the static text to "select drawing parameters".
• (3) Use the align object tool to adjust the position of the control.
• Select 3 buttons, and use the Align Object tool to set the first 3 buttons to be left-aligned, with equal width and height, and the same spacing.
• (4) Save the GUI.
• Select "File" $⟶$ "Save" command or click the "Save Figure" button in the toolbar to save the designed graphic interface as a .fig file.
• For example, save it as guidemo.fig, then the system will automatically generate a guidemo.m file. This M-file is used to save the program code of each graphic object.
• (5) Write code to realize the control function.
• If the implementation code is relatively simple, you can directly modify the CallBack property of the control. For more complex program codes, it is better to write M files.
• Click the "Editor" button in the toolbar of the graphical user interface design window to open an M file, and the graphical user interface development environment will automatically add the corresponding callback function frame. At this time, you can enter the corresponding program code.
• The callback function is the program that handles the event. It defines how the object processes information and responds to an event. This function will not run actively, but is called by the main control program. The main control program is always operating in the foreground. It analyzes, queues and processes various messages. When the control is triggered, it calls the specified callback function. After the execution is completed, the control returns to the main control program.
• Let gcbo be the handle to the object that is executing the callback, which can be used to query the properties of the object. For example:

get(gcbo,'Value')	%获取回调对象的状态

• MATLAB regards the Tag property as the unique identification of each control. When the graphical user interface development environment generates an M file, the Tag attribute is used as a prefix, placed in front of the callback function keyword Callback, and connected by an underscore to become a function name. For example:

function pushbutton1_Callback(hObject,eventdata,handles)

• Among them, hObject is the source control of the event, eventdata is the event data, and handles saves the handles of all objects in the graphical interface.
• handles saves the handles of all objects in the graphics window, you can use handles to get or set the properties of an object. For example, to set the text on the object Text1 in the graphics window to "Welcome" when the button Button1 in the graphics window is clicked, add the function Button1_Callback(hObject, eventdata, handles)following statement in the body of the function:

set(handles.text1,'String','Welcome') ;

• The graphical user interface development environment uses guidatathe function to generate and maintain handles, and fields can be added as required, and data can be saved in the specified fields of handles, so that data can be associated with graphic handles, thereby realizing data sharing between callbacks.
• ① Write the response code for the open graphics window event. Select the "Editor" tab of the MATLAB editor, click the "Go to" command button in the "Navigation" command group, select Function in the pop-up menu, and enter the following code under the guidemo. _OpeningFcncomment %vararginstatement beginning with :

handles.peaks=peaks(35);
handles.membrane=membrane;
[x,y]=meshgrid(-8:0.3:8);
r=sqrt(x.^2+y.^2);
sinc=sin(r)./(r+eps);
handles.sinc=sinc;
handles.current_data=handles.sinc;
surf(handles.current_data)

• ② Write the response code for the list box. Select ChooseFun_ Callbackthe function, and %handlesenter the following code under the comment statement beginning with :

str=get(hobject,'String');
val=get(hobject,'Value');
%设置用所选函数产生当前数据集
switch str{
    
    val}
case 'Peaks'
	handles.current_data=handles.peaks; 
case 'Membrane'
	handles.current_data=handles.membrane;
case 'Sinc'
	handles.current_data=handles.sinc;
end
%保存句柄结构
guidata(hobject,handles)

• ③ Write the response code for the Mesh button. Select Mesh _Callbackfunction, add the following code in this area:

mesh(handles.current_data)

• ④ Write the response code for the Surf button. Select Surf_Callbackfunction, add the following code in this area:

surf(handles.current_data)

• ⑤ Write the response code for the Contour3 button. Select Contour3_Callbackfunction, add the following code in this area:

contour3(handles.current_data)

• It can be seen that each control object has a function guided by the function statement, and the user can add program code in the corresponding function body to complete the specified task.
• When running the graphical user interface file, if one of the objects is clicked, the function is automatically called under the MATLAB mechanism.
• ⑥ Run the GUI.
• After saving the program code, select Tools in the GUI Designer $⟶$ "Run" command, or click the "Run Graphics" command button on the toolbar to get the desired GUI.
• After the graphical interface is saved, you can also directly enter the file name in the command line window to run. For example, you can type guidemo to run the interface saved above.
• For example, we add the default menu of the graphics window and a custom menu item "Settings" to the graphics window of the above example. The content of the "Settings" menu item is shown in the figure below, where the "Grid Line" submenu item controls adding grid lines to the coordinate axis, the "Border" submenu item controls adding a frame to the coordinate axis, and the "Background Color" submenu item Controls the background color of the graphics window.

• The operation steps are as follows.
• (1) Open the created GUI file.
• First open the "GUIDE Quick Start" window, select the "Open Existing GUI" tab, select the GUI file guidemo.fig created in the above example, open the file and save it as guidemo1.fig.
• (2) Display the default menu of the graphics window.
• Double-click the blank area of ​​the figure window to open the "Property Inspector" window, and set the MenuBar property of the figure window to figure. If you need to cancel the default menu of the graphics window in order to establish the user's own menu system, you can set the MenuBar property of the graphics window to none.
• (3) Add a custom menu.
• Click the "Menu Editor" command button in the toolbar of the GUI design window to open the "Menu Editor" window, create a new first-level menu item, set its "Label" property to "Settings", and "Mark" property to It is Option, and the "shortcut key: Ctrl+" attribute is set to O.
• Then create three second-level submenu items under the newly created "Settings" menu item, set their "Tag" properties to "Grid Line", "Border" and "Background Color" respectively, and set the Tag properties to hgon, hbon, hwc.
• Select the "Separator on this menu item" property of the "Background Color" menu item to add a separator line above this menu item.
• Then create three third-level submenu items under the "Background Color" menu item, whose "Label" attributes are set to "Yellow", "Blue", and "White" respectively, and the "Mark" attributes are respectively hweYellow, hwcBlue, hwcWhite , and the "shortcut key: Ctrl+" property is set to Y, B, W respectively.
• Check the "Add a check mark before this menu item" property of the "Gridline" and "White" menu items, so that these two menu items are preceded by the symbol "√ \ $\surd$”。
• (4) Write code to realize the custom menu function.
• ① Write a response code for the "Gridlines" menu item. Select hgon_Callbackthe function, and %handlesenter the following code under the comment statement beginning with :

if strcmp (get (gcbo, 'Checked'), 'on')
	set (gcbo, 'Checked', 'off');
	grid off;
else
	set (gcbo, 'Checked', 'on') ;
	grid on;
end

• ② Write the response code for the "Border" menu item. Select hbon_Callbackfunction, add the following code in this area:

if strcmp (get (gcbo, 'Checked'), 'on')
	set (gcbo, 'Checked', 'off') ;
	box off;
else
	set (gcbo, 'Checked' , 'on') ;
	box on;
end

• ③ Write response codes for the 3 color menu items. Select hwcYellow_Callbackfunction, add the following code in this area:

set(gcbf,'Color','y');
set(gcbo,'Checked','on');
set(handles.hwcBlue,'Checked','off');
set(handles.hwcWhite,'Checked','off');

• Select hwcBlue_ Callbackfunction, add the following code in this area:

set(gcbf,'Color','b');
set(gcbo,'Checked','on');
set(handles. hwcYellow,'Checked','off');
set(handles. hwcWhite,'Checked','off');

• Select hwcWhite_ Callbackfunction, add the following code in this area:

set(gcbf,'Color','w');
set(gcbo,'Checked','on');
set(handles.hwcYellow,'Checked','off');
set(handles.hwcBlue,'Checked','off');

• (5) Save and run the GUI.