16-Bonus Material - Introduction to GUIs/07-Advanced Widget List.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Advanced Widget List\n",
    "\n",
    "This notebook is an extension of **Widget List**, describing even more of the GUI widgets available!"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import ipywidgets as widgets"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "### Output\n",
    "The `Output` widget can capture and display stdout, stderr and [rich output generated by IPython](http://ipython.readthedocs.io/en/stable/api/generated/IPython.display.html#module-IPython.display). After the widget is created, direct output to it using a context manager."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "out = widgets.Output()\n",
    "out"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "You can print text to the output area as shown below."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "with out:\n",
    "    for i in range(10):\n",
    "        print(i, 'Hello world!')"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Rich material can also be directed to the output area. Anything which displays nicely in a Jupyter notebook will also display well in the `Output` widget."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "from IPython.display import YouTubeVideo\n",
    "with out:\n",
    "    display(YouTubeVideo('eWzY2nGfkXk'))"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Play (Animation) widget\n",
    "The `Play` widget is useful to perform animations by iterating on a sequence of integers with a certain speed. The value of the slider below is linked to the player.\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "play = widgets.Play(\n",
    "    # interval=10,\n",
    "    value=50,\n",
    "    min=0,\n",
    "    max=100,\n",
    "    step=1,\n",
    "    description=\"Press play\",\n",
    "    disabled=False\n",
    ")\n",
    "slider = widgets.IntSlider()\n",
    "widgets.jslink((play, 'value'), (slider, 'value'))\n",
    "widgets.HBox([play, slider])"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Date picker\n",
    "The date picker widget works in Chrome and IE Edge, but does not currently work in Firefox or Safari because they do not support the HTML date input field."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "widgets.DatePicker(\n",
    "    description='Pick a Date',\n",
    "    disabled=False\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Color picker"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "widgets.ColorPicker(\n",
    "    concise=False,\n",
    "    description='Pick a color',\n",
    "    value='blue',\n",
    "    disabled=False\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "### Controller\n",
    "The `Controller` allows a game controller to be used as an input device."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "widgets.Controller(\n",
    "    index=0,\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Container/Layout widgets\n",
    "\n",
    "These widgets are used to hold other widgets, called children. Each has a `children` property that may be set either when the widget is created or later.\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "### Box"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "items = [widgets.Label(str(i)) for i in range(4)]\n",
    "widgets.Box(items)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "### HBox"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "items = [widgets.Label(str(i)) for i in range(4)]\n",
    "widgets.HBox(items)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### VBox"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "items = [widgets.Label(str(i)) for i in range(4)]\n",
    "left_box = widgets.VBox([items[0], items[1]])\n",
    "right_box = widgets.VBox([items[2], items[3]])\n",
    "widgets.HBox([left_box, right_box])"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "### Accordion"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "accordion = widgets.Accordion(children=[widgets.IntSlider(), widgets.Text()])\n",
    "accordion.set_title(0, 'Slider')\n",
    "accordion.set_title(1, 'Text')\n",
    "accordion"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Tabs\n",
    "\n",
    "In this example the children are set after the tab is created. Titles for the tabes are set in the same way they are for `Accordion`.\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "tab_contents = ['P0', 'P1', 'P2', 'P3', 'P4']\n",
    "children = [widgets.Text(description=name) for name in tab_contents]\n",
    "tab = widgets.Tab()\n",
    "tab.children = children\n",
    "for i in range(len(children)):\n",
    "    tab.set_title(i, str(i))\n",
    "tab"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "### Accordion and Tab use `selected_index`, not value\n",
    "\n",
    "Unlike the rest of the widgets discussed earlier, the container widgets `Accordion` and `Tab` update their `selected_index` attribute when the user changes which accordion or tab is selected. That means that you can both see what the user is doing *and* programmatically set what the user sees by setting the value of `selected_index`.\n",
    "\n",
    "Setting `selected_index = None` closes all of the accordions or deselects all tabs.\n",
    "\n",
    "In the cells below try displaying or setting the `selected_index` of the `tab` and/or `accordion`.\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "tab.selected_index = 3"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "accordion.selected_index = None"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Nesting tabs and accordions\n",
    "\n",
    "Tabs and accordions can be nested as deeply as you want. If you have a few minutes, try nesting a few accordions or putting an accordion inside a tab or a tab inside an accordion.\n",
    "\n",
    "The example below makes a couple of tabs with an accordion children in one of them"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "tab_nest = widgets.Tab()\n",
    "tab_nest.children = [accordion, accordion]\n",
    "tab_nest.set_title(0, 'An accordion')\n",
    "tab_nest.set_title(1, 'Copy of the accordion')\n",
    "tab_nest"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Conclusion\n",
    "\n",
    "Use this as a further reference for yourself!"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.6.2"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 1
}