Scrolling Content

Solar2D General Questions/Discussion
#1

Hi guys, I want to know how do I able to scroll content just like a web browser able to scroll a long web page. Problem is, i dont know how to implement the codes when there are buttons and other event listeners. I have found one good example page:

http://developer.anscamobile.com/code/scroll-content

but this one doesnt solve what I want because he put this code:

local lotsOfTextObject = util.wrappedText( lotsOfText, 39, 14, native.systemFont, {0,0,0} ) scrollView:insert(lotsOfTextObject) lotsOfTextObject.x = 24 lotsOfTextObject.y = math.floor(myText.y + myText.height)

so basically it works IF we put only text in the app. but i want everything in the app (including button, not just text) to be scrollable, and not just the text. How can I do this?

for example, i have buttons where if I touch them, it will lead me to other lua files (using director). But when I apply scrollView code to these buttons, it shows error and the app unable to run in corona simulator. Any solution guys?

In short, im looking for a solution where we can scroll the page (like web browser able to scroll long web pages). But the above link doesnt help as it only works with just text and I want it to work with everything like buttons [import]uid: 114765 topic_id: 28807 reply_id: 328807[/import]

#2 
display.setStatusBar( display.HiddenStatusBar )   
  
local camera = display.newGroup()  
  
local bg1 = display.newRect( 0,0,320,700)  
  
camera:insert(bg1)  
  
camera.y = 100  
  
local myText = display.newText("", 50, 50, native.systemFont, 16)  
myText:setTextColor(0,0,0)  
myText.text = camera.y  
  
local function moveCamera( event )  
if event.phase == "began" then  
test = camera.y  
end  
if event.phase == "moved" then  
camera.y = test + (event.y - event.yStart)  
end  
if event.phase == "ended" or event.phase == "cancelled" then  
myText.text = camera.y  
end  
end  
Runtime:addEventListener( "touch", moveCamera )  
  
  
return camera

Here’s a little sample code. Let me know if you need any explanation or further adjusting. You would have to make buttons a double tap feature most likely. [import]uid: 77199 topic_id: 28807 reply_id: 116053[/import]

#3

hi mate,

yes i see the scrolling works! Also the button doesnt need double click in corona simulator. It works like it should be.

Just that there seems like no limit at all for the scrolling. How do I put limit so i dont see the blank screen if i keep scrolling down or top? [import]uid: 114765 topic_id: 28807 reply_id: 116167[/import]

#4

That’s just as easy!

The way you limit it is by adding something like this:

local function moveCamera( event )  
if event.phase == "began" then  
test = camera.y  
end  
if event.phase == "moved" then  
camera.y = test + (event.y - event.yStart)  
end  
if event.phase == "ended" or event.phase == "cancelled" then  
myText.text = camera.y  
 if camera.y \< 0 then  
 camera.y = 0  
 elseif camera.y \> 480 then  
 camera.y = 480  
 end  
end  
end  
Runtime:addEventListener( "touch", moveCamera )

The difference in this code is:

if camera.y \< 0 then  
camera.y = 0  
elseif camera.y \> 480 then  
camera.y = 480  
end

You have to mess around with the settings to put it at what you want but it will work. Good luck [import]uid: 77199 topic_id: 28807 reply_id: 116169[/import]

#5

hi there, yes thank you for that. I totally forgot about such SIMPLE code for scrolling limitation lol

i have, however, encounter different issue. I wonder how to setup different scrolling limitation in different orientation? Previously i have asked about how to put images properly in different orientation here:

http://developer.coronalabs.com/forum/2012/07/18/how-put-images-properly-different-orientation

solution from Segaboy definitely helps there but i cant find a solution on how to combine it with this scrolling issue.

Basically if let’s say I put this code:

if camera.y \>= 0 then camera.y = 0 elseif camera.y \<= -480 then camera.y = -480 end

it will work properly but when I rotate to landscapeLeft or landscapeRight, definitely the number must be changed because the y position in landscape mode is longer than in portrait.

For example, i have a button placed in the very bottom position like let’s say BlablaButton.y = 800. By using camera.y = -480 in portrait mode I can definitely see the BlaBlaButton in the end of the scrolling but if I change the orientation to landscape, I can’t see this BlaBlaButton because it’s lower than the scrolling limit.

How do I play around this? I have tried using the “if.camera.y <= -xxx then” code inside "if event.type == “landscapeLeft” " but it doesn’t work (the scrolling still using the original limitation)
[import]uid: 114765 topic_id: 28807 reply_id: 116241[/import]

#6

Hello again, try this first:

