Making my apps Butons Rotate when enter landscape or portrate

I have coded up the following app which makes buttons show up on my screen for a simple calculator app I have been working on the problems is I am wanting to make it so that when the screen is rotated into landscape the buttons all change to be facing the correct way to. Right now I am using two groups and switching the groups but I cant get group two to come onto the screen enough to see it.

[code]


– main.lua


local group1 = display.newGroup()
local group2 = display.newGroup()

local myButton = display.newImage( “button0.png”, 30, 450)
local myButton1 = display.newImage( “button1.png”, 30, 375)
local myButton2 = display.newImage( “button2.png”, 100, 375 )
local myButton3 = display.newImage( “button3.png”, 175, 375)
local myButton4 = display.newImage( “button4.png”, 30, 300 )
local myButton5 = display.newImage( “button5.png”, 100, 300 )
local myButton6 = display.newImage( “button6.png”, 175, 300 )
local myButton7 = display.newImage( “button7.png”, 30, 225 )
local myButton8 = display.newImage( “button8.png”, 100,225 )
local myButton9 = display.newImage( “button9.png”, 175, 225 )

local myButton10 = display.newImage( “button0.png”, 0, 0)
local myButton11 = display.newImage( “button1.png”, 30, 375)
local myButton12 = display.newImage( “button2.png”, 100, 375 )
local myButton13 = display.newImage( “button3.png”, 175, 375)
local myButton14 = display.newImage( “button4.png”, 30, 300 )
local myButton15 = display.newImage( “button5.png”, 100, 300 )
local myButton16 = display.newImage( “button6.png”, 175, 300 )
local myButton17 = display.newImage( “button7.png”, 30, 225 )
local myButton18 = display.newImage( “button8.png”, 100,225 )
local myButton19 = display.newImage( “button9.png”, 175, 225 )

local portrait = group1
local landscape = group2

portrait.alpha = 1
landscape.alpha = 0

local textobj = display.newText("" , 20, 40,native.systemFont, 50)
textobj:setTextColor(255,0,0)

group1.x, group1.y = 10, 20
group2.x, group2.y = 0, 0

group1:insert( myButton)
group1:insert( myButton1)
group1:insert( myButton2)
group1:insert( myButton3)
group1:insert( myButton4)
group1:insert( myButton5)
group1:insert( myButton6)
group1:insert( myButton7)
group1:insert( myButton8)
group1:insert( myButton9)

group2:insert( myButton10)
group2:insert( myButton11)
group2:insert( myButton12)
group2:insert( myButton13)
group2:insert( myButton14)
group2:insert( myButton15)
group2:insert( myButton16)
group2:insert( myButton17)
group2:insert( myButton18)
group2:insert( myButton19)

local function onOrientationChange (event)

if (event.type ==“landscapeRight” or event.type == “landscapeLeft”) then
local newAngle = landscape.rotation - event.delta
transition.to( landscape, {time= 150, rotation = newAngle})
transition.to( portrait, {rotation = newAngle})
portrait.alpha = 0
landscape.alpha = 1
else
local newAngle = portrait.rotation - event.delta
transition.to( portrait, {time= 150, rotation = newAngle})
transition.to( landscape, {rotation = newAngle})
portrait.alpha = 1
landscape.alpha = 0
end

end

function myButton:tap( event )

textobj.text = “0”

end

function myButton1:tap( event )
textobj.text = “1”

end

function myButton2:tap( event )

textobj.text = “2”

end

function myButton3:tap( event )
textobj.text = “3”

end

function myButton4:tap( event )
textobj.text = “4”

end

function myButton5:tap( event )
textobj.text = “5”

end

function myButton6:tap( event )
textobj.text = “6”

end

function myButton7:tap( event )
textobj.text = “7”

end

function myButton8:tap( event )
textobj.text = “8”

end

function myButton9:tap( event )
textobj.text = “9”

end

function myButton10:tap( event )

textobj.text = “0”

end

function myButton11:tap( event )
textobj.text = “1”

end

function myButton12:tap( event )

textobj.text = “2”

end

function myButton13:tap( event )
textobj.text = “3”

end

function myButton14:tap( event )
textobj.text = “4”

end

function myButton15:tap( event )
textobj.text = “5”

end

function myButton16:tap( event )
textobj.text = “6”

end

function myButton17:tap( event )
textobj.text = “7”

end

function myButton18:tap( event )
textobj.text = “8”

end

function myButton19:tap( event )
textobj.text = “9”

end

Runtime:addEventListener( “orientation”, onOrientationChange )

myButton:addEventListener( “tap”, myButton )
myButton1:addEventListener( “tap”, myButton1 )
myButton2:addEventListener( “tap”, myButton2 )
myButton3:addEventListener( “tap”, myButton3 )
myButton4:addEventListener( “tap”, myButton4 )
myButton5:addEventListener( “tap”, myButton5 )
myButton6:addEventListener( “tap”, myButton6 )
myButton7:addEventListener( “tap”, myButton7 )
myButton8:addEventListener( “tap”, myButton8 )
myButton9:addEventListener( “tap”, myButton9 )

