LaTex Text Editor for C3

Post reply
0 favourites
From the Asset Store
OpenAI TTS
$10 USD
Text-to-Speech plugin.Allows your Construct 3 project to convert written text into spoken words
cesisco's avatar
cesisco

  • LaTex (or Tex) is a text editor commonly used for scientific writing. It allows for an easy display of equations, integrals, fractions, derivatives and much more.

    Displaying complex scientific formula is currently not possible with Construct's text or spritefont plugins. This feature would make C3 a lot more attractive for users that want to develop educational apps or use C3 for teaching.

    I know this suggestions is very specific and will probably not obtain many upvotes, but I still invite everyone to vote for it here:

    https://construct3.ideas.aha.io/ideas/C3-I-995

    I think this is an important feature to keep C3 competitive. Unity offers this feature in it's asset store (I hope I am allowed to share this link here):

    https://assetstore.unity.com/packages/tools/gui/texdraw-51426

    If you found any other way to display complex scientific formula in C3, please let me know.

    Tagged:

  • Ok, this is a completely unknown area for me but it struck my curiosity so I did some digging. Take it for what it's worth.

    MathML is a markup language that is supported by W3.org which can be added to HTML in order to display complex formulas:

    w3.org/Math

    It appears there are several libraries to convert LaTex to MathML. The problem with MathML is that Chrome doesn't support it.

    However, MathJax appears to be able to convert LaTex into something that displays on all browsers using CSS and webfonts which C3 does handle.

    mathjax.org

    And, it's JS which you should be able to either link to or include in a C3 project.

    So, now that you have it as HTML, what do do with it?

    construct.net/en/make-games/addons/190/html-element

    I've been using this plugin to do Ajax calls to a server, grab html and display them in a C3 project. While I have found some minor issues with it, it seems to mostly work. Once you learn it, the HTMLElement also has some other interesting features that might work really well with formulas. First of all, since the HTML is loaded into the plugin, you can parse it and edit it and it instantly changes. You could have a text field, paste in your LaTex, let MathJax convert it and then place it in the HTMLElement to display it. That plugin also has the ability to make clickable elements in the HTML that can be used to call a C3 function.

    Because MathJax uses CSS you can use another plugin from the same author to solve that problem:

    construct.net/en/make-games/addons/166/inject-css

    I've been using that to successfully load both JS and CSS from a webserver into my C3 project. And the loaded CSS works with the above plugin to display the HTML however you wish.

    With a little creativity, I believe that you could duplicate this website in a C3 project:

    codecogs.com/latex/eqneditor.php

    Therefore, including it in C3, IMHO, would cause unneeded bloat and would divert Scirra's limited resources onto a project that only a handful of end users would need. If the ideas I presented above could be made to work, that would be ideal.

  • Quick test (naturally if I come up with a crazy idea I HAVE to test it):

    I went to the example on this page (sorry can't post the actual link)

    mathjax.org

    I copied everything inside the <body> of the html so it looked like this: 

    <p>
 When \(a \ne 0\), there are two solutions to \(ax^2 + bx + c = 0\) and they are
 $$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$
</p>

    I then pasted that to the HTMLElement plugin text field and set the the "text like HTML" to true.

    I then copied this JS link 

    https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML

    and pasted it into the inject CSS plugin as External JS

    Ran it and I got this:

  • Another quick test and supposedly this is chopped from a LaTex document, perhaps you can confirm.

    changed the HTMLElement to this: 

     [
 \mathcal L_{\mathcal T}(\vec{\lambda})
 = \sum_{(\mathbf{x},\mathbf{s})\in \mathcal T}
 \log P(\mathbf{s}\mid\mathbf{x}) - \sum_{i=1}^m
 \frac{\lambda_i^2}{2\sigma^2}
 \]

    and got this:

    That complex enough?

    *edit Oh and that was in Chrome

    *another edit. For some reason this site is stripping out the \ before the first left bracket so copying and pasting the code above won't work.

  • Jeez, I actually thought noone would respond to my post. You did a good job there, I think this is something I can work with! I need some time to dig deeper into this, though. Please keep up your experiments and let us know of any optimizations. Thanks a lot!

    Ok, this is a completely unknown area for me but it struck my curiosity so I did some digging. Take it for what it's worth.

    MathML is a markup language that is supported by W3.org which can be added to HTML in order to display complex formulas:

    https://www.w3.org/Math/

    It appears there are several libraries to convert LaTex to MathML. The problem with MathML is that Chrome doesn't support it.

    However, MathJax appears to be able to convert LaTex into something that displays on all browsers using CSS and webfonts which C3 does handle.

    https://www.mathjax.org

    And, it's JS which you should be able to either link to or include in a C3 project.

    So, now that you have it as HTML, what do do with it?

    https://www.construct.net/en/make-games/addons/190/html-element

    I've been using this plugin to do Ajax calls to a server, grab html and display them in a C3 project. While I have found some minor issues with it, it seems to mostly work. Once you learn it, the HTMLElement also has some other interesting features that might work really well with formulas. First of all, since the HTML is loaded into the plugin, you can parse it and edit it and it instantly changes. You could have a text field, paste in your LaTex, let MathJax convert it and then place it in the HTMLElement to display it. That plugin also has the ability to make clickable elements in the HTML that can be used to call a C3 function.

    Because MathJax uses CSS you can use another plugin from the same author to solve that problem:

    https://www.construct.net/en/make-games/addons/166/inject-css

    I've been using that to successfully load both JS and CSS from a webserver into my C3 project. And the loaded CSS works with the above plugin to display the HTML however you wish.

    With a little creativity, I believe that you could duplicate this website in a C3 project:

    https://www.codecogs.com/latex/eqneditor.php

    Therefore, including it in C3, IMHO, would cause unneeded bloat and would divert Scirra's limited resources onto a project that only a handful of end users would need. If the ideas I presented above could be made to work, that would be ideal.

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads

  • Well, I'm not going to dig too deep but I can tell you this.

    If you're going to import a complete latex document, you're going to have to pre-parse it because MathJax doesn't seem to know what to do with many of the document codes like these: 

    \documentclass{scrartcl}
\usepackage[utf8]{inputenc}
\usepackage{amsmath,amssymb,amsthm}
\begin{document}

    In which case, MathJax seems to ignore the whole document even if there are formulas inside it. With LaTex, it seems that anything between the (backslash)[ and (backslash)] is acceptable as a formula and it will parse it correctly.

    The HTMLElement has a lot of confusing features and it will take you a while to figure it out. Once you do though, a lot of the stuff at the bottom you won't need. But, I did successfully change font sizes, colors and even imported a .wott font from the MathJax GitHub page and it displayed properly.

    So, learning how to format your formulas will be the first trick. Learning how to get the full power out of the HTMLElement will the be the next. But, I'm now quite confident that you could build a formula designer like the web site I linked in my first post if you really wanted to.

    GL and have fun ;)

  • Can't make it work without major time investment, the plugins are to confusing. Still hoping for a build-in solution or at least a good tutorial. In the latest C3 version, the browser object is now able to load CSS stylesheets. Maybe this helps to make this whole thing easier - somehow.

  • I don't know how I can make it much easier. You paste a link, paste some text and it works.

    Install the HTML Element and Inject CSS plugins.

    Paste that JS link above into the Inject CSS in the 'External JS' box.

    Paste your latex in the HTML Element Text and check 'text like HTML'.

    CSS has nothing to do with this.

  • twistedvoid.com/latex

    You can either click on a button to show some example formulas or, you can paste your own latex in the white text box on top and it will automatically parse and display in the HTMLElement below.

    Pardon if this looks ugly, I spent 0 time making it pretty.

    Download

    www.twistedvoid.com/latex/C3LaTex.c3p

    You will need the HTMLElement and Inject CSS plugins I linked above if you plan to play with this.

  • Fengist Played around with your example file, works great! The thing is that I would like to use LaTex in an offline mobile app, so I am not sure how to import the MathJax code properly. Sorry for the confusion.

  • You'll have to download the MathJax.js file and add it to the 'files' in your project.

    You can then change the location in Inject CSS from External JS to JS Files and give the path to the MathJax.js.

    That should work.

  • I downloaded MathJax from the official site, unzipped it, opened the folder and loaded 'MathJax.js' into C3. There is a plethora of files in the unzipped folder, I doubt it is correct to include MathJax.js only? Anyway, I installed HTMLElement and InjectCSS, specified the file (not the path, just the filename, like in the plugin demo) in InjectCSS, enabled 'Text like HTML' in HTMLElement and gave it some LaTex - nothing happens, the text is being displayed as normal text.

    This should be trivial, what am I doing wrong here?

    Side note: Strange issue, the LaTex code shown in the sidebar of the HTMLElement is always shown with a double slash, although it is clearly written with one slash only in the editor, see picture.

  • I haven't worked at all with JS files loaded locally so I can't be of any help in that department. You may have to put them in the scripts folder at which point, they may load automatically. I do not know. You'll likely need to include the path to them though if you do need to load them.

    I did a quick search for mathjax offline and apparently it does work locally. What other files you need to include, no idea. That's going to take some research and experimentation on your part. I did see that most examples only link to the MathJax.js with the config query on the end: ?config=TeX-MML-AM_CHTML

    I can tell you that if you look at the capx I uploaded, there is one line of JS that you're likely going to need to include in your project. MathJax was only parsing the text when the project was first run until I added that line of JS.

    As for the /'s, that's normal and I believe built-in to C3 as the text boxes will do that as well. It's 'escaping' the text, replacing things like carriage returns with their string representation /n and // to display a backslash.

    As always, when your project is running in Google, hit F12 and look for errors in the console.

  • Maybe el3um4s can have a quick look at this. How would one load MathJax.js into the Inject CSS plugin correctly, so that it works offline? MathJax can be downloaded here: https://www.mathjax.org/#gettingstarted

  • CreativeMind There is a problem with the version of MathJax you are using.

    When your project is running in Google, hit F12 and look for errors in the console:

    You can check on mozilla.org to understand what kind of error it is

    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/arguments/callee

    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/arguments/caller

    If you look on construct 3 guide you can find this:

    STRICT MODE

    All JavaScript code in Construct is run in strict mode. This eliminates common problems such as silent errors, typos accidentally creating global variables, and fixes some aspects of the language considered mistakes. In particular it helps avoid confusing problems that beginners often run in to. Since all code is already run in strict mode, there is no need to add the "use strict" directive to any of your code

    From a first analysis, I think that the MathJax should be corrected to make it compatible with the most recent versions of ECMAScript.

    If you check the MathJax site, you can find the News section

    https://www.mathjax.org/news/

    You can try the new beta: maybe you can solve this problem.

    https://github.com/mathjax/mathjax-v3

Post reply
Return to board index
Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)