CODEWITHSUNDEEP
pythonbokeh
user3155053
user3155053

Reputation: 2045

Bokeh: Display user input text

I am trying to figure out how to display a user's input with Bokeh. Sample code is below. Any pointers would be greatly appreciated.

Thank you

from bokeh.layouts import widgetbox
from bokeh.models import CustomJS, TextInput, Paragraph
from bokeh.plotting import output_file, show

# SAVE
output_file('Sample_Application.html',mode='inline',root_dir=None)

# PREP DATA
welcome_message = 'You have selected: (none)'

# CALLBACKS
def callback_print(source=None, window=None):
    user_input = str(cb_obj.value)
    welcome_message = 'You have selected: ' + user_input
    source.trigger('change')

# TAKE ONLY OUTPUT
text_banner = Paragraph(text=welcome_message, width=200, height=100)

# USER INTERACTIONS
text_input = TextInput(value="", title="Enter row number:",             
callback=CustomJS.from_py_func(callback_print))

# LAYOUT
widg = widgetbox(text_input, text_banner)
show(widg)

Upvotes: 2

Views: 8127

Answers (2)

Marc Compere
Marc Compere

Reputation: 343

the answer from @Anthonydouc was helpful but did not work on my bokeh 1.4.0 installation because of the CustomJS call.

A similar solution that works on 1.4.0 and probably bokeh 2.0 is posted here:

from bokeh.models import TextInput, Paragraph
from bokeh.plotting import curdoc
from bokeh.layouts import layout

myMessage = 'You have entered nothing yet: (none)'
text_output = Paragraph(text=myMessage, width=200, height=100)

def my_text_input_handler(attr, old, new):
    myMessage="you just entered: {0}".format(new)
    text_output.text=myMessage # this changes the browser display

text_input = TextInput(value="default", title="Label:")
text_input.on_change("value", my_text_input_handler)

layout = column(text_input,text_output)

curdoc().add_root(layout)
curdoc().title = "Bokeh text input example with text echo"

The only way to get the .on_change() events to work is with bokeh serve, so run like this:

bokeh serve --show text_input_example_with_display.py

Upvotes: 0

Anthonydouc
Anthonydouc

Reputation: 3364

Few issues, you need to actually pass in the text banner object into the python callback,and update the text attribute to the new string.

Currently you are passing in "source", which is undefined and trying to trigger a change. Normally you do this when you change the data of a source and update it to display on a table or plot etc...

Included below the necessary fix

from bokeh.layouts import widgetbox
from bokeh.models import CustomJS, TextInput, Paragraph
from bokeh.plotting import output_file, show

# SAVE
output_file('Sample_Application.html',mode='inline',root_dir=None)

# PREP DATA
welcome_message = 'You have selected: (none)'

# TAKE ONLY OUTPUT
text_banner = Paragraph(text=welcome_message, width=200, height=100)

# CALLBACKS
def callback_print(text_banner=text_banner):
    user_input = str(cb_obj.value)
    welcome_message = 'You have selected: ' + user_input
    text_banner.text = welcome_message

# USER INTERACTIONS
text_input = TextInput(value="", title="Enter row number:",             
callback=CustomJS.from_py_func(callback_print))

# LAYOUT
widg = widgetbox(text_input, text_banner)
show(widg)

Upvotes: 5

Related Questions