Last active
December 20, 2015 12:29
-
-
Save rdhyee/6131622 to your computer and use it in GitHub Desktop.
some primitive examples of integrating JavaScript into IPython notebook (including vexflow)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "metadata": { | |
| "name": "notebook_javascript_examples" | |
| }, | |
| "nbformat": 3, | |
| "nbformat_minor": 0, | |
| "worksheets": [ | |
| { | |
| "cells": [ | |
| { | |
| "cell_type": "markdown", | |
| "metadata": {}, | |
| "source": [ | |
| "<style>\n", | |
| " .coin {width: 55px;}\n", | |
| "</style>" | |
| ] | |
| }, | |
| { | |
| "cell_type": "markdown", | |
| "metadata": {}, | |
| "source": [ | |
| "## show as coin flips?\n" | |
| ] | |
| }, | |
| { | |
| "cell_type": "code", | |
| "collapsed": false, | |
| "input": [ | |
| "from IPython.display import HTML\n", | |
| "\n", | |
| "# http://en.wikipedia.org/wiki/File:2006_Quarter_Proof.png\n", | |
| "head = \"http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/2006_Quarter_Proof.png/244px-2006_Quarter_Proof.png\"\n", | |
| "# http://en.wikipedia.org/wiki/File:2012-ATB-Quarters-Unc-Hawaii.jpg\n", | |
| "tail = \"http://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/2012-ATB-Quarters-Unc-Hawaii.jpg/238px-2012-ATB-Quarters-Unc-Hawaii.jpg\"\n", | |
| "\n", | |
| "head_img = \"<img class='coin' src='{0}'/>\".format(head)\n", | |
| "tail_img = \"<img class='coin' src='{0}'/>\".format(tail)\n", | |
| "\n", | |
| "\n", | |
| "HTML(head_img + tail_img)" | |
| ], | |
| "language": "python", | |
| "metadata": {}, | |
| "outputs": [ | |
| { | |
| "html": [ | |
| "<img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/2006_Quarter_Proof.png/244px-2006_Quarter_Proof.png'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/2012-ATB-Quarters-Unc-Hawaii.jpg/238px-2012-ATB-Quarters-Unc-Hawaii.jpg'/>" | |
| ], | |
| "output_type": "pyout", | |
| "prompt_number": 10, | |
| "text": [ | |
| "<IPython.core.display.HTML at 0x47bf4b0>" | |
| ] | |
| } | |
| ], | |
| "prompt_number": 10 | |
| }, | |
| { | |
| "cell_type": "markdown", | |
| "metadata": {}, | |
| "source": [ | |
| "**How to resize images?**\n", | |
| "\n", | |
| "Two ways I want to use here:\n", | |
| "\n", | |
| "* jQuery css\n", | |
| "* jQuery to attach a `style` element\n" | |
| ] | |
| }, | |
| { | |
| "cell_type": "code", | |
| "collapsed": false, | |
| "input": [ | |
| "from IPython.core.display import Javascript\n", | |
| "from jinja2 import Template\n", | |
| "\n", | |
| "# http://en.wikipedia.org/wiki/File:2006_Quarter_Proof.png\n", | |
| "head = \"http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/2006_Quarter_Proof.png/244px-2006_Quarter_Proof.png\"\n", | |
| "# http://en.wikipedia.org/wiki/File:2012-ATB-Quarters-Unc-Hawaii.jpg\n", | |
| "tail = \"http://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/2012-ATB-Quarters-Unc-Hawaii.jpg/238px-2012-ATB-Quarters-Unc-Hawaii.jpg\"\n", | |
| "\n", | |
| "head_img = \"<img class='coin' src='{0}'/>\".format(head)\n", | |
| "tail_img = \"<img class='coin' src='{0}'/>\".format(tail)\n", | |
| "\n", | |
| "coins_html = head_img + tail_img\n", | |
| "\n", | |
| "js_template = \"\"\"\n", | |
| "element.html(\"{{coins_html}}\");\n", | |
| "container.show();\n", | |
| "\n", | |
| "\n", | |
| "setTimeout(function(){\n", | |
| "\n", | |
| " $('.coin').css('width', '50px');\n", | |
| "\n", | |
| "},0);\n", | |
| "\"\"\"\n", | |
| "\n", | |
| "js = Template(js_template).render(coins_html=coins_html)\n", | |
| "\n", | |
| "Javascript(data=js, lib=None, css=None)" | |
| ], | |
| "language": "python", | |
| "metadata": {}, | |
| "outputs": [ | |
| { | |
| "javascript": [ | |
| "\n", | |
| "element.html(\"<img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/2006_Quarter_Proof.png/244px-2006_Quarter_Proof.png'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/2012-ATB-Quarters-Unc-Hawaii.jpg/238px-2012-ATB-Quarters-Unc-Hawaii.jpg'/>\");\n", | |
| "container.show();\n", | |
| "\n", | |
| "\n", | |
| "setTimeout(function(){\n", | |
| "\n", | |
| " $('.coin').css('width', '50px');\n", | |
| "\n", | |
| "},0);" | |
| ], | |
| "output_type": "pyout", | |
| "prompt_number": 11, | |
| "text": [ | |
| "<IPython.core.display.Javascript at 0x47bf870>" | |
| ] | |
| } | |
| ], | |
| "prompt_number": 11 | |
| }, | |
| { | |
| "cell_type": "code", | |
| "collapsed": false, | |
| "input": [ | |
| "from IPython.core.display import Javascript\n", | |
| "\n", | |
| "js = \"\"\"$('<style/>').html(\".coin {width: 55px;}\").appendTo('head')\"\"\"\n", | |
| "Javascript(data=js, lib=None, css=None)\n" | |
| ], | |
| "language": "python", | |
| "metadata": {}, | |
| "outputs": [ | |
| { | |
| "javascript": [ | |
| "$('<style/>').html(\".coin {width: 55px;}\").appendTo('head')" | |
| ], | |
| "output_type": "pyout", | |
| "prompt_number": 12, | |
| "text": [ | |
| "<IPython.core.display.Javascript at 0x47bf250>" | |
| ] | |
| } | |
| ], | |
| "prompt_number": 12 | |
| }, | |
| { | |
| "cell_type": "markdown", | |
| "metadata": {}, | |
| "source": [ | |
| "It'd be fun to turn this sequence into morse code, for example. What are my options in Python? in the browser? I don't think \n", | |
| "there is any standard Python library for making sounds.\n", | |
| "\n", | |
| "The video http://www.youtube.com/watch?v=JhAF6puNTxI might help -- mentions wave library... http://docs.python.org/2/library/wave.html\n", | |
| "\n", | |
| "http://codingmess.blogspot.com/2010/02/how-to-make-wav-file-with-python.html -> to create a wav file \"by hand\"\n", | |
| "\n", | |
| "investigate `audiolab`: http://pypi.python.org/pypi/scikits.audiolab/" | |
| ] | |
| }, | |
| { | |
| "cell_type": "code", | |
| "collapsed": false, | |
| "input": [ | |
| "# http://my.safaribooksonline.com/book/-/9781449361600/4dot-scikit-taking-scipy-one-step-further/fourdot1_scikit_image_html\n", | |
| "# check to see whether we have libraries available\n", | |
| "\n", | |
| "import numpy as np\n", | |
| "import matplotlib.pyplot as mpl\n", | |
| "import scipy.ndimage as ndimage\n", | |
| "import skimage.filter as skif" | |
| ], | |
| "language": "python", | |
| "metadata": {}, | |
| "outputs": [], | |
| "prompt_number": 13 | |
| }, | |
| { | |
| "cell_type": "code", | |
| "collapsed": true, | |
| "input": [ | |
| "from IPython.core.display import HTML\n", | |
| "import random\n", | |
| "\n", | |
| "# http://en.wikipedia.org/wiki/File:2006_Quarter_Proof.png\n", | |
| "head = \"http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/2006_Quarter_Proof.png/244px-2006_Quarter_Proof.png\"\n", | |
| "# http://en.wikipedia.org/wiki/File:2012-ATB-Quarters-Unc-Hawaii.jpg\n", | |
| "tail = \"http://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/2012-ATB-Quarters-Unc-Hawaii.jpg/238px-2012-ATB-Quarters-Unc-Hawaii.jpg\"\n", | |
| "\n", | |
| "head_img = \"<img class='coin' src='{0}'/>\".format(head)\n", | |
| "tail_img = \"<img class='coin' src='{0}'/>\".format(tail)\n", | |
| "\n", | |
| "coin_toss = \"\"\n", | |
| "size = 100\n", | |
| "\n", | |
| "random.seed()\n", | |
| "\n", | |
| "for i in xrange(size):\n", | |
| " toss = random.randint(0,1)\n", | |
| " coin_toss += head_img if toss else tail_img\n", | |
| "\n", | |
| "HTML(coin_toss)\n", | |
| "\n" | |
| ], | |
| "language": "python", | |
| "metadata": {}, | |
| "outputs": [ | |
| { | |
| "html": [ | |
| "<img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/2012-ATB-Quarters-Unc-Hawaii.jpg/238px-2012-ATB-Quarters-Unc-Hawaii.jpg'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/2006_Quarter_Proof.png/244px-2006_Quarter_Proof.png'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/2006_Quarter_Proof.png/244px-2006_Quarter_Proof.png'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/2006_Quarter_Proof.png/244px-2006_Quarter_Proof.png'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/2006_Quarter_Proof.png/244px-2006_Quarter_Proof.png'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/2006_Quarter_Proof.png/244px-2006_Quarter_Proof.png'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/2006_Quarter_Proof.png/244px-2006_Quarter_Proof.png'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/2012-ATB-Quarters-Unc-Hawaii.jpg/238px-2012-ATB-Quarters-Unc-Hawaii.jpg'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/2012-ATB-Quarters-Unc-Hawaii.jpg/238px-2012-ATB-Quarters-Unc-Hawaii.jpg'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/2006_Quarter_Proof.png/244px-2006_Quarter_Proof.png'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/2012-ATB-Quarters-Unc-Hawaii.jpg/238px-2012-ATB-Quarters-Unc-Hawaii.jpg'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/2012-ATB-Quarters-Unc-Hawaii.jpg/238px-2012-ATB-Quarters-Unc-Hawaii.jpg'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/2006_Quarter_Proof.png/244px-2006_Quarter_Proof.png'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/2012-ATB-Quarters-Unc-Hawaii.jpg/238px-2012-ATB-Quarters-Unc-Hawaii.jpg'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/2012-ATB-Quarters-Unc-Hawaii.jpg/238px-2012-ATB-Quarters-Unc-Hawaii.jpg'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/2012-ATB-Quarters-Unc-Hawaii.jpg/238px-2012-ATB-Quarters-Unc-Hawaii.jpg'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/2006_Quarter_Proof.png/244px-2006_Quarter_Proof.png'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/2006_Quarter_Proof.png/244px-2006_Quarter_Proof.png'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/2006_Quarter_Proof.png/244px-2006_Quarter_Proof.png'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/2012-ATB-Quarters-Unc-Hawaii.jpg/238px-2012-ATB-Quarters-Unc-Hawaii.jpg'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/2012-ATB-Quarters-Unc-Hawaii.jpg/238px-2012-ATB-Quarters-Unc-Hawaii.jpg'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/2012-ATB-Quarters-Unc-Hawaii.jpg/238px-2012-ATB-Quarters-Unc-Hawaii.jpg'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/2006_Quarter_Proof.png/244px-2006_Quarter_Proof.png'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/2012-ATB-Quarters-Unc-Hawaii.jpg/238px-2012-ATB-Quarters-Unc-Hawaii.jpg'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/2006_Quarter_Proof.png/244px-2006_Quarter_Proof.png'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/2006_Quarter_Proof.png/244px-2006_Quarter_Proof.png'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/2006_Quarter_Proof.png/244px-2006_Quarter_Proof.png'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/2006_Quarter_Proof.png/244px-2006_Quarter_Proof.png'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/2006_Quarter_Proof.png/244px-2006_Quarter_Proof.png'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/2006_Quarter_Proof.png/244px-2006_Quarter_Proof.png'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/2012-ATB-Quarters-Unc-Hawaii.jpg/238px-2012-ATB-Quarters-Unc-Hawaii.jpg'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/2012-ATB-Quarters-Unc-Hawaii.jpg/238px-2012-ATB-Quarters-Unc-Hawaii.jpg'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/2012-ATB-Quarters-Unc-Hawaii.jpg/238px-2012-ATB-Quarters-Unc-Hawaii.jpg'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/2006_Quarter_Proof.png/244px-2006_Quarter_Proof.png'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/2012-ATB-Quarters-Unc-Hawaii.jpg/238px-2012-ATB-Quarters-Unc-Hawaii.jpg'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/2012-ATB-Quarters-Unc-Hawaii.jpg/238px-2012-ATB-Quarters-Unc-Hawaii.jpg'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/2012-ATB-Quarters-Unc-Hawaii.jpg/238px-2012-ATB-Quarters-Unc-Hawaii.jpg'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/2012-ATB-Quarters-Unc-Hawaii.jpg/238px-2012-ATB-Quarters-Unc-Hawaii.jpg'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/2012-ATB-Quarters-Unc-Hawaii.jpg/238px-2012-ATB-Quarters-Unc-Hawaii.jpg'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/2006_Quarter_Proof.png/244px-2006_Quarter_Proof.png'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/2012-ATB-Quarters-Unc-Hawaii.jpg/238px-2012-ATB-Quarters-Unc-Hawaii.jpg'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/2012-ATB-Quarters-Unc-Hawaii.jpg/238px-2012-ATB-Quarters-Unc-Hawaii.jpg'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/2012-ATB-Quarters-Unc-Hawaii.jpg/238px-2012-ATB-Quarters-Unc-Hawaii.jpg'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/2006_Quarter_Proof.png/244px-2006_Quarter_Proof.png'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/2006_Quarter_Proof.png/244px-2006_Quarter_Proof.png'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/2006_Quarter_Proof.png/244px-2006_Quarter_Proof.png'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/2006_Quarter_Proof.png/244px-2006_Quarter_Proof.png'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/2006_Quarter_Proof.png/244px-2006_Quarter_Proof.png'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/2012-ATB-Quarters-Unc-Hawaii.jpg/238px-2012-ATB-Quarters-Unc-Hawaii.jpg'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/2006_Quarter_Proof.png/244px-2006_Quarter_Proof.png'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/2006_Quarter_Proof.png/244px-2006_Quarter_Proof.png'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/2006_Quarter_Proof.png/244px-2006_Quarter_Proof.png'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/2012-ATB-Quarters-Unc-Hawaii.jpg/238px-2012-ATB-Quarters-Unc-Hawaii.jpg'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/2006_Quarter_Proof.png/244px-2006_Quarter_Proof.png'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/2012-ATB-Quarters-Unc-Hawaii.jpg/238px-2012-ATB-Quarters-Unc-Hawaii.jpg'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/2012-ATB-Quarters-Unc-Hawaii.jpg/238px-2012-ATB-Quarters-Unc-Hawaii.jpg'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/2012-ATB-Quarters-Unc-Hawaii.jpg/238px-2012-ATB-Quarters-Unc-Hawaii.jpg'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/2006_Quarter_Proof.png/244px-2006_Quarter_Proof.png'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/2006_Quarter_Proof.png/244px-2006_Quarter_Proof.png'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/2006_Quarter_Proof.png/244px-2006_Quarter_Proof.png'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/2006_Quarter_Proof.png/244px-2006_Quarter_Proof.png'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/2012-ATB-Quarters-Unc-Hawaii.jpg/238px-2012-ATB-Quarters-Unc-Hawaii.jpg'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/2012-ATB-Quarters-Unc-Hawaii.jpg/238px-2012-ATB-Quarters-Unc-Hawaii.jpg'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/2012-ATB-Quarters-Unc-Hawaii.jpg/238px-2012-ATB-Quarters-Unc-Hawaii.jpg'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/2006_Quarter_Proof.png/244px-2006_Quarter_Proof.png'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/2006_Quarter_Proof.png/244px-2006_Quarter_Proof.png'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/2006_Quarter_Proof.png/244px-2006_Quarter_Proof.png'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/2012-ATB-Quarters-Unc-Hawaii.jpg/238px-2012-ATB-Quarters-Unc-Hawaii.jpg'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/2006_Quarter_Proof.png/244px-2006_Quarter_Proof.png'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/2012-ATB-Quarters-Unc-Hawaii.jpg/238px-2012-ATB-Quarters-Unc-Hawaii.jpg'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/2006_Quarter_Proof.png/244px-2006_Quarter_Proof.png'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/2012-ATB-Quarters-Unc-Hawaii.jpg/238px-2012-ATB-Quarters-Unc-Hawaii.jpg'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/2006_Quarter_Proof.png/244px-2006_Quarter_Proof.png'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/2006_Quarter_Proof.png/244px-2006_Quarter_Proof.png'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/2006_Quarter_Proof.png/244px-2006_Quarter_Proof.png'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/2012-ATB-Quarters-Unc-Hawaii.jpg/238px-2012-ATB-Quarters-Unc-Hawaii.jpg'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/2006_Quarter_Proof.png/244px-2006_Quarter_Proof.png'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/2012-ATB-Quarters-Unc-Hawaii.jpg/238px-2012-ATB-Quarters-Unc-Hawaii.jpg'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/2006_Quarter_Proof.png/244px-2006_Quarter_Proof.png'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/2012-ATB-Quarters-Unc-Hawaii.jpg/238px-2012-ATB-Quarters-Unc-Hawaii.jpg'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/2006_Quarter_Proof.png/244px-2006_Quarter_Proof.png'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/2012-ATB-Quarters-Unc-Hawaii.jpg/238px-2012-ATB-Quarters-Unc-Hawaii.jpg'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/2006_Quarter_Proof.png/244px-2006_Quarter_Proof.png'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/2012-ATB-Quarters-Unc-Hawaii.jpg/238px-2012-ATB-Quarters-Unc-Hawaii.jpg'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/2012-ATB-Quarters-Unc-Hawaii.jpg/238px-2012-ATB-Quarters-Unc-Hawaii.jpg'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/2006_Quarter_Proof.png/244px-2006_Quarter_Proof.png'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/2006_Quarter_Proof.png/244px-2006_Quarter_Proof.png'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/2006_Quarter_Proof.png/244px-2006_Quarter_Proof.png'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/2012-ATB-Quarters-Unc-Hawaii.jpg/238px-2012-ATB-Quarters-Unc-Hawaii.jpg'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/2006_Quarter_Proof.png/244px-2006_Quarter_Proof.png'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/2006_Quarter_Proof.png/244px-2006_Quarter_Proof.png'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/2006_Quarter_Proof.png/244px-2006_Quarter_Proof.png'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/2012-ATB-Quarters-Unc-Hawaii.jpg/238px-2012-ATB-Quarters-Unc-Hawaii.jpg'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/2012-ATB-Quarters-Unc-Hawaii.jpg/238px-2012-ATB-Quarters-Unc-Hawaii.jpg'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/2012-ATB-Quarters-Unc-Hawaii.jpg/238px-2012-ATB-Quarters-Unc-Hawaii.jpg'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/2012-ATB-Quarters-Unc-Hawaii.jpg/238px-2012-ATB-Quarters-Unc-Hawaii.jpg'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/2012-ATB-Quarters-Unc-Hawaii.jpg/238px-2012-ATB-Quarters-Unc-Hawaii.jpg'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/2006_Quarter_Proof.png/244px-2006_Quarter_Proof.png'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/2006_Quarter_Proof.png/244px-2006_Quarter_Proof.png'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/2006_Quarter_Proof.png/244px-2006_Quarter_Proof.png'/>" | |
| ], | |
| "output_type": "pyout", | |
| "prompt_number": 14, | |
| "text": [ | |
| "<IPython.core.display.HTML at 0x47bfc10>" | |
| ] | |
| } | |
| ], | |
| "prompt_number": 14 | |
| }, | |
| { | |
| "cell_type": "code", | |
| "collapsed": false, | |
| "input": [ | |
| "# based on http://pastebin.com/yPTvFPeP\n", | |
| "\n", | |
| "from IPython.core.display import Javascript\n", | |
| "\n", | |
| "js = \"\"\"\n", | |
| "element.html(\"<svg></svg>\");\n", | |
| "container.show();\n", | |
| "\n", | |
| "var width = $('svg').width();\n", | |
| "var height = $('svg').height();\n", | |
| "var svg = d3.select('svg');\n", | |
| "\n", | |
| "svg\n", | |
| " .attr('width', width)\n", | |
| " .attr('height', height);\n", | |
| "\n", | |
| "svg.selectAll('circle')\n", | |
| " .data([18, 57, 112, 323])\n", | |
| " .enter().append('circle')\n", | |
| " .attr('cy', 236)\n", | |
| " .attr('cx', String)\n", | |
| " .attr('r', Math.sqrt);\n", | |
| "\n", | |
| "\n", | |
| "\"\"\"\n", | |
| "\n", | |
| "d3_url = \"http://cdnjs.cloudflare.com/ajax/libs/d3/2.10.0/d3.v2.min.js\"\n", | |
| "\n", | |
| "Javascript(data=js, lib=d3_url)\n" | |
| ], | |
| "language": "python", | |
| "metadata": {}, | |
| "outputs": [ | |
| { | |
| "javascript": [ | |
| "$.getScript(\"http://cdnjs.cloudflare.com/ajax/libs/d3/2.10.0/d3.v2.min.js\", function () {\n", | |
| "\n", | |
| "element.html(\"<svg></svg>\");\n", | |
| "container.show();\n", | |
| "\n", | |
| "var width = $('svg').width();\n", | |
| "var height = $('svg').height();\n", | |
| "var svg = d3.select('svg');\n", | |
| "\n", | |
| "svg\n", | |
| " .attr('width', width)\n", | |
| " .attr('height', height);\n", | |
| "\n", | |
| "svg.selectAll('circle')\n", | |
| " .data([18, 57, 112, 323])\n", | |
| " .enter().append('circle')\n", | |
| " .attr('cy', 236)\n", | |
| " .attr('cx', String)\n", | |
| " .attr('r', Math.sqrt);\n", | |
| "\n", | |
| "\n", | |
| "});\n" | |
| ], | |
| "output_type": "pyout", | |
| "prompt_number": 15, | |
| "text": [ | |
| "<IPython.core.display.Javascript at 0x47bf410>" | |
| ] | |
| } | |
| ], | |
| "prompt_number": 15 | |
| }, | |
| { | |
| "cell_type": "code", | |
| "collapsed": false, | |
| "input": [ | |
| "# http://www.datatables.net/\n", | |
| "# http://www.datatables.net/examples/data_sources/js_array.html\n", | |
| "\n", | |
| "from IPython.core.display import Javascript\n", | |
| "\n", | |
| "js = \"\"\"\n", | |
| "element.html('<div id=\"demo\"/>');\n", | |
| "container.show();\n", | |
| "\n", | |
| "$('#demo').html( '<table cellpadding=\"0\" cellspacing=\"0\" border=\"0\" class=\"display\" id=\"example\"></table>' );\n", | |
| " $('#example').dataTable( {\n", | |
| " \"aaData\": [\n", | |
| " /* Reduced data set */\n", | |
| " [ \"Trident\", \"Internet Explorer 4.0\", \"Win 95+\", 4, \"X\" ],\n", | |
| " [ \"Trident\", \"Internet Explorer 5.0\", \"Win 95+\", 5, \"C\" ],\n", | |
| " [ \"Trident\", \"Internet Explorer 5.5\", \"Win 95+\", 5.5, \"A\" ],\n", | |
| " [ \"Trident\", \"Internet Explorer 6.0\", \"Win 98+\", 6, \"A\" ],\n", | |
| " [ \"Trident\", \"Internet Explorer 7.0\", \"Win XP SP2+\", 7, \"A\" ],\n", | |
| " [ \"Gecko\", \"Firefox 1.5\", \"Win 98+ / OSX.2+\", 1.8, \"A\" ],\n", | |
| " [ \"Gecko\", \"Firefox 2\", \"Win 98+ / OSX.2+\", 1.8, \"A\" ],\n", | |
| " [ \"Gecko\", \"Firefox 3\", \"Win 2k+ / OSX.3+\", 1.9, \"A\" ],\n", | |
| " [ \"Webkit\", \"Safari 1.2\", \"OSX.3\", 125.5, \"A\" ],\n", | |
| " [ \"Webkit\", \"Safari 1.3\", \"OSX.3\", 312.8, \"A\" ],\n", | |
| " [ \"Webkit\", \"Safari 2.0\", \"OSX.4+\", 419.3, \"A\" ],\n", | |
| " [ \"Webkit\", \"Safari 3.0\", \"OSX.4+\", 522.1, \"A\" ]\n", | |
| " ],\n", | |
| " \"aoColumns\": [\n", | |
| " { \"sTitle\": \"Engine\" },\n", | |
| " { \"sTitle\": \"Browser\" },\n", | |
| " { \"sTitle\": \"Platform\" },\n", | |
| " { \"sTitle\": \"Version\", \"sClass\": \"center\" },\n", | |
| " { \"sTitle\": \"Grade\", \"sClass\": \"center\" }\n", | |
| " ]\n", | |
| " } ); \n", | |
| "\n", | |
| "\"\"\"\n", | |
| "\n", | |
| "css_url = \"http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css\"\n", | |
| "datatable_url = \"http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js\"\n", | |
| "\n", | |
| "Javascript(data=js, lib=datatable_url, css=css_url)" | |
| ], | |
| "language": "python", | |
| "metadata": {}, | |
| "outputs": [ | |
| { | |
| "javascript": [ | |
| "$(\"head\").append($(\"<link/>\").attr({\n", | |
| " rel: \"stylesheet\",\n", | |
| " type: \"text/css\",\n", | |
| " href: \"http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css\"\n", | |
| "}));\n", | |
| "$.getScript(\"http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js\", function () {\n", | |
| "\n", | |
| "element.html('<div id=\"demo\"/>');\n", | |
| "container.show();\n", | |
| "\n", | |
| "$('#demo').html( '<table cellpadding=\"0\" cellspacing=\"0\" border=\"0\" class=\"display\" id=\"example\"></table>' );\n", | |
| " $('#example').dataTable( {\n", | |
| " \"aaData\": [\n", | |
| " /* Reduced data set */\n", | |
| " [ \"Trident\", \"Internet Explorer 4.0\", \"Win 95+\", 4, \"X\" ],\n", | |
| " [ \"Trident\", \"Internet Explorer 5.0\", \"Win 95+\", 5, \"C\" ],\n", | |
| " [ \"Trident\", \"Internet Explorer 5.5\", \"Win 95+\", 5.5, \"A\" ],\n", | |
| " [ \"Trident\", \"Internet Explorer 6.0\", \"Win 98+\", 6, \"A\" ],\n", | |
| " [ \"Trident\", \"Internet Explorer 7.0\", \"Win XP SP2+\", 7, \"A\" ],\n", | |
| " [ \"Gecko\", \"Firefox 1.5\", \"Win 98+ / OSX.2+\", 1.8, \"A\" ],\n", | |
| " [ \"Gecko\", \"Firefox 2\", \"Win 98+ / OSX.2+\", 1.8, \"A\" ],\n", | |
| " [ \"Gecko\", \"Firefox 3\", \"Win 2k+ / OSX.3+\", 1.9, \"A\" ],\n", | |
| " [ \"Webkit\", \"Safari 1.2\", \"OSX.3\", 125.5, \"A\" ],\n", | |
| " [ \"Webkit\", \"Safari 1.3\", \"OSX.3\", 312.8, \"A\" ],\n", | |
| " [ \"Webkit\", \"Safari 2.0\", \"OSX.4+\", 419.3, \"A\" ],\n", | |
| " [ \"Webkit\", \"Safari 3.0\", \"OSX.4+\", 522.1, \"A\" ]\n", | |
| " ],\n", | |
| " \"aoColumns\": [\n", | |
| " { \"sTitle\": \"Engine\" },\n", | |
| " { \"sTitle\": \"Browser\" },\n", | |
| " { \"sTitle\": \"Platform\" },\n", | |
| " { \"sTitle\": \"Version\", \"sClass\": \"center\" },\n", | |
| " { \"sTitle\": \"Grade\", \"sClass\": \"center\" }\n", | |
| " ]\n", | |
| " } ); \n", | |
| "\n", | |
| "});\n" | |
| ], | |
| "output_type": "pyout", | |
| "prompt_number": 16, | |
| "text": [ | |
| "<IPython.core.display.Javascript at 0x47bf5b0>" | |
| ] | |
| } | |
| ], | |
| "prompt_number": 16 | |
| }, | |
| { | |
| "cell_type": "heading", | |
| "level": 1, | |
| "metadata": {}, | |
| "source": [ | |
| "Vexflow examples" | |
| ] | |
| }, | |
| { | |
| "cell_type": "markdown", | |
| "metadata": {}, | |
| "source": [ | |
| "http://vexflow.com/docs/tutorial.html" | |
| ] | |
| }, | |
| { | |
| "cell_type": "code", | |
| "collapsed": false, | |
| "input": [ | |
| "from IPython.core.display import Javascript\n", | |
| "\n", | |
| "js = \"\"\"\n", | |
| "element.html(\"<canvas width=700 height=100 id='music21Canvas0'></canvas>\");\n", | |
| "container.show();\n", | |
| "\n", | |
| "var canvas = $(\"#music21Canvas0\")[0];\n", | |
| "var renderer = new Vex.Flow.Renderer(canvas,\n", | |
| " Vex.Flow.Renderer.Backends.CANVAS);\n", | |
| "\n", | |
| "var ctx = renderer.getContext();\n", | |
| "var stave = new Vex.Flow.Stave(10, 0, 500);\n", | |
| "stave.addClef(\"treble\").setContext(ctx).draw();\n", | |
| "\n", | |
| "\"\"\"\n", | |
| "\n", | |
| "js_libs = [\"http://vexflow.com/support/raphael.js\", \"http://vexflow.com/support/vexflow-min.js\"]\n", | |
| "\n", | |
| "Javascript(data=js, lib=js_libs)" | |
| ], | |
| "language": "python", | |
| "metadata": {}, | |
| "outputs": [ | |
| { | |
| "javascript": [ | |
| "$.getScript(\"http://vexflow.com/support/raphael.js\", function () {\n", | |
| "$.getScript(\"http://vexflow.com/support/vexflow-min.js\", function () {\n", | |
| "\n", | |
| "element.html(\"<canvas width=700 height=100 id='music21Canvas0'></canvas>\");\n", | |
| "container.show();\n", | |
| "\n", | |
| "var canvas = $(\"#music21Canvas0\")[0];\n", | |
| "var renderer = new Vex.Flow.Renderer(canvas,\n", | |
| " Vex.Flow.Renderer.Backends.CANVAS);\n", | |
| "\n", | |
| "var ctx = renderer.getContext();\n", | |
| "var stave = new Vex.Flow.Stave(10, 0, 500);\n", | |
| "stave.addClef(\"treble\").setContext(ctx).draw();\n", | |
| "\n", | |
| "});\n", | |
| "});\n" | |
| ], | |
| "output_type": "pyout", | |
| "prompt_number": 17, | |
| "text": [ | |
| "<IPython.core.display.Javascript at 0x47bf550>" | |
| ] | |
| } | |
| ], | |
| "prompt_number": 17 | |
| }, | |
| { | |
| "cell_type": "code", | |
| "collapsed": false, | |
| "input": [ | |
| "from IPython.core.display import Javascript\n", | |
| "\n", | |
| "js = \"\"\"\n", | |
| "element.html(\"<canvas width=700 height=100 id='music21Canvas1'></canvas>\");\n", | |
| "container.show();\n", | |
| "\n", | |
| "var canvas = $(\"#music21Canvas1\")[0];\n", | |
| "var renderer = new Vex.Flow.Renderer(canvas,\n", | |
| "Vex.Flow.Renderer.Backends.CANVAS);\n", | |
| "\n", | |
| "var ctx = renderer.getContext();\n", | |
| "var stave = new Vex.Flow.Stave(10, 0, 500);\n", | |
| "stave.addClef(\"treble\").setContext(ctx).draw();\n", | |
| "\n", | |
| "// Create the notes\n", | |
| "var notes = [\n", | |
| "// A quarter-note C.\n", | |
| "new Vex.Flow.StaveNote({ keys: [\"c/4\"], duration: \"q\" }),\n", | |
| "\n", | |
| "// A quarter-note D.\n", | |
| "new Vex.Flow.StaveNote({ keys: [\"d/4\"], duration: \"q\" }),\n", | |
| "\n", | |
| "// A quarter-note rest. Note that the key (b/4) specifies the vertical\n", | |
| "// position of the rest.\n", | |
| "new Vex.Flow.StaveNote({ keys: [\"b/4\"], duration: \"qr\" }),\n", | |
| "\n", | |
| "// A C-Major chord.\n", | |
| "new Vex.Flow.StaveNote({ keys: [\"c/4\", \"e/4\", \"g/4\"], duration: \"q\" })\n", | |
| "];\n", | |
| "\n", | |
| "// Create a voice in 4/4\n", | |
| "var voice = new Vex.Flow.Voice({\n", | |
| "num_beats: 4,\n", | |
| "beat_value: 4,\n", | |
| "resolution: Vex.Flow.RESOLUTION\n", | |
| "});\n", | |
| "\n", | |
| "// Add notes to voice\n", | |
| "voice.addTickables(notes);\n", | |
| "\n", | |
| "// Format and justify the notes to 500 pixels\n", | |
| "var formatter = new Vex.Flow.Formatter().\n", | |
| "joinVoices([voice]).format([voice], 500);\n", | |
| "\n", | |
| "// Render voice\n", | |
| "voice.draw(ctx, stave);\n", | |
| "\n", | |
| "\"\"\"\n", | |
| "\n", | |
| "js_libs = [\"http://vexflow.com/support/raphael.js\", \"http://vexflow.com/support/vexflow-min.js\"]\n", | |
| "\n", | |
| "Javascript(data=js, lib=js_libs)" | |
| ], | |
| "language": "python", | |
| "metadata": {}, | |
| "outputs": [ | |
| { | |
| "javascript": [ | |
| "$.getScript(\"http://vexflow.com/support/raphael.js\", function () {\n", | |
| "$.getScript(\"http://vexflow.com/support/vexflow-min.js\", function () {\n", | |
| "\n", | |
| "element.html(\"<canvas width=700 height=100 id='music21Canvas1'></canvas>\");\n", | |
| "container.show();\n", | |
| "\n", | |
| "var canvas = $(\"#music21Canvas1\")[0];\n", | |
| "var renderer = new Vex.Flow.Renderer(canvas,\n", | |
| "Vex.Flow.Renderer.Backends.CANVAS);\n", | |
| "\n", | |
| "var ctx = renderer.getContext();\n", | |
| "var stave = new Vex.Flow.Stave(10, 0, 500);\n", | |
| "stave.addClef(\"treble\").setContext(ctx).draw();\n", | |
| "\n", | |
| "// Create the notes\n", | |
| "var notes = [\n", | |
| "// A quarter-note C.\n", | |
| "new Vex.Flow.StaveNote({ keys: [\"c/4\"], duration: \"q\" }),\n", | |
| "\n", | |
| "// A quarter-note D.\n", | |
| "new Vex.Flow.StaveNote({ keys: [\"d/4\"], duration: \"q\" }),\n", | |
| "\n", | |
| "// A quarter-note rest. Note that the key (b/4) specifies the vertical\n", | |
| "// position of the rest.\n", | |
| "new Vex.Flow.StaveNote({ keys: [\"b/4\"], duration: \"qr\" }),\n", | |
| "\n", | |
| "// A C-Major chord.\n", | |
| "new Vex.Flow.StaveNote({ keys: [\"c/4\", \"e/4\", \"g/4\"], duration: \"q\" })\n", | |
| "];\n", | |
| "\n", | |
| "// Create a voice in 4/4\n", | |
| "var voice = new Vex.Flow.Voice({\n", | |
| "num_beats: 4,\n", | |
| "beat_value: 4,\n", | |
| "resolution: Vex.Flow.RESOLUTION\n", | |
| "});\n", | |
| "\n", | |
| "// Add notes to voice\n", | |
| "voice.addTickables(notes);\n", | |
| "\n", | |
| "// Format and justify the notes to 500 pixels\n", | |
| "var formatter = new Vex.Flow.Formatter().\n", | |
| "joinVoices([voice]).format([voice], 500);\n", | |
| "\n", | |
| "// Render voice\n", | |
| "voice.draw(ctx, stave);\n", | |
| "\n", | |
| "});\n", | |
| "});\n" | |
| ], | |
| "output_type": "pyout", | |
| "prompt_number": 18, | |
| "text": [ | |
| "<IPython.core.display.Javascript at 0x47bf670>" | |
| ] | |
| } | |
| ], | |
| "prompt_number": 18 | |
| }, | |
| { | |
| "cell_type": "code", | |
| "collapsed": false, | |
| "input": [], | |
| "language": "python", | |
| "metadata": {}, | |
| "outputs": [] | |
| } | |
| ], | |
| "metadata": {} | |
| } | |
| ] | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
@rdhyee: Does the datatable cell still works for you?