Return JS coordinates to python

I’m new to javascript, and trying to figure out how to return the coordinates of the drawn rectangle(s) in the script below to python so I can run some operations on those coordinates.

http://bokeh.pydata.org/en/latest/docs/user_guide/interaction.html#callbacks-for-tools

Thanks

Hi Adam,

In the example you’re looking at, the coordinates are grabbed on the line

var geometry = cb_data['geometry'];

If this isn’t what you were looking for let us know a bit more detail.

Best,

Bird

···

On Fri, Aug 14, 2015 at 4:57 PM, Adam Van Etten [email protected] wrote:

I’m new to javascript, and trying to figure out how to return the coordinates of the drawn rectangle(s) in the script below to python so I can run some operations on those coordinates.

http://bokeh.pydata.org/en/latest/docs/user_guide/interaction.html#callbacks-for-tools

Thanks

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/365dba74-d38a-4a31-a96e-7e3a9cc2f3be%40continuum.io.

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

Hi Sarah,

Thanks for the reply. I know that the geometry var stores the coordinates within javascript, though it seems that any callback updates stay within javascript . What I’d like is to be able to store updates to the coordinates in a numpy array. So whenever a new rectangle is created, print those new coordinates to the command line and add a cell to a numpy array.

Cheers,

Adam

···

On Monday, August 17, 2015 at 5:13:02 PM UTC-4, Sarah Bird wrote:

Hi Adam,

In the example you’re looking at, the coordinates are grabbed on the line

var geometry = cb_data['geometry'];

If this isn’t what you were looking for let us know a bit more detail.

Best,

Bird

On Fri, Aug 14, 2015 at 4:57 PM, Adam Van Etten [email protected] wrote:

I’m new to javascript, and trying to figure out how to return the coordinates of the drawn rectangle(s) in the script below to python so I can run some operations on those coordinates.

http://bokeh.pydata.org/en/latest/docs/user_guide/interaction.html#callbacks-for-tools

Thanks

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/365dba74-d38a-4a31-a96e-7e3a9cc2f3be%40continuum.io.

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

The callbacks are javascript callbacks, that operate within a standalone html file.

You could have your callback send the geometry to a server via an http call and then you can do whatever you want with them. Fabio Pliger’s talk at Europython showed this kind of setup in action - https://archive.org/details/EuroPython_2015_sNrRX5zc

Are you trying to work in a notebook or in a server setup. There maybe something you can do in the notebook context that I don’t know about.

Best,

Bird

···

On Tue, Aug 18, 2015 at 12:52 AM, Adam Van Etten [email protected] wrote:

Hi Sarah,

Thanks for the reply. I know that the geometry var stores the coordinates within javascript, though it seems that any callback updates stay within javascript . What I’d like is to be able to store updates to the coordinates in a numpy array. So whenever a new rectangle is created, print those new coordinates to the command line and add a cell to a numpy array.

Cheers,

Adam

On Monday, August 17, 2015 at 5:13:02 PM UTC-4, Sarah Bird wrote:

Hi Adam,

In the example you’re looking at, the coordinates are grabbed on the line

var geometry = cb_data['geometry'];

If this isn’t what you were looking for let us know a bit more detail.

Best,

Bird

On Fri, Aug 14, 2015 at 4:57 PM, Adam Van Etten [email protected] wrote:

I’m new to javascript, and trying to figure out how to return the coordinates of the drawn rectangle(s) in the script below to python so I can run some operations on those coordinates.

http://bokeh.pydata.org/en/latest/docs/user_guide/interaction.html#callbacks-for-tools

Thanks

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/365dba74-d38a-4a31-a96e-7e3a9cc2f3be%40continuum.io.

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

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/6baaf770-e280-48c0-bc48-2bf93132ea5c%40continuum.io.

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

I’m running bokeh server. The example at minute 40 in the video you posted is pretty much what I’d like to do. It’s tough to figure out all that’s going on in the code with just a brief view of it, though. For now I’m also just using a ColumnDataSource, but it looks like an AjaxDataSource might be needed?

