Widgets#

In Computer Science, a widget is a graphical unit that users interact with. Some examples of widgets are a button, menu or check box. Widgets are the fundamental units of a Graphical User Interface or GUI. So far, the programs you’ve written have not taken any input from the user. In this lesson you’ll learn how to incorporate widgets in a notebook so that non-programmer users can easily control your program. The ipywdgets library contains widgets for just about everything you would want a user to control. We’ll only use a few of them, but you can see the complete widget list on the Jupyter Widgets web site.

Widget Basics#

In order to use the ipywidgets library you have to import it. Run the code in the next cell to make the library available:

import ipywidgets 

Widgets are data types, so just like anything else in Python they can be stored in a variable and displayed witht the display function. Widgets are created just like the Turtle. Widgets use the key word argument syntax to make the controls more clear. Here’s an example:

dd = ipywidgets.Dropdown(
    description="Make a choice.",
    options=["Choice 1", "Choice 2", "Choice 3"],
)
display(dd)

Type the code into the next cell to see the drop down menu:

dd = ipywidgets.Dropdown(
    description="Make a choice.",
    options=["Choice 1", "Choice 2", "Choice 3"],
)
display(dd)

Widgets have a value that reflects the user’s selection. The value is retrieved using the widget variable. Here’s an example:

print("You chose:", dd.value)

Enter the code into the next cell and notice that the value changes when you change the selection:

The next few sections have examples of widgets that give you different kinds of input.

String Input#

The simplest widget lets the user type in text.

text = ipywidgets.Text(
    description='Type Text:',
)
display(text)

Converting Text to Numbers#

The value property of the text box is always a string. If you want to make it a number you have to convert it. The code in the next cells convert the value propery.

int_text = int(text.value)
print("As an integer:", int_text)
float_text = float(text.value)
print("As a float:", float_text)

Numerical Input#

If your program needs an integer or a floating point number from a range of numbers you can use a slider:

islider = ipywidgets.IntSlider(
    min=0,
    max=10,
    description='Integer:',
)
display(islider)
fslider = ipywidgets.FloatSlider(
    min=0,
    max=10.0,
    description='Float:',
)
display(fslider)

It’s also handy to have a text box that only numbers can be typed in to. That saves you having to do a conversion:

itext = ipywidgets.IntText(
    description='Integer:',
)
display(itext)
ftext = ipywidgets.FloatText(
    description='Float:',
)
display(ftext)

Selection#

Sometimes you want the user to select between a confined set of choices. There are several graphical ways to do that. Each of the widgets in this section works the same way as the others. The difference is what the user sees.

dd = ipywidgets.Dropdown(
    description='City:',
    options=['Capitola', 'Santa Cruz', 'Scotts Valley', 'Watsonville'],
)
display(dd)
rb = ipywidgets.RadioButtons(
    description='City:',
    options=['Capitola', 'Santa Cruz', 'Scotts Valley', 'Watsonville'],
)
display(rb)
se = ipywidgets.Select(
    description='City:',
    options=['Capitola', 'Santa Cruz', 'Scotts Valley', 'Watsonville'],
)
display(se)
tb = ipywidgets.ToggleButtons(
    description='City:',
    options=['Capitola', 'Santa Cruz', 'Scotts Valley', 'Watsonville'],
)
display(tb)

Miscellaneous Choices#

There are some good complex widgets available that do useful things such as asking the user for a date or a color.

date = ipywidgets.DatePicker(
    description='Birthday:',
)
display(date)
color = ipywidgets.ColorPicker(
    description='Pick a color:',
)
display(color)

Widget Layouts#

I will use widgets as inputs to your programs. The VBox and HBox layouts let me create widget panels for you so that the widgets are layed out nicely. You can use them yourself, though it’s not necessary.

from ipywidgets import VBox, HBox 

VBox([
    HBox([text]),
    HBox([islider, fslider]),
    HBox([itext, ftext]),
    HBox([dd, rb]),
    HBox([se, tb]), 
    HBox([date, color]),
])