Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Touch support for selection plugin #505

Closed
dnschnur opened this Issue · 12 comments

5 participants

@dnschnur
Owner

Original author: james.b...@gmail.com (October 11, 2010 00:21:15)

Add touch support to the selection plugin (specifically for iPad support).

Patch attached allows you to select an area on a plot on an iPad using your finger in a similar manner to the way selection is currently done with the mouse. This has been tested on Mobile Safari on iPad 3.2 and iPhone 4.0. This works great for single finger touch and drag, however I'm not sure how to handle multiple touches appropriately.

Original issue: http://code.google.com/p/flot/issues/detail?id=426

@dnschnur
Owner

From james.b...@gmail.com on October 11, 2010 00:23:12
Attaching patch I forgot to attach with issue sorry.

@dnschnur
Owner

From james.b...@gmail.com on October 21, 2010 20:16:16
Updated patch as the 'return false' on the onMouseDown event handler was preventing mouseover events from firing when touching a point on a plot on a touch screen device. This broke the hover feature on touch screen devices.

The return false was originally introduced to prevent the onMouseDown event handler being called twice per event (iPad/iPhone fires 'touchstart' then 'mousedown' events on every touch). Instead we disable the mousedown event if we catch a touchstart event; inspired by PPK's post on touch events (http://www.quirksmode.org/blog/archives/2010/02/do_we_need_touc.html).

@dnschnur
Owner

From olau%iol...@gtempaccount.com on December 14, 2010 22:47:16
Okaydokey. It's nice you're working on this!

I just looked through your patch. Seems okay, but I get the feeling it might have to be extended at some point so I think it would be less confusing if the mouse paths and touch paths could be better separated with some refactoring.

@dnschnur
Owner

From mostly.i...@gmail.com on March 10, 2011 06:47:35
Question:
The Selection is working great now. Thanks. But what about the zoom feature?
When I have it enabled, it zooms in and right away out again.
But only on an IOS device. Works fine on desktop browsers.
I found out that in mobile safari, after the touchstart, move and end events are done, another onclick event is fired. Which is why the graph zooms out again.

Is there any way to supress this subsequent onclick when using a touch device?
All I tried broke the normal onclick, too. Which of course you need to highlight data points in the graph.

@dnschnur
Owner

From joostvan...@gmail.com on October 22, 2011 11:31:41
Excellent suggestion, to include touch events in the system; saved me a lot of time;

However, I found that the default action of a touch-enabled browser is zooming/panning etc. Which leads to undesired results and may be annoying. So I would like to suggest the following:

    function onMouseMove(e) {
        if (selection.active) {
            updateSelection(e);

            plot.getPlaceholder().trigger("plotselecting", [ getSelection() ]);
            // prevent the default action
            e.preventDefault();
        }
    }
@dnschnur
Owner

From markos on November 25, 2011 15:57:42
I submitted a patch (pull request) in git since I didn't find this code (or any working) in code base.

@dnschnur
Owner

From pkpsil...@gmail.com on February 01, 2012 20:41:31
I happened to need this patch for some android work, so I applied the current patch (which didn't apply cleanly and needed some work by hand) against flot 0.7. However, I altered the prevention of the default in onMouseMove so it only prevents the default action if there it was the result of a touch event. This is just a drive by patching, so hopefully it is sufficient. Thanks.

@dnschnur
Owner

From ru...@rubensayshi.com on August 23, 2012 16:06:20
none of the patches allow me to select anything with galaxy s2, anyone had any luck?

@mgonto

So, which is the patch to apply? I need this

@naknak

Pull request #1206 submitted...

@dnschnur dnschnur was assigned
@dnschnur dnschnur closed this
@jinithjoseph

How do I use the patch on a javascript file ? will it be picked up automatically ? Will I need to include it in the html 5 for being picked up ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.