Ultimately, my goal is to draw a box or polygon on a plot (in a server), then take the coordinates of that shape and pass them into another python function for further calculation. One complication is making sure the boxes or polygons display (and remain displayed) on the server.

Cheers,

Adam

···

On Tuesday, August 18, 2015 at 4:32:52 AM UTC-4, Sarah Bird wrote:

The callbacks are javascript callbacks, that operate within a standalone html file.

You could have your callback send the geometry to a server via an http call and then you can do whatever you want with them. Fabio Pliger’s talk at Europython showed this kind of setup in action - https://archive.org/details/EuroPython_2015_sNrRX5zc

Are you trying to work in a notebook or in a server setup. There maybe something you can do in the notebook context that I don’t know about.

Best,

Bird

On Tue, Aug 18, 2015 at 12:52 AM, Adam Van Etten [email protected] wrote:

Hi Sarah,

Thanks for the reply. I know that the geometry var stores the coordinates within javascript, though it seems that any callback updates stay within javascript . What I’d like is to be able to store updates to the coordinates in a numpy array. So whenever a new rectangle is created, print those new coordinates to the command line and add a cell to a numpy array.

Cheers,

Adam

On Monday, August 17, 2015 at 5:13:02 PM UTC-4, Sarah Bird wrote:

Hi Adam,

In the example you’re looking at, the coordinates are grabbed on the line

var geometry = cb_data['geometry'];

If this isn’t what you were looking for let us know a bit more detail.

Best,

Bird

On Fri, Aug 14, 2015 at 4:57 PM, Adam Van Etten [email protected] wrote:

I’m new to javascript, and trying to figure out how to return the coordinates of the drawn rectangle(s) in the script below to python so I can run some operations on those coordinates.

http://bokeh.pydata.org/en/latest/docs/user_guide/interaction.html#callbacks-for-tools

Thanks

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/365dba74-d38a-4a31-a96e-7e3a9cc2f3be%40continuum.io.

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

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/6baaf770-e280-48c0-bc48-2bf93132ea5c%40continuum.io.

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

Hi Adam,

The example showed at minute 40 is not using bokeh-server at all. It’s based on a combination of AjaxDataSource and Callback as an alternative for a bokeh-server app. The demo code is hosted here at out bokeh-demos repo

···

We have a similar example of interactions like this (range selection, not data downsampling, but it should show most of what you need) at our main repo examples.

On Tue, Aug 18, 2015 at 9:21 PM, Adam Van Etten [email protected] wrote:

I’m running bokeh server. The example at minute 40 in the video you posted is pretty much what I’d like to do. It’s tough to figure out all that’s going on in the code with just a brief view of it, though. For now I’m also just using a ColumnDataSource, but it looks like an AjaxDataSource might be needed?

Ultimately, my goal is to draw a box or polygon on a plot (in a server), then take the coordinates of that shape and pass them into another python function for further calculation. One complication is making sure the boxes or polygons display (and remain displayed) on the server.

Do you already have some code trying to do this? It’s definitely easier to understand what’s happening with some code… My first impression from what you say is that you should already have everything you need on both functions as (i guess) they are already being used on some DataSource passed to your plot…

Cheers

Fabio

Cheers,

Adam

On Tuesday, August 18, 2015 at 4:32:52 AM UTC-4, Sarah Bird wrote:

The callbacks are javascript callbacks, that operate within a standalone html file.

You could have your callback send the geometry to a server via an http call and then you can do whatever you want with them. Fabio Pliger’s talk at Europython showed this kind of setup in action - https://archive.org/details/EuroPython_2015_sNrRX5zc

Are you trying to work in a notebook or in a server setup. There maybe something you can do in the notebook context that I don’t know about.

Best,

Bird

On Tue, Aug 18, 2015 at 12:52 AM, Adam Van Etten [email protected] wrote:

Hi Sarah,

