trying to put back buttons in storyboard

videotuts.lua

local storyboard = require( "storyboard" )  
local scene = storyboard.newScene()  
local content = require("content")   
  
-- Setup a scrollable content group  
scrollNav = require("scrollNav")  
 scrollNav = scrollNav.new({left=0, right=0, tm=topMargin, lm=leftMargin, sp=spacing})  
  
-- Iterate through content and add to scrollNav  
for index, value in ipairs(content) do  
 local thumb = display.newImage(content[index].thumb)  
 scrollNav:insertButton(thumb, content[index].asset)  
end   
  
--import the scrollNav class  
local backgroundWidth, backgroundHeight, backgroundAlignment, spacing, leftMargin, topMargin, scrollbarY, content, scrollNav  
  
-- Touch event listener for background image  
local function onSceneTouch( self, event )  
 if event.phase == "began" then  
  
 storyboard.gotoScene( "scene1", "slideLeft", 800 )  
  
 return true  
 end  
end  
  
-- Called when the scene's view does not exist:  
function scene:createScene( event )  
 local screenGroup = self.view  
  
 buttonWeather = display.newImage( "weatherbutton.png", 100,700 )  
 buttonWeather.touch = onSceneTouch  
 screenGroup:insert( buttonWeather )  
  
 text1 = display.newText( "Scene 1", 0, 0, native.systemFontBold, 24 )  
 text1:setTextColor( 255 )  
 text1:setReferencePoint( display.CenterReferencePoint )  
 text1.x, text1.y = display.contentWidth \* 0.5, 50  
 screenGroup:insert( text1 )  
  
 -- Background Width/Height/Alignment  
backgroundWidth = 640  
backgroundHeight = 1136  
backgroundAlignment = "center"  
  
 -- Scroll Nav spacing/margins  
spacing = 50  
leftMargin = 50  
topMargin = 300  
scrollbarY = 680  
-- Load content  
  
  
  
  
scrollNav = scrollNav.new({left=0, right=0, tm=topMargin, lm=leftMargin, sp=spacing})  
  
 -- Add the scrollbar to the scrollNav  
scrollNav:addScrollBar(scrollbarY)  
  
  
  
  
  
  
end  
-- Called immediately after scene has moved onscreen:  
function scene:enterScene( event )  
  
 print( "1: enterScene event" )  
  
 -- remove previous scene's view  
 storyboard.purgeScene( "scene4" )  
  
 -- Update Lua memory text display  
  
  
end  
-- Called when scene is about to move offscreen:  
function scene:exitScene( event )  
  
 print( "1: exitScene event" )  
  
 -- remove touch listener for image  
 buttonWeather2:removeEventListener( "touch", buttonWeather2 )  
  
end  
-- Called prior to the removal of scene's "view" (display group)  
function scene:destroyScene( event )  
  
 print( "((destroying scene 1's view))" )  
end  
  
---------------------------------------------------------------------------------  
-- END OF YOUR IMPLEMENTATION  
---------------------------------------------------------------------------------  
  
-- "createScene" event is dispatched if scene's view does not exist  
scene:addEventListener( "createScene", scene )  
-- "createScene" event is dispatched if scene's view does not exist  
scene:addEventListener( "createScene2", scene )  
-- "enterScene" event is dispatched whenever scene transition has finished  
scene:addEventListener( "enterScene", scene )  
  
-- "exitScene" event is dispatched before next scene's transition begins  
scene:addEventListener( "exitScene", scene )  
  
-- "destroyScene" event is dispatched before view is unloaded, which can be  
-- automatically unloaded in low memory situations, or explicitly via a call to  
-- storyboard.purgeScene() or storyboard.removeScene().  
scene:addEventListener( "destroyScene", scene )  
  
  
return scene  

[import]uid: 88495 topic_id: 34875 reply_id: 138648[/import]

I don’t see where you are creating the background. Any display object that you create that you do not put into a group sits on top of everything else. All storyboard scenes are underneath anything not managed by storyboard. This is likely why your button is hiding under the background.

As far as div’s like in HTML, the closest thing would be putting a display.newGroup() inside of another group.

 groupA = display.newGroup()  
 groupB = display.newGroup()  
 groupB:insert(groupA)  

[import]uid: 199310 topic_id: 34875 reply_id: 138663[/import]

how would I end those tags

[code]groupB = display.newGroup()
function scene:createScene( event )
local screenGroup = self.view
end

end[/code] [import]uid: 88495 topic_id: 34875 reply_id: 138666[/import]

