B4A Library Math View

The attached project wraps this Github project. Posting the following:

1. B4A project demonstrating the code. I strongly suggest that you spend some time on THIS WEBSITE to get an understanding of how to code the formulas (it is a bit tricky...)
2. A Dropbox link to the library files that you will need - copy them to your additional library folder. CLICK HERE TO DOWLOAD THE LIBRARY FILES
3. A Dropbox link to the Files folder of the B4A project. Replace the entire Files folder of the B4A project with this download. CLICK HERE TO DOWNLOAD THE FILES FOLDER OF THE B4A PROJECT
4. The src folder of the Java code. You will need to create a libs folder of the same folder level as the src folder and then copy chunk-templates-3.0.1.jar, android-support-v7-appcompat.jar, and android-support-v4.jar into this libs folder in order to compile it with SLC or Eclipse. These 3 jar files are in the file that you can download from (2) above. CLICK HERE TO DOWNLOAD THE ZIPPED src FOLDER

I am running this on a Samsung S4 Mini with Android 4.4.2 (it is not working on my tablet with Android 4.0.4).

1.png


Sample Code:

B4X:
#Region  Project Attributes
    #ApplicationLabel: b4aMathView
    #VersionCode: 1
    #VersionName:
    'SupportedOrientations possible values: unspecified, landscape or portrait.
    #SupportedOrientations: landscape
    #CanInstallToExternalStorage: False
    #AdditionalJar: chunk-templates-3.0.1.jar

#End Region

#AdditionalRes: ..\resource
#AdditionalRes: c:\ANDRIOD_SDK_TOOLS\extras\android\support\v7\appcompat\res, android.support.v7.appcompat

#Region  Activity Attributes
    #FullScreen: False
    #IncludeTitle: True
#End Region

Sub Process_Globals
    'These global variables will be declared once when the application starts.
    'These variables can be accessed from all modules.

End Sub

Sub Globals
    'These global variables will be redeclared each time the activity is created.
    'These variables can only be accessed from this module.

    Private mv1 As MathView
    Private mv2 As MathView
End Sub

Sub Activity_Create(FirstTime As Boolean)
    'Do not forget to load the layout file created with the visual designer. For example:
    Activity.LoadLayout("main")
  
End Sub

