ScrollView problems (code and assets included!)

[jack95]

local widget = require( "widget" ) local background = display.newImageRect( "matrixcode.jpg", 1200, 1600 ) background:setReferencePoint( display.TopLeftReferencePoint ) background.x, background.y = 0,0 background:toBack() local background2 = display.newImageRect( "BlueSelect.png", 700, 1600 ) background2:setReferencePoint( display.TopLeftReferencePoint ) background2.x, background.y = 0,0 local somesheet = graphics.newImageSheet( 'gfx\_widgets.png' , system.ResourceDirectory, { sheetContentWidth = 512, sheetContentHeight = 512, width = 40, height = 40, numFrames = math.floor(512 / 40) \* math.floor(512 / 40) } ) local myScrollView = widget.newScrollView { top = 700, left = 36, width = 692, height = 328, horizontalScrollDisabled = true, hideScrollbar = false, topPadding = 700, --bottomPadding = -7, --leftPadding = 20, --rightPadding = 20, backgroundColor = { 255, 255, 255, 127 }, --hideBackground = true, --maskFile = "myscrollmask\_1.png", scrollBarOptions = { sheet = somesheet, topFrame = 21, middleFrame = 23, bottomFrame = 22, }, --listener = function( event ) -- local phase = event.phase --local direction = event.direction --end, } myScrollView:insert(background2)

There’s my main.lua for my test case. My attachments are no longer available, new demo file below.

1. why do I need a huge topPadding? I have this huge gap at the bottom of the scrollpane =/

2. after I add the mask, why doesn’t the scrollbar show up correctly?..even in before the mask it isn’t showing up correctly.

Thanks for taking a look anyway.

[bjsorrentino]

Hi @jack95,

Can you try to re-attach the files, esp. the mask file? They don’t seem to have uploaded for some reason. Anyway, which build of Corona are you using to test? There have been some improvements made to ScrollView recently, so the behavior might vary depending on the daily build #. As for the padding, it shouldn’t require a high number like that, but I’ll have to test a bit re: why this is occurring.

Take care,

Brent Sorrentino

[jack95]

You can access the test case here Brent:

http://jack9.org/CurrentScrollViewTest.rar

I do appreciate some of the new improvements, but this is a full, self-contained demo of the scrollbar not functioning.

[bjsorrentino]

Hi Jack,

Can you please upload this project in .zip format? I’m having some trouble getting the .rar to download.

Thanks,

Brent

[jack95]

http://jack9.org/ScrollViewTest.zip is now available.

[bjsorrentino]

Hi Jack,

I took a brief look at your code and noticed a few things:

1. I believe custom scrollbars for this widget are undergoing modifications, so they may behave differently (or incorrectly) in different builds of the SDK. I’ll confirm this with the engineers a.s.a.p.

2. Your mask file was not in dimensions of 4 (height was 325). Be sure and make masks multiples of 4 in every case, as described in the masking guide: http://docs.coronalabs.com/guide/media/imageMask/index.html

Thanks,

Brent

[jack95]

Correcting the mask doesn’t help, but I read something that said you only had to worry about width. Maybe I’m wrong and I dont have the post =/

[rob]

Height and Width must be divisible by 4.  You  must also have at least 3 pixels of black on the outside.  As a rule I deal with divisible by 4 with a minimum of 4 black pixels, preferably 8.

[jack95]

I updated the zip file with the mask that is divisible by 4 both ways and has a 3px black border. This did not affect the demo of the scrollview scrollbar being broken.

[rob]

First of all, your mask is still incorrect.  Your scrollView is 700x328.  Your mask therefore must be a white block of 700x328 with at least 3 rows of black pixels on the outside.  It’s best to keep things in fours, so your resulting image should be 708x336 with a 700x328 white hole in the middle.

Your mask in the project is 692x324.  Perhaps you made this before all of the posts.

Next, The scrollView scroll bar image sheet needs constructed from 3 - 10x10 images into an image sheet.  I’m pretty sure it will work combined with other image sheets, but as a test, I made a single graphic 10 wide, 30 high that had the top 10px (after resizing them to 10px wide), middle 10px and bottom 10px from each image.

Here is how I loaded the image sheet

local sbData = {     width = 10,     height = 10,     numFrames = 3,     sheetContentWidth = 10,     sheetContentHeight = 30 } local sbSheet = graphics.newImageSheet( "scrollbar.png", sbData)

