First of all, let's see what the widgets are?

There is an IPEP about widgets

Very good tutorials with the basic steps to create your customised widgets


In [ ]:
from IPython.html import widgets
from IPython.display import display

In [ ]:
kk = widgets.Dropdown()
kk.values = {'a':1,'b':2}
display(kk)

In [ ]:
from IPython.utils.traitlets import link
a = widgets.FloatText()
b = widgets.FloatSlider()
c = widgets.FloatProgress()
display(a,b,c)

mylink = link((a, 'value'), (b, 'value'), (c, 'value'))

In [ ]:
mylink.unlink()

In [ ]:
name = widgets.Text(description='Name:')
color = widgets.Dropdown(description='Color:', values=['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'])
page1 = widgets.Box(children=[name, color])

age = widgets.IntSlider(description='Age:', min=0, max=120, value=50)
gender = widgets.RadioButtons(description='Gender:', values=['male', 'female'])
page2 = widgets.Box(children=[age, gender])

tabs = widgets.Tab(children=[page1, page2])
display(tabs)

tabs.set_title(0, 'Name')
tabs.set_title(1, 'Details')

In [ ]:
display(widgets.Text(description="a:"))
display(widgets.Text(description="aa:"))
display(widgets.Text(description="aaa:"))
display(widgets.Text(description="aaaaaaaaaaaaaaa:"))

In [ ]:
buttons = [widgets.Button(description=str(i)) for i in range(3)]
display(*buttons)

In [ ]:
container = widgets.HBox(children=buttons)
display(container)

In [ ]:
container.width = '100%'
container.pack = 'center'

In [ ]:
form = widgets.VBox()
first = widgets.Text(description="First Name:")
last = widgets.Text(description="Last Name:")

student = widgets.Checkbox(description="Student:", value=False)
school_info = widgets.VBox(visible=False, children=[
    widgets.Text(description="School:"),
    widgets.IntText(description="Grade:", min=0, max=12)
    ])

pet = widgets.Text(description="Pet's Name:")
form.children = [first, last, student, school_info, pet]
display(form)

def on_student_toggle(name, value):
    if value:
        school_info.visible = True
    else:
        school_info.visible = False
student.on_trait_change(on_student_toggle, 'value')

In [ ]:
from IPython.html.widgets import interact, interactive, fixed
from IPython.display import display
import matplotlib.pyplot as plt
%matplotlib inline

In [ ]:
fig, ax = plt.subplots()
ax.plot([3,1,2,4,0,5,3,2,0,2,4])
plt.close(fig)

vline = ax.axvline(1)
hline = ax.axhline(0.5)

def set_cursor(x, y):
    vline.set_xdata((x, x))
    hline.set_ydata((y, y))
    display(fig)

interact(set_cursor, x=(1, 9, 0.01), y=(0, 5, 0.01))

More