New Candy Lib: Widget Candy for Corona

Looks really good x-pressive, very well done!

I’m just about to start a new project so I will have to give it a go :slight_smile: [import]uid: 69826 topic_id: 25953 reply_id: 106869[/import]

Can I please see some examples of what the progress bars look like? [import]uid: 135391 topic_id: 25953 reply_id: 106871[/import]

Can you add custom images to the list rows, and receive touches on them? [import]uid: 58455 topic_id: 25953 reply_id: 106912[/import]

@LairdGames: you can use icon sheets of any (squared) size: 256x256, 512x512, even 1024x1024. You just need to adjust the theme’s settings file then (see settings ‘iconFrameSize’ and ‘iconSheetSize’).

@amirfl7: the problem with the input texts’ “enter” key is that -for some unknown reason- Corona forces the focus back to the text field after it has been removed then. You can test this with the changes you posted above -just tap the “enter” key on the keyboard to let the input text disappear and tap on the “back” button on the top left then. It won’t work because the focus is still on the input text (which does not exist anymore). This is a problem that really made us crazy, so we used a workaround here (tapping on the screen to dismiss). We’re still on it to find a workaround.

@gury.traub: this is our conclusion, too: the different input text rendering on iOS and Android is most probably related to Corona itself, therefore we can’t do anything here, otherwise things might get broken once Ansca decides to fix this :frowning:

@nate2: Have a look at the Widget Candy Website, you’ll find some demo videos there, as well as complete screenshots from all included themes.

@davemikesell: if you’d want to add custom images to list items, you need to put them on the icon sheet and set the item’s “iconL” or “iconR” property to the desired frame number to display them. However, we’re also planning to add a list widget that can hold any custom display object group, so you can add multiline texts, shapes, custom images, whatever, then.
[import]uid: 10504 topic_id: 25953 reply_id: 106988[/import]

I would like to make a feature request for a new property for the NewButton. It would be an object property which would link the button to any common Corona display objects (text, image, sprite) One could then make buttons from any display object, even animated sprite-buttons, with all the advantages Widget Candy provides. And it would make it way easier to add new button-images instead of having to edit the themes-images. Maybe even a rollOver property could be added for button states (which would change the text, image or sprite when touched). [import]uid: 129287 topic_id: 25953 reply_id: 107103[/import]

Dr.Mabuse: you mean some kind of wrapper function to convert any display object group to a Widget Candy button? This would be handy of course. However, you’d have to manage the different button state visuals (pressed, released etc.) yourself then (you could do so in your listener functions). Added to the list. [import]uid: 10504 topic_id: 25953 reply_id: 107247[/import]

Im’ trying to get the window auto layout functionality to work but somehow I cannot get it to work.
What is wrong with this code?

[code]


– main.lua


_G.GUI = require(“widget_candy”) – LOAD WIDGET CANDY, USING A GLOBAL VAR,

---------------------- Load widget theme’s --------------------
_G.GUI.LoadTheme(“theme_1”, “themes/theme_1/”)-- LOAD THEME 1
_G.GUI.LoadTheme(“theme_2”, “themes/theme_2/”)-- LOAD THEME 2
_G.GUI.LoadTheme(“theme_3”, “themes/theme_3/”)-- LOAD THEME 3
_G.GUI.LoadTheme(“theme_4”, “themes/theme_4/”)-- LOAD THEME 4
_G.GUI.LoadTheme(“theme_5”, “themes/theme_5/”)-- LOAD THEME 5

---- new window ----
_G.GUI.NewWindow(
{
x = “center”,
y = “center”,
scale = _G.GUIScale,
parentGroup = nil,
width = “auto”,
height = “auto”,
name = “testwindow”,
theme = “theme_2”,
shadow = true,
closeButton = true,
dragX = true,
dragY = true,
slideOut = .7,
dragArea = “auto”,

} )

---- add some checkboxes ----

