Before getting started

A graphical user interface, or GUI, is simply the visible layer through which people interact with a computer. In a broad sense, even the browser used to read this page is a GUI: it displays information, lets you click buttons such as minimize, maximize, and close, and gives you a way to work with content without touching underlying code.

When people say they want to "build software," what they often really need is an interface that sits on top of backend algorithms. Most users do not read backend code, but they still want to use the functionality it provides. That is why a clear, tidy, easy-to-use, and reasonably attractive GUI matters so much. It makes an algorithm far more usable in practice.

Handing users raw code and saying, "Here, just tweak a few parameters and you'll get what you want," usually does not work. Most people will only feel overwhelmed when they see source code. Instead of feeling empowered, they start resisting the tool—and may even question whether the implementation is reliable.

Take a simple example. Suppose someone writes a Kalman filtering program and gives users this:

mode = 'IF';
% mode = 'UD';
% mode = 'FD';
% mode = 'FT1';
% mode = 'FT2';

Then explains: if you want information filtering, uncomment mode = 'IF'; if you want UD filtering, uncomment mode = 'UD'; and so on.

And of course, do not forget to comment out all the other modes, or bugs may appear.

That alone is enough to confuse many users. They may not even remember which line corresponds to which algorithm.

It gets worse if the code is not written clearly in the first place, for example:

aaa = '1';
% aaa = '2';
% aaa = '3';
% aaa = '4';
% aaa = '5';

At that point, nobody can tell which line stands for which filtering method.

A GUI solves this immediately. Even a very simple selector makes things clearer:

Now the user does not need to inspect backend code at all. They can choose the filtering mode they want and confirm it directly.

But a single selector is still not enough. What if the user wants to adjust algorithm parameters? Simulation length, initial state, noise matrices, and so on all need some place in the interface.

So the interface has to evolve into something more complete:

With a GUI like this, users can choose the filtering mode, decide whether to save figures and data, modify simulation parameters, and even view the key formulas behind different filtering methods. At that point, it is no longer just a control panel—it can be treated as an actual piece of usable software.

What follows is a practical walkthrough of GUI development based on MATLAB 2018. Later MATLAB versions introduced App Designer, which largely replaced GUIDE, but this tutorial focuses specifically on the GUI workflow in MATLAB 2018.

The discussion proceeds in this order:

• how to launch MATLAB GUI development;
• push buttons;
• property inspection;
• callback functions;
• pop-up menus;
• radio buttons and check boxes;
• static text and editable text;
• axes;
• groups;
• progress bars;
• GUI source code structure.

Launching MATLAB GUI

Open MATLAB and enter the following in the command window:

guide;

That opens the GUI creation window:

Choose New GUI, then select Blank GUI (Default), pick a save location, and click confirm.

A new design window will appear:

Its main areas are worth understanding before doing anything else.

1. Area 1 contains the toolbar. The most useful button here is the green triangle at the end, which runs the GUI so you can preview the result. The other toolbar buttons are not especially important at the beginning.
2. Area 2 is the control palette, which contains the widgets you can drag into the GUI. In practice, the most commonly used ones are: - push button; - radio button; - check box; - edit text; - static text; - pop-up menu; - axes; - group.
3. Area 3 shows the GUI tag. This becomes important when working with handles.
4. Area 4 shows the current mouse position within the GUI and the position and size of the selected control. - 当前点: [369,451] means the mouse is 369 pixels from the left side of the GUI and 451 pixels from the bottom. - 位置: [760, 584, 567, 630] means the selected control is positioned relative to its parent object, with width 567 pixels and height 630 pixels.

Push Button

Viewing and editing properties

Select the push button control from the palette and drag it into the GUI:

Double-click the button to open the Property Inspector.

The inspector is where most of the real setup happens.

There are two viewing modes in the inspector: grouped by function or listed alphabetically. The grouped view is generally easier to work with.

For a button, the key property categories are:

