notebooks/02.Widget_overview/03.WidgetList/03.00-widget-list.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Widgets in the core ipywidgets package"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "The package `ipywidgets` provides two things:\n",
    "\n",
    "+ A communication framework between the front end (your browser) and back end (python or other kernel).\n",
    "+ A set of fundamental user interface elements like buttons and checkboxes.\n",
    "\n",
    "The next couple of cells create a browser of the available elements. To see more detail about any of the elements click on its title. It will be easier to view both the overview and the detail if you have them open in separate tabs."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import ipywidgets as widgets\n",
    "from widget_org import organized_widgets, list_overview_widget"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Instructions\n",
    "\n",
    "Run the cell below. Click on the name of any widget to see a more detailed example of using the widget."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "groups = organized_widgets(organize_by='ui')\n",
    "help_url_base='../../reference_guides/complete-ipywidgets-widget-list.ipynb'\n",
    "list_overview_widget(groups, columns=2, min_width_single_widget=200, help_url_base=help_url_base)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Exercises\n",
    "\n",
    "You may not have time to finish all of these exercises."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### 1. Fix the example from the previous notebook\n",
    "\n",
    "The code below is taken from the previous notebook of this tutorial. \n",
    "\n",
    "Run the code below then try typing a number larger than 10 or smaller than 5 into the text box."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "slider = widgets.FloatSlider(\n",
    "    value=7.5,\n",
    "    min=5.0,\n",
    "    max=10.0,\n",
    "    step=0.1,\n",
    "    description='Input:',\n",
    ")\n",
    "\n",
    "# Create text box to hold slider value\n",
    "text = widgets.FloatText(description='Value')\n",
    "\n",
    "# Link slider value and text box value\n",
    "widgets.link((slider, 'value'), (text, 'value'))\n",
    "\n",
    "# Put them in a vertical box\n",
    "widgets.VBox([slider, text])"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Note the slider has the wrong value! The slider has a minimum and maximum value but the text box doesn't.\n",
    "\n",
    "Replace the `FloatText` in the code above with a text widget that has a minimum and maximum that matches the slider."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "# %load solutions/bounded-float-text.py"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## 2. Two widgets in a box and link them\n",
    "\n",
    "Put two widgets, the `Play` widget and a widget of your choice that can hold an integer, in a horizontal box."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "# %load solutions/widgets-in-a-box.py"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Link the values of the two widgets above so that changing the value of one affects the value of the other."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## 3. Try tabs or accordions\n",
    "\n",
    "Choose two or more widgets and place them in either different tabs or accordions. Set the name of each tab or accordion to something more meaningful than the default names."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Set which tab or accordion is selected by typing the right code in the cell below (hint, look at the `selected_index` attribute)."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "widgets-tutorial",
   "language": "python",
   "name": "widgets-tutorial"
  },
  "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
}