Widget-Liste

[1]:
import ipywidgets as widgets

Numerische Widgets

Es gibt eine Vielzahl von IPython-Widgets, die numerische Werte anzeigen sollen. Dabei haben die Ganzzahl-Widgets ein ähnliches Benennungsschema wie ihre Gegenstücke mit Gleitkommazahlen. Durch Ersetzen von Float durch Int im Widget-Namen könnt ihr das jeweilige Integer-Äquivalent finden.

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

Der FloatLogSlider verfügt über eine Skala, die es einfach macht, einen Schieberegler für einen großen Bereich positiver Zahlen zu verwenden. min und max beziehen sich auf die minimalen und maximalen Exponenten der Basis und der value bezieht sich auf den tatsächlichen Wert des Schiebereglers.

[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
)

Boolesche Widgets

Es gibt drei Widgets, die boolesche Wert anzeigen sollen.

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

Das Valid-Widget bietet eine read-only-Anzeige.

[16]:
widgets.Valid(
    value=False,
    description='Valid!',
)

Auswahl-Widgets

Es gibt mehrere Widgets zum Auswählen einzelner Werte und zwei für mehrere Werte. Alle erben von derselben Basisklasse.

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 ist ein Tupel der Mindest- und Höchstwerte.

[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

Mehrere Werte können ausgewählt werden bei den gedrückten Tasten shift und/oder ctrl (oder command) und Mausklicks oder Pfeiltasten.

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

String-Widgets

Es gibt mehrere Widgets, die zum Anzeigen von Strings verwendet werden können. Die Widgets Text und Textarea akzeptieren Eingaben; die Widgets HTML und HTMLMath zeigen einen String als HTML an (HTMLMath rendert auch mathematische Formeln).

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

Das Label-Widget ist nützlich für benutzerdefinierte Beschreibungen, die einen ähnlichen Stil wie die integrierten Beschreibungen haben.

[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

Das Output-Widget kann stdout, stderr und IPython.display erfassen und anzeigen.

Ihr könnt die Ausgabe sowohl an ein Output-Widget anhängen oder programmatisch löschen.

[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

Eine ausführliche Dokumentation findet ihr in Output widgets.

Play/Animation-Widget

Das Play-Widget ist nützlich, um Animationen auszuführen, die in einer bestimmten Geschwindigkeit durchlaufen werden sollen. Im folgenden Beispiel ist ein Slider mit dem Player verknüpft.

[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

Das Datumsauswahl-Widget funktioniert in Chrome, Firefox und IE Edge, derzeit jedoch nicht in Safari, da dieser input type="date" nicht unterstützt.

[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 ermöglicht die Verwendung eines Game-Controller als Eingabegerät.

[40]:
widgets.Controller(
    index=0,
)

Container/Layout-Widgets

Diese Widgets werden zum Speichern anderer Widgets verwendet, die als children bezeichnet werden.

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 und Tab

Im Gegensatz zu den anderen Widgets, die zuvor beschrieben wurden, aktualisieren die Container-Widgets Accordion und Tab ihr Attribut selected_index, wenn der Benutzer das Akkordeon oder den Tab ändert; neben der Nutzereingabe kann der selected_index auch programmatisch festgelegt werden.

Wenn selected_index = None gewählt wird, werden alle Akkordeons geschlossen oder die Auswahl aller Tabs aufgehoben.

In den folgenden Notebook Cells wird der Wert von `selected_index“ des Tab und/oder Akkordeon angezeigt.

[46]:
tab.selected_index = 3
[47]:
accordion.selected_index = None

Verschachtelung von Tabs und Akkordeons

Tabs und Akkordeons können so tief verschachtelt werden, wie ihr möchtet. Das folgende Beispiel zeigt einige Tabs mit einem Akkordeon als 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