x

Search in
Sort by:

Question Status:

Search help

  • Simple searches use one or more words. Separate the words with spaces (cat dog) to search cat,dog or both. Separate the words with plus signs (cat +dog) to search for items that may contain cat but must contain dog.
  • You can further refine your search on the search results page, where you can search by keywords, author, topic. These can be combined with each other. Examples
    • cat dog --matches anything with cat,dog or both
    • cat +dog --searches for cat +dog where dog is a mandatory term
    • cat -dog -- searches for cat excluding any result containing dog
    • [cats] —will restrict your search to results with topic named "cats"
    • [cats] [dogs] —will restrict your search to results with both topics, "cats", and "dogs"

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

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,

-Andrew

Product Version: UE 4.16
Tags:
more ▼

asked Sep 02 '17 at 06:16 PM in Blueprint Scripting

avatar image

ADiMaggio
1 1 4 5

(comments are locked)
10|2000 characters needed characters left
Viewable by all users

6 answers: sort voted first

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

alt text

button2.png (251.3 kB)
more ▼

answered Sep 03 '17 at 05:31 AM

avatar image

Shogo999
265 10 5 15

avatar image ADiMaggio Sep 04 '17 at 03:34 AM

Hi Shogo999

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 Lunder'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 :) -Andrew

wip2.jpg (156.8 kB)
(comments are locked)
10|2000 characters needed characters left
Viewable by all users

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

alt text

button.png (214.0 kB)
more ▼

answered Sep 02 '17 at 07:34 PM

avatar image

Shogo999
265 10 5 15

avatar image ADiMaggio Sep 02 '17 at 09:34 PM

Thanks for the quick reply Shogo999 . 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 :)

-Andrew

(comments are locked)
10|2000 characters needed characters left
Viewable by all users

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

more ▼

answered Sep 03 '17 at 12:12 AM

avatar image

Andrei Despinoiu
270 4 9 12

(comments are locked)
10|2000 characters needed characters left
Viewable by all users

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

alt text

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

more ▼

answered Sep 03 '17 at 09:23 AM

avatar image

Lunder
88 2 4 4

avatar image ADiMaggio Sep 04 '17 at 03:24 AM

Hey Lunder,

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

-Andrew

swatches.jpg (16.9 kB)
avatar image Lunder Sep 04 '17 at 07:16 PM

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 : alt text

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

alt text

alt text

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.

alt text

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

avatar image ADiMaggio Sep 07 '17 at 04:03 AM

Hi Lunder,

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

-Andrew

(comments are locked)
10|2000 characters needed characters left
Viewable by all users

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

more ▼

answered Sep 04 '17 at 06:48 PM

avatar image

Aleksandro
207 8 16 16

avatar image ADiMaggio Sep 07 '17 at 03:30 AM

Hi Aleksandro,

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 alt text

-Thanks again

Andrew

[2]: /storage/temp/212578-swatches.jpg

progress.jpg (68.3 kB)
swatches.jpg (16.9 kB)
(comments are locked)
10|2000 characters needed characters left
Viewable by all users

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.

more ▼

answered Sep 07 '17 at 12:29 PM

avatar image

Aleksandro
207 8 16 16

(comments are locked)
10|2000 characters needed characters left
Viewable by all users
Your answer
toggle preview:

Up to 5 attachments (including images) can be used with a maximum of 5.2 MB each and 5.2 MB total.

Follow this question

Once you sign in you will be able to subscribe for any updates here

Answers to this question