local function moveCamera( event )  
if event.phase == "began" then  
test = camera.y  
end  
if event.phase == "moved" then  
camera.y = test + (event.y - event.yStart)  
end  
if event.phase == "ended" or event.phase == "cancelled" then  
myText.text = camera.y  
 if event.type == "landscapeLeft" or event.type == "landscapeRight" then  
 if camera.y \< 0 then  
 camera.y = 0  
 elseif camera.y \> 800 then  
 camera.y = 800  
 end  
 elseif event.type == "portrait" or event.type == "portraitUpsideDown" then  
 if camera.y \< 0 then  
 camera.y = 0  
 elseif camera.y \> 480 then  
 camera.y = 480  
 end  
 end  
end  
end  
Runtime:addEventListener( "touch", moveCamera )

I haven’t tested it, not even sure why I’m giving you it this way since there’s an easier way to do it. The second way would be to leave it the exact way it is, just change 480 to a variable xxx like you did.

if camera.y \< 0 then  
camera.y = 0  
elseif camera.y \> -xxx then  
camera.y = -xxx  
end

Now in your other thread you have onOrientationChange function which changes the position of all the buttons and the rest of the content. In there you just change the value of xxx from 480 to 800. So you just add at the bottom of that function xxx = 800 on landscape and xxx = 480 on portrait. Should work, let me know if anything goes wrong, good luck [import]uid: 77199 topic_id: 28807 reply_id: 116245[/import]

#7

hello… [import]uid: 114765 topic_id: 28807 reply_id: 116398[/import]

#8

hello mate as i said in my previous post actually i have tried to combine both event listener but it didnt really work. For better understanding i will let you know what I currently have:

[code]local function moveCamera( event )
if event.phase == “began” then
test = camera.y
end
if event.phase == “moved” then
camera.y = test + (event.y - event.yStart)
end
if event.phase == “ended” or event.phase == “cancelled” then
myText.text = camera.y
if camera.y >= 0 then
camera.y = 0
myText.text = 0
elseif camera.y <= -480 then
camera.y = -480
myText.text = -480
end
end
end

Runtime:addEventListener( “touch”, moveCamera )

local function onOrientationChange( event )
if event.type == “landscapeLeft” then
facebookBtn.x = display.contentWidth / 2 + 220
facebookBtn.y = display.contentHeight / 5 - 30

twitterBtn.x = display.contentWidth / 2 + 170
twitterBtn.y = display.contentHeight / 5 - 30
[/code]

previously i tried to change the above codes to be like this:

[code]local function moveCamera( event )
if event.phase == “began” then
test = camera.y
end
if event.phase == “moved” then
camera.y = test + (event.y - event.yStart)
end
if event.phase == “ended” or event.phase == “cancelled” then
myText.text = camera.y
if camera.y >= 0 then
camera.y = 0
myText.text = 0
elseif camera.y <= -480 then
camera.y = -480
myText.text = -480
end
end
end

Runtime:addEventListener( “touch”, moveCamera )

local function onOrientationChange( event )
if event.type == “landscapeLeft” and camera.y >= 0 then

camera.y = 0
myText.text = 0

facebookBtn.x = display.contentWidth / 2 + 220
facebookBtn.y = display.contentHeight / 5 - 30

twitterBtn.x = display.contentWidth / 2 + 170
twitterBtn.y = display.contentHeight / 5 - 30

elseif event.type == “landscapeLeft” and camera.y <= - 800 then

camera.y = -800
myText.text = -800

facebookBtn.x = display.contentWidth / 2 + 220
facebookBtn.y = display.contentHeight / 5 - 30

twitterBtn.x = display.contentWidth / 2 + 170
twitterBtn.y = display.contentHeight / 5 - 30
[/code]

Now as you can see there I added [text]and camera.y[/text] in every onOrientationchange event type but it doesn’t solve the issue. The original code [text] elseif camera.y <= -480[/text] still overwrite the rules inside onOrientationChange events. I cant simply delete the original codes inside moveCamera function as it’ll make the scrolling limitation not working.

Or did I make any mistake in “integrating” the codes there?

*PS: Maybe you are wondering why it’s [text] <= -480 [/text] instead of [text] >= 480[/text] but i see that it’s actually negative number if you scroll to the bottom that’s why I use [text] >= 0 [/text] and [text] <= -480 [/text] (bigger than 0 is if you scroll to the top and less than -480 is if you scroll to the bottom). However, the position of BlaBlaButton.y is at 800 in the most bottom placement (the bigger the number is, the further down the position is). I hope it clears it why i use negative number for the scrolling part [import]uid: 114765 topic_id: 28807 reply_id: 116293[/import]

#9

nevermind, solved! [import]uid: 114765 topic_id: 28807 reply_id: 116402[/import]