My splashscreen got sidebar icon

[layhwang]

Am using the tutorial in http://coronalabs.com/blog/2014/08/19/tutorial-building-a-sliding-menu/ to create the sidebar menu for my apps, with added button by widget.newButton.to call the function.

However, this button appear on splashscreen too (which it shouldn’t)

How can I remove it?

I use toFront() for the background image but nothing happens, while the button1:removeSelf() said “attempt to index global “button1” (a nil value)”

(I put the sidebar code in another file, but I did write require(“sidebar”) on top of the code )

Please help

Really confusing here

[rob]

Are you inserting it into the appropriate display.newGroup()

Rob

[layhwang]

@rob

Are you inserting it into the appropriate display.newGroup()

Rob

I didn’t insert it into group, simply call it <require (“common”> at main.lua>

–the sidebar codes is inside the common.lua

and it keep appearing on every scene already

[rob]

I think we are going to need to see some code.

Rob

[layhwang]

@rob

I think we are going to need to see some code.

Rob

the common.lua (the one with sidebar code)

 

[lua]

 

local scrollView

local icons = {}

local widget = require(“widget”)

local icon1,icon2,icon3,icon4,buttonSideBar

local composer = require(“composer”)

local scene = composer.newScene()

local isPlayingMusic = true

local bgTune = audio.loadStream(“sape.mp3”)

 

 

local function iconListener1( event )

 

    if ( event.phase == “moved” ) then

        local dx = math.abs(event.x - event.xStart ) 

        if ( dx > 5 ) then

            scrollView:takeFocus( event ) 

        end

 

    elseif ( event.phase == “ended” ) then

print (“Go to scene menu from sidebar”)

        composer.gotoScene(“menu”)

     

        timer.performWithDelay( 10, function() scrollView:removeSelf(); scrollView = nil; end )

print (“Close sidebar”)

    end

    return true

 

end

 

local function iconListener2( event )

 

    if ( event.phase == “moved” ) then

        local dx = math.abs(event.x - event.xStart ) 

        if ( dx > 5 ) then

            scrollView:takeFocus( event ) 

        end

    elseif ( event.phase == “ended” ) then

print (“Go to scene about Museum”)

        composer.gotoScene(“aboutMuseum”)

        

        timer.performWithDelay( 10, function() scrollView:removeSelf(); scrollView = nil; end )

print (“Close sidebar”)

    end

    return true

 

end

 

local function iconListener3( event )

 

    if ( event.phase == “moved” ) then

        local dx = math.abs(event.x - event.xStart ) 

        if ( dx > 5 ) then

            scrollView:takeFocus( event ) 

        end

 

    elseif isPlayingMusic then

print (“Music is playing”)

audio.stop()

print (“Stop the music”)

icon3.isVisible = false

icon4.isVisible = true

print (“Set icon mute invisible, icon play visible”)

 

else

audio.play( bgTune, {loops = -1} )  

print (“Music is not playing, play the music”)

icon3.isVisible = true

icon4.isVisible = false

print (“Set icon play invisible, icon mute visible”)

    end

 

    --toggle the boolean

    isPlayingMusic = not isPlayingMusic

print (“Change is Playing to not Playing”)

    timer.performWithDelay( 10, function() scrollView:removeSelf(); scrollView = nil; end )

print (“Close sidebar”)

return true

 end

 

 

local function showSlidingMenu( event )

    if ( “ended” == event.phase ) then

        scrollView = widget.newScrollView

        {

            width = 100,

            height = 1000,

            scrollWidth = 100,

            scrollHeight = 960,

            horizontalScrollDisabled = true

        }

        scrollView.x = 26

scrollView.y = 500

        local scrollViewBackground = display.newImage( “image/bar.jpg”,150,960)

scrollViewBackground.x = 50

scrollViewBackground.y = 480

        scrollView:insert( scrollViewBackground )

        --generate icons

  

            icon1 = widget.newButton

{ defaultFile = (“image/map.jpg”),

 width = 100, height = 100,

 x = 70,y = 120,

 fontSize = 30,

 onEvent = iconListener1

 }

 

icon2 = widget.newButton

{ defaultFile = (“image/info.jpg”),

 width = 100, height = 100,

 x = 70,y = 250,

 onEvent = iconListener2

 }

           

icon3 = widget.newButton

{ defaultFile = (“image/on.jpg”),

 width = 100, height = 100,

 x = 70,y = 380,

 onEvent = iconListener3

 }

 

 icon4 = widget.newButton

{ defaultFile = (“image/mute.jpg”),

 width = 100, height = 100,

 x = 70,y = 380,

 onEvent = iconListener3

 }

 

            scrollView:insert(icon1);

scrollView:insert(icon2);

scrollView:insert(icon3);

scrollView:insert(icon4);

 

    end

    return true

end

 

buttonSideBar = widget.newButton{

defaultFile = (“image/side.jpg”),

width = 100, height = 100,

x = 50, y = 50,

onEvent = showSlidingMenu

}

 

[/lua]

 

 

main.lua:

 

[lua]display.setStatusBar( display.HiddenStatusBar )

local composer = require (“composer”)

composer.gotoScene(“titleScreen”)
print (“Go to splashscreen”)

require “common”[/lua]

 

[rob]

You’re running into a feature of Composer…  It’s what we call the HUD feature (Heads Up Display).  There are some people who want to overlay information over top of running scenes where certain UI elements are always on top.   The rules for Composer are pretty simple, any display object (circle, rectangle, line, image, etc.) that gets created and IS NOT inserted into the Composer’s scene view ( i.e. sceneGroup) sits above anything that is put into the Composer scene.

Your common.lua creates all this UI stuff but never puts it into a scene to be managed by Composer, so it just sits on top not part of any scene.

Rob

[layhwang]

@rob

You’re running into a feature of Composer…  It’s what we call the HUD feature (Heads Up Display).  There are some people who want to overlay information over top of running scenes where certain UI elements are always on top.   The rules for Composer are pretty simple, any display object (circle, rectangle, line, image, etc.) that gets created and IS NOT inserted into the Composer’s scene view ( i.e. sceneGroup) sits above anything that is put into the Composer scene.

Your common.lua creates all this UI stuff but never puts it into a scene to be managed by Composer, so it just sits on top not part of any scene.

Rob

to make it managed by composer, do I still need to keep it in common.lua and call it in scene group of composer, or delete the files but paste the codes into every scene? 

[rob]

You can still have your common.lua, but you should make them callable functions that you would call from your scene:create() and pass in the sceneGroup (scene.view) so you can have your common.lua functions insert the objects in the scene correctly.

Rob

[layhwang]

@rob

You can still have your common.lua, but you should make them callable functions that you would call from your scene:create() and pass in the sceneGroup (scene.view) so you can have your common.lua functions insert the objects in the scene correctly.

Rob

Thank you so much ! 

Now the problem solved by copy the code of icon of sidebar into the scenes, and write require common at the main.lua

[layhwang]

@rob

You can still have your common.lua, but you should make them callable functions that you would call from your scene:create() and pass in the sceneGroup (scene.view) so you can have your common.lua functions insert the objects in the scene correctly.

Rob

Thank you so much ! 

Now the problem solved by copy the code of icon of sidebar into the scenes, and write require common at the main.lua

[rob]

Are you inserting it into the appropriate display.newGroup()

Rob

[layhwang]

@rob

Are you inserting it into the appropriate display.newGroup()

Rob

I didn’t insert it into group, simply call it <require (“common”> at main.lua>

–the sidebar codes is inside the common.lua

and it keep appearing on every scene already

[rob]

I think we are going to need to see some code.

Rob

[layhwang]

@rob

I think we are going to need to see some code.

Rob

the common.lua (the one with sidebar code)

 

[lua]

 

local scrollView

local icons = {}

local widget = require(“widget”)

local icon1,icon2,icon3,icon4,buttonSideBar

local composer = require(“composer”)

local scene = composer.newScene()

local isPlayingMusic = true

local bgTune = audio.loadStream(“sape.mp3”)

 

 

local function iconListener1( event )

 

    if ( event.phase == “moved” ) then

        local dx = math.abs(event.x - event.xStart ) 

        if ( dx > 5 ) then

            scrollView:takeFocus( event ) 

        end

 

    elseif ( event.phase == “ended” ) then

print (“Go to scene menu from sidebar”)

        composer.gotoScene(“menu”)

     

        timer.performWithDelay( 10, function() scrollView:removeSelf(); scrollView = nil; end )

print (“Close sidebar”)

    end

    return true

 

end

 

local function iconListener2( event )

 

    if ( event.phase == “moved” ) then

        local dx = math.abs(event.x - event.xStart ) 

        if ( dx > 5 ) then

            scrollView:takeFocus( event ) 

        end

    elseif ( event.phase == “ended” ) then

print (“Go to scene about Museum”)

        composer.gotoScene(“aboutMuseum”)

        

        timer.performWithDelay( 10, function() scrollView:removeSelf(); scrollView = nil; end )

print (“Close sidebar”)

    end

    return true

 

end

 

local function iconListener3( event )

 

    if ( event.phase == “moved” ) then

        local dx = math.abs(event.x - event.xStart ) 

        if ( dx > 5 ) then

            scrollView:takeFocus( event ) 

        end

 

    elseif isPlayingMusic then

print (“Music is playing”)

audio.stop()

print (“Stop the music”)

icon3.isVisible = false

icon4.isVisible = true

print (“Set icon mute invisible, icon play visible”)

 

else

audio.play( bgTune, {loops = -1} )  

print (“Music is not playing, play the music”)

icon3.isVisible = true

icon4.isVisible = false

print (“Set icon play invisible, icon mute visible”)

    end

 

    --toggle the boolean

    isPlayingMusic = not isPlayingMusic

print (“Change is Playing to not Playing”)

    timer.performWithDelay( 10, function() scrollView:removeSelf(); scrollView = nil; end )

print (“Close sidebar”)

return true

 end

 

 

local function showSlidingMenu( event )

    if ( “ended” == event.phase ) then

        scrollView = widget.newScrollView

        {

            width = 100,

            height = 1000,

            scrollWidth = 100,

            scrollHeight = 960,

            horizontalScrollDisabled = true

        }

        scrollView.x = 26

scrollView.y = 500

        local scrollViewBackground = display.newImage( “image/bar.jpg”,150,960)

scrollViewBackground.x = 50

scrollViewBackground.y = 480

        scrollView:insert( scrollViewBackground )

        --generate icons

  

            icon1 = widget.newButton

{ defaultFile = (“image/map.jpg”),

 width = 100, height = 100,

 x = 70,y = 120,

 fontSize = 30,

 onEvent = iconListener1

 }

 

icon2 = widget.newButton

{ defaultFile = (“image/info.jpg”),

 width = 100, height = 100,

 x = 70,y = 250,

 onEvent = iconListener2

 }

           

icon3 = widget.newButton

{ defaultFile = (“image/on.jpg”),

 width = 100, height = 100,

 x = 70,y = 380,

 onEvent = iconListener3

 }

 

 icon4 = widget.newButton

{ defaultFile = (“image/mute.jpg”),

 width = 100, height = 100,

 x = 70,y = 380,

 onEvent = iconListener3

 }

 

            scrollView:insert(icon1);

scrollView:insert(icon2);

scrollView:insert(icon3);

scrollView:insert(icon4);

 

    end

    return true

end

 

buttonSideBar = widget.newButton{

defaultFile = (“image/side.jpg”),

width = 100, height = 100,

x = 50, y = 50,

onEvent = showSlidingMenu

}

 

[/lua]

 

 

main.lua:

 

[lua]display.setStatusBar( display.HiddenStatusBar )

local composer = require (“composer”)

composer.gotoScene(“titleScreen”)
print (“Go to splashscreen”)

require “common”[/lua]

 

[rob]

You’re running into a feature of Composer…  It’s what we call the HUD feature (Heads Up Display).  There are some people who want to overlay information over top of running scenes where certain UI elements are always on top.   The rules for Composer are pretty simple, any display object (circle, rectangle, line, image, etc.) that gets created and IS NOT inserted into the Composer’s scene view ( i.e. sceneGroup) sits above anything that is put into the Composer scene.

Your common.lua creates all this UI stuff but never puts it into a scene to be managed by Composer, so it just sits on top not part of any scene.

Rob

[layhwang]

@rob

You’re running into a feature of Composer…  It’s what we call the HUD feature (Heads Up Display).  There are some people who want to overlay information over top of running scenes where certain UI elements are always on top.   The rules for Composer are pretty simple, any display object (circle, rectangle, line, image, etc.) that gets created and IS NOT inserted into the Composer’s scene view ( i.e. sceneGroup) sits above anything that is put into the Composer scene.

Your common.lua creates all this UI stuff but never puts it into a scene to be managed by Composer, so it just sits on top not part of any scene.

Rob

to make it managed by composer, do I still need to keep it in common.lua and call it in scene group of composer, or delete the files but paste the codes into every scene? 

[rob]

You can still have your common.lua, but you should make them callable functions that you would call from your scene:create() and pass in the sceneGroup (scene.view) so you can have your common.lua functions insert the objects in the scene correctly.

Rob

[layhwang]

@rob

You can still have your common.lua, but you should make them callable functions that you would call from your scene:create() and pass in the sceneGroup (scene.view) so you can have your common.lua functions insert the objects in the scene correctly.

Rob

Thank you so much ! 

Now the problem solved by copy the code of icon of sidebar into the scenes, and write require common at the main.lua

[layhwang]

@rob

You can still have your common.lua, but you should make them callable functions that you would call from your scene:create() and pass in the sceneGroup (scene.view) so you can have your common.lua functions insert the objects in the scene correctly.

Rob

Thank you so much ! 

Now the problem solved by copy the code of icon of sidebar into the scenes, and write require common at the main.lua