LaTeX Support - ChairOfStructuralMechanicsTUM/Mechanics_Apps GitHub Wiki

In order to use decent looking mathematical formulas inside the apps, it is vital to use LaTeX.

KaTeX offers a fast rendering of LaTeX equations for web applications.

Import the custom LaTeX feature via

# latex integration
from os.path import dirname, join, split, abspath
import sys, inspect
currentdir = dirname(abspath(inspect.getfile(inspect.currentframe())))
parentdir = join(dirname(currentdir), "shared/")
sys.path.insert(0,parentdir) 
from latex_support import LatexDiv, LatexSlider, LatexLabel, LatexLabelSet, LatexLegend

See also Coding Style for further information regarding the code layout.

Jump to:

We can display inline and block equations in the html descriptions files. For inline math mode use $ ... $ or \( ... \), for block/display mode use $$ ... $$ or \[ ... \].

<p>
  The solution of this differential equation can be represented in the form of sines and cosines:
  $$ w = A \sin{\sqrt{ {F \over EI} x } } + B \cos{\sqrt{ {F \over EI} } x} + Cx + D $$
</p>

<p>
  Where constants $A,B,C,D$ are determined by the boundary conditions of the column.
</p>


It is also possible to use LaTeX labels inside plots. Since the backslash \ is used as an escape character in strings, we need a double backslash \\ in the code:

Figure2Moving_Label_source.data = dict(x=...,
                                            names=['\\sigma_x','\\sigma_z','\\tau_{xz}','\\tau_{\\overline{xz}}','\\sigma_{\\overline{z}}','\\sigma_{\\overline{x}}',"A","B"])

figure2_labels2 = LatexLabelSet(x='x', y='y', text='names', source=Figure2Moving_Label_source, text_color = 'black', level='glyph', x_offset=3, y_offset=3)

Use LatexLabel for a single label and LatexLabelSet for multiple labels. Just like their standard Bokeh versions.


Also legends can have LaTeX elements:

legend1 = LatexLegend(items=[
    ("\\text{Normal Stresses}\\ \\sigma_x, \\sigma_z", [dummy_normal_1]),
    ("\\text{Shear Stresses}\\ \\tau_{xz}", [dummy_shear_1]),
], location='top_left', max_label_width = 220)
figure1.add_layout(legend1)


Another feature is LaTeX for sliders:

kappa_input = LatexSlider(title="\\text{Spring stiffness } \\left[ \\frac{N}{m} \\right]: ", value=initial_kappa_value, start=0.0, end=200, step=10,width=400)

Note, that you have to add the colon : manually at the end of the string. This is different for the standard slider.
Units have to be placed in square brackets after the name.

An alternative version - in case you use symbols instead of names - can be found below. The attribute value_unit places the the unit after the value. Use an equality sign = instead of a colon in this case.

Normal_X_slider = LatexSlider(title="\\sigma_x=",value_unit='\\frac{\\mathrm{N}}{\\mathrm{mm}^2}',value= 0,start = -10, end = 10, step = 0.5

Due to the LaTeX font the title of LatexSliders might need a greater width. So when updating a normal slider to a LatexSlider keep in mind to increase the width and possibly also add Spacers in the final layout, if the title needs two lines to be fully displayed.

The KaTeX package and supported functions can be found in the file Mechanics_Apps/shared/latex_support.py. There, Typescript files are loaded, which contain overriden versions of their corresponding Bokeh models.
It has to be noted that those custom files are only guaranteed to work with the versions defined here!




Next page (Deprecated Functions)

⚠️ **GitHub.com Fallback** ⚠️