New Candy Lib: Widget Candy for Corona

brucemartin · May 28, 2012, 2:51pm

I just tried to use Widget Candy to replace a button. The press and release actions work as advertised, but I can’t figure out how to make the button a different size, and how to make the caption font larger. I’ve changed height and width properties in the button constructor, and added the fontSize property, but nothing changes. Notice the large height used for testing for any effect (none).

Bruce

[code]
local myMAZE = _G.GUI.NewButton(
{
x = 10,
y = screenHeight-25,
width = 70,
height = 210,
scale = _G.GUIScale,
name = “MAZE”,
parentGroup = mazeGroup,
theme = “theme_2”,
caption = “New Maze”,
fontSize = 12,
textAlign = “center”,
– icon = 9,
border = {}, --{“shadow”, 8,8, 64},
– onPress = function(EventData) EventData.Widget:set(“caption”, “Button pressed!”) end,
onRelease = function(EventData)
if EventData.inside then
anotherMaze()
end
end,
} )

local txt = myMAZE:get( “height” )
print(“height=”…txt) --shows 210

[/code] [import]uid: 23636 topic_id: 25953 reply_id: 109144[/import]

donovanh · May 28, 2012, 3:57pm

@brucemartin: I dealt with this too. It appears from lines 1176 & 1178 of the WidgetCandy 1.0.4 code that the height of a button can’t actually be altered by using the height property as you might expect since the min and max height are both set to the frame size of the sprite sheet. However, the height of a button can be altered using the scale property; set scale to 2, for example, to get a button of height 80 instead of the usual 40. The only catch is that line 1175 seems to prevent you from using a width that is less than 2.1 times the height, whatever your scale factor may be. If you didn’t want to do that anyway, then using the scale should work perfectly. If, however, you do want a button whose width is less than twice its height, as far as I can tell, you’ll have to alter the WidgetCandy code yourself. I did it by passing in a vStretch parameter and altering lines 1260, 1281, and 1284 in NewButton’s update method. (If I’m not the only person who had to do this, maybe X-pressive will add it to the feature requests?)

I’m not sure what the problem with the fontSize is though. That property works fine for me. [import]uid: 129551 topic_id: 25953 reply_id: 109146[/import]

brucemartin · May 29, 2012, 5:59am

@donovanh: Thanks for that info. I was able to change the button dimensions by changing _G.GUIScale; then the font size was effective. But changing _G.GUIScale seems to create problems when switching between iPhone and iPad displays. And I am still not able to get the smaller button size with less white space and larger text size I want. Setting MarginX=0 seems to do nothing. Think I’ll stay with Corona’s own ui.lua for my buttons.
[import]uid: 23636 topic_id: 25953 reply_id: 109213[/import]

greg886 · May 29, 2012, 8:27pm

Is there a way to auto-layout two groups of radio buttons (each with their own border or window) without a main window? What would be the best approach here?

Say requirements were:
1 - Two vertical groups of radio buttons, one group on left and one on right
2 - Want the border around each group of radio buttons to automatically size itself for the number of radio buttons in that group
3 - Overall Window which the two (2) groups of radio buttons sits on should also size itself to just fit both groups in the centre of the screen.

[import]uid: 140210 topic_id: 25953 reply_id: 109315[/import]

gibsonpa · May 30, 2012, 4:26am

x-pressive.com, your Widget Candy is really great! I purchased it last week and it has really helped speed up my new app. This app is more of a Productivity type app, and your Widgets are exactly what I needed. I have used almost all of them in some capacity.

Just wanted to say thanks for all the hard work on this. Can’t wait to see what new features/themes are added in the future.

Paul [import]uid: 39506 topic_id: 25953 reply_id: 109343[/import]

mroberti · June 2, 2012, 3:13pm

Alright, I’m at my wit’s end. I’m trying to make a progress bar show some…well, progress. It doesn’t ever update the visual. I took the sample, and made a timer that would set it to random bits of progress but nothing’s happening onscreen with the bar!!

 function IncreaseBar()  
 local tempValue = mRand(0,100)\*.01  
 \_G.GUI.GetHandle("BAR").value = tempValue  
 print("tempValue "..tempValue)  
 end  
  
 ------------------  
 -- Code here  
 ------------------  
  
 --====================================================================--  
 -- INITIALIZE, Every Display Object must get shoved into the local Display Group  
 -- Example: localGroup:insert( background )  
 --====================================================================--  
 local initVars = function ()  
  
 -- CREATE A PROGRESS BAR  
 \_G.GUI.NewProgBar(  
 {  
 x = "center",   
 y = "center",   
 width = "50%",  
 scale = \_G.GUIScale,  
 name = "BAR",   
 parentGroup = nil,   
 theme = "theme\_1",   
 caption = "Drag me!", -- INITIAL CAPTION  
 value = .75, -- 0.0 - 1.0  
 allowDrag = false, -- DRAGGING ALLOWED  
 border = {"inset",4,1}, -- ADDS A BORDER  
 textFormatter = function(value) valueToDisplay = "My Value: "..math.floor(value\*100).."%"; return valueToDisplay end,  
 } )  
  
 timer.performWithDelay(250, IncreaseBar, 100)  
 end