You don’t use tags like HTML. Corona is very very different. The concept of a box inside a box still works. In Corona you “insert” display objects into a group, position them on the screen where you want them and then if needed you can move a whole group of objects all at once. But groups are more like layers than div’s because in HTML div’s can float up against each other or force the next div down the page. Corona groups are more like div’s that are positioned absolutely (and perhaps relatively). You can have groups stacked on top of each other. In HTML if you are using floats or normal positioning, div’s don’t stack on top of each other.

[import]uid: 199310 topic_id: 34875 reply_id: 138668[/import]

So is a “object” like text and image or function or all three? [import]uid: 88495 topic_id: 34875 reply_id: 138669[/import]

videotuts.lua

[code]local storyboard = require( “storyboard” )
local scene = storyboard.newScene()
local content = require(“content”)

local displayback = display.newImage (“bg.jpg”)
– Touch event listener for background image
local function onSceneTouch( self, event )
if event.phase == “began” then

storyboard.gotoScene( “scene1”, “slideLeft”, 800 )

return true
end
end

– Called when the scene’s view does not exist:
function scene:createScene( event )
local screenGroup = self.view

buttonWeather = display.newImage( “weatherbutton.png”, 100,700 )
buttonWeather.touch = onSceneTouch
screenGroup:insert( buttonWeather )

text1 = display.newText( “Scene 1”, 0, 0, native.systemFontBold, 24 )
text1:setTextColor( 255 )
text1:setReferencePoint( display.CenterReferencePoint )
text1.x, text1.y = display.contentWidth * 0.5, 50
screenGroup:insert( text1 )

– Background Width/Height/Alignment
backgroundWidth = 120
backgroundHeight = 280
backgroundAlignment = “center”

– Scroll Nav spacing/margins
spacing = 50
leftMargin = 10
topMargin = 100

end
– Setup a scrollable content group
scrollNav = require(“scrollNav”)
scrollNav = scrollNav.new({left=0, right=0, tm=topMargin, lm=leftMargin, sp=spacing})

– Iterate through content and add to scrollNav

for index, value in ipairs(content) do
local thumb = display.newImage(content[index].thumb)
scrollNav:insertButton(thumb, content[index].asset)
end
–import the scrollNav class
local backgroundWidth, backgroundHeight, backgroundAlignment, spacing, leftMargin, topMargin, scrollbarY, content, scrollNav

– Called immediately after scene has moved onscreen:
function scene:enterScene( event )

print( “1: enterScene event” )

– remove previous scene’s view
storyboard.purgeScene( “scene4” )

– Update Lua memory text display

end
– Called when scene is about to move offscreen:
function scene:exitScene( event )

print( “1: exitScene event” )

– remove touch listener for image
buttonWeather2:removeEventListener( “touch”, buttonWeather2 )

end
– Called prior to the removal of scene’s “view” (display group)
function scene:destroyScene( event )

print( “((destroying scene 1’s view))” )
end


– END OF YOUR IMPLEMENTATION

– “createScene” event is dispatched if scene’s view does not exist
scene:addEventListener( “createScene”, scene )
– “createScene” event is dispatched if scene’s view does not exist
scene:addEventListener( “createScene2”, scene )
– “enterScene” event is dispatched whenever scene transition has finished
scene:addEventListener( “enterScene”, scene )

– “exitScene” event is dispatched before next scene’s transition begins
scene:addEventListener( “exitScene”, scene )

– “destroyScene” event is dispatched before view is unloaded, which can be
– automatically unloaded in low memory situations, or explicitly via a call to
– storyboard.purgeScene() or storyboard.removeScene().
scene:addEventListener( “destroyScene”, scene )

return scene[/code] [import]uid: 88495 topic_id: 34875 reply_id: 138667[/import]

Object is a generic term for any container that holds both data (could be text or image or both) and functions specifically designed to manipulate that data.

There is a specific class of Objects called “Display Objects”. They include display.newRect(), display.newCiricle(), display.newLine(), display.newText(), display.newImageRect() and a bunch more. All of these objects have specific display properties in that they put something on the screen. These objects can be put into groups.
[import]uid: 199310 topic_id: 34875 reply_id: 138690[/import]

I didnt think this scrollNav was a display object, is it? I tried everything yesturday. But the scrollNav sits on top of the tabbar and my button. I tried moving the scrollNav = Require (“scrollNav”) is what moves the video tutorials, I just can figure out where this needs to be with the tabbar and my button.

As with story board scenes, I feel like the create, exit, destroy some confusing. I can’t understand of the first scene is part of the second and stuff…like one continious piece of film you can rewind,play,and forward. Or if one scene ends while another begins. Its seems to be all one continious movement when one scene transitions to another.
As for my code I still don’t know where scrollNav = Require(“scrollNav”) should sit.Thanks. [import]uid: 88495 topic_id: 34875 reply_id: 138728[/import]

