2016-05-02 17 views
1

私は、スライダの助けを借りて、大量の科学データをシームレスに伝達しようとしています。Bokeh Sliderで画像をスライド

私はBokehから始まり、javascriptにはほとんど知らないです。私は、2つの画像をスライドするための最初のアプローチを試みましたが、画像をリフレッシュすることはできません。

私のフォルダに1.pngと2.pngがあるとします。

from bokeh.io import vform 
from bokeh.models import CustomJS, ColumnDataSource, Slider 
from bokeh.plotting import Figure, output_file, show 

output_file('image.html') 

source = ColumnDataSource(data=dict(url=['1.png'])) 

p = Figure(x_range=(0,1), y_range=(0,1)) 

callbackimg = CustomJS(args=dict(source=source), code=""" 
    var data = source.get('data'); 
    var f = cb_obj.get('value') 
    old = data['url'][0] 
    data['url'][0]= old.replace("1","f") 
    source.trigger('change'); 
""") 

p.image_url('url',source=source, x=0, y=1,w=1,h=1) 
slider = Slider(start=1, end=2, value=1, step=1, title="image number",  callback=callbackimg) 

layout = vform(slider, p) 
show(layout) 

私はスライダーと working with images in bokehためBokeh Widget Docから例を適応。

私の考えでは、スライダがcallbackimgスニペットを使用して、URLを含むソース、つまり読み込むイメージの名前を変更するという考えがあります。 私は、今のところ、ソース内の文字列への簡単なアクセスと、スライダの現在の値による置換(スライダが1から2になるので、1.pngから2.pngにジャンプする必要がある)トリックを行う必要があります。

ただし、何も変更されていません。私はJavascriptスニペットで何か間違っていると思う。任意のフィードバック

EDITため

ありがとう:私は@bigreddotの提案に応じてコードを編集しますが、位置にスライドするとき、今のスライダーは、単に空の図を示して「2」。 EDIT2:

答えて

1

下の私の答えで、問題を解決し、問題がこれである:

url = data['url'][0] 
url.replace("1","f") 

replace方法は、(あなたはすぐに捨てる)新しい文字列を返すので、あなたは実際には何も変更されていません列データソースに格納されます。

old = data['url'][0] 
data['url'] = old.replace("1","f") 
0

@bigreddotの答えが正しいですが、交換するには、私はf.toString(10)を記述する必要があるので、VAR fは、数ある:あなたのような何かを必要としています。 私がしたいコード:

from bokeh.io import vform 
from bokeh.models import CustomJS, ColumnDataSource, Slider 
from bokeh.plotting import Figure, output_file, show 

output_file('image.html') 

source = ColumnDataSource(data=dict(url=['1.png'])) 

p = Figure(x_range=(0,1), y_range=(0,1)) 

callbackimg = CustomJS(args=dict(source=source), code=""" 
    var data = source.get('data'); 
    var f = cb_obj.get('value') 
    old = data['url'][0] 
    data['url'][0]= old.replace("1",f.toString(10)) 
    source.trigger('change'); 
""") 

p.image_url('url',source=source, x=0, y=1,w=1,h=1) 
slider = Slider(start=1, end=2, value=1, step=1, title="image number",  callback=callbackimg) 

layout = vform(slider, p) 
show(layout) 
関連する問題