app designer button push color change

Hi everyone,

I have an app designer app that includes a button that turns green when pressed. However, whenever any other button is pressed, a panel comes up but does not cover the now green button. So, the button is still green but I want it to go back to white when any other button is pressed after.

Thank you!!

[Caglar]

You can create a method (function) that sets that button's color to original color and call that function in each of other buttons.

Answer 1

[Cris LaPierre]

Code execution in an app is initiated by callback functions. When you open the app in appDesigner and right click on the button that turns green in Design View, you should see a menu option for callbacks. Hover over it and a second menu appears with the option "Go to <button name> callback". That will take you to the code that executes when you press on the button. There you will see how they set the color to green. If my button is called Button4, the code might look like this:

% Button pushed function: Button4
function Button4Pushed(app, event)
    ...
    app.Button4.BackgroundColor = 'g';
end

You can create a separate function that turns the background color back to the default and call that, or you can directly reset the background color inside another function. For example, if another button is call Button2, I might add this code to return Button4 to the default background color:

% Button pushed function: Button2
function Button2(app, event)
    ...
    app.Button4.BackgroundColor = [0.96,0.96,0.96];
end

Incidentally, the default background color is [0.96,0.96,0.96].

[Allison Carey]

Hi Cris,

Which would be the better way if I have about 200 buttons in this app? I would have to include

    app.Button4.BackgroundColor = [0.96,0.96,0.96];

within the function for each button, correct?

Otherwise, how would you go about creating a separate function that turns the background color back to the default and calling it? Thanks for your answer!

[Cris LaPierre]

Either way, you are adding a line of code to all the other callback functions. If a helper function makes more sense (e.g. you need to change multiple buttons or multiple properties):

• in appDesigner, navigate to the Code View
• in the code browser, select "Functions"
• click the down arrow next to the green "+" and select 'Private Function"

This will automatically add a template for a helper function to your code. This is where you would add code to reset the background color.

methods (Access = private)
    function resetBckGnd(app)
        app.Button4.BackgroundColor = [0.96,0.96,0.96];
    end
end

Then in the callback function for the other buttons, you would just need to call the helper function:

% Button pushed function: Button2
function Button2(app, event)
    ...
    resetBckGnd(app);
end

[Allison Carey]

Ok, this is great because there are a couple buttons that I'm having the same problem with. Is there a way to have the button only turn green for, say, 5 seconds? And then it will turn back to its original white?

[Cris LaPierre]

No good way I can think of. Because functions execute in response to some interaction, something would have to trigger it. The only way I can think to do it is to add a pause(5) after changing it green, then add code to change it back.

% Button pushed function: Button4
function Button4Pushed(app, event)
    ...
    app.Button4.BackgroundColor = 'g';
    pause(5);
    app.Button4.BackgroundColor = [0.96,0.96,0.96];
    end
end

A quick test seems to suggest it will turn back to the default either after 5 seconds or the next time something is clicked on the app, whichever comes first.

[Amrit Zoad]

Hi Cris,

I have different problem.

I want to change the color of the button to Orange as the user clicks it.

Then it should execute a code.

After the code ends, it should change the color of the button to green.

The code is as follows:

function STARTButtonPushed(app, event)

app.STARTButton.BackgroundColor = [1, 0.41, 0.16];

app.STARTButton.Text = 'WAIT';

my code here

app.STARTButton.BackgroundColor = [0, 1, 0];

app.STARTButton.Text = 'DONE';

end

The button never turns orange while executing the code, but turns green at the end. I would be glad if you could help me out in this.

[Cris LaPierre]

You will probably need to add a pause to your code before you set the color to green in order to see the orange. The code is likley executing so quickly that the button is only orange for a very short amount of time.

[Amrit Zoad]

Hi Cris,

Thanks a lot! :)

Although my code in the center took more than 200 secs to process, still the Orange button wasn't showing up. Adding pause(1), did the trick.

Thanks again. :D

Answer 2

[Prince Ogbodum]

Is there a way to get this done for MATLAB R2007b?? I mean to change background color only when another buton is pressed. For example: I have an app with 3 pushbuttons and I want a case whereby If Psbtn1 is pressed its color turns red to show it is active, if Psbtn2 is then pressed it turns red while Psbtn1 returns to its default color to show that the active state is that of Psbtn2

[Cris LaPierre]

In 2007b, I suspect you are using GUIDE instead of App Designer. Look at the properties of your pushbutton to find the name of the background color property. You can then access these through the handles structure.

For example, if I have two pushbuttons in my gui (pushbutton1 and pushbutton2), and I want pushbutton1 to turn red when I click pushbutton2, I would add the following line of code to pushbutton2_Callback

handles.pushbutton1.BackgroundColor = 'r';

[Prince Ogbodum]

Thanks for the response Cris. However, that didn't seem to solve my problem. I have attached a screen short of the response I got after inputing the code and clicking the pushbutton. Let me restate my question for better clarity.

I am trying to create a GUI to control the speed and rotation of a DC motor. So, I want a case whereby if the pushbutton representing speed1 is pressed (there are 5 of them), it turns red to indicate to the user or observer that the motor is running at speed1. If the pushbutton representing speed2 is pressed then it turns red while speed1 button returns to its default color to indicate that the motor is now running at speed2 and so on. So, what I need is the code to achieve this. Thanks in anticipation.

[Steven Lord]

In release R2007b, you can't use the dot syntax to set properties of a Handle Graphics object. You will need to call set.

set(handles.pushbutton2, 'BackgroundColor', 'r')