Getting started with MATLAB App Designer (two)

In order to facilitate the summary, the table of contents here follows the first one.
Series of articles catalog:

Note: The actively created controls and automatically created controls mentioned many times in this article refer to:
Actively created controls: Controls created programmatically.
Automatically created controls: created by dragging and defining initial properties in the inspector Control

Getting Started Actual Combat 2-2048 Mini Game App

7. How to create controls in batches-control matrix creation

Although we can create multiple controls by dragging and dropping, adding attributes to them one by one is too troublesome.
Each control automatically created by the app is actually equivalent to several public properties of the app. We naturally think of adding a control matrix where the properties are added, and assigning values to its position, color and other properties in startupFcn .
In the 2048 Mini Game App, what we need to create in batches is a number of cards (some currently have no numbers):

A total of 4x4=16 have to be created, and an appropriate number is needed to distinguish each card. At this time, we can create a control matrix and determine which control to modify or call through a number of pairs like (i, j ).
We first add the name of the control matrix to be created in the area of adding attributes:
Insert picture description here
then create controls in batches through the for loop: It

should be noted that the use of control matrix creation can only use set to change its attributes, and there is no guarantee that App Designer will only allow it in the future Using point assignment, I thought of the structure method introduced next.

8. How to create controls in batches-create structure controls in batches through strings

Still need to add the name of the structure control to be created in the attribute creation area.
In the startupFcn function, we need to construct a string containing i, j information, for example, Num12 represents the control in the first row and second column.
The string is created as follows:

for i=1:4
	for j=1:4
	tempStr=['Num',num2str(i),num2str(j)];
	end
end

After that, you can create a control from each string. The creation method is as follows: It
Insert picture description here
should be noted that when creating and adjusting, the string must be in parentheses. We can have two calling methods when calling, for example, the second line The first column of control text is changed to'title' as an example:
1 Direct call:

app.drawSquareHdl.Num21.Text=‘title’;

2 string call

string=‘Num21’;
app.drawSquareHdl.(string).Text=‘title’;
或者
app.drawSquareHdl.(‘Num21’).Text=‘title’;

9. Hierarchy of controls

Here is just a little mention. Since the controls created in startupFcn are generated last, they are usually at the top of all controls. Therefore, in this program, in order to ensure that the controls of the game end interface are on the digital card, the game end interface The control is also written in startupFcn , and the same writing position needs to be behind the digital card, otherwise the following situation will occur:

10. Independent creation of callbacks and virtual controls

We can easily create a callback by pressing the button, but the control we wrote in the startupFcn cannot add a callback. At this time, we have a bold idea, that is, to create a useless control and hide it. I call it virtual. Controls , and then we can make our self-created controls and virtual controls share a callback function to implement the function of adding callbacks to the self-created controls.
As shown, here the save picture button is created autonomously (otherwise it cannot appear above the digital card)

In order to add a callback to it, we need to create a useless button and hide it:

Then create a callback for the virtual control:

In order to make two buttons share a callback, we write such a line in **startupFcn**

app.SavePicButton.ButtonPushedFcn=createCallbackFcn(app, @SavePicFcn, true)

It can be noticed that such an active callback creation method is very similar to the automatically created callback, which is created through createCallbackFcn:
Insert picture description here
another: when multiple automatically created controls share a callback, the comment above the callback will be displayed:

but the actively created control When using the callback, it will not be displayed in the comment:

11.Store UIFigure as an image

This is really helpless. Someone raised this question five or six years ago. App designer still has no corresponding function. There are two mainstream methods:
Method 1:
Use the images, controls and other objects in the UIFigure Redraw the figure again, and then use the functions available for the figure to store it as a picture. In this process, you can set the figure to be invisible, but this method is a bit nondescript. Obviously abandoning the figure and using the UIFigure, the result is still when storing the picture. Use the old method.
Method
two: . . . . . . . . . . Call the function in java to take a screenshot, and then get the Position property of UIFigure. . . . . . Then use imwrite to store the part of the picture that you need. This 2048APP uses this method, the
code:
(Because I want to take a screenshot of the border together, it will increase or decrease a certain amount of pixels)

screensize=get(0,'screensize');
screensize=1.5*screensize;
robot=java.awt.Robot();
rectangle=java.awt.Rectangle();
rectangle.x=0;
rectangle.y=0;
rectangle.width=screensize(3);
rectangle.height=screensize(4);
image=robot.createScreenCapture(rectangle);
data=image.getData();
temp=zeros(screensize(3)*screensize(4)*3,1);
temp=data.getPixels(0,0,screensize(3),screensize(4),temp);
temp=uint8(temp);
R=temp(1:3:end);
G=temp(2:3:end);
B=temp(3:3:end);
R=reshape(R,[screensize(3),screensize(4)]);
G=reshape(G,[screensize(3),screensize(4)]);
B=reshape(B,[screensize(3),screensize(4)]);
R=R';
G=G';
B=B';
ima=cat(3,R,G,B);
tempPos=app.Game2048AppbyslandarerUIFigure.Position;
xp=tempPos(1);yp=tempPos(2);xl=tempPos(3);yl=tempPos(4);
tempIma=ima(round(yp.*1.5+20):round((yp+yl).*1.5+80),round(xp.*1.5-15):round((xp+xl).*1.5+15),:);
[filename, pathname] = uiputfile({
    
    '*.jpg;*.png','All Image Files';...
    '*.jpg','JPG';'*.png','PNG' });
imwrite(tempIma,[pathname,filename]);

12. The unselectable state of the control

I also want to mention a little bit here. The unselectable state of the control (Enable) can reduce the overall transparency of the control, which can be used to make the game end interface:

In addition, if you want to make such an interface, you need to ensure that there is no overlap between certain controls. Otherwise, the following picture will appear:
Insert picture description here

I believe that after reading this article carefully, you already have the ability to restore the mlapp file. Here is the link between the m version and the mlapp version:
MATLAB 2048 mini game m file link: matlab 2048 mini game
MATLAB 2048 mini game mlapp file link: Game2048App.mlapp