gistfile1.txt

{
 "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": {}
  }
 ]
}