UX in Jupyter — User input essentials (Part 1)

Have you ever been in a situation where you repeatedly change a value? Perhaps you found yourself changing the number of clusters, subsetting a % of data or just limiting axis on a chart.

Jupyter Notebooks have a range of widgets to make these kinds of changes more user-friendly, aesthetically pleasing, and intuitive. In addition to all these benefits, you will also learn UI concepts and test code that handles user input. Let’s explore some essential user inputs.

This article will focus on using the ipywidgets package to handle user input; each input element is considered to be a widget.

Install the library

To install using pip, run:

pip install ipywidgets

For Conda, run:

conda install -c conda-forge ipywidgets

To check the installation worked, use the following command:

python -c “import ipywidgets” 

you should see no errors.

Open up a notebook and import the ipywidgets package to get started.

Note: Regardless of the widget, the current value of the widget can be extracted using the ‘value’ property

Sliders

Sliders are one of the oldest concepts in UI design. A slider allows the user to select a from a range of discrete or continuous numerical values.

A slider widget has several properties:

• value = The current value, default: 0
• min = minimum value, default: 0
• max = maximum value, default: 0
• step = size of each step of the slider, default: 1
• description = text that will appear next to the slider, default: ‘’
• disabled = is the slider useable, default: True
• orientation = orientation of the slide, default: ‘horizontal’

Depending on the desired output, you can use:

• widgets.IntSlider() for discrete Int values
• widgets.FloatSlider() for float values

Code

slider = widgets.IntSlider(
 value=7, # default value
 min=0, # min value
 max=10, # max value
 step=1, # incriment size
 description=’Cats:’ # slider label
)
display(slider) # display the slider

# In another cell

print(slider.value) # get the value of the slider

There is also a version of the slider used to select values on the log scale. It is similar to the other sliders; however, the min and max parameter is used to specify the exponent range. The code is as follows:

slider = widgets.FloatLogSlider(
 value=10, # default value
 base=10, # log base
 min=-10, # max exponent of base
 max=10, # min exponent of base
 step=0.2, # exponent step
 description=’Log Slider’
)
display(slider)

Numeric text box inputs

Similarly to the slider, when you need granular control, a text box may work better. A text box value can be typed instead of the user having to click & drag; additionally, it performs data type validation.

Bounded numeric text box inputs