• Appearance: background color, text color, and related visual settings;
• Font Style: font formatting;
• Identifiers: the control's tag;
• Text: the displayed label.

After some basic styling, the button can look more polished:

The same basic idea applies to other controls as well: drag the control in, open the inspector, and set its properties there.

How to name tag

By default, a new button gets a generic tag such as pushbutton1. That is not useful once the interface grows. If the GUI contains many controls, generic tags quickly become impossible to manage.

A practical naming habit is to use underscores in the form function_controltype. For example, a button that starts a simulation might be named simu_btn.

A consistent naming pattern for common controls could look like this:

• pop-up menu: xxx_ppmenu;
• radio button: xxx_rbtn;
• check box: xxx_cbox;
• static text: xxx_txt;
• edit text: xxx_edit;
• axes: xxx_axes;
• group: xxx_group.

Readable tags make the code much easier to understand later.

Callback functions

Right-click the button, choose View Callbacks, then select Callback. MATLAB will generate the corresponding callback function automatically.

You will then see MATLAB create the related code section:

This is the core of GUI behavior.

If you want the interface to actually do something, the logic needs to be written inside callback functions. That is where button clicks, value changes, selections, and other interactions are handled.

The same principle applies to other controls as well: their behavior is implemented in their own callbacks.

The basic workflow

Using a button—or really almost any control—comes down to three steps:

1. drag the control into the GUI;
2. open the inspector and set the needed properties;
3. write the callback code.

Pop-up Menu

A pop-up menu serves a similar purpose to a listbox, but it uses less screen space. In many GUI projects, it is a very convenient way to present several mutually exclusive options.

It looks like this in the interface:

The items such as “Option 1,” “Option 2,” “Option 3,” and “Option 4” are set in the inspector:

Specifically, they are entered in the string field of the text settings, with one option per line.

Once the menu items are set, the next important question is how to read the selected value. The code is:

mode_flag = get(handles.filter_ppmenu,'value');

The get() function retrieves the control's value. Here, the pop-up menu's tag is filter_ppmenu, so the line means: get the value of the handle named filter_ppmenu.

After retrieving that value, a switch() statement can be used to choose the corresponding action:

switch mode_flag
    case 1
        % 想要实现的功能
    case 2
        % 想要实现的功能
    case 3
        % 想要实现的功能
    case 4
        % 想要实现的功能
    case 5
        % 想要实现的功能
end

One easy mistake deserves attention: when mode_flag=1, that often corresponds to the default placeholder item rather than a real algorithm choice. Actual selectable options may begin at 2. If that feels error-prone, it is simpler to avoid placeholder text and let the first entry be a real option.

Radio Button and Check Box

A radio button is the circular selectable control typically used when one option should exclude others.

A check box is the square control used when multiple choices can be combined.

Usually, selecting a radio button either cannot be undone directly or causes other competing options to be deselected. A check box, by contrast, allows multiple selections, and selected items can also be cleared again.

They look like this:

These controls are conceptually simple. Their most important role in the GUI is to provide a value indicating whether they are selected.

The corresponding code is:

% 单选框获取值的方式
xxx_rbtn_flag = get(handles.xxx_rbtn,'value');
% 复选框获取值的方式
xxx_cbox_flag = get(handles.xxx_cbox,'value');

Static Text and Edit Text

Static text is used for fixed labels. Edit text is used for user input. That is the essential difference between them.

They look like this:

Static text usually does not need any further handling once placed on the GUI. The editable text field is the one that matters during program execution.

To read text from an edit field:

xxx_edit_str = get(handles.xxx_edit,'string');
xxx_edit = str2double(xxx_edit_str);
% xxx_edit = str2num(xxx_edit_str);

Here, you do not use value; you use string, because the content stored in an edit box is text.

If the text represents a number, it must be converted with str2double() or str2num() before numerical operations can be performed.

You can also set the contents of an edit field by code:

set(handles.xxx_edit,'string','Hello, world!');

That gives you programmatic control over what appears in the editable text box.

Axes

Axes are typically used to draw simulation curves or insert images.

In earlier projects, axes were used to display algorithm simulation curves with code like this:

axes(handles.xxx_axes);
plot(xxx);

To clear the plot from an axes object:

axes(handles.xxx_axes);
cla;

Notice that both plotting and clearing begin with axes(handles.xxx_axes). That line specifies which axes should be operated on. If a GUI contains several axes and you do not explicitly select one, MATLAB does not know where the plotting command should go.

Axes can also be used to insert images:

axes(handles.xxx_axes)
image(imread('xxx.png'));
axis off;

The first line selects the target axes.

The second line inserts the image.

The third line hides the coordinate axes.

In practice, axes can even be used to place a background image in the GUI. If the layout is planned in advance, a simple background can be prepared and then inserted into the interface to make the whole GUI look cleaner and more intentional.

Even a modest background treatment can make the interface look noticeably better.

One issue remains worth noting: placing the image-loading code inside xxx_axes_CreateFcn() may cause the axes tag to disappear when reopening the GUI's .fig file, while putting the same code inside another control's Callback() does not seem to cause that problem.

Group

A group, also called a panel, is used to contain other controls. It is a convenient way to organize related interface elements by function or by object.

A common approach is one group per object or one group per functional section. This improves efficiency when designing larger interfaces: once one group is laid out properly, it can be copied and reused instead of rebuilding every cluster of controls from scratch.

Progress Bar

A progress bar gives users a sense of what the algorithm is doing and how far along it is. That feedback matters a great deal.

Without a progress bar, users may assume the program has stalled, lose patience, and close the GUI. In some cases, that can lead to unstable behavior or interrupted computation.

The simplest progress bar code is:

h = waitbar(1,'算法仿真中......','name','目标跟踪仿真软件');

What this means:

• 1 indicates a fully filled progress bar;
• '算法仿真中......' is the text shown in the bar;
• 'name','目标跟踪仿真软件' is the title shown at the top left of the progress window.

If you want to display percentages, use:

h = waitbar(0,'算法仿真中......','name','目标跟踪仿真软件');
for i = 1:nt-1
    per_str = fix(i/nt*100);
    str = ['算法仿真中......',num2str(per_str),'%'];
    waitbar(i/nt,h,str);
end
close(h);

If you prefer a simpler moving progress bar without explicitly showing percentages:

h = waitbar(0,'算法仿真中......','name','目标跟踪仿真软件');
for i = 1:nt-1;
    waitbar(i/nt);
end
close(h);

The close(h) line closes the progress bar handle. If it is left open, later plotting operations may accidentally target that window or produce other odd behavior.

A complete GUI example

With these pieces in place, it becomes possible to build a more complete interface rather than just isolated controls.

Here is the finished example shown earlier:

This GUI includes the following functions:

• selection among multiple filtering methods, including:
• information filtering;
• UD filtering;
• forgetting filtering;
• adaptive forgetting filtering;
• parameter input for filter and target states;
• data saving;
• saving simulation result figures;
• displaying the corresponding filter formulas for different algorithms;
• running the simulation;
• exiting the software.

The data-saving function supports both filename formats with the current date and without it:

That makes it possible to save simulation data for different filtering algorithms and at different times in an organized way.

The saved figure output looks like this:

Simulation results are stored according to filter type and function, which makes later retrieval much easier.

A little attention to folder organization also helps. Separating files into different directories by function keeps the GUI project tidy and prevents users from opening the working folder only to find a cluttered mess. It also makes the codebase itself feel more orderly.

One final note on terminology: when discussing positions in MATLAB GUI layout, a parent object is the object that other controls depend on for placement. For example, if a group contains two buttons, the buttons' displayed positions are relative to the group. The group itself is then positioned relative to the GUI.