------- Checkbox 1 -----------
_G.GUI.NewCheckbox(
{
x = 10,
y = “auto”,
includeInLayout = true, – INCLUDE THIS FOR AUTOMATIC WIDGET LAYOUT
rightMargin = 5,
name = “CBmemory”,
theme = “theme_2”,
width = 150,
height = 50,
caption = “Memory monitor”,
textAlign = “right”,
parentGroup = “testwindow”,
onRelease = function( EventData )
print(EventData.toggleState)
end,
} )
------- Checkbox 2 -----------
_G.GUI.NewCheckbox(
{
x = 10,
y = “auto”,
includeInLayout = true, – INCLUDE THIS FOR AUTOMATIC WIDGET LAYOUT
rightMargin = 5,
name = “CBLocalization”,
theme = “theme_2”,
width = 150,
height = 50,
caption = “APP Localization”,
textAlign = “right”,
parentGroup = “testwindow”,
onRelease = function( EventData )
print(EventData.toggleState)
end,
} )

------- Checkbox 3 -----------
_G.GUI.NewCheckbox(
{
x = 10,
y = “auto”,
includeInLayout = true, – INCLUDE THIS FOR BUTTON IN AUTOMATIC WIDGET LAYOUT
rightMargin = 5,
name = “CBoption3”,
theme = “theme_2”,
width = 150,
height = 100,
caption = “Checkbox 3”,
textAlign = “right”,
parentGroup = “testwindow”,
onRelease = function( EventData )
print(EventData.toggleState)
end,
} )

---- trigger auto layout ----
_G.GUI.GetHandle(“testwindow”):layout(true)

[/code] [import]uid: 106768 topic_id: 25953 reply_id: 107252[/import]

@ivke2006:
If you want a widget to be placed at a new line, set it’s ‘newLayoutLine’ property to true, this will add a “line break” to the layout then:
[lua]includeInLayout = true,
newLayoutLine = true,
…[/lua]

If you are using atomatic layouting, you should not set the window width itself to “auto”, set it to a percentage value, for example (“50%”) or a number value.

[import]uid: 10504 topic_id: 25953 reply_id: 107253[/import]

@x-pressive.com:

it’s working now! :slight_smile:
Thanks for the very quick response! [import]uid: 106768 topic_id: 25953 reply_id: 107254[/import]

Although I think your themes are cool, it would be a great help if you could supply us with your PSD file or original file that you used to create your themes.

I would like to add a more traditional IOS theme and Android Themes.

As well as adding more custom themes ourselves.

Would this be possible?

Thanks

Larry
DoubleSlashDesign.com [import]uid: 11860 topic_id: 25953 reply_id: 107277[/import]

I agree!

Completely +1 for @Larry - DoubleSlashDesign.com as it would be much better for us to work with and even “no streessing” @x-pressive about making new themes. :slight_smile:
Cheers,
Rodrigo. [import]uid: 89165 topic_id: 25953 reply_id: 107317[/import]

So, my concern is that I like the functionality but the design of the themes doesn’t fit my needs. I have buttons and other UI elements already designed. Can we completely change the look of your themes? [import]uid: 76002 topic_id: 25953 reply_id: 107353[/import]

x-pressive.com:
you mean some kind of wrapper function to convert any display object group to a Widget Candy button?

That’s exactly what I mean. Thanks for making it clear…
… and for adding it to the list. [import]uid: 129287 topic_id: 25953 reply_id: 107349[/import]

You can completely change the look of all widgets, you are free to use any own graphics and designs, too, as long as you keep in mind that there are some basic rules. Windows widgets, for example, are made of 9 pieces -the corner pieces, the edges and a middle part. HOW those pieces look like is entirely up to you. If you do not want to change a theme’s graphic sheet, you can also simply change the color of any individual widget or all widgets of a theme at once (to be done in a theme’s settings file).

Creating own graphic sheets for an individual theme is quite easy:

  1. Make a copy of any existing theme and load the theme’s graphic sheet into your image editor (we’d suggest to use “theme_5”, the iOS styled theme, since this on is very clean and there are no unneccessary elements on the sheet).

  2. Activate the grid view and set the grid size to 80x80 pixels (usually 40x40, but it’s a good practice start with the high resolution version of your theme). Once you activated the grid overlay with your image editor, things should become very clear. You’ll see how the widgets on the sheet are made out of several parts.

  3. Add a new layer on top of the image and use the original image as a “drawing template” that tells you where to draw what widget parts. If you are not sure, refer to the theme’s settings lua file, there you’ll find a list of all widget graphic parts used and the corresponding frame number on the sheet.