Bounded numeric textboxes have an upper and lower valid value. If a user types in a value outside its bounds it is set the closet boundary value (i.e. If a user types in 20 where the limit is 10, the output value will be 10. There are two types of bounded numeric text box inputs, one for Int and the other for Float values.

Code

# BoundedIntText

btb = widgets.BoundedIntText(
 value=7,
 min=0,
 max=10
 description=’Text:’
 )
display(btb)

# BoundedFloatText

btb = widgets.BoundedFloatText(
 value=7.5,
 min=0,
 max=10.0
 description=’Text:’
 )
display(btb)

Unbound numeric text box inputs

Unbound numeric textboxes are textboxes that preform data type validation. There are two types, Int for discrete values and the other for Float values.

Code

# IntText

btb = widgets.IntText(
 value=7,
 description=’Text:’
 )
display(btb)

# FloatText

btb = widgets.FloatText(
 value=7.3,
 description=’Text:’
 )
display(btb)

Text Input

There are 2 types of text inputs, one for single line inputs (i.e. names) or multiline inputs (i.e. feedback, reviews). The text input introduces the ‘placeholder’ property which controls the instructions presented to the user when the text box is empty.

txtsl = widgets.Text(
 placeholder=’Enter you name’,
 description=’Name:’
 )

display(txtsl)

The Textarea widget handles multiline text input, it’s properties are similar to the Text widget.

txtml = widgets.Textarea(
 value=’this is the default value’,
 placeholder=’Type something’,
 description=’Essay input’
 )
display(txtml)

Boolean input

Sometimes you need a binary input, True/False values. Thee are several widgets to handle this type of input.

Toggle Button

A toggle button has two states; they can also be customised with different looks and icons.

Toggle Button’s have several unique properties that allow you to control the look and feel of the button:

• value = default value of the button, defailt: False
• description = text on the button, default ‘’,
• button_style = style of the button, values pictured above. default: ‘’
• Valid values: ‘success’, ‘info’, ‘warning’, ‘danger’ or ‘’
• icon = icon that appears on the left of the text, default: ‘’ — suggest ‘’check’
• valid values: https://fontawesome.com/cheatsheet/free/solid

Code

chk = widgets.ToggleButton(
 value=False,
 description=’Cats?’,
 disabled=False,
 button_style=’success’,
 tooltip=’Description’,
 icon=’check’)

display(chk)

# In another cell

print(chk.value)

Checkbox

This classic UI element makes the value of a boolean input immediately apparent by displaying a tick if the value is True.

chkbox = widgets.Checkbox(
 value=False,
 description=’Click Me’,
 disabled=False,
 indent=False # Indents the checkbox by 1 level
 )
display(chkbox)

Selection widgets

Selection inputs provide a convenient way for a user to select a categorical input.

Radio Buttons

Radio buttons are perfect for choosing between a small number of discrete values. It has the lowest cognitive load in this category as all of the values are readable, and the selection is immediately evident.

For a any selection widget, the valid values must be in list form and set to the ‘options’ property:

chkbox = widgets.RadioButtons(
 options=[‘km’, ‘m’, ‘cm’,’mm’],
 value = ‘m’,
 description=’Unit’
 )

display(chkbox)

Select

The select widget creates a list that the user can pick from. Additionally, by using the SelectMultiple widget, the user can pick multiple values.

sel = widgets.Select(
 options=[‘km’, ‘m’, ‘cm’,’mm’],
 value=’m’,
 rows=3,
 description=’Unit:’
 )

display(sel)

For the SelectMultiple widget, the default value needs to be set as a list. The output value of the SelectMultiple widget is also a tuple. The user can hold the Ctrl key to select multiple inputs.

vals = ['km', 'm', 'cm','mm']
sel = widgets.SelectMultiple(
        options=vals,
        value=['m'],
        rows=min(5, len(vals)),
        description='Unit:'
    )
display(sel)

# in a diffrent cell

sel.value
# (‘m’,)

Dropdown

The dropdown is a compact way to allowing a user to select from a large number of categorical values. It only allows the user to see one value at a time unless the user interacts with the widget; it is best used for selecting variables that are hard to miss.

dropD = widgets.Dropdown(
 options=[i for i in range(10)],
 value=2,
 description=’Number:’,
 disabled=False,
 )

display(dropD)

Special user inputs

Date picker

The date picker allows users to intuitively select a date using a calendar popup or type it in. Note that to set a default date or to use the output of the widget, the datetime package needs to be imported.

import datetime

dtpick = widgets.DatePicker(
 description=’Pick a Date’,
 value = datetime.date(2020, 5, 16)
 )
display(dtpick)

# in a different cell
dtpick.value

# datetime.date(2020, 5, 16)

Color Picker

The color picker allows users to select a color and return it’s hexadecimal color value. A simple algorithm can be used to convert that value to RGB for use.

clp = widgets.ColorPicker(
 concise=False,
 description=’Pick a color’,
 value=’#f70000'
 )
display(clp)

# in a different cell

print(clp.value)

# #f70000

# RGB Value
def hexToRGB(hexa):
 return[int(hexa[1:][i:i+2], 16) for i in (0, 2, 4)]

rgb = hexToRGB(clp.value)
print(rgb)

# [247, 0, 0]

All code used in this article can be found here: https://github.com/thezaza101/Python-Code-Snippets/blob/master/other/p/Snipppets/User_input_essentials_1.ipynb

Wondering where to go next? Part 2 of this series can be found here: UX in Jupyter — User input essentials (Part 2)