Button Widgets with Image Sheets should have width and height

georgeinspector · March 31, 2015, 7:01pm

While coding with images at double resolution, I found that Button Widgets using an image sheet cannot set width and height in the options.

http://docs.coronalabs.com/api/library/widget/newButton.html#frame-construction

What’s strange is that every other set of options for Button ( Shape, 2-Image, 9-Slice) and Checkboxes (which use imageSheets) all allow explicit options for width and height.

My Question is: Is this something that the Corona Team can include for Image Sheet Buttons, or am I just doing something wrong?

Buttons using Image sheets can only be scaled either by editing the image file itself or using :scale(), which changes the visual appearance but not the .width and .height properties of the button, which are inaccurate after scaling an object.

Having to finick with scaling and scalar multipliers instead of just setting width and height in the options leads to annoyances as seen in the code below.

For example[lua]

– Some handlers up here

– Get the Images, note they will be double resolution and need scaling
local sheetOptions = {
    width = 144/2, – 2 Buttons side by side in an image sheet
    height = 80,
    numFrames = 2,
    sheetContentWidth = 144,
    sheetContentHeight = 80,
}
local imageSheet = graphics.newImageSheet( “images/button.png”, sheetOptions )

local scalar = 0.5

firstButton = widget.newButton {
    top = 0,
    left = 0,
    sheet = imageSheet,
    defaultFrame = 1,
    overFrame = 2,
    onEvent = firstButtonPress,
}

– First annoyance: Would be better to use width and height
firstButton:scale(scalar, scalar) – Buttons with ImageSheet cannot be described in width/height, so scaling is needed

– Create a second button based on the position of the first button
secondButton = widget.newButton {
top = 0,

– Second Annoyance: width needs to be scaled as well

    left = firstButton.x + (firstButton.width/2) * scalar,    – Apply scalar to width which is already divided in half for positioning
    sheet = imageSheet,
    defaultFrame = 1,
    overFrame = 2,
    onEvent = secondButtonPress,
}

– First annoyance again
secondButton:scale(scalar,scalar) – Buttons with ImageSheet cannot be described in width/height, so scaling is needed

[/lua]

Note the two annoyances which would be solved by including width and height for Buttons with Frame Construction.

Can the Corona Team please add width and height to Button Frame Construction options, consistent with the way checkboxes can accept width and height?

bjsorrentino · March 31, 2015, 9:30pm

Hi George,

The image-style button shouldn’t require width and height… you define that when specifying the frame(s) in the image sheet, and the widget button simply uses those frames, so there’s not really anything more required. What is your reason for scaling the button after you create it?

Best regards,

Brent

georgeinspector · April 1, 2015, 12:37am

Thank you for your quick response! Let my clarify some things.

Let’s say the situation is I’ve been supplied a double resolution image sheet from a designer, I am not supposed to edit the image, and specifying the frames in the image sheet gives a 1 to 1 ratio between the pixels of the actual image and the content pixels in Corona. Thus, I have to scale down by half.

What I wish I could have done is just set width and height to the frame size divided by two instead of scaling.

It’s just strange that every other option for creating a button gets a width and a height, such as 2-Image.

The same argument you make can also be said of 2-Image construction, yet width and height is useful to resize the image upon initialization with its properties adjusted as well.

Width and height aren’t required, true. They are implicit. But being able to set them in a consistent way with the rest of the ways to make a button (2-Image, 9-Slice) would be nice.

I only encountered this specific use case for the first time today, and thought it was very strange that width and height aren’t options for the 2-Frame button when they are for a checkbox style Switch.

Thanks for your time, I don’t know if I could every convince you, but I just thought it was something inconsistent!

Thanks,

George

bjsorrentino · April 1, 2015, 9:16pm

Hi George,

I understand your scenario better now. Can you try just setting the width and height afterwards? We don’t advise scaling or setting .width/.height of most widgets, but doing so for buttons should be OK.

Take care,

Brent

bjsorrentino · March 31, 2015, 9:30pm

Hi George,

The image-style button shouldn’t require width and height… you define that when specifying the frame(s) in the image sheet, and the widget button simply uses those frames, so there’s not really anything more required. What is your reason for scaling the button after you create it?

Best regards,

Brent

georgeinspector · April 1, 2015, 12:37am