new_proto.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Created Widget to use MathQuill expression box with Jupyter Notebook"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "from __future__ import print_function # For python 2.7 compatibility"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "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": null,
   "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=\"mathquill.js\"></script>-->\n",
    "<script src=\"https://gist.githubusercontent.com/hiamandeep/c8a5b2d2586691dee62e/raw/a27cf5888024f1c8aff1dcac62c39c534e44340c/mathquill_custom.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",
    "<div class=\"demo\">\n",
    "<br> <br> \n",
    "<input id = \"btnSqr\" type=\"submit\" value=\"square\"/>\n",
    "<input id = \"btnSqrt\" type=\"submit\" value=\"sqrt\"/>\n",
    "<input id = \"btnPow\" type=\"submit\" value=\"power\"/>\n",
    "<input id = \"btnInt\" type=\"submit\" value=\"Integration\"/>\n",
    "<br><br>\n",
    "<input id = \"btnDefInt\" type=\"submit\" value=\"Definite Integration\"/>\n",
    "<input id = \"btnDiff\" type=\"submit\" value=\"Differentiation\"/>\n",
    "<input id = \"btnLim\" type=\"submit\" value=\"Lim\"/>\n",
    "<input id = \"btnClr\" type=\"submit\" value=\"clear\"/>\n",
    "<br> <br> \n",
    "<input id = \"btnInf\" type=\"submit\" value=\"oo\"/>\n",
    "<input id = \"e\" type=\"submit\" value=\"e\"/>\n",
    "<input id = \"btnPi\" type=\"submit\" value=\"pi\"/>\n",
    "<input id = \"x\" type=\"submit\" value=\"x\"/>\n",
    "<input id = \"y\" type=\"submit\" value=\"y\"/>\n",
    "<input id = \"y\" type=\"submit\" value=\"z\"/>\n",
    "<input id = \"btnSin\" type=\"submit\" value=\"Sin\"/>\n",
    "<input id = \"btnCos\" type=\"submit\" value=\"Cos\"/>\n",
    "<input id = \"btnTan\" type=\"submit\" value=\"Tan\"/>\n",
    "\n",
    "<br> <br><br> \n",
    "</div>\n",
    "<input type=\"button\" value=\"1\" id=\"1\" style=\"width:50px; height:50px; float:left;\"/>\n",
    "<input type=\"button\" value=\"2\" id=\"2\" style=\"width:50px; height:50px; float:left;\"/>\n",
    "<input type=\"button\" value=\"3\" id=\"3\" style=\"width:50px; height:50px; float:left;\"/>\n",
    "<input type=\"button\" value=\"+\" id=\"plus\" style=\"width:50px; height:50px; float:left;\"/>\n",
    "<br><br><br>\n",
    "<input type=\"button\" value=\"4\" id=\"4\" style=\"width:50px; height:50px; float:left;\"/>\n",
    "<input type=\"button\" value=\"5\" id=\"5\" style=\"width:50px; height:50px; float:left;\"/>\n",
    "<input type=\"button\" value=\"6\" id=\"6\" style=\"width:50px; height:50px; float:left;\"/>\n",
    "<input type=\"button\" value=\"-\" id=\"sub\" style=\"width:50px; height:50px; float:left;\"/>\n",
    "<br><br><br>\n",
    "<input type=\"button\" value=\"7\" id=\"7\" style=\"width:50px; height:50px; float:left;\"/>\n",
    "<input type=\"button\" value=\"8\" id=\"8\" style=\"width:50px; height:50px; float:left;\"/>\n",
    "<input type=\"button\" value=\"9\" id=\"9\" style=\"width:50px; height:50px; float:left;\"/>\n",
    "<input type=\"button\" value=\"/\" id=\"divi\" style=\"width:50px; height:50px; float:left;\"/>\n",
    "<br><br><br>\n",
    "<input type=\"button\" value=\"0\" id=\"0\" style=\"width:50px; height:50px; float:left;\"/>\n",
    "<input type=\"button\" value=\".\" id=\"dot\" style=\"width:50px; height:50px; float:left;\"/>\n",
    "<input type=\"button\" value=\"(\" id=\"lbrac\" style=\"width:50px; height:50px; float:left;\"/>\n",
    "<input type=\"button\" value=\")\" id=\"rbrac\" style=\"width:50px; height:50px; float:left;\"/>\n",
    "<br><br><br>\n",
    "<button style=\"width:150px;  float:left;\" onclick=\"set_value()\">Set Value</button>\n",
    "\n",
    "\"\"\"\n",
    "\n",
    "javascript = r\"\"\"  \n",
    "\n",
    "<script>\n",
    "\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",
    "  restrictMismatchedBrackets: true,\n",
    "  handlers: {\n",
    "    edit: function() { // useful event handlers\n",
    "      latexSpan.textContent = mathField.latex(); // simple API\n",
    "      \n",
    "\n",
    "    }\n",
    "  }\n",
    "});\n",
    "\n",
    "$(document).ready(function() {\n",
    "    $(\"#btnSqrt\").click(function(){\n",
    "        mathField.cmd('\\\\sqrt')\n",
    "        mathField.focus()\n",
    "    }); \n",
    "    $(\"#btnSqr\").click(function(){\n",
    "        mathField.write('\\\\^2')\n",
    "        mathField.focus()\n",
    "    }); \n",
    "     $(\"#btnPow\").click(function(){\n",
    "        mathField.write('\\\\^{}')\n",
    "        mathField.keystroke('Up') //move the cursor up to fill the power\n",
    "        mathField.focus()\n",
    "    });\n",
    "        $(\"#btnClr\").click(function(){\n",
    "        mathField.keystroke('Backspace') \n",
    "        mathField.focus()\n",
    "    }); \n",
    "    $(\"#btnInt\").click(function(){\n",
    "        mathField.cmd('\\\\int')\n",
    "        mathField.focus()\n",
    "    });\n",
    "\n",
    "    $(\"#btnDefInt\").click(function(){\n",
    "        mathField.write('\\\\int_{}^{}')\n",
    "        mathField.focus()\n",
    "    }); \n",
    "    $(\"#btnDiff\").click(function(){\n",
    "        mathField.write('\\\\frac{d}{dx}')\n",
    "        mathField.focus()\n",
    "    });\n",
    "    $(\"#btnLim\").click(function(){\n",
    "        mathField.write('\\\\lim_{x\\\\to\\\\infty} ')\n",
    "        mathField.focus()\n",
    "    });\n",
    "    $(\"#btnInf\").click(function(){\n",
    "        mathField.cmd('\\\\infty')\n",
    "        mathField.focus()\n",
    "        \n",
    "    });\n",
    "    $(\"#btnPi\").click(function(){\n",
    "        mathField.cmd('\\\\pi')\n",
    "        mathField.focus()\n",
    "        \n",
    "    });\n",
    "\n",
    "    $(\"#btnSin\").click(function(){\n",
    "        mathField.cmd('\\\\sin')\n",
    "        mathField.focus()\n",
    "        \n",
    "    });\n",
    "\n",
    "    $(\"#btnCos\").click(function(){\n",
    "        mathField.cmd('\\\\cos')\n",
    "        mathField.focus()\n",
    "        \n",
    "    });\n",
    "\n",
    "    $(\"#btnTan\").click(function(){\n",
    "        mathField.cmd(\"\\\\tan\")\n",
    "        mathField.focus()\n",
    "        \n",
    "    });\n",
    "\n",
    " \n",
    "\n",
    "        $(\"#divi\").click(function(){\n",
    "        mathField.cmd('/')\n",
    "        mathField.focus()\n",
    "        \n",
    "    });\n",
    "    \n",
    "\n",
    "\n",
    "    $('#1,#2,#3,#4,#5,#6,#7,#8,#9,#0,#e,#x,#y,#z,#plus,#sub,#dot,#lbrac,#rbrac').click(function(){\n",
    "        var v = $(this).val();\n",
    "        mathField.write(v)\n",
    "        mathField.focus()\n",
    "    });\n",
    "\n",
    "\n",
    "\n",
    "});\n",
    "\n",
    "function set_value(){\n",
    "        var var_name = 'mylatex'\n",
    "        var var_value = latexSpan.innerHTML;\n",
    "        var command = var_name + \" = '\" + var_value + \"'\";\n",
    "        console.log(\"Executing Command: \" + command);\n",
    "        \n",
    "        var kernel = IPython.notebook.kernel;\n",
    "        kernel.execute(command);\n",
    "    }\n",
    "</script>\n",
    "\"\"\"\n",
    "#HTML(input_form + javascript) #This renders the html & javascript directly, not with widget\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false
   },
   "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": null,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "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": null,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "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": null,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "mathquill=(MyWidget())\n",
    "mathquill"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "print(mylatex) #This prints the latex grabbed from latexspan"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "from process_latex import process_sympy "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "process_sympy(mylatex) #This latex2sympy function takes a latex string and converts to sympy"
   ]
  }
 ],
 "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.10"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 0
}