Where did you get scrollNav from? [import]uid: 199310 topic_id: 34875 reply_id: 138729[/import]

After breaking down all the code and re-sorting to find which enable what. I found moving this…

-- Setup a scrollable content group  
scrollNav = require("scrollNav")  
 scrollNav = scrollNav.new({left=0, right=0, tm=topMargin, lm=leftMargin, sp=spacing})  

Affected the tutorial video slider.
Because all I want to do is have this work inside the storyboard. But it takes precedent someway and covers the top of the whole scene and gives me no option to put in back button. [import]uid: 88495 topic_id: 34875 reply_id: 138732[/import]

Videotuts.lua

[code]
local storyboard = require( “storyboard” )
local scene = storyboard.newScene()
local content = require(“content”)
local image, backgroundWidth, backgroundHeight, backgroundAlignment

– Touch event listener for background image
local function onSceneTouch( self, event )
if event.phase == “began” then

storyboard.gotoScene( “scene1”, “slideLeft”, 800 )

return true
end
end

– Setup a scrollable content group
scrollNav = require(“scrollNav”)
scrollNav = scrollNav.new({left=0, right=0, tm=topMargin, lm=leftMargin, sp=spacing})

– Called when the scene’s view does not exist:
function scene:createScene( event )

button1 = display.newImage( “weatherbutton.png”, 100,700 )
button1.touch = onSceneTouch

local screenGroup = self.view
image = display.newImage( “bg.jpg” )
screenGroup:insert( image )

– Background Width/Height/Alignment
backgroundWidth = 120
backgroundHeight = 280
backgroundAlignment = “center”

– Scroll Nav spacing/margins
spacing = 50
leftMargin = 10
topMargin = 100

screenGroup:insert( button1 )

end
– Iterate through content and add to scrollNav

for index, value in ipairs(content) do
local thumb = display.newImage(content[index].thumb)
scrollNav:insertButton(thumb, content[index].asset)

end

– Called prior to the removal of scene’s “view” (display group)
function scene:destroyScene( event )

print( “((destroying scene 1’s view))” )
end


– END OF YOUR IMPLEMENTATION

– “createScene” event is dispatched if scene’s view does not exist
scene:addEventListener( “createScene”, scene )
– “createScene” event is dispatched if scene’s view does not exist

– “enterScene” event is dispatched whenever scene transition has finished
scene:addEventListener( “enterScene”, scene )

– “exitScene” event is dispatched before next scene’s transition begins
scene:addEventListener( “exitScene”, scene )

– “destroyScene” event is dispatched before view is unloaded, which can be
– automatically unloaded in low memory situations, or explicitly via a call to
– storyboard.purgeScene() or storyboard.removeScene().
scene:addEventListener( “destroyScene”, scene )

return scene
[/code] [import]uid: 88495 topic_id: 34875 reply_id: 138734[/import]

For instance, I can’t get the button on top of the bimage

[code]
– Called when the scene’s view does not exist:
function scene:createScene( event )
local screenGroup = self.view

buttonWeather = display.newImage( “weatherbutton.png”, 100, 200 )
buttonWeather.touch = onSceneTouch
screenGroup:insert( buttonWeather )
local bimage = display.newImage(“corkdesk.png”,true)
text1 = display.newText( “Scene 1”, 0, 0, native.systemFontBold, 24 )
text1:setTextColor( 255 )
text1:setReferencePoint( display.CenterReferencePoint )
text1.x, text1.y = display.contentWidth * 0.5, 50
screenGroup:insert( text1 )

text2 = display.newText( "MemUsage: ", 0, 0, native.systemFont, 16 )
text2:setTextColor( 255 )
text2:setReferencePoint( display.CenterReferencePoint )
text2.x, text2.y = display.contentWidth * 0.5, display.contentHeight * 0.5
screenGroup:insert( text2 )

text3 = display.newText( “Touch to continue.”, 0, 0, native.systemFontBold, 18 )
text3:setTextColor( 255 ); text3.isVisible = false
text3:setReferencePoint( display.CenterReferencePoint )
text3.x, text3.y = display.contentWidth * 0.5, display.contentHeight - 100
screenGroup:insert( text3 )

print( “\n1: createScene event”)
end
[/code] [import]uid: 88495 topic_id: 34875 reply_id: 138739[/import]

I still don’t know what scrollNav is. Can you post the code to that module or give me a URL where you got it from? I have no idea what the underlying features are of that.

Then for your second issue. You never insert bimage into screenGroup. But even if you do, that graphic is sitting above your buttonWeather graphic. The order things are created and inserted into groups affects what is on top of one another. [import]uid: 199310 topic_id: 34875 reply_id: 138743[/import]

