Scrollview bug: its content is not cropped when scrolling upward.

Solar2D Widgets
#1

I just wanted to know if this is fixed in a version later than 1076!

It’s the same in an emu set to Iphone, in a real Iphone, and in a real Xperia Z.

I would also take a workaround, since it’s near deadline. :wink:

In the screenshot, the scrollview has been pulled up and little and I still hold finger. When I release my finger, it snaps back correctly.

At the bottom, it’s cropped correctly.

The scrollview has top=44 and height=480-50-44=396, and content inside is slightly higher.

Code:

   local sv=widget.newScrollView     {         top=T,         left=0,         width=w,         height=CH2-50-T,            scrollWidth=w,         scrollHeight=CH2-50-T+10+40+40,          --listener=scrollListener,         backgroundColor={255,255,255},         --hideBackground=true,         horizontalScrollDisabled=true     }  
#2

Hi @henrik5,

Did you test in 1137? Scrollview is undergoing some improvements at this time, so it might behave differently depending on the build. Can you post a screenshot of what’s not behaving correctly?

Thanks,

Brent

#3

I did attach a screenshot. It was in My Media already now. I hope the screenshot will appear now - it’s impossible to tell whether you’ve actually attached something or just browsed your media bank. (Never mind, it was just the two-step attaching process that was unusual to me.)

#4

There’s no mask listed in your code. AFAIK you can’t actually crop only using code settings; you have to use a mask file.

#5

Richard is correct: you need to specify the mask file. Remember to construct your mask properly, according to the mask requirements listed here:

http://docs.coronalabs.com/guide/media/imageMask/index.html

Take care,

Brent

#6

When I say “crop” I mean “not go outside its bounds”. It goes outside the bounds specified. Such as in the screenshot, where the scrollview top left corner starts just below the top black navigation bar.

This means that the mask would have to be a simple filled rectangle placed outside the scrollview bounds. Is this as it should be / is this how it’s done?

Edit: Hmm, I seem to get it now. Just a filled rectangle the size of the scrollView? I thought masks was for rounded corners etc and that the bounds masked out the “outside”. I’ll try that, thanks for your help!

Edit 2: Okay, so currently it seems that if I specify a mask, I need to somehow “generate” the image, in order to have the scrollView height fill the space left between the navigation bar and the tab bar (can’t stretch because of the exact 4px border requirement? I’ll try to fiddle with the scaleY factor though. I mean this.). I’ll check the blog posts about this widget, but any hint appreciated!

#7

Yeah, I haven’t tried that dynamicMask solution yet. It might work but it could take some experimenting with different phones in the simulator. I think Corona may offer a solution next graphics engine, too, but that’s some time in the future.

I’m mostly reiterating the Corona docs here, but any widget viewport that is not the entire width+height of the screen needs a mask. Even if it’s just the size of the screen minus the size of the topBar. That mask has two annoying but understandable properties:

  1. divisible by 4 extents (ie: 480x320 ok, 482x322 is not)

  2. at least 3 black pixels around the entire edge of the mask. (it’s fine to overshoot!)

I’d say 90% of masks in Corona are usually just rectangles. They can of course be useful for other things, like you say. 

#8

Just a couple of gotcha’s here.  When people were trying to work out a dynamic masking solution, if the widget filled the whole width, but not the whole height (typical with a tabBar), you cannot capture the screen outside of the visible area, so there is no way to get the black border. 

Graphics 2.0 will help solve this.

#9

Great news!!!

#10

Sorry guys but when can we get Graphics 2.0 ??

#11

Hi @ingaponteca,

Please watch the blog for announcements related to Graphics 2.0. It’s currently in closed beta testing, and we’ll release it when the “moving parts” are settled and all of the APIs are worked out and finalized.

Sincerely,

Brent Sorrentino

#12

Thanks. I am already checking updates in blog news.

#13

Hi @henrik5,

Did you test in 1137? Scrollview is undergoing some improvements at this time, so it might behave differently depending on the build. Can you post a screenshot of what’s not behaving correctly?

Thanks,

Brent

#14

I did attach a screenshot. It was in My Media already now. I hope the screenshot will appear now - it’s impossible to tell whether you’ve actually attached something or just browsed your media bank. (Never mind, it was just the two-step attaching process that was unusual to me.)

#15

There’s no mask listed in your code. AFAIK you can’t actually crop only using code settings; you have to use a mask file.

#16

Richard is correct: you need to specify the mask file. Remember to construct your mask properly, according to the mask requirements listed here:

http://docs.coronalabs.com/guide/media/imageMask/index.html

Take care,

Brent

#17

When I say “crop” I mean “not go outside its bounds”. It goes outside the bounds specified. Such as in the screenshot, where the scrollview top left corner starts just below the top black navigation bar.

This means that the mask would have to be a simple filled rectangle placed outside the scrollview bounds. Is this as it should be / is this how it’s done?

Edit: Hmm, I seem to get it now. Just a filled rectangle the size of the scrollView? I thought masks was for rounded corners etc and that the bounds masked out the “outside”. I’ll try that, thanks for your help!

Edit 2: Okay, so currently it seems that if I specify a mask, I need to somehow “generate” the image, in order to have the scrollView height fill the space left between the navigation bar and the tab bar (can’t stretch because of the exact 4px border requirement? I’ll try to fiddle with the scaleY factor though. I mean this.). I’ll check the blog posts about this widget, but any hint appreciated!

#18

Yeah, I haven’t tried that dynamicMask solution yet. It might work but it could take some experimenting with different phones in the simulator. I think Corona may offer a solution next graphics engine, too, but that’s some time in the future.

I’m mostly reiterating the Corona docs here, but any widget viewport that is not the entire width+height of the screen needs a mask. Even if it’s just the size of the screen minus the size of the topBar. That mask has two annoying but understandable properties:

  1. divisible by 4 extents (ie: 480x320 ok, 482x322 is not)

  2. at least 3 black pixels around the entire edge of the mask. (it’s fine to overshoot!)

I’d say 90% of masks in Corona are usually just rectangles. They can of course be useful for other things, like you say. 

#19

Just a couple of gotcha’s here.  When people were trying to work out a dynamic masking solution, if the widget filled the whole width, but not the whole height (typical with a tabBar), you cannot capture the screen outside of the visible area, so there is no way to get the black border. 

Graphics 2.0 will help solve this.

#20

Great news!!!