Is there was a way to make an image button larger than the image without stretching the image?

Solar2D Widgets
#1

Hi, I have an app which uses < and > icons to navigate back & forth. The icons are 12x20px each. When I create a button using this icon naturally it defaults to 12px wide which is quite hard to hit especially with larger fingers. If I change the .width then the icon gets stretched to cover the whole new width. I know I can edit my icon files and add whitespace to the left & right of the image and make it the width I want but I want to avoid all that work if I can. 

Does anyone know of a way to make a button wider or taller than the image it is created with while keeping the image to its original size? Thanks for your help.

#2

Have you tried creating the button without the icon at the right size and inserting it after. Essentially widgets are display groups or containers so you should be able to insert into them though i don’t know if you want icons changing depending on the state.

If you need a better solution you can check where the images are stored in the button and replace them after creation.

#3

Yup. I need the default & over states. Will try to see if I can update them after creation. To be honest I didn’t try it before asking (which I should have…). Will report back.

#4

Hmm, while hunting for a solution to my question I think I might have stumbled on an interesting find. The newButton widget creates the view using the following code.

-- Create the view if opt.width and opt.height then view = display.newImageRect( button, opt.defaultFile, opt.baseDir, opt.width, opt.height ) else view = display.newImage( button, opt.defaultFile, opt.baseDir ) end

Readers with sharp eyes might spot the use of display.newImageRect vs. display.newImage in that snippet. As per API docs

The difference between this function and display.newImage() is that display.newImageRect() automatically substitutes higher-resolution assets on higher-resolution devices. 

So when you load any image using display.newImage the @2x versions do not get pulled in when required. This being the case buttons created without width & height will not use high resolution images when running on retina devices etc. I consider this to be a bug. Anyone noticed this before?

And going back to my original question, I did not find a way to load the images post-creation. So off to edit those images to make them bigger with white space…

#5

Looking at the source a little lower from where you saw that imageRect you have this:

 view.\_isEnabled = opt.isEnabled view.\_pressedState = "default" view.\_fontSize = opt.fontSize view.\_label = viewLabel view.\_labelColor = viewLabel.\_labelColor view.\_labelAlign = opt.labelAlign view.\_labelXOffset = opt.labelXOffset view.\_labelYOffset = opt.labelYOffset view.\_over = viewOver -- Methods view.\_onPress = opt.onPress view.\_onRelease = opt.onRelease view.\_onEvent = opt.onEvent ------------------------------------------------------- -- Assign properties/objects to the button ------------------------------------------------------- -- Assign objects to the button button.\_view = view

That means that you modify the images by accessing this:

button._view._over - Over image

button._view - default image

– edit

No you can’t do this as the touch listener is on the default image so if you change it’s size you change the touch area.

#6

I hope I understood your question. What you are trying to do is to have a bigger listener box, compared to the image.

This is what I usually do. I draw an ‘invisible rect’ in front of the image. This rect will contain the eventListener. See sample below, where the ‘listener box’ will be x2 size of the image. Key points to note are “isVisible” & “isHitTestable”.

-- The listener overlay local btnListenerBox = display.newRect(0, 0, originalImg.contentWidth\*2, originalImg.contentHeight\*2 ) btnListenerBox.x = 0 btnListenerBox.y = 0 btnListenerBox.isVisible = false btnListenerBox.isHitTestable = true btnListenerBox:addEventListener( "tap", listener )
#7

@yosu It’s not just an image it’s the widget.newButton

#8

You can use the same concept. It is mainly using an ‘invisible rect’ to detect events, so the touch-area can be much bigger (easier to press).

#9

Not really since the touch listener is custom function in the widgets library so you would have to find a reference to it and move it to the rect. Even then the code in the listener could break if it calls event.target.something .

#10

Hi,

Don’t have an answer for you as such - i just make bigger images with Transparent backgrounds, But your posts did pose some questions to me.

You mention white space - wouldn’t that create a white box around your icon and not get the effect your after (my assumption is iOS7 style) or do you mean transparent space?

And 2 i was under the impression that Apple requires a minimum dimensions for buttons - something along the lines of 44px square - Now don’t actually quote me here i am a novice programmer (Pro  is just the package name). - Now if you are talking Android then i guess the minimum pixels doesn’t matter as because with Android you truly are your own boss, not a quasi apple employee forced to toe the line. (yeah Apple is starting to irritate me)

T

#11

