How can I interactively update a latex equation using values set by a user with ipywidgets UI controls in Juypter?

Question

I'm trying to display a multiline equation using values from a ipywidgets FloatBox input controls in a Jupyter Notebook. I want to be able to have the equation update either whenever the Floatbox controls are updated, or when the user presses a button to update the equation.

First of all, I can display the equation in a Code box using the Markdown function:

x=3
y=4
Markdown("""
$$
\\begin{{align}}
\\begin{{split}}
z & =x \\times y \\\\
 & = {x} \\times {y} \\\\
 & = {z}
\end{{split}}
\end{{align}}
$$
""".format(x=x,y=y,z=x*y))

I can also follow instructions on the ipywidgets readthedocs to take input from a slider and output it, as plain text rather than as an equation:

a = widgets.IntSlider(description='a')
b = widgets.IntSlider(description='b')
c = widgets.IntSlider(description='c')

def f(a, b, c):
    print('{}*{}*{}={}'.format(a, b, c, a*b*c))

out = widgets.interactive_output(f, {'a': a, 'b': b, 'c': c})

widgets.HBox([widgets.VBox([a, b, c]), out])

However, when putting the two together, the Markdown either simply shows a string representation of the Markdown rather than a rendering itself ('<IPython.core.display.Markdown object>') or doesn't display at all (if I don't enclose the Markdown command in a print statement).

Here is the combination of the two together - I have used a simpler equation than the one shown above.

Markdown('$${}\\times{}\\times{}={}$$'.format(a.value, b.value, c.value, a.value*b.value*c.value)) #outputs fine

a = widgets.IntSlider(description='a')
b = widgets.IntSlider(description='b')
c = widgets.IntSlider(description='c')


def f(a, b, c):
    print('{}*{}*{}={}'.format(a, b, c, a*b*c))

def f2(a, b, c):
   print(Markdown('${}\\times{}\\times{}={}$'.format(a, b, c, a*b*c)))

out = widgets.interactive_output(f2, {'a': a, 'b': b, 'c': c})

widgets.HBox([widgets.VBox([a, b, c]), out]) #no output.

Any ideas?

score 0 · Answer 1 · answered Sep 11 '18 at 04:45

The following seems to work - I think it just needed a 'display' command added:

from IPython.display import display

a = widgets.IntSlider(description='a')
b = widgets.IntSlider(description='b')
c = widgets.IntSlider(description='c')


def f(a, b, c):
    print('{}*{}*{}={}'.format(a, b, c, a*b*c))

def f2(a, b, c):
   print(Markdown('${}\\times{}\\times{}={}$'.format(a, b, c, a*b*c)))

def f3(a, b, c):
   display(Markdown('${}\\times{}\\times{}={}$'.format(a, b, c, a*b*c)))
out = widgets.interactive_output(f3, {'a': a, 'b': b, 'c': c})

widgets.HBox([widgets.VBox([a, b, c]), out])

How can I interactively update a latex equation using values set by a user with ipywidgets UI controls in Juypter?

1 Answers1