{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {},
   "outputs": [],
   "source": [
    "import matplotlib.pyplot as plt\n",
    "import matplotlib.gridspec as gridspec\n",
    "import ipywidgets as widgets\n",
    "from ipywidgets import interact, Layout, IntSlider, FloatSlider\n",
    "import numpy as np\n",
    "from numpy import arange,sin,pi"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "###  IntSlider for interactive calculation"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "352fc7185b5c4b7ca97babd9dc9ba537",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "interactive(children=(IntSlider(value=5, description='Slider value:', layout=Layout(width='99%'), max=10), Out…"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "def printf(str, *args):\n",
    "    print(str % args, end='')\n",
    "\n",
    "# Define the square function\n",
    "#\n",
    "def square(x):\n",
    "    result = x * x\n",
    "\n",
    "    # print short notice above the result value\n",
    "    print(f'Result of square({x}) is:', end='')\n",
    "\n",
    "    return result\n",
    "\n",
    "# Simple interact widget from ipywidgets\n",
    "#\n",
    "interact = interact(\n",
    "    square,\n",
    "    x=IntSlider(\n",
    "        value=5,\n",
    "        min=0,\n",
    "        max=10,\n",
    "        step=1,\n",
    "        description='Slider value:',\n",
    "        layout=Layout(width='99%')\n",
    "    )\n",
    ");\n",
    "\n",
    "# the semicolon ';' suppress the output\n",
    "# of the code execution\n",
    "#\n",
    "interact;"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### FloatSlider for interactive plotting"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "21e7e5bf89904f37aac36cffe9ae5acd",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "interactive(children=(FloatSlider(value=3.141592653589793, description='Value (x):', layout=Layout(width='99%'…"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "# Define the plot function  \n",
    "#\n",
    "def myplot(xv):\n",
    "    # calculate x as evenly spaced values within a interval 0 .. xv\n",
    "    x = arange(0, xv, 0.01)\n",
    "    # the plot function\n",
    "    y = sin(pi*x)\n",
    "\n",
    "    # NOTE: Matplotlib doesn't work with pixels directly, but rather\n",
    "    # physical sizes (inch) and DPI. To use pixels for the figures\n",
    "    # figsize, the DPI of the monitor must be used for re-calculation\n",
    "    #\n",
    "    # See: https://www.infobyip.com/detectmonitordpi.php\n",
    "    \n",
    "    # DPI of common monitors\n",
    "    my_dpi=96\n",
    "    \n",
    "    # figsize: width|height recalculated from inch to pixels\n",
    "    plt.figure(figsize=(800/my_dpi, 400/my_dpi), dpi=my_dpi)\n",
    "    \n",
    "    # set the grid lines (light-gray)\n",
    "    plt.grid(axis='x', color='#E0E0E0', linestyle='--', linewidth=2),\n",
    "    plt.grid(axis='y', color='#E0E0E0', linestyle='-', linewidth=2),\n",
    "    \n",
    "    # set the axis labels\n",
    "    plt.xlabel('x-values'),\n",
    "    plt.ylabel('y-values'),\n",
    "    \n",
    "    # set the plot title\n",
    "    plt.title('Simple plot function based on sin(x)'),\n",
    "\n",
    "    # define the plot\n",
    "    plt.plot(x, y)\n",
    "\n",
    "\n",
    "# Create an interactive widget for the plot using interact\n",
    "#\n",
    "interact = widgets.interact(\n",
    "    myplot,\n",
    "    xv = widgets.FloatSlider(\n",
    "        value=pi,\n",
    "        min=(pi),\n",
    "        max=(4*pi),\n",
    "        step=0.01,\n",
    "        description='Value (x):',\n",
    "        layout=Layout(width='99%')\n",
    "    )\n",
    ")\n",
    "\n",
    "# the semicolon ';' suppress the output\n",
    "# of the code execution\n",
    "#\n",
    "interact;"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Select box"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "4c5d6ce972e845f6a226b8e15a659886",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "interactive(children=(Dropdown(description='name', options=('Jim', 'Emma', 'Bond'), value='Jim'), Output()), _…"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "def say_my_name(name):\n",
    "    \"\"\"\n",
    "    Print the current widget value in short sentence\n",
    "    \"\"\"\n",
    "    print(f'My name is {name}')\n",
    "\n",
    "\n",
    "widgets.interact(\n",
    "    say_my_name,\n",
    "    name=[\"Jim\", \"Emma\", \"Bond\"]\n",
    ");"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Combined widgets"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "f60f273b2d654b83a4233a6c1ced4bda",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "interactive(children=(Dropdown(description='x', options=(0, 1, 2, 3), value=0), Output()), _dom_classes=('widg…"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "a721bdf7f9874a9b89f024894baeede8",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "interactive(children=(IntSlider(value=5, description='x', max=10), Output()), _dom_classes=('widget-interact',…"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "cf1fa3684e5e4b879168910041c0c750",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "interactive(children=(FloatSlider(value=5.0, description='x', max=10.0, step=0.5), Output()), _dom_classes=('w…"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "91b7e346be3f4ac3baf878bb585b65f4",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "interactive(children=(Checkbox(value=True, description='x'), Output()), _dom_classes=('widget-interact',))"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "def widget_says(x):\n",
    "    \"\"\"\n",
    "    Print the current widget value in short sentence\n",
    "    \"\"\"\n",
    "    print(f'Widget says: {x}')\n",
    "\n",
    "\n",
    "widgets.interact(widget_says, x=[0, 1, 2, 3])\n",
    "widgets.interact(widget_says, x=(0, 10, 1))\n",
    "widgets.interact(widget_says, x=(0, 10, .5))\n",
    "\n",
    "# the variable underscore ('_')) returns the output\n",
    "# of the latest code execution\n",
    "#\n",
    "_ = widgets.interact(widget_says, x=True)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Complex widget configs"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "3015a3f9d9c6473893d4ea7d1a35bab6",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "VBox(children=(IntSlider(value=5, description='Slider', layout=Layout(width='99%'), max=10), IntRangeSlider(va…"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "int_slider = widgets.IntSlider(\n",
    "    value=5, \n",
    "    min=0, max=10, step=1, \n",
    "    description='Slider',\n",
    "    layout=Layout(width='99%')\n",
    ")\n",
    "\n",
    "int_range_slider = widgets.IntRangeSlider(\n",
    "    value=(20, 40), \n",
    "    min=0,\n",
    "    max=100,\n",
    "    step=2, \n",
    "    description='Range Slider',\n",
    "    layout=Layout(width='99%')\n",
    ")\n",
    "\n",
    "dropdown = widgets.Dropdown(\n",
    "    value='Feb', \n",
    "    options=['Jan', 'Feb', 'Mar', 'Apr'], \n",
    "    description='Dropdown'\n",
    ")\n",
    "\n",
    "radiobuttons = widgets.RadioButtons(\n",
    "    value='Feb', \n",
    "    options=['Jan', 'Feb', 'Mar', 'Apr'], \n",
    "    description='Radio Buttons'\n",
    ")\n",
    "\n",
    "combobox = widgets.Combobox(\n",
    "    placeholder='start typing... (e.g. L or o)',\n",
    "    options=['Amsterdam', 'Athens', 'Lisbon', 'London', 'Ljubljana'], \n",
    "    description='Combo Box'\n",
    ")\n",
    "\n",
    "checkbox = widgets.Checkbox(\n",
    "    description='Checkbox',\n",
    "    value=True\n",
    ")\n",
    " \n",
    " \n",
    "# VBox container to pack all widgets vertically\n",
    "#\n",
    "widgets.VBox([\n",
    "    int_slider, \n",
    "    int_range_slider, \n",
    "    dropdown, \n",
    "    radiobuttons,\n",
    "    checkbox,\n",
    "    combobox,\n",
    "])"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Connected sliders"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 7,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "60de43ae44ba49bc93e188eb9f668ca7",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "VBox(children=(IntSlider(value=5, description='Slider 1', layout=Layout(width='99%'), max=10), IntSlider(value…"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "sl1 = widgets.IntSlider(\n",
    "    description='Slider 1',\n",
    "    min=0,\n",
    "    max=10,\n",
    "    layout=Layout(width='99%')\n",
    ")\n",
    "sl2 = widgets.IntSlider(\n",
    "    description='Slider 2',\n",
    "    min=0,\n",
    "    max=10,\n",
    "    layout=Layout(width='99%')\n",
    ")\n",
    "link = widgets.link(\n",
    "    (sl1, 'value'), \n",
    "    (sl2, 'min')\n",
    ")\n",
    "\n",
    "sl1.value = 5\n",
    "widgets.VBox([\n",
    "    sl1, sl2\n",
    "])"
   ]
  }
 ],
 "metadata": {
  "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.7.9"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}