Matlab App Designer Clickable Image only clickable once

Dear experts, I am using App Designer and i have a 3 by 3 field of images of a grey (grau.png) cube. I want the cube to change color by changing the image source each time you click on it.

Essentially, if the current image source is called 'grau.png' i want it to switch to 'rot.png' (red), and if it's red it switches to green and so on until it's blue and i want it to switch to grey ('grau.png') once again. The problem i face is that once i click the image it does actually change to the red cube but after that nothing happens when i click it although it should go from 'rot.png' to 'gruen.png'. There is no error when i click again, just nothing happens. I can change the order and switch red with green. Then if i start the app and click the grey cube it changes to green but after that no more changes. Thie image is created here:

I've tried it like this aswell:

changeimage is this function:

I thought that using a Matrix 'CI' might solve it but it's basically the same thing. So is there something wrong with clicking an image twice or is the code not fit the change the image multiple times?

[yanqi liu]

yes，sir，may be upload your .mlapp file to debug

Answer 1

[Kevin Holly]

I would use strcmp to compare image source just in case there is an error with the character arrays being different sizes (e.g. 'grau.png' is 8 elements long where as 'rot.png' is 7 elements long).

if strcmp(app.Image.ImageSource,'grau.png')
    app.Image = uiimage(app.TargetPackagePanel);
    app.Image.Position = [-17 298 157 147];
    app.Image.ImageSource = 'rot.png';
elseif strcmp(app.Image.ImageSource,'rot.png')
    app.Image = uiimage(app.TargetPackagePanel);
    app.Image.Position = [-17 298 157 147];
    app.Image.ImageSource = 'gruen.png';
elseif strcmp(app.Image.ImageSource,'gruen.png')
    app.Image = uiimage(app.TargetPackagePanel);
    app.Image.Position = [-17 298 157 147];
    app.Image.ImageSource = 'blau.png';
elseif strcmp(app.Image.ImageSource,'blau.png')
    app.Image = uiimage(app.TargetPackagePanel);
    app.Image.Position = [-17 298 157 147];
    app.Image.ImageSource = 'grau.png'
end

I would recommend using properites discussed in Share Data Within App Designer Apps. I would avoid using global variables.

properties (access = public)
    CI = changeimage(1);
end

function [CI] = changeimage(i)
CI = [0 0 0 0 0 0 0 0 0];
% Funktion muss aufgrund 9 versc
% Positionen geschrieben werden

if CI(i) < 4
    CI(i) = CI(i)+1;
else
    CI(i) = 0;
end
end
    

if app.CI(1) == 1
    app.Image = uiimage(app.TargetPackagePanel);
    app.Image.Position = [-17 298 157 147];
    app.Image.ImageSource = 'rot.png';
elseif app.CI(1) == 2
    app.Image = uiimage(app.TargetPackagePanel);
    app.Image.Position = [-17 298 157 147];
    app.Image.ImageSource = 'gruen.png';
elseif app.CI(1) == 3
    app.Image = uiimage(app.TargetPackagePanel);
    app.Image.Position = [-17 298 157 147];
    app.Image.ImageSource = 'blau.png';
elseif app.CI(1) == 0
    app.Image = uiimage(app.TargetPackagePanel);
    app.Image.Position = [-17 298 157 147];
    app.Image.ImageSource = 'grau.png'
end 
    

[Marius Merten]

This didn't work but I've found the answer.

the problem was that i replaced the clickable image with an image that was not clickable so i had to add the line "app.Image.ImageClikcedFcn = createCallbackFcn(app, @ImageClicked, true)".

Thanks for replying and taking your time anyway.