PDA

View Full Version : Carousel swipe/scroll interferance bug? (1.0 and 1.0.1)



Bunchofstring
1 Dec 2010, 8:23 AM
I've observed the problem below on 1.0 and recently on 1.0.1. It occurs when testing on a device (my iPhone), but not in Chrome on the desktop.

Swiping between cards is a breeze... until you add scroll:'vertical' to the cards themselves. That configuration makes it more difficult to move from card to card. To switch between cards, a user has to drag horizontally along a VERY shallow slope (almost perfectly horizontal)... too shallow to be considered usable. Imagine that the figure below is a cross section of the first card. The letters represent the initial touch location (X) and the points where a finger might lift off the screen (A and B).

####|--------------------------------------|####
##left|-----A-------------------------X------|right
#edge|--------------------------------------|edge
####|-----B--------------------------------|####
####|--------------------------------------|####

(Vertically scrollable cards)
Swipe from X to A = horizontal swipe
Swipe from X to B = vertical scroll <-- unexpected behavior

(Non-vertically-scrollable cards)
Both scenarios = horizontal swipe <-- desired behavior

Does anyone know how to correct this problem? I suspect it has to do with suspending event handlers, but this is beyond my level of understanding and it would be nice to get some help from the experts here on the forum.

Bunchofstring
3 Dec 2010, 7:45 AM
This is a major usability issue, but nobody has chimed in with a solution on this or my other similar posts. I know I am not the only one struggling with this so hopefully the links below will be of some help to you. If you do have or find a solution, please share your findings.

On preventing the swipe event (promising for my purposes, but I'm clueless on implementation)
http://www.sencha.com/forum/showthread.php?103432-Prevent-Swipe-on-Carousel/page2

Possibly related issue with 0.98
http://www.sencha.com/forum/showthread.php?113965-horizontal-carousel-with-vertical-panel&highlight=carousel+vertical+scroll

Working on 0.96 but doesn't work on 1.0 or 1.0.1
http://www.sencha.com/forum/showthread.php?111405-how-to-scroll-a-card-in-a-carousel&highlight=carousel

Could stopEvent be the answer? How exactly?
http://www.sencha.com/forum/showthread.php?111344-A-method-to-programmatically-control-the-carousel-s-swipe-touchmove-event-recognition&highlight=carousel

Pinch support on carousels... similar issue, but also unsolved. How can I get this into TommyMaintz's list of things to do?
http://www.sencha.com/forum/showthread.php?102246-how-to-include-pinch-in-a-Carousel&highlight=carousel+vertical+scroll

hitman01
21 Dec 2010, 1:35 PM
I'm looking for a similar solution. I would like to set priority for different events. For example, I want pinch to take priority over scroll. So if both pinch and scroll are detected at the same time, I want the pinch to work but not the scroll.

Bunchofstring
29 Dec 2010, 9:44 PM
Quick update. I have found limited success setting the threshold for vertical scrolling. However upon further meditation, I believe I will need to increase the threshold for both horizontal swiping and vertical scrolling. That is, the app will only respond after the user's finger has dragged a greater distance. No tests yet, but I'll give it a try in the next week or so.

moell
11 Jan 2011, 1:43 PM
Did you have any success on this after New Years, Bunchofstring?

jjfortuin
11 Jan 2011, 5:38 PM
I read somewhere it has to do with the touch events. From the point (x1,y1) where you start until where you "lift" your finger up (touch end) (x2,y2). If the difference between y2-y1>... pixels, it registers a up/down event. Hence the vertical scrolling. I'm not sure if you can limit the vertical scroll, as the "delta y" should be larger to prevent the vertical scrolling. Too much math?

Bunchofstring
11 Jan 2011, 8:36 PM
@moell, I have been cleaning up some foundational problems with my app now that I better understand the framework, so no, I have not tried my idea for a solution yet. In lieu of implementation, I'll describe it though: The following code snippet for a single card within a carousel adjusts what I believe @jjfortuin is referring to (i.e. threshold), but for vertical scrolling only. Default is 5, and I've bumped it up to 7, meaning that the user's finger needs to trace a longer line up or down the touchscreen to produce the scrolling behavior. Threshold may also be the "verticality" of the gesture, but on a touch screen it is difficult to test exactly what's going on.


{
xtype:'panel',
scroll:{direction:'vertical',threshold:7},
items: ...
}

The unfinished next step in my experiment is to increase the threshold for horizontal swiping between carousel items. The predicted side effect is that the app will require a longer drag gesture for scrolling and swiping, but as a result, the likelihood of misinterpreting the user's intentions is minimized. Forgive me for not updating this thread yet, but it took me a while to find and somehow adjust the scrolling threshold, so the prospect of sifting through more code to find and adjust the swipe threshold isn't very inviting. Hopefully the pros who developed Sencha Touch will take notice and fix this in the next release, but maybe I shouldn't hold my breath?

moell
12 Jan 2011, 1:17 AM
I took a peek at the source and this was easier to improve than I thought.
When creating Ext.Lists inside a Carousel, for example, it's sufficient to change the scroll's treshold similarly to this:

carousel_lists.forEach(function(list) {
list.items[0].scroll.threshold = 30;
});

Do so after List creation, because on line 301 of src/widgets/List.js the constructor overwrites the scroll hash.

Bunchofstring
12 Jan 2011, 7:55 AM
@moell, thanks for the info. It sounds like each item in your carousel is a list (which is inherently a vertically scrolling panel). Is that correct? Did your code solve the problem for you? If not, did you have any luck figuring out how to adjust the Carousel swiping threshold?

moell
12 Jan 2011, 10:06 AM
@moell, thanks for the info. It sounds like each item in your carousel is a list (which is inherently a vertically scrolling panel). Is that correct? Did your code solve the problem for you? If not, did you have any luck figuring out how to adjust the Carousel swiping threshold?
Yep, the panels in my carousel are lists.

Setting the threshold as I posted above improved the carousel's behavior. After some tweaking of the magic "30px" value used above, the usability will be far better and swiping can be done with less precision.

I don't think adjusting swiping is necessary once the list has a larger threshold.

zhiivn
13 Jul 2011, 12:22 AM
@moell: Looks like your method didn't work for me.