- You've set the function "UIFigureButtonDown" to be the ButtonDownFcn of the uifigure, rather than the Callback of the uibutton. To correct this, in Design View, remove UIFigureButtonDown as the ButtonDownFcn of the uifigure, then click app.UpdateColorButton in the Component Browser to see the uibutton's properties and set UIFigureButtonDown as its Callback.
- The axes property to set is "Color", not "BackgroundColor".
- There is a mistake where you have "GVal = app.RSlider.Value;", which should be "GVal = app.GSlider.Value;".
How do I get sliders to change the background color/ RGB values of axes in a GUI?
8 views (last 30 days)
Show older comments
I am writing code to create a GUI.
The guidelines are as listed:
So first, open up App Designer in Matlab.
Then create a new GUI and in the “Design View” tab, place all the components for the GUI
- 3 Sliders
- 1 Axis
- 1 Button
- 1 Label
- Add a CallBack function for the Button
Next, go to the “Code View” tab, and add the code for the Button callback function so that the background color of the Axes changes based on the value of the sliders AND the values of the sliders are printed. This callback function will be executed when the Update Color Button is pushed.
- The values from the sliders can be saved as variables by storing the “.Value” property
- The color of the axes can be changed by setting the “.Color” property to the RGB values from the sliders
- Use the sprintf function to print the values for R, G and B to the Label component by setting the .Text property. The sprintf function works very similar to fprintf -- but instead of printing to the Command Window, sprintf prints to a char Array variable.
I currently have coded in to button callback, but I feel I may need to do something with the slider callbacks. I am not sure what that is or how to do it however. When I run the GUI and move the sliders, the sliders do not change the background color of the axes. It remains white regardless of what I do. The slider values sometimes appear on the label and other times they do not.
I followed these guidelines and have the Design View of:
![](https://www.mathworks.com/matlabcentral/answers/uploaded_files/1198848/image.png)
My Code:
classdef colorBox < matlab.apps.AppBase
% Properties that correspond to app components
properties (Access = public)
UIFigure matlab.ui.Figure
Label matlab.ui.control.Label
UpdateColorButton matlab.ui.control.Button
BSlider matlab.ui.control.Slider
BSliderLabel matlab.ui.control.Label
GSlider matlab.ui.control.Slider
GSliderLabel matlab.ui.control.Label
RSlider matlab.ui.control.Slider
RSliderLabel matlab.ui.control.Label
UIAxes matlab.ui.control.UIAxes
end
% Callbacks that handle component events
methods (Access = private)
% Button down function: UIFigure
function UIFigureButtonDown(app, event)
% background color of the axes changes based on value of
% sliders
% values of sliders are printed
RVal = app.RSlider.Value;
GVal = app.RSlider.Value;
BVal = app.BSlider.Value;
app.UIAxes.BackgroundColor = [RVal,GVal,BVal];
app.Label.Text = sprintf('[%.2f %.2f %.2f]', RVal, GVal, BVal);
end
end
% Component initialization
methods (Access = private)
% Create UIFigure and components
function createComponents(app)
% Create UIFigure and hide until all components are created
app.UIFigure = uifigure('Visible', 'off');
app.UIFigure.Position = [100 100 640 480];
app.UIFigure.Name = 'MATLAB App';
app.UIFigure.ButtonDownFcn = createCallbackFcn(app, @UIFigureButtonDown, true);
% Create UIAxes
app.UIAxes = uiaxes(app.UIFigure);
title(app.UIAxes, 'Custom Color')
app.UIAxes.XTick = [];
app.UIAxes.XTickLabel = '';
app.UIAxes.YTick = [];
app.UIAxes.YTickLabel = '';
app.UIAxes.Position = [283 153 300 255];
% Create RSliderLabel
app.RSliderLabel = uilabel(app.UIFigure);
app.RSliderLabel.HorizontalAlignment = 'right';
app.RSliderLabel.Position = [42 337 25 22];
app.RSliderLabel.Text = 'R';
% Create RSlider
app.RSlider = uislider(app.UIFigure);
app.RSlider.Limits = [0 1];
app.RSlider.MajorTicks = [0 0.5 1];
app.RSlider.Position = [88 346 150 3];
% Create GSliderLabel
app.GSliderLabel = uilabel(app.UIFigure);
app.GSliderLabel.HorizontalAlignment = 'right';
app.GSliderLabel.Position = [42 271 25 22];
app.GSliderLabel.Text = 'G';
% Create GSlider
app.GSlider = uislider(app.UIFigure);
app.GSlider.Limits = [0 1];
app.GSlider.MajorTicks = [0 0.5 1];
app.GSlider.Position = [88 280 150 3];
% Create BSliderLabel
app.BSliderLabel = uilabel(app.UIFigure);
app.BSliderLabel.HorizontalAlignment = 'right';
app.BSliderLabel.Position = [42 198 25 22];
app.BSliderLabel.Text = 'B';
% Create BSlider
app.BSlider = uislider(app.UIFigure);
app.BSlider.Limits = [0 1];
app.BSlider.MajorTicks = [0 0.5 1];
app.BSlider.Position = [88 207 150 3];
% Create UpdateColorButton
app.UpdateColorButton = uibutton(app.UIFigure, 'push');
app.UpdateColorButton.Position = [383 110 100 23];
app.UpdateColorButton.Text = 'Update Color';
% Create Label
app.Label = uilabel(app.UIFigure);
app.Label.BackgroundColor = [1 1 1];
app.Label.HorizontalAlignment = 'center';
app.Label.Position = [111 110 104 22];
app.Label.Text = '';
% Show the figure after all components are created
app.UIFigure.Visible = 'on';
end
end
% App creation and deletion
methods (Access = public)
% Construct app
function app = colorBox
% Create UIFigure and components
createComponents(app)
% Register the app with App Designer
registerApp(app, app.UIFigure)
if nargout == 0
clear app
end
end
% Code that executes before app deletion
function delete(app)
% Delete UIFigure when app is deleted
delete(app.UIFigure)
end
end
end
0 Comments
Accepted Answer
Voss
on 18 Nov 2022
Edited: Voss
on 18 Nov 2022
"I feel I may need to do something with the slider callbacks. I am not sure what that is or how to do it however."
According to the assignment, the sliders do not have callbacks; the axes color should change only when the button is pushed, so only the button needs a callback. (However, if I were designing this program, I would do away with the button completely and have the axes color change when the sliders move, as you suggest, but that's not the assignment.)
Now, there are a few relatively minor problems that are preventing this from working correctly:
Try it with those three changes and see what happens.
2 Comments
More Answers (1)
Zahrah Walid
on 18 Nov 2022
Edited: Zahrah Walid
on 18 Nov 2022
You should add "SliderchangingValue" callback functions for the three sliders and add their "changingValue"s to app properties with private access.
For this example, I've renamed the sliders to: Red, Green, and Blue respectively; named the "changingValue"s to: red, green, and blue respectively and add them to app properties as follows:
""Lines with commented arrows "%<<<" are the only lines you need to fill, the rest will be generated automatically when adding properties, callbacks ...etc.""
properties (Access = private)
red; %<<<
green; %<<<
blue; %<<<
end
I didn't use the button so I add an initialization in the "startupFcn" function (you can add it from callbacks tab in the "CODE BROWSER" window in the "Code View" window (upper-left corner)). I have initialized the background color of the UIAxes to white.
function startupFcn(app)
app.red=1; %<<<
app.green=1; %<<<
app.blue=1; %<<<
end
As I have kept the sliders' limits as default (0:100) and the UIAxes Color property is defined from 0 to 1, I just divide the sliders' values by 100 to keep them in the acceptable range.
% Value changing function: RedSlider
function RedSliderValueChanging(app, event)
app.red = event.Value; %<<<
app.UIAxes.Color=[app.red app.green app.blue]/100; %<<<
end
% Value changing function: BlueSlider
function BlueSliderValueChanging(app, event)
app.blue = event.Value; %<<<
app.UIAxes.Color=[app.red app.green app.blue]/100; %<<<
end
% Value changing function: GreenSlider
function GreenSliderValueChanging(app, event)
app.green = event.Value; %<<<
app.UIAxes.Color=[app.red app.green app.blue]/100; %<<<
end
I hope this helps you:)
1 Comment
Jing ZHANG
on 12 Dec 2022
How do I change the contents of properties? It looks like I don't have the power to modify it
See Also
Categories
Find more on Develop uifigure-Based Apps in Help Center and File Exchange
Products
Community Treasure Hunt
Find the treasures in MATLAB Central and discover how the community can help you!
Start Hunting!