How do I update an image object in App Designer?

I'm using the App Designers image object to display a jpeg. The code modifies the image data and then writes it back to the jpeg. However if I reload it in the image object it uses the original jpeg - presumably cached and not updated. The only way I have found to make it use the new image is to use a different filename for the modified image and then point to the new file. The image object appears to have a reset function but trying to use it causes a 'no method' error.

[Guillaume]

We'd need to see the code you're using to understand what you're doing and where you've gone wrong.

[Gary Burton-Wilcock]

This isn't the code I'm working on but it shows the same problem. The app has 4 controls.

    % Callbacks that handle component events
    methods (Access = private)

        % Button pushed function: readButton
        function readButtonPushed(app, event)
            app.img=imread("lena512.bmp");
            % save as jpg because Image won't accept bmp
            imwrite(app.img,"lena512.jpg","jpeg");
            % point the image object at the file
            app.Image.ImageSource="lena512.jpg";
            % the image appears in the Image control
        end

        % Button pushed function: modifyButton
        function modifyButtonPushed(app, event)
            app.img=app.img+25;
            imwrite(app.img,"lena512.jpg","jpeg");
            % I can see the file changing using Windows Explorer
        end

        % Button pushed function: reloadButton
        function reloadButtonPushed(app, event)
            %app.Image.ImageSource="clear.jpg";
            % even if I do point the Image object at a different file first
            % it always shows the original unchanged version
            app.Image.ImageSource="lena512.jpg";
        end
    end

I have tried deleting the jpeg file before saving the modified version but no effect.

[Geoff Hayes]

Gary - so the only difference in the image is that you have added 25 to all elements of the app.img object? Do you see a change (in the image) when you view the updated image outside of MATLAB? Do you need to somehow refresh the app.Image?

[Gary Burton-Wilcock]

Hi Geoff - for this example yes I'm just adding 25 just to force a change on the image. I do see the image change if, oustide Matlab, I look at the file that is written after each press of the modify button. However, pressing the reload button doesn't refresh the image in the Matlab app. It feels like Matlab has cached the original image and changing the image source property of the image control (but with a filename that it has already seen) doesn't force it to renew its data. I can't see any way to make it drop that data without restarting the app.

Answer 1

[Guillaume]

Yes, I can observe the same behaviour. I've not been able to find exactly which class is responsible for the problem yet, it's not the Image class itself, the class mark itself as dirty every time you set the ImageSource property. It must be something else upstream that sees that the filename hasn't changed and hence do not update the display. I'll report the problem to matlab.

On the other hand, personally, I'd never give a filename to ImageSource, instead I'd passed an image array:

        function readButtonPushed(app, event)
            app.img = imread("lena512.bmp");
            app.Image.ImageSource = repmat(app.img, 1, 1, 3);  %ImageSource wants a RGB image, not a greyscale image
            % the image appears in the Image control
        end
        % Button pushed function: modifyButton
        function modifyButtonPushed(app, event)
            app.img = app.img + 25;
        end
        % Button pushed function: reloadButton
        function reloadButtonPushed(app, event)
            app.Image.ImageSource = repmat(app.img, 1, 1, 3);
        end

which doesn't have the same problem.

[Gary Burton-Wilcock]

Thanks Guillame. That works and saves the unnecessary file saving.

[Guillaume]

Follow up: I've reported the problem to Mathworks and they've confirmed that it's expected behaviour. If you set the ImageSource property to the same file, matlab does not reload the file. Hopefully, they will document this properly in the next update.

[Gary Burton-Wilcock]

Hi Guillaume, thanks for the follow up. At least it means I'm not going mad!

[Bhisma Adhikari]

When I tried your solution in Matlab R2019b (MacOS), I got this error:

My code:

img = imread("absolute path to png image file");

app.Image.ImageSource = repmat(img, 1, 1, 3);

Error Msg:

Error using matlab.ui.control.Image/set.ImageSource (line 92)

ImageSource value must be a valid file path, or an m-by-n-by-3 color data matrix.

Please help me fix it.

[Lucas Moreira]

app.Image.ImageSource only accept the image path, your img is a uint8 image, got it? you need to pass the path, like: "C:\imageName.jpg"

[RITAM BASU]

Just to add to this, I got same problem, my problem got solved when i used instead

repmat(img, 1, 1, 1);

[Image Analyst]

@RITAM BASU That's because it doesn't do anything. The output is the same as the input.

img = randi(255, 3, 3) % Create sample image.

img = 3×3

171 76 244 84 155 75 152 156 45

img2 = repmat(img, 1, 1, 1) % Do RITAM's "solution"

img2 = 3×3

171 76 244 84 155 75 152 156 45

[RITAM BASU]

Ah okay... It is exactly what I wanted. Just to open updated image every time. making it (1,1,3) gave me error mentioned by Bhisma Adhikari.

I did not fully comprehend the use of writing the 3 though. Is it to make a greyscale picture RGB ? I see that Making it 3 makes 3 copies of the same array(img2 here).

Thanks for the comment..

Have a nice day..