examples/Interactive Widgets/Widget List.ipynb

{
 "metadata": {
  "kernelspec": {
   "codemirror_mode": {
    "name": "python",
    "version": 2
   },
   "display_name": "Python 2",
   "language": "python",
   "name": "python2"
  },
  "name": "",
  "signature": "sha256:83b39d018a7a6ae0a324b9f3d38debafbfb2ed0a114e4bbd357fb318f8f23438"
 },
 "nbformat": 3,
 "nbformat_minor": 0,
 "worksheets": [
  {
   "cells": [
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "[Index](Index.ipynb) - [Back](Widget Basics.ipynb) - [Next](Widget Events.ipynb)"
     ]
    },
    {
     "cell_type": "heading",
     "level": 1,
     "metadata": {},
     "source": [
      "Widget List"
     ]
    },
    {
     "cell_type": "heading",
     "level": 2,
     "metadata": {},
     "source": [
      "Complete list"
     ]
    },
    {
     "cell_type": "markdown",
     "metadata": {
      "slideshow": {
       "slide_type": "slide"
      }
     },
     "source": [
      "For a complete list of the widgets available to you, you can list the classes in the widget namespace (as seen below).  `Widget` and `DOMWidget`, not listed below, are base classes."
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "from IPython.html import widgets\n",
      "[n for n in dir(widgets) if not n.endswith('Widget') and n[0] == n[0].upper() and not n[0] == '_']"
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "heading",
     "level": 2,
     "metadata": {
      "slideshow": {
       "slide_type": "slide"
      }
     },
     "source": [
      "Numeric widgets"
     ]
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "There are 8 widgets distributed with IPython that are designed to display numeric values.  Widgets exist for displaying integers and floats, both bounded and unbounded.  The integer widgets share a similar naming scheme to their floating point counterparts.  By replacing `Float` with `Int` in the widget name, you can find the Integer equivalent."
     ]
    },
    {
     "cell_type": "heading",
     "level": 3,
     "metadata": {
      "slideshow": {
       "slide_type": "slide"
      }
     },
     "source": [
      "FloatSlider"
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "widgets.FloatSlider(\n",
      "    value=7.5,\n",
      "    min=5.0,\n",
      "    max=10.0,\n",
      "    step=0.1,\n",
      "    description='Test:',\n",
      ")"
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "Sliders can also be **displayed vertically**."
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "widgets.FloatSlider(\n",
      "    value=7.5,\n",
      "    min=5.0,\n",
      "    max=10.0,\n",
      "    step=0.1,\n",
      "    description='Test',\n",
      "    orientation='vertical',\n",
      ")"
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "heading",
     "level": 3,
     "metadata": {
      "slideshow": {
       "slide_type": "slide"
      }
     },
     "source": [
      "FloatProgress"
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "widgets.FloatProgress(\n",
      "    value=7.5,\n",
      "    min=5.0,\n",
      "    max=10.0,\n",
      "    step=0.1,\n",
      "    description='Loading:',\n",
      ")"
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "heading",
     "level": 3,
     "metadata": {
      "slideshow": {
       "slide_type": "slide"
      }
     },
     "source": [
      "BoundedFloatText"
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "widgets.BoundedFloatText(\n",
      "    value=7.5,\n",
      "    min=5.0,\n",
      "    max=10.0,\n",
      "    description='Text:',\n",
      ")"
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "heading",
     "level": 3,
     "metadata": {
      "slideshow": {
       "slide_type": "slide"
      }
     },
     "source": [
      "FloatText"
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "widgets.FloatText(\n",
      "    value=7.5,\n",
      "    description='Any:',\n",
      ")"
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "heading",
     "level": 2,
     "metadata": {
      "slideshow": {
       "slide_type": "slide"
      }
     },
     "source": [
      "Boolean widgets"
     ]
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "There are two widgets that are designed to display a boolean value."
     ]
    },
    {
     "cell_type": "heading",
     "level": 3,
     "metadata": {},
     "source": [
      "ToggleButton"
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "widgets.ToggleButton(\n",
      "    description='Click me',\n",
      "    value=False,\n",
      ")"
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "heading",
     "level": 3,
     "metadata": {
      "slideshow": {
       "slide_type": "slide"
      }
     },
     "source": [
      "Checkbox"
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "widgets.Checkbox(\n",
      "    description='Check me',\n",
      "    value=True,\n",
      ")"
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "heading",
     "level": 2,
     "metadata": {
      "slideshow": {
       "slide_type": "slide"
      }
     },
     "source": [
      "Selection widgets"
     ]
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "There are four widgets that can be used to display single selection lists.  All four inherit from the same base class.  You can specify the **enumeration of selectables by passing a list**.  You can **also specify the enumeration as a dictionary**, in which case the **keys will be used as the item displayed** in the list and the corresponding **value will be returned** when an item is selected."
     ]
    },
    {
     "cell_type": "heading",
     "level": 3,
     "metadata": {
      "slideshow": {
       "slide_type": "slide"
      }
     },
     "source": [
      "Dropdown"
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "from IPython.display import display\n",
      "w = widgets.Dropdown(\n",
      "    values=[1, 2, 3],\n",
      "    value=2,\n",
      "    description='Number:',\n",
      ")\n",
      "display(w)"
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "w.value"
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "The following is also valid:"
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "w = widgets.Dropdown(\n",
      "    values={'One': 1, 'Two': 2, 'Three': 3},\n",
      "    value=2,\n",
      "    description='Number:',\n",
      ")\n",
      "display(w)"
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "w.value"
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "heading",
     "level": 3,
     "metadata": {
      "slideshow": {
       "slide_type": "slide"
      }
     },
     "source": [
      "RadioButtons"
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "widgets.RadioButtons(\n",
      "    description='Pizza topping:',\n",
      "    values=['pepperoni', 'pineapple', 'anchovies'],\n",
      ")"
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "heading",
     "level": 3,
     "metadata": {
      "slideshow": {
       "slide_type": "slide"
      }
     },
     "source": [
      "Select"
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "widgets.Select(\n",
      "    description='OS:',\n",
      "    values=['Linux', 'Windows', 'OSX'],\n",
      ")"
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "heading",
     "level": 3,
     "metadata": {
      "slideshow": {
       "slide_type": "slide"
      }
     },
     "source": [
      "ToggleButtons"
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "widgets.ToggleButtons(\n",
      "    description='Speed:',\n",
      "    values=['Slow', 'Regular', 'Fast'],\n",
      ")"
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "heading",
     "level": 2,
     "metadata": {
      "slideshow": {
       "slide_type": "slide"
      }
     },
     "source": [
      "String widgets"
     ]
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "There are 4 widgets that can be used to display a string value.  Of those, the **`Text` and `Textarea` widgets accept input**.  The **`Latex` and `HTML` widgets display the string** as either Latex or HTML respectively, but **do not accept input**."
     ]
    },
    {
     "cell_type": "heading",
     "level": 3,
     "metadata": {
      "slideshow": {
       "slide_type": "slide"
      }
     },
     "source": [
      "Text"
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "widgets.Text(\n",
      "    description='String:',\n",
      "    value='Hello World',\n",
      ")"
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "heading",
     "level": 3,
     "metadata": {},
     "source": [
      "Textarea"
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "widgets.Textarea(\n",
      "    description='String:',\n",
      "    value='Hello World',\n",
      ")"
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "heading",
     "level": 3,
     "metadata": {
      "slideshow": {
       "slide_type": "slide"
      }
     },
     "source": [
      "Latex"
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "widgets.Latex(\n",
      "    value=\"$$\\\\frac{n!}{k!(n-k)!} = \\\\binom{n}{k}$$\",\n",
      ")"
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "heading",
     "level": 3,
     "metadata": {},
     "source": [
      "HTML"
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "widgets.HTML(\n",
      "    value=\"Hello <b>World</b>\"\n",
      ")"
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "heading",
     "level": 2,
     "metadata": {
      "slideshow": {
       "slide_type": "slide"
      }
     },
     "source": [
      "Button"
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "widgets.Button(description='Click me')"
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "[Index](Index.ipynb) - [Back](Widget Basics.ipynb) - [Next](Widget Events.ipynb)"
     ]
    }
   ],
   "metadata": {}
  }
 ]
}