from __future__ import print_function # For python 2.7 compatibility
from IPython.display import HTML,display
input_form = """
<link rel="stylesheet" href="http://mathquill.com/mathquill/mathquill.css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!--<script src="mathquill.js"></script>-->
<script src="https://gist.githubusercontent.com/hiamandeep/c8a5b2d2586691dee62e/raw/a27cf5888024f1c8aff1dcac62c39c534e44340c/mathquill_custom.js"></script>
<p>Type math here: <span id="math-field"></span></p>
<p>LaTeX of what you typed: <span id="latex"></span></p>
<div class="demo">
<br> <br>
<input id = "btnSqr" type="submit" value="square"/>
<input id = "btnSqrt" type="submit" value="sqrt"/>
<input id = "btnPow" type="submit" value="power"/>
<input id = "btnInt" type="submit" value="Integration"/>
<br><br>
<input id = "btnDefInt" type="submit" value="Definite Integration"/>
<input id = "btnDiff" type="submit" value="Differentiation"/>
<input id = "btnLim" type="submit" value="Lim"/>
<input id = "btnClr" type="submit" value="clear"/>
<br> <br>
<input id = "btnInf" type="submit" value="oo"/>
<input id = "e" type="submit" value="e"/>
<input id = "btnPi" type="submit" value="pi"/>
<input id = "x" type="submit" value="x"/>
<input id = "y" type="submit" value="y"/>
<input id = "y" type="submit" value="z"/>
<input id = "btnSin" type="submit" value="Sin"/>
<input id = "btnCos" type="submit" value="Cos"/>
<input id = "btnTan" type="submit" value="Tan"/>
<br> <br><br>
</div>
<input type="button" value="1" id="1" style="width:50px; height:50px; float:left;"/>
<input type="button" value="2" id="2" style="width:50px; height:50px; float:left;"/>
<input type="button" value="3" id="3" style="width:50px; height:50px; float:left;"/>
<input type="button" value="+" id="plus" style="width:50px; height:50px; float:left;"/>
<br><br><br>
<input type="button" value="4" id="4" style="width:50px; height:50px; float:left;"/>
<input type="button" value="5" id="5" style="width:50px; height:50px; float:left;"/>
<input type="button" value="6" id="6" style="width:50px; height:50px; float:left;"/>
<input type="button" value="-" id="sub" style="width:50px; height:50px; float:left;"/>
<br><br><br>
<input type="button" value="7" id="7" style="width:50px; height:50px; float:left;"/>
<input type="button" value="8" id="8" style="width:50px; height:50px; float:left;"/>
<input type="button" value="9" id="9" style="width:50px; height:50px; float:left;"/>
<input type="button" value="/" id="divi" style="width:50px; height:50px; float:left;"/>
<br><br><br>
<input type="button" value="0" id="0" style="width:50px; height:50px; float:left;"/>
<input type="button" value="." id="dot" style="width:50px; height:50px; float:left;"/>
<input type="button" value="(" id="lbrac" style="width:50px; height:50px; float:left;"/>
<input type="button" value=")" id="rbrac" style="width:50px; height:50px; float:left;"/>
<br><br><br>
<button style="width:150px; float:left;" onclick="set_value()">Set Value</button>
"""
javascript = r"""
<script>
var mathFieldSpan = document.getElementById('math-field');
var latexSpan = document.getElementById('latex');
var MQ = MathQuill.getInterface(2); // for backcompat
var mathField = MQ.MathField(mathFieldSpan, {
spaceBehavesLikeTab: true, // configurable
restrictMismatchedBrackets: true,
handlers: {
edit: function() { // useful event handlers
latexSpan.textContent = mathField.latex(); // simple API
}
}
});
$(document).ready(function() {
$("#btnSqrt").click(function(){
mathField.cmd('\\sqrt')
mathField.focus()
});
$("#btnSqr").click(function(){
mathField.write('\\^2')
mathField.focus()
});
$("#btnPow").click(function(){
mathField.write('\\^{}')
mathField.keystroke('Up') //move the cursor up to fill the power
mathField.focus()
});
$("#btnClr").click(function(){
mathField.keystroke('Backspace')
mathField.focus()
});
$("#btnInt").click(function(){
mathField.cmd('\\int')
mathField.focus()
});
$("#btnDefInt").click(function(){
mathField.write('\\int_{}^{}')
mathField.focus()
});
$("#btnDiff").click(function(){
mathField.write('\\frac{d}{dx}')
mathField.focus()
});
$("#btnLim").click(function(){
mathField.write('\\lim_{x\\to\\infty} ')
mathField.focus()
});
$("#btnInf").click(function(){
mathField.cmd('\\infty')
mathField.focus()
});
$("#btnPi").click(function(){
mathField.cmd('\\pi')
mathField.focus()
});
$("#btnSin").click(function(){
mathField.cmd('\\sin')
mathField.focus()
});
$("#btnCos").click(function(){
mathField.cmd('\\cos')
mathField.focus()
});
$("#btnTan").click(function(){
mathField.cmd("\\tan")
mathField.focus()
});
$("#divi").click(function(){
mathField.cmd('/')
mathField.focus()
});
$('#1,#2,#3,#4,#5,#6,#7,#8,#9,#0,#e,#x,#y,#z,#plus,#sub,#dot,#lbrac,#rbrac').click(function(){
var v = $(this).val();
mathField.write(v)
mathField.focus()
});
});
function set_value(){
var var_name = 'mylatex'
var var_value = latexSpan.innerHTML;
newv = var_value.replace(/\\/g, "\\\\"); //replace single backslash with double
var command = var_name + " = '" + newv + "'";
console.log("Executing Command: " + command); //for debugging purpose
var kernel = IPython.notebook.kernel;
kernel.execute(command);
}
</script>
"""
#HTML(input_form + javascript) #This renders the html & javascript directly, not with widget
from IPython.html import widgets
from traitlets import Unicode
string containing the above html and Javascript code is sent from the back-end to front-end
class MyWidget(widgets.DOMWidget):
_view_name = Unicode('MyView').tag (sync=True)
value = Unicode(input_form+javascript).tag (sync=True)
#_view_name = Unicode('MyView').tag (sync=True)
Note: backbone.js has dependency with jQuery and Underscore.js
%%javascript
require(["widgets/js/widget", "widgets/js/manager"], function(widget, manager){
var MyView = widget.DOMWidgetView.extend({
render: function(){
this.$el.html(this.model.get('value'));
},
});
manager.WidgetManager.register_widget_view('MyView', MyView);
});
mathquill=(MyWidget())
mathquill
print(mylatex) #This prints the latex grabbed from MathQuill input box
from process_latex import process_sympy
process_sympy(mylatex) #This latex2sympy function takes a latex string and converts to sympy