Scaling a PNG image inside a Panel in a MATLAB APP

Hi all,

In my Matlab App, I've defined a grid layout in order to scale automatically all the components, but there is a specific panel, with only an image inside (a basic and static PNG image), that cannot scale properly. In particular, when maximizing the APP's window the panel scales correctly while the image stays the same (however, when minimizing, I've solved the problem using the "scrollable" function for the panel).

I really do not know how to solve it, it won't fix even by changing the "scaleMethod" for the image...

Thank you in advance for your precious time!

Answer 1

[Raghava S N]

Hi,

From my understanding of your post, you are looking to make an image that exists inside a panel of your MATLAB app resize automatically with the window, but this is not happening even when you have set the "scaleMethod" for the image.

There are two methods to go about this, and you can choose the better fit to the use-case.

In the first method, to make an image change size automatically in your MATLAB app, you can use a “uiimage” inside the panel. This method lets the image adjust its size when you resize the app window. The following steps can be followed to dynamically re-size the image:

1. Open Your App in App Designer: First, make sure your app is open in MATLAB's App Designer interface.
2. Go to the “Code View”: Switch to the "Code View" by clicking on the "Code View" button or by selecting the "DESIGN" tab and then choosing "Code View."
3. Locate the Properties Section: In the “Code View”, you'll find a section dedicated to properties. From the toolstrip - Editor > Insert > Property.
4. Add Your Property: Within the properties section, you can define a new property by typing its name (“img”)
5. Add a “uiimage” to the panel: Begin by placing a “uiimage” component inside the panel where you want the image to appear. This is done with a bit of code that can be placed in the startup function callback (“startupFcn”) for the app:

app.img = uiimage(app.YourPanel); % Replace 'YourPanel' with the actual name of your panel

app.img.ImageSource = 'path/to/your/image.png'; % Use the path to your image

6. Make the Image Resize Automatically: To have the image change size when the panel does, you will have to set a “SizeChangedFcn” callback for the panel. Again, this can be set in the startup callback (“startupFcn”). This tells the “uiimage” to adjust its size to match the panel whenever it changes:

app.YourPanel.SizeChangedFcn = @(src, event) resizeImage(app);

7. Implement the “resizeImage” Function: This function is where you adjust the size of the uiimage based on the panel's current dimensions. It ensures the image fills the panel, adapting to any resizing:

function resizeImage(app)

panelPosition = app.YourPanel.Position; % Find out the current size of the panel

app.img.Position = [1, 1, panelPosition(3), panelPosition(4)]; % Update the image size to fill the panel

end

In the process above, steps 1 through 4 describe adding an image reference to your MATLAB app. Steps 5 and 6 place the image inside the panel and enable automatic re-sizing. Step 7 implements the automatic re-sizing functionality.

This method, using a “uiimage”, offers a straightforward way to achieve scalable images in your app. Refer to this MATLAB R2024a documentation page for more information on uiimage - https://www.mathworks.com/help/matlab/ref/uiimage.html.

If maintaining the exact aspect ratio of the image or having more detailed control over its scaling is crucial for your app, you can use an “axes” component with “imshow”. This approach provides greater flexibility in managing images, including preserving their aspect ratios. The following steps describe the usage of the “axes component with “imshow” to render the image:

1. From the “Design view” of the MATLAB App designer, include an “axes” component in your app.

2. Read the image:

myImage = imread("image.png");

3. Set the Axis units to “pixels” & get the current positions of the “axes” component

set(app.UIAxes,'Units','pixels');

resizePos = get(app.UIAxes,'Position');

4. Resize the image to fit the “axes” object

myImage= imresize(myImage, [resizePos(3) resizePos(3)]);

5. Render the image inside the “axes” component using “imshow”

imshow(myImage, 'Parent', app.UIAxes);

6. Set the image units as normalized so that the image scales on re-sizing

set(app.UIAxes,'Units','normalized');

7. Do not display X & Y axes

axis(app.UIAxes, 'off', 'image');

Place the code from steps 2 through 7 in the start-up function callback of the app.

Please refer to this MATLAB Answers post, which goes into detail describing how to render images on the MATLAB App using the “axes” component - https://www.mathworks.com/matlabcentral/answers/222578-display-image-in-axes-matlab-gui.