{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": [
     "parameters"
    ]
   },
   "outputs": [],
   "source": [
    "flex_subtitle = \"built using jupyter-flex\"\n",
    "flex_external_link = \"https://github.com/danielfrg/jupyter-flex/blob/master/examples/widgets/widgets-gallery.ipynb\"\n",
    "\n",
    "flex_vertical_layout = \"scroll\"\n",
    "flex_show_source = True"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Page 1"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Row 1 - Numeric Widgets"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Int Slider"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": [
     "source"
    ]
   },
   "outputs": [],
   "source": [
    "import ipywidgets as widgets"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": [
     "body"
    ]
   },
   "outputs": [],
   "source": [
    "widget = widgets.IntSlider(\n",
    "    value=7,\n",
    "    min=0,\n",
    "    max=10,\n",
    "    step=1,\n",
    "    description='',\n",
    "    disabled=False,\n",
    "    continuous_update=False,\n",
    "    orientation='horizontal',\n",
    "    readout=True,\n",
    "    readout_format='d'\n",
    ")\n",
    "\n",
    "value_lbl = widgets.Label()\n",
    "transform = lambda x: str(x)\n",
    "widgets.dlink((widget, 'value'), (value_lbl, 'value'), transform)\n",
    "\n",
    "display(widget, widgets.HBox([widgets.Label(\"Current Value:\"), value_lbl]) )"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Float Slider"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": [
     "body"
    ]
   },
   "outputs": [],
   "source": [
    "widget = widgets.FloatSlider(\n",
    "    value=7.5,\n",
    "    min=0,\n",
    "    max=10.0,\n",
    "    step=0.1,\n",
    "    description='',\n",
    "    disabled=False,\n",
    "    continuous_update=False,\n",
    "    orientation='horizontal',\n",
    "    readout=True,\n",
    "    readout_format='.1f',\n",
    ")\n",
    "\n",
    "value_lbl = widgets.Label()\n",
    "transform = lambda x: str(x)\n",
    "widgets.dlink((widget, 'value'), (value_lbl, 'value'), transform)\n",
    "\n",
    "display(widget, widgets.HBox([widgets.Label(\"Current Value:\"), value_lbl]) )"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Float Log Slider"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": [
     "body"
    ]
   },
   "outputs": [],
   "source": [
    "widget = widgets.FloatLogSlider(\n",
    "    value=10,\n",
    "    base=10,\n",
    "    min=-10, # max exponent of base\n",
    "    max=10, # min exponent of base\n",
    "    step=0.2, # exponent step\n",
    "    description=''\n",
    ")\n",
    "\n",
    "value_lbl = widgets.Label()\n",
    "transform = lambda x: str(x)\n",
    "widgets.dlink((widget, 'value'), (value_lbl, 'value'), transform)\n",
    "\n",
    "display(widget, widgets.HBox([widgets.Label(\"Current Value:\"), value_lbl]) )"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Row 2 - Numeric Widgets"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Int Range Slider"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": [
     "body"
    ]
   },
   "outputs": [],
   "source": [
    "widget = widgets.IntRangeSlider(\n",
    "    value=[5, 7],\n",
    "    min=0,\n",
    "    max=10,\n",
    "    step=1,\n",
    "    description='',\n",
    "    disabled=False,\n",
    "    continuous_update=False,\n",
    "    orientation='horizontal',\n",
    "    readout=True,\n",
    "    readout_format='d',\n",
    ")\n",
    "\n",
    "value_lbl = widgets.Label()\n",
    "transform = lambda x: str(x)\n",
    "widgets.dlink((widget, 'value'), (value_lbl, 'value'), transform)\n",
    "\n",
    "display(widget, widgets.HBox([widgets.Label(\"Current Value:\"), value_lbl]) )"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Float Range Slider"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": [
     "body"
    ]
   },
   "outputs": [],
   "source": [
    "widget = widgets.FloatRangeSlider(\n",
    "    value=[4.5, 7.5],\n",
    "    min=0,\n",
    "    max=10.0,\n",
    "    step=0.1,\n",
    "    description='',\n",
    "    disabled=False,\n",
    "    continuous_update=False,\n",
    "    orientation='horizontal',\n",
    "    readout=True,\n",
    "    readout_format='.1f',\n",
    ")\n",
    "\n",
    "value_lbl = widgets.Label()\n",
    "transform = lambda x: str(x)\n",
    "widgets.dlink((widget, 'value'), (value_lbl, 'value'), transform)\n",
    "\n",
    "display(widget, widgets.HBox([widgets.Label(\"Current Value:\"), value_lbl]) )"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Int Progress"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": [
     "body"
    ]
   },
   "outputs": [],
   "source": [
    "widget = widgets.IntProgress()\n",
    "\n",
    "control = widgets.IntSlider(description=\"Control\", value=77)\n",
    "widgets.link((control, 'value'), (widget, 'value'))\n",
    "value_lbl = widgets.Label()\n",
    "transform = lambda x: str(x)\n",
    "widgets.dlink((widget, 'value'), (value_lbl, 'value'), transform)\n",
    "\n",
    "display(widget, control, widgets.HBox([widgets.Label(\"Current Value:\"), value_lbl]) )"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Float Progress"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": [
     "body"
    ]
   },
   "outputs": [],
   "source": [
    "widget = widgets.FloatProgress()\n",
    "\n",
    "control = widgets.FloatSlider(description=\"Control\", value=31.51)\n",
    "widgets.link((control, 'value'), (widget, 'value'))\n",
    "value_lbl = widgets.Label()\n",
    "transform = lambda x: str(x)\n",
    "widgets.dlink((widget, 'value'), (value_lbl, 'value'), transform)\n",
    "\n",
    "display(widget, control, widgets.HBox([widgets.Label(\"Current Value:\"), value_lbl]) )"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Row 3 - Numeric Widgets"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Bounded Int Text"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": [
     "body"
    ]
   },
   "outputs": [],
   "source": [
    "widget = widgets.BoundedIntText(\n",
    "    value=7,\n",
    "    min=0,\n",
    "    max=10,\n",
    "    step=1,\n",
    "    description='From [0-10]:',\n",
    ")\n",
    "\n",
    "value_lbl = widgets.Label()\n",
    "transform = lambda x: str(x)\n",
    "widgets.dlink((widget, 'value'), (value_lbl, 'value'), transform)\n",
    "\n",
    "display(widget, widgets.HBox([widgets.Label(\"Current Value:\"), value_lbl]) )"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Bounded Float Text"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": [
     "body"
    ]
   },
   "outputs": [],
   "source": [
    "widget = widgets.BoundedFloatText(\n",
    "    value=7.5,\n",
    "    min=0,\n",
    "    max=10.0,\n",
    "    step=0.1,\n",
    "    description='From [0-10]:',\n",
    "    disabled=False\n",
    ")\n",
    "\n",
    "value_lbl = widgets.Label()\n",
    "transform = lambda x: str(x)\n",
    "widgets.dlink((widget, 'value'), (value_lbl, 'value'), transform)\n",
    "\n",
    "display(widget, widgets.HBox([widgets.Label(\"Current Value:\"), value_lbl]) )"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Int Text"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": [
     "body"
    ]
   },
   "outputs": [],
   "source": [
    "widget = widgets.IntText(\n",
    "    value=7,\n",
    "    description='Any:',\n",
    "    disabled=False\n",
    ")\n",
    "\n",
    "value_lbl = widgets.Label()\n",
    "transform = lambda x: str(x)\n",
    "widgets.dlink((widget, 'value'), (value_lbl, 'value'), transform)\n",
    "\n",
    "display(widget, widgets.HBox([widgets.Label(\"Current Value:\"), value_lbl]) )"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Float Text"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": [
     "body"
    ]
   },
   "outputs": [],
   "source": [
    "widget = widgets.FloatText(\n",
    "    value=3.3,\n",
    "    description='Any:',\n",
    "    disabled=False\n",
    ")\n",
    "\n",
    "value_lbl = widgets.Label()\n",
    "transform = lambda x: str(x)\n",
    "widgets.dlink((widget, 'value'), (value_lbl, 'value'), transform)\n",
    "\n",
    "display(widget, widgets.HBox([widgets.Label(\"Current Value:\"), value_lbl]) )"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Row 4 - Boolean Widgets"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Toggle Button"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": [
     "body"
    ]
   },
   "outputs": [],
   "source": [
    "widget = widgets.ToggleButton(\n",
    "    value=False,\n",
    "    description='Click me',\n",
    "    disabled=False,\n",
    "    button_style='', # 'success', 'info', 'warning', 'danger' or ''\n",
    "    tooltip='Description',\n",
    "    icon='check' # (FontAwesome names without the `fa-` prefix)\n",
    ")\n",
    "\n",
    "value_lbl = widgets.Label()\n",
    "transform = lambda x: str(x)\n",
    "widgets.dlink((widget, 'value'), (value_lbl, 'value'), transform)\n",
    "\n",
    "display(widget, widgets.HBox([widgets.Label(\"Current Value:\"), value_lbl]) )"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Checkbox"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": [
     "body"
    ]
   },
   "outputs": [],
   "source": [
    "widget = widgets.Checkbox(\n",
    "    value=False,\n",
    "    description='Check me',\n",
    "    disabled=False,\n",
    "    indent=False\n",
    ")\n",
    "\n",
    "value_lbl = widgets.Label()\n",
    "transform = lambda x: str(x)\n",
    "widgets.dlink((widget, 'value'), (value_lbl, 'value'), transform)\n",
    "\n",
    "display(widget, widgets.HBox([widgets.Label(\"Current Value:\"), value_lbl]) )"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Valid"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "tags": [
     "body"
    ]
   },
   "source": [
    "The valid widget provides a read-only indicator."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "widgets.Valid?"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": [
     "body"
    ]
   },
   "outputs": [],
   "source": [
    "widget = widgets.Valid(\n",
    "    value=False,\n",
    "    description='Valid:',\n",
    ")\n",
    "\n",
    "control = widgets.Checkbox(description=\"Control\")\n",
    "widgets.link((control, 'value'), (widget, 'value'))\n",
    "value_lbl = widgets.Label()\n",
    "transform = lambda x: str(x)\n",
    "widgets.dlink((widget, 'value'), (value_lbl, 'value'), transform)\n",
    "\n",
    "display(widget, control, widgets.HBox([widgets.Label(\"Current Value:\"), value_lbl]) )"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Row 5 - Selection Widgets"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Dropdown"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": [
     "body"
    ]
   },
   "outputs": [],
   "source": [
    "widget = widgets.Dropdown(\n",
    "    options=['1', '2', '3'],\n",
    "    value='2',\n",
    "    description='Number:',\n",
    "    disabled=False,\n",
    ")\n",
    "\n",
    "value_lbl = widgets.Label()\n",
    "transform = lambda x: str(x)\n",
    "widgets.dlink((widget, 'value'), (value_lbl, 'value'), transform)\n",
    "\n",
    "display(widget, widgets.HBox([widgets.Label(\"Current Value:\"), value_lbl]) )"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Radio Buttons"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": [
     "body"
    ]
   },
   "outputs": [],
   "source": [
    "widget = widgets.RadioButtons(\n",
    "    options=['pepperoni', 'pineapple', 'anchovies'],\n",
    "#     value='pineapple', # Defaults to 'pineapple'\n",
    "    layout={'width': 'max-content'}, # If the items' names are long\n",
    "    description='Pizza topping:',\n",
    "    disabled=False\n",
    ")\n",
    "\n",
    "value_lbl = widgets.Label()\n",
    "transform = lambda x: str(x)\n",
    "widgets.dlink((widget, 'value'), (value_lbl, 'value'), transform)\n",
    "\n",
    "display(widget, widgets.HBox([widgets.Label(\"Current Value:\"), value_lbl]) )\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Select"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": [
     "body"
    ]
   },
   "outputs": [],
   "source": [
    "widget = widgets.Select(\n",
    "    options=['Linux', 'Windows', 'OSX'],\n",
    "    value='OSX',\n",
    "    # rows=10,\n",
    "    description='OS:',\n",
    "    disabled=False\n",
    ")\n",
    "\n",
    "value_lbl = widgets.Label()\n",
    "transform = lambda x: str(x)\n",
    "widgets.dlink((widget, 'value'), (value_lbl, 'value'), transform)\n",
    "\n",
    "display(widget, widgets.HBox([widgets.Label(\"Current Value:\"), value_lbl]) )"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Row 6 - Selection Widgets"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Selection Slider"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": [
     "body"
    ]
   },
   "outputs": [],
   "source": [
    "widget = widgets.SelectionSlider(\n",
    "    options=['scrambled', 'sunny side up', 'poached', 'over easy'],\n",
    "    value='sunny side up',\n",
    "    description='I like my eggs ...',\n",
    "    disabled=False,\n",
    "    continuous_update=True,\n",
    "    orientation='horizontal',\n",
    "    readout=True\n",
    ")\n",
    "\n",
    "value_lbl = widgets.Label()\n",
    "transform = lambda x: str(x)\n",
    "widgets.dlink((widget, 'value'), (value_lbl, 'value'), transform)\n",
    "\n",
    "display(widget, widgets.HBox([widgets.Label(\"Current Value:\"), value_lbl]) )"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### SelectionRangeSlider"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": [
     "source"
    ]
   },
   "outputs": [],
   "source": [
    "import datetime\n",
    "dates = [datetime.date(2015,i,1) for i in range(1,13)]\n",
    "options = [(i.strftime('%b'), i) for i in dates]"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": [
     "body"
    ]
   },
   "outputs": [],
   "source": [
    "widget = widgets.SelectionRangeSlider(\n",
    "    options=options,\n",
    "    index=(0,11),\n",
    "    description='Months (2015)',\n",
    "    disabled=False\n",
    ")\n",
    "\n",
    "value_lbl = widgets.Label()\n",
    "transform = lambda x: str(x)\n",
    "widgets.dlink((widget, 'value'), (value_lbl, 'value'), transform)\n",
    "\n",
    "display(widget, widgets.HBox([widgets.Label(\"Current Value:\"), value_lbl]) )"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Toggle Buttons"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": [
     "body"
    ]
   },
   "outputs": [],
   "source": [
    "widget = widgets.ToggleButtons(\n",
    "    options=['Slow', 'Regular', 'Fast'],\n",
    "    description='Speed:',\n",
    "    disabled=False,\n",
    "    button_style='', # 'success', 'info', 'warning', 'danger' or ''\n",
    "    tooltips=['Description of slow', 'Description of regular', 'Description of fast'],\n",
    "#     icons=['check'] * 3\n",
    ")\n",
    "\n",
    "value_lbl = widgets.Label()\n",
    "transform = lambda x: str(x)\n",
    "widgets.dlink((widget, 'value'), (value_lbl, 'value'), transform)\n",
    "\n",
    "display(widget, widgets.HBox([widgets.Label(\"Current Value:\"), value_lbl]) )"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Select Multiple"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": [
     "body"
    ]
   },
   "outputs": [],
   "source": [
    "widget = widgets.SelectMultiple(\n",
    "    options=['Apples', 'Oranges', 'Pears'],\n",
    "    value=['Oranges'],\n",
    "    #rows=10,\n",
    "    description='Fruits',\n",
    "    disabled=False\n",
    ")\n",
    "\n",
    "value_lbl = widgets.Label()\n",
    "transform = lambda x: str(x)\n",
    "widgets.dlink((widget, 'value'), (value_lbl, 'value'), transform)\n",
    "\n",
    "display(widget, widgets.HBox([widgets.Label(\"Current Value:\"), value_lbl]) )"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Page 2"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Row 1 - String widgets"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Text"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": [
     "body"
    ]
   },
   "outputs": [],
   "source": [
    "widget = widgets.Text(\n",
    "    value='Hello World',\n",
    "    placeholder='Type something',\n",
    "    description='String:',\n",
    "    disabled=False\n",
    ")\n",
    "\n",
    "value_lbl = widgets.Label()\n",
    "transform = lambda x: str(x)\n",
    "widgets.dlink((widget, 'value'), (value_lbl, 'value'), transform)\n",
    "\n",
    "display(widget, widgets.HBox([widgets.Label(\"Current Value:\"), value_lbl]) )"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Text Area"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": [
     "body"
    ]
   },
   "outputs": [],
   "source": [
    "widget = widgets.Textarea(\n",
    "    value='Hello World',\n",
    "    placeholder='Type something',\n",
    "    description='String:',\n",
    "    disabled=False\n",
    ")\n",
    "\n",
    "value_lbl = widgets.Label()\n",
    "transform = lambda x: str(x)\n",
    "widgets.dlink((widget, 'value'), (value_lbl, 'value'), transform)\n",
    "\n",
    "display(widget, widgets.HBox([widgets.Label(\"Current Value:\"), value_lbl]) )"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Combobox"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": [
     "body"
    ]
   },
   "outputs": [],
   "source": [
    "widget = widgets.Combobox(\n",
    "    # value='John',\n",
    "    placeholder='Choose Someone from: Paul, John, George, Ringo',\n",
    "    options=['Paul', 'John', 'George', 'Ringo'],\n",
    "    description='',\n",
    "    ensure_option=True,\n",
    "    disabled=False\n",
    ")\n",
    "\n",
    "value_lbl = widgets.Label()\n",
    "transform = lambda x: str(x)\n",
    "widgets.dlink((widget, 'value'), (value_lbl, 'value'), transform)\n",
    "\n",
    "display(widget, widgets.HBox([widgets.Label(\"Current Value:\"), value_lbl]) )\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Password"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": [
     "body"
    ]
   },
   "outputs": [],
   "source": [
    "widget = widgets.Password(\n",
    "    value='password',\n",
    "    placeholder='Enter password',\n",
    "    description='Password:',\n",
    "    disabled=False\n",
    ")\n",
    "\n",
    "value_lbl = widgets.Label()\n",
    "transform = lambda x: str(x)\n",
    "widgets.dlink((widget, 'value'), (value_lbl, 'value'), transform)\n",
    "\n",
    "display(widget, widgets.HBox([widgets.Label(\"Current Value:\"), value_lbl]) )\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Row 2 - String widgets"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Label"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "tags": [
     "body"
    ]
   },
   "source": [
    "The Label widget is the one used in this dashboard to display the values of the other widgets."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": [
     "body"
    ]
   },
   "outputs": [],
   "source": [
    "widget = widgets.Label()\n",
    "\n",
    "control = widgets.Text(description=\"Control\", value=\"Some text...\")\n",
    "widgets.link((control, 'value'), (widget, 'value'))\n",
    "\n",
    "value_lbl = widgets.Label()\n",
    "transform = lambda x: str(x)\n",
    "widgets.dlink((widget, 'value'), (value_lbl, 'value'), transform)\n",
    "\n",
    "display(widget, control, widgets.HBox([widgets.Label(\"Current Value:\"), value_lbl]) )"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### HTML"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": [
     "body"
    ]
   },
   "outputs": [],
   "source": [
    "widget = widgets.HTML(\n",
    "    value=\"Hello <b>World</b>\",\n",
    "    placeholder='Some HTML',\n",
    "    description='Some HTML',\n",
    ")\n",
    "\n",
    "control = widgets.Textarea(description=\"Control\", value=\"Hello <b>World</b> <i>woooo</i>\")\n",
    "widgets.link((control, 'value'), (widget, 'value'))\n",
    "\n",
    "value_lbl = widgets.Label()\n",
    "transform = lambda x: str(x)\n",
    "widgets.dlink((widget, 'value'), (value_lbl, 'value'), transform)\n",
    "\n",
    "display(widget, control, widgets.HBox([widgets.Label(\"Current Value:\"), value_lbl]) )"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### HTML Math"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": [
     "body"
    ]
   },
   "outputs": [],
   "source": [
    "widget = widgets.HTMLMath(\n",
    "    value=r\"Some math and <i>HTML</i>: \\(x^2\\) and $$\\frac{x+1}{x-1}$$\",\n",
    "    placeholder='Some HTML',\n",
    "    description='Some HTML',\n",
    ")\n",
    "\n",
    "control = widgets.Textarea(description=\"Control\", value=\"Some math and <i>HTML</i>: \\(x^2\\) and $$\\frac{x+1}{x-1}$$\")\n",
    "widgets.link((control, 'value'), (widget, 'value'))\n",
    "\n",
    "value_lbl = widgets.Label()\n",
    "transform = lambda x: str(x)\n",
    "widgets.dlink((widget, 'value'), (value_lbl, 'value'), transform)\n",
    "\n",
    "display(widget, control, widgets.HBox([widgets.Label(\"Current Value:\"), value_lbl]) )"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Row 3 - Other"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Image"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": [
     "body"
    ]
   },
   "outputs": [],
   "source": [
    "url = 'https://upload.wikimedia.org/wikipedia/commons/thumb/3/38/Jupyter_logo.svg/883px-Jupyter_logo.svg.png'\n",
    "widget = widgets.Image.from_url(url)\n",
    "widget.width = \"100px\"\n",
    "display(widget)\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Button"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": [
     "body"
    ]
   },
   "outputs": [],
   "source": [
    "widgets.Button(\n",
    "    description='Click me',\n",
    "    disabled=False,\n",
    "    button_style='', # 'success', 'info', 'warning', 'danger' or ''\n",
    "    tooltip='Click me',\n",
    "    icon='check' # (FontAwesome names without the `fa-` prefix)\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Play (Animation)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": [
     "body"
    ]
   },
   "outputs": [],
   "source": [
    "widget = widgets.Play(\n",
    "    value=50,\n",
    "    min=0,\n",
    "    max=100,\n",
    "    step=1,\n",
    "    interval=100,\n",
    "    description=\"Press play\",\n",
    "    disabled=False\n",
    ")\n",
    "\n",
    "\n",
    "value_lbl = widgets.IntSlider()\n",
    "transform = lambda x: str(x)\n",
    "widgets.dlink((widget, 'value'), (value_lbl, 'value'), transform)\n",
    "\n",
    "display(widget, widgets.HBox([widgets.Label(\"Current Value:\"), value_lbl]) )\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Row 4 - Other"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Date picker"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": [
     "body"
    ]
   },
   "outputs": [],
   "source": [
    "widget = widgets.DatePicker(\n",
    "    description='Pick a Date',\n",
    "    disabled=False\n",
    ")\n",
    "\n",
    "value_lbl = widgets.Label()\n",
    "transform = lambda x: str(x)\n",
    "widgets.dlink((widget, 'value'), (value_lbl, 'value'), transform)\n",
    "\n",
    "display(widget, widgets.HBox([widgets.Label(\"Current Value:\"), value_lbl]) )"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Color Picker"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": [
     "body"
    ]
   },
   "outputs": [],
   "source": [
    "widget = widgets.ColorPicker(\n",
    "    concise=False,\n",
    "    description='Pick a color',\n",
    "    value='blue',\n",
    "    disabled=False\n",
    ")\n",
    "\n",
    "value_lbl = widgets.Label()\n",
    "transform = lambda x: str(x)\n",
    "widgets.dlink((widget, 'value'), (value_lbl, 'value'), transform)\n",
    "\n",
    "display(widget, widgets.HBox([widgets.Label(\"Current Value:\"), value_lbl]) )"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### File upload"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": [
     "body"
    ]
   },
   "outputs": [],
   "source": [
    "widgets.FileUpload(\n",
    "    accept='',  # Accepted file extension e.g. '.txt', '.pdf', 'image/*', 'image/*,.pdf'\n",
    "    multiple=False  # True to accept multiple files upload else False\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Layout"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Row 1"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Box "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": [
     "body"
    ]
   },
   "outputs": [],
   "source": [
    "items = [widgets.Label(str(i)) for i in range(4)]\n",
    "widgets.Box(items)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### HBox"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": [
     "body"
    ]
   },
   "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": {
    "tags": [
     "body"
    ]
   },
   "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": {},
   "source": [
    "### Grid Box"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": [
     "body"
    ]
   },
   "outputs": [],
   "source": [
    "items = [widgets.Label(str(i)) for i in range(8)]\n",
    "widgets.GridBox(items, layout=widgets.Layout(grid_template_columns=\"repeat(3, 100px)\"))"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Row 2"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": [
     "body"
    ]
   },
   "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"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": [
     "body"
    ]
   },
   "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": {},
   "source": [
    "### Nesting tabs and accordions"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": [
     "body"
    ]
   },
   "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": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "celltoolbar": "Tags",
  "kernelspec": {
   "display_name": "Python 3 (ipykernel)",
   "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.8.10"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}