
CoronaSDK Enhanced UI Library (ui.lua)
While working with CoronaSDK I ended up using ui.lua for the buttons in our upcoming iPhone/iPad game. But I had hard time locating the latest version as many other developers had their own versions.
So, I have decided to make an ultimate latest version that will combine all previous enhancements along with my own. Copy of that Lua code is still available at Ansca code exchange.
NEW: Updated to eliminate the use of LUAs deprecated module() function. This is an internal change only, usage stays the same.
NEW: Added event support, now returns even.target, event.x & event.y values. You can use x/y values to provide different actions based on the coordinates of the touch event reative to the x/y size of the button image.
NEW: isActive state enhanced, so the button can be enabled/disabled without checking current isActive state with if-then.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 |
-- ui.lua (currently includes Button class with labels, font selection and optional event model) -- Version 2.4 -- Based on the folowing original provided by Ansca Inc. -- Version 1.5 (works with multitouch, adds setText() method to buttons) -- -- Copyright (C) 2010 ANSCA Inc. All Rights Reserved. -- -- Permission is hereby granted, free of charge, to any person obtaining a copy of -- this software and associated documentation files (the "Software"), to deal in the -- Software without restriction, including without limitation the rights to use, copy, -- modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, -- and to permit persons to whom the Software is furnished to do so, subject to the -- following conditions: -- -- The above copyright notice and this permission notice shall be included in all copies -- or substantial portions of the Software. -- -- THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, -- INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR -- PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE -- FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR -- OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER -- DEALINGS IN THE SOFTWARE. -- Version 1.6 Works with Dynamic Scaling. -- Based on the work edited by William Flagello, williamflagello.com -- Original from https://developer.anscamobile.com/code/ui-library -- -- Version 1.7 Dynamic Scaling text fixes by Jonathan Bebe -- http://developer.anscamobile.com/forum/2010/12/17/easily-make-your-text-sharp-retina-displays#comment-18164 -- Provided in Ghosts & Monsters Sample Project -- -- Version 1.71 Retina Updates by Jonathan Bebe -- http://developer.anscamobile.com/forum/2010/12/17/easily-make-your-text-sharp-retina-displays#comment-38284 -- Adapted to 1.7 base code by E. Gonenc, pixelenvision.com -- -- Version 1.8 added support for providing already realized display-objects for use in Tiled/Lime -- Based on the file changed by Frank Siebenlist -- http://developer.anscamobile.com/forum/2011/02/19/enhanced-uilua-v15 -- Adapted to 1.7 base code by E. Gonenc, pixelenvision.com -- -- Version 1.9 -- Added transparency & scaling options to use as over state. newLabel updated to support retina text. -- Edited by E. Gonenc, pixelenvision.com -- -- Version 1.91 -- Added suggested fix for overlapping buttons by Jonathan Bebe -- http://jonbeebe.net/to-return-true-or-not-to -- Adapted by E. Gonenc, pixelenvision.com -- -- Version 2.02 -- Button text will now follow scaling & alpha states of over button -- Edited by E. Gonenc, pixelenvision.com -- -- Version 2.1 -- Added suggested .isActive update by monoxgas http://developer.anscamobile.com/code/enhanced-ui-library-uilua#comment-49272 -- Edited by E. Gonenc, pixelenvision.com -- -- Version 2.2 -- Updated to eliminate the use of LUAs deprecated module() function. This is an internal change only, usage stays the same. -- http://blog.anscamobile.com/2011/09/a-better-approach-to-external-modules/ -- Edited by E. Gonenc, pixelenvision.com -- -- Version 2.3 -- Updated to use object.contentBounds instead of deprecated object.stageBounds -- Added event support, now returns even.target, event.x & event.y values. You can use x/y values to provide different actions -- based on the coordinates of the touch event reative to the x/y size of the button image. -- Edited by E. Gonenc, pixelenvision.com -- -- Version 2.4 -- isActive state enhanced to button can be enabled/disabled without checking current isActive state with if-then. -- ie. btn.isActive = true (Default state, button is enabled) btn.isActive = false (button is disabled, no animation and action) -- Edited by E. Gonenc, pixelenvision.com local M = {} ------------- -- convenience test functions added by Frank. local coronaMetaTable = getmetatable(display.getCurrentStage()) --- Test function that returns whether object is a Corona display object. -- Note that all Corona types seem to share the same metatable... local isDisplayObject = function(o) return type(o) == "table" and getmetatable(o) == coronaMetaTable end ----------------- -- Helper function for newButton utility function below local function newButtonHandler( self, event ) local result = true local default = self[1] local over = self[2] local txt1,txt2,txt3 local OX,OY,SX,SY,SM if self[3] then txt1 = self[3] end if self[4] then txt2 = self[4] end if self[5] then txt3 = self[5] end if txt1 or txt2 or txt3 then if display.contentScaleX < 1.0 or display.contentScaleY < 1.0 then SM = 2 else SM = 1 end OX,OY = (over.xScale/default.xScale),(over.yScale/default.yScale) SX,SY = (default.xScale/over.xScale),(default.yScale/over.yScale) end -- General "onEvent" function overrides onPress and onRelease, if present local onEvent = self._onEvent local onPress = self._onPress local onRelease = self._onRelease local buttonEvent = {} if (self._id) then buttonEvent.id = self._id end buttonEvent.isActive = self.isActive buttonEvent.target = self local phase = event.phase if self.isActive then if "began" == phase then if over then default.isVisible = false over.isVisible = true if txt1 then txt1:scale(OX,OY);txt1.alpha = over.alpha end if txt2 then txt2:scale(OX,OY);txt2.alpha = over.alpha end if txt3 then txt3:scale(OX,OY);txt3.alpha = over.alpha end end if onEvent then buttonEvent.phase = "press" buttonEvent.x = event.x - self.contentBounds.xMin buttonEvent.y = event.y - self.contentBounds.yMin result = onEvent( buttonEvent ) elseif onPress then result = onPress( event ) end -- Subsequent touch events will target button even if they are outside the contentBounds of button display.getCurrentStage():setFocus( self, event.id ) self.isFocus = true elseif self.isFocus then local bounds = self.contentBounds local x,y = event.x,event.y local isWithinBounds = bounds.xMin = x and bounds.yMin = y if "moved" == phase then if over then -- The rollover image should only be visible while the finger is within button's stageBounds default.isVisible = not isWithinBounds over.isVisible = isWithinBounds if txt1 and not isWithinBounds and txt1.xScale*SM == OX then txt1:scale(SX,SY);txt1.alpha = default.alpha elseif txt1 and isWithinBounds and txt1.xScale*SM ~= OX then txt1:scale(OX,OY);txt1.alpha = over.alpha end if txt2 and not isWithinBounds and txt2.xScale*SM == OX then txt2:scale(SX,SY);txt2.alpha = default.alpha elseif txt2 and isWithinBounds and txt2.xScale*SM ~= OX then txt2:scale(OX,OY);txt2.alpha = over.alpha end if txt3 and not isWithinBounds and txt3.xScale*SM == OX then txt3:scale(SX,SY);txt3.alpha = default.alpha elseif txt3 and isWithinBounds and txt3.xScale*SM ~= OX then txt3:scale(OX,OY);txt3.alpha = over.alpha end end elseif "ended" == phase or "cancelled" == phase then if over then default.isVisible = true over.isVisible = false if txt1 and txt1.xScale*SM == OX then txt1:scale(SX,SY);txt1.alpha = default.alpha end if txt2 and txt2.xScale*SM == OX then txt2:scale(SX,SY);txt2.alpha = default.alpha end if txt3 and txt3.xScale*SM == OX then txt3:scale(SX,SY);txt3.alpha = default.alpha end end if "ended" == phase then -- Only consider this a "click" if the user lifts their finger inside button's stageBounds if isWithinBounds then if onEvent then buttonEvent.phase = "release" buttonEvent.x = event.x - bounds.xMin buttonEvent.y = event.y - bounds.yMin result = onEvent( buttonEvent ) elseif onRelease then result = onRelease( event ) end end end -- Allow touch events to be sent normally to the objects they "hit" display.getCurrentStage():setFocus( self, nil ) self.isFocus = false end end end return true end --------------- -- Button class local function newButton( params ) local button, defaultSrc , defaultX , defaultY , overSrc , overX , overY , overScale , overAlpha , size, font, textColor, offset local sizeDivide = 1 local sizeMultiply = 1 if display.contentScaleX < 1.0 or display.contentScaleY < 1.0 then sizeMultiply = 2 sizeDivide = 0.5 end if params.defaultSrc then button = display.newGroup() if isDisplayObject(params.defaultSrc) then default = params.defaultSrc else default = display.newImageRect ( params.defaultSrc , params.defaultX , params.defaultY ) end button:insert( default, false ) end if params.overSrc then if isDisplayObject(params.overSrc) then over = params.overSrc else over = display.newImageRect ( params.overSrc , params.overX , params.overY ) end if params.overAlpha then over.alpha = params.overAlpha end if params.overScale then over:scale(params.overScale,params.overScale) end over.isVisible = false button:insert( over, false ) end -- Public methods function button:setText( newText ) local labelText = self.text if ( labelText ) then labelText:removeSelf() self.text = nil end local labelShadow = self.shadow if ( labelShadow ) then labelShadow:removeSelf() self.shadow = nil end local labelHighlight = self.highlight if ( labelHighlight ) then labelHighlight:removeSelf() self.highlight = nil end if ( params.size and type(params.size) == "number" ) then size=params.size else size=20 end if ( params.font ) then font=params.font else font=native.systemFontBold end if ( params.textColor ) then textColor=params.textColor else textColor={ 255, 255, 255, 255 } end size = size * sizeMultiply -- Optional vertical correction for fonts with unusual baselines (I'm looking at you, Zapfino) if ( params.offset and type(params.offset) == "number" ) then offset=params.offset else offset = 0 end if ( params.emboss ) then -- Make the label text look "embossed" (also adjusts effect for textColor brightness) local textBrightness = ( textColor[1] + textColor[2] + textColor[3] ) / 3 labelHighlight = display.newText( newText, 0, 0, font, size ) if ( textBrightness > 127) then labelHighlight:setTextColor( 255, 255, 255, 20 ) else labelHighlight:setTextColor( 255, 255, 255, 140 ) end button:insert( labelHighlight, true ) labelHighlight.x = labelHighlight.x + 1.5; labelHighlight.y = labelHighlight.y + 1.5 + offset self.highlight = labelHighlight labelShadow = display.newText( newText, 0, 0, font, size ) if ( textBrightness > 127) then labelShadow:setTextColor( 0, 0, 0, 128 ) else labelShadow:setTextColor( 0, 0, 0, 20 ) end button:insert( labelShadow, true ) labelShadow.x = labelShadow.x - 1; labelShadow.y = labelShadow.y - 1 + offset self.shadow = labelShadow labelHighlight.xScale = sizeDivide; labelHighlight.yScale = sizeDivide labelShadow.xScale = sizeDivide; labelShadow.yScale = sizeDivide end labelText = display.newText( newText, 0, 0, font, size ) labelText:setTextColor( textColor[1], textColor[2], textColor[3], textColor[4] ) button:insert( labelText, true ) labelText.y = labelText.y + offset self.text = labelText labelText.xScale = sizeDivide; labelText.yScale = sizeDivide end if params.text then button:setText( params.text ) end if ( params.onPress and ( type(params.onPress) == "function" ) ) then button._onPress = params.onPress end if ( params.onRelease and ( type(params.onRelease) == "function" ) ) then button._onRelease = params.onRelease end if (params.onEvent and ( type(params.onEvent) == "function" ) ) then button._onEvent = params.onEvent end -- set button to active (meaning, can be pushed) button.isActive = true -- Set button as a table listener by setting a table method and adding the button as its own table listener for "touch" events button.touch = newButtonHandler button:addEventListener( "touch", button ) if params.x then button.x = params.x end if params.y then button.y = params.y end if params.id then button._id = params.id end return button end M.newButton = newButton -------------- -- Label class local function newLabel( params ) local labelText local size, font, textColor, align local t = display.newGroup() local sizeDivide = 1 local sizeMultiply = 1 if ( params.bounds ) then local bounds = params.bounds local left = bounds[1] local top = bounds[2] local width = bounds[3] local height = bounds[4] if ( params.size and type(params.size) == "number" ) then size=params.size else size=20 end if ( params.font ) then font=params.font else font=native.systemFontBold end if ( params.textColor ) then textColor=params.textColor else textColor={ 255, 255, 255, 255 } end if ( params.offset and type(params.offset) == "number" ) then offset=params.offset else offset = 0 end if ( params.align ) then align = params.align else align = "center" end if ( params.text ) then labelText = display.newText( params.text, 0, 0, font, size * 2 ) labelText.xScale = 0.5; labelText.yScale = 0.5 labelText:setTextColor( textColor[1], textColor[2], textColor[3], textColor[4] ) t:insert( labelText ) -- TODO: handle no-initial-text case by creating a field with an empty string? if ( align == "left" ) then labelText.x = left + labelText.contentWidth * 0.5 elseif ( align == "right" ) then labelText.x = (left + width) - labelText.contentWidth * 0.5 else labelText.x = ((2 * left) + width) * 0.5 end end labelText.y = top + labelText.contentHeight * 0.5 -- Public methods function t:setText( newText ) if ( newText ) then labelText.text = newText if ( "left" == align ) then labelText.x = left + labelText.contentWidth * 0.5 elseif ( "right" == align ) then labelText.x = (left + width) - labelText.contentWidth * 0.5 else labelText.x = ((2 * left) + width) * 0.5 end end end function t:setTextColor( r, g, b, a ) local newR = 255 local newG = 255 local newB = 255 local newA = 255 if ( r and type(r) == "number" ) then newR = r end if ( g and type(g) == "number" ) then newG = g end if ( b and type(b) == "number" ) then newB = b end if ( a and type(a) == "number" ) then newA = a end labelText:setTextColor( r, g, b, a ) end end -- Return instance (as display group) return t end M.newLabel = newLabel return M |
Hi, I am not able to display the other lua file on click event please help to resolve.
Yogesh…
Hi Yogesh, I’m afraid I won’t be able to help you with this as I’m no longer working with Corona. I think you’d better off asking that on Corona forums…
Hi, i have a stupid question maybe, can i use this code ( ui.lua ) in a game that i want sell in a market? obviously i leave the comment in the ui.lua file. Thanks
Yes, you can. Code is free to use in anyway you’ll like, commercial or non-commercial…
I just wanted to make ya’ll aware of an issue – I submitted to Ansca.
I was using the Enhanced UI with director no problem, I changed my project to use the Storyboard, and I can not use the Enhanced UI.lua anymore.
if i take out the require for the UI.lua – mine other stuff works fine but just add it to a storyboard page and :( – i get this error below.
WARNING: Cannot transition to a scene that does not exist. If you called storyboard.removeScene() on a scene that is NOT represented by a module, the scene must be recreated before transitioning back to it.
Hi Larry, thank your for reporting that issue. My version of enhanced ui.lua has been designed before Storyboard introduced so it is not tested and/or designed to work with it.
If I’m not mistaken some one else had a similar problem… I believe he/she resolved the issue by dropping ui.lua and using widgets (internal button lib) of Corona SDK.
Unfortunately I’m not working with Corona SDK anymore so I won’t be able to help you with that problem. I would suggest looking at Ansca forums & Enhanced UI code exchange comments.
I added a few features I needed to the ui.lua, esp. text buttons, text-over color, etc. How do I get you that updated code to share?
Hi David, nice work! You may simply open a new support ticket with the file attached, I’ll take care of updating the post…
HI total newbie here what would i need ui.lua for?? As i can see its being used for the fruit ninja sample code and its only one level no score counter no timer no lives in the game and the amount of code in ui.lua it doesn’t make sense to me?? is ui.lau like layout or something sorry im still learning the ropes Thanks
Hi, it’s a simple class for creating buttons with plain (or embossed/shadowed) texts on them… You can always manually create your buttons but it would be easier to use ui.lua to simply assign images & texts and get your working buttons easily…
Ah i see Thanks for the that dude :)
Hi,
Thanks for making this code available. What’s the proper way to reference the button that triggers a touch event. I had thought it was event.target.id, but that doesn’t work.
Hi Tom, you’re welcome…
Once you put id definition in button creation code (id = “yourbuttonid”) You should be able to access using yourbuttonname.id or self.id, unless you are trying to do something else?
Those aren’t accessible in the onRelease function.
Right now I have separate release functions for each button. Being able to access the button id would let me have a single function for multiple buttons. But in a function like:
local mainButtonPress = function ( event )
–self.id doesn’t work in here
–do something
return true
end
…
local mainButton = ui.newButton{
defaultSrc = “Images/buttonBlueSmall.png”,
defaultX = 100,
defaultY = 40,
overSrc = “Images/buttonBlueSmallOver.png”,
overX = 100,
overY = 40,
onRelease = mainButtonPress,
id = “mainButton”,
text = translations[“Home”][language],
font = “Helvetica”,
textColor = { 255, 255, 0, 255 },
size = 8,
emboss = false
}
…neither self.id or mainButton.id return values and event.id returns “userdata: 0xf434c”. I’d thought there was a way to access the button behind the touch event, like event.name.id or event.type.id, but perhaps not?
Hi Tom, unfortunately current version (as the original) does not focused on onRelease handling. Why don’t you use onEvent instead? With it, you should be able to check assigned id in your function…
Is there a way to change the button’s defaultSrc value after the button has been created?
button1 = ui.newButton{
defaultSrc = “button.png”,
defaultX = 280,
defaultY = 35,
overSrc = “button_clicked.png”,
overX = 280,
overY = 35,
onRelease = buttonHandler1,
id = “button1”,
text = “Button text”,
font = “Custom”,
size = 18,
emboss = true
}
I try to use this code later:
button1.defaultSrc = “button_rightanswer.png”
But the button does not change.
Can it be changed in that way? If not, has anyone come up with a good way to accomplish this?
Unfortunately that is not possible with the current version. You cannot change the display image once it’s created… But there is a version of ui.lua on Ansca forums that might help you. It’s modified to use 3rd image state, I think it might help you…
http://developer.anscamobile.com/forum/2011/10/01/ui-button-should-have-disabled-state
Thanks for pointing me to that. I am not sure if that would be what I need, and I see that I would lose the ability to set isActive directly since it doesn’t appear to be based on your 2.4 version.
I did a workaround where I remove and recreate the button with a different defaultSrc value. It is kinda hacky, but it works, so I think I will stick with that for the time being.
Appreciate you pointing me to that though. Will definitely check it out again if you update your version of the UI code with that functionality.
Thanks again.
Can anyone please help me figure out how to disable a button. I am using the latest Ui however, I tried button1.isActive=false and the solution on the forum, Nothing works for me so far. He’s what I am trying to do, I want to Disabled button1, when Load button is touch and change the OverSCR image on button1 with another image. Here my code below please help me figure out what I am doing wrong here? Thank you for the help.
button1 = ui.newButton{
defaultSrc = “img.png”,
overSrc = “img”,
defaultX = 35,
defaultY = 40,
overX = 35,
overY = 40,
–onEvent = button1inactive,
–onPress = button1Click,
–onRelease=button1inactive,
id =”button1″,
text =””,
font =”Arial”,
textColor = { 51, 51, 51, 255 },
align = “left”,
size = 22,
}
LoadButton = ui.newButton{
defaultSrc = “img2.png”,
overSrc = “img2.png”,
defaultX = 35,
defaultY = 40,
overX = 35,
overY = 40,
–onEvent = button1inactive,
–onPress = button1Press,
–onRelease = button1Release,
id =”button1″,
text =””,
font =”Arial”,
textColor = { 51, 51, 51, 255 },
align = “left”,
size = 22,
}
function LoadButton:touch( event )
if event.phase == “release” and button1.isActive and X==Y then
button1.isActive = false
— I also want the change the overSrC image for button1 here. How to do that?
esle
button1.isActive=true
end
end
LoadButton:addEventListener (“touch”, LoadButton)
Thank you in advance
Hi Cereste,
Sorry for the delayed reply, there is a version of ui.lua on Ansca forums modified to use 3rd image for the disabled state. I’m planning to add that feature to my version too but till then, I think it might help you…
http://developer.anscamobile.com/forum/2011/10/01/ui-button-should-have-disabled-state
Hello,
I found a strange behavior when using ui 2.4 and corona sdk 2011.703
So i have this simple button with a text
local btnBackMainMenue = ui.newButton{
x = 160, y = 420,
defaultSrc = “ButtonLarge.png”, defaultX = 200, defaultY = 60,
overSrc = “ButtonLarge.png”, overX = 200, overY = 60,
overScale = 0.98,
onRelease = btnBackMainMenueOnRelease,
id = “btn_back_level”,
text = “Back”, font = C.fonts.default, size = C.fontSize.big, textColor = { 0, 0, 0, 255 },
emboss = true
}
Now to the strange behavior:
On the simulator or Android device push the button down and hold it.
While you are holding the button move your finger over the screen
while still pressing the button down.
Every time you move your finger a bit the text of the is getting smaller
and smaller until the text it is not visible.
Didn’t try to find a workaround but for me it seems not to be the proper behavior.
Just a addition to my last post. I can not reproduce it on the iPhone but on Droid and iPad didnt try other devices yet.
Hi Vadimo,
You’re right that shouldn’t happen, I had a similar problem but fixed that. Maybe recent changes to corona caused that or might be a config issue… Anyway, I’ll check that as soon as I can…
Hi again Vadimo,
I’ve just tried your button code on an empty project but I’m unable to reproduce that problem. Tested with latest corona (705) & ui 2.4 zip downloaded from this page… With all emulator devices available… I’ve also tested different scaling factors to see if it might be related (letterbox, zoomEven, etc)
What you describe was a problem with one of the earlier version of ui.lua, are you sure that you are using the 2.4? If so, could you please post your build.settings and config.lua so I can match your configuration for testing?
I created a stripped down App containing only one button with caption.
It seems that the error is caused by (Graham Ranson’s) rum.lua Lib which I am also using and NOT by the UI Lib itself.
Sample App: http://dl.dropbox.com/u/18073806/ui.lua_ZoomErrorOnBtn.zip
Uncomment rum.lua in MainMenue (line 7) and it works as expected.
Thanks you for your support.
thanks for the updated code. Just a quick question please. I have a UI button and want to check if it’s empty (i.e if it has a blank space). If it is empty, I would like to make it invisible. If not I would like to make it visible and set it’s text to “B”. I thought the code below was going to work, however it does not. Am I doing anything wrong? Thanks for your help.
— this is the function to test if button 1 is empty
local button1Press = function( event )
if (button1.text==” “)then
button1.isVisible = false
else
button1.isVisible = true
button1:setText (“B”)
end
end
— This is code for button1
button1 = ui.newButton{
defaultSrc = “images/BVC_ORANGE_3540.png”,
overSrc = “images/BVC_ORANGE_3540.png”,
defaultX = 35, — this is the x coordinate of the button
defaultY = 40,
overX = 35,
overY = 40,
–onEvent = button1Release,
onPress = button1Press,
–onRelease = button1Release,
id = “button1”,
text = “”,
font = “Arial”,
textColor = { 51, 51, 51, 255 },
align = “left”,
size = 22,
}
button1.x=50
button1.y=60
Hi John,
Button text is not a readable property, so you cannot check if it’s blank or not… Instead you may set a new property for the button and use it for that purpose…Check out the edited code below…
local button1Press = function( event )
if (button1.empty)then
button1.isVisible = false
else
button1.isVisible = true
button1:setText (“B”)
button1.empty=false
end
end
button1 = ui.newButton{
defaultSrc = “jewel.png”,
overSrc = “jewel.png”,
defaultX = 35,
defaultY = 40,
overX = 35,
overY = 40,
onPress = button1Press,
id =”button1″,
text =””,
font =”Arial”,
textColor = { 51, 51, 51, 255 },
align = “left”,
size = 22,
}
button1.empty=true
button1.x=50
button1.y=60
Thank you so much for your response. I tried the edited code, for some reason it did not work entirely. It remove the button wether it is empty or not.
Please bear with me. I am new to Corona and I can’t seem to manupulate text inside buttons like other languages that I used in the past.
Here’s what I am trying to do.
1. I have 4 buttons and 1 extra button which I call the Load button.
2. When I click on the load button, the program will select some random text and place a letter/character on each one of the 4 buttons
3. After the buttons are loaded, if a button has a space/empty character as it text, I want to remove that button to represent the space.
4. If a button has a letter as its text, I want to disabled the button.
Example: If the word is “I DO”, button1text=I, button2text=space/empty, button3text=D, button4text=O. Button 2 will be remove (invisible)and button 1, 3, 4 will be inactive.
Here’s the codes I have. Everything works except for the fact that I can’t seem to figure out how to make the button disappear/invisible when the button is empty and how to disable the button if its not empty. Sorry for the long note. I have been trying to figure this out for weeks and can not. Any help would be appreciated.
— Create 4 button–
button1 = ui.newButton{
defaultSrc = “images/BVC_ORANGE_3540.png”,
overSrc = “images/BVC_ORANGE_3540.png”,
defaultX = 35,
defaultY = 40,
overX = 35,
overY = 40,
onPress = button1Press,
id =”button1″,
text =””,
font =”Arial”,
textColor = { 51, 51, 51, 255 },
align = “left”,
size = 22,
}
button1.x=17
button1.y=60
Button2 — for the sake of time I show the code for just button 1
Button3
button4
— Load button code— When this button is clicked it will load button 1-4 with a word
button1 = ui.newButton{
defaultSrc = “images/BVC_ORANGE_3540.png”,
overSrc = “images/BVC_ORANGE_3540.png”,
defaultX = 35,
defaultY = 40,
overX = 35,
overY = 40,
id =”button1″,
text =””,
font =”Arial”,
textColor = { 51, 51, 51, 255 },
align = “left”,
size = 22,
}
LoadButton.x = screenCenter – 80
LoadButton.y = screenCenter + 80
— Word to load into the buttons —
local Word= display.newText(” “,134,407,native.systemFont,35)
— When load button is click it will load a character/letter in each of the 4 buttons created at the begining including the spaces
function LoadButton:tap(event)
local r=math.random(0,4) –this piece of code will randomize the Word and assigned it to the variable “Word”
if (r==0) then
Word.text=”I Do”
elseif (r==1) then
Word.text=”Not”
elseif (r==3) then
Word.text=”Think”
else
verse.text=”Then”
end
— Now assigned each button a letter from the chosen Word.
Button1:setText(Word.text:sub(1,1)
Button2:setText(Word.text:sub(2,2))
Button3:setText(Word.text:sub(3,3))
dButton4:setText(Word.text:sub(4,4))
— If any of the 4 buttons is empty or has an space after the word is loaded, remove the buttons and those that are not empty disabled them. ( Don’t know how do this part. Please help.)
if (button1.empty)then
button1.isVisible = false
else
button1.isVisible = true
button1.isActive =false
end
if (button2.empty)then
button1.isVisible = false
else
button2.isVisible = true
button2.isActive =false
end
— do the same for button 3 and 4
end
LoadButton:addEventListener (“tap”, LoadButton)
button1.empty=true
Everything works so far except for the last part. I’ve been strugling with for almost a week now how to remove empty or button that has it content as space and disable the button that have a letter as it’s content. Thank you for your help.
Hi John,
What you need to do is setting buttons “empty” status while assigning letters to the it. I couldn’t test this but should work…
Replace that code => Button1:setText(Word.text:sub(1,1)
With => if Word.text:sub(1,1) then Button1:setText(Word.text:sub(1,1)) button1.empty=false else button1.empty=true end
Basically, if there is a letter to assign it assigns it to the button and makes it not empty. if there is no letter, it just marks it as empty… I hope that makes sense. :)
Thank you for your help. Here’ what’s work for me. I created a string and use the codes below:
if string:sub(1,1)==” ” then
button1.isVisible=false
else
button1.isVisible=true
button1:setText(string:sub(1,1))
end
Love the ui lib! Thanks so much for making it :)
I’m having an issue when putting it into the scrollView widget though (I’m assuming it has to do with ui anyway…). I have numerous display objects including several ui buttons and other non-event objects (such as background image, random graphics, etc…) inside of a group that is then inserted into scrollView. When I touch and drag any object other than a ui button, the scrolling works fine. However, when I try to touch and drag on a button it’s like the scrollView functionality isn’t even in there. The buttons all work fine and have their onPress and onRelease events in place but it just won’t let me scroll.
Is the “moved” phase with the ui class set to not work by default or something? Is there a function I can use when creating a new button that will enable the button to scroll when touched?
For clarification, the buttons DO scroll along with the rest of the group when scrolling is activated by using a non-event object.
Thanks for any help at all in advance!
-Robbie
Thank you…
I haven’t worked (yet) with widgets but I think you’ll need to insert button display objects into widget group… If you could post a sample code, I might help you better… :)
Sorry I couldn’t slim down the example a little better… I’m still very new to Corona. It just seems like the ui buttons aren’t firing off the moved listener. Again, I’m new to this so I could be wrong. Thanks for looking though!
-- Imports
local ui = require ( "ui" );
local widget = require "widget";
-- Groups and scrollViews
local localGroup = display.newGroup();
local scrollView = widget.newScrollView{};
scrollView[1].isVisible=false --hide the first child of the ScrollView
-- Display Objects
------------------
local largeLogo = display.newImageRect ("images/logo_large.png",320,157);
local tab0 = display.newImageRect("images/menuTab.png",120,23);
local fbIcon = display.newImageRect("images/fb_icon.png",36,36);
local pLocalIcon = display.newImageRect("images/playLocal_icon.png",36,36);
-- BUTTONS================
------------------
-- Functions
------------------
local bt0t = function ( event )
if event.phase == "release" then
director:changeScene( "catScreen", "moveFromRight" )
end
end
local bt1t = function ( event )
if event.phase == "release" then
director:changeScene( "fbConnect", "moveFromRight" )
end
end
-- UI Buttons
local btn0 = ui.newButton{
defaultSrc = "images/menuBtn@2x.png",
overSrc = "images/menuBtn_PRESS@2x.png",
defaultX = 310,
defaultY = 52,
overX = 310,
overY = 52,
onEvent = bt0t,
id = "button0",
text = "CHOOSE A FRIEND",
font = "KatarineStdMedium-Bold",
textColor = { 51, 51, 51, 255 },
align = "left",
size = 22,
}
local btn1 = ui.newButton{
defaultSrc = "images/menuBtn@2x.png",
overSrc = "images/menuBtn_PRESS@2x.png",
defaultX = 310,
defaultY = 52,
overX = 310,
overY = 52,
onEvent = bt1t,
id = "button1",
text = "PLAY LOCALLY",
font = "KatarineStdMedium-Bold",
textColor = { 51, 51, 51, 255 },
align = "left",
size = 22,
}
------------------
-- Inserts
------------------
scrollView:insert(largeLogo);
scrollView:insert(tab0);
scrollView:insert(btn0);
scrollView:insert(btn1);
scrollView:insert(fbIcon);
scrollView:insert(pLocalIcon);
--
localGroup:insert(scrollView.view);
Hi Robbie,
Sorry that I couldn’t reply earlier, been away for a while… Now I’m back I will look at your code as soon as possible but it looks like when using widgets you should use new widgets button API instead of ui.lua. If you don’t need ui.lua for a special reason that might be the way to go…
http://developer.anscamobile.com/reference/index/widgetnewbutton
Oh man how did I not know about this… Thanks a lot! I’ll report the results later.
I’m trying to use this library and I figure if I could only get the setText function call to work I could make my own version of it but with a setTextColor.
However things aren’t working too well.
My function call is written this way:
local button1Release = function( event )
button1:setText (“New Text”)
end
But I get the error message attempt to index global ‘button1’ (a nil value)
The declaration of button1 is found below in the code and is written this way:
local button1 = ui.newButton{
defaultSrc = “buttonGray.png”,
defaultX = 300,
defaultY = 60,
overSrc = “buttonGrayOver.png”,
overX = 300,
overY = 60,
–onPress = button1Press,
onRelease = button1Release,
text = “Old Text”,
font=”Arial”,
size = 22,
emboss = true
}
I just don’t get it. Am very green on Corina and LUA =(
Seems like the funtion call has to be defined below the definition of button 1 to work.
However, nothing happens when I click my button1 =(
Think I got it. I had to make my button1 global. By removing local from the declaration it now works.
Is there a better method you experts would suggest or is declaring my buttons as global the only way here.
P.S. Sorry for my bad spelling in the earlier posts. Wish there was an edit feature so I could correct myself.
Hi Sime,
Don’t worry about the spelling… :) If I got your problem right, what you need is forward referencing.
In your function you are referencing “button1”, but it is not created yet. That’s why you are receiving the error. Put “local button1” before your function, then define your local function, then define your button but you don’t have to add “local” this time, because it’s already declared local before the function… I hope this makes sense!
Check the following link for further information on the subject:
http://jonbeebe.tumblr.com/post/3789692325/forward-referencing-will-save-you
Yup got it. Thanks a bunch!
I have to add that the problem appears when I’am using ui.button to changeScene with director class, so maybe it’s not a ui issue
Hi
I have problem….. how to avoid double click using ui.
For example if user click on my button couple times very fast it can even crash whole game.
I’am using event.phase == release ( it’s ok I guess )
You may use isActive flag for that, I’m using it as follows:
if event.phase == “release” and event.isActive then
playBtn.isActive = false
–your code
end
When it’s safe to click on button you may activate it back using playBtn.isActive = true
I hope this helps :)
Ofcourse.. you are right . It was so simple:) Thank you
You’re welcome!
Hi,
Is there a way (using ui) to change params after a button is used? For example, if I want a button’s defaultSrc image to change (the button glows after being “switched on”), or if I want onEvent function to change (it will do something else the 2nd time it is pressed)?
Thanks
Hi Mike,
That’s not possible with the current version, sorry. But in your case, I think you can just do the following…
Create two buttons at the same location, make the glowing one invisible.
When original button is clicked, it should make itself invisible and makes the glowing one visible and executes your initial on event stuff.
Now, when you click on the visible glowing button it can execute a different set of on event commands after toggling itself and the original button.
I hope that helps!
Hi Admin,
First of all, I would like to express my gratitude for your new version of ui.lua. I tried to use your new version of the library instead of my previous version ( ui.lua v1.5). When I try to use it, I get the next error : “attempt to index local ‘button’ (a nil value)”. Probably it because of the way I create a new button. This is my code to create a new button:
local ui = require (“ui”)
local drawUI = function ()
local function espanyaEvent ( event )
if event.phase == “release” then
print(“espanya”)
director:changeScene(“presentacion”,”fade”)
end
end
local espanya = ui.newButton {
default = “imagenes/Espanya.png”,
over = “imagenes/EspanyaPulsado.png”,
onEvent = espanyaEvent,
id = “espanya”
}
end
drawUI()
Could I see and example how to create a new button using your library?. Sorry, I am new in Corona :(.
Regards.
Button definition syntax is changed on 1.6 (dynamic scaling support), just change button definition as follows and it should work.
local espanya = ui.newButton {
defaultSrc = “imagenes/Espanya.png”,
defaultX = Width of Espanya.png here,
defaultY = Height of Espanya.png here,
overSrc = “imagenes/EspanyaPulsado.png”,
overX = Width of EspanyaPulsado.png here,
overY = Height of EspanyaPulsado.png here,
onEvent = espanyaEvent,
id = “espanya”
}
thank you very much for you answer. It was really fast and works :)
Hey thanks very much! Appreciate your efforts, and your refactoring the code due to the deprecation of the module stuff in LUA!
You are welcome! :)
Ugh, are you supposed to copy+paste to get the code? :>
For now, yes… :#
But you are right, I will add download links shortly…
Because highlighting the code above and copying is SO HARD
Hi Bob,
You don’t need to copy it anymore, there is a link for zipped ui.lua right above the code window.