About Us

We sell drums

You can choose the

Size of drums
Color of drums



In [7]:

    
from IPython.display import HTML, Javascript
from ipywidgets import interact
import ipywidgets as widgets

Forms

The forms in the Drum Shop app

Form: Choose Drum

Let's the user choose the drum (from the provided options)



In [8]:

    
%%writefile drumshop_forms.py

from IPython.display import HTML, Javascript
from ipywidgets import interact
import ipywidgets as widgets

"""
Forms related to the Drum Shop
"""









    



Overwriting drumshop_forms.py

Simple database for the drum shop.

TODO

Replace this by a sqlite database in the next iteration.



In [9]:

    
%%writefile drumshop_forms.py -a

drumSizeTags = ('small', 'medium', 'large')
drumSizeValues = ('20', '40', '60')

drumSizes = dict(zip(drumSizeTags, range(len(drumSizeTags))))
drumColors = ['red', 'green', 'blue', 'yellow', 'grey']









    



Appending to drumshop_forms.py

The callback that gets processed after the user choses the options for the drums.



In [10]:

    
%%writefile drumshop_forms.py -a


def chooseDrum(size, color):
    """
    Displays the Drum after applying the user chosen settings
    """
    
    sizeTag = drumSizeTags[size]
    sizeValue = drumSizeValues[size]
    
    html = HTML(f"""
    <p>You choose a "{sizeTag}" size drum of height "{sizeValue}" and color "{color}"</p>
    <hr/>
    <div style="color:#0000FF; 
                background-color:{color}; 
                height:{sizeValue}px; 
                width: 50px;"
    >
    <p>{sizeValue}</p>
    </div>
    """)
    return html









    



Appending to drumshop_forms.py

Now that we have selected the code cells and executed them, we have a Python file.

You can open it in your favorite text editor and have a look at the code.



In [11]:

    
!gvim drumshop_forms.py

You can can run it using the %run line magic command.

All the symbols in the file will be made available in the interpreter now!



In [12]:

    
%run drumshop_forms.py

You can quickly check the symbols and acertain that they are from the file that was run above.

Just select the two code cells below and execute them.



In [14]:

    
chooseDrum?



In [15]:

    
drumSizes









    Out[15]:





{'large': 2, 'medium': 1, 'small': 0}

We can now display an user interface for the Drum Options.



In [16]:

    
interact(chooseDrum, size=drumSizes, color=drumColors)









    












    





    You choose a "medium" size drum of height "40" and color "yellow"
    
    
    40

Following is an alternate user interface for the form.



In [17]:

    
sizeSlider = widgets.SelectionSlider(options=drumSizes)
colorSlider = widgets.SelectionSlider(options=drumColors)

interact(chooseDrum, size=sizeSlider, color=colorSlider)









    












    





    You choose a "large" size drum of height "60" and color "grey"
    
    
    60



In [ ]: