ipy_widgets

gistfile1.txt

{
 "metadata": {
  "name": "widgets"
 },
 "nbformat": 3,
 "nbformat_minor": 0,
 "worksheets": [
  {
   "cells": [
    {
     "cell_type": "code",
     "collapsed": false,
     "input": "from IPython.display import HTML",
     "language": "python",
     "metadata": {},
     "outputs": [],
     "prompt_number": 8
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": "plot_with_controls = \"\"\"\n<iframe id=\"plot\" width=\"400\" height=\"400\" frameborder=\"0\" seamless=\"seamless\" scrolling=\"no\" src=\"https://plot.ly/~alex/475.embed\"></iframe>\n<div class=\"row\">\n    <div class=\"slider\" id=\"branches\"></div>\n    Branches: <span class=\"val\" id=\"branches_val\"></span>\n</div>\n<div class=\"row\">\n    <div class=\"slider\" id=\"angle\"></div>\n    Angle: <span class=\"val\" id=\"angle_val\"></span>\n</div>\n<div class=\"row\">\n    <div class=\"slider\" id=\"scale\"></div>\n    Scale: <span class=\"val\" id=\"scale_val\"></span>\n</div>\n<div class=\"row\">\n    <div class=\"slider\" id=\"depth\"></div>\n    Depth: <span class=\"val\" id=\"depth_val\"></span>\n</div>\n\"\"\"\n\njavascript = \"\"\"\n<script type=\"text/Javascript\">\n    var config = {\n        branches: {value: 3, min: 1, max: 5, step: 1},\n        angle: {value: 90, min: 0, max: 180, step: 5},\n        scale: {value: 0.5, min: 0, max:2, step: 0.05},\n        depth: {value: 4, min: 1, max: 8, step: 1}\n    };\n    $('.slider').each(function(){\n        var thisConfig = config[this.id],\n            $thisVal = $('#'+this.id+'_val');\n        thisConfig.slide = function(event, ui) {\n            $thisVal.html(ui.value);\n            go();\n        };\n        $(this).slider(thisConfig);\n        $thisVal.html(thisConfig.value);\n    });\n    \n    function getVals() {\n        var vals = {};\n        $('.slider').each(function(){\n            vals[this.id] = +($('#'+this.id+'_val').text());\n        });\n        return vals;\n    }\n    \n    function go() {\n        var opts = getVals(),\n            branches = opts.branches,\n            aRad = opts.angle*Math.PI/180,\n            a0 = -aRad*(branches-1)/2,\n            scale = opts.scale,\n            depth = opts.depth,\n            xArray = [],\n            yArray = [];\n        step(0,0,1,0,0);\n    \n        $('#plot')[0].contentWindow.postMessage(\n            {restyle: {x:[xArray], y:[yArray]}},\n            'https://plot.ly');\n        \n        function step(x,y,r,a,i) {\n            var x1 = x + r*Math.sin(a),\n                y1 = y + r*Math.cos(a);\n            [].push.apply(xArray, [x,x1,null]);\n            [].push.apply(yArray, [y,y1,null]);\n            if(i>=depth) return;\n            for(var j=0; j<branches; j++) {\n                step(x1,y1,r*scale,a+a0+aRad*j,i+1);\n            }\n        }\n    }\n    \n    setTimeout(go,5000);\n</script>\n\"\"\"",
     "language": "python",
     "metadata": {},
     "outputs": [],
     "prompt_number": 9
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": "HTML( plot_with_controls + javascript )",
     "language": "python",
     "metadata": {},
     "outputs": [
      {
       "html": "\n<iframe id=\"plot\" width=\"400\" height=\"400\" frameborder=\"0\" seamless=\"seamless\" scrolling=\"no\" src=\"https://plot.ly/~alex/475.embed\"></iframe>\n<div class=\"row\">\n    <div class=\"slider\" id=\"branches\"></div>\n    Branches: <span class=\"val\" id=\"branches_val\"></span>\n</div>\n<div class=\"row\">\n    <div class=\"slider\" id=\"angle\"></div>\n    Angle: <span class=\"val\" id=\"angle_val\"></span>\n</div>\n<div class=\"row\">\n    <div class=\"slider\" id=\"scale\"></div>\n    Scale: <span class=\"val\" id=\"scale_val\"></span>\n</div>\n<div class=\"row\">\n    <div class=\"slider\" id=\"depth\"></div>\n    Depth: <span class=\"val\" id=\"depth_val\"></span>\n</div>\n\n<script type=\"text/Javascript\">\n    var config = {\n        branches: {value: 3, min: 1, max: 5, step: 1},\n        angle: {value: 90, min: 0, max: 180, step: 5},\n        scale: {value: 0.5, min: 0, max:2, step: 0.05},\n        depth: {value: 4, min: 1, max: 8, step: 1}\n    };\n    $('.slider').each(function(){\n        var thisConfig = config[this.id],\n            $thisVal = $('#'+this.id+'_val');\n        thisConfig.slide = function(event, ui) {\n            $thisVal.html(ui.value);\n            go();\n        };\n        $(this).slider(thisConfig);\n        $thisVal.html(thisConfig.value);\n    });\n    \n    function getVals() {\n        var vals = {};\n        $('.slider').each(function(){\n            vals[this.id] = +($('#'+this.id+'_val').text());\n        });\n        return vals;\n    }\n    \n    function go() {\n        var opts = getVals(),\n            branches = opts.branches,\n            aRad = opts.angle*Math.PI/180,\n            a0 = -aRad*(branches-1)/2,\n            scale = opts.scale,\n            depth = opts.depth,\n            xArray = [],\n            yArray = [];\n        step(0,0,1,0,0);\n    \n        $('#plot')[0].contentWindow.postMessage(\n            {restyle: {x:[xArray], y:[yArray]}},\n            'https://plot.ly');\n        \n        function step(x,y,r,a,i) {\n            var x1 = x + r*Math.sin(a),\n                y1 = y + r*Math.cos(a);\n            [].push.apply(xArray, [x,x1,null]);\n            [].push.apply(yArray, [y,y1,null]);\n            if(i>=depth) return;\n            for(var j=0; j<branches; j++) {\n                step(x1,y1,r*scale,a+a0+aRad*j,i+1);\n            }\n        }\n    }\n    \n    setTimeout(go,5000);\n</script>\n",
       "metadata": {},
       "output_type": "pyout",
       "prompt_number": 10,
       "text": "<IPython.core.display.HTML at 0x105c15b90>"
      }
     ],
     "prompt_number": 10
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": "",
     "language": "python",
     "metadata": {},
     "outputs": []
    }
   ],
   "metadata": {}
  }
 ]
}