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": "Widgets" | |
}, | |
"nbformat": 3, | |
"nbformat_minor": 0, | |
"worksheets": [ | |
{ | |
"cells": [ | |
{ | |
"cell_type": "code", | |
"collapsed": false, | |
"input": [ | |
"from cStringIO import StringIO\n", | |
"from IPython.display import Image\n", | |
"\n", | |
"def figure2Image(fig):\n", | |
" buffer = StringIO()\n", | |
" fig.savefig(buffer, format='png')\n", | |
" buffer.reset()\n", | |
" data = buffer.read()\n", | |
" return Image(data)\n", | |
" \n", | |
"class Slider(object):\n", | |
" \n", | |
" def __init__(self, python_var, callback, min=1, max=100, step=1):\n", | |
" self._min = min\n", | |
" self._max = max\n", | |
" self._step = step\n", | |
" self._value_init = (min+max)/2\n", | |
" self._id = \"slider\" + str(id(self))\n", | |
" self._python_var = python_var\n", | |
" self._callback = callback\n", | |
" \n", | |
" def update(self, value):\n", | |
" return self._callback(value)\n", | |
" \n", | |
" def _repr_html_(self):\n", | |
" javascript = \"\"\" \\\n", | |
"<script type=\"text/Javascript\">\n", | |
" var %(id)s_computing = false;\n", | |
" function %(id)s_updated(value, final) {\n", | |
" //get the element\n", | |
" var display = document.getElementById(\"chosen\");\n", | |
" //show the amount\n", | |
" display.innerHTML=\"%(python_var)s = \" + value;\n", | |
" var command = \"s.update(\" + value + \")\";\n", | |
" //console.log(\"Executing Command: \" + command);\n", | |
" \n", | |
" var kernel = IPython.notebook.kernel;\n", | |
" if (%(id)s_computing == false || final == true) {\n", | |
" kernel.execute(command, {'output' : %(id)s_handle_output}, {silent:false});\n", | |
" %(id)s_computing = true;\n", | |
" }\n", | |
" }\n", | |
" function %(id)s_handle_output(out_type, out) {\n", | |
" %(id)s_computing = false;\n", | |
" //console.log(out_type);\n", | |
" //console.log(out);\n", | |
" var res = null;\n", | |
" // if output is a print statement\n", | |
" if(out_type == \"stream\"){\n", | |
" res = out.data;\n", | |
" }\n", | |
" // if output is a python object\n", | |
" else if(out_type === \"pyout\"){\n", | |
" res = out.data[\"text/plain\"];\n", | |
" img = out.data[\"image/png\"];\n", | |
" if (img != null) {\n", | |
" document.getElementById(\"%(id)s_result_img\").src = \"data:image/png;base64,\" + img;\n", | |
" }\n", | |
" }\n", | |
" // if output is a python error\n", | |
" else if(out_type == \"pyerr\"){\n", | |
" res = out.ename + \": \" + out.evalue;\n", | |
" }\n", | |
" // if output is something we haven't thought of\n", | |
" else{\n", | |
" res = \"[out type not implemented]\"; \n", | |
" }\n", | |
" document.getElementById(\"%(id)s_result_text\").innerHTML = res;\n", | |
" }\n", | |
"</script>\n", | |
"\"\"\" % {\"id\": self._id, \"python_var\": self._python_var}\n", | |
" html = \"\"\" \\\n", | |
"%(min)s <input id=\"%(id)s\" type=\"range\" min=\"%(min)s\" max=\"%(max)s\" step=\"%(step)s\" value=\"%(value_init)s\"\n", | |
" onchange=\"%(id)s_updated(this.value, false)\" onmouseup=\"%(id)s_updated(this.value, true)\" /> %(max)s</div>\n", | |
"<div id=\"chosen\">%(python_var)s = %(value_init)s</div>\n", | |
"Out: <div id=\"%(id)s_result_text\"></div>\n", | |
"<img id=\"%(id)s_result_img\" src=\"\"><br>\n", | |
"\"\"\" % {\"id\": self._id, \"min\": self._min, \"max\": self._max, \"step\": self._step, \"value_init\": self._value_init,\n", | |
" \"python_var\": self._python_var}\n", | |
" return javascript + html" | |
], | |
"language": "python", | |
"metadata": {}, | |
"outputs": [], | |
"prompt_number": 1 | |
}, | |
{ | |
"cell_type": "code", | |
"collapsed": false, | |
"input": [ | |
"from pylab import plot, figure\n", | |
"from numpy import linspace, pi, sin\n", | |
"x = linspace(0, 2*pi, 1000)\n", | |
"\n", | |
"def update(value):\n", | |
" fig = figure(figsize=(4, 2))\n", | |
" k = value / 50.\n", | |
" plot(x, sin(k*x))\n", | |
" return figure2Image(fig)\n", | |
"\n", | |
"s = Slider(\"s\", update)\n", | |
"s" | |
], | |
"language": "python", | |
"metadata": {}, | |
"outputs": [ | |
{ | |
"html": [ | |
" <script type=\"text/Javascript\">\n", | |
" var slider46774544_computing = false;\n", | |
" function slider46774544_updated(value, final) {\n", | |
" //get the element\n", | |
" var display = document.getElementById(\"chosen\");\n", | |
" //show the amount\n", | |
" display.innerHTML=\"s = \" + value;\n", | |
" var command = \"s.update(\" + value + \")\";\n", | |
" //console.log(\"Executing Command: \" + command);\n", | |
" \n", | |
" var kernel = IPython.notebook.kernel;\n", | |
" if (slider46774544_computing == false || final == true) {\n", | |
" kernel.execute(command, {'output' : slider46774544_handle_output}, {silent:false});\n", | |
" slider46774544_computing = true;\n", | |
" }\n", | |
" }\n", | |
" function slider46774544_handle_output(out_type, out) {\n", | |
" slider46774544_computing = false;\n", | |
" //console.log(out_type);\n", | |
" //console.log(out);\n", | |
" var res = null;\n", | |
" // if output is a print statement\n", | |
" if(out_type == \"stream\"){\n", | |
" res = out.data;\n", | |
" }\n", | |
" // if output is a python object\n", | |
" else if(out_type === \"pyout\"){\n", | |
" res = out.data[\"text/plain\"];\n", | |
" img = out.data[\"image/png\"];\n", | |
" if (img != null) {\n", | |
" document.getElementById(\"slider46774544_result_img\").src = \"data:image/png;base64,\" + img;\n", | |
" }\n", | |
" }\n", | |
" // if output is a python error\n", | |
" else if(out_type == \"pyerr\"){\n", | |
" res = out.ename + \": \" + out.evalue;\n", | |
" }\n", | |
" // if output is something we haven't thought of\n", | |
" else{\n", | |
" res = \"[out type not implemented]\"; \n", | |
" }\n", | |
" document.getElementById(\"slider46774544_result_text\").innerHTML = res;\n", | |
" }\n", | |
"</script>\n", | |
" 1 <input id=\"slider46774544\" type=\"range\" min=\"1\" max=\"100\" step=\"1\" value=\"50\"\n", | |
" onchange=\"slider46774544_updated(this.value, false)\" onmouseup=\"slider46774544_updated(this.value, true)\" /> 100</div>\n", | |
"<div id=\"chosen\">s = 50</div>\n", | |
"Out: <div id=\"slider46774544_result_text\"></div>\n", | |
"<img id=\"slider46774544_result_img\" src=\"\"><br>\n" | |
], | |
"output_type": "pyout", | |
"prompt_number": 2, | |
"text": [ | |
"<__main__.Slider at 0x2c9b910>" | |
] | |
} | |
], | |
"prompt_number": 2 | |
}, | |
{ | |
"cell_type": "code", | |
"collapsed": false, | |
"input": [], | |
"language": "python", | |
"metadata": {}, | |
"outputs": [], | |
"prompt_number": 2 | |
} | |
], | |
"metadata": {} | |
} | |
] | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment