I’d like to make a button flash on / off. I figure I can do this with a timer.performWithDelay() function but how do I change the state of the button visual programmatically? Note - I don’t want to trigger the button behavior either but I could work around that if need-be in my callbacks.
Failing that, is there a way to change the default button image on the fly?
Thanks,
Alex [import]uid: 178851 topic_id: 33339 reply_id: 333339[/import]
Hey, Alex, I’m not sure what you are trying to do, but if you want a button that is animating (two-frame animation that is constantly toggling between two frames), you might want to look into using a sprite object. You can make a sprite object into a button by adding EventListener and make it respond to touch, tap, etc. If you don’t want the images to toggle constantly on its own, and instead, if you want it to change its look when the button is touched, you can still use the same sprite object. In this case, instead of playing the sprite (that would animate the object), you’d want to setFrame, switching its frame each time it is touched, tapped, etc.
I hope this makes sense. Good luck.
Naomi
Edit: One more thing, if you want the button to behave differently – i.e., if you want the touch/tap to do something different each time it is touched/tapped, I think you can change its behavior by removing/adding EventListener. Or at least that’s how I’d go about experimenting how it goes.
And… if I’m using widget (instead of animated sprite object), I’d just change the widget’s onRelease property each time – and, even though I haven’t tried this before, I’d try and see if I can change the widget’s defaultIndex and overIndex property at runtime (assuming the widget is using image sheet for its look.) [import]uid: 67217 topic_id: 33339 reply_id: 132444[/import]
Hi,
Sorry - nothing you suggested was what I asked for. I need to programmatically change the state of the button to ‘highlighted’ and ‘un-highlighted’. I’m doing this to draw the user’s attention to the button. I do actually want it to flash on / off but using a sprite is too much effort on my part. I already have an image for on / off assigned to the button and I just want to toggle between the two.
Is there a way to do this? It must be buried in the ButtonWidget code somewhere but of course I can’t find it because in Lua, there’s no API or type safety available for anything.
[import]uid: 178851 topic_id: 33339 reply_id: 132450[/import]
@alexworden, I’m not sure what you mean by programmatically “highlighted” and “un-highlighted”. Do you mean you want to create/render highlight effect over your button at runtime when you tap it, sort of glow effect, or whatever else, rather than swapping an image on your button to another image?
Or do you mean, something like… say you have an on/off button, and you have two images (one that looks like ON-state and another that looks like OFF-state), and you want the button to start off looking like its ON-state, and then tapping on it would switch its look to OFF-state?
I can think of a few different ways I’d change a look of a button at runtime, but it all depends on how I’d want the look of the button to change, when/how the state of the button must change and what approach suits me best.
It also sounds like you were unable to find information on how to create buttons using widget. Here’s a blog post that might help you with that:
http://www.coronalabs.com/blog/2012/05/22/adding-buttons-to-your-games-and-apps/
Naomi [import]uid: 67217 topic_id: 33339 reply_id: 132456[/import]
Simple example…
[code]local function button()
local square = display.newRect(0,0,128,128)
square.strokeWidth = 2
square:setStrokeColor(100,100,100)
square.isOn = false
function square:toggle()
if square.isOn then – turn it off
square.isOn = false
square:setStrokeColor(255,0,0)
else – turn it on
square.isOn = true
square:setStrokeColor(100,100,100
end
end --/toggle()
return square
end --/button()
local myButton = button() – creates the button
myButton:toggle() – turns on or off
[/code]
EDIT: Blargh! We’re in the widget forum aren’t we? Well that’s a bit tougher. Maybe fake a touch event? ( :dispatchEvent{} ) Not sure if you can just outright set index or something. [import]uid: 41884 topic_id: 33339 reply_id: 132476[/import]
Hi,
I have a ButtonWidget already.
It has an image for “up” and “down” already. The images look like it’s ‘highlighted’ when touched.
All I want to do is have my code change the image used by the button at runtime. It should be a very simple operation.
You can set the ‘default’ and ‘touch’ (I forget the exact name) images of the button when you create it.
All I want to do is instruct the button to display the ‘touch’ image or the ‘default’ image.
Failing that, I’d like to change the default image on the fly.
If this isn’t supported, I guess I have to write my own button widget 
Alex [import]uid: 178851 topic_id: 33339 reply_id: 132481[/import]
@alexworden, if that’s the case, I don’t know if you can simply tell the widget to update what image to show at runtime. I have a feeling you can’t. Maybe all you can do is to remove the widget button and immediately recreate it.
That said, if you can make this “up” and “down” images into a single image sheet, you might be able to update the defaultIndex and overIndex property at runtime without loading two separate images again, because when you use image sheet, the widget button’s property is simply pointing to a frame (instead of adding an image to the property like the way you do when creating a widget button.) Like I mentioned, I haven’t tried it, so I’m only wondering if we could change the defaultIndex and overIndex property at runtime by updating their value/reference to a different frame on the image sheet.
Anyhow, let’s hope someone knowledgeable will jump in and let you know what options you really have.
Good luck.
Naomi
Edit: By the way, if I were you, I’d definitely consider using sprite object (the simplest would be a two-frame imagesheet that you can put together with your “up” and “down” images), and set the frame to whatever you want at run time, and attach eventListener to make the sprite object respond to your touch the way you want. To me, it would feel like the easiest/simplest approach for what you are trying to achieve…
[import]uid: 67217 topic_id: 33339 reply_id: 132489[/import]
I don’t use the widget.newButton for this but when I need a toggle type graphic, I draw two display.newImageRects() at the same X, Y so that one hides the other. Then I would use their .isVisible attribute to show which ever one I wanted at the moment.
But if you wanted a pulse effect you could combine a couple of transition.to’s changing the alpha of each graphic, something like:
local showRegular
local shouldStopAnimating = false
local function showRegular(target)
if shouldStopAnimating then
return true
end
transition.to(highlightButton, {time=500, alpha=0.0})
transition.to(regularButton, {time=500, alpha=1.0, onComplete=showHighlight})
end
showHighlight = function(target)
if shouldStopAnimating then
return true
end
transition.to(highlightButton, {time=500, alpha=1.0})
transition.to(regularButton, {time=500, alpha=0.0, onComplete=showRegular})
end Then if you want to stop the animation, just set the shouldStopAnimating flag to true.
I’m not using the target parameter passed in, but I included it anyway.
Rob
[import]uid: 199310 topic_id: 33339 reply_id: 132505[/import]
Hey, Alex, I’m not sure what you are trying to do, but if you want a button that is animating (two-frame animation that is constantly toggling between two frames), you might want to look into using a sprite object. You can make a sprite object into a button by adding EventListener and make it respond to touch, tap, etc. If you don’t want the images to toggle constantly on its own, and instead, if you want it to change its look when the button is touched, you can still use the same sprite object. In this case, instead of playing the sprite (that would animate the object), you’d want to setFrame, switching its frame each time it is touched, tapped, etc.
I hope this makes sense. Good luck.
Naomi
Edit: One more thing, if you want the button to behave differently – i.e., if you want the touch/tap to do something different each time it is touched/tapped, I think you can change its behavior by removing/adding EventListener. Or at least that’s how I’d go about experimenting how it goes.
And… if I’m using widget (instead of animated sprite object), I’d just change the widget’s onRelease property each time – and, even though I haven’t tried this before, I’d try and see if I can change the widget’s defaultIndex and overIndex property at runtime (assuming the widget is using image sheet for its look.) [import]uid: 67217 topic_id: 33339 reply_id: 132444[/import]
Hi,
Sorry - nothing you suggested was what I asked for. I need to programmatically change the state of the button to ‘highlighted’ and ‘un-highlighted’. I’m doing this to draw the user’s attention to the button. I do actually want it to flash on / off but using a sprite is too much effort on my part. I already have an image for on / off assigned to the button and I just want to toggle between the two.
Is there a way to do this? It must be buried in the ButtonWidget code somewhere but of course I can’t find it because in Lua, there’s no API or type safety available for anything.
[import]uid: 178851 topic_id: 33339 reply_id: 132450[/import]
@alexworden, I’m not sure what you mean by programmatically “highlighted” and “un-highlighted”. Do you mean you want to create/render highlight effect over your button at runtime when you tap it, sort of glow effect, or whatever else, rather than swapping an image on your button to another image?
Or do you mean, something like… say you have an on/off button, and you have two images (one that looks like ON-state and another that looks like OFF-state), and you want the button to start off looking like its ON-state, and then tapping on it would switch its look to OFF-state?
I can think of a few different ways I’d change a look of a button at runtime, but it all depends on how I’d want the look of the button to change, when/how the state of the button must change and what approach suits me best.
It also sounds like you were unable to find information on how to create buttons using widget. Here’s a blog post that might help you with that:
http://www.coronalabs.com/blog/2012/05/22/adding-buttons-to-your-games-and-apps/
Naomi [import]uid: 67217 topic_id: 33339 reply_id: 132456[/import]
Simple example…
[code]local function button()
local square = display.newRect(0,0,128,128)
square.strokeWidth = 2
square:setStrokeColor(100,100,100)
square.isOn = false
function square:toggle()
if square.isOn then – turn it off
square.isOn = false
square:setStrokeColor(255,0,0)
else – turn it on
square.isOn = true
square:setStrokeColor(100,100,100
end
end --/toggle()
return square
end --/button()
local myButton = button() – creates the button
myButton:toggle() – turns on or off
[/code]
EDIT: Blargh! We’re in the widget forum aren’t we? Well that’s a bit tougher. Maybe fake a touch event? ( :dispatchEvent{} ) Not sure if you can just outright set index or something. [import]uid: 41884 topic_id: 33339 reply_id: 132476[/import]
Hi,
I have a ButtonWidget already.
It has an image for “up” and “down” already. The images look like it’s ‘highlighted’ when touched.
All I want to do is have my code change the image used by the button at runtime. It should be a very simple operation.
You can set the ‘default’ and ‘touch’ (I forget the exact name) images of the button when you create it.
All I want to do is instruct the button to display the ‘touch’ image or the ‘default’ image.
Failing that, I’d like to change the default image on the fly.
If this isn’t supported, I guess I have to write my own button widget
Alex [import]uid: 178851 topic_id: 33339 reply_id: 132481[/import]
@alexworden, if that’s the case, I don’t know if you can simply tell the widget to update what image to show at runtime. I have a feeling you can’t. Maybe all you can do is to remove the widget button and immediately recreate it.
That said, if you can make this “up” and “down” images into a single image sheet, you might be able to update the defaultIndex and overIndex property at runtime without loading two separate images again, because when you use image sheet, the widget button’s property is simply pointing to a frame (instead of adding an image to the property like the way you do when creating a widget button.) Like I mentioned, I haven’t tried it, so I’m only wondering if we could change the defaultIndex and overIndex property at runtime by updating their value/reference to a different frame on the image sheet.
Anyhow, let’s hope someone knowledgeable will jump in and let you know what options you really have.
Good luck.
Naomi
Edit: By the way, if I were you, I’d definitely consider using sprite object (the simplest would be a two-frame imagesheet that you can put together with your “up” and “down” images), and set the frame to whatever you want at run time, and attach eventListener to make the sprite object respond to your touch the way you want. To me, it would feel like the easiest/simplest approach for what you are trying to achieve…
[import]uid: 67217 topic_id: 33339 reply_id: 132489[/import]
I don’t use the widget.newButton for this but when I need a toggle type graphic, I draw two display.newImageRects() at the same X, Y so that one hides the other. Then I would use their .isVisible attribute to show which ever one I wanted at the moment.
But if you wanted a pulse effect you could combine a couple of transition.to’s changing the alpha of each graphic, something like:
local showRegular
local shouldStopAnimating = false
local function showRegular(target)
if shouldStopAnimating then
return true
end
transition.to(highlightButton, {time=500, alpha=0.0})
transition.to(regularButton, {time=500, alpha=1.0, onComplete=showHighlight})
end
showHighlight = function(target)
if shouldStopAnimating then
return true
end
transition.to(highlightButton, {time=500, alpha=1.0})
transition.to(regularButton, {time=500, alpha=0.0, onComplete=showRegular})
end Then if you want to stop the animation, just set the shouldStopAnimating flag to true.
I’m not using the target parameter passed in, but I included it anyway.
Rob
[import]uid: 199310 topic_id: 33339 reply_id: 132505[/import]