@primoz, thanks for trying to find a solution. it looks impossible with the current code. Not to worry. Will work around it. 

@yosu, thanks for your suggestion. Indeed I could do the transparent box behind icon thing but I was hoping to remain with the widget on this one. Editing my images will be easier for now but thanks for sharing the idea. 

@toeknee, indeed you are right. I should have said transparent space around the icon. I used this method to increase the icon’s width/height to where I want it to be and solved the problem for now. 

All, please take note of my remark about the use of display.newImage in the widget.newButton. This will mean your hi-res icon files will not be used if you are not supplying a width and height in widget constructor. Beware!

#12

Have you tried creating the button without the icon at the right size and inserting it after. Essentially widgets are display groups or containers so you should be able to insert into them though i don’t know if you want icons changing depending on the state.

If you need a better solution you can check where the images are stored in the button and replace them after creation.

#13

Yup. I need the default & over states. Will try to see if I can update them after creation. To be honest I didn’t try it before asking (which I should have…). Will report back.

#14

Hmm, while hunting for a solution to my question I think I might have stumbled on an interesting find. The newButton widget creates the view using the following code.

-- Create the view if opt.width and opt.height then view = display.newImageRect( button, opt.defaultFile, opt.baseDir, opt.width, opt.height ) else view = display.newImage( button, opt.defaultFile, opt.baseDir ) end

Readers with sharp eyes might spot the use of display.newImageRect vs. display.newImage in that snippet. As per API docs

The difference between this function and display.newImage() is that display.newImageRect() automatically substitutes higher-resolution assets on higher-resolution devices. 

So when you load any image using display.newImage the @2x versions do not get pulled in when required. This being the case buttons created without width & height will not use high resolution images when running on retina devices etc. I consider this to be a bug. Anyone noticed this before?

And going back to my original question, I did not find a way to load the images post-creation. So off to edit those images to make them bigger with white space…

#15

Looking at the source a little lower from where you saw that imageRect you have this:

 view.\_isEnabled = opt.isEnabled view.\_pressedState = "default" view.\_fontSize = opt.fontSize view.\_label = viewLabel view.\_labelColor = viewLabel.\_labelColor view.\_labelAlign = opt.labelAlign view.\_labelXOffset = opt.labelXOffset view.\_labelYOffset = opt.labelYOffset view.\_over = viewOver -- Methods view.\_onPress = opt.onPress view.\_onRelease = opt.onRelease view.\_onEvent = opt.onEvent ------------------------------------------------------- -- Assign properties/objects to the button ------------------------------------------------------- -- Assign objects to the button button.\_view = view

That means that you modify the images by accessing this:

button._view._over - Over image

button._view - default image

– edit

No you can’t do this as the touch listener is on the default image so if you change it’s size you change the touch area.

#16

I hope I understood your question. What you are trying to do is to have a bigger listener box, compared to the image.

This is what I usually do. I draw an ‘invisible rect’ in front of the image. This rect will contain the eventListener. See sample below, where the ‘listener box’ will be x2 size of the image. Key points to note are “isVisible” & “isHitTestable”.

-- The listener overlay local btnListenerBox = display.newRect(0, 0, originalImg.contentWidth\*2, originalImg.contentHeight\*2 ) btnListenerBox.x = 0 btnListenerBox.y = 0 btnListenerBox.isVisible = false btnListenerBox.isHitTestable = true btnListenerBox:addEventListener( "tap", listener )
#17

@yosu It’s not just an image it’s the widget.newButton

#18

You can use the same concept. It is mainly using an ‘invisible rect’ to detect events, so the touch-area can be much bigger (easier to press).

#19

Not really since the touch listener is custom function in the widgets library so you would have to find a reference to it and move it to the rect. Even then the code in the listener could break if it calls event.target.something .

#20

Hi,

Don’t have an answer for you as such - i just make bigger images with Transparent backgrounds, But your posts did pose some questions to me.

You mention white space - wouldn’t that create a white box around your icon and not get the effect your after (my assumption is iOS7 style) or do you mean transparent space?

And 2 i was under the impression that Apple requires a minimum dimensions for buttons - something along the lines of 44px square - Now don’t actually quote me here i am a novice programmer (Pro  is just the package name). - Now if you are talking Android then i guess the minimum pixels doesn’t matter as because with Android you truly are your own boss, not a quasi apple employee forced to toe the line. (yeah Apple is starting to irritate me)

T