01 - Multimedia.ipynb

{
 "metadata": {
  "kernelspec": {
   "display_name": "Python 2",
   "language": "python",
   "name": "python2"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 2
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython2",
   "version": "2.7.6"
  },
  "name": "",
  "signature": "sha256:70659823243c97adbc18d6bbbd18a8d49a3fddf589f87f0021452b07530fd01d"
 },
 "nbformat": 3,
 "nbformat_minor": 0,
 "worksheets": [
  {
   "cells": [
    {
     "cell_type": "heading",
     "level": 1,
     "metadata": {},
     "source": [
      "Rich Output"
     ]
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "In Python, objects can declare their textual representation using the `__repr__` method.  IPython expands on this idea and allows objects to declare other, rich representations including:\n",
      "\n",
      "* HTML\n",
      "* JSON\n",
      "* PNG\n",
      "* JPEG\n",
      "* SVG\n",
      "* LaTeX\n",
      "\n",
      "A single object can declare some or all of these representations; all are handled by IPython's **display system**. This Notebook shows how you can use this display system to incorporate a broad range of content into your Notebooks."
     ]
    },
    {
     "cell_type": "heading",
     "level": 2,
     "metadata": {},
     "source": [
      "Basic display imports"
     ]
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "The `display` function is a general purpose tool for displaying different representations of objects. Think of it as `print` for these rich representations."
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "from IPython.display import display"
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "A few points:\n",
      "\n",
      "* Calling `display` on an object will send **all** possible representations to the Notebook.\n",
      "* These representations are stored in the Notebook document.\n",
      "* In general the Notebook will use the richest available representation.\n",
      "\n",
      "If you want to display a particular representation, there are specific functions for that:"
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "from IPython.display import (\n",
      "    display_pretty, display_html, display_jpeg,\n",
      "    display_png, display_json, display_latex, display_svg\n",
      ")"
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "heading",
     "level": 2,
     "metadata": {},
     "source": [
      "Images"
     ]
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "To work with images (JPEG, PNG) use the `Image` class."
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "from IPython.display import Image"
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "i = Image(filename='./ipython_logo.png')"
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "Returning an `Image` object from an expression will automatically display it:"
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "i"
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "Or you can pass an object with a rich representation to `display`:"
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "display(i)"
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "An image can also be displayed from raw data or a URL."
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "Image(url='http://python.org/images/python-logo.gif')"
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "heading",
     "level": 2,
     "metadata": {},
     "source": [
      "HTML"
     ]
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "Python objects can declare HTML representations that will be displayed in the Notebook. If you have some HTML you want to display, simply use the `HTML` class."
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "from IPython.display import HTML"
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "s = \"\"\"<table>\n",
      "<tr>\n",
      "<th>Header 1</th>\n",
      "<th>Header 2</th>\n",
      "</tr>\n",
      "<tr>\n",
      "<td>row 1, cell 1</td>\n",
      "<td>row 1, cell 2</td>\n",
      "</tr>\n",
      "<tr>\n",
      "<td>row 2, cell 1</td>\n",
      "<td>row 2, cell 2</td>\n",
      "</tr>\n",
      "</table>\"\"\""
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "h = HTML(s)"
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "display(h)"
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "You can also use the `%%html` cell magic to accomplish the same thing."
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "%%html\n",
      "<table>\n",
      "<tr>\n",
      "<th>Header 1</th>\n",
      "<th>Header 2</th>\n",
      "</tr>\n",
      "<tr>\n",
      "<td>row 1, cell 1</td>\n",
      "<td>row 1, cell 2</td>\n",
      "</tr>\n",
      "<tr>\n",
      "<td>row 2, cell 1</td>\n",
      "<td>row 2, cell 2</td>\n",
      "</tr>\n",
      "</table>"
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "heading",
     "level": 2,
     "metadata": {},
     "source": [
      "JavaScript"
     ]
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "The Notebook also enables objects to declare a JavaScript representation. At first, this may seem odd as  output is inherently visual and JavaScript is a programming language. However, this opens the door for rich output that leverages the full power of JavaScript and associated libraries such as [d3.js](http://d3js.org) for output."
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "from IPython.display import Javascript"
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "Pass a string of JavaScript source code to the `JavaScript` object and then display it."
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "js = Javascript('alert(\"hi\")');"
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "display(js)"
     ],
     "language": "python",
     "metadata": {
      "scrolled": true
     },
     "outputs": []
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "The same thing can be accomplished using the `%%javascript` cell magic:"
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "%%javascript\n",
      "\n",
      "alert(\"hi\");"
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "heading",
     "level": 2,
     "metadata": {},
     "source": [
      "LaTeX"
     ]
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "The IPython display system also has builtin support for the display of mathematical expressions typeset in LaTeX, which is rendered in the browser using [MathJax](http://mathjax.org)."
     ]
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "You can pass raw LaTeX test as a string to the `Math` object:"
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "from IPython.display import Math\n",
      "Math(r'F(k) = \\int_{-\\infty}^{\\infty} f(x) e^{2\\pi i k} dx')"
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "With the `Latex` class, you have to include the delimiters yourself.  This allows you to use other LaTeX modes such as `eqnarray`:"
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "from IPython.display import Latex\n",
      "Latex(r\"\"\"\\begin{eqnarray}\n",
      "\\nabla \\times \\vec{\\mathbf{B}} -\\, \\frac1c\\, \\frac{\\partial\\vec{\\mathbf{E}}}{\\partial t} & = \\frac{4\\pi}{c}\\vec{\\mathbf{j}} \\\\\n",
      "\\nabla \\cdot \\vec{\\mathbf{E}} & = 4 \\pi \\rho \\\\\n",
      "\\nabla \\times \\vec{\\mathbf{E}}\\, +\\, \\frac1c\\, \\frac{\\partial\\vec{\\mathbf{B}}}{\\partial t} & = \\vec{\\mathbf{0}} \\\\\n",
      "\\nabla \\cdot \\vec{\\mathbf{B}} & = 0 \n",
      "\\end{eqnarray}\"\"\")"
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "Or you can enter LaTeX directly with the `%%latex` cell magic:"
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "%%latex\n",
      "\\begin{align}\n",
      "\\nabla \\times \\vec{\\mathbf{B}} -\\, \\frac1c\\, \\frac{\\partial\\vec{\\mathbf{E}}}{\\partial t} & = \\frac{4\\pi}{c}\\vec{\\mathbf{j}} \\\\\n",
      "\\nabla \\cdot \\vec{\\mathbf{E}} & = 4 \\pi \\rho \\\\\n",
      "\\nabla \\times \\vec{\\mathbf{E}}\\, +\\, \\frac1c\\, \\frac{\\partial\\vec{\\mathbf{B}}}{\\partial t} & = \\vec{\\mathbf{0}} \\\\\n",
      "\\nabla \\cdot \\vec{\\mathbf{B}} & = 0\n",
      "\\end{align}"
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "heading",
     "level": 2,
     "metadata": {},
     "source": [
      "Audio"
     ]
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "IPython makes it easy to work with sounds interactively. The `Audio` display class allows you to create an audio control that is embedded in the Notebook. The interface is analogous to the interface of the `Image` display class. All audio formats supported by the browser can be used. Note that no single format is presently supported in all browsers."
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "from IPython.display import Audio\n",
      "Audio(url=\"http://www.nch.com.au/acm/8k16bitpcm.wav\")"
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "A NumPy array can be auralized automatically. The `Audio` class normalizes and encodes the data and embeds the resulting audio in the Notebook.\n",
      "\n",
      "For instance, when two sine waves with almost the same frequency are superimposed a phenomena known as [beats](https://en.wikipedia.org/wiki/Beat_%28acoustics%29) occur. This can be auralised as follows:"
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "import numpy as np\n",
      "max_time = 3\n",
      "f1 = 220.0\n",
      "f2 = 224.0\n",
      "rate = 8000.0\n",
      "L = 3\n",
      "times = np.linspace(0,L,rate*L)\n",
      "signal = np.sin(2*np.pi*f1*times) + np.sin(2*np.pi*f2*times)\n",
      "\n",
      "Audio(data=signal, rate=rate)"
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "heading",
     "level": 2,
     "metadata": {},
     "source": [
      "Video"
     ]
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "More exotic objects can also be displayed, as long as their representation supports the IPython display protocol.  For example, videos hosted externally on YouTube are easy to load:"
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "from IPython.display import YouTubeVideo\n",
      "YouTubeVideo('sjfsUzECqK0')"
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "Using the nascent video capabilities of modern browsers, you may also be able to display local\n",
      "videos.  At the moment this doesn't work very well in all browsers, so it may or may not work for you;\n",
      "we will continue testing this and looking for ways to make it more robust.  \n",
      "\n",
      "The following cell loads a local file called  `animation.m4v`, encodes the raw video as base64 for http\n",
      "transport, and uses the HTML5 video tag to load it. On Chrome 15 it works correctly, displaying a control bar at the bottom with a play/pause button and a location slider."
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "from IPython.display import HTML\n",
      "from base64 import b64encode\n",
      "video = open(\"./animation.m4v\", \"rb\").read()\n",
      "video_encoded = b64encode(video).decode('ascii')\n",
      "video_tag = '<video controls alt=\"test\" src=\"data:video/x-m4v;base64,{0}\">'.format(video_encoded)\n",
      "HTML(data=video_tag)"
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "heading",
     "level": 2,
     "metadata": {},
     "source": [
      "External sites"
     ]
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "You can even embed an entire page from another site in an iframe; for example this is today's Wikipedia\n",
      "page for mobile users:"
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "from IPython.display import IFrame\n",
      "IFrame('http://ipython.org', width='100%', height=350)"
     ],
     "language": "python",
     "metadata": {
      "scrolled": true
     },
     "outputs": []
    },
    {
     "cell_type": "heading",
     "level": 1,
     "metadata": {},
     "source": [
      "Exercises"
     ]
    },
    {
     "cell_type": "heading",
     "level": 2,
     "metadata": {},
     "source": [
      "Basic display classes"
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "from IPython.display import display, Image, HTML, Javascript"
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "Try using the basic display classes in a notebook.\n",
      "- Find an image on the internet and display it in a notebook using the Image class. You can either save the image in the notebook's directory or load it by its URL."
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "- Use the HTML class and the %%html cell magic to display a snippet of HTML."
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "- Use the JavaScript class and the %%javascript cell magic to run a snippet of JavaScript."
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [],
     "language": "python",
     "metadata": {},
     "outputs": []
    }
   ],
   "metadata": {}
  }
 ]
}