How do I get sliders to change the background color/ RGB values of axes in a GUI?

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:

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

Answer 1

[Voss]

"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:

• 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;".

Try it with those three changes and see what happens.

[Me]

Thank you so much! I obviously was not paying close enough attention. I updated my code and it worked great! I appreciate you taking your time to help me fix my careless mistakes. Thank you again! I really appreciate it!

[Voss]

You're welcome! I'm glad you got it working!

Answer 2

[Zahrah Walid]

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:)

[Jing ZHANG]

How do I change the contents of properties? It looks like I don't have the power to modify it