How to set an image as background for plot and display it in existing GUI?

In my application, on a click of a button a plot with an background image should be plotted and displayed in the same window. To do so, I create some UIAxes in my App:

app.UIAxes = uiaxes(app.GridLayout);
app.UIAxes.Layout.Row = 5;
app.UIAxes.Layout.Column = 3;

After the button is clicked I plot the diagram in the already existing (but empty) UIAxes:

plot(points(:,1), points(:,2), 'r.-', 'LineWidth', 2, 'Parent', app.UIAxes);

That works so far, but I am not able to put the image in the background. I know from a previous question, that I can display the picture and plot the points over it like this:

imshow(image);
hold on
axis('on', 'image')
plot(points(:,1), points(:,2), 'r.-', 'LineWidth', 2, 'MarkerSize', 30);

This soultion is great, because my plot is in the imagesize and everything fits. But this solution opens a new window and I want to render it into the current GUI. I also tried to use Image instead of UIAxes and set the Image with:

app.Image.ImageSource = image;

But then I don't know how to plot the graph in it.

Answer 1

[Cameron]

This link seems like what you're looking for.

[Henning]

actually not. I need to attach it to some existing UI component such as UIAxes or Image. In the solution of your link it always opens the image in a new window

[Cameron]

Try this

img = 'thumbnail.jpg'; %your file name
I = imread(img); 
x = 0:0.1:7; %x vector
y = rand(length(x),1); %random y vector
hold(app.UIAxes,'on') %hold your uiaxes
%input your image. the [0 7] and [1 0] are taken from the x and y data.
%adjust as needed
image(app.UIAxes,[0 7],[1 0],I); 
plot(app.UIAxes,x,y,'-o') %plot
hold(app.UIAxes,'off')
axis(app.UIAxes,'tight')

You can adjust this as required.

Answer 2

[Image Analyst]

Do you mean like this:

grayImage = imread('moon.tif');
[rows, columns, numberOfColorchannels] = size(grayImage)

rows = 537

columns = 358

numberOfColorchannels = 1

imshow(grayImage);
axis xy
x = 1 : columns;
period = 64;
y = 100 * sin(2 * pi * x / period) + rows/2;
hold on;
plot(x, y, 'r-', 'LineWidth', 2)
yline(rows/2, 'LineWidth', 2, 'Color', 'c')
axis('on')

Other demos are attached.

[Henning]

@Image Analyst thanks for ur answer. Actually all of your solutions uses imshow and plot. But imshow is not working, because I need to attach it to already existing UI component such as UIAxes or Image. When i set the plot with 'Parent', app.UIAxes the imshow always opens in a new window. In the attachment is a drawing of an existing UI with a button and the UIAxes with the plotted diagram. I plot it with the 'Parent', app.UIAxes options. But using imshow for the image as background is not working

[Image Analyst]

@Henning, imshow does NOT always open in a new window. It displays the image in the axes you told it to. See the attached app as proof. Perhaps you called figure before you called imshow.

The attached app simply reads a list of all PNG images into a listbox, and when you click on the filename in the listbox, it displays it in the axes on the main GUI, not in a separate GUI window.

If you insist it opens a new figure in your app, attach your app so I can figure out what's going wrong.

[Henning]

@Image Analyst I looked at your attached app. In the app the Image is plotted inside the UIAxes, thats correct and what I need. But now I need to plot something into that and the image should stay as background. I try it with the plot command and set the app.UIAxes there, but then the background image disappears.

imshow(image, 'Parent', app.UIAxes)
hold on
plot(app.UIAxes, data(:,1), data(:,2), 'x', 'LineWidth', 2, 'MarkerSize', 10);

When I remove the app.UIAxes from the plot-function, the plot opens in a new window

[Les Beckham]

Try changing

hold on 

to

hold(app.UIAxes, 'on')

[Henning]

@Les Beckham That works perfect, thanks!

[Image Analyst]

If this Answer solves your original question, then could you please click the "Accept this answer" link to award the answerer with "reputation points" for their efforts in helping you? They'd appreciate it. Thanks in advance. 🙂 Note: you can only accept one answer (so pick the best one) but you can click the "Vote" icon for as many Answers as you want. Voting for an answer will also award reputation points.