myButton10:addEventListener( “tap”, myButton10 )
myButton11:addEventListener( “tap”, myButton11 )
myButton12:addEventListener( “tap”, myButton12 )
myButton13:addEventListener( “tap”, myButton13 )
myButton14:addEventListener( “tap”, myButton14 )
myButton15:addEventListener( “tap”, myButton15 )
myButton16:addEventListener( “tap”, myButton16 )
myButton17:addEventListener( “tap”, myButton17 )
myButton18:addEventListener( “tap”, myButton18 )
myButton19:addEventListener( “tap”, myButton19 )
[/code] [import]uid: 213976 topic_id: 35708 reply_id: 335708[/import]

I’m not very familiar with orientation issues as I lock all my apps either to portrait or landscape - it saves a lot of headaches!

I’ve taken the liberty of streamlining your code as there was a lot of duplication which can be eradicated by using tables and loops. You might need to fiddle with the orientation code a little, it worked for me on a 320 x 480 setup on iPhone 4 simulator, but it may work differently in your app.

[lua]
local myButton = {} – array for the button images
local myGroup = display.newGroup() – display group for the button images

local xP = {30, 30, 100, 175, 30, 100, 175, 30, 100, 175} – set array of X positions
local yP = {450, 375, 375, 375, 300, 300, 300, 225, 225, 225} – set array of Y positions
local tapListener = function (event) – one listener function for all buttons

local obj = event.target – get the button that was tapped

textobj.text = obj.value – get the value of the button that was tapped

end
for a = 1, 10, 1 do

local i = display.newImageRect(“button”…a-1…".png", 60, 60) – use newImageRect (automatic retina scaling)
i.x = xP[a] – 60, 60 is the X size and Y size of the image
i.y = yP[a]
i.value = a-1 – set the value this button refers to
myGroup:insert(i)
myButton:addEventListener( “tap”, tapListener)
myButton[a] = i

end

local function onOrientationChange (event)

if (event.type == “landscapeLeft”) then
local newAngle = myGroup.rotation - event.delta
transition.to( myGroup, {time= 150, x = 40, y = 400, rotation = newAngle})

end

if (event.type == “landscapeRight”) then
local newAngle = myGroup.rotation - event.delta
transition.to( myGroup, {time= 150, x= 280, y = 80, rotation = newAngle})

end
if (event.type == “portrait”) then
local newAngle = myGroup.rotation - event.delta
transition.to( myGroup, {time= 150, x = 0, y = 0, rotation = newAngle})

end

end
Runtime:addEventListener( “orientation”, onOrientationChange )

[/lua] [import]uid: 93133 topic_id: 35708 reply_id: 141997[/import]

I found this Corona SDK sample code to be very useful when I was making my app with orientation rotation:

http://developer.coronalabs.com/content/orientation-0 [import]uid: 135394 topic_id: 35708 reply_id: 142089[/import]

I’m not very familiar with orientation issues as I lock all my apps either to portrait or landscape - it saves a lot of headaches!

I’ve taken the liberty of streamlining your code as there was a lot of duplication which can be eradicated by using tables and loops. You might need to fiddle with the orientation code a little, it worked for me on a 320 x 480 setup on iPhone 4 simulator, but it may work differently in your app.

[lua]
local myButton = {} – array for the button images
local myGroup = display.newGroup() – display group for the button images

local xP = {30, 30, 100, 175, 30, 100, 175, 30, 100, 175} – set array of X positions
local yP = {450, 375, 375, 375, 300, 300, 300, 225, 225, 225} – set array of Y positions
local tapListener = function (event) – one listener function for all buttons

local obj = event.target – get the button that was tapped

textobj.text = obj.value – get the value of the button that was tapped

end
for a = 1, 10, 1 do

local i = display.newImageRect(“button”…a-1…".png", 60, 60) – use newImageRect (automatic retina scaling)
i.x = xP[a] – 60, 60 is the X size and Y size of the image
i.y = yP[a]
i.value = a-1 – set the value this button refers to
myGroup:insert(i)
myButton:addEventListener( “tap”, tapListener)
myButton[a] = i

end

local function onOrientationChange (event)

if (event.type == “landscapeLeft”) then
local newAngle = myGroup.rotation - event.delta
transition.to( myGroup, {time= 150, x = 40, y = 400, rotation = newAngle})

end

if (event.type == “landscapeRight”) then
local newAngle = myGroup.rotation - event.delta
transition.to( myGroup, {time= 150, x= 280, y = 80, rotation = newAngle})

end
if (event.type == “portrait”) then
local newAngle = myGroup.rotation - event.delta
transition.to( myGroup, {time= 150, x = 0, y = 0, rotation = newAngle})

end

end
Runtime:addEventListener( “orientation”, onOrientationChange )

[/lua] [import]uid: 93133 topic_id: 35708 reply_id: 141997[/import]

I found this Corona SDK sample code to be very useful when I was making my app with orientation rotation:

http://developer.coronalabs.com/content/orientation-0 [import]uid: 135394 topic_id: 35708 reply_id: 142089[/import]