How do you change the appearance of a widget button once it's clicked?

[anonymous_user_c25988a4]

Hello to anyone reading this.

I’m trying to get a widget button to change from one image to another once it’s been clicked and I’m not sure how to go about it.

It seems pretty simple but I’m missing something. When the button is clicked I’d like the material swatch in the pic attached to be swapped out for the image with the check box in it.

Any help would be greatly appreciated. Screens shot of blueprints would be very helpful.

Thanks in advance,

[anonymous_user_9fcda7641 (anonymous_user_9fcda764)]

To change the appearance of a widget button in the Details panel of the widget button under Appearance->Style you can choose what image to use on the button whether it is “Normal”, “Hovered” or “Pressed”.

[anonymous_user_c25988a4]

Thanks for the quick reply . I’ve put the image with the check mark in the “pressed” spot . The problem I’m having is with the image with the check mark not staying on when clicked . If I hold the left mouse button down the image with the check mark stays on but that’s not what I’m looking for. The user should just have to click the material swatch and then it changes to the other image with the check mark and doesn’t revert back . Any thoughts?

Thanks for taking the time

[Andrei_Despinoiu]

There are three “main” states for buttons: Normal, Hovered, Clicked.

Make sure all 3 have images.
Make sure they all have “Draw As” as “Image” instead of “Box”.

[anonymous_user_9fcda7641 (anonymous_user_9fcda764)]

To change the texture when you click the button you can try something like this:

[Lunder]

if you want to keep the click image after you clicked the button, you need to re-set the normal style of your button.

in the exemple, I change the colour of the button but you can use the image param if you want to change the image.

[anonymous_user_c25988a4]

Hey,

Thanks for the response. I tried your method but had issues the “Break Button Style” node. The “Widget Style” node wouldn’t connect to it so I made a “Button Style” and got it to work. But I’d like the button to revert back to it’s previous Style when another swatch is clicked on. Any ideas on how to accomplish that ? Flip- Flop node ?? More screen shots would help. The attached images illustrate the issue I’m having.

Thanks for all your help!

[anonymous_user_c25988a4]

Hi

I tried your method but couldn’t figure out the “Widget Style” / Button Style part. I can’t get a widget style node to connect to the “break button Style” node. Plus my Tan Leather button reference wouldn’t connect either. I’m pretty new to all of this and can’t seem to wrap my head around references yet so I’m sure I’m missing something.
I did try’s method below and got it to work but now I’d like the button to revert back to it’s previous state one another button is clicked on. Any ideas on how to do that?

thanks again for the help

[Aleksandro]

If that is too complicated then simply create two Buttons. Same size, same anchor positions. Then just take Bttn1 and Setup your unchecked Images for pressed hovered and unpressed. then go to bttn2 Setup all the Images with the checked Symbol. Now that both are on the same Location you just go to widget blueprint and take your button variables from the left. drag out the pin “set visibility”. now you set it up that the unchecked is visible (for instance on Event construct) and the second one not visible. Now take the on Event pressed for bttn1, add you whole logic of your program, and in the end of the node flow you just swith the visibility for bbtn1 to “hidden” and for bttn2 “visible”. now you only see the Checkbox button. do the same for bttn2 and finished.
The only issue is that when you end the eidget it will reset unless you save those states for instance in another blueprint that holds your variables or as i do as a Setting in a savegame Slot.

Hope this helps

[Lunder]

To revert you do the same thing with the previous normal button style, so with an exemple that can be more easy.
First I create a button with different style :

then in the wisget button i create two function, one for the button selection and another for the button deselection.

finally I create a function who handle the switch. In the widget if buttons are on the same widget or in the HUD if Buttons are on differents widgets.

and when you click in a button you call this function, with the new button in the parameter.

in my case, it’s a server list selection

[anonymous_user_c25988a4]

Hi

Thanks for the help. I got it to work using your method but I’d like the button to revert back to it’s previous state when another button is clicked on. Any ideas on how to pull that off? This is being used to change the materials of furniture. So when the user clicks on a material swatch a checkbox appears on that chosen swatch and goes away when another is selected.

Attached is where I’m at with it. Screen shots are big help

-Thanks again

[anonymous_user_c25988a4]

Hi,

I really appreciate your help. Sadly I haven’t figured it out yet. Been spending hours on it but still have some questions.
In your “Select” and “Deselect” functions how did you make that “Widget Style” node that is between your “button 0” and the “break button style” node? Is that a reference?

Also on your “HandleServerSelection” function how did you make the "Server Selected " node ? that is a reference right? If so is it a reference to the custom event?
And finally where did you get the “Set” node between your “Deselect server” node and your “select server” node?

I’ve attached my progress. Sorry if these are basic questions. I’m trying to learn Unreal on the side.

thanks again

[Aleksandro]

So I think i understand your plan. First of all make sure that you have something like a default function at Event Begin construct(I think that you will not remove the widget from the viewport) that leads to all buttons (say 4materials each inheriting two buttons one clicked an one not clicked) to be set as : 1.1 visible 1.2 hidden, 2.1 hid 2.2 vis, 3.1 hid 3.2 vis, 4.1 hid 4.2 vis. So it makes sure material 1 is checked so make sure your first material is set on your mesh. When you choose another material say 3, then you do the material change function for that one in the flow of Button 3.2 (empty box button 3.2) and NOW a whole flow that makes 1.1 HIDDEN and the rest also as default because ONLY 3.1 has to be visible. See the issue with this concept is that it get complicates for more buttons. I recommended this for a simple use like volume on and off button. Either do it conplicated or take the other, more efficient approaches There are many methods , look what suits you best.