2017-02-26 55 views
0

我有一個名爲getcoords.py的散景服務器應用程序。我啓動服務器:bokeh serve getcoords.py。我有HoverToolCustomJS回調函數。除此之外,我有一個quadglyphon_change配置爲觸發在服務器端的selected事件。每次點擊quadglyph時,都會執行onTab函數。當我點擊字形時,我想以某種方式與客戶端進行通信並獲取指針座標。這裏是代碼:在散景服務器配置中如何從客戶端瀏覽器獲取x,y座標到服務器

import bokeh 
import bokeh.plotting 

p = bokeh.plotting.figure(plot_height=200,x_range=(0,10),y_range=(0,10)) 
imquad = p.quad(top=[8], bottom=[2], left=[2], right=[8]) 

sourceXY = bokeh.models.ColumnDataSource(data=dict(x = [0], y = [0])) 

callback_hover = bokeh.models.CustomJS(args=dict(sourceXY=sourceXY), code=""" 
    console.log('Coords:'+sourceXY.data['x'] +','+sourceXY.data['y']) 
    sourceXY.data['x'] = [cb_data['geometry'].x]; 
    sourceXY.data['y'] = [cb_data['geometry'].y]; 
    sourceXY.trigger('change'); 
    """) 
def onHover(attr, old, new): 
    print "Hover" 

counter = 0 

def onTab(attr, old, new): 
    global counter 
    print "Tap on quad. Coordinates:",sourceXY.data['x'], sourceXY.data['y'] 
    sourceXY.data['x'], sourceXY.data['y'] = [counter],[counter] 
    counter += 1 
    sourceXY.trigger('data',None,None) 
    # unselecting imquad to keep triggering on_change: 
    new['1d']['indices'] = [] 

imquad.data_source.on_change('selected',onTab) 

hover_tool = bokeh.models.HoverTool(callback=callback_hover) 
tap_tool = bokeh.models.TapTool() 
p.add_tools(tap_tool) 
p.add_tools(hover_tool) 

bokeh.io.curdoc().add_root(p) 

這裏是一個瀏覽器的屏幕截圖顯示JavaScript控制檯日誌。 Coords:0,0 1,1 2,2 3,3 4,4對應於一次點擊四叉字符的時刻,並且這些值從服務器發送到客戶端瀏覽器。 javascript CustomJS代碼首先顯示sourceXY的值,然後用x和y數據座標替換它。當你移動鼠標時,sourceXY正在用這些座標進行更新,只要你不點擊,這些就是在JS控制檯中顯示的。

enter image description here

這裏是在服務器端控制檯的屏幕拍攝。每次四字形點擊時,都會執行onTab(attr,old,new)例程。首先顯示存儲在sourceXY中的值,然後分配一個全局計數器值,每次執行該例程時將增加1。這裏是我希望能夠從客戶端讀取sourceXY的價值,但我一直無法做到。

wirelessprv-XX-XXX-XXX-XXX:GetCoords pablo$ bokeh serve getcoords.py 
2017-02-25 21:26:00,899 Starting Bokeh server version 0.12.4 
2017-02-25 21:26:00,911 Starting Bokeh server on port 5006 with applications at paths ['/getcoords'] 
2017-02-25 21:26:00,912 Starting Bokeh server with process id: 36965 
2017-02-25 21:26:01,267 200 GET /getcoords (::1) 85.38ms 
2017-02-25 21:26:01,785 WebSocket connection opened 
2017-02-25 21:26:01,788 ServerConnection created 
Tap on quad. Coordinates: [0] [0] 
Tap on quad. Coordinates: [0] [0] 
Tap on quad. Coordinates: [1] [1] 
Tap on quad. Coordinates: [2] [2] 
Tap on quad. Coordinates: [3] [3] 

我曾嘗試是創建一個在CustomJS客戶端更新一個名爲ColumnDataSource sourceXY。然後,當我點擊標誌符時,服務器端的python代碼將讀取尚未更新的服務器端ColumnDataSource的值,然後修改它以測試服務器到客戶端的通信。這部分工作很好,因爲客戶端能夠讀取從服務器發送的x和y。 我想知道是否有辦法從客戶端到服務器端獲取保存在ColumnDataSource(或點擊發生時的座標本身)中的座標。 任何建議,意見,歡迎。謝謝。

回答

0

我找到了一種方法來將座標值從服務器更新到客戶端。我發現該解決方案更新TextInput模型,其中CustomJS來自HoverTool的javascript回調。我會把我的解決方案放在這裏,以防有人從中受益。

import bokeh 
import bokeh.plotting 

p = bokeh.plotting.figure(plot_height=200,x_range=(0,10),y_range=(0,10)) 
imquad = p.quad(top=[8], bottom=[2], left=[2], right=[8]) 

textxy = bokeh.models.TextInput(title="xy val", value='') 

callback_hover = bokeh.models.CustomJS(args=dict(textxy=textxy), code=""" 
    textxy.value = cb_data['geometry'].x + ',' + cb_data['geometry'].y; 
    console.log(textxy.value); 
    """) 

def onTab(attr, old, new): 
    print "tap:",textxy.value 
    # unselecting imquad to keep triggering on_change: 
    new['1d']['indices'] = [] 

imquad.data_source.on_change('selected',onTab) 

hover_tool = bokeh.models.HoverTool(callback=callback_hover) 
tap_tool = bokeh.models.TapTool() 
p.add_tools(tap_tool) 
p.add_tools(hover_tool) 

bokeh.io.curdoc().add_root(p) 

控制檯的輸出顯示正確的座標每次我在quadglyph挖掘時間:

wirelessprv-XXX-XXX-XXX-XXX:GetCoords pablo$ bokeh serve getcoords.py 
2017-02-26 18:09:44,189 Starting Bokeh server version 0.12.4 
2017-02-26 18:09:44,199 Starting Bokeh server on port 5006 with applications at paths ['/getcoords'] 
2017-02-26 18:09:44,199 Starting Bokeh server with process id: 42626 
2017-02-26 18:09:46,841 200 GET /getcoords (::1) 68.90ms 
2017-02-26 18:09:47,282 WebSocket connection opened 
2017-02-26 18:09:47,283 ServerConnection created 
tap: 3.3528435714104643,3.925695345068399 
tap: 5.715666419702689,6.670813794893257 
tap: 6.649805685306592,3.341627589786514 
tap: 7.913641162300107,2.407119181335499 
tap: 7.913641162300107,7.66372897887246 
相關問題