Sub Activity_Resume
  
    Dim  formula1 As String = "<math xmlns=""http://www.w3.org/1998/Math/MathML"">" & Chr(10) & Chr(13) & _
            "  <mrow>" & Chr(10) & Chr(13) & _
            "    <mi>f</mi>" & Chr(10) & Chr(13) & _
            "    <mrow>" & Chr(10) & Chr(13) & _
            "      <mo>(</mo>" & Chr(10) & Chr(13) & _
            "      <mi>a</mi>" & Chr(10) & Chr(13) & _
            "      <mo>)</mo>" & Chr(10) & Chr(13) & _
            "    </mrow>" & Chr(10) & Chr(13) & _
            "  </mrow>" & Chr(10) & Chr(13) & _
            "  <mo>=</mo>" & Chr(10) & Chr(13) & _
            "  <mrow>" & Chr(10) & Chr(13) & _
            "    <mfrac>" & Chr(10) & Chr(13) & _
            "      <mn>1</mn>" & Chr(10) & Chr(13) & _
            "      <mrow>" & Chr(10) & Chr(13) & _
            "        <mn>2</mn>" & Chr(10) & Chr(13) & _
            "        <mi>&#x3C0;</mi>" & Chr(10) & Chr(13) & _
            "        <mi>i</mi>" & Chr(10) & Chr(13) & _
            "      </mrow>" & Chr(10) & Chr(13) & _
            "    </mfrac>" & Chr(10) & Chr(13) & _
            "    <msub>" & Chr(10) & Chr(13) & _
            "      <mo>&#x222E;</mo>" & Chr(10) & Chr(13) & _
            "      <mrow>" & Chr(10) & Chr(13) & _
            "        <mi>&#x3B3;</mi>" & Chr(10) & Chr(13) & _
            "      </mrow>" & Chr(10) & Chr(13) & _
            "    </msub>" & Chr(10) & Chr(13) & _
            "    <mfrac>" & Chr(10) & Chr(13) & _
            "      <mrow>" & Chr(10) & Chr(13) & _
            "        <mi>f</mi>" & Chr(10) & Chr(13) & _
            "        <mo>(</mo>" & Chr(10) & Chr(13) & _
            "        <mi>z</mi>" & Chr(10) & Chr(13) & _
            "        <mo>)</mo>" & Chr(10) & Chr(13) & _
            "      </mrow>" & Chr(10) & Chr(13) & _
            "      <mrow>" & Chr(10) & Chr(13) & _
            "        <mi>z</mi>" & Chr(10) & Chr(13) & _
            "        <mo>&#x2212;</mo>" & Chr(10) & Chr(13) & _
            "        <mi>a</mi>" & Chr(10) & Chr(13) & _
            "      </mrow>" & Chr(10) & Chr(13) & _
            "    </mfrac>" & Chr(10) & Chr(13) & _
            "    <mi>d</mi>" & Chr(10) & Chr(13) & _
            "    <mi>z</mi>" & Chr(10) & Chr(13) & _
            "  </mrow>" & Chr(10) & Chr(13) & _
            "</math>"
    mv1.MathText = formula1
  
    Dim  formula2 As String = "<math xmlns=""http://www.w3.org/1998/Math/MathML"">" & Chr(10) & Chr(13) & _
            "  <munderover>" & Chr(10) & Chr(13) & _
            "    <mo>&#x2211;<!-- ∑ --></mo>" & Chr(10) & Chr(13) & _
            "    <mrow class=""MJX-TeXAtom-ORD"">" & Chr(10) & Chr(13) & _
            "      <mi>i</mi>" & Chr(10) & Chr(13) & _
            "      <mo>=</mo>" & Chr(10) & Chr(13) & _
            "      <mn>0</mn>" & Chr(10) & Chr(13) & _
            "    </mrow>" & Chr(10) & Chr(13) & _
            "    <mi>n</mi>" & Chr(10) & Chr(13) & _
            "  </munderover>" & Chr(10) & Chr(13) & _
            "  <msup>" & Chr(10) & Chr(13) & _
            "    <mi>i</mi>" & Chr(10) & Chr(13) & _
            "    <mn>2</mn>" & Chr(10) & Chr(13) & _
            "  </msup>" & Chr(10) & Chr(13) & _
            "  <mo>=</mo>" & Chr(10) & Chr(13) & _
            "  <mfrac>" & Chr(10) & Chr(13) & _
            "    <mrow>" & Chr(10) & Chr(13) & _
            "      <mo stretchy=""false"">(</mo>" & Chr(10) & Chr(13) & _
            "      <msup>" & Chr(10) & Chr(13) & _
            "        <mi>n</mi>" & Chr(10) & Chr(13) & _
            "        <mn>2</mn>" & Chr(10) & Chr(13) & _
            "      </msup>" & Chr(10) & Chr(13) & _
            "      <mo>+</mo>" & Chr(10) & Chr(13) & _
            "      <mi>n</mi>" & Chr(10) & Chr(13) & _
            "      <mo stretchy=""false"">)</mo>" & Chr(10) & Chr(13) & _
            "      <mo stretchy=""false"">(</mo>" & Chr(10) & Chr(13) & _
            "      <mn>2</mn>" & Chr(10) & Chr(13) & _
            "      <mi>n</mi>" & Chr(10) & Chr(13) & _
            "      <mo>+</mo>" & Chr(10) & Chr(13) & _
            "      <mn>1</mn>" & Chr(10) & Chr(13) & _
            "      <mo stretchy=""false"">)</mo>" & Chr(10) & Chr(13) & _
            "    </mrow>" & Chr(10) & Chr(13) & _
            "    <mn>6</mn>" & Chr(10) & Chr(13) & _
            "  </mfrac>" & Chr(10) & Chr(13) & _
            "</math>"
    mv2.MathText = formula2
       
End Sub

Sub Activity_Pause (UserClosed As Boolean)

End Sub

Thanks Markus (@corwin42), Manfred (@DonManfred) and JP (@freedom2000). Sorry to have bothered you all today but this was by far the most challenging wrapper that I have done and I was running out of ideas.

Please note - I am no expert on creating the B4A code to generate the visual display of the formulas for. For that please see point 1 above.
 

