How to Use Sliders to Change RGB Values of an Image in GUI

I'm creating a GUI where one can click a button to select an image to be loaded onto an axes and then using 4 sliders, I want to be able to adjust the red, green, and blue values individually and also have 1 slider adjust all of them at once. Also the sliders need to have a text displaying it's numerical value (-1 to 1). Finally, each individual slider should take into account tthe values for the other 3 sliders as well e.g., if I move the red slider up and then move the blue slider up, the final image shold have increased red and blue, not just blue.

Currently, I have the image selection button working and I am able to display the value of each slider as it moves, but I cannot figure out how to alter the image (and then save a copy of it). Here's what I have for the red slider and my button:

% --- Executes on slider movement.
function RedBar_Callback(hObject, eventdata, handles)
% hObject    handle to RedBar (see GCBO)
% eventdata  reserved - to be defined in a future version of MATLAB
% handles    structure with handles and user data (see GUIDATA)

% Hints: get(hObject,'Value') returns position of slider
%        get(hObject,'Min') and get(hObject,'Max') to determine range of slider
rvalue = hObject.Value;
rvaluestr = num2str(rvalue);
set(handles.RedBarPosition,'String',rvaluestr);
Image(:,:,1) = Image(:,:,1) + 128*rvaluestr;
imshow(Image,'Parent',handles.Image);
handles.Image = imread(Image);
guidata(hObject,handles);


% --- Executes on button press in LoadButton.
function LoadButton_Callback(hObject, eventdata, handles)
% hObject    handle to LoadButton (see GCBO)
% eventdata  reserved - to be defined in a future version of MATLAB
% handles    structure with handles and user data (see GUIDATA)


[filename, path]=uigetfile('*.jpg','Select an Image')
fullfilename=fullfile(path,filename)
Image= imread(fullfilename);
set(handles.Image);
imshow(Image,'Parent',handles.Image);
handles.Image = Image;
guidata(hObject,handles);

[Rik]

Why can't you simply store the modified matrix somewhere? You are displaying it, so you could even retrieve it from your image object.

[Judy Yang]

