Jupyter widgets: How to use 'Button' to update content of 'Label' based on value of 'FloatText'?

user_11842581 0
Viewed 937

I am unable to use widgets in Jupyter to make something that actually should be simple but I can't make it work: I want a GUI where the user presses a 'Button' to update the content of a 'Label' based on value of 'FloatText'

I tried many things to no avail. Here two examples:

Example 1:

from ipywidgets import FloatText, Button, Label, interact

t_str1 = FloatText( description='Strain in %:', value='3' )

b_cs   = Button( description='Compute Stress' )

t_str2 = Label( value='Waiting' )

display( t_str1 ); display( b_cs )

def compute_stress( x ):
    t_str2 = Label( value='Stress = ' + str(x+3)+ 'MPa' )
    display( t_str2 );
    
interact( compute_stress, x=t_str1 );

Result of example 1:

enter image description here

Example 2:

from ipywidgets import FloatText, Button, Label, interact

t_str1 = FloatText( description='Strain in %:', value='3' )

b_cs   = Button( description='Compute Stress' )

t_str2 = Label( value='Waiting' )

display( t_str1 ); display( b_cs ); display( t_str2 );

def compute_stress( x ):
    t_str2 = Label( value='Stress = ' + str(x+3)+ 'MPa' )
    
interact( compute_stress, x=t_str1 );

Result of example 2:

enter image description here

This is what I would like to obtain

enter image description here

jupyter ipywidgets jupyter-notebook python
1 Answers

For your button to work, you nedd to associate an on_click function to it. You then also won't need the interact function to do what you want. Additionnally, to ensure that the widgets appear in the layout you want, you can use VBox. Here is what the code looks like when you implement these changes:

import ipywidgets as widgets

t_str1 = widgets.FloatText( description='Strain in %:', value='3' )
b_cs   = widgets.Button( description='Compute Stress' )
t_str2 = widgets.Label(value='Waiting' )

vb=widgets.VBox([t_str1,b_cs,t_str2])

def on_click_compute_stress(b):
    t_str2.value='Stress = '+str(t_str1.value+3)+'MPa'

b_cs.on_click(on_click_compute_stress)

display(vb)

And the output gives:

enter image description here

user_68657870
Related