{
 "metadata": {
  "name": "",
  "signature": "sha256:eb1f5373c974858e440a83e9820ae8d9285da32863d428907f636d91a7d42d7a"
 },
 "nbformat": 3,
 "nbformat_minor": 0,
 "worksheets": [
  {
   "cells": [
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "from __future__ import print_function # For py 2.7 compat\n",
      "\n",
      "from IPython.html import widgets # Widget definitions\n",
      "from IPython.display import display # Used to display widgets in the notebook\n",
      "from IPython.utils.traitlets import Unicode # Used to declare attributes of our widget"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [],
     "prompt_number": 1
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [],
     "language": "python",
     "metadata": {},
     "outputs": [],
     "prompt_number": 1
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "from IPython.display import HTML, Javascript"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [],
     "prompt_number": 2
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "from IPython.html.widgets.widget_bool import _BoolWidget\n",
      "from IPython.html.widgets.widget_float import _FloatWidget\n",
      "from IPython.utils.traitlets import CInt, CFloat, Unicode\n",
      "from IPython.html.widgets.widget import DOMWidget"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [],
     "prompt_number": 3
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "with open(\"static/gamepad.js\") as f:\n",
      "    display(Javascript(f.read()))"
     ],
     "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 0x38b3210>"
       ]
      }
     ],
     "prompt_number": 4
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "class JoystickBoolWidget(_BoolWidget):\n",
      "    _view_name = Unicode('JoystickBoolView', sync=True)\n",
      "    button_id = CInt(0, help='button_id', sync=True)"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [],
     "prompt_number": 5
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "class JoystickFloatWidget(DOMWidget):\n",
      "    _view_name = Unicode('JoystickFloatView', sync=True)\n",
      "    value = CFloat(0.0, help=\"Float value\", sync=True) \n",
      "    axis_id = CInt(0, help='axis_id', sync=True)\n",
      "    description = Unicode('', help=\"Description of the float (label).\", sync=True)"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [],
     "prompt_number": 6
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "#NBINCLUDE_STOP"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [],
     "prompt_number": 7
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "def bar(**kwargs):\n",
      "    print(kwargs)"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [],
     "prompt_number": 8
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "widgets.interact(bar,\n",
      "                x=JoystickBoolWidget(description=\"x\", button_id=1),\n",
      "                a=JoystickBoolWidget(description=\"a\", button_id=0),\n",
      "                axis1=JoystickFloatWidget(description=\"axis 1\", axis_id=1),\n",
      "                axis3=JoystickFloatWidget(description=\"axis 3\", axis_id=3),\n",
      "                 )"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [
      {
       "output_type": "stream",
       "stream": "stdout",
       "text": [
        "{u'a': False, u'x': False, u'axis 1': 0.0, u'axis 3': 0.0}\n"
       ]
      },
      {
       "metadata": {},
       "output_type": "pyout",
       "prompt_number": 14,
       "text": [
        "<function __main__.bar>"
       ]
      }
     ],
     "prompt_number": 14
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "axis1=JoystickFloatWidget(description=\"axis 1\", axis_id=1)"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [],
     "prompt_number": 9
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "axis1"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [],
     "prompt_number": 11
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "x=JoystickBoolWidget(description=\"x\", button_id=1)"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [],
     "prompt_number": 17
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "x"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [],
     "prompt_number": 18
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "axis1"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [],
     "prompt_number": 20
    }
   ],
   "metadata": {}
  }
 ]
}