{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Embed external resources in your notebook\n",
    "\n",
    "**What are external resources?**\n",
    "\n",
    "External resources are content/resources (videos, images, etc.) that are hosted on services other than Noto.\n",
    "\n",
    "**What is embeding?**\n",
    "\n",
    "Embeding is making this external content available from your notebooks, only by providing a reference (a URL, a Youtube video id, data). The external content does not need to be copied into the notebook or your repository.\n",
    "\n",
    "Note that, **in some cases**, the external content will be stored in the output cell of your notebook."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Introduction\n",
    "\n",
    "In this section, we will demonstrate how to embed most commom contents in your notebooks ; most of these examples come from [this](http://louistiao.me/posts/demos/ipython-notebook-demo/) page.\n",
    "\n",
    "## IPython's Rich Display System\n",
    "\n",
    "To render external content, we will use IPython (the library at the base of Jupyter kernels). In Python, objects can declare their textual representation using the `__repr__` method. IPython expands on this idea and allows objects to declare other, richer 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.\n",
    "\n",
    "# About the `display()` function\n",
    "The `display()` function is a general purpose tool for displaying different representations of objects. Think of it as a `print()` fonction for these rich representations."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "from IPython.display import display"
   ]
  },
  {
   "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 (as part of the output cells).\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",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "from IPython.display import display_pretty, display_html, display_jpeg, display_png, display_json, display_latex, display_svg, display_pdf"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Examples\n",
    "\n",
    "Each example is self sufficient; you can just copy and reuse the content of each cell.\n",
    "\n",
    "## Videos\n",
    "\n",
    "Embedding a remote video looks like that:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "from IPython.display import Video\n",
    "Video('http://www.html5videoplayer.net/videos/toystory.mp4')"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "And this is a YouTube video, embedded via its video ID (`'IPrU6VsLl8c'`)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "from IPython.display import YouTubeVideo\n",
    "YouTubeVideo('IPrU6VsLl8c', 600, 337)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Images\n",
    "\n",
    "JPEG and PNG images are supported."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "from IPython.display import Image\n",
    "Image('https://upload.wikimedia.org/wikipedia/commons/c/c4/PM5544_with_non-PAL_signals.png', width=256, height=192)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "You can also use SVG images - being vector graphics, your browser will extend the image as far as possible."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "from IPython.display import SVG\n",
    "SVG('https://upload.wikimedia.org/wikipedia/commons/f/fd/Ghostscript_Tiger.svg')"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "You can also set create an IFRAME (with a well define size) and let your browser render the SVG file :"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "from IPython.display import IFrame\n",
    "IFrame('https://upload.wikimedia.org/wikipedia/commons/f/fd/Ghostscript_Tiger.svg', 200, 200)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Audio files and sound\n",
    "\n",
    "### Creating sound files"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "from IPython.display import Audio\n",
    "import numpy as np\n",
    "\n",
    "# Mix two pure sines, 200 Hz and 202 Hz\n",
    "framerate = 44100\n",
    "t = np.linspace(0,5,framerate*5)\n",
    "data = np.sin(2*np.pi*200*t) + np.sin(2*np.pi*202*t)\n",
    "\n",
    "# Show player - Check the resulting beat\n",
    "Audio(data,rate=framerate)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Playing remote Audio files"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "from IPython.display import Audio\n",
    "Audio('https://upload.wikimedia.org/wikipedia/commons/b/bb/Test_ogg_mp3_48kbps.wav')"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Code"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "from IPython.display import Code\n",
    "Code('https://raw.githubusercontent.com/jupyterlab/jupyterlab-git/master/jupyterlab_git/__init__.py', language='python')"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "from IPython.display import Code\n",
    "Code('print(\"hello\")', language='python')"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Markdown, Maths and $\\LaTeX$\n",
    "\n",
    "### Simple Math text (rendered with MathJax)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "from IPython.display import Math\n",
    "Math(r'F(k) = \\int_{-\\infty}^{\\infty} f(x) e^{2\\pi i k} dx')"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### $\\LaTeX$ (equations and more)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "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}\"\"\")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "from IPython.display import Latex\n",
    "Latex(r'To $\\infty$ and beyond!')"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Markdown"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "from IPython.display import Markdown\n",
    "Markdown('This is markdown text.\\n\\n* Some **more** markdown...\\n* This is a [greek](https://en.wikipedia.org/wiki/Greek) letter: $\\phi$')"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## External HTML page (in an IFRAME)\n",
    "\n",
    "In the next example, an **IFRAME** is created in the output cell, showing you the complete documentation of the **IPython Display** module."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "from IPython.display import IFrame\n",
    "IFrame('https://ipython.readthedocs.io/en/stable/api/generated/IPython.display.html', 1024, 400)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## External PDF file (in an IFRAME)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "from IPython.display import IFrame\n",
    "IFrame('https://rogerdudler.github.io/git-guide/files/git_cheat_sheet.pdf', 1024, 800)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### End of notebook"
   ]
  }
 ],
 "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.6.8"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}