Widget-Liste

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

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

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.

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.

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

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

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

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

FloatProgress

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

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

BoundedFloatText

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

IntText

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

FloatText

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

Boolesche Widgets

Es gibt drei Widgets, die boolesche Wert anzeigen sollen.

ToggleButton

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

Checkbox

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

Valid

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

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.

Dropdown

widgets.Dropdown(
    options=["1", "2", "3"],
    value="2",
    description="Number:",
    disabled=False,
)

RadioButtons

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

Select

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

SelectionSlider

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.

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

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'] * 2
)

SelectMultiple

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

widgets.SelectMultiple(
    options=["Apples", "Oranges", "Pears"],
    value=["Oranges"],
    rows=3,
    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

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

Textarea

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.

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

HTML

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

HTML Math

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

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

Button

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.

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

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

from IPython.display import YouTubeVideo


with out:
    display(YouTubeVideo("eWzY2nGfkXk"))

out

out.clear_output()

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

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.

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.

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

Color picker

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

Controller

Controller ermöglicht die Verwendung eines Game-Controller als Eingabegerät.

widgets.Controller(
    index=0,
)

Container/Layout-Widgets

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

Box

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

HBox

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

VBox

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

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.

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.

tab.selected_index = 3

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.

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