Attachments

  • b4aMathView.zip
    9.5 KB · Views: 452
Last edited:

Johan Schoeman

Expert
Licensed User
Longtime User
Here is an update - I have added the second rendering engine (TeX). It make it a bit easier to create the formulas - see sample code / attached B4A project. Some examples in the pic and attached B4A project comes from HERE. Browse the web to get more info on the formula syntax.

Once you have downloaded the attached B4A project you need to replace the entire Files folder of the project with the folder that you can download from here - click here.

Posting the following:
1. updated B4A project (but replace the Files folder - see paragraph above)
2. Updated B4A library files (the other library files (see post above for download) remain unchanged - copy them to your additional library folder.
3. Updated Java code for the wrapper only (other Java code remains as is - see post #1 for the link to it).

2.png


Sample Code:

B4X:
#Region  Project Attributes
    #ApplicationLabel: b4aMathView
    #VersionCode: 1
    #VersionName:
    'SupportedOrientations possible values: unspecified, landscape or portrait.
    #SupportedOrientations: landscape
    #CanInstallToExternalStorage: False
    #AdditionalJar: chunk-templates-3.0.1.jar

#End Region

#AdditionalRes: ..\resource
#AdditionalRes: c:\ANDRIOD_SDK_TOOLS\extras\android\support\v7\appcompat\res, android.support.v7.appcompat

#Region  Activity Attributes
    #FullScreen: False
    #IncludeTitle: True
#End Region

Sub Process_Globals
    'These global variables will be declared once when the application starts.
    'These variables can be accessed from all modules.

End Sub

Sub Globals
    'These global variables will be redeclared each time the activity is created.
    'These variables can only be accessed from this module.

    Private mv1 As MathView
    Private mv2 As MathView
    Private mv3 As MathView
    Private mv4 As MathView
    Private mv5 As MathView
    Private mv6 As MathView
    Private mv7 As MathView
    Private mv8 As MathView
    Private mv9 As MathView
    Private mv10 As MathView
End Sub

Sub Activity_Create(FirstTime As Boolean)
    'Do not forget to load the layout file created with the visual designer. For example:
    Activity.LoadLayout("main")

End Sub

Sub Activity_Resume


    Dim  formula1 As String = "<math xmlns=""http://www.w3.org/1998/Math/MathML"">" & Chr(10) & Chr(13) & _
            "  <mrow>" & Chr(10) & Chr(13) & _
            "    <mi>f</mi>" & Chr(10) & Chr(13) & _
            "    <mrow>" & Chr(10) & Chr(13) & _
            "      <mo>(</mo>" & Chr(10) & Chr(13) & _
            "      <mi>a</mi>" & Chr(10) & Chr(13) & _
            "      <mo>)</mo>" & Chr(10) & Chr(13) & _
            "    </mrow>" & Chr(10) & Chr(13) & _
            "  </mrow>" & Chr(10) & Chr(13) & _
            "  <mo>=</mo>" & Chr(10) & Chr(13) & _
            "  <mrow>" & Chr(10) & Chr(13) & _
            "    <mfrac>" & Chr(10) & Chr(13) & _
            "      <mn>1</mn>" & Chr(10) & Chr(13) & _
            "      <mrow>" & Chr(10) & Chr(13) & _
            "        <mn>2</mn>" & Chr(10) & Chr(13) & _
            "        <mi>&#x3C0;</mi>" & Chr(10) & Chr(13) & _
            "        <mi>i</mi>" & Chr(10) & Chr(13) & _
            "      </mrow>" & Chr(10) & Chr(13) & _
            "    </mfrac>" & Chr(10) & Chr(13) & _
            "    <msub>" & Chr(10) & Chr(13) & _
            "      <mo>&#x222E;</mo>" & Chr(10) & Chr(13) & _
            "      <mrow>" & Chr(10) & Chr(13) & _
            "        <mi>&#x3B3;</mi>" & Chr(10) & Chr(13) & _
            "      </mrow>" & Chr(10) & Chr(13) & _
            "    </msub>" & Chr(10) & Chr(13) & _
            "    <mfrac>" & Chr(10) & Chr(13) & _
            "      <mrow>" & Chr(10) & Chr(13) & _
            "        <mi>f</mi>" & Chr(10) & Chr(13) & _
            "        <mo>(</mo>" & Chr(10) & Chr(13) & _
            "        <mi>z</mi>" & Chr(10) & Chr(13) & _
            "        <mo>)</mo>" & Chr(10) & Chr(13) & _
            "      </mrow>" & Chr(10) & Chr(13) & _
            "      <mrow>" & Chr(10) & Chr(13) & _
            "        <mi>z</mi>" & Chr(10) & Chr(13) & _
            "        <mo>&#x2212;</mo>" & Chr(10) & Chr(13) & _
            "        <mi>a</mi>" & Chr(10) & Chr(13) & _
            "      </mrow>" & Chr(10) & Chr(13) & _
            "    </mfrac>" & Chr(10) & Chr(13) & _
            "    <mi>d</mi>" & Chr(10) & Chr(13) & _
            "    <mi>z</mi>" & Chr(10) & Chr(13) & _
            "  </mrow>" & Chr(10) & Chr(13) & _
            "</math>"

    mv1.Engine = 1
    mv1.MathText = formula1

    Dim  formula2 As String = "<math xmlns=""http://www.w3.org/1998/Math/MathML"">" & Chr(10) & Chr(13) & _
            "  <munderover>" & Chr(10) & Chr(13) & _
            "    <mo>&#x2211;<!-- ∑ --></mo>" & Chr(10) & Chr(13) & _
            "    <mrow class=""MJX-TeXAtom-ORD"">" & Chr(10) & Chr(13) & _
            "      <mi>i</mi>" & Chr(10) & Chr(13) & _
            "      <mo>=</mo>" & Chr(10) & Chr(13) & _
            "      <mn>0</mn>" & Chr(10) & Chr(13) & _
            "    </mrow>" & Chr(10) & Chr(13) & _
            "    <mi>n</mi>" & Chr(10) & Chr(13) & _
            "  </munderover>" & Chr(10) & Chr(13) & _
            "  <msup>" & Chr(10) & Chr(13) & _
            "    <mi>i</mi>" & Chr(10) & Chr(13) & _
            "    <mn>2</mn>" & Chr(10) & Chr(13) & _
            "  </msup>" & Chr(10) & Chr(13) & _
            "  <mo>=</mo>" & Chr(10) & Chr(13) & _
            "  <mfrac>" & Chr(10) & Chr(13) & _
            "    <mrow>" & Chr(10) & Chr(13) & _
            "      <mo stretchy=""false"">(</mo>" & Chr(10) & Chr(13) & _
            "      <msup>" & Chr(10) & Chr(13) & _
            "        <mi>n</mi>" & Chr(10) & Chr(13) & _
            "        <mn>2</mn>" & Chr(10) & Chr(13) & _
            "      </msup>" & Chr(10) & Chr(13) & _
            "      <mo>+</mo>" & Chr(10) & Chr(13) & _
            "      <mi>n</mi>" & Chr(10) & Chr(13) & _
            "      <mo stretchy=""false"">)</mo>" & Chr(10) & Chr(13) & _
            "      <mo stretchy=""false"">(</mo>" & Chr(10) & Chr(13) & _
            "      <mn>2</mn>" & Chr(10) & Chr(13) & _
            "      <mi>n</mi>" & Chr(10) & Chr(13) & _
            "      <mo>+</mo>" & Chr(10) & Chr(13) & _
            "      <mn>1</mn>" & Chr(10) & Chr(13) & _
            "      <mo stretchy=""false"">)</mo>" & Chr(10) & Chr(13) & _
            "    </mrow>" & Chr(10) & Chr(13) & _
            "    <mn>6</mn>" & Chr(10) & Chr(13) & _
            "  </mfrac>" & Chr(10) & Chr(13) & _
            "</math>"
    mv2.Engine = 1
    mv2.MathText = formula2



    Dim formula3 As String = "$$\sum_{i=0}^n i^2 = \frac{(n^2+n)(2n+1)}{6}$$" & Chr(10) & Chr(13) & _
            " $$(ax^2 + bx + c = 0)$$ "

    mv3.Engine = 0
    mv3.MathText = formula3    

    Dim formula4 As String = "$$\frac{\frac{1}{x}+\frac{1}{y}}{y-z}$$"
    mv4.Engine = 0
    mv4.MathText = formula4

    Dim formula5 As String = "$$\frac{n!}{k!(n-k)!} = \binom{n}{k}$$"
    mv5.Engine = 0
    mv5.MathText = formula5

    Dim formula6 As String = "$$\overbrace{ 1+2+\cdots+100 }^{5050}$$"
    mv6.Engine = 1
    mv6.MathText = formula6    

    Dim formula7 As String = "$$A \xleftarrow{n+\mu-1} B \xrightarrow[T]{n\pm i-1} C$$"
    mv7.Engine = 1
    mv7.MathText = formula7

    Dim formula8 As String = "$$\begin{cases} 3x + 5y + z \\ 7x – 2y + 4z \\ -6x + 3y + 2z \end{cases}$$"
    mv8.Engine = 1
    mv8.MathText = formula8    

    Dim formula9 As String = "$$\left[ \begin{array}{c} x_1 \\ x_2 \end{array} \right] = \begin{bmatrix} A & B \\ C & D \end{bmatrix} \times \left[ \begin{array}{c} y_1 \\ y_2 \end{array} \right]$$"
    mv9.Engine = 1
    mv9.MathText = formula9

    Dim formula10 As String = "$$\begin{bmatrix} xz & xw \\ yz & yw \end{bmatrix} = \left[ \begin{array}{c} x \\ y \end{array} \right] \times \left[ \begin{array}{cc} z & w \end{array} \right]$$"
    mv10.Engine = 1
    mv10.MathText = formula10

End Sub

Sub Activity_Pause (UserClosed As Boolean)

End Sub
 

Attachments

  • b4aMathView1.zip
    10.2 KB · Views: 353
  • MathViewLibFilesNew.zip
    8.3 KB · Views: 368
  • mathviewwrapper.zip
    1.9 KB · Views: 341
Last edited:

Johan Schoeman

Expert
Licensed User
Longtime User
Just a side note - I have in this week updated my Android SDK and found out the hard way that I had to remove the values-23 folder from this path....

C:\ANDRIOD_SDK_TOOLS\extras\android\support\v7\appcompat\res\values-23

...on my computer else the B4A project would not compile. Why I don't know - but I found the suggestion on the Stackoverflow forum, tried it, and it solved the B4A compiling problem. Perhaps @corwin42 can shed some light on this ;)
 

Johan Schoeman

Expert
Licensed User
Longtime User

sanjibnanda

Active Member
Licensed User
Longtime User

Attachments

  • color.png
    color.png
    43.8 KB · Views: 319

Johan Schoeman

Expert
Licensed User
Longtime User
thanks for tip, it worked. see the attached image.

but the font size still remains an issue, i tried many times but failed. if you have some clue i appreciate.
I have not played around with the color or the text size at all. You managed to sort out the color. I am sure you will figure out the text size too! Will be great if you can post a code snippet for the color and also a code snippet for the text size once you have figured it out for us...;) Or a complete B4A project...that will be great!
 

Johan Schoeman

Expert
Licensed User
Longtime User
yup. already have it. can i know where to place this files assets,katex,MathJax and themes?
See point (3) in post #1 of this thread. It has the entire /Files folder of the b4A project. Replace your b4a project's /Files folder with this folder and then everything will be in the right place.
 

Johan Schoeman

Expert
Licensed User
Longtime User
Why do i receive the following error?

View attachment 48655
Did you enable MathView in your b4a project's lib tab? Sure you have all the required jars and XML downloaded from the link in post #1 and have copied them to your additional library folder?
 

Ehsanz

New Member
Licensed User
Longtime User
Did you enable MathView in your b4a project's lib tab? Sure you have all the required jars and XML downloaded from the link in post #1 and have copied them to your additional library folder?

Thanks for your mention.The old one of MathView's Library wasn't replaced with new one!
But a new error occurred!?
error.jpg
 

Johan Schoeman

Expert
Licensed User
Longtime User
Thanks for your mention.The old one of MathView's Library wasn't replaced with new one!
But a new error occurred!?
View attachment 48665

Download and unzip the attached resource.zip file.
Then copy the extracted resource folder to your B4A project so that it is on the same folder level as that of the /Files and /Objects folders of the B4A project.
 

Attachments

  • resource.zip
    440 bytes · Views: 287
Top