Any hints or clues?!?!

Best,
Mario [import]uid: 11636 topic_id: 25953 reply_id: 109921[/import]

doubleslashdesign · June 2, 2012, 5:18pm

@x-pressive.com - Can you please let us know when and how to use Scaling with Candy Widgets.

Maybe i’m missing something but i don’t think your scaling is working correctly.

I only scale the windows not the buttons or sliders in the window item ( based on your docs - they inherit from the window ).

I do apply the scale to my lists.

when I load my app in any of the iPhones Simulators ( everything looks good because it is using a scale of 1 )

IPad’s use a scale of .5 so everything is much smaller then.

Everything only look correct in any simulator if I set scale =1 reguardless.

Your example Scale code below.

local physicalW = math.round( (display.contentWidth - display.screenOriginX\*2) / display.contentScaleX)  
local physicalH = math.round( (display.contentHeight - display.screenOriginY\*2) / display.contentScaleY)  
\_G.isTablet = false; if physicalW \>= 1024 or physicalH \>= 1024 then \_G.isTablet = true end  
\_G.GUIScale = \_G.isTablet == true and .5 or 1.0

Thanks In advance.
Larry [import]uid: 11860 topic_id: 25953 reply_id: 109930[/import]

doubleslashdesign · June 2, 2012, 5:20pm

Are you getting any errors with this code?

Did you include your themes folders and set them in your code?

Larry [import]uid: 11860 topic_id: 25953 reply_id: 109931[/import]

mroberti · June 2, 2012, 5:40pm

Figured it out…though I don’t know why the heck it wasn’t specified in the docs.

I had to use: \_G.GUI.GetHandle("BAR"):\_setValue(tempValue)

the _setValue thing was where it was finally working.

I figured this out when I was just trying to increment the value:

\_G.GUI.GetHandle("BAR").value = \_G.GUI.GetHandle("BAR").value + 0.01

and it DID produce the error:

Runtime error
…s\mario\docume~1\corona~2\sandbox\17\scr_Loading.lua:109: attempt to perform arithmetic on field ‘value’ (a nil value)

So that made me dig into the widget library source and figure it out. [import]uid: 11636 topic_id: 25953 reply_id: 109933[/import]

mroberti · June 2, 2012, 6:12pm

Ah ha!!!

function IncreaseBar()  
 \_G.GUI.GetHandle("BAR").Props.value = \_G.GUI.GetHandle("BAR").Props.value + 0.01  
 \_G.GUI.GetHandle("BAR"):\_update()  
end  
  
-- CREATE A PROGRESS BAR  
\_G.GUI.NewProgBar(  
{  
 x = "center",   
 y = "center",   
 width = "50%",  
 scale = \_G.GUIScale,  
 name = "BAR",   
 parentGroup = GUILayer,   
 theme = "theme\_1",   
 value = .5, -- 0.0 - 1.0  
 border = {"inset",4,1}, -- ADDS A BORDER  
} )  
  
timer.performWithDelay(250, IncreaseBar, 100)

THERE we go. I had to use the .Props.value to get and set the value, and THEN I had to do the _update() and bam! It works as never before!

Rad! [import]uid: 11636 topic_id: 25953 reply_id: 109935[/import]

doubleslashdesign · June 2, 2012, 7:06pm

they have done a pretty good job on their docs, I’m sure it just slipped thru the cracks. But now that they have your code maybe they will update it

Glad you got it working and thanks for the code.

Larry [import]uid: 11860 topic_id: 25953 reply_id: 109942[/import]

x-pressive.com · June 5, 2012, 2:03am

@doubleslashdesign & 3DreamsGaming:
sorry, the list widgets ‘parentList’ feature was not mentioned in the docs, this has been fixed now. If you add a property field named ‘parentList’ to your data list, the list widget will display the back button. When tapped, the list widget will switch back to the list specified as the ‘parentList’.

Again, sorry for not providing this info in the docs (although it was explained in the list sample codes).
NEW WIDGET CANDY VERSION 1.0.5 AVAILABLE

WHAT’S NEW?

* Fixed switch widget issues: toggleState could not be set to true programmatically. Also fixed a display issue when textAlign of a switch was set to ‘right’.

* Added property ‘sensitivity’ to the drag button widget. Use this property to specify the sensitivity (speed) at which the value increases or decreases when the button is dragged. As higher this value as faster the value change. Default value is 0.05. Good values are from 0.02 (low sensitivity) to 0.1 (high sensitivity).

* New command: GUI.NewImage(ImageHandle, Props) - Add any image that can be used like a GUI object, for example added to a window. Image objects can receive onPress, onRelease and onDrag events (if you defined the appropriate listener functions). As with all widgets, you can also apply a border or a drop shadow by specifying the border property when creating the image (see common widget properties). For more info, refer to the updated manual (section ‘Images’) and check out the new sample ‘Images’ in the samples list (section ‘Other Widgets’).

