Basic operations of the new version of Matlab interactive interface

Note: This tutorial only applies to versions after 2016b. It is recommended to install the latest version of Matlab after 2019b.

Different from the original GUIDE, the new version of App Designer is more reasonable in programming, more beautiful, and generally very easy to use. If you have not learned GUIDE before, then it is a good choice to directly start the new version of the interactive interface. After all, history never goes backwards.
However, at present, App Designer is used by relatively few people, and its compatibility is slightly worse (the program you write cannot be opened by others, and you need to install RunTime to run it). Compared with GUIDE, there are fewer tutorials.

Create a new app project

Insert image description here

Pre-design work

First make a layout of the overall interface. The left side is the toolbar, and the right side is used to adjust the appearance, color, etc. of the control after selection.
Insert image description here
First drag in a network layout. If you find it troublesome, you don’t need to drag it. This step is for neatness and good looks.

Drag into controls

Drag a panel, drawing, slider, and instrument respectively, as shown in the figure below. The
desired function is to display the value in real time by sliding the slider and draw sin (5*slider value).
Insert image description here
First, right-click on the slider and select Add a callback (usually only input will have a callback, and the displayed control does not have a callback function). I have added it here, so it will become Go.

Insert image description here

Add a program to the callback and write the idea, (app.control name.value) = callback value (input value). Of course, other parameters can also be adjusted, the same is true for this (app.control name.parameters). changingValue is a kind of callback that changes in real time. The ordinary callback is Value. The value will be returned only after the slider is dragged. It depends on which one you need.

            app.NumEditField.Value=changingValue;
            app.Gauge.Value=changingValue;
            x=0:0.01:(changingValue/180)*pi;
            y=sin(5*x);
            plot(app.UIAxes,x,y,'-r');

Effect