Thanks for the reply. I know that the geometry var stores the coordinates within javascript, though it seems that any callback updates stay within javascript . What I’d like is to be able to store updates to the coordinates in a numpy array. So whenever a new rectangle is created, print those new coordinates to the command line and add a cell to a numpy array.

Cheers,

Adam

On Monday, August 17, 2015 at 5:13:02 PM UTC-4, Sarah Bird wrote:

Hi Adam,

In the example you’re looking at, the coordinates are grabbed on the line

var geometry = cb_data['geometry'];

If this isn’t what you were looking for let us know a bit more detail.

Best,

Bird

On Fri, Aug 14, 2015 at 4:57 PM, Adam Van Etten [email protected] wrote:

I’m new to javascript, and trying to figure out how to return the coordinates of the drawn rectangle(s) in the script below to python so I can run some operations on those coordinates.

http://bokeh.pydata.org/en/latest/docs/user_guide/interaction.html#callbacks-for-tools

Thanks

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/365dba74-d38a-4a31-a96e-7e3a9cc2f3be%40continuum.io.

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

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/6baaf770-e280-48c0-bc48-2bf93132ea5c%40continuum.io.

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

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/271d5ec0-d6a1-4b34-b43f-7ba73cc47d37%40continuum.io.

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

Fabio Pliger

Senior Software Engineer, Bokeh

Hi Fabio,

Thanks for the tip. Between your demo and the code at Interaction — Bokeh 3.3.2 Documentation I was able to get most of the way to what I wanted (see code below). Ultimately, I’d like to be able to do something like http://www.the-di-lab.com/polygon/. Right now I’m not sure how to create polygons on an empty map in Bokeh, since the PolySelectTool doesn’t have callbacks enabled. Any idea about how to incorporate polygons as well? Thanks!

···

-- coding: utf-8 --

“”"
Created on Mon Jul 19 11:54:57 2015

@author: avanetten

“”"
import os
from flask import Flask, json, Response
import pickle
from bokeh.server.crossdomain import crossdomain
from bokeh.models.sources import (ColumnDataSource, AjaxDataSource)
from bokeh.models import (Callback, ColumnDataSource, BoxSelectTool, Range1d,
Rect, Patch, WheelZoomTool, PanTool, PolySelectTool,
Circle, ResetTool, LassoSelectTool, HBox, VBoxForm,
GMapPlot, GMapOptions, LinearAxis, Grid,
Paragraph, PreviewSaveTool)
from bokeh.plotting import figure, show, output_server, output_file, vplot
import bokeh.plotting as bk
import numpy as np

cd to appopriate directory

gmap_background = True
plot_width = 800
plot_height = int(0.75*plot_width)
text = ‘’

define ajax data source

