How can you disable a UI button?

Solar2D General Questions/Discussion
#1

If you create a button like this:

local btn = ui.newButton{  
 defaultSrc = "image.png",  
 defaultX = 100,  
 defaultY = 37,  
 overSrc = "image-over.png",  
 overX = 100,  
 overY = 37,  
 text = "Button",  
 size = 5,  
 font = Futura,  
 onEvent = btnSelected,  
 }

How can you then set it to disabled so that tapping it does nothing? I’m creating many buttons like this within a loop, and I need to conditionally set some of them disabled. [import]uid: 52127 topic_id: 12704 reply_id: 312704[/import]

#2

Hi jn19,

There are a few options to do that.

You can look inside your ui file and remove the touch event listener to disable it, and then add it over again to enable it. I’m pretty sure this can by accessed by using

[lua]–to disable

myButton:removeEventListener( “touch”, myButton )

–and to re-enable

myButton.touch = ui.newButtonHandler
myButton:addEventListener( “touch”, myButton )

–but you’ll probably have to globalize the newButtonHandler function in your ui.lua file
– (or coronaui_ui.lua, whatever you are using) by deleting the word “local” that’s in front of it[/lua]

Of course using global variables is a no-no and you are going to have to choose the lesser evil in this case.

Or you could try createing an clear image right on top of your button and adding an touch listener to it that has nothing in the listener function except for “return true”. That would effectively block the touches from going to your button. And you could delete it whenever you want your button working again.

There are probably a dozen different options, but I hope those two provide you with some ideas.

-Matt
W2MD

[import]uid: 10211 topic_id: 12704 reply_id: 46521[/import]

#3 
myButton:removeEventListener( "touch", myButton )

doesn’t work with buttons created by ui.newButton.

I guess I could put a fake image on top of it, but that seems very hacky. Surely there has got to be an easier way to disable a ui button… [import]uid: 52127 topic_id: 12704 reply_id: 46673[/import]

#4

Using a fake image is definitely pretty hacky, but that’s not exactly what I mentioned earlier. I wasn’t suggesting a fake image, but rather a clear image. I’m talking about creating an image that is 1 pixel by 1 pixel that is completely transparent before you even start coding. That way it takes up relatively no texture memory and very little memory otherwise (it just gets stretched to fit the size you need).

If you use that you don’t even have to use a button underneath it, just a couple of images that are changed from visible to invisible in the clear button’s listener function. I use this method fairly often when creating tab bars, but when doing that I usually have an image that never changes and a translucent overlay that darkens the image underneath (to make it appear like an “over” image).

Good Luck,

-Matt
W2MD [import]uid: 10211 topic_id: 12704 reply_id: 46683[/import]

#5

In my VERY limited experience, covering a button with an image does not work. Button presses seem to go through all layers. [import]uid: 31262 topic_id: 12704 reply_id: 46688[/import]

#6

To prevent that you just need to put ‘return true’ at the end of a touch listener function to prevent the button presses from going through it to the other buttons underneath. [import]uid: 10211 topic_id: 12704 reply_id: 46689[/import]

#7

Just use my enhanced version of ui.lua then you can disable it with playBtn.isActive = false

http://developer.anscamobile.com/code/enhanced-ui-library-uilua [import]uid: 10478 topic_id: 12704 reply_id: 46693[/import]

#8

@w2md
Ah great to know! [import]uid: 31262 topic_id: 12704 reply_id: 46694[/import]

#9

@PixelEnvision
I actually am using your version, but btn.isActive = false seems to have no effect.

local levelBtn = ui.newButton{  
 defaultSrc = "image.png",  
 defaultX = 100,  
 defaultY = 37,  
 overSrc = "image.png",  
 overX = 100,  
 overY = 37,  
 text = "level",  
 size = 5,  
 font = Futura,  
 onEvent = levelSelected,  
 }  
  
  
levelBtn.isActive = false;

Tapping the button still triggers the levelSelected function. [import]uid: 52127 topic_id: 12704 reply_id: 46712[/import]

#10

@jn19,

You should call it within the touch event.

[lua]local levelSelected = function( event )
if event.phase == “release” and levelBtn.isActive then

levelBtn.isActive = false
–rest of your handler code

end
end

local levelBtn = ui.newButton{
defaultSrc = “image.png”,
defaultX = 100,
defaultY = 37,
overSrc = “image.png”,
overX = 100,
overY = 37,
text = “level”,
size = 5,
font = Futura,
onEvent = levelSelected,
}[/lua] [import]uid: 10478 topic_id: 12704 reply_id: 46722[/import]

#11

@PixelEnvision,
So you’re basically just setting a property of the button?

Ideally I want to make the button not even fire any events.

Also, I have many level buttons that all call the same handler (and do different things based on event.id). So how could I check if the particular button I selected was active? [import]uid: 52127 topic_id: 12704 reply_id: 46727[/import]

#12

just set button.touch = nil and then restore it later when you want the button to get events again… [import]uid: 6175 topic_id: 12704 reply_id: 46836[/import]

#13

@dgaedcke,

setting btn.touch = nil does disable it. But how do you restore it? [import]uid: 52127 topic_id: 12704 reply_id: 46862[/import]

#14

Hello,

I know this is a late recall, but I ran into the same problem on my recent game too! I used

[code]
myButton.isActive = false
–then hide it
myButton.isVisible = false
– when I want it back - active and visible I do the following
myButton.isActive = true
myButton.isVisible = true

–DONE!
–PS - remember that the above code will be inside a callback function, like onClick( event ) function
[/code] [import]uid: 75258 topic_id: 12704 reply_id: 111015[/import]