I really don't get swipes

[Garrettsavo]

So I have the following function. 

local function gotoCraftConfrimOverlay(e) if e.phase == "moved" then local dx = math.abs(e.x - e.xStart) if dx \>= 25 then recipeScroll:takeFocus( e ) end elseif e.phase == "ended" then composer.gotoScene("CraftConfirmOverlay") end end

Pretty simple. I attach this function to a bunch of buttons that lead to various recipes. All of these recipe buttons are placed in the recipeScroll scroll group. So if I click on a button, I want it to open the craft confirm overlay. If I drag the scroll view a little bit, the recipe group should scroll. That all works fine right now.

But now I want it so if I drag the recipeScroll widget over, lets say 50 pixels, I want it to load a new page of recipes. But the phase won’t end unless I set the stage and set focus. Or so I understand? But I can’t set the stage focus to e.target because that is the recipe buttons. And setting the stage focus to recipeScroll does nothing as well. I need the focus to switch to the recipeScoll widget so I can scroll, and then once that has focus, end that phase and call a function. 

Can anyone please explain how I could do that.

[bjsorrentino]

Hmmm… so the “recipeScroll” is a widget ScrollView? And does it scroll only vertically, or horizontally too? If only vertically, do you want to load a new page of recipes if they “swipe horizontally” on that widget?

Brent

[Garrettsavo]

Thanks for the reply. Yea the recipeScroll is a scroll widget. And I actually only want to scroll them horizontally. They will never go vertical and I have verticalScrollDisabled. But technically they are not really suppose to be able to free scroll like a normal widget. These recipe buttons come in chunks of 14. So 2 rows of 7. And you can scroll this group of 14 left/right, but the next page of 14 will only get loaded once you scroll/swipe them over a certain distance left/right. I hope that makes sense. It’s just for loading purposes since there will be a lot of recipes. 

[Garrettsavo]

Any ideas? This one is still stumping me.

[bjsorrentino]

Hi @Garrettsavo,

Could you upload an example screenshot of what the UI layout should look like? I’m still not clear on how these will be arranged and what should happen when scrolling is done.

Thanks,

Brent

[Garrettsavo]

http://i.imgur.com/sHqijXj.gifv

So you can see that I wiggle the mouse a bit at the start and the scrollView doesn’t take focus. I need to be able to press the recipe buttons to open their info. But if the player drags over 25 pixels than the scrollView takes focus. At this point I need to check whether the player has dragged over a total of 40 pixels. If they have dragged over 40 pixels and released their touch (ending the touch event) the recipe page should switch. Either going forward a page or back a page depending on the direction of the swipe. 

In the gif I am clicking the buttons to switch the page, but that is essentially the effect I am looking for. Drag the recipeGroup over x pixels to switch pages (in groups of 14). 

[bjsorrentino]

Hmmm… so if I understand this better, the player might be able to drag well over 40 pixels to see more objects… I mean, there could be 400 more pixels of content, correct? In that case, you wouldn’t want it to switch to a new page of objects after 40 pixels, right?

It seems like you might want to make a distinction between the player simply moving (dragging) the view left and right, and the player “swiping” the view left or right. If that’s true, remember that a swipe is usually a combination of distance and speed together. It’s a fast directional motion, not typically one that the user can take several seconds to complete. Considering that, I would suggest you implement swipes not only in regards to the pixels dragged, but how fast the user drags it. Fortunately, Corona makes that pretty easy with the “event.time” property of touches:

https://docs.coronalabs.com/api/event/touch/time.html

Basically, you would detect the time when the event began, and save that to some variable which you can use to compare. Then, once the user surpasses a certain number of pixels (say 40), you compare that time with the time since the touch began. If it’s (for example) over ~1 second (maybe slightly less), then you might disregard that as being a “swipe” and then just ignore doing anything besides just letting the user keep scrolling back and forth around the view.

Hope that makes sense. I might not have described it very well.

Brent

P.S. - If this holds true for what you want to do, it’s going to take some experimentation with values. For example, you won’t want to acknowledge a swipe after 40 pixels, as that’s probably too short a distance. It would be more like 80-100 pixels I’m guessing, depending on your content area size and other factors. So in that case, because your scenario is fairly unique, you’d need to work out some conditional logic to detect 1) the view gaining focus, and 2) the user touching and lifting off over a suitable distance and in a fast enough time period.

[bjsorrentino]

Hmmm… so the “recipeScroll” is a widget ScrollView? And does it scroll only vertically, or horizontally too? If only vertically, do you want to load a new page of recipes if they “swipe horizontally” on that widget?

Brent

[Garrettsavo]

Thanks for the reply. Yea the recipeScroll is a scroll widget. And I actually only want to scroll them horizontally. They will never go vertical and I have verticalScrollDisabled. But technically they are not really suppose to be able to free scroll like a normal widget. These recipe buttons come in chunks of 14. So 2 rows of 7. And you can scroll this group of 14 left/right, but the next page of 14 will only get loaded once you scroll/swipe them over a certain distance left/right. I hope that makes sense. It’s just for loading purposes since there will be a lot of recipes. 

[Garrettsavo]

Any ideas? This one is still stumping me.

[bjsorrentino]

Hi @Garrettsavo,

Could you upload an example screenshot of what the UI layout should look like? I’m still not clear on how these will be arranged and what should happen when scrolling is done.

Thanks,

Brent

[Garrettsavo]

http://i.imgur.com/sHqijXj.gifv

So you can see that I wiggle the mouse a bit at the start and the scrollView doesn’t take focus. I need to be able to press the recipe buttons to open their info. But if the player drags over 25 pixels than the scrollView takes focus. At this point I need to check whether the player has dragged over a total of 40 pixels. If they have dragged over 40 pixels and released their touch (ending the touch event) the recipe page should switch. Either going forward a page or back a page depending on the direction of the swipe. 

In the gif I am clicking the buttons to switch the page, but that is essentially the effect I am looking for. Drag the recipeGroup over x pixels to switch pages (in groups of 14). 

[bjsorrentino]

Hmmm… so if I understand this better, the player might be able to drag well over 40 pixels to see more objects… I mean, there could be 400 more pixels of content, correct? In that case, you wouldn’t want it to switch to a new page of objects after 40 pixels, right?

It seems like you might want to make a distinction between the player simply moving (dragging) the view left and right, and the player “swiping” the view left or right. If that’s true, remember that a swipe is usually a combination of distance and speed together. It’s a fast directional motion, not typically one that the user can take several seconds to complete. Considering that, I would suggest you implement swipes not only in regards to the pixels dragged, but how fast the user drags it. Fortunately, Corona makes that pretty easy with the “event.time” property of touches:

https://docs.coronalabs.com/api/event/touch/time.html

Basically, you would detect the time when the event began, and save that to some variable which you can use to compare. Then, once the user surpasses a certain number of pixels (say 40), you compare that time with the time since the touch began. If it’s (for example) over ~1 second (maybe slightly less), then you might disregard that as being a “swipe” and then just ignore doing anything besides just letting the user keep scrolling back and forth around the view.

Hope that makes sense. I might not have described it very well.

Brent

P.S. - If this holds true for what you want to do, it’s going to take some experimentation with values. For example, you won’t want to acknowledge a swipe after 40 pixels, as that’s probably too short a distance. It would be more like 80-100 pixels I’m guessing, depending on your content area size and other factors. So in that case, because your scenario is fairly unique, you’d need to work out some conditional logic to detect 1) the view gaining focus, and 2) the user touching and lifting off over a suitable distance and in a fast enough time period.