Widget list#

[1]:

import ipywidgets as widgets

Numeric widgets#

There are a variety of IPython widgets that are designed to display numeric values. The integer widgets have a similar naming scheme as their counterparts with floating point numbers. You can find the respective integer equivalent by replacing Float withInt in the widget name.

IntSlider#

[2]:

widgets.IntSlider(
    value=7,
    min=0,
    max=10,
    step=1,
    description='Test:',
    disabled=False,
    continuous_update=False,
    orientation='horizontal',
    readout=True,
    readout_format='d'
)

FloatSlider#

[3]:

widgets.FloatSlider(
    value=7.5,
    min=0,
    max=10.0,
    step=0.1,
    description='Test:',
    disabled=False,
    continuous_update=False,
    orientation='horizontal',
    readout=True,
    readout_format='.1f',
)

Sliders can also be displayed vertically.

[4]:

widgets.FloatSlider(
    value=7.5,
    min=0,
    max=10.0,
    step=0.1,
    description='Test:',
    disabled=False,
    continuous_update=False,
    orientation='vertical',
    readout=True,
    readout_format='.1f',
)

FloatLogSlider#

The FloatLogSlider has a scale that makes it easy to use a slider for a wide range of positive numbers. min and max refer to the minimum and maximum exponents of the base and the value refers to the actual value of the slider.

[5]:

widgets.FloatLogSlider(
    value=10,
    base=10,
    min=-10, # max exponent of base
    max=10, # min exponent of base
    step=0.2, # exponent step
    description='Log Slider'
)

IntRangeSlider#

[6]:

widgets.IntRangeSlider(
    value=[5, 7],
    min=0,
    max=10,
    step=1,
    description='Test:',
    disabled=False,
    continuous_update=False,
    orientation='horizontal',
    readout=True,
    readout_format='d',
)

FloatRangeSlider#

[7]:

widgets.FloatRangeSlider(
    value=[5, 7.5],
    min=0,
    max=10.0,
    step=0.1,
    description='Test:',
    disabled=False,
    continuous_update=False,
    orientation='horizontal',
    readout=True,
    readout_format='.1f',
)

IntProgress#

[8]:

widgets.IntProgress(
    value=7,
    min=0,
    max=10,
    step=1,
    description='Loading:',
    bar_style='', # 'success', 'info', 'warning', 'danger' or ''
    orientation='horizontal'
)

FloatProgress#

[9]:

widgets.FloatProgress(
    value=7.5,
    min=0,
    max=10.0,
    step=0.1,
    description='Loading:',
    bar_style='info',
    orientation='horizontal'
)

The numerical text boxes that impose some limit on the data (range, integer-only) impose that restriction when the user presses enter.

BoundedIntText#

[10]:

widgets.BoundedIntText(
    value=7,
    min=0,
    max=10,
    step=1,
    description='Text:',
    disabled=False
)

BoundedFloatText#

[11]:

widgets.BoundedFloatText(
    value=7.5,
    min=0,
    max=10.0,
    step=0.1,
    description='Text:',
    disabled=False
)

IntText#

[12]:

widgets.IntText(
    value=7,
    description='Any:',
    disabled=False
)

FloatText#

[13]:

widgets.FloatText(
    value=7.5,
    description='Any:',
    disabled=False
)

Boolean widgets#

There are three widgets that are designed to display Boolean values.

ToggleButton#

[14]:

widgets.ToggleButton(
    value=False,
    description='Click me',
    disabled=False,
    button_style='', # 'success', 'info', 'warning', 'danger' or ''
    tooltip='Description',
    icon='check'
)

Checkbox#

[15]:

widgets.Checkbox(
    value=False,
    description='Check me',
    disabled=False
)

Valid#

The Valid widget offers a read-only display.

[16]:

widgets.Valid(
    value=False,
    description='Valid!',
)

Selection widgets#

There are several widgets for selecting single values and two for multiple values. All inherit from the same base class.

RadioButtons#

[18]:

widgets.RadioButtons(
    options=['pepperoni', 'pineapple', 'anchovies'],
#     value='pineapple',
    description='Pizza topping:',
    disabled=False
)

Select#

[19]:

widgets.Select(
    options=['Linux', 'Windows', 'OSX'],
    value='OSX',
    # rows=10,
    description='OS:',
    disabled=False
)

SelectionSlider#

[20]:

widgets.SelectionSlider(
    options=['scrambled', 'sunny side up', 'poached', 'over easy'],
    value='sunny side up',
    description='I like my eggs …',
    disabled=False,
    continuous_update=False,
    orientation='horizontal',
    readout=True
)

SelectionRangeSlider#

index is a tuple of minimum and maximum values.

[21]:

import datetime
dates = [datetime.date(2015,i,1) for i in range(1,13)]
options = [(i.strftime('%b'), i) for i in dates]
widgets.SelectionRangeSlider(
    options=options,
    index=(0,11),
    description='Months (2015)',
    disabled=False
)

ToggleButtons#

[22]:

widgets.ToggleButtons(
    options=['Slow', 'Regular', 'Fast'],
    description='Speed:',
    disabled=False,
    button_style='', # 'success', 'info', 'warning', 'danger' or ''
    tooltips=['Description of slow', 'Description of regular', 'Description of fast'],
#     icons=['check'] * 3
)

SelectMultiple#

