Getting started with MATLAB App Designer (3)

Although the issues in this issue are relatively few, they are more comprehensive.
Series of articles catalog:

The third part of the introduction to actual combat-Lianliankan Mini Game App

13. Get all the image links in the folder in APP Designer

The dir function can still be used in APP Designer. For example, if we want to get the links of all jpg pictures in the folder named "Pictures", we can go through the following steps:

path='The link address of the picture folder';
For example:
path='E:\MATLAB\R 2019b\bin\lianliankan\picture';

Get all the information of the jpg image through the dir function
picInformation=dir(fullfile(path,'*.jpg'));

Extract the name of the i-th picture and synthesize the complete path:
picPath=[path,'',picInformation(i).name];

14. How to determine the serial number of the picture clicked by the mouse

Raise this issue because lianliankan a full 6x8 = 48 photos
↓↓↓↓↓↓ ↓↓↓↓↓↓ ↓↓↓↓↓↓ ↓↓↓↓↓↓ ↓↓↓↓↓↓
Insert picture description here

It is difficult to determine the serial number of a picture group that meets the following two conditions when it is clicked

A lot of pictures
The position of the picture is not neat

At this time we easily have an idea, why don't we make pictures into buttons? To achieve this we will consider UIimage of ImageClicked callback, but there is a problem that a large amount of pictures, we need to batch create images, but to create a batch of images need to write in startupFcn in, startupFcn created controls do not directly Create a callback. At this time, you need to use the virtual control in question 10 to create an invisible UIimage control to add a callback, and let the batch created controls share a callback with it. The steps are as follows:
1. Create a batch of controls in startupFcn and assign them Attribute
Insert picture description here
2: Drag and drop to create a UIimage object and hide it

.

.

Third, add callbacks to virtual controls and let the batch-created controls share callbacks with them
.

To add callbacks to the self-created controls as mentioned in the previous issue, you need to borrow
createCallbackFcn , so we can add a line in the loop

set(app.drawPicHdl(i,j),'ImageClickedFcn',createCallbackFcn(app, @VirtualImageClicked, true))

Insert picture description here

At this time, we observe the structure of the created callback: we

find that the callback created by the UIimage object does not have the object input variable like the callback created by the image object, but fortunately there is an event that can be done in the article. Let’s check the properties of the event. :

It is found that it has a Source attribute, which points to the original graphic object, and the original graphic object can be used as information to effectively identify the serial number:

Tag: Tag
UserData: User data
Position: Graphic position

These three attributes can be used to separate which picture is which picture. I Tag is more practical, but if your serial number is in pairs, you will find that UserData is really fragrant.

Fourth, add UserData property to the control,
just write one more line, good news.
Insert picture description here
So we can call back in ImageClicked , through:

event.Source.UserData

Know which picture you clicked:
Insert picture description here

15.How to draw a line above the picture

When UIAxes is under UIimage or other controls, the drawn image is also under UIimage or other controls. When UIAxes is on top of them, the following situation will appear:
Insert picture description here
We naturally think that if it is adjusted to be transparent, it will be better. , But unfortunately we found that the middle white area can be adjusted to colorless:

but the background color can be adjusted to any color except colorless. . . . . . . . . . . . . '. . . . . . . . . . . . .
Insert picture description here
The idea of drawing a curve directly is disillusioned, but we. . . . . . There is another idea that is. . . . . Uilabel, yes, it is a small label that can write and change color. Isn't a straight line a narrow rectangle (covering the face), but it should be noted that uilabel also has borders, and the width of the left and right borders and the upper and lower borders are not the same. Need to adjust the data appropriately when drawing, we can realize the connection function of Lianliankan through uilabel:
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 Link Liankan Mini Game m file link: MATLAB Lianliankan Mini Game
MATLAB Lianliankan Mini Game mlapp File link: MATLAB Lianliankan Mini Game APP (mlapp)