notebooks/chapter03_notebook/05_basic_widgets.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "> This is one of the 100 recipes of the [IPython Cookbook](http://ipython-books.github.io/), the definitive guide to high-performance scientific computing and data science in Python.\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# 3.5. Using interactive widgets: a piano in the notebook"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "You need to download the *Piano* dataset on the book's website. (http://ipython-books.github.io)\n",
    "\n",
    "This dataset contains synthetized piano notes obtained on `archive.org` (CC0 1.0 Universal licence). (https://archive.org/details/SynthesizedPianoNotes)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "1. Let's import a few modules."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "import numpy as np\n",
    "import os\n",
    "from IPython.display import Audio, display, clear_output\n",
    "from IPython.html import widgets\n",
    "from functools import partial"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "2. To create a piano, we will draw one button per note. The corresponding note plays when the user clicks on the button. This is implemented by displaying an `<audio>` element."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "dir = 'data/synth'"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "# This is the list of notes.\n",
    "notes = 'C,C#,D,D#,E,F,F#,G,G#,A,A#,B,C'.split(',')"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "def play(note, octave=0):\n",
    "    \"\"\"This function displays an HTML Audio element\n",
    "    that plays automatically when it appears.\"\"\"\n",
    "    f = os.path.join(dir, \n",
    "         \"piano_{i}.mp3\".format(i=note+12*octave))\n",
    "    clear_output()\n",
    "    display(Audio(filename=f, autoplay=True))"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "3. We are going to place all buttons within a **container widget**. In IPython 2.0+, widgets can be organized hierarchically. One common use case is to organize several widgets in a given layout. Here, `piano` will contain 12 buttons for the 12 notes."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "piano = widgets.ContainerWidget()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "4. We create our first widget: a slider control that specifies the octave (0 or 1 here)."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "octave_slider = widgets.IntSliderWidget()\n",
    "octave_slider.max = 1\n",
    "octave_slider"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "5. Now, we create the buttons. There are several steps. First, we instantiate a `ButtonWidget` object. Then, we specify a callback function that plays the corresponding note (given by an index) at a given octave (given by the current value of the octave slider). Finally, we set the CSS of each button, notably the white or black color."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "buttons = []\n",
    "for i, note in enumerate(notes):\n",
    "    button = widgets.ButtonWidget(description=note)\n",
    "    \n",
    "    def on_button_clicked(i, _):\n",
    "        play(i+1, octave_slider.value)\n",
    "        \n",
    "    button.on_click(partial(on_button_clicked, i))\n",
    "    \n",
    "    button.set_css({'width': '30px', \n",
    "                    'height': '60px',\n",
    "                    'padding': '0',\n",
    "                    'color': ('black', \n",
    "                              'white')['#' in note],\n",
    "                    'background': ('white', 'black')['#' in note],\n",
    "                    'border': '1px solid black',\n",
    "                    'float': 'left'})\n",
    "    \n",
    "    buttons.append(button)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "6. Finally, we arrange all widgets with the containers. The `piano` container contains the buttons, and the main container (`container`) contains the slider and the piano."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "piano.children = buttons"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "container = widgets.ContainerWidget()\n",
    "container.children = [octave_slider,\n",
    "                      piano]"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "By default, widgets are organized vertically within a container. Here, the octave slider will be above the piano."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "display(container)\n",
    "piano.remove_class('vbox')\n",
    "piano.add_class('hbox')"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Within the piano, we want all notes to be arranged horizontally. We do this by replacing the default `vbox` CSS class by the `hbox` class."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "> You'll find all the explanations, figures, references, and much more in the book (to be released later this summer).\n",
    "\n",
    "> [IPython Cookbook](http://ipython-books.github.io/), by [Cyrille Rossant](http://cyrille.rossant.net), Packt Publishing, 2014 (500 pages)."
   ]
  }
 ],
 "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.4.2"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 0
}