{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {
    "collapsed": true
   },
   "source": [
    "# Widget Listen\n",
    "\n",
    "Diese Lektion dient als Referenz für Widgets, indem sie eine Liste der GUI Widgets zur Verfügung stellt!\n",
    "\n",
    "## Komplette Liste\n",
    "\n",
    "Für eine vollständige Liste aller GUI Widgets die euch zur Verfügung stehen, könnt ihr die registrierten Widget Typen auflisten. `Widget` und `DOMWidget`, die untern nicht aufgeführt sind, sind Basisklassen."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "dict_values([<class 'ipywidgets.widgets.widget_bool.Checkbox'>, <class 'ipywidgets.widgets.widget_bool.ToggleButton'>, <class 'ipywidgets.widgets.widget_bool.Valid'>, <class 'ipywidgets.widgets.widget_button.ButtonStyle'>, <class 'ipywidgets.widgets.widget_button.Button'>, <class 'ipywidgets.widgets.widget_box.Box'>, <class 'ipywidgets.widgets.widget_box.VBox'>, <class 'ipywidgets.widgets.widget_box.HBox'>, <class 'ipywidgets.widgets.widget_float.FloatText'>, <class 'ipywidgets.widgets.widget_float.BoundedFloatText'>, <class 'ipywidgets.widgets.widget_float.FloatSlider'>, <class 'ipywidgets.widgets.widget_float.FloatProgress'>, <class 'ipywidgets.widgets.widget_float.FloatRangeSlider'>, <class 'ipywidgets.widgets.widget_image.Image'>, <class 'ipywidgets.widgets.widget_int.IntText'>, <class 'ipywidgets.widgets.widget_int.BoundedIntText'>, <class 'ipywidgets.widgets.widget_int.SliderStyle'>, <class 'ipywidgets.widgets.widget_int.IntSlider'>, <class 'ipywidgets.widgets.widget_int.ProgressStyle'>, <class 'ipywidgets.widgets.widget_int.IntProgress'>, <class 'ipywidgets.widgets.widget_int.IntRangeSlider'>, <class 'ipywidgets.widgets.widget_int.Play'>, <class 'ipywidgets.widgets.widget_color.ColorPicker'>, <class 'ipywidgets.widgets.widget_date.DatePicker'>, <class 'ipywidgets.widgets.widget_selection.ToggleButtons'>, <class 'ipywidgets.widgets.widget_selection.Dropdown'>, <class 'ipywidgets.widgets.widget_selection.RadioButtons'>, <class 'ipywidgets.widgets.widget_selection.Select'>, <class 'ipywidgets.widgets.widget_selection.SelectionSlider'>, <class 'ipywidgets.widgets.widget_selection.SelectMultiple'>, <class 'ipywidgets.widgets.widget_selectioncontainer.Accordion'>, <class 'ipywidgets.widgets.widget_selectioncontainer.Tab'>, <class 'ipywidgets.widgets.widget_string.HTML'>, <class 'ipywidgets.widgets.widget_string.HTMLMath'>, <class 'ipywidgets.widgets.widget_string.Label'>, <class 'ipywidgets.widgets.widget_string.Textarea'>, <class 'ipywidgets.widgets.widget_string.Text'>, <class 'ipywidgets.widgets.widget_controller.Button'>, <class 'ipywidgets.widgets.widget_controller.Axis'>, <class 'ipywidgets.widgets.widget_controller.Controller'>, <class 'ipywidgets.widgets.widget_link.Link'>, <class 'ipywidgets.widgets.widget_link.DirectionalLink'>])"
      ]
     },
     "execution_count": 1,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "import ipywidgets as widgets\n",
    "\n",
    "# Zeige alle verfügbaren Widgets!\n",
    "widgets.Widget.widget_types.values()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Numerische Widgets\n",
    "\n",
    "Es gibt 8 Widgets, die über iPython vertrieben werden, die dazu gedacht sind, numerische Werte anzuzeigen. Widgets existieren sowohl für Ganzzahlen (Integers), als auch für Kommazahlen (Floats), jeweils ohne Grenzen und mit. Die Ganzzahlen Widgets teilen eine gemeinsame Nomenklatur mit ihren Kommazahlen Gegenstücken. Durch das Ersetzen von `Float` durch `Int` im Widgetnamen, erhält man das Äquivalent.\n",
    "\n",
    "### FloatSlider"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "bda3afe1abe241a7b06ec575d29969fa"
      }
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "widgets.FloatSlider(\n",
    "    value=7.5,\n",
    "    min=5.0,\n",
    "    max=10.0,\n",
    "    step=0.1,\n",
    "    description='Test:',\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Slider können auch vertikal angezeigt werden."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "09e6c00248644fc5b521b732d89c1942"
      }
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "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",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### FloatProgress"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "fe033610638142c6a2eb36091d077c27"
      }
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "widgets.FloatProgress(\n",
    "    value=7.5,\n",
    "    min=5.0,\n",
    "    max=10.0,\n",
    "    step=0.1,\n",
    "    description='Laden:',\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### BoundedFloatText"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "25c69abc329d45feb0e7081bde790043"
      }
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "widgets.BoundedFloatText(\n",
    "    value=7.5,\n",
    "    min=5.0,\n",
    "    max=10.0,\n",
    "    description='Text:',\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### FloatText"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 7,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "5862409a10684d09a3e66af8973bef12"
      }
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "widgets.FloatText(\n",
    "    value=7.5,\n",
    "    description='Any:',\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Boolean Widgets\n",
    "\n",
    "Es gibt drei Widgets die dafür ausgelegt sind Boolean Werte anzuzeigen.\n",
    "\n",
    "### ToogleButton"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 9,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "f39faff51f364baa9f04bec75d8bdf8a"
      }
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "widgets.ToggleButton(\n",
    "    description='Klick mich',\n",
    "    value=False,\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Checkbox"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 10,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "385c5e81ad4149cfa4b178478ef47d7f"
      }
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "widgets.Checkbox(\n",
    "    description='Checke mich',\n",
    "    value=True,\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Valid\n",
    "\n",
    "Das valid Widget bietet einen \"nur lesen\" Indikator."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 11,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "b35089d10c17455e98141d5d5e1250ba"
      }
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "widgets.Valid(\n",
    "    value=True,\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Auswahl Widgets\n",
    "\n",
    "Es gibt insgesamt vier Widgets, die dafür genutzt werden können, eine Einzelauswahl (selection) Liste anzuzeigen, und eines dafür, eine Mehrfahrauswahl anzuzeigen. Alle gehen von derselben Basisklasse aus. Wir können die Aufzählung der auswählbaren Optionen bestimmen, indem wir eine Liste übergeben. Außerdem können wir die Optionen als Dictionary übergeben, wodurch der Key als angezeigte Option und der Value als verarbeitbarer Wert behandelt werden.\n",
    "\n",
    "### Dropdown"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 13,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "dd4c78e4aebf494a8ef8c7f16bd7e673"
      }
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "from IPython.display import display\n",
    "w = widgets.Dropdown(\n",
    "    options=['1', '2', '3'],\n",
    "    value='2',\n",
    "    description='Nummer:',\n",
    ")\n",
    "display(w)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 14,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "'3'"
      ]
     },
     "execution_count": 14,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "# Wert anzeigen\n",
    "w.value"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Das folgende ist ebenfalls gültig:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 15,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "d067bea641e54f2eab337d6106c564eb"
      }
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "w = widgets.Dropdown(\n",
    "    options={'Eins': 1, 'Zwei': 2, 'Drei': 3},\n",
    "    value=2,\n",
    "    description='Nummer:')\n",
    "\n",
    "display(w)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 16,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "2"
      ]
     },
     "execution_count": 16,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "# Wert anzeigen\n",
    "w.value"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### RadioButtons"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 17,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "0fa3141b5c8b413aaa850a757f4dc53b"
      }
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "widgets.RadioButtons(\n",
    "    description='Pizzabelag:',\n",
    "    options=['Pepperoni', 'Ananas', 'Pilze'],\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Select"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 18,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "0994e0251ecd43acad92207b41abc752"
      }
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "widgets.Select(\n",
    "    description='OS:',\n",
    "    options=['Linux', 'Windows', 'OSX'],\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### ToggleButtons"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 19,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "1898033af290453bbf285ce9af2eacea"
      }
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "widgets.ToggleButtons(\n",
    "    description='Geschwindigkeit:',\n",
    "    options=['Schnell', 'Normal', 'Schnell'],\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### SelectMultiple"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 20,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "c15aa8e23a65438ab7dd2ce995df40ac"
      }
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "w = widgets.SelectMultiple(\n",
    "    description=\"Früchte\",\n",
    "    options=['Apfel', 'Orange', 'Traube'])\n",
    "\n",
    "display(w)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 21,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "('Orange', 'Traube')"
      ]
     },
     "execution_count": 21,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "w.value"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## String Widgets\n",
    "\n",
    "Insgesamt drei Widgets können dazu verwendet werden String Werte anzuzeigen. Von diesen sind es das `Text` und `Textarea` Widget, die eine Eingabe akzeptieren. Das `HTML` Widget zeigt den String als HTML an, lässt aber keine Eingabe zu.\n",
    "\n",
    "### Text"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 22,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "bfc3843d480f4276bfa6c737151dac09"
      }
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "widgets.Text(\n",
    "    description='String:',\n",
    "    value='Hallo Welt',\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Textarea"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 23,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "6ffd475dd834438a9c8e54f8b21df407"
      }
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "widgets.Textarea(\n",
    "    description='String:',\n",
    "    value='Hallo Welt',\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### HTML"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 25,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "aedce4c125e745b483b95a98be4443b4"
      }
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "widgets.HTML(\n",
    "    value=\"Hello <b>World</b>\"\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Button"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 26,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "4dfedb8b67f142b7b73de6544b76adc2"
      }
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "widgets.Button(description='Klick mich!')"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Schlussfolgerung\n",
    "\n",
    "Diese Liste der Widgets könnt ihr als Referenz für zukünftige Projekte nutzen!"
   ]
  }
 ],
 "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.1"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}