##// END OF EJS Templates
upstream » ipython
RSS

Clone from https://github.com/ipython/ipython.git

Adding third party rich output.
Adding third party rich output.
Jonathan Frederic - - Load All Authors

File last commit:

r17501:4b038f3c
r17505:715c3da4
Show More
Widget Basics.ipynb
279 lines | 7.1 KiB | text/plain | TextLexer
/ examples / Interactive Widgets / Widget Basics.ipynb
History | Annotation | Raw |Copy content |Copy permalink

Index - [Next](Widget List.ipynb)

Simple Widget Introduction

What are widgets?

Widgets are elements that exists in both the front-end and the back-end.

You can use widgets to build interactive GUIs for your notebooks.
You can also use widgets to synchronize stateful and stateless information between Python and JavaScript.

Using widgets

To use the widget framework, you need to import the widgets from IPython.html.widgets.

In [1]:
from IPython.html.widgets import *

Widgets have their own display repr which allows them to be displayed using IPython's display framework. Constructing and returning an IntSliderWidget automatically displays the widget (as seen below). Widgets are displayed inside the widget area, which sits between the code cell and output. You can hide all of the widgets in the widget area by clicking the grey x in the margin.

In [2]:
IntSliderWidget()

You can also explicitly display the widget using display(...).

In [3]:
from IPython.display import display
w = IntSliderWidget()
display(w)

If you display the same widget twice, the displayed instances in the front-end will remain in sync with each other.

In [4]:
display(w)

You can close a widget by calling its close() method.

In [5]:
w.close()

Why does displaying the same widget twice work?

Widgets are represented in the back-end by a single object. Each time a widget is displayed, a new representation of that same object is created in the front-end.

Widget properties

All of the IPython widgets share a similar naming scheme. To read the value of a widget, you can query its value property.

In [6]:
w.value
Out[6]:
0

Similarly, to set a widget's value, you can set its value property.

In [7]:
w.value = 100

In addition to value, most widgets share keys, description, disabled, and visible. To see the entire list of synchronized, stateful properties, of any specific widget, you can query the keys property.

In [8]:
w.keys
Out[8]:
['_view_name',
 'orientation',
 'msg_throttle',
 'min',
 'max',
 '_css',
 'value',
 'readout',
 'disabled',
 'visible',
 'step',
 'description']

Tip: Shorthand for setting the initial values of widget properties

While creating a widget, you can set some or all of the initial values of that widget by defining them as keyword arguments in the widget's constructor (as seen below).

In [9]:
TextWidget(value='Hello World!', disabled=True)

Linking two similar widgets

If you need to display the same value two different ways, you'll have to use two different widgets. Instead of attempting to manually synchronize the values of the two widgets, you can use the traitlet link function to link two properties together. Below, the values of three widgets are linked together.

In [10]:
from IPython.utils.traitlets import link
a = FloatTextWidget()
b = FloatSliderWidget()
c = FloatProgressWidget()
display(a,b,c)


mylink = link((a, 'value'), (b, 'value'), (c, 'value'))

Unlinking the widgets is simple. All you have to do is call .unlink on the link object.

In [11]:
mylink.unlink()

Index - [Next](Widget List.ipynb)