{
 "metadata": {
  "name": "",
  "signature": "sha256:b01df2b0b8090da3c2087d41657504b91ba0ee4207968c11803a428f4eda2aaa"
 },
 "nbformat": 3,
 "nbformat_minor": 0,
 "worksheets": [
  {
   "cells": [
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "# TopGear Battlecruiser Demo\n"
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "# Cross-notebook include shim\n",
      "with open(\"nbinclude.ipynb\") as nbinclude_f: # don't rename nbinclude_f\n",
      "    import IPython.nbformat.current\n",
      "    get_ipython().run_cell(IPython.nbformat.current.read(nbinclude_f, 'json').worksheets[0].cells[0].input)"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [],
     "prompt_number": 1
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "nbinclude(\"battlecruiser_widget\")"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [
      {
       "javascript": [
        "// TODO:\n",
        "// * code cleanup\n",
        "// * support button mapping / more than one button\n",
        "// * better handling for when gamepads disconnect/reconnect at runtime\n",
        "// * refactor getting gamepads into a function\n",
        "\n",
        "require([\"widgets/js/widget\"], function(WidgetManager) {\n",
        "\n",
        "  var BattleCruiserView = IPython.DOMWidgetView.extend({\n",
        "    render : function(){\n",
        "      // Called when view is rendered.\n",
        "\n",
        "      //http://drive.google.com/uc?export=view&id=0B_zpNTA3cxZhYlVQREMzRzU5VE0\n",
        "      \n",
        "      //var audio = new Audio('/static/battlecruiser_operational.mp3');\n",
        "      var audio = new Audio('https://drive.google.com/uc?export=view&id=0B_zpNTA3cxZhYlVQREMzRzU5VE0');\n",
        "      audio.play();\n",
        "        \n",
        "      \n",
        "        \n",
        "      //http://drive.google.com/uc?export=view&id=0B_zpNTA3cxZhSHhyR0dYNlhfcVk\n",
        "\n",
        "      // This is a single-line horizontal widget\n",
        "      this.$el\n",
        "        .addClass('widget-hbox-single')\n",
        "        .css({\n",
        "          'height': '480px',\n",
        "          'width': '640px',\n",
        "          //'background-image':'url(/static/starcraft.png)'});\n",
        "          'background-image':'url(https://drive.google.com/uc?export=view&id=0B_zpNTA3cxZhSHhyR0dYNlhfcVk)'});\n",
        "      // this.$el.style.backgroundImage = \"url(/static/starcraft.png)\";\n",
        "\n",
        "      // Add a label div, which will contain the description\n",
        "      this.$label = $('<div />')\n",
        "        .addClass('widget-hlabel')\n",
        "        .appendTo(this.$el)\n",
        "        .hide();\n",
        "\n",
        "      this.$value = $('<div />')\n",
        "        .addClass('widget-hlabel')\n",
        "        .appendTo(this.$el)\n",
        "        .hide();\n",
        "\n",
        "      this.$x_val = $('<div />')\n",
        "        .addClass('widget-hlabel')\n",
        "        .appendTo(this.$el)\n",
        "        .hide();\n",
        "\n",
        "      this.$y_val = $('<div />')\n",
        "        .addClass('widget-hlabel')\n",
        "        .appendTo(this.$el)\n",
        "        .hide();\n",
        "\n",
        "      this.$theta_val = $('<div />')\n",
        "        .addClass('widget-hlabel')\n",
        "        .appendTo(this.$el)\n",
        "        .hide();\n",
        "\n",
        "\n",
        "      //$('<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />').appendTo(this.$el);\n",
        "\n",
        "      this.$antiga_prime=$('<div />')\n",
        "        .appendTo(this.$el);\n",
        "\n",
        "      this.$antiga_prime.css({\n",
        "        //'position' : 'fixed',\n",
        "        'height' : '480px',\n",
        "        'width' : '640px',\n",
        "        'top' : 0,\n",
        "        'left' : 0\n",
        "        // 'background-image':'url(/static/starcraft.png)'\n",
        "\n",
        "      })\n",
        "      // this.$antiga_prime.style.backgroundImage = \"url(/static/starcraft.png)\";\n",
        "\n",
        "      this.$bc_image=$('<div />')\n",
        "        .addClass('stuff')\n",
        "        .css(\"position\", \"relative\")\n",
        "        .appendTo(this.$antiga_prime);\n",
        "\n",
        "      //this.$bc_image.append(\"<img src=/static/bc.png> </img>\");\n",
        "      this.$bc_image.append(\"<img src=https://drive.google.com/uc?export=view&id=0B_zpNTA3cxZhalY5YmFXckZiQWs> </img>\");\n",
        "\n",
        "      console.log(this.$bc_image.offset())\n",
        "\n",
        "      // Register an event handler with the joystick - TODO\n",
        "      //onAnalogMove(this.model.get('axis_id'), $.proxy(this.handle_value, this));\n",
        "      //onButton(1, $.proxy(this.handle_value, this));\n",
        "      //register_handler($.proxy(this.handle_value, this));\n",
        "      //console.log(this.model.get('button_id'));\n",
        "\n",
        "      // this.$el_to_style = this.$checkbox; // Set default element to style\n",
        "      this.update(); // Set defaults.\n",
        "    },\n",
        "\n",
        "    handle_value: function(new_value) {\n",
        "      // Handles when the checkbox is clicked.\n",
        "\n",
        "      // Calling model.set will trigger all of the other views of the\n",
        "      // model to update.\n",
        "      this.model.set('value', new_value, {updated_view: this});\n",
        "      this.touch();\n",
        "    },\n",
        "\n",
        "    update : function(options){\n",
        "      // Update the contents of this view\n",
        "      //\n",
        "      // Called when the model is changed. The model may have been\n",
        "      // changed by another view or by a state update from the back-end.\n",
        "      // this.$checkbox.prop('checked', this.model.get('value'));\n",
        "\n",
        "      if (options === undefined || options.updated_view != this) {\n",
        "        this.$value.text(this.model.get('value'));\n",
        "        this.$x_val.text(this.model.get('x'));\n",
        "        this.$y_val.text(this.model.get('y'));\n",
        "        this.$theta_val.text(this.model.get('theta'));\n",
        "\n",
        "        this.$bc_image.children('img').rotate(this.model.get('theta')+310);\n",
        "        //this.$bc_image.offset({'left' : this.model.get('x'), 'top' : this.model.get('y')});\n",
        "        this.$bc_image.css({'left' : this.model.get('x'), 'top' : this.model.get('y')});\n",
        "\n",
        "\n",
        "        // var disabled = this.model.get('disabled');\n",
        "        // if (disabled) {\n",
        "        //   // Remove the gamepad event\n",
        "        // } else {\n",
        "        //   // Re-introduce the gamepad event\n",
        "        // }\n",
        "\n",
        "        var description = this.model.get('description');\n",
        "        if (description.trim().length === 0) {\n",
        "          this.$label.hide();\n",
        "        } else {\n",
        "          this.$label.text(description);\n",
        "          MathJax.Hub.Queue([\"Typeset\",MathJax.Hub,this.$label.get(0)]);\n",
        "          this.$label.show();\n",
        "        }\n",
        "      }\n",
        "      return BattleCruiserView.__super__.update.apply(this);\n",
        "    },\n",
        "  });\n",
        "\n",
        "  \n",
        "  WidgetManager.register_widget_view('BattleCruiserView', BattleCruiserView);\n",
        "});\n"
       ],
       "metadata": {},
       "output_type": "display_data",
       "text": [
        "<IPython.core.display.Javascript at 0x3b77cd0>"
       ]
      },
      {
       "javascript": [
        "// VERSION: 1.8 LAST UPDATE: 9.03.2011\r\n",
        "/* \r\n",
        " * Licensed under the MIT license: http://www.opensource.org/licenses/mit-license.php\r\n",
        " * \r\n",
        " * Made by Wilq32, wilq32@gmail.com, Wroclaw, Poland, 01.2009\r\n",
        " * Website: http://code.google.com/p/jqueryrotate/ \r\n",
        " */\r\n",
        "\r\n",
        "// Documentation removed from script file (was kinda useless and outdated)\r\n",
        "\r\n",
        "(function($) {\r\n",
        "var supportedCSS,styles=document.getElementsByTagName(\"head\")[0].style,toCheck=\"transformProperty WebkitTransform OTransform msTransform MozTransform\".split(\" \");\r\n",
        "for (var a=0;a<toCheck.length;a++) if (styles[toCheck[a]] !== undefined) supportedCSS = toCheck[a];\r\n",
        "// Bad eval to preven google closure to remove it from code o_O\r\n",
        "// After compresion replace it back to var IE = 'v' == '\\v'\r\n",
        "var IE = eval('\"v\"==\"\\v\"');\r\n",
        "\r\n",
        "jQuery.fn.extend({\r\n",
        "ImageRotate:function(parameters)\r\n",
        "{\r\n",
        "\t// If this element is already a Wilq32.PhotoEffect object, skip creation\r\n",
        "\tif (this.Wilq32&&this.Wilq32.PhotoEffect) return;\r\n",
        "\t// parameters might be applied to many objects - so because we use them later - a fresh instance is needed \r\n",
        "\tvar paramClone = $.extend(true, {}, parameters); \r\n",
        "\treturn (new Wilq32.PhotoEffect(this.get(0),paramClone))._rootObj;\r\n",
        "},\r\n",
        "rotate:function(parameters)\r\n",
        "{\r\n",
        "\tif (this.length===0||typeof parameters==\"undefined\") return;\r\n",
        "\tif (typeof parameters==\"number\") parameters={angle:parameters};\r\n",
        "\tvar returned=[];\r\n",
        "\tfor (var i=0,i0=this.length;i<i0;i++)\r\n",
        "\t{\r\n",
        "\t    var element=this.get(i);\t\r\n",
        "\t\tif (typeof element.Wilq32 == \"undefined\") \r\n",
        "\t\t\treturned.push($($(element).ImageRotate(parameters)));\r\n",
        "\t\telse \r\n",
        "            element.Wilq32.PhotoEffect._handleRotation(parameters);\r\n",
        "\t}\r\n",
        "\treturn returned;\r\n",
        "}\r\n",
        "});\r\n",
        "\r\n",
        "// Library agnostic interface\r\n",
        "\r\n",
        "Wilq32=window.Wilq32||{};\r\n",
        "Wilq32.PhotoEffect=(function(){\r\n",
        "\r\n",
        "\tif (supportedCSS) {\r\n",
        "\t\treturn function(img,parameters){\r\n",
        "\t\t\timg.Wilq32 = {\r\n",
        "\t\t\t\tPhotoEffect: this\r\n",
        "\t\t\t};\r\n",
        "            \r\n",
        "            this._img = this._rootObj = this._eventObj = img;\r\n",
        "            this._handleRotation(parameters);\r\n",
        "\t\t}\r\n",
        "\t} else {\r\n",
        "\t\treturn function(img,parameters) {\r\n",
        "\t\t\t// Make sure that class and id are also copied - just in case you would like to refeer to an newly created object\r\n",
        "            this._img = img;\r\n",
        "\r\n",
        "\t\t\tthis._rootObj=document.createElement('span');\r\n",
        "\t\t\tthis._rootObj.style.display=\"inline-block\";\r\n",
        "\t\t\tthis._rootObj.Wilq32 = \r\n",
        "\t\t\t\t{\r\n",
        "\t\t\t\t\tPhotoEffect: this\r\n",
        "\t\t\t\t};\r\n",
        "\t\t\timg.parentNode.insertBefore(this._rootObj,img);\r\n",
        "\t\t\t\r\n",
        "\t\t\tif (img.complete) {\r\n",
        "\t\t\t\tthis._Loader(parameters);\r\n",
        "\t\t\t} else {\r\n",
        "\t\t\t\tvar self=this;\r\n",
        "\t\t\t\t// TODO: Remove jQuery dependency\r\n",
        "\t\t\t\tjQuery(this._img).bind(\"load\", function()\r\n",
        "\t\t\t\t{\r\n",
        "\t\t\t\t\tself._Loader(parameters);\r\n",
        "\t\t\t\t});\r\n",
        "\t\t\t}\r\n",
        "\t\t}\r\n",
        "\t}\r\n",
        "})();\r\n",
        "\r\n",
        "Wilq32.PhotoEffect.prototype={\r\n",
        "    _setupParameters : function (parameters){\r\n",
        "\t\tthis._parameters = this._parameters || {};\r\n",
        "        if (typeof this._angle !== \"number\") this._angle = 0 ;\r\n",
        "        if (typeof parameters.angle===\"number\") this._angle = parameters.angle;\r\n",
        "        this._parameters.animateTo = (typeof parameters.animateTo===\"number\") ? (parameters.animateTo) : (this._angle); \r\n",
        "\r\n",
        "\t\tthis._parameters.easing = parameters.easing || this._parameters.easing || function (x, t, b, c, d) { return -c * ((t=t/d-1)*t*t*t - 1) + b; }\r\n",
        "\t\tthis._parameters.duration = parameters.duration || this._parameters.duration || 1000;\r\n",
        "        this._parameters.callback = parameters.callback || this._parameters.callback || function(){};\r\n",
        "        if (parameters.bind && parameters.bind != this._parameters.bind) this._BindEvents(parameters.bind); \r\n",
        "\t},\r\n",
        "\t_handleRotation : function(parameters){\r\n",
        "          this._setupParameters(parameters);\r\n",
        "          if (this._angle==this._parameters.animateTo) {\r\n",
        "              this._rotate(this._angle);\r\n",
        "          }\r\n",
        "          else { \r\n",
        "              this._animateStart();          \r\n",
        "          }\r\n",
        "\t},\r\n",
        "\r\n",
        "\t_BindEvents:function(events){\r\n",
        "\t\tif (events && this._eventObj) \r\n",
        "\t\t{\r\n",
        "            // Unbinding previous Events\r\n",
        "            if (this._parameters.bind){\r\n",
        "                var oldEvents = this._parameters.bind;\r\n",
        "                for (var a in oldEvents) if (oldEvents.hasOwnProperty(a)) \r\n",
        "                        // TODO: Remove jQuery dependency\r\n",
        "                        jQuery(this._eventObj).unbind(a,oldEvents[a]);\r\n",
        "            }\r\n",
        "\r\n",
        "            this._parameters.bind = events;\r\n",
        "\t\t\tfor (var a in events) if (events.hasOwnProperty(a)) \r\n",
        "\t\t\t\t// TODO: Remove jQuery dependency\r\n",
        "\t\t\t\t\tjQuery(this._eventObj).bind(a,events[a]);\r\n",
        "\t\t}\r\n",
        "\t},\r\n",
        "\r\n",
        "\t_Loader:(function()\r\n",
        "\t{\r\n",
        "\t\tif (IE)\r\n",
        "\t\treturn function(parameters)\r\n",
        "\t\t{\r\n",
        "\t\t\tvar width=this._img.width;\r\n",
        "\t\t\tvar height=this._img.height;\r\n",
        "\t\t\tthis._img.parentNode.removeChild(this._img);\r\n",
        "\t\t\t\t\t\t\t\r\n",
        "\t\t\tthis._vimage = this.createVMLNode('image');\r\n",
        "\t\t\tthis._vimage.src=this._img.src;\r\n",
        "\t\t\tthis._vimage.style.height=height+\"px\";\r\n",
        "\t\t\tthis._vimage.style.width=width+\"px\";\r\n",
        "\t\t\tthis._vimage.style.position=\"absolute\"; // FIXES IE PROBLEM - its only rendered if its on absolute position!\r\n",
        "\t\t\tthis._vimage.style.top = \"0px\";\r\n",
        "\t\t\tthis._vimage.style.left = \"0px\";\r\n",
        "\r\n",
        "\t\t\t/* Group minifying a small 1px precision problem when rotating object */\r\n",
        "\t\t\tthis._container =  this.createVMLNode('group');\r\n",
        "\t\t\tthis._container.style.width=width;\r\n",
        "\t\t\tthis._container.style.height=height;\r\n",
        "\t\t\tthis._container.style.position=\"absolute\";\r\n",
        "\t\t\tthis._container.setAttribute('coordsize',width-1+','+(height-1)); // This -1, -1 trying to fix ugly problem with small displacement on IE\r\n",
        "\t\t\tthis._container.appendChild(this._vimage);\r\n",
        "\t\t\t\r\n",
        "\t\t\tthis._rootObj.appendChild(this._container);\r\n",
        "\t\t\tthis._rootObj.style.position=\"relative\"; // FIXES IE PROBLEM\r\n",
        "\t\t\tthis._rootObj.style.width=width+\"px\";\r\n",
        "\t\t\tthis._rootObj.style.height=height+\"px\";\r\n",
        "\t\t\tthis._rootObj.setAttribute('id',this._img.getAttribute('id'));\r\n",
        "\t\t\tthis._rootObj.className=this._img.className;\t\t\t\r\n",
        "\t\t    this._eventObj = this._rootObj;\t\r\n",
        "\t\t    this._handleRotation(parameters);\t\r\n",
        "\t\t}\r\n",
        "\t\telse\r\n",
        "\t\treturn function (parameters)\r\n",
        "\t\t{\r\n",
        "\t\t\tthis._rootObj.setAttribute('id',this._img.getAttribute('id'));\r\n",
        "\t\t\tthis._rootObj.className=this._img.className;\r\n",
        "\t\t\t\r\n",
        "\t\t\tthis._width=this._img.width;\r\n",
        "\t\t\tthis._height=this._img.height;\r\n",
        "\t\t\tthis._widthHalf=this._width/2; // used for optimisation\r\n",
        "\t\t\tthis._heightHalf=this._height/2;// used for optimisation\r\n",
        "\t\t\t\r\n",
        "\t\t\tvar _widthMax=Math.sqrt((this._height)*(this._height) + (this._width) * (this._width));\r\n",
        "\r\n",
        "\t\t\tthis._widthAdd = _widthMax - this._width;\r\n",
        "\t\t\tthis._heightAdd = _widthMax - this._height;\t// widthMax because maxWidth=maxHeight\r\n",
        "\t\t\tthis._widthAddHalf=this._widthAdd/2; // used for optimisation\r\n",
        "\t\t\tthis._heightAddHalf=this._heightAdd/2;// used for optimisation\r\n",
        "\t\t\t\r\n",
        "\t\t\tthis._img.parentNode.removeChild(this._img);\t\r\n",
        "\t\t\t\r\n",
        "\t\t\tthis._aspectW = ((parseInt(this._img.style.width,10)) || this._width)/this._img.width;\r\n",
        "\t\t\tthis._aspectH = ((parseInt(this._img.style.height,10)) || this._height)/this._img.height;\r\n",
        "\t\t\t\r\n",
        "\t\t\tthis._canvas=document.createElement('canvas');\r\n",
        "\t\t\tthis._canvas.setAttribute('width',this._width);\r\n",
        "\t\t\tthis._canvas.style.position=\"relative\";\r\n",
        "\t\t\tthis._canvas.style.left = -this._widthAddHalf + \"px\";\r\n",
        "\t\t\tthis._canvas.style.top = -this._heightAddHalf + \"px\";\r\n",
        "\t\t\tthis._canvas.Wilq32 = this._rootObj.Wilq32;\r\n",
        "\t\t\t\r\n",
        "\t\t\tthis._rootObj.appendChild(this._canvas);\r\n",
        "\t\t\tthis._rootObj.style.width=this._width+\"px\";\r\n",
        "\t\t\tthis._rootObj.style.height=this._height+\"px\";\r\n",
        "            this._eventObj = this._canvas;\r\n",
        "\t\t\t\r\n",
        "\t\t\tthis._cnv=this._canvas.getContext('2d');\r\n",
        "            this._handleRotation(parameters);\r\n",
        "\t\t}\r\n",
        "\t})(),\r\n",
        "\r\n",
        "\t_animateStart:function()\r\n",
        "\t{\t\r\n",
        "\t\tif (this._timer) {\r\n",
        "\t\t\tclearTimeout(this._timer);\r\n",
        "\t\t}\r\n",
        "\t\tthis._animateStartTime = +new Date;\r\n",
        "\t\tthis._animateStartAngle = this._angle;\r\n",
        "\t\tthis._animate();\r\n",
        "\t},\r\n",
        "_animate:function()\r\n",
        "     {\r\n",
        "         var actualTime = +new Date;\r\n",
        "         var checkEnd = actualTime - this._animateStartTime > this._parameters.duration;\r\n",
        "\r\n",
        "         // TODO: Bug for animatedGif for static rotation ? (to test)\r\n",
        "         if (checkEnd && !this._parameters.animatedGif) \r\n",
        "         {\r\n",
        "             clearTimeout(this._timer);\r\n",
        "         }\r\n",
        "         else \r\n",
        "         {\r\n",
        "             if (this._canvas||this._vimage||this._img) {\r\n",
        "                 var angle = this._parameters.easing(0, actualTime - this._animateStartTime, this._animateStartAngle, this._parameters.animateTo - this._animateStartAngle, this._parameters.duration);\r\n",
        "                 this._rotate((~~(angle*10))/10);\r\n",
        "             }\r\n",
        "             var self = this;\r\n",
        "             this._timer = setTimeout(function()\r\n",
        "                     {\r\n",
        "                     self._animate.call(self);\r\n",
        "                     }, 10);\r\n",
        "         }\r\n",
        "\r\n",
        "         // To fix Bug that prevents using recursive function in callback I moved this function to back\r\n",
        "         if (this._parameters.callback && checkEnd){\r\n",
        "             this._angle = this._parameters.animateTo;\r\n",
        "             this._rotate(this._angle);\r\n",
        "             this._parameters.callback.call(this._rootObj);\r\n",
        "         }\r\n",
        "     },\r\n",
        "\r\n",
        "\t_rotate : (function()\r\n",
        "\t{\r\n",
        "\t\tvar rad = Math.PI/180;\r\n",
        "\t\tif (IE)\r\n",
        "\t\treturn function(angle)\r\n",
        "\t\t{\r\n",
        "            this._angle = angle;\r\n",
        "\t\t\tthis._container.style.rotation=(angle%360)+\"deg\";\r\n",
        "\t\t}\r\n",
        "\t\telse if (supportedCSS)\r\n",
        "\t\treturn function(angle){\r\n",
        "            this._angle = angle;\r\n",
        "\t\t\tthis._img.style[supportedCSS]=\"rotate(\"+(angle%360)+\"deg)\";\r\n",
        "\t\t}\r\n",
        "\t\telse \r\n",
        "\t\treturn function(angle)\r\n",
        "\t\t{\r\n",
        "            this._angle = angle;\r\n",
        "\t\t\tangle=(angle%360)* rad;\r\n",
        "\t\t\t// clear canvas\t\r\n",
        "\t\t\tthis._canvas.width = this._width+this._widthAdd;\r\n",
        "\t\t\tthis._canvas.height = this._height+this._heightAdd;\r\n",
        "\t\t\t\t\t\t\r\n",
        "\t\t\t// REMEMBER: all drawings are read from backwards.. so first function is translate, then rotate, then translate, translate..\r\n",
        "\t\t\tthis._cnv.translate(this._widthAddHalf,this._heightAddHalf);\t// at least center image on screen\r\n",
        "\t\t\tthis._cnv.translate(this._widthHalf,this._heightHalf);\t\t\t// we move image back to its orginal \r\n",
        "\t\t\tthis._cnv.rotate(angle);\t\t\t\t\t\t\t\t\t\t// rotate image\r\n",
        "\t\t\tthis._cnv.translate(-this._widthHalf,-this._heightHalf);\t\t// move image to its center, so we can rotate around its center\r\n",
        "\t\t\tthis._cnv.scale(this._aspectW,this._aspectH); // SCALE - if needed ;)\r\n",
        "\t\t\tthis._cnv.drawImage(this._img, 0, 0);\t\t\t\t\t\t\t// First - we draw image\r\n",
        "\t\t}\r\n",
        "\r\n",
        "\t})()\r\n",
        "}\r\n",
        "\r\n",
        "if (IE)\r\n",
        "{\r\n",
        "Wilq32.PhotoEffect.prototype.createVMLNode=(function(){\r\n",
        "document.createStyleSheet().addRule(\".rvml\", \"behavior:url(#default#VML)\");\r\n",
        "\t\ttry {\r\n",
        "\t\t\t!document.namespaces.rvml && document.namespaces.add(\"rvml\", \"urn:schemas-microsoft-com:vml\");\r\n",
        "\t\t\treturn function (tagName) {\r\n",
        "\t\t\t\treturn document.createElement('<rvml:' + tagName + ' class=\"rvml\">');\r\n",
        "\t\t\t};\r\n",
        "\t\t} catch (e) {\r\n",
        "\t\t\treturn function (tagName) {\r\n",
        "\t\t\t\treturn document.createElement('<' + tagName + ' xmlns=\"urn:schemas-microsoft.com:vml\" class=\"rvml\">');\r\n",
        "\t\t\t};\r\n",
        "\t\t}\t\t\r\n",
        "})();\r\n",
        "}\r\n",
        "\r\n",
        "})(jQuery);\r\n"
       ],
       "metadata": {},
       "output_type": "display_data",
       "text": [
        "<IPython.core.display.Javascript at 0x330ed90>"
       ]
      }
     ],
     "prompt_number": 2
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "bc=BattleCruiser()"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [],
     "prompt_number": 3
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "bc.view"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [],
     "prompt_number": 4
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "bc.cmd(10,0)"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [],
     "prompt_number": 18
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "#Awesome!\n",
      "starcraft is great! everybody should own one!"
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "nbinclude('gamepad_widget')"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [
      {
       "javascript": [
        "// TODO:\n",
        "// * code cleanup\n",
        "// * support button mapping / more than one button\n",
        "// * better handling for when gamepads disconnect/reconnect at runtime\n",
        "// * refactor getting gamepads into a function\n",
        "\n",
        "require([\"widgets/js/widget\"], function(WidgetManager) {\n",
        "\n",
        "  function pollGamepads() {\n",
        "    var gamepads = navigator.getGamepads ? navigator.getGamepads() : (navigator.webkitGetGamepads ? navigator.webkitGetGamepads() : []);\n",
        "    for (var i = 0; i < gamepads.length; i++) {\n",
        "      var gp = gamepads[i];\n",
        "      if(gp) {\n",
        "        registerGamepad(i);\n",
        "        clearInterval(interval);\n",
        "        setInterval(pollButtons, 50);\n",
        "        setInterval(pollAxes, 50);\n",
        "      }\n",
        "    }\n",
        "  }\n",
        "\n",
        "  var gamepad;\n",
        "  function registerGamepad(i) {\n",
        "    gamepad = i;\n",
        "  }\n",
        "\n",
        "  var button_cache = {};\n",
        "  function pollButtons() {\n",
        "    var gamepads = navigator.getGamepads ? navigator.getGamepads() : (navigator.webkitGetGamepads ? navigator.webkitGetGamepads() : []);\n",
        "    var pad = gamepads[gamepad];\n",
        "    var i;\n",
        "    for (i = 0; i < pad.buttons.length; ++i) {\n",
        "      var value = pad.buttons[i];\n",
        "\n",
        "      if (button_cache[i] !== value) {\n",
        "        notifyButton(i, value);\n",
        "      }\n",
        "      button_cache[i] = value;\n",
        "    }\n",
        "  }\n",
        "\n",
        "  var button_notifiers = {};\n",
        "  function notifyButton(i, value) {\n",
        "    if (button_notifiers[i] !== undefined) {\n",
        "      for (var j in button_notifiers[i]) {\n",
        "        button_notifiers[i][j](value);\n",
        "      }\n",
        "    }\n",
        "  }\n",
        "\n",
        "  function onButton(i, callback) {\n",
        "    if (button_notifiers[i] == undefined) {\n",
        "      button_notifiers[i] = []\n",
        "    }\n",
        "    button_notifiers[i].push(callback);\n",
        "  }\n",
        "\n",
        "  var axes_cache = {};\n",
        "  function pollAxes() {\n",
        "    var gamepads = navigator.getGamepads ? navigator.getGamepads() : (navigator.webkitGetGamepads ? navigator.webkitGetGamepads() : []);\n",
        "    var pad = gamepads[gamepad];\n",
        "    var i;\n",
        "    for (i = 0; i < pad.axes.length; ++i) {\n",
        "      var value = pad.axes[i];\n",
        "\n",
        "      if (axes_cache[i] !== value) {\n",
        "        notifyAnalog(i, value);\n",
        "      }\n",
        "      axes_cache[i] = value;\n",
        "    }\n",
        "  }\n",
        "\n",
        "  var axes_notifiers = {};\n",
        "  function notifyAnalog(i, value) {\n",
        "    if (axes_notifiers[i] !== undefined) {\n",
        "      for (var j in axes_notifiers[i]) {\n",
        "        axes_notifiers[i][j](value);\n",
        "      }\n",
        "    }\n",
        "  }\n",
        "\n",
        "  function onAnalogMove(i, callback) {\n",
        "    if (axes_notifiers[i] == undefined) {\n",
        "      axes_notifiers[i] = []\n",
        "    }\n",
        "    axes_notifiers[i].push(callback);\n",
        "  }\n",
        "\n",
        "  // Assume gamepad events are not available. Use polling\n",
        "  var interval = setInterval(pollGamepads, 500);\n",
        "\n",
        "  /////// begin IPython stuff\n",
        "  var JoystickBoolView = IPython.DOMWidgetView.extend({\n",
        "    render : function(){\n",
        "      // Called when view is rendered.\n",
        "\n",
        "      // This is a single-line horizontal widget\n",
        "      this.$el\n",
        "        .addClass('widget-hbox-single');\n",
        "\n",
        "      // Add a label div, which will contain the description\n",
        "      this.$label = $('<div />')\n",
        "        .addClass('widget-hlabel')\n",
        "        .appendTo(this.$el)\n",
        "        .hide();\n",
        "\n",
        "      // Add a checkbox representing the state\n",
        "      this.$checkbox = $('<input />')\n",
        "        .attr('type', 'checkbox')\n",
        "        .prop('disabled', true)\n",
        "        .appendTo(this.$el);\n",
        "\n",
        "      // Register an event handler with the joystick - TODO\n",
        "      onButton(this.model.get('button_id'), $.proxy(this.handle_value, this));\n",
        "      //onButton(1, $.proxy(this.handle_value, this));\n",
        "      //register_handler($.proxy(this.handle_value, this));\n",
        "      //console.log(this.model.get('button_id'));\n",
        "\n",
        "      this.$el_to_style = this.$checkbox; // Set default element to style\n",
        "      this.update(); // Set defaults.\n",
        "    },\n",
        "\n",
        "    handle_value: function(new_value) {\n",
        "      // Handles when the checkbox is clicked.\n",
        "\n",
        "      // Calling model.set will trigger all of the other views of the\n",
        "      // model to update.\n",
        "      this.model.set('value', !!new_value, {updated_view: this});\n",
        "      this.touch();\n",
        "    },\n",
        "\n",
        "    update : function(options){\n",
        "      // Update the contents of this view\n",
        "      //\n",
        "      // Called when the model is changed. The model may have been\n",
        "      // changed by another view or by a state update from the back-end.\n",
        "      this.$checkbox.prop('checked', this.model.get('value'));\n",
        "\n",
        "\n",
        "      if (options === undefined || options.updated_view != this) {\n",
        "        var disabled = this.model.get('disabled');\n",
        "        if (disabled) {\n",
        "          // Remove the gamepad event\n",
        "        } else {\n",
        "          // Re-introduce the gamepad event\n",
        "        }\n",
        "\n",
        "        var description = this.model.get('description');\n",
        "        if (description.trim().length === 0) {\n",
        "          this.$label.hide();\n",
        "        } else {\n",
        "          this.$label.text(description);\n",
        "          MathJax.Hub.Queue([\"Typeset\",MathJax.Hub,this.$label.get(0)]);\n",
        "          this.$label.show();\n",
        "        }\n",
        "      }\n",
        "      return JoystickBoolView.__super__.update.apply(this);\n",
        "    },\n",
        "  });\n",
        "  WidgetManager.register_widget_view('JoystickBoolView', JoystickBoolView);\n",
        "\n",
        "  var JoystickFloatView = IPython.DOMWidgetView.extend({\n",
        "    render : function(){\n",
        "      // Called when view is rendered.\n",
        "\n",
        "      // This is a single-line horizontal widget\n",
        "      this.$el\n",
        "        .addClass('widget-hbox-single');\n",
        "\n",
        "      // Add a label div, which will contain the description\n",
        "      this.$label = $('<div />')\n",
        "        .addClass('widget-hlabel')\n",
        "        .appendTo(this.$el)\n",
        "        .hide();\n",
        "\n",
        "      this.$value = $('<div />')\n",
        "        .addClass('widget-hlabel')\n",
        "        .appendTo(this.$el);\n",
        "\n",
        "      // Register an event handler with the joystick - TODO\n",
        "      onAnalogMove(this.model.get('axis_id'), $.proxy(this.handle_value, this));\n",
        "      //onButton(1, $.proxy(this.handle_value, this));\n",
        "      //register_handler($.proxy(this.handle_value, this));\n",
        "      //console.log(this.model.get('button_id'));\n",
        "\n",
        "      // this.$el_to_style = this.$checkbox; // Set default element to style\n",
        "      this.update(); // Set defaults.\n",
        "    },\n",
        "\n",
        "    handle_value: function(new_value) {\n",
        "      // Handles when the checkbox is clicked.\n",
        "\n",
        "      // Calling model.set will trigger all of the other views of the\n",
        "      // model to update.\n",
        "      this.model.set('value', new_value, {updated_view: this});\n",
        "      this.touch();\n",
        "    },\n",
        "\n",
        "    update : function(options){\n",
        "\n",
        "      this.$value.text(this.model.get('value'));\n",
        "\n",
        "\n",
        "      console.log(\"value=\" + this.model.get('value'));\n",
        "\n",
        "      // Update the contents of this view\n",
        "      //\n",
        "      // Called when the model is changed. The model may have been\n",
        "      // changed by another view or by a state update from the back-end.\n",
        "      // this.$checkbox.prop('checked', this.model.get('value'));\n",
        "\n",
        "      if (options === undefined || options.updated_view != this) {\n",
        "        // var disabled = this.model.get('disabled');\n",
        "        // if (disabled) {\n",
        "        //   // Remove the gamepad event\n",
        "        // } else {\n",
        "        //   // Re-introduce the gamepad event\n",
        "        // }\n",
        "\n",
        "        var description = this.model.get('description');\n",
        "        if (description.trim().length === 0) {\n",
        "          this.$label.hide();\n",
        "        } else {\n",
        "          this.$label.text(description);\n",
        "          MathJax.Hub.Queue([\"Typeset\",MathJax.Hub,this.$label.get(0)]);\n",
        "          this.$label.show();\n",
        "        }\n",
        "      }\n",
        "      return JoystickFloatView.__super__.update.apply(this);\n",
        "    },\n",
        "  });\n",
        "\n",
        "  \n",
        "  WidgetManager.register_widget_view('JoystickFloatView', JoystickFloatView);\n",
        "});\n"
       ],
       "metadata": {},
       "output_type": "display_data",
       "text": [
        "<IPython.core.display.Javascript at 0x3e3d290>"
       ]
      }
     ],
     "prompt_number": 81
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "widgets.interact(drive,\n",
      "                 x=JoystickFloatWidget(axis_id=1),\n",
      "                 z=JoystickFloatWidget(axis_id=2))"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [
      {
       "metadata": {},
       "output_type": "pyout",
       "prompt_number": 82,
       "text": [
        "<function __main__.drive>"
       ]
      }
     ],
     "prompt_number": 82
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "widgets.interact(drive,\n",
      "                 x=4,\n",
      "                 z=1)"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [],
     "prompt_number": 84
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "def drive(x,z):\n",
      "    bc.cmd(x,z)"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [],
     "prompt_number": 83
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [],
     "language": "python",
     "metadata": {},
     "outputs": []
    }
   ],
   "metadata": {}
  }
 ]
}