{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "from ipywidgets import interact, interactive, fixed, interact_manual\n",
    "import ipywidgets as widgets"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "def f(x):\n",
    "    return x"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "interact(f, x=10);"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "interact(f, x=True);"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "interact(f, x='Hi there!')"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "@interact(x=True, y=1.0)\n",
    "def g(x, y):\n",
    "    return (x, y)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "def h(p, q):\n",
    "    return (p, q)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "interact(h, p=5, q=fixed(20))"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "widgets.IntSlider()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "w = widgets.IntSlider()\n",
    "display(w)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "\n",
    "display(w)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "w.close()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "w = widgets.IntSlider(value=10)\n",
    "display(w)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "w.value"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "w.value = 50"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "w.keys"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "widgets.Text(value='Hello World!', disabled=True)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "a = widgets.FloatText()\n",
    "b = widgets.FloatSlider()\n",
    "display(a,b)\n",
    "\n",
    "mylink = widgets.jslink((a, 'value'), (b, 'value'))"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "mylink.unlink()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "widgets.IntSlider(\n",
    "    value=7,\n",
    "    min=0,\n",
    "    max=10,\n",
    "    step=1,\n",
    "    description='Test:',\n",
    "    disabled=False,\n",
    "    continuous_update=False,\n",
    "    orientation='horizontal',\n",
    "    readout=True,\n",
    "    readout_format='d'\n",
    ")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "widgets.FloatSlider(\n",
    "    value=7.5,\n",
    "    min=0,\n",
    "    max=10.0,\n",
    "    step=0.1,\n",
    "    description='Test:',\n",
    "    disabled=False,\n",
    "    continuous_update=False,\n",
    "    orientation='horizontal',\n",
    "    readout=True,\n",
    "    readout_format='.1f',\n",
    ")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "widgets.FloatSlider(\n",
    "    value=7.5,\n",
    "    min=0,\n",
    "    max=10.0,\n",
    "    step=0.1,\n",
    "    description='Test:',\n",
    "    disabled=False,\n",
    "    continuous_update=False,\n",
    "    orientation='vertical',\n",
    "    readout=True,\n",
    "    readout_format='.1f',\n",
    ")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "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='Log Slider'\n",
    ")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "widgets.IntRangeSlider(\n",
    "    value=[5, 7],\n",
    "    min=0,\n",
    "    max=10,\n",
    "    step=1,\n",
    "    description='Test:',\n",
    "    disabled=False,\n",
    "    continuous_update=False,\n",
    "    orientation='horizontal',\n",
    "    readout=True,\n",
    "    readout_format='d',\n",
    ")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "widgets.FloatRangeSlider(\n",
    "    value=[5, 7.5],\n",
    "    min=0,\n",
    "    max=10.0,\n",
    "    step=0.1,\n",
    "    description='Test:',\n",
    "    disabled=False,\n",
    "    continuous_update=False,\n",
    "    orientation='horizontal',\n",
    "    readout=True,\n",
    "    readout_format='.1f',\n",
    ")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "widgets.IntProgress(\n",
    "    value=6,\n",
    "    min=0,\n",
    "    max=10,\n",
    "    step=1,\n",
    "    description='Loading:',\n",
    "    bar_style='', # 'success', 'info', 'warning', 'danger' or ''\n",
    "    orientation='horizontal'\n",
    ")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "widgets.BoundedIntText(\n",
    "    value=7,\n",
    "    min=0,\n",
    "    max=10,\n",
    "    step=1,\n",
    "    description='Text:',\n",
    "    disabled=False\n",
    ")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "widgets.IntText(\n",
    "    value=7,\n",
    "    description='Any:',\n",
    "    disabled=False\n",
    ")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "widgets.ToggleButton(\n",
    "    value=False,\n",
    "    description='Click me',\n",
    "    disabled=False,\n",
    "    button_style='info', # 'success', 'info', 'warning', 'danger' or ''\n",
    "    tooltip='Description',\n",
    "    icon='check' # (FontAwesome names without the `fa-` prefix)\n",
    ")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "widgets.Checkbox(\n",
    "    value=False,\n",
    "    description='Check me',\n",
    "    disabled=False,\n",
    "    indent=False\n",
    ")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "widgets.Valid(\n",
    "    value=False,\n",
    "    description='Valid!',\n",
    ")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "widgets.Valid(\n",
    "    value=False,\n",
    "    description='Valid!',\n",
    ")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "\n",
    "widgets.Dropdown(\n",
    "    options=['1', '2', '3'],\n",
    "    value='2',\n",
    "    description='Number:',\n",
    "    disabled=False,\n",
    ")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "widgets.Dropdown(\n",
    "    options=[('One', 1), ('Two', 2), ('Three', 3)],\n",
    "    value=2,\n",
    "    description='Number:',\n",
    ")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "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",
    ")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "widgets.Box(\n",
    "    [\n",
    "        widgets.Label(value='Pizza topping with a very long label:'),\n",
    "        widgets.RadioButtons(\n",
    "            options=[\n",
    "                'pepperoni',\n",
    "                'pineapple',\n",
    "                'anchovies',\n",
    "                'and the long name that will fit fine and the long name that will fit fine and the long name that will fit fine '\n",
    "            ],\n",
    "            layout={'width': 'max-content'}\n",
    "        )\n",
    "    ]\n",
    ")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "\n",
    "widgets.Select(\n",
    "    options=['Linux', 'Windows', 'OSX'],\n",
    "    value='OSX',\n",
    "    # rows=10,\n",
    "    description='OS:',\n",
    "    disabled=False\n",
    ")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "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=False,\n",
    "    orientation='horizontal',\n",
    "    readout=True\n",
    ")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "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]\n",
    "widgets.SelectionRangeSlider(\n",
    "    options=options,\n",
    "    index=(0, 11),\n",
    "    description='Months (2015)',\n",
    "    disabled=False\n",
    ")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "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",
    ")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "widgets.SelectMultiple(\n",
    "    options=['Apples', 'Oranges', 'Pears'],\n",
    "    value=['Oranges'],\n",
    "    #rows=10,\n",
    "    description='Fruits',\n",
    "    disabled=False\n",
    ")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "widgets.Text(\n",
    "    value='Hello World',\n",
    "    placeholder='Type something',\n",
    "    description='String:',\n",
    "    disabled=False\n",
    ")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "widgets.Textarea(\n",
    "    value='Hello World',\n",
    "    placeholder='Type something',\n",
    "    description='String:',\n",
    "    disabled=False\n",
    ")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "widgets.Combobox(\n",
    "    # value='John',\n",
    "    placeholder='Choose Someone',\n",
    "    options=['Paul', 'John', 'George', 'Ringo'],\n",
    "    description='Combobox:',\n",
    "    ensure_option=True,\n",
    "    disabled=False\n",
    ")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "widgets.Password(\n",
    "    value='password',\n",
    "    placeholder='Enter password',\n",
    "    description='Password:',\n",
    "    disabled=False\n",
    ")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "widgets.HBox([widgets.Label(value=\"The $m$ in $E=mc^2$:\"), widgets.FloatSlider()])"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "widgets.HTML(\n",
    "    value=\"Hello <b>World</b>\",\n",
    "    placeholder='Some HTML',\n",
    "    description='Some HTML',\n",
    ")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "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",
    ")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "file = open(\"/home/qiusheng/Pictures/t-mo.png\", \"rb\")\n",
    "image = file.read()\n",
    "widgets.Image(\n",
    "    value=image,\n",
    "    format='png',\n",
    "    width=300,\n",
    "    height=400,\n",
    ")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "widgets.Button(\n",
    "    description='Click me',\n",
    "    disabled=False,\n",
    "    button_style='warning', # 'success', 'info', 'warning', 'danger' or ''\n",
    "    tooltip='Click me',\n",
    "    icon='check' # (FontAwesome names without the `fa-` prefix)\n",
    ")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "play = widgets.Play(\n",
    "    value=50,\n",
    "    min=0,\n",
    "    max=100,\n",
    "    step=1,\n",
    "    interval=500,\n",
    "    description=\"Press play\",\n",
    "    disabled=False\n",
    ")\n",
    "slider = widgets.IntSlider()\n",
    "widgets.jslink((play, 'value'), (slider, 'value'))\n",
    "widgets.HBox([play, slider])"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "widgets.DatePicker(\n",
    "    description='Pick a Date',\n",
    "    disabled=False\n",
    ")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "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": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "widgets.Controller(\n",
    "    index=0,\n",
    ")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "items = [widgets.Label(str(i)) for i in range(4)]\n",
    "widgets.Box(items)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "items = [widgets.Label(str(i)) for i in range(4)]\n",
    "widgets.HBox(items)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "\n",
    "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": "code",
   "execution_count": null,
   "metadata": {},
   "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)\"))\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "tab_contents = ['P0', 'P1', 'P2', 'P3', 'P4']\n",
    "children = [widgets.Text(description=name) for name in tab_contents]\n",
    "tab = widgets.Tab()\n",
    "tab.children = children\n",
    "tab.titles = [str(i) for i in range(len(children))]\n",
    "tab"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "out = widgets.Output(layout={'border': '1px solid black'})\n",
    "out"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "with out:\n",
    "    for i in range(10):\n",
    "        print(i, 'Hello world!')"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "\n",
    "from IPython.display import YouTubeVideo\n",
    "with out:\n",
    "    display(YouTubeVideo('eWzY2nGfkXk'))"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "with out:\n",
    "    display(widgets.IntSlider())"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "\n",
    "out = widgets.Output(layout={'border': '1px solid black'})\n",
    "out.append_stdout('Output appended with append_stdout')\n",
    "out.append_display_data(YouTubeVideo('eWzY2nGfkXk'))\n",
    "out"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "out.clear_output()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "from IPython.display import display\n",
    "button = widgets.Button(description=\"Click Me!\")\n",
    "output = widgets.Output()\n",
    "\n",
    "display(button, output)\n",
    "\n",
    "def on_button_clicked(b):\n",
    "    with output:\n",
    "        print(\"Button clicked.\")\n",
    "\n",
    "button.on_click(on_button_clicked)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "int_range = widgets.IntSlider()\n",
    "output2 = widgets.Output()\n",
    "\n",
    "display(int_range, output2)\n",
    "\n",
    "def on_value_change(change):\n",
    "    with output2:\n",
    "        print(change['new'])\n",
    "\n",
    "int_range.observe(on_value_change, names='value')"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "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.8.2"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}