Introducing ipywidgets

Motivation

ipywidgets is an ipython library which allows the introduction of user elements directly within note books. this is is essential when a tool maker wants to rapidly prototype. Say we have an interesting SQL statement which can capture some interesting data, but our tool users need to use it on specifca wikis and set parameters related to event and users. Having ui to capture all these parameters is essential to make the tool effective.

Using UI to capture parameters

from ipywidgets import *
#from ipywidgets import interact_manual
from IPython.display import display

Styling widgets

s = Button(description='(50% width, 80px height) button')
s.layout.width = '50%'
s.layout.height = '80px'
s
words = ("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed " +
         "do eiusmod tempor incididunt ut labore et dolore magna aliqua.").split(' ')
items = [Button(description=w) for w in words]

HBox([VBox([items[0], items[1]]), VBox([items[2], items[3]])])
IntSlider(description='$\int_0^t f$')
Label(value='$e=mc^2$')

UI functions

def VBox(*pargs, **kwargs):
    """Displays multiple widgets vertically using the flexible box model."""
    box = Box(*pargs, **kwargs)
    box.layout.display = 'flex'
    box.layout.flex_flow = 'column'
    box.layout.align_items = 'stretch'
    return box

def HBox(*pargs, **kwargs):
    """Displays multiple widgets horizontally using the flexible box model."""
    box = Box(*pargs, **kwargs)
    box.layout.display = 'flex'
    box.layout.align_items = 'stretch'
    return box
items_layout = Layout(flex='1 1 auto',
                      width='auto')     # override the default width of the button to 'auto' to let the button grow

box_layout = Layout(display='flex',
                    flex_flow='column', 
                    align_items='stretch', 
                    border='solid',
                    width='50%')

items = [Button(description=w, layout=items_layout, button_style='danger') for w in words[:4]]
box = Box(children=items, layout=box_layout)
box
items_layout = Layout(flex='1 1 auto', width='auto')     # override the default width of the button to 'auto' to let the button grow

items = [
    Button(description='weight=1'),
    Button(description='weight=2', layout=Layout(flex='2 1 auto', width='auto')),
    Button(description='weight=1'),
 ]

box_layout = Layout(display='flex',
                    flex_flow='row', 
                    align_items='stretch', 
                    border='solid',
                    width='50%')
box = Box(children=items, layout=box_layout)
box

Adaptive widget with many controlls

label_layout = Layout()

form_item_layout = Layout(
    display='flex',
    flex_flow='row',
    justify_content='space-between'
)

form_items = [
    #slider
    Box([Label(value='Age of the captain'), IntSlider(min=40, max=60)], layout=form_item_layout),
    #dropdown
    Box([Label(value='Egg style'), 
         Dropdown(options=['Scrambled', 'Sunny side up', 'Over easy'])], layout=form_item_layout),
    #text field
    Box([Label(value='Ship size'), 
         FloatText()], layout=form_item_layout),
    #text area
    Box([Label(value='Information'), 
         Textarea()], layout=form_item_layout),
    Box([Label(value='Progress'), 
         FloatProgress(
            value=7.5,
            min=5.0,
            max=10.0,
            step=0.1,
            description='Loading:')],layout=form_item_layout),
    Box([Label(value='bounded float'), 
        BoundedFloatText(
            value=7.5,
            min=5.0,
            max=10.0 )],layout=form_item_layout),
    Box([Label(value='Clicker'), 
        ToggleButton(
            description='Click me',
            value=False)],layout=form_item_layout),
    Box([Label(value='Check'), 
         Checkbox(
            description='Check me',
            value=True)],layout=form_item_layout),
    Box([Label(value='Check'), 
         Valid(
             value=True)],layout=form_item_layout),
    Box([Label(value='Pizza topping'), 
         RadioButtons(
            options=['pepperoni', 'pineapple', 'anchovies'])],layout=form_item_layout),
    Box([Label(value='Project'), 
         Select(
            options=['Wikipedia','Wikisource', 'Wikidata','Wiktionary','Wikiquote','Wikiversity'])],layout=form_item_layout),
    Box([Label(value='Check'), 
        SelectionSlider(
            description='I like my eggs ...',
            options=['scrambled', 'sunny side up', 'poached', 'over easy'])],layout=form_item_layout),
    Box([Label(value='Check'), 
         Checkbox(
            description='Check me',
            value=True)],layout=form_item_layout),
    Box([Label(value='Check'), 
         Checkbox(
            description='Check me',
            value=True)],layout=form_item_layout),
    Box([Label(value='Check'), 
         Checkbox(
            description='Check me',
            value=True)],layout=form_item_layout),
    Box([Label(value='Check'), 
         Checkbox(
            description='Check me',
            value=True)],layout=form_item_layout),
    Box([Label(value='Check'), 
         Checkbox(
            description='Check me',
            value=True)],layout=form_item_layout),
    
]

form = Box(form_items, layout=Layout(
    display='flex',
    flex_flow='column',
    border='solid 2px',
    align_items='stretch',
    width='50%'
))
form