{"id":1951,"date":"2019-06-18T19:04:35","date_gmt":"2019-06-18T19:04:35","guid":{"rendered":"http:\/\/wiki.thomasandsofia.com\/?p=1951"},"modified":"2019-06-18T22:59:52","modified_gmt":"2019-06-18T22:59:52","slug":"section-17-introduction-to-guis","status":"publish","type":"post","link":"https:\/\/wiki.thomasandsofia.com\/?p=1951","title":{"rendered":"Section 17: Introduction to GUIs"},"content":{"rendered":"<p><a href=\"http:\/\/wiki.thomasandsofia.com\/?p=1938\">&lt; Section 16<\/a><\/p>\n<h1>Introduction to GUIs<\/h1>\n<p><a href=\"https:\/\/www.udemy.com\/complete-python-bootcamp\/learn\/lecture\/3547984#questions\" target=\"_blank\" rel=\"noopener\">https:\/\/www.udemy.com\/complete-python-bootcamp\/learn\/lecture\/3547984#questions<\/a><\/p>\n<div class=\"asset-container\">\n<div class=\"article-asset--article-content--1MwHd\">\n<p><strong>Welcome to the bonus GUI Section of this course!<\/strong><\/p>\n<p><strong>All notebooks associated with this section are located under the GUI folder in the NbViewer or Github repository containing the course notebooks.<\/strong><\/p>\n<p>There are many,many Graphical User Interface options for Python users.<\/p>\n<ul>\n<li>Here is the link to the documentation concerning the <a class=\"external-link\" href=\"https:\/\/wiki.python.org\/moin\/GUI%20Programming%20in%20Python\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">most common GUI frameworks<\/a>.<\/li>\n<li>For a full list of all available GUI frameworks, check out the <a class=\"external-link\" href=\"https:\/\/wiki.python.org\/moin\/GuiProgramming\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Full GUI Programming List<\/a><\/li>\n<\/ul>\n<p>It&#8217;s important to remember that <em>no framework is objectively better than all the others<\/em>, and different use cases will require different frameworks. For instance, if you want to begin GUIs by designing a graphical game, your best bet would be <a class=\"external-link\" href=\"http:\/\/pygame.org\/hifi.html\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">PyGame<\/a>! (The link provided directs you to there learning page).<\/p>\n<p>If you want to build web apps, you&#8217;ll probably want to avoid Python as the GUI and use it for backend work using <a class=\"external-link\" href=\"http:\/\/flask.pocoo.org\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Flask<\/a> or <a class=\"external-link\" href=\"https:\/\/www.djangoproject.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Django<\/a> instead. With web apps you&#8217;ll want to explore HTML,CSS, and Javascript to provide the GUI for your user.<\/p>\n<p><strong>For the rest of this section we will explore the awesome world of Widgets in the Jupyter Notebook setting! This type of GUI is best suited for creating dashboards for data\/business analysis situations.<\/strong><\/p>\n<p><strong>Let&#8217;s get started!<\/strong><\/p>\n<h1>Quick Note about Ipywidgets<\/h1>\n<div class=\"asset-container\">\n<div class=\"article-asset--article-content--1MwHd\">\n<p>Hi everyone!<\/p>\n<p>Just a quick note about coloring and styling your ipywidgets, ipywidgets has actually switched over to a Bootstrap style, for more info, check out:<\/p>\n<p><a href=\"https:\/\/ipywidgets.readthedocs.io\/en\/latest\/examples\/Widget%20Styling.html#Predefined-styles\" target=\"_blank\" rel=\"noopener\">https:\/\/ipywidgets.readthedocs.io\/en\/latest\/examples\/Widget%20Styling.html#Predefined-styles<\/a><\/p>\n<p>Any questions?\u00a0Feel free to post to the QA forums, thanks!<\/p>\n<h1>Interactive Functionality with GUIs<\/h1>\n<p><a href=\"https:\/\/www.udemy.com\/complete-python-bootcamp\/learn\/lecture\/9523220#questions\" target=\"_blank\" rel=\"noopener\">https:\/\/www.udemy.com\/complete-python-bootcamp\/learn\/lecture\/9523220#questions<\/a><\/p>\n<p><strong>Note: If using the notebooks included with the class, you must download them from GitHub and run them in Jupiter Notebooks in order to see the functionality.<\/strong><\/p>\n<h3>Import the widgets<\/h3>\n<pre># Start with some imports!\r\nfrom ipywidgets import interact, interactive, fixed\r\nimport ipywidgets as widgets<\/pre>\n<p>Interact auto generates basic user functions for interactive controls.<\/p>\n<h3>Integers<\/h3>\n<pre>def func(x):\r\n    return x\r\ninteract(func, x=10)<\/pre>\n<p><a href=\"http:\/\/wiki.thomasandsofia.com\/wp-content\/uploads\/2019\/06\/Sldr1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1952\" src=\"http:\/\/wiki.thomasandsofia.com\/wp-content\/uploads\/2019\/06\/Sldr1.png\" alt=\"\" width=\"303\" height=\"171\" srcset=\"https:\/\/wiki.thomasandsofia.com\/wp-content\/uploads\/2019\/06\/Sldr1.png 303w, https:\/\/wiki.thomasandsofia.com\/wp-content\/uploads\/2019\/06\/Sldr1-300x169.png 300w, https:\/\/wiki.thomasandsofia.com\/wp-content\/uploads\/2019\/06\/Sldr1-150x85.png 150w\" sizes=\"auto, (max-width: 303px) 100vw, 303px\" \/><\/a><\/p>\n<p>Change the function to return the square of x and see how the return value changes.<\/p>\n<p><a href=\"http:\/\/wiki.thomasandsofia.com\/wp-content\/uploads\/2019\/06\/Sldr2.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1953\" src=\"http:\/\/wiki.thomasandsofia.com\/wp-content\/uploads\/2019\/06\/Sldr2.png\" alt=\"\" width=\"317\" height=\"175\" srcset=\"https:\/\/wiki.thomasandsofia.com\/wp-content\/uploads\/2019\/06\/Sldr2.png 317w, https:\/\/wiki.thomasandsofia.com\/wp-content\/uploads\/2019\/06\/Sldr2-300x166.png 300w, https:\/\/wiki.thomasandsofia.com\/wp-content\/uploads\/2019\/06\/Sldr2-150x83.png 150w\" sizes=\"auto, (max-width: 317px) 100vw, 317px\" \/><\/a><\/p>\n<h3>Boolean<\/h3>\n<pre>def func(x):\r\n    return x\r\ninteract(func, x=True)<\/pre>\n<p><a href=\"http:\/\/wiki.thomasandsofia.com\/wp-content\/uploads\/2019\/06\/ckbx1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1954\" src=\"http:\/\/wiki.thomasandsofia.com\/wp-content\/uploads\/2019\/06\/ckbx1.png\" alt=\"\" width=\"149\" height=\"73\" \/><\/a><\/p>\n<h3>Strings<\/h3>\n<pre>def func(x):\r\n    return x\r\ninteract(func, x='Hello World')<\/pre>\n<p><a href=\"http:\/\/wiki.thomasandsofia.com\/wp-content\/uploads\/2019\/06\/strn1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1955\" src=\"http:\/\/wiki.thomasandsofia.com\/wp-content\/uploads\/2019\/06\/strn1.png\" alt=\"\" width=\"315\" height=\"60\" srcset=\"https:\/\/wiki.thomasandsofia.com\/wp-content\/uploads\/2019\/06\/strn1.png 315w, https:\/\/wiki.thomasandsofia.com\/wp-content\/uploads\/2019\/06\/strn1-300x57.png 300w, https:\/\/wiki.thomasandsofia.com\/wp-content\/uploads\/2019\/06\/strn1-150x29.png 150w\" sizes=\"auto, (max-width: 315px) 100vw, 315px\" \/><\/a><\/p>\n<h2>Using Decorators<\/h2>\n<pre>@interact(x=True, y=5)\r\ndef myfunc(x, y):\r\n    return (x,y)<\/pre>\n<p><a href=\"http:\/\/wiki.thomasandsofia.com\/wp-content\/uploads\/2019\/06\/dec1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1956\" src=\"http:\/\/wiki.thomasandsofia.com\/wp-content\/uploads\/2019\/06\/dec1.png\" alt=\"\" width=\"311\" height=\"94\" srcset=\"https:\/\/wiki.thomasandsofia.com\/wp-content\/uploads\/2019\/06\/dec1.png 311w, https:\/\/wiki.thomasandsofia.com\/wp-content\/uploads\/2019\/06\/dec1-300x91.png 300w, https:\/\/wiki.thomasandsofia.com\/wp-content\/uploads\/2019\/06\/dec1-150x45.png 150w\" sizes=\"auto, (max-width: 311px) 100vw, 311px\" \/><\/a><\/p>\n<h3>Passing &#8216;Fixed&#8217; (non-user editable) valules<\/h3>\n<pre>@interact(x=True, y=fixed(5))\r\ndef myfunc(x, y):\r\n    return (x,y)<\/pre>\n<p><a href=\"http:\/\/wiki.thomasandsofia.com\/wp-content\/uploads\/2019\/06\/fixed1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1957\" src=\"http:\/\/wiki.thomasandsofia.com\/wp-content\/uploads\/2019\/06\/fixed1.png\" alt=\"\" width=\"306\" height=\"138\" srcset=\"https:\/\/wiki.thomasandsofia.com\/wp-content\/uploads\/2019\/06\/fixed1.png 306w, https:\/\/wiki.thomasandsofia.com\/wp-content\/uploads\/2019\/06\/fixed1-300x135.png 300w, https:\/\/wiki.thomasandsofia.com\/wp-content\/uploads\/2019\/06\/fixed1-150x68.png 150w\" sizes=\"auto, (max-width: 306px) 100vw, 306px\" \/><\/a><\/p>\n<h2>Widget Abbreviations<\/h2>\n<h3>Changing the slider parameters<\/h3>\n<p>By default, the slider min = -x and max = x*3<\/p>\n<pre>def myfunc(x):\r\n    return x\r\ninteract(myfunc, x=widgets.IntSlider(min=0, max=25, step=5, value=10))<\/pre>\n<p><a href=\"http:\/\/wiki.thomasandsofia.com\/wp-content\/uploads\/2019\/06\/Sldr2-1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1958\" src=\"http:\/\/wiki.thomasandsofia.com\/wp-content\/uploads\/2019\/06\/Sldr2-1.png\" alt=\"\" width=\"313\" height=\"73\" srcset=\"https:\/\/wiki.thomasandsofia.com\/wp-content\/uploads\/2019\/06\/Sldr2-1.png 313w, https:\/\/wiki.thomasandsofia.com\/wp-content\/uploads\/2019\/06\/Sldr2-1-300x70.png 300w, https:\/\/wiki.thomasandsofia.com\/wp-content\/uploads\/2019\/06\/Sldr2-1-150x35.png 150w\" sizes=\"auto, (max-width: 313px) 100vw, 313px\" \/><\/a><\/p>\n<p>To abbreviate this, set x to a tuple in the same order:<\/p>\n<pre>def myfunc(x):\r\n    return x\r\ninteract(myfunc, x=(0, 25, 5))<\/pre>\n<p><b>This fails if you try to also pass in a default value!!<\/b><\/p>\n<h3>Dropdown Menus<\/h3>\n<h4>Lists<\/h4>\n<p>Just pass in a list<\/p>\n<pre>def myfunc(x):\r\n    return x\r\ninteract(myfunc, x=['first', 'second','next'])<\/pre>\n<p><a href=\"http:\/\/wiki.thomasandsofia.com\/wp-content\/uploads\/2019\/06\/dd1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1961\" src=\"http:\/\/wiki.thomasandsofia.com\/wp-content\/uploads\/2019\/06\/dd1.png\" alt=\"\" width=\"331\" height=\"73\" srcset=\"https:\/\/wiki.thomasandsofia.com\/wp-content\/uploads\/2019\/06\/dd1.png 331w, https:\/\/wiki.thomasandsofia.com\/wp-content\/uploads\/2019\/06\/dd1-300x66.png 300w, https:\/\/wiki.thomasandsofia.com\/wp-content\/uploads\/2019\/06\/dd1-150x33.png 150w\" sizes=\"auto, (max-width: 331px) 100vw, 331px\" \/><\/a><\/p>\n<h4>Dictionaries<\/h4>\n<p><b>Note: These return the value and display the keys!<\/b><\/p>\n<pre>def myfunc(x):\r\n    return x\r\ninteract(myfunc, x={'first':1, 'second':2,'next':3})<\/pre>\n<p><a href=\"http:\/\/wiki.thomasandsofia.com\/wp-content\/uploads\/2019\/06\/dd2.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1962\" src=\"http:\/\/wiki.thomasandsofia.com\/wp-content\/uploads\/2019\/06\/dd2.png\" alt=\"\" width=\"333\" height=\"73\" srcset=\"https:\/\/wiki.thomasandsofia.com\/wp-content\/uploads\/2019\/06\/dd2.png 333w, https:\/\/wiki.thomasandsofia.com\/wp-content\/uploads\/2019\/06\/dd2-300x66.png 300w, https:\/\/wiki.thomasandsofia.com\/wp-content\/uploads\/2019\/06\/dd2-150x33.png 150w\" sizes=\"auto, (max-width: 333px) 100vw, 333px\" \/><\/a><\/p>\n<h2>Interactive<\/h2>\n<p>Allows you to use values from existing controls.<\/p>\n<pre>from IPython.display import display\r\ndef f(a, b):\r\n    display(a+b)\r\n    return a+b\r\n\r\nw = interactive(f, a=10, b=20)\r\ntype(w)<\/pre>\n<p>ipywidgets.widgets.interaction.interactive<\/p>\n<pre>w.children<\/pre>\n<p>(IntSlider(value=10, description=&#8217;a&#8217;, max=30, min=-10),<br \/>\nIntSlider(value=20, description=&#8217;b&#8217;, max=60, min=-20),<br \/>\nOutput())<br \/>\n<b>two IntSliders and one Output<\/b><br \/>\nRun the function<\/p>\n<pre>display(w)<\/pre>\n<p><a href=\"http:\/\/wiki.thomasandsofia.com\/wp-content\/uploads\/2019\/06\/display1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1963\" src=\"http:\/\/wiki.thomasandsofia.com\/wp-content\/uploads\/2019\/06\/display1.png\" alt=\"\" width=\"303\" height=\"94\" srcset=\"https:\/\/wiki.thomasandsofia.com\/wp-content\/uploads\/2019\/06\/display1.png 303w, https:\/\/wiki.thomasandsofia.com\/wp-content\/uploads\/2019\/06\/display1-300x93.png 300w, https:\/\/wiki.thomasandsofia.com\/wp-content\/uploads\/2019\/06\/display1-150x47.png 150w\" sizes=\"auto, (max-width: 303px) 100vw, 303px\" \/><\/a><\/p>\n<h1>GUI Widget Basics<\/h1>\n<p><a href=\"https:\/\/www.udemy.com\/complete-python-bootcamp\/learn\/lecture\/9523224#questions\" target=\"_blank\" rel=\"noopener\">https:\/\/www.udemy.com\/complete-python-bootcamp\/learn\/lecture\/9523224#questions<\/a><\/p>\n<pre>import ipywidgets as widgets<\/pre>\n<h2>Common Widgets<\/h2>\n<h3>IntSlider<\/h3>\n<pre>widgets.IntSlider()<\/pre>\n<p>Shows the widget<br \/>\nTo display later:<\/p>\n<pre>from IPython.display import display\r\nw = widgets.IntSlider()\r\ndisplay(w)<\/pre>\n<h3>Close a widget<\/h3>\n<pre>w.close()<\/pre>\n<h3>view widget parameters<\/h3>\n<pre>w.keys<\/pre>\n<h3>Get and Set a Widget value<\/h3>\n<p>Example:<\/p>\n<pre>print(w.value)<\/pre>\n<p>22<\/p>\n<pre>w.value = 44<\/pre>\n<p>The widget will self adjust to the new value.<br \/>\n<b>Note: Many widget values can be adjusted on the fly: max, min, step, value, etc.<\/b><\/p>\n<h2>Linking Widgets<\/h2>\n<pre>a = widgets.FloatText()\r\ndisplay(a)<\/pre>\n<p>&#8211; shows a text box &#8211;<\/p>\n<pre>a = widgets.FloatText()\r\nb = widget.FloatSlider()\r\ndisplay(a, b)<\/pre>\n<p>&#8211; shows a text box &#8211;<br \/>\n&#8211; shows a slider &#8211;<br \/>\nEach of these widgets are independant<\/p>\n<p>To link these two&#8230;<br \/>\n<b>Note:jslink = JavaScript Link<\/b><\/p>\n<pre>a = widgets.FloatText()\r\nb = widget.FloatSlider()\r\ndisplay(a, b)\r\nmylink = widgets.jslink( (a,'value'), (b,'value))<\/pre>\n<p><b>Different values can be linked, such as the value of one to the max of another.<\/b><\/p>\n<h3>Unlinking<\/h3>\n<pre>mylink.unlink()<\/pre>\n<h1>Widgets List<\/h1>\n<p><a href=\"https:\/\/www.udemy.com\/complete-python-bootcamp\/learn\/lecture\/9523228#questions\" target=\"_blank\" rel=\"noopener\">https:\/\/www.udemy.com\/complete-python-bootcamp\/learn\/lecture\/9523228#questions<\/a><\/p>\n<h2>Show all widgets<\/h2>\n<pre>import ipywidgets as widgets\r\n\r\n# Show all available widgets!\r\nfor item in widgets.Widget.widget_types.items():\r\n    print(item[0][2][:-5])<\/pre>\n<p>Layout<br \/>\nAccordion<br \/>\nAudio<br \/>\nBoundedFloatText<br \/>\nBoundedIntText<br \/>\nBox<br \/>\nButton<br \/>\nButtonStyle<br \/>\nCheckbox<br \/>\nColorPicker<br \/>\nControllerAxis<br \/>\nControllerButton<br \/>\nController<br \/>\nDOMWidget<br \/>\nDatePicker<br \/>\nDescriptionStyle<br \/>\nDirectionalLink<br \/>\nDropdown<br \/>\nFloatLogSlider<br \/>\nFloatProgress<br \/>\nFloatRangeSlider<br \/>\nFloatSlider<br \/>\nFloatText<br \/>\nGridBox<br \/>\nHBox<br \/>\nHTMLMath<br \/>\nHTML<br \/>\nImage<br \/>\nIntProgress<br \/>\nIntRangeSlider<br \/>\nIntSlider<br \/>\nIntText<br \/>\nLabel<br \/>\nLink<br \/>\nPassword<br \/>\nPlay<br \/>\nProgressStyle<br \/>\nRadioButtons<br \/>\nSelect<br \/>\nSelectMultiple<br \/>\nSelectionRangeSlider<br \/>\nSelectionSlider<br \/>\nSliderStyle<br \/>\nTab<br \/>\nText<br \/>\nTextarea<br \/>\nToggleButton<br \/>\nToggleButtons<br \/>\nToggleButtonsStyle<br \/>\nVBox<br \/>\nValid<br \/>\nVideo<br \/>\nOutput<\/p>\n<h2>Numeric<\/h2>\n<h3>IntSlider<\/h3>\n<pre>widgets.IntSlider(\r\n    value=7,\r\n    min=0,\r\n    max=10,\r\n    step=1,\r\n    description='Test:',\r\n    disabled=False,\r\n    continuous_update=False,\r\n    orientation='horizontal',\r\n    readout=True,\r\n    readout_format='d'\r\n)<\/pre>\n<h3>FloatSlider<\/h3>\n<pre>widgets.FloatSlider(\r\n    value=7.5,\r\n    min=0,\r\n    max=10.0,\r\n    step=0.1,\r\n    description='Test:',\r\n    disabled=False,\r\n    continuous_update=False,\r\n    orientation='horizontal',\r\n    readout=True,\r\n    readout_format='.1f',\r\n)<\/pre>\n<p><b>Sliders can be displayed vertically!<\/b><\/p>\n<pre>    orientation='vertical',<\/pre>\n<p>&nbsp;<\/p>\n<h3>IntRangeSlider<\/h3>\n<pre>widgets.IntRangeSlider(\r\n    value=[5, 7],\r\n    min=0,\r\n    max=10,\r\n    step=1,\r\n    description='Test:',\r\n    disabled=False,\r\n    continuous_update=False,\r\n    orientation='horizontal',\r\n    readout=True,\r\n    readout_format='d',\r\n)<\/pre>\n<h3>FloatRangeSlider<\/h3>\n<pre>widgets.FloatRangeSlider(\r\n    value=[5, 7.5],\r\n    min=0,\r\n    max=10.0,\r\n    step=0.1,\r\n    description='Test:',\r\n    disabled=False,\r\n    continuous_update=False,\r\n    orientation='horizontal',\r\n    readout=True,\r\n    readout_format='.1f',\r\n)<\/pre>\n<h3>IntProgress<\/h3>\n<pre>widgets.IntProgress(\r\n    value=7,\r\n    min=0,\r\n    max=10,\r\n    step=1,\r\n    description='Loading:',\r\n    bar_style='', # 'success', 'info', 'warning', 'danger' or ''\r\n    orientation='horizontal'\r\n)<\/pre>\n<h3>FloatProgress<\/h3>\n<pre>widgets.FloatProgress(\r\n    value=7.5,\r\n    min=0,\r\n    max=10.0,\r\n    step=0.1,\r\n    description='Loading:',\r\n    bar_style='info',\r\n    orientation='horizontal'\r\n)<\/pre>\n<h3>BoundedIntText<\/h3>\n<pre>widgets.BoundedIntText(\r\n    value=7,\r\n    min=0,\r\n    max=10,\r\n    step=1,\r\n    description='Text:',\r\n    disabled=False\r\n)<\/pre>\n<h3>BoundedFloatText<\/h3>\n<pre>widgets.BoundedFloatText(\r\n    value=7.5,\r\n    min=0,\r\n    max=10.0,\r\n    step=0.1,\r\n    description='Text:',\r\n    disabled=False\r\n)<\/pre>\n<h3>IntText<\/h3>\n<pre>widgets.IntText(\r\n    value=7,\r\n    description='Any:',\r\n    disabled=False\r\n)<\/pre>\n<h3>FloatText<\/h3>\n<pre>widgets.FloatText(\r\n    value=7.5,\r\n    description='Any:',\r\n    disabled=False\r\n)<\/pre>\n<h2>Boolean Widgets<\/h2>\n<h3>ToggleButton<\/h3>\n<pre>widgets.ToggleButton(\r\n    value=False,\r\n    description='Click me',\r\n    disabled=False,\r\n    button_style='', # 'success', 'info', 'warning', 'danger' or ''\r\n    tooltip='Description',\r\n    icon='check'\r\n)<\/pre>\n<h3>Checkbox<\/h3>\n<pre>widgets.Checkbox(\r\n    value=False,\r\n    description='Check me',\r\n    disabled=False\r\n)<\/pre>\n<h3>Valid<\/h3>\n<p>Read Only indicator<\/p>\n<pre>widgets.Valid(\r\n    value=False,\r\n    description='Valid!',\r\n)<\/pre>\n<h2>Selection Widgets<\/h2>\n<p>There are several widgets that can be used to display single selection lists, and two that can be used to select multiple values. All inherit from the same base class. You can specify the <strong>enumeration of selectable options by passing a list<\/strong> (options are either (label, value) pairs, or simply values for which the labels are derived by calling <code>str<\/code>). You can <strong>also specify the enumeration as a dictionary<\/strong>, in which case the <strong>keys will be used as the item displayed<\/strong> in the list and the corresponding <strong>value will be used<\/strong> when an item is selected (in this case, since dictionaries are unordered, the displayed order of items in the widget is unspecified).<\/p>\n<h3>Dropdown<\/h3>\n<pre>widgets.Dropdown(\r\n    options=['1', '2', '3'],\r\n    value='2',\r\n    description='Number:',\r\n    disabled=False,\r\n)<\/pre>\n<p>or<\/p>\n<pre>widgets.Dropdown(\r\n    options={'One': 1, 'Two': 2, 'Three': 3},\r\n    value=2,\r\n    description='Number:',\r\n)<\/pre>\n<h3>RadioButtons<\/h3>\n<pre>widgets.RadioButtons(\r\n    options=['pepperoni', 'pineapple', 'anchovies'],\r\n    # value='pineapple',\r\n    description='Pizza topping:',\r\n    disabled=False\r\n)<\/pre>\n<h3>Select<\/h3>\n<pre>widgets.Select(\r\n    options=['Linux', 'Windows', 'OSX'],\r\n    value='OSX',\r\n    # rows=10,\r\n    description='OS:',\r\n    disabled=False\r\n)<\/pre>\n<h3>SelectionSlider<\/h3>\n<pre>widgets.SelectionSlider(\r\n    options=['scrambled', 'sunny side up', 'poached', 'over easy'],\r\n    value='sunny side up',\r\n    description='I like my eggs ...',\r\n    disabled=False,\r\n    continuous_update=False,\r\n    orientation='horizontal',\r\n    readout=True\r\n)<\/pre>\n<h3>SelectionRangeSlider<\/h3>\n<p>The value, index, and label keys are 2-tuples of the min and max values selected. The options must be nonempty.<\/p>\n<pre>import datetime\r\ndates = [datetime.date(2015,i,1) for i in range(1,13)]\r\noptions = [(i.strftime('%b'), i) for i in dates]\r\nwidgets.SelectionRangeSlider(\r\n    options=options,\r\n    index=(0,11),\r\n    description='Months (2015)',\r\n    disabled=False\r\n)<\/pre>\n<h3>ToggleButtons<\/h3>\n<pre>widgets.ToggleButtons(\r\n    options=['Slow', 'Regular', 'Fast'],\r\n    description='Speed:',\r\n    disabled=False,\r\n    button_style='', # 'success', 'info', 'warning', 'danger' or ''\r\n    tooltips=['Description of slow', 'Description of regular', 'Description of fast'],\r\n    # icons=['check'] * 3\r\n)<\/pre>\n<h3>SelectMultiple<\/h3>\n<p>Multiple values can be selected with [Shift] and\/or [Ctrl] (or command) pressed and mouse clicks or arrow keys.<\/p>\n<pre>widgets.SelectMultiple(\r\n    options=['Apples', 'Oranges', 'Pears'],\r\n    value=['Oranges'],\r\n    # rows=10,\r\n    description='Fruits',\r\n    disabled=False\r\n)<\/pre>\n<h2>String Widgets<\/h2>\n<h3>Text<\/h3>\n<pre>widgets.Text(\r\n    value='Hello World',\r\n    placeholder='Type something',\r\n    description='String:',\r\n    disabled=False\r\n)<\/pre>\n<h3>Textarea<\/h3>\n<pre>widgets.Textarea(\r\n    value='Hello World',\r\n    placeholder='Type something',\r\n    description='String:',\r\n    disabled=False\r\n)<\/pre>\n<h3>Label<\/h3>\n<p>The Label widget is useful if you need to build a custom description next to a control using similar styling to the built-in control descriptions.<\/p>\n<pre>widgets.HBox([widgets.Label(value=\"The $m$ in $E=mc^2$:\"), widgets.FloatSlider()])<\/pre>\n<h3>HTML<\/h3>\n<pre>widgets.HTML(\r\n    value=\"Hello <b>World<\/b>\",\r\n    placeholder='Some HTML',\r\n    description='Some HTML',\r\n)<\/pre>\n<h3>HTML Math<\/h3>\n<pre>widgets.HTMLMath(\r\n    value=r\"Some math and <i>HTML<\/i>: \\(x^2\\) and $$\\frac{x+1}{x-1}$$\",\r\n    placeholder='Some HTML',\r\n    description='Some HTML',\r\n)<\/pre>\n<h3>Image<\/h3>\n<pre>file = open(\"images\/WidgetArch.png\", \"rb\")\r\nimage = file.read()\r\nwidgets.Image(\r\n    value=image,\r\n    format='png',\r\n    width=300,\r\n    height=400,\r\n)<\/pre>\n<h3>Button<\/h3>\n<pre>widgets.Button(\r\n    description='Click me',\r\n    disabled=False,\r\n    button_style='', # 'success', 'info', 'warning', 'danger' or ''\r\n    tooltip='Click me',\r\n    icon='check'\r\n)<\/pre>\n<h1>Widget Styling and Layout<\/h1>\n<p><a href=\"https:\/\/www.udemy.com\/complete-python-bootcamp\/learn\/lecture\/9523230#questions\" target=\"_blank\" rel=\"noopener\">https:\/\/www.udemy.com\/complete-python-bootcamp\/learn\/lecture\/9523230#questions<\/a><\/p>\n<\/div>\n<p>This is based on standard HTML\/CSS values.<\/p>\n<pre>import ipywidgets as widgets\r\nfrom IPython.display import display<\/pre>\n<p>Create a generic slider<\/p>\n<pre>w1 = widgets.IntSlider()\r\ndisplay(w1)<\/pre>\n<p>&#8212; Generic slider &#8212;<br \/>\nNow style it using the built in css options<\/p>\n<pre>w1.layout.margin = 'auto' #centers on the page\r\nw1.layout.height = '75px'<\/pre>\n<p>&#8212; Slider attributes just changed to reflect new values &#8212;<\/p>\n<p>Now create a new slider that looks like the last one.<\/p>\n<pre>w2 = widgets.IntSlider(value=15, description='New Slider')\r\ndisplay(w2)\r\nw2.layout = w1.layout<\/pre>\n<p>Boom! Identical styling!<\/p>\n<h2>BootStrap<\/h2>\n<p>Most widgets offer a list of pre-defined styles that can be passed in as arguments or parameters during their creation. These are based on BootStrap terms such as:<\/p>\n<ul>\n<li>primary<\/li>\n<li>success<\/li>\n<li>info<\/li>\n<li>warning<\/li>\n<li>danger<\/li>\n<\/ul>\n<pre>widgets.Button(description='Ordinary Button', button_style='')<\/pre>\n<p>&#8212; Normal button &#8212;<br \/>\n<code>button_style='danger'<\/code> Turns Red<br \/>\n<code>button_style='warning'<\/code> Turns Orange<br \/>\n<code>button_style='info'<\/code> Turns Cyan (or something else)<\/p>\n<h2>Style attribute<\/h2>\n<p><code>layout<\/code> is predominantly for top level positioning, etc.<br \/>\nStyle on the other hand, is for non-layout related stylings.. such as custom colors, etc.<br \/>\nTo view the available styles:<\/p>\n<pre>b = widgets.Button(description='Colored Button')\r\nb.style.keys<\/pre>\n<p>[&#8216;_model_module&#8217;,<br \/>\n&#8216;_model_module_version&#8217;,<br \/>\n&#8216;_model_name&#8217;,<br \/>\n&#8216;_view_count&#8217;,<br \/>\n&#8216;_view_module&#8217;,<br \/>\n&#8216;_view_module_version&#8217;,<br \/>\n&#8216;_view_name&#8217;,<br \/>\n&#8216;button_color&#8217;,<br \/>\n&#8216;font_weight&#8217;]<\/p>\n<h2 id=\"style-vs.-layout\"><code>style<\/code> vs. <code>layout<\/code><\/h2>\n<p>There are two ways to change the appearance of widgets in the browser. The first is through the <code>layout<\/code> attribute which exposes layout-related CSS properties for the top-level DOM element of widgets, such as margins and positioning. The second is through the <code>style<\/code> attribute which exposes non-layout related attributes like button color and font weight. While <code>layout<\/code> is general to all widgets and containers of widgets, <code>style<\/code> offers tools specific to each type of widget.<\/p>\n<p>Thorough understanding of all that <code>layout<\/code> has to offer requires knowledge of front-end web development, including HTML and CSS. This section provides a brief overview of things that can be adjusted using <code>layout<\/code>. However, the full set of tools are provided in the separate notebook <strong>Advanced Widget Styling with Layout<\/strong>.<\/p>\n<p>To learn more about web development, including HTML and CSS, check out the course <a href=\"https:\/\/www.udemy.com\/python-and-django-full-stack-web-developer-bootcamp\/\" target=\"_blank\" rel=\"noopener\"> Python and Django Full Stack Web Developer Bootcamp<\/a><\/p>\n<p>Basic styling is more intuitive as it relates directly to each type of widget. Here we provide a set of helpful examples of the <code>style<\/code> attribute.<\/p>\n<h2 id=\"The-layout-attribute\">The <code>layout<\/code> attribute<\/h2>\n<p>Jupyter interactive widgets have a <code>layout<\/code> attribute exposing a number of CSS properties that impact how widgets are laid out. These properties map to the values of the CSS properties of the same name (underscores being replaced with dashes), applied to the top DOM elements of the corresponding widget.<\/p>\n<h4 id=\"Sizes\">Sizes<\/h4>\n<ul>\n<li><code>height<\/code><\/li>\n<li><code>width<\/code><\/li>\n<li><code>max_height<\/code><\/li>\n<li><code>max_width<\/code><\/li>\n<li><code>min_height<\/code><\/li>\n<li><code>min_width<\/code><\/li>\n<\/ul>\n<h4 id=\"Display\">Display<\/h4>\n<ul>\n<li><code>visibility<\/code><\/li>\n<li><code>display<\/code><\/li>\n<li><code>overflow<\/code><\/li>\n<li><code>overflow_x<\/code><\/li>\n<li><code>overflow_y<\/code><\/li>\n<\/ul>\n<h4 id=\"Box-model\">Box model<\/h4>\n<ul>\n<li><code>border<\/code><\/li>\n<li><code>margin<\/code><\/li>\n<li><code>padding<\/code><\/li>\n<\/ul>\n<h4 id=\"Positioning\">Positioning<\/h4>\n<ul>\n<li><code>top<\/code><\/li>\n<li><code>left<\/code><\/li>\n<li><code>bottom<\/code><\/li>\n<li><code>right<\/code><\/li>\n<\/ul>\n<h4 id=\"Flexbox\">Flexbox<\/h4>\n<ul>\n<li><code>order<\/code><\/li>\n<li><code>flex_flow<\/code><\/li>\n<li><code>align_items<\/code><\/li>\n<li><code>flex<\/code><\/li>\n<li><code>align_self<\/code><\/li>\n<li><code>align_content<\/code><\/li>\n<li><code>justify_content<\/code><\/li>\n<\/ul>\n<h2 id=\"A-quick-example-of-layout\">A quick example of <code>layout<\/code><\/h2>\n<p>We&#8217;ve already seen what a slider looks like without any layout adjustments:<\/p>\n<pre>import ipywidgets as widgets\r\nfrom IPython.display import display\r\n\r\nw = widgets.IntSlider()\r\ndisplay(w)<\/pre>\n<p>Let&#8217;s say we wanted to change two of the properties of this widget: margin and height. We want to center the slider in the output area and increase its height. This can be done by adding layout attributes to w<\/p>\n<pre>w.layout.margin = 'auto'\r\nw.layout.height = '75px'<\/pre>\n<p>Notice that the slider changed positions on the page immediately!<\/p>\n<p>Layout settings can be passed from one widget to another widget of the same type. Let&#8217;s first create a new IntSlider:<\/p>\n<pre>x = widgets.IntSlider(value=15,description='New slider')\r\ndisplay(x)<\/pre>\n<p>Now assign w*&#8217;s layout settings to *x:<\/p>\n<pre>x.layout = w.layout<\/pre>\n<div class=\"cell text_cell rendered selected\" tabindex=\"2\">\n<div class=\"inner_cell\">\n<div class=\"text_cell_render rendered_html\" tabindex=\"-1\">\n<p>That&#8217;s it! For a complete set of instructions on using <code>layout<\/code>, visit the <strong>Advanced Widget Styling &#8211; Layout<\/strong> notebook.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"cell text_cell unselected rendered\" tabindex=\"2\"><\/div>\n<div class=\"inner_cell\">\n<div class=\"text_cell_render rendered_html\" tabindex=\"-1\">\n<h2 id=\"Predefined-styles\">Predefined styles<\/h2>\n<p>Before we investigate the <code>style<\/code> attribute, it should be noted that many widgets offer a list of pre-defined styles that can be passed as arguments during creation.<\/p>\n<p>For example, the <code>Button<\/code> widget has a <code>button_style<\/code> attribute that may take 5 different values:<\/p>\n<ul>\n<li><code>'primary'<\/code><\/li>\n<li><code>'success'<\/code><\/li>\n<li><code>'info'<\/code><\/li>\n<li><code>'warning'<\/code><\/li>\n<li><code>'danger'<\/code><\/li>\n<\/ul>\n<p>besides the default empty string <code>''<\/code>.<\/p>\n<pre>import ipywidgets as widgets\r\n\r\nwidgets.Button(description='Ordinary Button', button_style='')<\/pre>\n<pre>widgets.Button(description='Danger Button', button_style='danger')<\/pre>\n<div class=\"cell text_cell rendered selected\" tabindex=\"2\">\n<div class=\"inner_cell\">\n<div class=\"text_cell_render rendered_html\" tabindex=\"-1\">\n<h2 id=\"The-style-attribute\">The <code>style<\/code> attribute<\/h2>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"cell text_cell unselected rendered\" tabindex=\"2\"><\/div>\n<div class=\"inner_cell\">\n<div class=\"text_cell_render rendered_html\" tabindex=\"-1\">\n<p>While the <code>layout<\/code> attribute only exposes layout-related CSS properties for the top-level DOM element of widgets, the <code>style<\/code> attribute is used to expose non-layout related styling attributes of widgets.<\/p>\n<p>However, the properties of the <code>style<\/code> atribute are specific to each widget type.<\/p>\n<pre>b1 = widgets.Button(description='Custom color')\r\nb1.style.button_color = 'lightgreen'\r\nb1<\/pre>\n<p>You can get a list of the style attributes for a widget with the <code>keys<\/code> property.<\/p>\n<pre>b1.style.keys<\/pre>\n<p>Note that <code>widgets.Button().style.keys<\/code> also works.<\/p>\n<p>Just like the <code>layout<\/code> attribute, widget styles can be assigned to other widgets.<\/p>\n<pre>b2 = widgets.Button()\r\nb2.style = b1.style\r\nb2<\/pre>\n<p>Note that only the style was picked up by <strong>b2<\/strong>, not any other parameters like <code>description<\/code>.<\/p>\n<p>Widget styling attributes are specific to each widget type.<\/p>\n<pre>s1 = widgets.IntSlider(description='Blue handle')\r\ns1.style.handle_color = 'lightblue'\r\ns1<\/pre>\n<h2 id=\"Widget-style-traits\">Widget style traits<\/h2>\n<p>These are traits that belong to some of the more common widgets:<\/p>\n<h4 id=\"Button\">Button<\/h4>\n<ul>\n<li><code>button_color<\/code><\/li>\n<li><code>font_weight<\/code><\/li>\n<\/ul>\n<h4 id=\"IntSlider,-FloatSlider,-IntRangeSlider,-FloatRangeSlider\">IntSlider, FloatSlider, IntRangeSlider, FloatRangeSlider<\/h4>\n<ul>\n<li><code>description_width<\/code><\/li>\n<li><code>handle_color<\/code><\/li>\n<\/ul>\n<h4 id=\"IntProgress,-FloatProgress\">IntProgress, FloatProgress<\/h4>\n<ul>\n<li><code>bar_color<\/code><\/li>\n<li><code>description_width<\/code><\/li>\n<\/ul>\n<p>Most others such as <code>ToggleButton<\/code>, <code>Checkbox<\/code>, <code>Dropdown<\/code>, <code>RadioButtons<\/code>, <code>Select<\/code> and <code>Text<\/code> only have <code>description_width<\/code> as an adjustable trait.<\/p>\n<h1>Example of What Widgets can do!<\/h1>\n<p><a href=\"https:\/\/www.udemy.com\/complete-python-bootcamp\/learn\/lecture\/9523238#questions\" target=\"_blank\" rel=\"noopener\">https:\/\/www.udemy.com\/complete-python-bootcamp\/learn\/lecture\/9523238#questions<\/a><\/p>\n<p>Um, yeah&#8230; very complicated example used just for demonstration.\u00a0 Pretty cool, but no notes to take.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>&lt; Section 16 Introduction to GUIs https:\/\/www.udemy.com\/complete-python-bootcamp\/learn\/lecture\/3547984#questions Welcome to the bonus GUI Section of this course! All notebooks associated with this section are located under the GUI folder in the NbViewer or Github repository containing the course notebooks. There are many,many Graphical User Interface options for Python users. Here is the link to the documentation ..<\/p>\n<div class=\"clear-fix\"><\/div>\n<p><a href=\"https:\/\/wiki.thomasandsofia.com\/?p=1951\" title=\"read more...\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1951","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/wiki.thomasandsofia.com\/index.php?rest_route=\/wp\/v2\/posts\/1951","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wiki.thomasandsofia.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wiki.thomasandsofia.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wiki.thomasandsofia.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wiki.thomasandsofia.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1951"}],"version-history":[{"count":8,"href":"https:\/\/wiki.thomasandsofia.com\/index.php?rest_route=\/wp\/v2\/posts\/1951\/revisions"}],"predecessor-version":[{"id":1969,"href":"https:\/\/wiki.thomasandsofia.com\/index.php?rest_route=\/wp\/v2\/posts\/1951\/revisions\/1969"}],"wp:attachment":[{"href":"https:\/\/wiki.thomasandsofia.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1951"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wiki.thomasandsofia.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1951"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wiki.thomasandsofia.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1951"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}