nb-tricks-03-ipywidgets.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# 透過 ipywidgets 加入互動式介面\n",
    "\n",
    "[Pyradise](https://www.facebook.com/pyradise.geek)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {},
   "outputs": [],
   "source": [
    "import ipywidgets as widgets\n",
    "from IPython.display import display"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Text"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "155b789f5bf447348e6bdf3a0b179744",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "Text(value='world', description='Say hello to:', placeholder='Type something')"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "say_hello_to = widgets.Text(\n",
    "    value='world',\n",
    "    placeholder='Type something',\n",
    "    description='Say hello to:',\n",
    "    disabled=False\n",
    ")\n",
    "display(say_hello_to)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "Hello world!\n"
     ]
    }
   ],
   "source": [
    "hello_msg = \"Hello {}!\".format(say_hello_to.value)\n",
    "print(hello_msg)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Textarea"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "df0cd76e61974794a07e707d84999ec3",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "Textarea(value='2020 Tokyo Marathon', description='Say hello to:', placeholder='Type something')"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "say_hello_to = widgets.Textarea(\n",
    "    value='2020 Tokyo Marathon',\n",
    "    placeholder='Type something',\n",
    "    description='Say hello to:',\n",
    "    disabled=False\n",
    ")\n",
    "display(say_hello_to)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "Hello 2020 Tokyo Marathon!\n"
     ]
    }
   ],
   "source": [
    "hello_msg = \"Hello {}!\".format(say_hello_to.value)\n",
    "print(hello_msg)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Dropdown"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "5e8dfe5fdf02483e9efa82ad2f8fdd40",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "Dropdown(description='Next WMM:', options=('Tokyo Marathon', 'Boston Marathon', 'New York Marathon', 'Chicago …"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "world_majors = widgets.Dropdown(\n",
    "    options=['Tokyo Marathon', 'Boston Marathon', 'New York Marathon',\n",
    "            'Chicago Marathon', 'London Marathon', 'Berlin Marathon'],\n",
    "    value='Tokyo Marathon',\n",
    "    description='Next WMM:',\n",
    "    disabled=False,\n",
    ")\n",
    "display(world_majors)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 7,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "Tokyo Marathon will be my next World Marathon Major!\n"
     ]
    }
   ],
   "source": [
    "wmm_msg = \"{} will be my next World Marathon Major!\".format(world_majors.value)\n",
    "print(wmm_msg)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## RadioButtons"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 8,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "820a2dcb35504292b9a765124f3e125f",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "RadioButtons(description='Next WMM:', options=('Tokyo Marathon', 'Boston Marathon', 'New York Marathon', 'Chic…"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "world_majors = widgets.RadioButtons(\n",
    "    options=['Tokyo Marathon', 'Boston Marathon', 'New York Marathon',\n",
    "            'Chicago Marathon', 'London Marathon', 'Berlin Marathon'],\n",
    "    value='Tokyo Marathon',\n",
    "    description='Next WMM:',\n",
    "    disabled=False,\n",
    ")\n",
    "display(world_majors)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 9,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "Tokyo Marathon will be my next World Marathon Major!\n"
     ]
    }
   ],
   "source": [
    "wmm_msg = \"{} will be my next World Marathon Major!\".format(world_majors.value)\n",
    "print(wmm_msg)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Select"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 10,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "d1b7caa27bfc48c9a8463f170a35f3ed",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "Select(description='Next WMM:', options=('Tokyo Marathon', 'Boston Marathon', 'New York Marathon', 'Chicago Ma…"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "world_majors = widgets.Select(\n",
    "    options=['Tokyo Marathon', 'Boston Marathon', 'New York Marathon',\n",
    "            'Chicago Marathon', 'London Marathon', 'Berlin Marathon'],\n",
    "    value='Tokyo Marathon',\n",
    "    description='Next WMM:',\n",
    "    disabled=False,\n",
    ")\n",
    "display(world_majors)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 11,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "Tokyo Marathon will be my next World Marathon Major!\n"
     ]
    }
   ],
   "source": [
    "wmm_msg = \"{} will be my next World Marathon Major!\".format(world_majors.value)\n",
    "print(wmm_msg)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## SelectMultiple"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 12,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "f229f21dcf7d4275a4ace6508efa24e1",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "SelectMultiple(description='WMM:', index=(1,), options=('Tokyo Marathon', 'Boston Marathon', 'New York Maratho…"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "world_majors = widgets.SelectMultiple(\n",
    "    options=['Tokyo Marathon', 'Boston Marathon', 'New York Marathon',\n",
    "            'Chicago Marathon', 'London Marathon', 'Berlin Marathon'],\n",
    "    value=['Boston Marathon'],\n",
    "    description='WMM:',\n",
    "    disabled=False,\n",
    ")\n",
    "display(world_majors)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 13,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "I've run Boston Marathon in 2016 and 2017!\n"
     ]
    }
   ],
   "source": [
    "for wm in world_majors.value:\n",
    "    wmm_msg = \"I've run {} in 2016 and 2017!\".format(wm)\n",
    "    print(wmm_msg)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## DatePicker"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 14,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "a0abf1847fd74a909769b0a6aba99691",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "DatePicker(value=None, description='Next WMM:')"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "next_wmm_date = widgets.DatePicker(\n",
    "    description='Next WMM:'\n",
    ")\n",
    "display(next_wmm_date)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 15,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "2020 Tokyo Marathon will be hosted on 2020-03-01.\n"
     ]
    }
   ],
   "source": [
    "wmm_msg = \"2020 Tokyo Marathon will be hosted on {}.\".format(next_wmm_date.value)\n",
    "print(wmm_msg)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## IntSlider"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 16,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "91c680f118b6450fbb6c8c1df55c0282",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "IntSlider(value=1, continuous_update=False, description='WMM Count:', max=6)"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "wmm_count = widgets.widgets.IntSlider(\n",
    "    value=1,\n",
    "    min=0,\n",
    "    max=6,\n",
    "    step=1,\n",
    "    description='WMM Count:',\n",
    "    disabled=False,\n",
    "    continuous_update=False,\n",
    "    orientation='horizontal',\n",
    "    readout=True,\n",
    "    readout_format='d'\n",
    ")\n",
    "display(wmm_count)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 17,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "I've conquered 1 World Marathon Major(s).\n"
     ]
    }
   ],
   "source": [
    "wmm_msg = \"I've conquered {} World Marathon Major(s).\".format(wmm_count.value)\n",
    "print(wmm_msg)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## FloatSlider"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 18,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "983a9b52682342eabf464cf24391c80e",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "FloatSlider(value=172.0, continuous_update=False, description='My height(cm):', max=180.0, min=170.0, readout_…"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "79bddfe23d16423a96b45668f59c8d7b",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "FloatSlider(value=63.0, continuous_update=False, description='My weight(kg):', max=70.0, min=60.0, readout_for…"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "my_height = widgets.widgets.FloatSlider(\n",
    "    value=172.0,\n",
    "    min=170,\n",
    "    max=180,\n",
    "    step=0.1,\n",
    "    description='My height(cm):',\n",
    "    disabled=False,\n",
    "    continuous_update=False,\n",
    "    orientation='horizontal',\n",
    "    readout=True,\n",
    "    readout_format='.1f'\n",
    ")\n",
    "my_weight = widgets.widgets.FloatSlider(\n",
    "    value=63.0,\n",
    "    min=60,\n",
    "    max=70,\n",
    "    step=0.1,\n",
    "    description='My weight(kg):',\n",
    "    disabled=False,\n",
    "    continuous_update=False,\n",
    "    orientation='horizontal',\n",
    "    readout=True,\n",
    "    readout_format='.1f'\n",
    ")\n",
    "display(my_height, my_weight)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 19,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "I am 172.0 cm tall and weigh 63.0 kg with a BMI of 21.30.\n"
     ]
    }
   ],
   "source": [
    "bmi = my_weight.value / (my_height.value*0.01)**2\n",
    "bmi_msg = \"I am {:.1f} cm tall and weigh {:.1f} kg with a BMI of {:.2f}.\".format(my_height.value, my_weight.value, bmi)\n",
    "print(bmi_msg)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## IntText"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 20,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "f6315d5bd2954a3ca7bf8f7c776cb4b1",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "IntText(value=1, description='WMM Count:')"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "wmm_count = widgets.IntText(\n",
    "    value=1,\n",
    "    description='WMM Count:',\n",
    "    disabled=False\n",
    ")\n",
    "display(wmm_count)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 21,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "I've conquered 1 World Marathon Major(s).\n"
     ]
    }
   ],
   "source": [
    "wmm_msg = \"I've conquered {} World Marathon Major(s).\".format(wmm_count.value)\n",
    "print(wmm_msg)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## FloatText"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 22,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "55a4d2d17a674d40bc7a8e9520e00284",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "FloatText(value=172.0, description='My height(cm):')"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "92bc7f1d14b740a19dd8ee28ab5b8ac1",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "FloatText(value=63.0, description='My weight(kg):')"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "my_height = widgets.FloatText(\n",
    "    value=172,\n",
    "    description='My height(cm):',\n",
    "    disabled=False\n",
    ")\n",
    "\n",
    "my_weight = widgets.FloatText(\n",
    "    value=63,\n",
    "    description='My weight(kg):',\n",
    "    disabled=False\n",
    ")\n",
    "display(my_height, my_weight)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 23,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "I am 172.0 cm tall and weigh 63.0 kg with a BMI of 21.30.\n"
     ]
    }
   ],
   "source": [
    "bmi = my_weight.value / (my_height.value*0.01)**2\n",
    "bmi_msg = \"I am {:.1f} cm tall and weigh {:.1f} kg with a BMI of {:.2f}.\".format(my_height.value, my_weight.value, bmi)\n",
    "print(bmi_msg)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Checkbox"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 24,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "74fd5da35a42463588bd7ef366b32ad7",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "Checkbox(value=True, description='Eligible for semi-elite')"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "import ipywidgets as widgets\n",
    "from IPython.display import display\n",
    "\n",
    "sub_245 = widgets.Checkbox(\n",
    "    value=True,\n",
    "    description='Eligible for semi-elite',\n",
    "    disabled=False\n",
    ")\n",
    "display(sub_245)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 25,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "I am eligible to register 2020 Tokyo Marathon as a semi-elite.\n"
     ]
    }
   ],
   "source": [
    "if sub_245:\n",
    "    print(\"I am eligible to register 2020 Tokyo Marathon as a semi-elite.\")"
   ]
  }
 ],
 "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.1"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}