from IPython.display import HTML
# http://en.wikipedia.org/wiki/File:2006_Quarter_Proof.png
head = "http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/2006_Quarter_Proof.png/244px-2006_Quarter_Proof.png"
# http://en.wikipedia.org/wiki/File:2012-ATB-Quarters-Unc-Hawaii.jpg
tail = "http://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/2012-ATB-Quarters-Unc-Hawaii.jpg/238px-2012-ATB-Quarters-Unc-Hawaii.jpg"
head_img = "<img class='coin' src='{0}'/>".format(head)
tail_img = "<img class='coin' src='{0}'/>".format(tail)
HTML(head_img + tail_img)
How to resize images?
Two ways I want to use here:
style
elementfrom IPython.core.display import Javascript
from jinja2 import Template
# http://en.wikipedia.org/wiki/File:2006_Quarter_Proof.png
head = "http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/2006_Quarter_Proof.png/244px-2006_Quarter_Proof.png"
# http://en.wikipedia.org/wiki/File:2012-ATB-Quarters-Unc-Hawaii.jpg
tail = "http://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/2012-ATB-Quarters-Unc-Hawaii.jpg/238px-2012-ATB-Quarters-Unc-Hawaii.jpg"
head_img = "<img class='coin' src='{0}'/>".format(head)
tail_img = "<img class='coin' src='{0}'/>".format(tail)
coins_html = head_img + tail_img
js_template = """
element.html("{{coins_html}}");
container.show();
setTimeout(function(){
$('.coin').css('width', '50px');
},0);
"""
js = Template(js_template).render(coins_html=coins_html)
Javascript(data=js, lib=None, css=None)
from IPython.core.display import Javascript
js = """$('<style/>').html(".coin {width: 55px;}").appendTo('head')"""
Javascript(data=js, lib=None, css=None)
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 there is any standard Python library for making sounds.
The video http://www.youtube.com/watch?v=JhAF6puNTxI might help -- mentions wave library... http://docs.python.org/2/library/wave.html
http://codingmess.blogspot.com/2010/02/how-to-make-wav-file-with-python.html -> to create a wav file "by hand"
investigate audiolab
: http://pypi.python.org/pypi/scikits.audiolab/
# http://my.safaribooksonline.com/book/-/9781449361600/4dot-scikit-taking-scipy-one-step-further/fourdot1_scikit_image_html
# check to see whether we have libraries available
import numpy as np
import matplotlib.pyplot as mpl
import scipy.ndimage as ndimage
import skimage.filter as skif
from IPython.core.display import HTML
import random
# http://en.wikipedia.org/wiki/File:2006_Quarter_Proof.png
head = "http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/2006_Quarter_Proof.png/244px-2006_Quarter_Proof.png"
# http://en.wikipedia.org/wiki/File:2012-ATB-Quarters-Unc-Hawaii.jpg
tail = "http://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/2012-ATB-Quarters-Unc-Hawaii.jpg/238px-2012-ATB-Quarters-Unc-Hawaii.jpg"
head_img = "<img class='coin' src='{0}'/>".format(head)
tail_img = "<img class='coin' src='{0}'/>".format(tail)
coin_toss = ""
size = 100
random.seed()
for i in xrange(size):
toss = random.randint(0,1)
coin_toss += head_img if toss else tail_img
HTML(coin_toss)
# based on http://pastebin.com/yPTvFPeP
from IPython.core.display import Javascript
js = """
element.html("<svg></svg>");
container.show();
var width = $('svg').width();
var height = $('svg').height();
var svg = d3.select('svg');
svg
.attr('width', width)
.attr('height', height);
svg.selectAll('circle')
.data([18, 57, 112, 323])
.enter().append('circle')
.attr('cy', 236)
.attr('cx', String)
.attr('r', Math.sqrt);
"""
d3_url = "http://cdnjs.cloudflare.com/ajax/libs/d3/2.10.0/d3.v2.min.js"
Javascript(data=js, lib=d3_url)
# http://www.datatables.net/
# http://www.datatables.net/examples/data_sources/js_array.html
from IPython.core.display import Javascript
js = """
element.html('<div id="demo"/>');
container.show();
$('#demo').html( '<table cellpadding="0" cellspacing="0" border="0" class="display" id="example"></table>' );
$('#example').dataTable( {
"aaData": [
/* Reduced data set */
[ "Trident", "Internet Explorer 4.0", "Win 95+", 4, "X" ],
[ "Trident", "Internet Explorer 5.0", "Win 95+", 5, "C" ],
[ "Trident", "Internet Explorer 5.5", "Win 95+", 5.5, "A" ],
[ "Trident", "Internet Explorer 6.0", "Win 98+", 6, "A" ],
[ "Trident", "Internet Explorer 7.0", "Win XP SP2+", 7, "A" ],
[ "Gecko", "Firefox 1.5", "Win 98+ / OSX.2+", 1.8, "A" ],
[ "Gecko", "Firefox 2", "Win 98+ / OSX.2+", 1.8, "A" ],
[ "Gecko", "Firefox 3", "Win 2k+ / OSX.3+", 1.9, "A" ],
[ "Webkit", "Safari 1.2", "OSX.3", 125.5, "A" ],
[ "Webkit", "Safari 1.3", "OSX.3", 312.8, "A" ],
[ "Webkit", "Safari 2.0", "OSX.4+", 419.3, "A" ],
[ "Webkit", "Safari 3.0", "OSX.4+", 522.1, "A" ]
],
"aoColumns": [
{ "sTitle": "Engine" },
{ "sTitle": "Browser" },
{ "sTitle": "Platform" },
{ "sTitle": "Version", "sClass": "center" },
{ "sTitle": "Grade", "sClass": "center" }
]
} );
"""
css_url = "http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css"
datatable_url = "http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"
Javascript(data=js, lib=datatable_url, css=css_url)
from IPython.core.display import Javascript
js = """
element.html("<canvas width=700 height=100 id='music21Canvas0'></canvas>");
container.show();
var canvas = $("#music21Canvas0")[0];
var renderer = new Vex.Flow.Renderer(canvas,
Vex.Flow.Renderer.Backends.CANVAS);
var ctx = renderer.getContext();
var stave = new Vex.Flow.Stave(10, 0, 500);
stave.addClef("treble").setContext(ctx).draw();
"""
js_libs = ["http://vexflow.com/support/raphael.js", "http://vexflow.com/support/vexflow-min.js"]
Javascript(data=js, lib=js_libs)
from IPython.core.display import Javascript
js = """
element.html("<canvas width=700 height=100 id='music21Canvas1'></canvas>");
container.show();
var canvas = $("#music21Canvas1")[0];
var renderer = new Vex.Flow.Renderer(canvas,
Vex.Flow.Renderer.Backends.CANVAS);
var ctx = renderer.getContext();
var stave = new Vex.Flow.Stave(10, 0, 500);
stave.addClef("treble").setContext(ctx).draw();
// Create the notes
var notes = [
// A quarter-note C.
new Vex.Flow.StaveNote({ keys: ["c/4"], duration: "q" }),
// A quarter-note D.
new Vex.Flow.StaveNote({ keys: ["d/4"], duration: "q" }),
// A quarter-note rest. Note that the key (b/4) specifies the vertical
// position of the rest.
new Vex.Flow.StaveNote({ keys: ["b/4"], duration: "qr" }),
// A C-Major chord.
new Vex.Flow.StaveNote({ keys: ["c/4", "e/4", "g/4"], duration: "q" })
];
// Create a voice in 4/4
var voice = new Vex.Flow.Voice({
num_beats: 4,
beat_value: 4,
resolution: Vex.Flow.RESOLUTION
});
// Add notes to voice
voice.addTickables(notes);
// Format and justify the notes to 500 pixels
var formatter = new Vex.Flow.Formatter().
joinVoices([voice]).format([voice], 500);
// Render voice
voice.draw(ctx, stave);
"""
js_libs = ["http://vexflow.com/support/raphael.js", "http://vexflow.com/support/vexflow-min.js"]
Javascript(data=js, lib=js_libs)