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.
Dropdown#
[17]:
widgets.Dropdown(
options=["1", "2", "3"],
value="2",
description="Number:",
disabled=False,
)
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=3,
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'] * 2
)
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=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#
[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