Sorry I am incredibly new to MATLAB (I'm doing this for an intro class) so I don't know how I would execute that. I keep hearing that I need to store the original and the modified version as a copy but what would the code for that be?

[Judy Yang]

OK so i managed to solve all my problems except one. I still cannot get the changes to stay (I'm assuming I'm supposed to store the modified image somewhere as said) but I cannot figure how to do that. As a result each of my sliders alters the image, but once another slider is used, the effects of the first one disappears. Here's the relevant code; it is identical for each slider except the tags change for each Image (:, :, 1) line changes for each color (i.e., green has GreenBar & (:, :, 2) and blue has BlueBar & (:, :, 3) and the brightness has all 3 of them changing simultaneously:

% --- Executes on slider movement.
function RedBar_Callback(hObject, eventdata, handles)
% hObject    handle to RedBar (see GCBO)
% eventdata  reserved - to be defined in a future version of MATLAB
% handles    structure with handles and user data (see GUIDATA)

% Hints: get(hObject,'Value') returns position of slider
%        get(hObject,'Min') and get(hObject,'Max') to determine range of slider

% Display Slider Value
value = hObject.Value;
valuestr = num2str(value);
set(handles.RedBarPosition,'String',valuestr);

% Adjust Red in Image from Slider
value = hObject.Value;
Image = handles.PicData;
Image (:,:,1) = get(handles.RedBar,'Value') * 128 + Image(:,:,1);
image(Image,'Parent',handles.Image)
set(handles.Image,'visible','off');
guidata(hObject, handles)

Answer 1

[Judy Yang]

Okay so I finally managed to fix my issues. Here's the working relevant code for posterity's sake:

% --- Executes on slider movement.
function RedBar_Callback(hObject, eventdata, handles)
% hObject    handle to RedBar (see GCBO)
% eventdata  reserved - to be defined in a future version of MATLAB
% handles    structure with handles and user data (see GUIDATA)

% Hints: get(hObject,'Value') returns position of slider
%        get(hObject,'Min') and get(hObject,'Max') to determine range of slider

% Display Slider Value
value = hObject.Value;
valuestr = num2str(value);
set(handles.RedBarPosition,'String',valuestr);

% Adjust Red in Picture from Slider
Picture = handles.PicData;
Picture (:,:,1) = (get(handles.RedBar,'Value') * 128 + Picture(:,:,1))+(get(handles.BrightnessBar,'Value') * 128 + Picture(:,:,1));
Picture (:,:,2) = (get(handles.GreenBar,'Value') * 128 + Picture(:,:,2))+(get(handles.BrightnessBar,'Value') * 128 + Picture(:,:,2));
Picture (:,:,3) = (get(handles.BlueBar,'Value') * 128 + Picture(:,:,3))+(get(handles.BrightnessBar,'Value') * 128 + Picture(:,:,3));
set(handles.Picture,'visible','off');
imshow(Picture,'Parent', handles.Picture);

[Rik]

imshow is a relatively high level function. I would suggest replacing the CData property instead.

Answer 2

[Cris LaPierre]

Yes, it has to do with storing the image. You callbacks are functions. The variables do not exist once the function exits. You need to take advantage of handles structure to store variables you want to keep and use in other callback functions. See this doc page for more on how to use them.

[Cris LaPierre]

Actually, that page is a bit cryptic. Try this MATLAB Answer post.

[Judy Yang]

Thanks for the links; I had already looked through most of them but still couldn't figure out why my GUI won't work. Based on the answer here and here from your link, I updated my code as follows but it still does not work.

% --- Executes on slider movement.
function RedBar_Callback(hObject, eventdata, handles)
% hObject    handle to RedBar (see GCBO)
% eventdata  reserved - to be defined in a future version of MATLAB
% handles    structure with handles and user data (see GUIDATA)

% Hints: get(hObject,'Value') returns position of slider
%        get(hObject,'Min') and get(hObject,'Max') to determine range of slider

% Display Slider Value
handles = guidata(hObject);
value = hObject.Value;
valuestr = num2str(value);
set(handles.RedBarPosition,'String',valuestr);
guidata(hObject,handles);

% Adjust Red in Image from Slider
handles = guidata(hObject);
value = hObject.Value;
Image = handles.PicData;
Image (:,:,1) = get(handles.RedBar,'Value') * 128 + Image(:,:,1);
image(Image,'Parent',handles.Image)
set(handles.Image,'visible','off');
guidata(hObject,handles);

[Cris LaPierre]

What does "still doesn't work" mean? Are you getting an error message? Is your image not appearing?

[Cris LaPierre]

You are not updating the image. You make a copy of it and make changes to the copy.

Try somethign like this. Mind you, i don't have your app, so I'm unable to test this. I have cleaned up your handling of the slider value, though.

% --- Executes on slider movement.
function RedBar_Callback(hObject, eventdata, handles)
% hObject    handle to RedBar (see GCBO)
% eventdata  reserved - to be defined in a future version of MATLAB
% handles    structure with handles and user data (see GUIDATA)

% Hints: get(hObject,'Value') returns position of slider
%        get(hObject,'Min') and get(hObject,'Max') to determine range of slider

% Display Slider Value
value = get(hObject,'Value');
valuestr = num2str(value);
set(hObject,'String',valuestr);

% Adjust Red in Image from Slider
handles.PicData(:,:,1) = value * 128 + handles.PicData(:,:,1);
guidata(hObject,handles);

[Judy Yang]

Sorry, by still doesn't work I meant that the sliders all individually change the image color as they were supposed to, but if I move more than one of them, the only changes that appear on the image is the most recent one. e.g., if i move the red slider to the max the image is reddened, but then if I move the brightness slider all the way up as well, the image is very bright (brightness is defined in my project as the values of RGB all being changed at once) but is no longer reddened. Clicking the red slider brings back the redness but not the brightness. This happens with every combination of slider I've tried ( ex. red & green, red & blue, green & brightness, etc.)

Also, I tried the cleaned-up code you provided but when I ran the program, the sliders now no longer change the image at all. Not really sure why but for the sake of my assignment, I don't really need it to be super clean, it just needs to perform some set functions so I won't worry about it. Thank you for your efforts though!

[Rik]

The code Cris posted only adjusts the variable, not the visual image.

set(handles.Image,'CData',handles.PicData)%that should work, haven't tested it

[Cris LaPierre]

From your description, I understood there was a separate function used to display the image after the changes were made. The code I shared updates the data. You now just need to update the display. Try Rik's code out. We don't know your component tag names, so you might have to adapt it to get it to work.