MathJax flickering and statusbar showing in PyQt5

user_7147508 0
Viewed 142

for a school project, we were supposed to make a simple calculator. The project's goal was to teach github, teamwork, testing, documentation, and all that jazz. It is not really about the calculator. However, my team and I decided to take it a step further and we wanted to create a calculator that displays mathematical expressions in real time.

I managed to find a way: using PyQt5 and its QWebEngineView, I was able to display a simple webpage, and, using javascript, I was able to display an equation in real time using MathJax. However, there are some problems:

Upon entering any number, first, a statusbar appears (for a split second) on the lower part of the display like this:

enter image description here

Bu that is not all - before the final number appears, first, a raw latex code is shown for a fraction of a second, then a HTMLPreview version of the fraction, and only after all this does the final render appear.

This is the python x javascript part:

from PyQt5.QtWidgets import *
from PyQt5 import QtCore, QtGui, QtWidgets
from PyQt5.QtGui import QFont
import sys
import time
from PyQt5.QtWidgets import QApplication
from PyQt5.QtWebEngineWidgets import QWebEngineView

class Ui_s_cals(object):
    def __init__(self):
        self.content=["10","+","10"]

    def setupUi(self, s_cals):
        s_cals.setObjectName("s_cals")
        s_cals.resize(300, 500)
        s_cals.setWindowTitle("Calculator")

        self.display = QWebEngineView(s_cals)
        self.display.setGeometry(QtCore.QRect(20, 10, 300, 60))
        self.pushButton_n0 = QtWidgets.QPushButton(s_cals)
        self.pushButton_n0.setGeometry(QtCore.QRect(80, 400, 61, 61))
        self.pushButton_n0.setObjectName("pushButton_n0")
        self.pushButton_n0.setText("0")
        self.pushButton_n0.clicked.connect(lambda:self.print("0"))

    def print(self,number):
        self.content.append(number)
        print(self.content)
        #self.output1.setText(''.join(self.content))
        temp=''.join(self.content)
        self.expression=temp
        self.pageSource = '''
                                <html><head>
                                <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-AMS-MML_HTMLorMML">                     
                                </script></script><script>MathJax.Hub.Config({{
jax: ["input/TeX","output/HTML-CSS"],
displayAlign: "left"
}});</script>
                                </head>
                                <body>
                                <p><mathjax style="font-size:1em">$${expression}$$</mathjax></p>
                                </body></html>
                                '''.format(expression=self.expression)
        self.display.setHtml(self.pageSource)

class Main(QMainWindow):
    def __init__(self):
        super().__init__()
        self.ui = Ui_s_cals()
        self.ui.setupUi(self)
        self.show()

def main():
    calc = QApplication(sys.argv)
    instance = Main()
    sys.exit(calc.exec_())
if __name__ == '__main__':
    start = time.time()
    main()
    print(time.time() - start)

I was looking for answers for hours. I tried setting the visibility of body to hidden, and then making it visible by a script after mathjax is done rendering, but it didn't work.

I tried all the answers on stack overflow, but none of them counted on me using this inside a python script, which might be the problem. if you know a different way of showing equations in real time.

pyqt mathjax equation python
1 Answers

You don't need to change whole page content to render new expression, instead you can use QWebEnginePage.runJavaScript method. Look at input-tex2chtml.html example in MathJax-demos-web

Demo:

from PyQt5 import QtCore, QtGui, QtWidgets
from PyQt5.QtWebEngineWidgets import QWebEngineView

html = """
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width">
  <title>MathJax v3 with interactive TeX input and HTML output</title>
  <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
  <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"></script>
  <script>
    function convert(input) {
      output = document.getElementById('output');
      output.innerHTML = '';
      MathJax.texReset();
      var options = MathJax.getMetricsFor(output);
      options.display = true;
      MathJax.tex2chtmlPromise(input, options).then(function (node) {
        output.appendChild(node);
        MathJax.startup.document.clear();
        MathJax.startup.document.updateDocument();
      }).catch(function (err) {
        output.appendChild(document.createTextNode(err.message));
      });
    }
  </script>
  <style>
  body, html {
    padding: 0;
    margin: 0;
  }
  #output {
    font-size: 120%;
    min-height: 2em;
    padding: 0;
    margin: 0;
  }
  .left {
    float: left;
  }
  .right {
    float: right;
  }
  </style>
</head>
<body>
<div id="output" class="left"></div>
</body>
</html>
"""

class Window_Ui:
    def setupUi(self, widget):
        view = QWebEngineView()
        edit = QtWidgets.QLineEdit()
        layout = QtWidgets.QVBoxLayout()
        layout.addWidget(view)
        layout.addWidget(edit)
        widget.setLayout(layout)
        self.view = view
        self.edit = edit

class Window(QtWidgets.QWidget):
    def __init__(self, parent = None):
        super().__init__(parent)
        ui = Window_Ui()
        ui.setupUi(self)
        self._ui = ui
        ui.view.setHtml(html)
        page = ui.view.page()
        page.loadFinished.connect(self.onLoadFinished)
        ui.edit.setText("{-b \\pm \\sqrt{b^2-4ac} \\over 2a}")
        ui.edit.textChanged.connect(self.onTextChanged)
        self._ready = False

    def onLoadFinished(self):
        if self._ready:
            return
        self._ready = True
        self.onTextChanged(self._ui.edit.text())

    def onTextChanged(self, text):
        ui = self._ui
        text = text.replace("\\","\\\\")
        page = ui.view.page()
        page.runJavaScript('convert("{}");'.format(text))

    def sizeHint(self):
        return QtCore.QSize(300,150)


if __name__ == "__main__":
    app = QtWidgets.QApplication([])
    window = Window()
    window.show()
    app.exec()
user_20791890
Related