then in the middle of the scrollView I did this to replace what you had:

        maskFile = "mask-700x328.png",         scrollBarOptions = {             sheet = sbSheet,             topFrame = 1, --\_Nfo:getFrameIndex("scrollTop"),             middleFrame = 2, --\_Nfo:getFrameIndex("scrollMid"),             bottomFrame = 3, --\_Nfo:getFrameIndex("scrollBot"),         }

I commented out your frames, to use the ones from my image sheet.  Note where I changed the mask to the one I created.

I now see a thin black, white and red scroll bar along the side.  At 700px wide, the 10px scroll bar is very thin.  This is a current limit of the widget.  You cannot size it up.  It’s on the engineer’s list to eventually fix.    As with OS-X scroll bars, the top and bottom frames are caps and the middle frame is stretched to the necessary length.  The more there is to scroll the overall shorter the bar will be.

[bjsorrentino]

Hi @jack95,

Can you try to re-attach the files, esp. the mask file? They don’t seem to have uploaded for some reason. Anyway, which build of Corona are you using to test? There have been some improvements made to ScrollView recently, so the behavior might vary depending on the daily build #. As for the padding, it shouldn’t require a high number like that, but I’ll have to test a bit re: why this is occurring.

Take care,

Brent Sorrentino

[jack95]

You can access the test case here Brent:

http://jack9.org/CurrentScrollViewTest.rar

I do appreciate some of the new improvements, but this is a full, self-contained demo of the scrollbar not functioning.

[bjsorrentino]

Hi Jack,

Can you please upload this project in .zip format? I’m having some trouble getting the .rar to download.

Thanks,

Brent

[jack95]

http://jack9.org/ScrollViewTest.zip is now available.

[bjsorrentino]

Hi Jack,

I took a brief look at your code and noticed a few things:

1. I believe custom scrollbars for this widget are undergoing modifications, so they may behave differently (or incorrectly) in different builds of the SDK. I’ll confirm this with the engineers a.s.a.p.

2. Your mask file was not in dimensions of 4 (height was 325). Be sure and make masks multiples of 4 in every case, as described in the masking guide: http://docs.coronalabs.com/guide/media/imageMask/index.html

Thanks,

Brent

[jack95]

Correcting the mask doesn’t help, but I read something that said you only had to worry about width. Maybe I’m wrong and I dont have the post =/

[rob]

Height and Width must be divisible by 4.  You  must also have at least 3 pixels of black on the outside.  As a rule I deal with divisible by 4 with a minimum of 4 black pixels, preferably 8.

[jack95]

I updated the zip file with the mask that is divisible by 4 both ways and has a 3px black border. This did not affect the demo of the scrollview scrollbar being broken.

[rob]

First of all, your mask is still incorrect.  Your scrollView is 700x328.  Your mask therefore must be a white block of 700x328 with at least 3 rows of black pixels on the outside.  It’s best to keep things in fours, so your resulting image should be 708x336 with a 700x328 white hole in the middle.

Your mask in the project is 692x324.  Perhaps you made this before all of the posts.

Next, The scrollView scroll bar image sheet needs constructed from 3 - 10x10 images into an image sheet.  I’m pretty sure it will work combined with other image sheets, but as a test, I made a single graphic 10 wide, 30 high that had the top 10px (after resizing them to 10px wide), middle 10px and bottom 10px from each image.

Here is how I loaded the image sheet

local sbData = {     width = 10,     height = 10,     numFrames = 3,     sheetContentWidth = 10,     sheetContentHeight = 30 } local sbSheet = graphics.newImageSheet( "scrollbar.png", sbData)

then in the middle of the scrollView I did this to replace what you had:

        maskFile = "mask-700x328.png",         scrollBarOptions = {             sheet = sbSheet,             topFrame = 1, --\_Nfo:getFrameIndex("scrollTop"),             middleFrame = 2, --\_Nfo:getFrameIndex("scrollMid"),             bottomFrame = 3, --\_Nfo:getFrameIndex("scrollBot"),         }

I commented out your frames, to use the ones from my image sheet.  Note where I changed the mask to the one I created.

I now see a thin black, white and red scroll bar along the side.  At 700px wide, the 10px scroll bar is very thin.  This is a current limit of the widget.  You cannot size it up.  It’s on the engineer’s list to eventually fix.    As with OS-X scroll bars, the top and bottom frames are caps and the middle frame is stretched to the necessary length.  The more there is to scroll the overall shorter the bar will be.