ScrollView: prevent scrolling when touch originates outside mask?

Solar2D General Questions/Discussion
#1

Hi Everybody,

I’m using widget.newScrollView() & a bitmap mask to create a scrolling menu that will only take up about 1/4 of an iPad’s screen - and it works fine except that even masked “out-of-bounds” objects included in the scrollView are registering touch events, and initiating scrolling. Does anybody know a way to ensure that only “in-bounds” (i.e. visible) objects can initiate scrolling?

In the past I’ve placed display objects on top of the out-of-bounds areas that return true when touched to prevent out-of-bounds scrolling, but that won’t work in this particular instance - there are display objects placed beneath the scrollView that I’d like to remain touchable, even when the scrollView is in place above them.

@Ansca or @JonathanBeebe - is this something that can be worked into the next Widget Library update? Or is it already in there and I’ve just missed the memo?

Thanks in advance for your help! [import]uid: 27636 topic_id: 23923 reply_id: 323923[/import]

#2

Since you’ll know the actual bounds of the scrollView widget, you should be able to just check if the touch is within bounds, and return false if the touch is not within the bounds of the scrollView “touchable” area.
[import]uid: 52430 topic_id: 23923 reply_id: 96448[/import]

#3

Thanks Jonathan - the obvious answer was staring me in the face! I appreciate you taking time to respond.

Best,
Jason [import]uid: 27636 topic_id: 23923 reply_id: 96608[/import]

#4

Some example code, please.
-Oskar [import]uid: 24111 topic_id: 23923 reply_id: 103393[/import]

#5

Yeah but then how do you trigger elements outside of the scrollable area like a tab bar? [import]uid: 75844 topic_id: 23923 reply_id: 113855[/import]

#6

Here is my example I use it and it works for 100% :slight_smile:
First of all, if you need your ScrollView not to get touches outside of masked area then use this method

  
-- create scrollView...  
myScrollView = widget.newScrollView{ some\_params\_here }  
-- here is the trick ;)  
myScrollView.isHitTestMasked = true

after this you won’t get touches on the ScrollView’s masked areas, but still you will be able
to get touches on other objects which are on that area (i.e. buttons, etc…)
to prevent touches even on other objects on that area I use this code

[code]
– display.newRect in the example below will prevent touches on the masked area

function maskXXX ()
vars.maskX = display.newRect( 0, 436, 320, 44)
vars.maskX.alpha = 0
vars.maskX.isHitTestable = true
vars.maskX:addEventListener( “touch”, function()
– do anything…
return true
end )
end

function unMaskXXX ()
– fast way to remove all event listeners at once
vars.maskX._functionListeners = nil
vars.maskX._tableListeners = nil
vars.maskX:removeSelf()
vars.maskX = nil
end

[/code] [import]uid: 39634 topic_id: 23923 reply_id: 113860[/import]

#7

Hrmm thank you ive tried that a few times already with no luck, i mean it does work but then the scrollable area is reduced to about 10 pixels at the top of the scrollable area.

heres the scrollview im using if you got any ideas.

scrollView = widget.newScrollView{ top = 395, left = 45, width = 680, height = 452, hideBackground = true, maskFile = "music/viewportmask.jpg", friction = 0.9, listener = scrollstop }

listener scrollstop is an empty function at the moment, i was trying to do some fancy xStart mapping to trigger the tab_bar() if x > xStart etc etc [import]uid: 75844 topic_id: 23923 reply_id: 113862[/import]

#8

it should not reduce/crop/cut any area, the problem is because of your width/height or scrollWidth/scrollHeight that you didn’t set. Set that parameters, because they are required and not optional. [import]uid: 39634 topic_id: 23923 reply_id: 113864[/import]

#9

tried that and still no luck however if i remove top then it worked (it was just in the wrong position), so i added it to a new group and positioned the group where i needed it (and that worked).

ie

[code]
scrollView = widget.newScrollView{ left = 45, width = 680, height = 452, scrollHeight = 1024, scrollWidth = 768 , hideBackground = true, maskFile = “music/viewportmask.jpg”, friction = 0.9, listener = scrollstop }

scrollView.content.horizontalScrollDisabled = true
scrollView.content:insert(scrollList)
scrollView.isHitTestMasked = true

theCont:insert(scrollView)
theCont.y = 395

[/code] [import]uid: 75844 topic_id: 23923 reply_id: 113865[/import]

#10

Good to hear it worked! Congrats! [import]uid: 39634 topic_id: 23923 reply_id: 113869[/import]

#11

my favorite thing about it is that it takes only 1/4 of a screen
very convenient, because i can’t focus only on it all the time
(convert flv to mp4) [import]uid: 163840 topic_id: 23923 reply_id: 115307[/import]

#12

lol spam much? [import]uid: 75844 topic_id: 23923 reply_id: 115317[/import]