Test with IPython widgets and mouse/keyboard interactions.

widget.ipynb

{
 "metadata": {
  "cell_tags": [
   [
    "<None>",
    null
   ]
  ],
  "name": "",
  "signature": "sha256:2151c0c39c1bd1428b13eb12b7468e173d98a14bf1f43050e2fdafe01b7b05d8"
 },
 "nbformat": 3,
 "nbformat_minor": 0,
 "worksheets": [
  {
   "cells": [
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "from __future__ import print_function # For py 2.7 compat\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": []
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "class TestWidget(widgets.DOMWidget):\n",
      "    _view_name = Unicode('TestView', sync=True)\n",
      "    \n",
      "    def __init__(self, **kwargs):\n",
      "        super(TestWidget, self).__init__(**kwargs)\n",
      "        self.on_msg(self._handle_button_msg)\n",
      "\n",
      "    def _handle_button_msg(self, _, content):\n",
      "        if content.get('event', '') == 'click':\n",
      "            self.on_click(content)\n",
      "        elif content.get('event', '') == 'keypress':\n",
      "            self.on_key_press(content)\n",
      "\n",
      "    def on_click(self, content):\n",
      "        print(\"Button {b}\".format(b=content['button']))\n",
      "\n",
      "    def on_key_press(self, content):\n",
      "        print(\"Key {c}\".format(c=content['code']))"
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "%%javascript\n",
      "require([\"widgets/js/widget\"], function(WidgetManager){\n",
      "    \n",
      "    var TestView = IPython.DOMWidgetView.extend({\n",
      "        render: function(){\n",
      "            \n",
      "            this.$canvas = $('<canvas />')\n",
      "                .attr('width', '200')\n",
      "                .attr('height', '100')\n",
      "                .attr('style', 'background: black;')\n",
      "                .attr('tabindex', '1')\n",
      "                .appendTo(this.$el);\n",
      "        },\n",
      "        \n",
      "        events: {\n",
      "            'keydown': 'keypress',\n",
      "            'click': 'click',\n",
      "        },\n",
      "\n",
      "        keypress: function(e) {\n",
      "            var code = e.keyCode || e.which;\n",
      "            this.send({event: 'keypress', code: code});\n",
      "        },\n",
      "\n",
      "        click: function(e) {\n",
      "            this.send({event: 'click', button: e.button});\n",
      "        }\n",
      "    });\n",
      "    \n",
      "    WidgetManager.register_widget_view('TestView', TestView);\n",
      "});"
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "my_widget = TestWidget()\n",
      "display(my_widget)"
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [],
     "language": "python",
     "metadata": {},
     "outputs": []
    }
   ],
   "metadata": {}
  }
 ]
}