source = AjaxDataSource(data_url=‘http://localhost:5000/data’, polling_interval=1000)

attempt to print coords to screen…

#source_t = AjaxDataSource(data_url=‘http://localhost:5000/text’, polling_interval=1000)

#################

Box Select

rect_data = dict(x=, y=, width=, height=)
source_rect_sel = ColumnDataSource(data=rect_data)

rect_callback = Callback(args=dict(source=source_rect_sel), code=“”"
// get data source from Callback args
var data = source.get(‘data’);

/// get BoxSelectTool dimensions from cb_data parameter of Callback
var geometry = cb_data['geometry'];


/// calculate Rect attributes
var width = geometry['x1'] - geometry['x0'];
var height = geometry['y1'] - geometry['y0'];
var x = geometry['x0'] + width/2;
var y = geometry['y0'] + height/2;

/// replace values
data['x'] = [x];
data['y'] = [y];
data['width'] = [width];
data['height'] = [height];

// update ajax
var url = "http://127.0.0.1:5000/subsample/"+data.x+"/"+data.y+"/"+data.width+"/"+data.height;
xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", url, true);
xmlhttp.send();

// trigger update of data source
source.trigger('change');

“”")

box_select = BoxSelectTool(callback=rect_callback)
#################

#################

Poly Select (no callback feature yet)

#source_poly_sel = ColumnDataSource(data=dict(x=, y=, width=, height=))

#poly_callback = Callback(args=dict(source=source_poly_sel), code=“”"

// get data source from Callback args

var data = source.get(‘data’);

/// get BoxSelectTool dimensions from cb_data parameter of Callback

var geometry = cb_data[‘geometry’];

/// calculate poly attributes

var x = geometry[‘x’];

var y = geometry[‘y’];

/// replace values

data[‘x’] = ;

data[‘y’] = [y];

// trigger update of data source

source.trigger(‘change’);

#“”")

#poly_select = PolySelectTool(callback=poly_callback)
#################

##################
if not gmap_background:
## Figure
p = bk.figure(plot_width=plot_width,
plot_height=plot_height,
tools=[box_select, WheelZoomTool(), PanTool(), ResetTool(),
LassoSelectTool()],
title=“Select Below”,
x_range=(0,1),#Range1d(start=0.0, end=1.0),
y_range=(0,1))#Range1d(start=0.0, end=1.0))

else:
# gmap
mapzoom = 12
x_mid, y_mid = -77.046998, 38.888214 # Washington DC
map_options = GMapOptions(lat=y_mid, lng=x_mid, zoom=mapzoom)

x_range = Range1d()
y_range = Range1d()          
p = GMapPlot(x_range=x_range, y_range=y_range,
                map_options=map_options,
                plot_height=plot_height, plot_width=plot_width,
                title='Select Below')
p.map_options.map_type='hybrid'
# !! Reset Tool goes to lat, lon = 0,0 !!
p.add_tools(box_select, WheelZoomTool(), PanTool(), PreviewSaveTool())
                #,#PolySelectTool(), LassoSelectTool(), ResetTool())  

# add axes          
xaxis = LinearAxis(axis_label='Longitude')
p.add_layout(xaxis, 'below')
yaxis = LinearAxis(axis_label='Latitude')
p.add_layout(yaxis, 'left')

# add grid
xgrid = Grid(plot=p, dimension=0, ticker=xaxis.ticker, \
        grid_line_dash="dashed", grid_line_color="gray")
ygrid = Grid(plot=p, dimension=1, ticker=yaxis.ticker, \
        grid_line_dash="dashed", grid_line_color="gray")
p.renderers.extend([xgrid, ygrid])  

define glyphs

rect = Rect(x=‘x’,
y=‘y’,
width=‘width’,
height=‘height’,
fill_alpha=0.3,
fill_color=‘#009933’,
line_color=‘black’)

poly = Patch(x=‘x’,
y=‘y’,
fill_alpha=0.3,
fill_color=‘#009933’)

add glyphs to plot

p.add_glyph(source_rect_sel, rect, selection_glyph=rect,
nonselection_glyph=rect)

#p.add_glyph(source_poly_sel, poly, selection_glyph=poly,

nonselection_glyph=poly)

This resets the plot, not sure why

from bokeh.models.widgets import Button
button = Button(label=“Reset”, type=“success”)
#############

paragraph = Paragraph(text="Coordinates: ")

create plot

vbox = VBoxForm(children=[button], width=50)
vbox2 = VBoxForm(children=[p, paragraph])
hbox = HBox(children=[vbox, vbox2])

bk.output_file(“remotedata.html”)
bk.save(obj=hbox)
bk.show(hbox
##############

app = Flask(name)

@app.route(‘/subsample////’, methods=[‘GET’, ‘OPTIONS’])
@crossdomain(origin=“*”, methods=[‘GET’, ‘POST’], headers=None)
def subsample(x, y, width, height):
global rect_data, text, paragraph
rect_data = dict(x=float(x), y=float(y),
width=float(width), height=float(height))
# define text for title
text = ‘’
for key in rect_data:
title_add = key + ': ’ + str(round(rect_data[key], 2)) + ’ ’
text = text + title_add
paragraph.text = text

print "rect_data", rect_data
#print "title", text

# save to file
pickle.dump(rect_data, open('coords.pkl', 'wb'))
return json.jsonify(rect_data)

@app.route(‘/data’, methods=[‘GET’, ‘OPTIONS’])
@crossdomain(origin=“*”, methods=[‘GET’, ‘POST’], headers=None)
def get_data():
return json.jsonify(rect_data)

try to update text in plot

@app.route(‘/text’, methods=[‘GET’, ‘OPTIONS’])

@crossdomain(origin=“*”, methods=[‘GET’, ‘POST’], headers=None)

def get_text():

print “text”

return json.jsonify(text)

if name == ‘main’:

``

app.run(debug=True)

``

On Thursday, August 20, 2015 at 8:34:44 AM UTC-4, Fabio Pliger wrote:

Hi Adam,

The example showed at minute 40 is not using bokeh-server at all. It’s based on a combination of AjaxDataSource and Callback as an alternative for a bokeh-server app. The demo code is hosted here at out bokeh-demos repo

We have a similar example of interactions like this (range selection, not data downsampling, but it should show most of what you need) at our main repo examples.

On Tue, Aug 18, 2015 at 9:21 PM, Adam Van Etten [email protected] wrote:

I’m running bokeh server. The example at minute 40 in the video you posted is pretty much what I’d like to do. It’s tough to figure out all that’s going on in the code with just a brief view of it, though. For now I’m also just using a ColumnDataSource, but it looks like an AjaxDataSource might be needed?

Ultimately, my goal is to draw a box or polygon on a plot (in a server), then take the coordinates of that shape and pass them into another python function for further calculation. One complication is making sure the boxes or polygons display (and remain displayed) on the server.

Do you already have some code trying to do this? It’s definitely easier to understand what’s happening with some code… My first impression from what you say is that you should already have everything you need on both functions as (i guess) they are already being used on some DataSource passed to your plot…

Cheers

Fabio

Cheers,

Adam

On Tuesday, August 18, 2015 at 4:32:52 AM UTC-4, Sarah Bird wrote:

The callbacks are javascript callbacks, that operate within a standalone html file.

You could have your callback send the geometry to a server via an http call and then you can do whatever you want with them. Fabio Pliger’s talk at Europython showed this kind of setup in action - https://archive.org/details/EuroPython_2015_sNrRX5zc

Are you trying to work in a notebook or in a server setup. There maybe something you can do in the notebook context that I don’t know about.

Best,

Bird

On Tue, Aug 18, 2015 at 12:52 AM, Adam Van Etten [email protected] wrote:

Hi Sarah,

Thanks for the reply. I know that the geometry var stores the coordinates within javascript, though it seems that any callback updates stay within javascript . What I’d like is to be able to store updates to the coordinates in a numpy array. So whenever a new rectangle is created, print those new coordinates to the command line and add a cell to a numpy array.

Cheers,

Adam

On Monday, August 17, 2015 at 5:13:02 PM UTC-4, Sarah Bird wrote:

Hi Adam,

In the example you’re looking at, the coordinates are grabbed on the line

var geometry = cb_data['geometry'];

If this isn’t what you were looking for let us know a bit more detail.

Best,

Bird

On Fri, Aug 14, 2015 at 4:57 PM, Adam Van Etten [email protected] wrote:

I’m new to javascript, and trying to figure out how to return the coordinates of the drawn rectangle(s) in the script below to python so I can run some operations on those coordinates.

http://bokeh.pydata.org/en/latest/docs/user_guide/interaction.html#callbacks-for-tools

Thanks

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/365dba74-d38a-4a31-a96e-7e3a9cc2f3be%40continuum.io.

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

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/6baaf770-e280-48c0-bc48-2bf93132ea5c%40continuum.io.

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

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/271d5ec0-d6a1-4b34-b43f-7ba73cc47d37%40continuum.io.

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


Fabio Pliger

Senior Software Engineer, Bokeh