* New command: GUI.SetTheme(‘ThemeName’, applyNow, color) - Can be used to set the GUI’s default theme to be automatically applied to every new widget then, so you don’t need to specify the theme for each individual widget. You can also use this command with the ‘applyNow’ flag set to true to realtime-change the theme of all existing widgets, too. See updated manual (‘SetTheme’) and the updated ‘Theme Tester’ sample code.

* Slider updated: new property ‘alwaysShowBubble’. If specified and set to ‘true’, a slider’s text bubble will always be visible.
[import]uid: 10504 topic_id: 25953 reply_id: 110253[/import]

Dr.Mabuse · June 5, 2012, 6:41am

I’m really excited to see the NewImage widget added to the library.

But I can’t see why you have limited the choice to an image. The wrapper would’ve been way more versatile if it could be used with any display object; sprites, text, shapes (squares, circles, vector-objects) and of course images.

Instead of linking the widget to an image-name it could’ve been linked to the name of the display-object:

local myText = display.newText(“Press Me”, 0, 0, native.systemFont, 16)

Then calling the widget as it is:

_G.GUI.NewImage( “myText”,
(calling it something else than NewImage)

or by setting a property, e.g. GUIObject = “myText” [import]uid: 129287 topic_id: 25953 reply_id: 110279[/import]

x-pressive.com · June 5, 2012, 8:37am

Dr.Mabuse: NewImage() is basically not limited to images -you should be able to use any display object handle (groups, shapes etc.) as the first parameter. Although adding other display objects than images has not been tested thoroughly yet, so we did not propagate it. Feel free to try it and let us know if it works for your needs.

However, note that with the current version tinting won’t work with display groups added as an image. Only the first object of the hierarchy will be tinted (if the image object added is a single display object). [import]uid: 10504 topic_id: 25953 reply_id: 110293[/import]

Dr.Mabuse · June 6, 2012, 9:02am

@x-pressive.com: I’ve now tested the NewImage() widget with shapes, groups, sprites and text, and if it’s not me using the wrong syntax, there are some issues.

It works with other display objects when passing the function as a parameter:

\_G.GUI.NewImage( display.newCircle( 100, 100, 20 ),

But using it with a pre-defined variable name like this, results in the error: “Can’t insert widget IMG_SAMPLE into specified parent.”:

local myCircle = display.newCircle( 100, 100, 20 )  
myCircle:setFillColor(128,128,128)  
  
\_G.GUI.NewImage( myCircle,

And without this option it won’t work satisfactory with groups, animated sprites, colored shapes, Text Candy etc. because they all need other properties or functions to work properly (object:setTextColor/setFillColor, spriteInstance:prepare/play etc. and groups which are defined by a variable name). So the widget should’ve been designed to receive the variable name of a display object. [import]uid: 129287 topic_id: 25953 reply_id: 110502[/import]

x-pressive.com · June 7, 2012, 3:12am

Dr.Mabuse: we just tested this and everything works fine:

[lua]-- ADD CUSTOM IMAGE
Image = display.newCircle( 100, 100, 20 )
Image:setFillColor(128,128,128)

_G.GUI.NewImage( Image,
{
x = “center”,
y = 0,
width = 160,
height = 160,
name = “IMG_SAMPLE”,
parentGroup = “WIN_SAMPLE”,
border = {“inset”,4,1, 245,255,245,50},
} )[/lua]

We tested this using the official Corona release (Windows) and Build 2012.767 on OSX, so there might be an issue with the daily build you are using. Basically it does not make any difference if you are using a reference or a direct API call that returns a reference. [import]uid: 10504 topic_id: 25953 reply_id: 110632[/import]

Dr.Mabuse · June 7, 2012, 5:19am

@x-pressive.com: This is good news. It still won’t work for me, but I’m using the latest stable build (2011.704 on Windows). Guess I’ll just have to wait for the next stable build or until I’m ready to become a subscriber.

Thanks. [import]uid: 129287 topic_id: 25953 reply_id: 110645[/import]

khincker · June 23, 2012, 9:13am

Hey x-pressive, I continue to work with and enjoy Widget Candy. I’m having a problem adjusting the properties of the caption text on windows. I can align it, but cannot change the color or adjust the vertical alignment. Do you have any suggestions?

Thanks [import]uid: 96383 topic_id: 25953 reply_id: 112887[/import]

x-pressive.com · June 23, 2012, 10:30am

Have a look at a theme’s .lua file (f.e. “theme_1.lua”). Both (and a lot more stuff) can be changed there:

To define the window title caption color (color and shadow color):
[lua]WindowCaptionColor1
WindowCaptionColor2[/lua]

To adjust the vertical alignment of the title caption:
[lua]WindowCaptionOffsetY[/lua]

You can also change window icon offsets, icon size, a window’s corner size, shadow offset, theme text colors, slider bubble position etc. there. The settings files are commented and pretty much self-explanatory. [import]uid: 10504 topic_id: 25953 reply_id: 112892[/import]

khincker · June 23, 2012, 12:04pm

Works like a charm [import]uid: 96383 topic_id: 25953 reply_id: 112898[/import]