{
 "metadata": {
  "name": "",
  "signature": "sha256:923af621b92260755e0e1e12ce83752d47592bbaea3474fa430d21df1305fa4a"
 },
 "nbformat": 3,
 "nbformat_minor": 0,
 "worksheets": [
  {
   "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",
     "collapsed": false,
     "input": [
      "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"
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "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",
     "collapsed": false,
     "input": [
      "dir = 'data/synth'"
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "# This is the list of notes.\n",
      "notes = 'C,C#,D,D#,E,F,F#,G,G#,A,A#,B,C'.split(',')"
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "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))"
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "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",
     "collapsed": false,
     "input": [
      "piano = widgets.ContainerWidget()"
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "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",
     "collapsed": false,
     "input": [
      "octave_slider = widgets.IntSliderWidget()\n",
      "octave_slider.max = 1\n",
      "octave_slider"
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "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",
     "collapsed": false,
     "input": [
      "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)"
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "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",
     "collapsed": false,
     "input": [
      "piano.children = buttons"
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "container = widgets.ContainerWidget()\n",
      "container.children = [octave_slider,\n",
      "                      piano]"
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "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",
     "collapsed": false,
     "input": [
      "display(container)\n",
      "piano.remove_class('vbox')\n",
      "piano.add_class('hbox')"
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "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": {}
  }
 ]
}