tap events not registering during mousemove events

Hi,

I’m working on an interactive animation running on the bokeh server. Glyphs move around the figure and users are instructed to click on these while in transit. I noticed that tap events only registered back on the server when the cursor was stationary. I figured this was due to some kind of bottleneck sending events back to the python environment from the client. Thus, I modified the CustomJS example found here to see if these tap events registered on the client side (see below). Does not seem to make a difference—if you slowly move the mouse around the figure and click (or double-click) you will not see tap (or double-tap) events register. The mouse must be stationary it seems.

Is there always going to be a trade off b/w monitoring mouse position and click position under these conditions? Is it possible to glean tap events while moving the mouse?

Thanks,

Kevin DeSimone

Here’s the modified example …

import numpy as np
from bokeh.io import show, output_file
from bokeh.plotting import figure
from bokeh import events
from bokeh.models import CustomJS, Div, Button
from bokeh.layouts import column, row

def display_event(div, attributes=, style = ‘float:left;clear:left;font_size=0.5pt’):
“Build a suitable CustomJS to display the current event in the div model.”
return CustomJS(args=dict(div=div), code="""
var attrs = %s; var args = ;
for (var i=0; i<attrs.length; i++ ) {
args.push(attrs[i] + ‘=’ + Number(cb_obj[attrs[i]]).toFixed(2));
}
var line = “” + cb_obj.event_name + “(” + args.join(", “) + “)\n”;
var text = div.text.concat(line);
var lines = text.split(”\n")
if ( lines.length > 35 ) { lines.shift(); }
div.text = lines.join("\n");
“”" % (attributes, style))

x = np.random.random(size=4000) * 100
y = np.random.random(size=4000) * 100
radii = np.random.random(size=4000) * 1.5
colors = ["#%02x%02x%02x" % (int®, int(g), 150) for r, g in zip(50+2x, 30+2y)]

p = figure(tools="")
p.scatter(x, y, radius=np.random.random(size=4000) * 1.5,
fill_color=colors, fill_alpha=0.6, line_color=None)

div = Div(width=1000)
button = Button(label=“Button”, button_type=“success”)
layout = column(button, row(p, div))

Events with no attributes

button.js_on_event(events.ButtonClick, display_event(div)) # Button click
p.js_on_event(events.LODStart, display_event(div)) # Start of LOD display
p.js_on_event(events.LODEnd, display_event(div)) # End of LOD display

Events with attributes

point_attributes = [‘x’,‘y’,‘sx’,‘sy’] # Point events
wheel_attributes = point_attributes+[‘delta’] # Mouse wheel event
pan_attributes = point_attributes + [‘delta_x’, ‘delta_y’] # Pan event
pinch_attributes = point_attributes + [‘scale’] # Pinch event

point_events = [events.Tap, events.DoubleTap]

for event in point_events:
p.js_on_event(event,display_event(div, attributes=point_attributes))

output_file(“js_events.html”, title=“JS Events Example”)
show(layout)

``

It's possible this is an issue with the Hammer.js, the underlying UI events library we use. Or possibly with our usage of it. In any case I would expect taps to always register so I'd suggest a bug report on GitHub.

Thanks,

Bryan

···

On Aug 28, 2017, at 10:59, [email protected] wrote:

Hi,

I'm working on an interactive animation running on the bokeh server. Glyphs move around the figure and users are instructed to click on these while in transit. I noticed that tap events only registered back on the server when the cursor was stationary. I figured this was due to some kind of bottleneck sending events back to the python environment from the client. Thus, I modified the CustomJS example found here to see if these tap events registered on the client side (see below). Does not seem to make a difference—if you slowly move the mouse around the figure and click (or double-click) you will not see tap (or double-tap) events register. The mouse must be stationary it seems.

Is there always going to be a trade off b/w monitoring mouse position and click position under these conditions? Is it possible to glean tap events while moving the mouse?

Thanks,
Kevin DeSimone

Here's the modified example ...

import numpy as np
from bokeh.io import show, output_file
from bokeh.plotting import figure
from bokeh import events
from bokeh.models import CustomJS, Div, Button
from bokeh.layouts import column, row

def display_event(div, attributes=, style = 'float:left;clear:left;font_size=0.5pt'):
    "Build a suitable CustomJS to display the current event in the div model."
    return CustomJS(args=dict(div=div), code="""
        var attrs = %s; var args = ;
        for (var i=0; i<attrs.length; i++ ) {
            args.push(attrs[i] + '=' + Number(cb_obj[attrs[i]]).toFixed(2));
        }
        var line = "<span style=%r><b>" + cb_obj.event_name + "</b>(" + args.join(", ") + ")</span>\\n";
        var text = div.text.concat(line);
        var lines = text.split("\\n")
        if ( lines.length > 35 ) { lines.shift(); }
        div.text = lines.join("\\n");
    """ % (attributes, style))

x = np.random.random(size=4000) * 100
y = np.random.random(size=4000) * 100
radii = np.random.random(size=4000) * 1.5
colors = ["#%02x%02x%02x" % (int(r), int(g), 150) for r, g in zip(50+2*x, 30+2*y)]

p = figure(tools="")
p.scatter(x, y, radius=np.random.random(size=4000) * 1.5,
          fill_color=colors, fill_alpha=0.6, line_color=None)

div = Div(width=1000)
button = Button(label="Button", button_type="success")
layout = column(button, row(p, div))

## Events with no attributes
button.js_on_event(events.ButtonClick, display_event(div)) # Button click
p.js_on_event(events.LODStart, display_event(div)) # Start of LOD display
p.js_on_event(events.LODEnd, display_event(div)) # End of LOD display

## Events with attributes
point_attributes = ['x','y','sx','sy'] # Point events
wheel_attributes = point_attributes+['delta'] # Mouse wheel event
pan_attributes = point_attributes + ['delta_x', 'delta_y'] # Pan event
pinch_attributes = point_attributes + ['scale'] # Pinch event

point_events = [events.Tap, events.DoubleTap]

for event in point_events:
    p.js_on_event(event,display_event(div, attributes=point_attributes))

output_file("js_events.html", title="JS Events Example")
show(layout)

--
You received this message because you are subscribed to the Google Groups "Bokeh Discussion - Public" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].
To post to this group, send email to [email protected].
To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/e3cad669-508c-4f76-949b-042eaa1f7233%40continuum.io.
For more options, visit https://groups.google.com/a/continuum.io/d/optout.

OK will do. Thanks, Bryan.

···

On Monday, August 28, 2017 at 12:08:03 PM UTC-4, Bryan Van de ven wrote:

It’s possible this is an issue with the Hammer.js, the underlying UI events library we use. Or possibly with our usage of it. In any case I would expect taps to always register so I’d suggest a bug report on GitHub.

Thanks,

Bryan

On Aug 28, 2017, at 10:59, [email protected] wrote:

Hi,

I’m working on an interactive animation running on the bokeh server. Glyphs move around the figure and users are instructed to click on these while in transit. I noticed that tap events only registered back on the server when the cursor was stationary. I figured this was due to some kind of bottleneck sending events back to the python environment from the client. Thus, I modified the CustomJS example found here to see if these tap events registered on the client side (see below). Does not seem to make a difference—if you slowly move the mouse around the figure and click (or double-click) you will not see tap (or double-tap) events register. The mouse must be stationary it seems.

Is there always going to be a trade off b/w monitoring mouse position and click position under these conditions? Is it possible to glean tap events while moving the mouse?

Thanks,

Kevin DeSimone

Here’s the modified example …

import numpy as np

from bokeh.io import show, output_file

from bokeh.plotting import figure

from bokeh import events

from bokeh.models import CustomJS, Div, Button

from bokeh.layouts import column, row

def display_event(div, attributes=, style = ‘float:left;clear:left;font_size=0.5pt’):

"Build a suitable CustomJS to display the current event in the div model."
return CustomJS(args=dict(div=div), code="""
    var attrs = %s; var args = [];
    for (var i=0; i<attrs.length; i++ ) {
        args.push(attrs[i] + '=' + Number(cb_obj[attrs[i]]).toFixed(2));
    }
    var line = "<span style=%r><b>" + cb_obj.event_name + "</b>(" + args.join(", ") + ")</span>\\n";
    var text = div.text.concat(line);
    var lines = text.split("\\n")
    if ( lines.length > 35 ) { lines.shift(); }
    div.text = lines.join("\\n");
""" % (attributes, style))

x = np.random.random(size=4000) * 100

y = np.random.random(size=4000) * 100

radii = np.random.random(size=4000) * 1.5

colors = ["#%02x%02x%02x" % (int®, int(g), 150) for r, g in zip(50+2x, 30+2y)]

p = figure(tools="")

p.scatter(x, y, radius=np.random.random(size=4000) * 1.5,

      fill_color=colors, fill_alpha=0.6, line_color=None)

div = Div(width=1000)

button = Button(label=“Button”, button_type=“success”)

layout = column(button, row(p, div))

Events with no attributes

button.js_on_event(events.ButtonClick, display_event(div)) # Button click

p.js_on_event(events.LODStart, display_event(div)) # Start of LOD display

p.js_on_event(events.LODEnd, display_event(div)) # End of LOD display

Events with attributes

point_attributes = [‘x’,‘y’,‘sx’,‘sy’] # Point events

wheel_attributes = point_attributes+[‘delta’] # Mouse wheel event

pan_attributes = point_attributes + [‘delta_x’, ‘delta_y’] # Pan event

pinch_attributes = point_attributes + [‘scale’] # Pinch event

point_events = [events.Tap, events.DoubleTap]

for event in point_events:

p.js_on_event(event,display_event(div, attributes=point_attributes))

output_file(“js_events.html”, title=“JS Events Example”)

show(layout)


You received this message because you are subscribed to the Google Groups “Bokeh Discussion - Public” group.

To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].

To post to this group, send email to [email protected].

To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/e3cad669-508c-4f76-949b-042eaa1f7233%40continuum.io.

For more options, visit https://groups.google.com/a/continuum.io/d/optout.

···

On Monday, August 28, 2017 at 12:08:03 PM UTC-4, Bryan Van de ven wrote:

It’s possible this is an issue with the Hammer.js, the underlying UI events library we use. Or possibly with our usage of it. In any case I would expect taps to always register so I’d suggest a bug report on GitHub.

Thanks,

Bryan

On Aug 28, 2017, at 10:59, [email protected] wrote:

Hi,

I’m working on an interactive animation running on the bokeh server. Glyphs move around the figure and users are instructed to click on these while in transit. I noticed that tap events only registered back on the server when the cursor was stationary. I figured this was due to some kind of bottleneck sending events back to the python environment from the client. Thus, I modified the CustomJS example found here to see if these tap events registered on the client side (see below). Does not seem to make a difference—if you slowly move the mouse around the figure and click (or double-click) you will not see tap (or double-tap) events register. The mouse must be stationary it seems.

Is there always going to be a trade off b/w monitoring mouse position and click position under these conditions? Is it possible to glean tap events while moving the mouse?

Thanks,

Kevin DeSimone

Here’s the modified example …

import numpy as np

from bokeh.io import show, output_file

from bokeh.plotting import figure

from bokeh import events

from bokeh.models import CustomJS, Div, Button

from bokeh.layouts import column, row

def display_event(div, attributes=, style = ‘float:left;clear:left;font_size=0.5pt’):

"Build a suitable CustomJS to display the current event in the div model."
return CustomJS(args=dict(div=div), code="""
    var attrs = %s; var args = [];
    for (var i=0; i<attrs.length; i++ ) {
        args.push(attrs[i] + '=' + Number(cb_obj[attrs[i]]).toFixed(2));
    }
    var line = "<span style=%r><b>" + cb_obj.event_name + "</b>(" + args.join(", ") + ")</span>\\n";
    var text = div.text.concat(line);
    var lines = text.split("\\n")
    if ( lines.length > 35 ) { lines.shift(); }
    div.text = lines.join("\\n");
""" % (attributes, style))

x = np.random.random(size=4000) * 100

y = np.random.random(size=4000) * 100

radii = np.random.random(size=4000) * 1.5

colors = ["#%02x%02x%02x" % (int®, int(g), 150) for r, g in zip(50+2x, 30+2y)]

p = figure(tools="")

p.scatter(x, y, radius=np.random.random(size=4000) * 1.5,

      fill_color=colors, fill_alpha=0.6, line_color=None)

div = Div(width=1000)

button = Button(label=“Button”, button_type=“success”)

layout = column(button, row(p, div))

Events with no attributes

button.js_on_event(events.ButtonClick, display_event(div)) # Button click

p.js_on_event(events.LODStart, display_event(div)) # Start of LOD display

p.js_on_event(events.LODEnd, display_event(div)) # End of LOD display

Events with attributes

point_attributes = [‘x’,‘y’,‘sx’,‘sy’] # Point events

wheel_attributes = point_attributes+[‘delta’] # Mouse wheel event

pan_attributes = point_attributes + [‘delta_x’, ‘delta_y’] # Pan event

pinch_attributes = point_attributes + [‘scale’] # Pinch event

point_events = [events.Tap, events.DoubleTap]

for event in point_events:

p.js_on_event(event,display_event(div, attributes=point_attributes))

output_file(“js_events.html”, title=“JS Events Example”)

show(layout)


You received this message because you are subscribed to the Google Groups “Bokeh Discussion - Public” group.

To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].

To post to this group, send email to [email protected].

To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/e3cad669-508c-4f76-949b-042eaa1f7233%40continuum.io.

For more options, visit https://groups.google.com/a/continuum.io/d/optout.