Hi All,
I’ve implemented a slide panel using this awesome example created by Rob: https://coronalabs.com/blog/2014/04/08/widgets-creating-a-sliding-panel/
However since implementing the panel, I have gotten stuck trying to position some buttons on top of the panel, nothing I try seems to be working. Can anyone advise please?
My Code:
–======================================================================–
–== Menu Class factory
–======================================================================–
local widget = require “widget”
local composer = require “composer”
local Menu = class()
Menu.__name = “Menu”
–======================================================================–
–== Initialization
–======================================================================–
function Menu:__init( name )
function widget.newPanel( options )
local customOptions = options or {}
local opt = {}
opt.location = customOptions.location or “top”
local default_width, default_height
if ( opt.location == “top” or opt.location == “bottom” ) then
default_width = display.contentWidth
default_height = display.contentHeight * 0.33
else
default_width = display.contentWidth * 0.33
default_height = display.contentHeight
end
opt.width = customOptions.width or default_width
opt.height = customOptions.height or default_height
opt.speed = customOptions.speed or 500
opt.inEasing = customOptions.inEasing or easing.linear
opt.outEasing = customOptions.outEasing or easing.linear
if ( customOptions.onComplete and type(customOptions.onComplete) == “function” ) then
opt.listener = customOptions.onComplete
else
opt.listener = nil
end
local container = display.newContainer( opt.width, opt.height )
if ( opt.location == “left” ) then
container.anchorX = 1.0
container.x = display.screenOriginX
container.anchorY = 0.5
container.y = display.contentCenterY
elseif ( opt.location == “right” ) then
container.anchorX = 0.0
container.x = display.actualContentWidth
container.anchorY = 0.5
container.y = display.contentCenterY
elseif ( opt.location == “top” ) then
container.anchorX = 0.5
container.x = display.contentCenterX
container.anchorY = 1.0
container.y = display.screenOriginY
else
container.anchorX = 0.5
container.x = display.contentCenterX
container.anchorY = 0.0
container.y = display.actualContentHeight
end
function container:show()
local options = {
time = opt.speed,
transition = opt.inEasing
}
if ( opt.listener ) then
options.onComplete = opt.listener
self.completeState = “shown”
end
if ( opt.location == “top” ) then
options.y = display.screenOriginY + opt.height
elseif ( opt.location == “bottom” ) then
options.y = display.actualContentHeight - opt.height
elseif ( opt.location == “left” ) then
options.x = display.screenOriginX + opt.width
else
options.x = display.actualContentWidth - opt.width
end
transition.to( self, options )
end
function container:hide()
local options = {
time = opt.speed,
transition = opt.outEasing
}
if ( opt.listener ) then
options.onComplete = opt.listener
self.completeState = “hidden”
end
if ( opt.location == “top” ) then
options.y = display.screenOriginY
elseif ( opt.location == “bottom” ) then
options.y = display.actualContentHeight
elseif ( opt.location == “left” ) then
options.x = display.screenOriginX
else
options.x = display.actualContentWidth
end
transition.to( self, options )
end
return container
end
--function panelTransDone( target )
– native.showAlert( “Panel”, “Complete”, { “Okay” } )
– if ( target.completeState ) then
– print( "PANEL STATE IS: "…target.completeState )
– end
--end
Menu = widget.newPanel{
location = “left”,
– onComplete = panelTransDone,
width = display.contentWidth * 0.8,
height = display.contentHeight,
speed = 250,
inEasing = easing.outBack,
outEasing = easing.outCubic
}
Menu.background = display.newRect( 0, 0, Menu.width, Menu.height )
Menu.background:setFillColor( 0, 0.5, 0 )
Menu:insert( Menu.background )
Menu.title = display.newText( “Menu”, 0, -225, native.systemFontBold, 18 )
Menu.title:setFillColor( 1, 1, 1 )
Menu:insert( Menu.title )
-----------------------MENU BUTTON ATTEMPTS-------------------------------
Menu.scene1Button = widget.newButton{ label=“Scene1”, labelColor={default={255},over={128}}, defaultFile=“Content/icon2.png”, overFile=“Content/icon2-down.png”, width=70, height=30, onRelease=Menu.onScene1View }
Menu.scene1Button.position={x, y = Menu.contentCenterX, Menu.contentCenterY-200}
Menu:insert( Menu.scene1Button )
Menu.scene2Button = widget.newButton(
{
label=“Scene2”,
labelColor={default={255},over={128}},
defaultFile=“Content/icon2.png”,
overFile=“Content/icon2-down.png”,
width=70, height=30,
onRelease=Menu.onScene2View,
--position={x={-100},y={-200}}, position={x={1000},y={-800}}
}
)
--Menu:insert( Menu.scene2Button )
--Menu.scene2Button.x = Menu.contentCenterX
--Menu.scene2Button.y = Menu.contentCenterY-100
--------------------------------------------------------------------------
local menuOpen = false
end
–======================================================================–
–== Code
–======================================================================–
function Menu:slideMenu()
if menuOpen then
Menu:hide()
menuOpen = false
else
Menu:show()
menuOpen = true
end
end
function Menu:onScene1View()
composer.gotoScene( “view2” )
menu:hide()
end
function Menu:onScene2View()
composer.gotoScene( “view2” )
menu:hide()
end
–======================================================================–
–== Return factory
–======================================================================–
return Menu
I want to insert buttons into the panel and position them relative to the panel. All help will be greatly appreciated. (Classes created using 30LogGlobal)