Durch Bilder gleiten mit Bokeh Slider

Question

Ich versuche, eine große Menge wissenschaftlicher Daten nahtlos mit Hilfe von Slidern zu übermitteln.

Ich beginne mit Bokeh und habe fast keine Kenntnisse in Javascript. Ich habe versucht, einen ersten Ansatz zu erstellen, um durch zwei Bilder zu gleiten, aber ich kann das Bild nicht aktualisieren.

Angenommen, ich habe 1.png und 2.png in meinem Ordner.

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) 

I angepasst Beispiele aus Bokeh Widget Doc für den Schieber und working with images in bokeh.

Meine Idee ist, dass der Schieberegler, durch das callbackimg-Snippet, die Quelle ändern wird, die die URL enthält, d. H. Den Namen des Bildes, das geladen werden soll. Ich dachte für jetzt, dass ein einfacher Zugriff auf die Zeichenfolge in der Quelle und eine Ersetzung durch den aktuellen Wert des Schiebereglers (so sollte es von 1.png zu 2.png springen, wenn der Schieberegler von 1 zu 2 geht) sollte den Trick machen.

Nichts ändert sich jedoch. Ich vermute, dass ich im Javascript-Snippet etwas falsch mache.

Dank für jedes Feedback

EDIT: bearbeiteten ich den Code gemäß den Vorschlägen von @bigreddot, aber jetzt ist der Schieber zeigt einfach eine leere Figur, wenn sie in Position geschoben ‚2‘. EDIT2: Gelöst ist das Problem, in meiner Antwort unten

Answer 1

Das Problem ist folgendes:

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

Die replace Methode gibt eine neue Zeichenfolge (die Sie sofort verwerfen), so dass Sie nicht wirklich etwas zu ändern in der Spalte Datenquelle. Sie müssen so etwas wie:

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

Answer 2

@bigreddot Antwort ist richtig, aber var f ist eine Zahl, so in der ersetzen, ich brauche f.toString (10) zu schreiben. Code, der macht was ich will:

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)