I can’t find it in this build of corona, but it was a video media sample app that was in landscape mode. I took that and was trying to incorporate it into widget with tabbar.

[import]uid: 88495 topic_id: 34875 reply_id: 138749[/import]

Are you looking to change this to a storyboard setup because this looks like director code in this example.

In short you can add the back button to the top of the page you are on and assign the function to call
storyboard.gotoScene("") put the scene name of the previous scene you want to go back to in between the quotes.

You can also pull the previous scene name and make it a variable that you can pass into the goto scene.

local previous_scene_name = storyboard.getPrevious()

Hope that helps…

Matt [import]uid: 18783 topic_id: 34875 reply_id: 138589[/import]

I’m calling it through storyboard. I tried function new and that did not work because the code about does not use seeall… [import]uid: 88495 topic_id: 34875 reply_id: 138592[/import]

This takes me to the code above

local function onSceneTouch( self, event )  
 if event.phase == "began" then  
  
 storyboard.gotoScene( "videotuts", "slideLeft", 800 )  
  
 return true  
 end  
end  

So when I get to the code above, I need a back button. I think I’m using two different transition types, director and storyboard. But storyboard had a tabbar in the template that is why I’m working on that.Also I am using the widget from story board but changed the size to 640x1136 and now the tab bar that uses widget inside corona at the bottom is too small. Any idea how to increase the size for the tabbar widget in the storyboard if using iPhone 5 dimensions?Thanks. [import]uid: 88495 topic_id: 34875 reply_id: 138594[/import]

You really shouldn’t try to mix and match Storyboard with Director.
[import]uid: 199310 topic_id: 34875 reply_id: 138601[/import]

+1 rob. Exactly. Please don’t put both in an app. It will make troubleshooting nearly impossible.

Storyboard has matured enough to trust it.

Make a widget.newButton and place it like x=10 and y= 10 so it is in the top left corner and make the event action your function that calls the storyboard.gotoScene(“scene name of previous screen”) [import]uid: 18783 topic_id: 34875 reply_id: 138610[/import]

how come the back button won’t work in this code below?

[code]

– VIDEO GALLERY
– by John Polacek @ 2011

– Version: 1.0

– Git: https://github.com/johnpolacek/Video-Gallery

module(…, package.seeall)

function new()
local localGroup = display.newGroup()

local back = display.newImage (“back.png”)
back.x = math.floor(display.contentWidth*0.88)
back.y = 445
back.isHitTestable = true

local function goback (event)
myText.isVisible = false
scrollBackground.isVisible = false
background.isVisible = false
lotsOfTextObject.isVisible = false
director:changeScene (“scene1”)
back:removeSelf()
end
back:addEventListener(“touch”,goback)
return localGroup
end

– Background Width/Height/Alignment
local backgroundWidth = 640
local backgroundHeight = 1136
local backgroundAlignment = “center”

– Scroll Nav spacing/margins
local spacing = 50
local leftMargin = 50
local topMargin = 300
local scrollbarY = 680

– Load content
local content = require(“content”)

–import the scrollNav class
local scrollNav = require(“scrollNav”)

display.setStatusBar(display.HiddenStatusBar)

function new()
local localGroup = display.newGroup()
local babybutton = display.newImage (“Icon.png”, true)
babybutton.x = 92
babybutton.y = 293
localGroup:insert(babybutton)

local function gobaby (event)
if event.phase == “ended” then
director:changeScene (“baby”)
end
end
babybutton:addEventListener(“touch”, gobaby)
return localGroup
end

– Touch event listener for background image

– Background
local background = display.newImageRect(“background.png”, backgroundWidth, backgroundHeight)

– Center background image
background.x = backgroundWidth / 2

– Align background
local topMarginAdjust = 0
if (backgroundAlignment == “bottom”) then
topMarginAdjust = -(backgroundHeight - display.viewableContentHeight)
elseif (backgroundAlignment == “top”) then
topMarginAdjust = backgroundHeight - display.viewableContentHeight
end
background.y = (backgroundHeight / 2) + topMarginAdjust -((backgroundHeight - display.viewableContentHeight)/2)

– Setup a scrollable content group
local scrollNav = scrollNav.new({left=0, right=0, tm=topMargin, lm=leftMargin, sp=spacing})

– Iterate through content and add to scrollNav
for index, value in ipairs(content) do
local thumb = display.newImage(content[index].thumb)
scrollNav:insertButton(thumb, content[index].asset)
end

– Add the scrollbar to the scrollNav
scrollNav:addScrollBar(scrollbarY)

[/code] [import]uid: 88495 topic_id: 34875 reply_id: 138627[/import]