Here is how the iOS theme graphics sheet looks like, for example, when opened with an image editor with grid view enabled -you’ll see the window widget, the list widget (below the window), buttons (with their different states -normal, pressed and toggled), checkboxes etc. -just paint over them within a new layer. Once you are done, use the included “Theme Test Window” sample to see how your theme looks like in action.
[import]uid: 10504 topic_id: 25953 reply_id: 107468[/import]

@x-pressive: Thanks for taking the time posting this mini-tuto of changing themes visual.

Very useful surely.
Cheers,
Rodrigo. [import]uid: 89165 topic_id: 25953 reply_id: 107471[/import]

WIDGET CANDY UPDATE 1.0.2 - 1.0.3
A new version of Widget Candy is available.

WHAT’S NEW?

  • Added ‘onFocus’ listener function to input texts, which is called when the input process just started. Can be used to perform any text verification at start (for example, clear the text field). See updated input text sample.

  • Added new property ‘disableInput’ to input texts. If set to ‘true’, no native input text field will pop up and only the widgets onPress listener will be available. Use this if you would like to use your own text input methods instead of Widget Candy’s built-in text input.

  • Added new property ‘isSecure’ to input texts. Set this property to true to display the text masked (passwords, for example) - inputType = ‘password’ was deprecated (use isSecure = true instead).

  • Fixed: password texts were not displayed masked with input text fields. Should be fixed now.

  • Improved on/off switch slide behavior and animation to behave like a native iOS switch.

  • Added new setting ‘SwitchOnColor’ to theme setting files. Use this setting to apply a custom color to on/off switches (when switch is set to ‘on’).

  • Fixed: issue with multiline texts where the last character was not displayed at the end of a text under certain circumstances.

  • Fixed: radio buttons and checkboxes did not visually update when changed programmatically.

  • Fixed: some small adjustments to improve rendering on Kindle Fire.

  • Improved button behavior (buttons, square buttons & toggle buttons) to appear visually ‘pressed’ while finger is inside the widget only.

  • Added Widget Candy / Corona Storyboard example project to show how to set up several scenes and how to switch from one scene to another.

[import]uid: 10504 topic_id: 25953 reply_id: 107484[/import]

Everything is just sweet so far, One more request.

You have multi-select sliders in your list box examples, could you please add a theme where those sliders are multi-select check boxes, this makes more sense selecting certain options

But then again sliders are cool for things like a settings screen.

I think you might want to support both in the your themes at the same time because both really do have their place.

Unless i’m missing something on how to enable check boxes instead of sliders. If so can you show us a quick example.

Thanks for a really great product - we are using it in our new project :slight_smile:

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

And for everyone else look in the Widget Candy\themes\theme_5 for the PSD file example for theme :slight_smile:

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

@doubleslashdesign: what do you mean exactly with ‘multi-select’ checkboxes?

NEW WIDGET CANDY VERSION 1.0.4 AVAILABLE
A new version of Widget Candy (version 1.0.4) is available.

WHAT’S NEW?

  • * Improved toggle buttons (both, normal and square buttons): you can now set a toggleGroup name to group several toggle buttons. If one of these buttons is pressed, all other toggle buttons sharing the same toggle groups, are set to ‘unpressed’ automatically. It’s basically the same than using radio buttons. Note the two new samples added to demonstrate this feature: ‘Toggle Buttons (Toggle Group)’ and ‘Square Buttons (Toggle Group)’. Also fixed some minor bugs where toggle buttons did not update properly when changed programmatically.

[import]uid: 10504 topic_id: 25953 reply_id: 107629[/import]

I am having another problem with text input in your newtextbox. when i try to type anything in on android it types each letter in then goes back to the beginning instead of staying after the typed character. Also when i try and delete, it deletes one character then skips to the beginning again and i have to retouch the end and do that for each character.

EDIT: This is a new issue, i got the text box set correctly on android and everything is fine there but then this issue cropped up. I tried the new version of widget candy and i built the sample file and it has the same problem. I also tried making a test app with the native text input and i had no problem. Corona build 819. I am 99.99% done with our first game and the 0.01% we have left is to fix this issue with the text box and we will be set to publish. [import]uid: 126161 topic_id: 25953 reply_id: 107508[/import]