Several values can be selected by holding down the shift and/or ctrl (or command) keys and clicking the mouse or arrow keys.

[23]:

widgets.SelectMultiple(
    options=['Apples', 'Oranges', 'Pears'],
    value=['Oranges'],
    #rows=10,
    description='Fruits',
    disabled=False
)

String-Widgets#

There are several widgets that can be used to display strings. The widgets Text andTextarea accept input; the widgets HTML andHTMLMath display a string as HTML (HTMLMath also renders mathematical formulas).

Text#

[24]:

widgets.Text(
    value='Hello World',
    placeholder='Type something',
    description='String:',
    disabled=False
)

Textarea#

[25]:

widgets.Textarea(
    value='Hello World',
    placeholder='Type something',
    description='String:',
    disabled=False
)

Label#

The Label widget is useful for custom descriptions that are similar in style to the built-in descriptions.

[26]:

widgets.HBox([widgets.Label(value="The $m$ in $E=mc^2$:"), widgets.FloatSlider()])

HTML#

[27]:

widgets.HTML(
    value="Hello <b>World</b>",
    placeholder='Some HTML',
    description='Some HTML',
)

HTML Math#

[28]:

widgets.HTMLMath(
    value=r"Some math and <i>HTML</i>: \(x^2\) and $$\frac{x+1}{x-1}$$",
    placeholder='Some HTML',
    description='Some HTML',
)

Image#

[29]:

file = open("smiley.gif", "rb")
image = file.read()
widgets.Image(
    value=image,
    format='gif',
    width=128,
    height=128,
)

Button#

[30]:

widgets.Button(
    description='Click me',
    disabled=False,
    button_style='', # 'success', 'info', 'warning', 'danger' or ''
    tooltip='Click me',
    icon='check'
)

Output#

The Output widget can record and display stdout, stderr and IPython.display.

You can attach the output to an output widget or delete it programmatically.

[31]:

out = widgets.Output(layout={'border': '1px solid black'})

[32]:

with out:
    for i in range(5):
        print(i, 'Hello world!')

[33]:

from IPython.display import YouTubeVideo
with out:
    display(YouTubeVideo('eWzY2nGfkXk'))

[34]:

out

[35]:

out.clear_output()

Wir können Ausgaben auch direkt anhängen mit den Methoden append_stdout, append_stderr oder append_display_data.

[36]:

out = widgets.Output(layout={'border': '1px solid black'})
out.append_stdout('Output appended with append_stdout')
out.append_display_data(YouTubeVideo('eWzY2nGfkXk'))
out

You can find detailed documentation in Output widgets.

Play/Animation-Widget#

The Play widget is useful for running animations that you want to run at a specific speed. In the following example, a slider is linked to the player.

[37]:

play = widgets.Play(
#     interval=10,
    value=50,
    min=0,
    max=100,
    step=1,
    description="Press play",
    disabled=False
)
slider = widgets.IntSlider()
widgets.jslink((play, 'value'), (slider, 'value'))
widgets.HBox([play, slider])

DatePicker#

The date picker widget works in Chrome, Firefox and IE Edge, but not currently in Safari because it does not support input type="date".

[38]:

widgets.DatePicker(
    description='Pick a Date',
    disabled=False
)

Color picker#

[39]:

widgets.ColorPicker(
    concise=False,
    description='Pick a color',
    value='blue',
    disabled=False
)

Controller#

Controller enables the use of a game controller as an input device.

[40]:

widgets.Controller(
    index=0,
)

Container/layout widgets#

These widgets are used to store other widgets called children.

Box#

[41]:

items = [widgets.Label(str(i)) for i in range(4)]
widgets.Box(items)

HBox#

[42]:

items = [widgets.Label(str(i)) for i in range(4)]
widgets.HBox(items)

VBox#

[43]:

items = [widgets.Label(str(i)) for i in range(4)]
left_box = widgets.VBox([items[0], items[1]])
right_box = widgets.VBox([items[2], items[3]])
widgets.HBox([left_box, right_box])

Accordion#

[44]:

accordion = widgets.Accordion(children=[widgets.IntSlider(), widgets.Text()])
accordion.set_title(0, 'Slider')
accordion.set_title(1, 'Text')
accordion

Tabs#

In this example the children are set after the tab is created. Titles for the tabes are set in the same way they are for Accordion.

[45]:

tab_contents = ['P0', 'P1', 'P2', 'P3', 'P4']
children = [widgets.Text(description=name) for name in tab_contents]
tab = widgets.Tab()
tab.children = children
for i in range(len(children)):
    tab.set_title(i, str(i))
tab

Accordion andTab#

Unlike the other widgets previously described, the container widgets Accordion andTab update their selected_index attribute when the user changes the accordion or tab; In addition to user input, the selected_index can also be set programmatically.

If selected_index = None is chosen, all accordions will be closed or all tabs will be deselected.

In the following notebook cells the value of selected_index of the tab and/or accordion is displayed.

[46]:

tab.selected_index = 3

[47]:

accordion.selected_index = None

Nesting tabs and accordions#

Tabs and accordions can be nested as deeply as you want. The following example shows some tabs with an accordion as children.

[48]:

tab_nest = widgets.Tab()
tab_nest.children = [accordion, accordion]
tab_nest.set_title(0, 'An accordion')
tab_nest.set_title(1, 'Copy of the accordion')
tab_nest