01_Introduction_Jupyter_widgets.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {
    "Collapsed": "false"
   },
   "source": [
    "<img src='./img/opengeohub_logo.png' alt='OpenGeoHub Logo' align='right' width='15%'></img>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "<a href=\"./00_index.ipynb\"><< Index - Dashboarding with Jupyter Notebooks and Voilà </a><span style=\"float:right;\"><a href=\"./02_combine_jupyter_widgets_with_events.ipynb\"> 02 - Combine Jupyter widgets with events >></a></span>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "Collapsed": "false"
   },
   "source": [
    "# 1 - Introduction to Jupyter widgets"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "* [What are Jupyter widgets?](#about)\n",
    "* [Installing Jupyter widgets](#installation)\n",
    "* [Jupyter widgets - an overview](#overview)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "<hr>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## <a id='about'></a>What are Jupyter widgets?"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Jupyter Widgets (`ipywidgets`) are interactive HTML widgets for Jupyter notebooks. With widgets, learners / researchers can see how a result is impacted by a changing input, without changing the code.\n",
    "\n",
    "Widgets are represented in the browser often as control features, such as a `slider`, `textbox` or `radio buttons`."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## <a id='installation'></a>Installing Jupyter widgets"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "The [ipywidgets](https://github.com/jupyter-widgets/ipywidgets) library can be installed with `pip` or `conda`. \n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "#### Install it with conda"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "`conda install -c conda-forge ipywidgets`"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "#### Install it with pip"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "`pip install ipywidgets` <br>\n",
    "`jupyter nbextension enable --py widgetsnbextension`"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Let us load the library and check out some widgets examples:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {},
   "outputs": [],
   "source": [
    "# Load the widgets\n",
    "import ipywidgets as widgets"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "Collapsed": "false"
   },
   "source": [
    "## <a id='overview'></a>Jupyter widgets - an overview"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "Collapsed": "false"
   },
   "source": [
    "The following core interactive widgets exist:\n",
    "\n",
    "* [`sliders`](#sliders)\n",
    "  * [IntSlider / FloatSlider / FloatLogSlider](#IntSlider)\n",
    "  * [IntRangeSlider / FloatRangeSlider](#IntRangeSlider)\n",
    "* [`progress bars`](#progress_bars)\n",
    "  * [IntProgress / FloatProgress](#IntProgress)\n",
    "* [`text boxes`](#text_boxes)\n",
    "  * [BoundedIntText / BoundedFloatText](#BoundedIntText)\n",
    "  * [Text](#Text)\n",
    "  * [Textarea](#Textarea)\n",
    "  * [Combobox / Dropdown](#Combobox)\n",
    "* [`Buttons and Checkboxes`](#buttons)\n",
    "  * [Button](#Button)\n",
    "  * [Checkbox](#Checkbox)\n",
    "  * [Valid](#Valid)\n",
    "* [`selection`](#selection)\n",
    "  * [RadioButtons](#RadioButtons)\n",
    "  * [Select / SelectMultiple](#Select)\n",
    "  * [SelectionSlider](#SelectionSlider)\n",
    "  * [SelectionRangeSlider](#SelectionRangeSlider)\n",
    "  * [ToggleButtons](#ToggleButtons)\n",
    "  * [DatePicker]((#DatePicker))\n",
    "  * [ColorPicker](#ColorPicker)\n",
    "* [`Container / Layout`](#container)\n",
    "  * [Box](#Box)\n",
    "  * [HBox](#HBox)\n",
    "  * [VBox](#VBox)\n",
    "  * [GridBox](#GridBox)\n",
    "  * [Accordion](#Accordion)\n",
    "  * [Tabs](#Tabs)\n",
    "* [`ipyleaflet`](#ipyleaflet) (for mapping)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "Collapsed": "false"
   },
   "source": [
    "### <a id='sliders'></a>Sliders"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "#### <a id='IntSlider'></a>IntSlider / FloatSlider / FloatLogSlider"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "A slider is initialized with the following values:\n",
    "* `value`: initial value of the slider\n",
    "* `min`, `max` and `step`: define the start, stop and increment of the slider\n",
    "* `description`: the label of the slider\n",
    "* `orientation`: can be `vertical` or `horizontal`\n",
    "* `readout`: displays the current value next to the slider (default: true)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {
    "Collapsed": "false"
   },
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "8ef9814c870c422094af6e4be7a4b466",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "IntSlider(value=1, continuous_update=False, description='Slider:', max=10)"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "widgets.IntSlider(\n",
    "    value=1,\n",
    "    min=0,\n",
    "    max=10,\n",
    "    step=1,\n",
    "    description='Slider:',\n",
    "    disabled=False,\n",
    "    continuous_update=False,\n",
    "    orientation='horizontal', #horizontal\n",
    "    readout=True\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "The Slider above is only valid for `integer` values. Use `widgets.FloatSlider` for a slider with `float` values. Change `orientation` to `vertical` for an example of a vertical slider."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "7c9602e16de64a26ac182a66dbd7f675",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "FloatSlider(value=2.4, continuous_update=False, description='Slider:', max=10.0, orientation='vertical', step=…"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "widgets.FloatSlider(\n",
    "    value=2.4,\n",
    "    min=0,\n",
    "    max=10,\n",
    "    step=0.2,\n",
    "    description='Slider:',\n",
    "    disabled=False,\n",
    "    continuous_update=False,\n",
    "    orientation='vertical', #vertical\n",
    "    readout=True\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "You can use `widgets.FloatLogSlider` for a slider with a logarithmic scale that covers a wide range of positive magnitudes."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "#### <a id='IntRangeSlider'></a>IntRangeSlider / FloatRangeSlider"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "`IntRangeSlider` enables you to specify a range of integer values. Instead of a single value for `value`, you specify a range, e.g. `[2,5]`. `FloatRangeSlider` allows you to specify a range of float values."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "0d2eef2bec054ceca1165d5926454a85",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "IntRangeSlider(value=(2, 5), continuous_update=False, description='Slider Range:', max=10)"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "widgets.IntRangeSlider(\n",
    "    value=[2, 5],\n",
    "    min=0,\n",
    "    max=10,\n",
    "    step=1,\n",
    "    description='Slider Range:',\n",
    "    disabled=False,\n",
    "    continuous_update=False,\n",
    "    orientation='horizontal',\n",
    "    readout=True\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### <a id='progress_bars'></a>Progress bars"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "#### <a id='IntProgress'></a>IntProgess / FloatProgress"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "`IntProgress` and `FloatProgress` allow you to define `progress bars` with integer or float values. You need the following values to define it:\n",
    "* `value`: initial value\n",
    "* `min`, `max`, `step`: To define the valid range of the progress bar and the increment.\n",
    "* `description`: label of the progress bar\n",
    "* `bar_style`: can be either `info`, `danger`, `warning`, `success` or ``\n",
    "* `orientations`: can be `horizonal` or `vertical`"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "metadata": {
    "Collapsed": "false"
   },
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "72fecfd5aebe4f88b419a7a7974af749",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "IntProgress(value=7, bar_style='info', description='Progress:', max=10)"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "widgets.IntProgress(\n",
    "    value=7,\n",
    "    min=0,\n",
    "    max=10,\n",
    "    step=4,\n",
    "    description='Progress:',\n",
    "    bar_style='info', # 'danger', 'info', 'warning', 'success' or ''\n",
    "    orientation='horizontal'\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### <a id='text_boxes'></a>Text boxes"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Text box widgets can be differentiated between text boxes that accept `numeric` values and those that accept `strings`.\n",
    "* Numeric value text boxes: \n",
    "  * `BoundedIntText / BoundedFloatText`, \n",
    "  * `IntText / FloatText`\n",
    "* String text boxes: \n",
    "  * `Text`, \n",
    "  * `Text Area`, \n",
    "  * `Combobox / Dropdown`"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "#### <a id='BoundedIntText'></a>BoundedIntText / BoundedFloatText"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "These text boxes allow you to enter an `integer` or `float` value. You can defined the following values:\n",
    "* `value`: initial value\n",
    "* `min`, `max`, `step`: To define the valid range of the interger or float increment.\n",
    "* `description`: label of the progress bar\n",
    "* `disabled`: to disable the widget\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 7,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "dcc291921ac64a238f38874ac650f3cc",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "BoundedIntText(value=7, description='Integer Text:', max=10, step=2)"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "widgets.BoundedIntText(\n",
    "    value=7,\n",
    "    min=0,\n",
    "    max=10,\n",
    "    step=2,\n",
    "    description='Integer Text:',\n",
    "    disabled=False\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "#### <a id='IntText'></a>IntText / FloatText"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "`IntText` and `FloatText` are similar to the `BoundedIntText` and `BoundedFloatText`, just with the difference that the integer or float ranges are not bounded / limited."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 8,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "4bae26d3dff04dceb3d0afda2399dcf3",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "FloatText(value=7.2, description='Any:', step=0.1)"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "widgets.FloatText(\n",
    "    value=7.2,\n",
    "    step=0.1,\n",
    "    description='Any:',\n",
    "    disabled=False\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "#### <a id='Text'></a>Text"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "The `Text` widget is a text box that allows you to enter a `string`. Values that can be defined are:\n",
    "* `value`: Initial string \n",
    "* `placeholder`: Placeholder in case no text is entered\n",
    "* `description`: Description of the text box\n",
    "* `disabled`: if `True`, text box is disabled. Default: `False`"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 9,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "1612e26ae23c4e93b27a1f1e96f94b68",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "Text(value='Hello World', description='String:', placeholder='Type something')"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "widgets.Text(\n",
    "    value='Hello World',\n",
    "    placeholder='Type something',\n",
    "    description='String:',\n",
    "    disabled=False\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "#### <a id='Textarea'></a>Textarea"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Text area is the same as the text box, just allowing to enter more characters. The same values can be defined:\n",
    "* `value`: Initial string \n",
    "* `placeholder`: Placeholder in case no text is entered\n",
    "* `description`: Description of the text area.\n",
    "* `disabled`: if `True`, text box is disabled. Default: `False`"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 10,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "452f005475124c7b977003fd135f95fc",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "Textarea(value='Hello World', description='String:', placeholder='Type something')"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "widgets.Textarea(\n",
    "    value='Hello World',\n",
    "    placeholder='Type something',\n",
    "    description='String:',\n",
    "    disabled=False\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "#### <a id='Combobox'></a>Combobox / Dropdown"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "`Combobox` or `Dropdown` are widgets that allow to select from a pre-defined list of entries. The following values can be defined:\n",
    "* `value` (optional): Initial entry\n",
    "* `placeholder`: Text in case no entry is selected\n",
    "* `options`: List of selection items\n",
    "* `description`: Description of the widget.\n",
    "* `disabled`: if `True`, combobox is disabled. Default: `False`"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 11,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "acd86437c1bc44f7aff6237030e1ab73",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "Combobox(value='', description='Combobox:', options=('Europe', 'US/Canada', 'Australia', 'Africa'), placeholde…"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "widgets.Combobox(\n",
    "    # value='Europe',\n",
    "    placeholder='Choose a continent',\n",
    "    options=['Europe', 'US/Canada', 'Australia', 'Africa'],\n",
    "    description='Combobox:',\n",
    "    disabled=False\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "`Dropdown` has the same function, just a slightly different layout."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 12,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "48225f8f067a4803b6dd437b8fad1f73",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "Dropdown(description='Dropdown:', options=('Europe', 'US/Canada', 'Australia', 'Africa'), value='Europe')"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "widgets.Dropdown(\n",
    "    value='Europe',\n",
    "    placeholder='Choose a continent',\n",
    "    options=['Europe', 'US/Canada', 'Australia', 'Africa'],\n",
    "    description='Dropdown:',\n",
    "    disabled=False,\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### <a id='buttons'></a> Buttons and Checkboxes"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "There are three different widgets types under the `Buttons and checkboxes` category:\n",
    "* `Button`\n",
    "* `Checkbox`\n",
    "* `Valid`"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "#### <a id='Button'></a>Button"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "The `Button` widget provided you a clickable button, which can be customized as follows:\n",
    "* `description`: Description or instruction of the button\n",
    "* `disabled`: if `True`, Button is disabled. Default: `False`\n",
    "* `button_style`: colorizes the button. Colors can be changed with alert names, e.g. `success`, `info`, `warning` or `danger`\n",
    "* `tooltip`: Description for the mouse hover\n",
    "* `icon`: Any [fontawesome](https://fontawesome.com/icons) icon can be added to the button"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 18,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "84fb1928388d48bf9a3000e05e605ec5",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "Button(button_style='info', description='Click me', icon='check', style=ButtonStyle(), tooltip='Description')"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "widgets.Button(\n",
    "    description='Click me',\n",
    "    disabled=False,\n",
    "    button_style='info', # 'success', 'info', 'warning', 'danger' or ''\n",
    "    tooltip='Description',\n",
    "    icon='check'\n",
    "#   icon='graduation-cap'\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "#### <a id='Checkbox'></a>Checkbox"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "`Checkbox` provided a box to be checked. The following values have to be specified:\n",
    "* `value`: Specifies whether the box is checked or not. `False` is unchecked.\n",
    "* `description`: Description of the box to be checked.\n",
    "* `disabled`: if True, Button is disabled. Default: False"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 19,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "d18f0325844e471587c161149d69c209",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "Checkbox(value=True, description='Check me')"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "widgets.Checkbox(\n",
    "    value=True,\n",
    "    description='Check me',\n",
    "    disabled=False\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### <a id='selection'></a> selection"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Selection widgets are widgets that allow to make a selection. The selection can be presented in different layouts:\n",
    "* `RadioButtons`\n",
    "* `Select / SelectMultiple`\n",
    "* `SelectionSlider`\n",
    "* `SelectionRangeSlider`\n",
    "* `ToggleButtons`\n",
    "* `DatePicker`\n",
    "* `ColorPicker`"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "#### <a id='RadioButtons'></a>RadioButtons"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "`RadioButtons` provide buttons as select options. The widget can be customized with the following values:\n",
    "* `options`: a list of options to select from\n",
    "* `value`: if specified, the provided option is selected\n",
    "* `description`: Label of the widget\n",
    "* `disabled`: if `True`, widget is disabled. Default: `False`"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 20,
   "metadata": {
    "Collapsed": "false"
   },
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "a2c1d92ebb564523b8303e8d66b0b18b",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "RadioButtons(description='Survey:', options=('Jupyter is great', 'Jupyter is average', 'Do not understand the …"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "widgets.RadioButtons(\n",
    "    options=['Jupyter is great', 'Jupyter is average', 'Do not understand the hype'],\n",
    "    value='Jupyter is great',\n",
    "    description='Survey:',\n",
    "    disabled=False\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "#### <a id='Select'></a>Select"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "`Select` provides different options to select from in a box. The following values have to be specified:\n",
    "* `options`: a list of different options to select from\n",
    "* `value`: if specified, this value is selected\n",
    "* `rows`: an integer that controls the number of rows\n",
    "* `description`: Label of the widget\n",
    "* `disabled`: if `True`, widget is disabled. Default: `False`"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 25,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "de559026fbfa40148157b91b6201949a",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "Select(description='Color:', options=('Red', 'Green', 'Blue'), value='Red')"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "widgets.Select(\n",
    "    options=['Red', 'Green', 'Blue'],\n",
    "#    value='Blue',\n",
    "#    rows=10,\n",
    "    description='Color:',\n",
    "    disabled=False\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "The widget `SelectMultiple` is the same as `Select`, but allows the selection of multiple values."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 26,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "c0046b40e9a84ea7aee535ec765bbd4b",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "SelectMultiple(description='Colors', index=(0,), options=('Red', 'Green', 'Blue'), rows=10, value=('Red',))"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "widgets.SelectMultiple(\n",
    "    options=['Red', 'Green', 'Blue'],\n",
    "    value=['Red'],\n",
    "    rows=10,\n",
    "    description='Colors',\n",
    "    disabled=False\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "#### <a id='SelectionSlider'></a>SelectionSlider"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "`SelectionSlider` is a selection widget that lets you select different option along a horizontal or vertical slider. You can specify the following options:\n",
    "* `options`: a list of options to select from\n",
    "* `value`: initial value to be set\n",
    "* `description`: Label of the widget\n",
    "* `disabled`: if `True`, widget is disabled. Default: `False`\n",
    "* `orientation`: can `horizontal` or `vertical`\n",
    "* `readout`: if `True`, the selected options is written next to or below the widget"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 27,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "fc5e1ac48d5943eca1eb1795e9ed376f",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "SelectionSlider(description='Height:', options=('low', 'higher', 'the highest'), orientation='vertical', value…"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "widgets.SelectionSlider(\n",
    "    options=['low', 'higher', 'the highest'],\n",
    "    value='low',\n",
    "    description='Height:',\n",
    "    disabled=False,\n",
    "    orientation='vertical',\n",
    "    readout=True\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "#### <a id='SelectionRangeSlider'></a>SelectionRangeSlider"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "`SelectionRangeSlider` allows you to select a range with start and end within a slider widget. You can specify the following values:\n",
    "* ` options`: a list of options to select from\n",
    "* `index`: start and end integer values\n",
    "* `descripton`: Label of the widget\n",
    "* `disabled`: if `True`, widget is disabled. Default: `False`"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 28,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "1bfe5d2085ed4d76807d6514ea066cc7",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "SelectionRangeSlider(description='Months (2020)', index=(0, 11), options=(('Jan', datetime.date(2020, 1, 1)), …"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "import datetime\n",
    "dates = [datetime.date(2020, i, 1) for i in range(1, 13)]\n",
    "options = [(i.strftime('%b'), i) for i in dates]\n",
    "\n",
    "widgets.SelectionRangeSlider(\n",
    "    options=options,\n",
    "    index=(0, 11),\n",
    "    description='Months (2020)',\n",
    "    disabled=False\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "#### <a id='ToggleButtons'></a>ToggleButtons"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "`ToggleButtons` is a selection widget that lets you select different options from different buttons. You can specify the following options:\n",
    "* `options`: a list of options to select from\n",
    "* `description`: Label of the widget\n",
    "* `disabled`: if `True`, widget is disabled. Default: `False`\n",
    "* `button_style`: changes the color of the button. Can be `danger`, `success`, `info`, `warning` and ``.\n",
    "* `tooltips`: a list of descriptions for each button\n",
    "* `icons`: any [fontawesome](https://fontawesome.com/icons) icon can be added to each button"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 29,
   "metadata": {
    "Collapsed": "false"
   },
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "97fc33a31a534646b1de11bdd78e40e5",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "ToggleButtons(button_style='danger', description='Speed:', icons=('check', 'check', 'check'), options=('Slow',…"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "widgets.ToggleButtons(\n",
    "    options=['Slow', 'Regular', 'Fast'],\n",
    "    description='Speed:',\n",
    "    disabled=False,\n",
    "    button_style='danger', # 'success', 'info', 'warning', 'danger' or ''\n",
    "    tooltips=['Description of slow', 'Description of regular', 'Description of fast'],\n",
    "    icons=['check'] * 3,\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "#### <a id='DatePicker'></a>DatePicker"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "`DatePicker` lets you integrate a calendar functionality. The following values can be specified:\n",
    "* `description`: Label of the widget\n",
    "* `disabled`: if `True`, widget is disabled. Default: `False`."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 30,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "c5250aa9f79a4edd903352b47584b910",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "DatePicker(value=None, description='Choose a date')"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "widgets.DatePicker(\n",
    "    description='Choose a date',\n",
    "    disabled=False\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "#### <a id='ColorPicker'></a>ColorPicker"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "`ColorPicker` lets you integrate a functionality to choose different colors, based on RGB values. You can specify the following values:\n",
    "* `concise`: if `False`, the name and the color is shown. If `True`, only the color box is shown.\n",
    "* `description`: Label of the widget.\n",
    "* `value`: predefined color before selection.\n",
    "* `disabled`: if `True`, widget is disabled. Default: `False`."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 31,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "6c2b13f71025428395397b622c0631d3",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "ColorPicker(value='yellow', description='Choose a color')"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "widgets.ColorPicker(\n",
    "    concise=False,\n",
    "    description='Choose a color',\n",
    "    value='yellow',\n",
    "    disabled=False\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### <a id='container'></a> Container / Layout"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "`Container/Layout` widgets help to organise and arrange other widgets. The widgets that are part of a container widget are called `childred`. Each container widget has a `children` property that can be set either when the widget is created or at a later stage.\n",
    "The following `Container/Layout` items are available:\n",
    "* `Box / HBox / VBox`\n",
    "* `GridBox`\n",
    "* `Accordion`\n",
    "* `Tabs`\n",
    "* `Stacked`"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "#### <a id='Box'></a>Box / HBox / VBox"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "`Box`, `HBox` and `VBox` allow you to define boxes that are either `horizontally` or `vertically` arranged. The following example defines a `Select` box and a `ColorPicker` and arranges the labels horizontally as boxes."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 38,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "441520b442c042749298cd7bd38b6075",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "Box(children=(Select(description='Color:', options=('Red', 'Green', 'Blue'), value='Red'), ColorPicker(value='…"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "#Define a select box\n",
    "select = widgets.Select(\n",
    "    options=['Red', 'Green', 'Blue'],\n",
    "#    value='Blue',\n",
    "#    rows=10,\n",
    "    description='Color:',\n",
    "    disabled=False\n",
    ")\n",
    "\n",
    "# Define a color picker\n",
    "color_picker = widgets.ColorPicker(\n",
    "    concise=False,\n",
    "    description='Choose a color',\n",
    "    value='yellow',\n",
    "    disabled=False\n",
    ")\n",
    "widgets.Box([select, color_picker])"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "#### <a id='VBox'></a>HBox / VBox combined"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "You can also combine different boxes vertically and horizontally. The example below first defines four widgets (`dropdown`, `radio_buttons`, `button`, `instslider`) and arranges the four with two vertical boxes. A second step arranges the two vertical boxes horizontally.\n",
    "\n",
    "The results shows that the arrangement is a bit misplaced."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 40,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "2ebb03d80c0e48209d1cf6cf9b693a5b",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "HBox(children=(VBox(children=(RadioButtons(description='Survey:', options=('Jupyter is great', 'Jupyter is ave…"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "dropdown = widgets.Dropdown(\n",
    "    value='Europe',\n",
    "    placeholder='Choose a continent',\n",
    "    options=['Europe', 'US/Canada', 'Australia', 'Africa'],\n",
    "    description='Dropdown:',\n",
    "    disabled=False,\n",
    ")\n",
    "\n",
    "radio_buttons = widgets.RadioButtons(\n",
    "    options=['Jupyter is great', 'Jupyter is average', 'Do not understand the hype'],\n",
    "    value='Jupyter is great',\n",
    "    description='Survey:',\n",
    "    disabled=False\n",
    ")\n",
    "\n",
    "button = widgets.Button(\n",
    "    description='Click me',\n",
    "    disabled=False,\n",
    "    button_style='info', # 'success', 'info', 'warning', 'danger' or ''\n",
    "    tooltip='Description',\n",
    "    icon='check'\n",
    "#   icon='graduation-cap'\n",
    ")\n",
    "\n",
    "intslider = widgets.IntSlider(\n",
    "    value=1,\n",
    "    min=0,\n",
    "    max=10,\n",
    "    step=1,\n",
    "    description='Slider:',\n",
    "    disabled=False,\n",
    "    continuous_update=False,\n",
    "    orientation='horizontal', #horizontal\n",
    "    readout=True\n",
    ")\n",
    "\n",
    "\n",
    "left_box = widgets.VBox([radio_buttons, intslider])\n",
    "right_box = widgets.VBox([button, dropdown])\n",
    "widgets.HBox([left_box, right_box])"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "#### <a id='GridBox'></a>GridBox"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "`GridBox` uses the HTML Grid specification to lay out its children in a two dimensional grid. The example below lays out the four defined widgets in the cell before inside a 2 column layout."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 44,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "5a080a0a79994b569b69771a2fc6255b",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "GridBox(children=(RadioButtons(description='Survey:', options=('Jupyter is great', 'Jupyter is average', 'Do n…"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "widgets.GridBox([radio_buttons, intslider, button, dropdown], layout=widgets.Layout(grid_template_columns=\"repeat(2, 500px)\"))\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "#### <a id='Accordion'></a>Accordion"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Accordion is a container widget that defines an expandable 'accordion' layout. Let us arrange our four widgets as `children` in an accordion."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 50,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "ed19ed0effce4ee4a3751853fa7a8450",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "Accordion(children=(RadioButtons(description='Survey:', options=('Jupyter is great', 'Jupyter is average', 'Do…"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "accordion = widgets.Accordion(children=[radio_buttons, intslider, button, dropdown])\n",
    "accordion"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Let us set some titles for each accordion entry. You can do this with the `set_title()` function. "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 49,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "2076bef9d1964d038d251910a8050a2e",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "Accordion(children=(RadioButtons(description='Survey:', options=('Jupyter is great', 'Jupyter is average', 'Do…"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "accordion.set_title(0, 'Radio Buttons')\n",
    "accordion.set_title(1, 'IntSlider')\n",
    "accordion.set_title(2, 'Button')\n",
    "accordion.set_title(3, 'Dropdown')\n",
    "accordion"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "#### <a id='Tabs'></a>Tabs"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "`Tabs` is another container widget that allows you to arrange several widgets as tabs. You first define a `tab` widget with `widgets.Tab()` and then you populated the your tab objects with children. Equal to the accordion example, you can set titles to each tab with the function `set_title()`."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 54,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "ce8e5ef4f46149fe85abf5495e06bdd7",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "Tab(children=(RadioButtons(description='Survey:', options=('Jupyter is great', 'Jupyter is average', 'Do not u…"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "children = [radio_buttons, intslider, button, dropdown]\n",
    "tab = widgets.Tab()\n",
    "tab.children = children\n",
    "tab.set_title(0, 'Radio buttons')\n",
    "tab.set_title(1, 'Slider')\n",
    "tab.set_title(2, 'Button')\n",
    "tab.set_title(3, 'Dropdown')\n",
    "tab"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### <a id='ipyleaflet'></a> ipyleaflet "
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "From the ipyleaflet library import `Map`, `basemaps`, `basemaps_to_tiles`, `SplitMapControl`. "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 67,
   "metadata": {},
   "outputs": [],
   "source": [
    "from ipyleaflet import Map, basemaps, basemap_to_tiles, SplitMapControl "
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "The easiest example is to create a `Map` object. You can specify a certain `zoom` level. "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 71,
   "metadata": {
    "scrolled": true
   },
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "327071c626394014b1e6a4abcb73d2c8",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "Map(center=[0.0, 0.0], controls=(ZoomControl(options=['position', 'zoom_in_text', 'zoom_in_title', 'zoom_out_t…"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "map1 = Map(zoom=2)\n",
    "map1"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "There are additional controls you can add to your map. For example you can add the `SplitMapControl` which splits the map in two parts and that allows you to compare two different maps."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 73,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "27279b0d60f34ea8a9f92d30ac2768ce",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "Map(center=[0.0, 0.0], controls=(ZoomControl(options=['position', 'zoom_in_text', 'zoom_in_title', 'zoom_out_t…"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "map2 = Map(zoom=2)\n",
    "right_layer = basemap_to_tiles(basemaps.NASAGIBS.ModisTerraTrueColorCR, \"2017-11-11\")\n",
    "left_layer = basemap_to_tiles(basemaps.NASAGIBS.ModisAquaBands721CR, \"2017-11-11\")\n",
    "\n",
    "control = SplitMapControl(left_layer=left_layer, right_layer=right_layer)\n",
    "map2.add_control(control)\n",
    "map2"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "scrolled": true
   },
   "source": [
    "Below, you see an example to add a `LayersControl` to your map. The LayersControl shows then the two different basemaps we added to the map."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 75,
   "metadata": {
    "scrolled": true
   },
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "8e54a73053d440d397c917e7748a2456",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "Map(center=[0.0, 0.0], controls=(ZoomControl(options=['position', 'zoom_in_text', 'zoom_in_title', 'zoom_out_t…"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "control = LayersControl(position='topright')\n",
    "map2.add_control(control)\n",
    "map2"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### So what?"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Widgets in general are quite nice, but you probably ask yourself to get some real examples. The important thing is that you have to link widgets with events, as you want to trigger a certain behaviour with the widget.\n",
    "\n",
    "Let's go to the next notebooks and see how you can add events to your widgets."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "Collapsed": "false"
   },
   "source": [
    "<hr>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Resources"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "- [Jupyter widgets readthedocs](https://ipywidgets.readthedocs.io/en/stable/index.html)\n",
    "- [ipyleaflet readthedocs](https://ipyleaflet.readthedocs.io/en/latest/)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "<br>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "<a href=\"./00_index.ipynb\"><< Index - Dashboarding with Jupyter Notebooks and Voilà </a><span style=\"float:right;\"><a href=\"./02_combine_jupyter_widgets_with_events.ipynb\"> 02 - Combine Jupyter widgets with events >></a></span>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "Collapsed": "false"
   },
   "source": [
    "<hr>\n",
    "&copy; 2020 | Julia Wagemann\n",
    "<a rel=\"license\" href=\"http://creativecommons.org/licenses/by/4.0/\"><img style=\"float: right\" alt=\"Creative Commons Lizenzvertrag\" style=\"border-width:0\" src=\"https://i.creativecommons.org/l/by/4.0/88x31.png\" /></a>"
   ]
  }
 ],
 "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.7.3"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}