Created
March 25, 2016 16:14
-
-
Save hiamandeep/cedbdd62bc03b5f89c7c to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "cells": [ | |
| { | |
| "cell_type": "markdown", | |
| "metadata": {}, | |
| "source": [ | |
| "## Using MathQuill inside Jupyter Notebook" | |
| ] | |
| }, | |
| { | |
| "cell_type": "markdown", | |
| "metadata": {}, | |
| "source": [ | |
| "The Html & Javascript code below uses mathquill api to produce an input box along with buttons to enter mathematical expression whose corresponding latex expression is shown. " | |
| ] | |
| }, | |
| { | |
| "cell_type": "code", | |
| "execution_count": null, | |
| "metadata": { | |
| "collapsed": false, | |
| "scrolled": true | |
| }, | |
| "outputs": [], | |
| "source": [ | |
| "from IPython.display import HTML,display\n", | |
| "\n", | |
| "\n", | |
| "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", | |
| " newv = var_value.replace(/\\\\/g, \"\\\\\\\\\"); //replace single backslash with double\n", | |
| " var command = var_name + \" = '\" + newv + \"'\";\n", | |
| " console.log(\"Executing Command: \" + command); //for debugging purpose\n", | |
| " \n", | |
| " var kernel = IPython.notebook.kernel;\n", | |
| " kernel.execute(command);\n", | |
| " }\n", | |
| "</script>\n", | |
| "\"\"\"\n", | |
| "\n", | |
| "HTML(input_form + javascript)" | |
| ] | |
| } | |
| ], | |
| "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 | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment