Pixel Envision Ltd.
Mobile Game Development Studio
  • Home
  • About Us
  • Our Games
    • Hyper-Casual
    • Casual Games
      • Don’t Get Caught
      • Hordes of Enemies
      • noded
      • kubic
      • Whip Swing
      • Witches’ Brew
    • Kids Apps
      • Coloring Book
      • Cars & Trucks Puzzle
      • Train Puzzles for Kids
      • Animal Puzzle
      • Fairy Tale Puzzles for Kids
      • Find the Differences
  • Support
  • Privacy Policy
Select Page ...

CoronaSDK Enhanced UI Library (ui.lua)

CoronaSDK Enhanced UI Library (ui.lua)

August 3, 2011 CoronaSDK, 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.

ui.lua v2.4

Lua
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

← CoronaSDK Proper Orientation Rotation with Animation
PHP Cache Warmer (Preloader) for W3 Total Cache →

56 Responses to CoronaSDK Enhanced UI Library (ui.lua)

  • Yogesh Walhe
    8 / 4 / 2012

    Hi, I am not able to display the other lua file on click event please help to resolve.

    Yogesh…

    Yogesh Walhe 8 / 4 / 2012
    • Admin
      8 / 5 / 2012

      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…

      Admin 8 / 5 / 2012
  • Andrea
    7 / 30 / 2012

    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

    Andrea 7 / 30 / 2012
    • Admin
      7 / 30 / 2012

      Yes, you can. Code is free to use in anyway you’ll like, commercial or non-commercial…

      Admin 7 / 30 / 2012
  • Larry Meadows
    4 / 12 / 2012

    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.

    Larry Meadows 4 / 12 / 2012
    • Admin
      4 / 12 / 2012

      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.

      Admin 4 / 12 / 2012
  • David Gross
    4 / 11 / 2012

    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?

    David Gross 4 / 11 / 2012
    • Admin
      4 / 11 / 2012

      Hi David, nice work! You may simply open a new support ticket with the file attached, I’ll take care of updating the post…

      Admin 4 / 11 / 2012
  • N1NJA
    3 / 26 / 2012

    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

    N1NJA 3 / 26 / 2012
    • Admin
      3 / 27 / 2012

      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…

      Admin 3 / 27 / 2012
    • N1NJA
      3 / 27 / 2012

      Ah i see Thanks for the that dude :)

      N1NJA 3 / 27 / 2012
  • Tom
    3 / 17 / 2012

    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.

    Tom 3 / 17 / 2012
    • Admin
      3 / 17 / 2012

      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?

      Admin 3 / 17 / 2012
    • Tom
      3 / 18 / 2012

      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?

      Tom 3 / 18 / 2012
    • Admin
      3 / 20 / 2012

      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…

      Admin 3 / 20 / 2012
  • thegdog
    12 / 28 / 2011

    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?

    thegdog 12 / 28 / 2011
    • Admin
      12 / 28 / 2011

      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

      Admin 12 / 28 / 2011
    • thegdog
      12 / 28 / 2011

      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.

      thegdog 12 / 28 / 2011
  • ce
    12 / 22 / 2011

    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

    ce 12 / 22 / 2011
    • Admin
      12 / 28 / 2011

      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

      Admin 12 / 28 / 2011
  • Vadimo
    12 / 9 / 2011

    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.

    Vadimo 12 / 9 / 2011
    • Vadimo
      12 / 9 / 2011

      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.

      Vadimo 12 / 9 / 2011
    • Admin
      12 / 9 / 2011

      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…

      Admin 12 / 9 / 2011
    • Admin
      12 / 13 / 2011

      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?

      Admin 12 / 13 / 2011
    • Vadimo
      12 / 22 / 2011

      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.

      Vadimo 12 / 22 / 2011
  • john
    12 / 9 / 2011

    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

    john 12 / 9 / 2011
    • Admin
      12 / 9 / 2011

      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

      Admin 12 / 9 / 2011
    • John
      12 / 12 / 2011

      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.

      John 12 / 12 / 2011
    • Admin
      12 / 13 / 2011

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

      Admin 12 / 13 / 2011
    • John
      12 / 22 / 2011

      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

      John 12 / 22 / 2011
  • rarmstrong
    11 / 22 / 2011

    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

    rarmstrong 11 / 22 / 2011
    • Admin
      11 / 22 / 2011

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

      Admin 11 / 22 / 2011
    • rarmstrong
      11 / 22 / 2011

      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);

      rarmstrong 11 / 22 / 2011
    • Admin
      11 / 29 / 2011

      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

      Admin 11 / 29 / 2011
    • rarmstrong
      11 / 29 / 2011

      Oh man how did I not know about this… Thanks a lot! I’ll report the results later.

      rarmstrong 11 / 29 / 2011
  • Sime
    10 / 9 / 2011

    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 =(

    Sime 10 / 9 / 2011
    • Sime
      10 / 9 / 2011

      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 =(

      Sime 10 / 9 / 2011
    • Sime
      10 / 9 / 2011

      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.

      Sime 10 / 9 / 2011
    • Admin
      10 / 9 / 2011

      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

      Admin 10 / 9 / 2011
    • Sime
      10 / 10 / 2011

      Yup got it. Thanks a bunch!

      Sime 10 / 10 / 2011
  • PiotrT
    9 / 27 / 2011

    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

    PiotrT 9 / 27 / 2011
  • PiotrT
    9 / 27 / 2011

    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 )

    PiotrT 9 / 27 / 2011
    • Admin
      9 / 27 / 2011

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

      Admin 9 / 27 / 2011
    • PiotrT
      9 / 27 / 2011

      Ofcourse.. you are right . It was so simple:) Thank you

      PiotrT 9 / 27 / 2011
    • Admin
      9 / 27 / 2011

      You’re welcome!

      Admin 9 / 27 / 2011
  • Mike
    9 / 20 / 2011

    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

    Mike 9 / 20 / 2011
    • Admin
      9 / 20 / 2011

      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!

      Admin 9 / 20 / 2011
  • Victor
    9 / 19 / 2011

    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.

    Victor 9 / 19 / 2011
    • Admin
      9 / 19 / 2011

      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”
      }

      Admin 9 / 19 / 2011
    • Victor
      9 / 19 / 2011

      thank you very much for you answer. It was really fast and works :)

      Victor 9 / 19 / 2011
  • Mario
    9 / 17 / 2011

    Hey thanks very much! Appreciate your efforts, and your refactoring the code due to the deprecation of the module stuff in LUA!

    Mario 9 / 17 / 2011
    • Admin
      9 / 17 / 2011

      You are welcome! :)

      Admin 9 / 17 / 2011
  • Jtal
    8 / 11 / 2011

    Ugh, are you supposed to copy+paste to get the code? :>

    Jtal 8 / 11 / 2011
    • Admin
      8 / 12 / 2011

      For now, yes… :#

      But you are right, I will add download links shortly…

      Admin 8 / 12 / 2011
    • Corona Bob
      9 / 14 / 2011

      Because highlighting the code above and copying is SO HARD

      Corona Bob 9 / 14 / 2011
    • Admin
      9 / 14 / 2011

      Hi Bob,

      You don’t need to copy it anymore, there is a link for zipped ui.lua right above the code window.

      Admin 9 / 14 / 2011
  • Tags

    3ds Max Coming Soon CoronaSDK Featured Flash Lua MAXScript PHP Programming Reviews Tips & Tricks Unity 3D Windows Phone
  • Recent Comments

    • Yogesh Singh on ZIP (POSTAL) Code Validation Regex & PHP code for 12 Countries
    • Admin on Maxscript – Vray Cubemap Generator for Unity
    • charlie on Maxscript – Vray Cubemap Generator for Unity
    • Mastan on PHP Currency Converter
    • Rakesh Vishnoi on ZIP (POSTAL) Code Validation Regex & PHP code for 12 Countries
    • Find us on

      amazonandroidapplefacebooklinkedintwitterwindowsyoutube
    • Company Information

      Lytchett House, 13 Freeland Park, Wareham Road, Poole, Dorset, BH16 6FA

      Pixel Envision Limited is a company registered in England, company number: 09558675. Registered Office: Preston Park House, South Road, Brighton, East Sussex, BN1 6SB, United Kingdom

    • Privacy Policy
    Copyright © 2011-2021 Pixel Envision Ltd, all rights reserved.