How can I plot and display image in MATLAB App Designer UIAxes?

Question

Rodaina Abuerban 2021-2-14

0
链接

此问题的直接链接

https://ww2.mathworks.cn/matlabcentral/answers/745312-how-can-i-plot-and-display-image-in-matlab-app-designer-uiaxes

评论： cui,xingxing 2023-6-2

62K80.jpg

I am creating a Turbocharging matching tool and an important part of this (for the user) is to see the operating points plotted on compressor maps.

The first problem I am running into is that it doesn't plot the points needed. These points should be taken from the edit fields next to 'Corr. Mass Air Flow' and 'Compressor PR' but it doesn't seem to work. The code for this part is under the callback function "MatchButton pushed".

The second problem I am facing is when I am trying to display the compressor map as an image in the background of the UIAxes. I have multiple compressor maps and I want to use a listbox along with an ifelse command to display the chosen compressor map as an image. The image does not display and the axes disappear. I attached a screenshot of what this looks like in the app itself and the image that I want displayed. The code for this is under the callback of list box value changed.

Thank you in advance!

  % Button pushed function: MatchButton
        function MatchButtonPushed(app, event)
            x = [str2double(app.MassAirFlow1) 
                str2double(app.MassAirFlow2) 
                str2double(app.MassAirFlow3) 
                str2double(app.MassAirFlow4) 
                str2double(app.MassAirFlow5) 
                str2double(app.MassAirFlow6)];
            y = [str2double(app.CompPR1) 
                str2double(app.CompPR2) 
                str2double(app.CompPR3) 
                str2double(app.CompPR4) 
                str2double(app.CompPR5) 
                str2double(app.CompPR6)];
            plot(app.UIAxes,x,y, 'o');
        end
        
   % Value changed function: CompressorListBox
        function CompressorListBoxValueChanged(app, event)
            value = app.CompressorListBox.Value;
            if strcmp(value, '62K80 (EFR 6258)')
               hold(app.UIAxes, 'on')
               I = imshow('62K80.jpg', 'Parent', app.UIAxes, ...
                'XData', [1 app.UIAxes.Position(3)], ...
                'YData', [1 app.UIAxes.Position(4)]);;
               hold(app.UIAxes, 'off')
            elseif strcmp(value, '67X80 (EFR 6758)')
               hold(app.UIAxes, 'on')
               I2 = imshow('67X80.png', 'Parent', app.UIAxes, ...
                'XData', [1 app.UIAxes.Position(3)], ...
                'YData', [1 app.UIAxes.Position(4)]);;
            elseif strcmp(value, '70S75 (EFR 7064)')
               hold(app.UIAxes, 'on')
               I3 = imshow('70S75.png', 'Parent', app.UIAxes, ...
                'XData', [1 app.UIAxes.Position(3)], ...
                'YData', [1 app.UIAxes.Position(4)]);;
            else strcmp(value, '76S75 (EFR 7670)')
               hold(app.UIAxes, 'on')
               I4 = imshow('76S75.png', 'Parent', app.UIAxes, ...
                'XData', [1 app.UIAxes.Position(3)], ...
                'YData', [1 app.UIAxes.Position(4)]);;
            end

0 个评论
显示 -2更早的评论隐藏 -2更早的评论

请先登录，再进行评论。

请先登录，再回答此问题。

Answer 1

Mario Malic 2021-2-14

2
链接

此回答的直接链接

https://ww2.mathworks.cn/matlabcentral/answers/745312-how-can-i-plot-and-display-image-in-matlab-app-designer-uiaxes#answer_623477

编辑：Mario Malic 2021-3-10

在 MATLAB Online 中打开

Hello,

For your first problem, use numeric Editfield components, for those you don't need to use str2double. You should've seen the error that you cannot convert EditField component to double, the values in the box can be found in property Value.

For the second one, to display the image in UIAxes component you can do it this way

cImage = imread("62K80.jpg");
hImage = imshow(cImage, 'Parent', app.UIAxes);

Edit: comment section summed up

When you use imshow, it will use the size of image (height x width x page) to plot.

im = imread('pears.png');
imshow(im, 'Parent', uiax);

Without XData and YData it will use some sort of algorithm to determine XLim and YLim that would nicely display the data in plot.

You can use this to fill the plot area

app.UIAxes.XLim = [0 width(im)];
app.UIAxes.YLim = [0 height(im)];

12 个评论
显示 10更早的评论隐藏 10更早的评论

Mario Malic 2021-2-15

This will be a little bit hard task, especially since you are trying to plot specific values on the image.

I would first try to display the image, to make sure the DropDownMenu callback works.

You can use cla(app.UIFigure) to reset the image (XLim and other properties will remain the same) when you change the selection, so you don't have to use hold so many times. If your points should not remain on the axes when you change the dropdown, find the uiaxes component in Component Browser and under the Multiple Plots tab, set the NextPlot property to 'replaceall'. This allows you to have a single call to hold in the button pushed callback.

By using the XLim, YLim properties of the UIAxes, you can set the limits on the axes, let's say [0 200], you will have to use these numbers for the XData and YData name-value parameters in the imshow function. I think you can match the limits with the graph min and max values so you can plot the numbers from field directly without calculating where on the image is that point. By rescaling the image, you'll need to make sure that image has the same aspect ratio as it had before so the points are on the correct position.

Rodaina Abuerban 2021-2-15

在 MATLAB Online 中打开

Thank you so much for your input but I am still running into issues :(

I have tried what you suggested but only in a simple startup function (for now) just to simplify things first and manage to show and scale the image correctly.

This is the code:

        % Code that executes after component creation
        function startupFcn(app)
            app.UIFigure.Position = [100 50 868 750];
            app.CompressorListBox.Value = '62K80 (EFR 6258)';
            app.UIAxes.XLim = [0 0.5];
            app.UIAxes.XTick =linspace(0,0.52,14);
            app.UIAxes.YLim = [1 3.8];
            app.UIAxes.YTick = linspace(1,3.8,8);
            I = imread('62K80.jpg');
            imshow(I, 'Parent', app.UIAxes, 'XData', [0 0.5], 'YData', [1 3.8]);
        end

The X and Y lims are set to match those of the graph on the image I want to display. When I use the same limits for the X and Y data of the imshow function, the image is displayed but just squeezed. I can't seem to figure out how to stretch the size of the image even when I specifically add it in the code specifying the 'position' of the UIAxes. It seems like the size of the x-axis is too small so I tried to play around with the limits, aspect ratios and position of the UIAxes. Also the axes ticks and tick labels seem to disappear.

This is what I see when I run the app:

Rodaina Abuerban 2021-3-11

YES! Thank you, it worked :)

cui,xingxing 2023-6-2

it works for me,thanks

请先登录，再进行评论。

How can I plot and display image in MATLAB App Designer UIAxes?

0 个评论
显示 -2更早的评论隐藏 -2更早的评论

回答（1 个）

12 个评论
显示 10更早的评论隐藏 10更早的评论

另请参阅

类别

标签

Community Treasure Hunt

How can I plot and display image in MATLAB App Designer UIAxes?

0 个评论 显示 -2更早的评论隐藏 -2更早的评论

回答（1 个）

12 个评论 显示 10更早的评论隐藏 10更早的评论

另请参阅

类别

标签

Community Treasure Hunt

0 个评论
显示 -2更早的评论隐藏 -2更早的评论

12 个评论
显示 10更早的评论隐藏 10更早的评论