create widget.newButton from 3 images

Getting Started Newbie Questions
#1

Hi

nice job

I am trying to create widget.newButton from 3 images

green_left.png and green_right.png and green_middle.png

4jpa_green_left.png

79c9_green_middle.png    repeat middle

zeeg_green_right.png

green_left.png => no-repeat

green_right.png => no-repeat

green_middle.png => repeate-x

 like these  images

How Can I Do?

z6lx_green.png

#2

I believe widget.newButton can use a 9 slice configuration to build a button. See:

https://docs.coronalabs.com/api/library/widget/newButton.html#slice-construction

Rob

#3

hi

yes i seen that example

How can I repeat only middleFrame?

[lua]local options = {
frames =
{
{ x=0, y=0, width=22, height=82 },
{ x=22, y=0, width=1, height=82 },
{ x=178, y=0, width=22, height=82 }
},
sheetContentWidth = 200,
sheetContentHeight = 82
}
local buttonSheet = graphics.newImageSheet( “green.png”, options )

– Create the widget
local button1 = widget.newButton(
{
width = 60,
height = 82,
sheet = buttonSheet,
middleLeftFrame = 1,
middleFrame = 2, – repeat for fill middle button
middleRightFrame = 3,
label = “button”
}
)[/lua]

not repeat middleFrame

how can i say repeat middleFrame?

#4

I think you’re over thinking this a bit.

Take your one complete button image and make that your image sheet. In the options table, define 9 virtual pieces of the one image, the four corners, the top, left, right, and bottom middle slices and the 9th part is the middle. 

Then the widget will size each of the 9 parts to fit whatever width/height you’ve provided.

Rob

#5

I believe widget.newButton can use a 9 slice configuration to build a button. See:

https://docs.coronalabs.com/api/library/widget/newButton.html#slice-construction

Rob

#6

hi

yes i seen that example

How can I repeat only middleFrame?

[lua]local options = {
frames =
{
{ x=0, y=0, width=22, height=82 },
{ x=22, y=0, width=1, height=82 },
{ x=178, y=0, width=22, height=82 }
},
sheetContentWidth = 200,
sheetContentHeight = 82
}
local buttonSheet = graphics.newImageSheet( “green.png”, options )

– Create the widget
local button1 = widget.newButton(
{
width = 60,
height = 82,
sheet = buttonSheet,
middleLeftFrame = 1,
middleFrame = 2, – repeat for fill middle button
middleRightFrame = 3,
label = “button”
}
)[/lua]

not repeat middleFrame

how can i say repeat middleFrame?

#7

I think you’re over thinking this a bit.

Take your one complete button image and make that your image sheet. In the options table, define 9 virtual pieces of the one image, the four corners, the top, left, right, and bottom middle slices and the 9th part is the middle. 

Then the widget will size each of the 9 parts to fit whatever width/height you’ve provided.

Rob