Add 'touch' handlers for panning on mobile devices

[etpinard]

https://developer.mozilla.org/en-US/docs/Web/API/Touch_events

why not?

[kusan-thana]

Is there a way to add the compatibility to our scripts? Or how can I help to include this feature into the library?

[rreusser]

Pulled this off successfully once (requires mobile device for full effect, obv). Here's the code. Unfortunately it's not very isolated into something reusable.

Useful utilities:

• touch-pinch: Excellent, just didn't give all the info necessary so not an immediate slam dunk
• mouse-event-offset: if something isn't already in place for cross-browser events.

I won't list them all but long story short, there are good isolated utilities that can hopefully handle as much as possible and straighten out browser kinks, hopefully leaving the rest pretty short.

Bonus features:

• pan
• pinch
• transition from two fingers to one = zoom, then pan
• transition from one finger to two: pan, then zoom
• ability to enable/disable zoom or pan independently

[rreusser]

Although, that said, camera, pan, and zoom (and a couple other trivial variables) look like the only external references, so maybe it's not inconceivable to think about just lifting that code and swapping out some logic.

[kusan-thana]

I tried this:
http://stackoverflow.com/questions/1517924/javascript-mapping-touch-events-to-mouse-events

I thought it would have been nice to have the touch work as the mouse (before implementing new features like pinch, etc.).

But it doesn't seem to work.

Another thing, I can't have relayout work for camera changes.

    var update = {
        title: 'Surface Plot 2',
        scene: {
          camera: {
            eye:{
              x:1,
              y:1,
              z:1
            }
          }
        }
    }
    Plotly.relayout('myDiv', update);

I get the title updated but not the camera, any idea why?

Edit :
got to modify camera position manually like in this exemple: http://codepen.io/etpinard/pen/WxrRoG
calling this code with: document.addEventListener("touchstart", touchHandler, true);

[jdugge]

The Bokeh plotting library supports this, all the tools (pan, zoom, box zoom, box select, lasso select) work really well using touch gestures. If I understand correctly, Bokeh uses the hammer.js library for handling touch events.

[sriver]

Any news/plans on this front? Would really love to manipulate plotly.js graphs in a touch-based cordova app.

[dy]

Used touch-position and touch-pinch in pan-zoom, should say these two cover both mouse and touch interactions neatly.

[martin-braun]

Any updates on this? The touch functionality is not working at me, is someone working on it? We need touch support in our project.

[hy9be]

@etpinard Is this still a part of the roadmap for Plotly 1.x?

[dy]

There are actually ready patches for that mikolalysenko/3d-view-controls#1 and gl-vis/gl-plot3d#6

[dy]

Merged.

[jackparmer]

3d chart touch is working now thanks to @dfcreative 🙇
Any companies out there that want to fund this one for 2d chart touch?
http://plot.ly/products/consulting-and-oem/

[sriver]

This example seems to work also for 2d scattergl plots by adding those modifications to plots->gl2d->camera.js. However, to be useful for more complex cases (mine has a mixture of bars and scatter in the same graph), similar modifications would be needed elsewhere, but there is no camera.js equalent for generic 2d cases. In ideas how to implement this more generally (e.g. without Webgl)?

[drorasaf]

@jackparmer , 2d support is for cartesian as well as webgl? I wonder what's the scope of work.

[g34g34]

Any plan to support pinch-to-zoom in the future?

[malina-kirn]

PR #1804 correctly changed some of plotly's behavior when the device does not have hover capabilities. When the device does not have hover, many interactions normally triggered by mouseover are now triggered by click. As linked earlier in this thread, it's relatively straightforward to intercept touch events and re-emit them as mouse events, here's a working CodePen example (interact with it in your mobile device). This should get you most of the way towards using touch in plotly, though pinch-to-zoom and two-finger scroll don't work.

Note that the has-hover package being used by plotly.js returns true for the Android emulator (and false for an Android device). Consequently, plotly will still listen for mouseover events on the Android emulator. Use a physical Android device to test plotly touch interactions instead of an emulator. This is likely a bug with either the has-hover package or the Android emulator, but I haven't dug in deeply enough to figure out the source of the issue.

[swiperii]

@malina-kirn The CodePen example you provided seems not to work anymore. Maybe related to #1967?

[etpinard]

Closing.

Parts of this tickets were either:

• implemented in Implement touch interactions in 3D subplots #1424 or Enable touch interactions for select/lasso/others #1804
• currently discussed in Mobile interactions wishlist #1858
• or reported in Regression: touch to simulate hover on scatter plots #1967