mathquill_widget_proto.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Created Widget to use MathQuill expression box with Jupyter Notebook"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 533,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "from __future__ import print_function # For python 2.7 compatibility"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 534,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "from IPython.display import HTML,display"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## the MathQuill api code implimentation"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 535,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "input_form = \"\"\"\n",
    "<link rel=\"stylesheet\" href=\"http://mathquill.com/mathquill/mathquill.css\"/>\n",
    "<script src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js\"></script>\n",
    "<script src=\"http://mathquill.com/mathquill/mathquill.js\"></script>\n",
    "\n",
    "<p>Type math here: <span id=\"math-field\"></span></p>\n",
    "<p>LaTeX of what you typed: <span id=\"latex\"></span></p>\n",
    "\"\"\"\n",
    "\n",
    "javascript = \"\"\"\n",
    "<script>\n",
    "var mathFieldSpan = document.getElementById('math-field');\n",
    "var latexSpan = document.getElementById('latex');\n",
    "\n",
    "var MQ = MathQuill.getInterface(2); // for backcompat\n",
    "var mathField = MQ.MathField(mathFieldSpan, {\n",
    "  spaceBehavesLikeTab: true, // configurable\n",
    "  handlers: {\n",
    "    edit: function() { // useful event handlers\n",
    "      latexSpan.textContent = mathField.latex(); // simple API\n",
    "    }\n",
    "  }\n",
    "});\n",
    "</script>\n",
    "\"\"\"\n",
    "#HTML(input_form + javascript) #This renders the html & javascript directly, not with widget\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 536,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "from IPython.html import widgets\n",
    "from traitlets import Unicode"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## This is the back-end widget using Python"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "string containing the above html and Javascript code is sent from the back-end to front-end"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 537,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "name": "stderr",
     "output_type": "stream",
     "text": [
      "/home/aman/.local/lib/python2.7/site-packages/ipykernel/__main__.py:2: DeprecationWarning: metadata {'sync': True} was set from the constructor.  Metadata should be set using the .tag() method, e.g., Int().tag(key1='value1', key2='value2')\n",
      "  from ipykernel import kernelapp as app\n",
      "/home/aman/.local/lib/python2.7/site-packages/ipykernel/__main__.py:3: DeprecationWarning: metadata {'sync': True} was set from the constructor.  Metadata should be set using the .tag() method, e.g., Int().tag(key1='value1', key2='value2')\n",
      "  app.launch_new_instance()\n"
     ]
    }
   ],
   "source": [
    "class MyWidget(widgets.DOMWidget):\n",
    "    _view_name = Unicode('MyView', sync=True)\n",
    "    value = Unicode(input_form+javascript, sync=True)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## This is the front-end widget using backbone.js, a javascript mvc framework"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Note: backbone.js has dependency with jQuery and Underscore.js"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 538,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "require([\"widgets/js/widget\", \"widgets/js/manager\"], function(widget, manager){\n",
       "    \n",
       "    var MyView = widget.DOMWidgetView.extend({\n",
       "        \n",
       "        render: function(){ \n",
       "            this.$el.html(this.model.get('value')); \n",
       "        },\n",
       "    });\n",
       "    \n",
       "    manager.WidgetManager.register_widget_view('MyView', MyView);\n",
       "});"
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%javascript\n",
    "require([\"widgets/js/widget\", \"widgets/js/manager\"], function(widget, manager){\n",
    "    \n",
    "    var MyView = widget.DOMWidgetView.extend({\n",
    "        \n",
    "        render: function(){ \n",
    "            this.$el.html(this.model.get('value')); \n",
    "        },\n",
    "    });\n",
    "    \n",
    "    manager.WidgetManager.register_widget_view('MyView', MyView);\n",
    "});"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 539,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "mathquill=(MyWidget())\n",
    "mathquill"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 2",
   "language": "python",
   "name": "python2"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 2
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython2",
   "version": "2.7.11"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 0
}