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

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

Merge pull request #5459 from jdfreder/ff_animhop...
Merge pull request #5459 from jdfreder/ff_animhop Fix interact animation page jump FF
Brian E. Granger - - Load All Authors

File last commit:

r16120:24b93a1d
r16225:5c3a5f18 merge
Show More
Widget Basics.ipynb
305 lines | 7.9 KiB | text/plain | TextLexer
/ examples / Interactive Widgets / Widget Basics.ipynb
History | Annotation | Raw |Copy content |Copy permalink

To use IPython widgets in the notebook, the widget namespace needs to be imported.

In [1]:
from IPython.html import widgets # Widget definitions
from IPython.display import display # Used to display widgets in the notebook

Basic Widgets

IPython comes with basic widgets that represent common interactive controls. These widgets are

  • CheckboxWidget
  • ToggleButtonWidget
  • FloatSliderWidget
  • BoundedFloatTextWidget
  • FloatProgressWidget
  • FloatTextWidget
  • ImageWidget
  • IntSliderWidget
  • BoundedIntTextWidget
  • IntProgressWidget
  • IntTextWidget
  • ToggleButtonsWidget
  • RadioButtonsWidget
  • DropdownWidget
  • SelectWidget
  • HTMLWidget
  • LatexWidget
  • TextareaWidget
  • TextWidget
  • ButtonWidget

A few special widgets are also included, that can be used to capture events and change how other widgets are displayed. These widgets are

  • ContainerWidget
  • PopupWidget
  • AccordionWidget
  • TabWidget

To see the complete list of widgets, one can execute the following

In [2]:
[widget for widget in dir(widgets) if widget.endswith('Widget')]
Out[2]:
['AccordionWidget',
 'BoundedFloatTextWidget',
 'BoundedIntTextWidget',
 'ButtonWidget',
 'CheckboxWidget',
 'ContainerWidget',
 'DOMWidget',
 'DropdownWidget',
 'FloatProgressWidget',
 'FloatSliderWidget',
 'FloatTextWidget',
 'HTMLWidget',
 'ImageWidget',
 'IntProgressWidget',
 'IntSliderWidget',
 'IntTextWidget',
 'LatexWidget',
 'PopupWidget',
 'RadioButtonsWidget',
 'SelectWidget',
 'TabWidget',
 'TextWidget',
 'TextareaWidget',
 'ToggleButtonWidget',
 'ToggleButtonsWidget',
 'Widget']

The basic widgets all have sensible default values. Create a FloatSliderWidget without displaying it:

In [3]:
mywidget = widgets.FloatSliderWidget()

Constructing a widget does not display it on the page. To display a widget, the widget must be passed to the IPython display(object) method or must be returned as the last item in the cell. mywidget is displayed by

In [4]:
display(mywidget)

or

In [5]:
mywidget

It's important to realize that widgets are not the same as output, even though they are displayed with display. Widgets are drawn in a special widget area. That area is marked with a close button which allows you to collapse the widgets. Widgets cannot be interleaved with output. Doing so would break the ability to make simple animations using clear_output.

Widgets are manipulated via special instance attributes (traitlets). The names of these traitlets are listed in the widget's keys attribute (as seen below). A few of these attributes are common to most widgets. The basic attributes are value, description, visible, and disabled. _css and _view_name are private attributes that exist in all widgets and should not be modified.

In [6]:
mywidget.keys
Out[6]:
['_view_name',
 'orientation',
 'min',
 'max',
 '_css',
 'value',
 'disabled',
 'visible',
 'step',
 'description']

Changing a widget's attribute will automatically update that widget everywhere it is displayed in the notebook. Here, the value attribute of mywidget is set. The slider shown above updates automatically with the new value. Syncing also works in the other direction - changing the value of the displayed widget will update the property's value.

In [7]:
mywidget.value = 25.0

After changing the widget's value in the notebook by hand to 0.0 (sliding the bar to the far left).

In [8]:
mywidget.value
Out[8]:
25.0

Widget values can also be set with kwargs during the construction of the widget (as seen below).

In [9]:
mysecondwidget = widgets.RadioButtonsWidget(values=["Item A", "Item B", "Item C"], value="Item A")
display(mysecondwidget)
In [10]:
mysecondwidget.value
Out[10]:
'Item A'