youpilat13 youpilat13 - 3 years ago 245
Javascript Question

Drawing an arc with pstricks and latex2html5

I get an issue about drawing an arc with MathJax and latex2html5 (from http://latex2html5.com/).

I would like to draw this schema with these 2 libraries above :

Schema to repoduce

My issue is that I can't draw the 2 arcs on the left which link

EV
and
DE
states.

On the link above, I did :

<script type="tex/latex">

\begin{center}
\begin{pspicture}(-4,-4)(4,4)

\pscircle(-3.3,2.5){0.4}
\pscircle(-3.3,-2.5){0.4}
\pscircle(3.3,-2.5){0.4}
\pscircle(3.3,2.5){0.4}

\psline{->}(-2.9,2.5)(2.9,2.5)
\rput(0,2.8){00}

\psline{->}(3.3,2.1)(3.3,-2.1)
\rput(3.6,0){00}

\psline{->}(2.9,-2.5)(-2.9,-2.5)
\rput(0,-2.8){01,11}

\psarc[fillcolor=white]{->}(-3.7,0){2}{-90}{90}

\end{pspicture}
\end{center}

</script>

<script type="text/javascript">
$('body').latex();
</script>


The line :

\psarc[fillcolor=white]{->}(-3.7,0){2}{-90}{90}


concerns this part but the result is not good: first, fillcolor is blue and after, the interval of angle is not good too (I want the 2 arcs to be vertical).

More generally, I would like to get informations to draw schema (here with different arcs) with latex2html5 library. If this is not possible, does anyone know a Javascript library (ideally with Latex rendering like MathJax or without) that could allow to do this ? Thanks for your suggestions.

Thanks

Answer Source

draw an arc you can use psplot, here is a horizontal arc, you can change the axis to make you want. hope it helps.

<!DOCTYPE html>
<html>
<head>
<script type="text/x-mathjax-config">
    // <![CDATA[
    MathJax.Hub.Config({ 
        TeX: {extensions: ["AMSmath.js", "AMSsymbols.js"]},     
        extensions: ["tex2jax.js"],
        jax: ["input/TeX", "output/HTML-CSS"],
        showProcessingMessages : false,
        messageStyle : "none" ,    
        showMathMenu: false ,
        tex2jax: {
            processEnvironments: true,
            inlineMath: [ ['$','$'], ["\(","\)"] ],
            displayMath: [ ['$$','$$'], ["\[","\]"] ],
            preview : "none",
            processEscapes: true
        },
        "HTML-CSS": { linebreaks: { automatic:true, width: "latex-container"} }
    });
    // ]]>
</script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS_HTML"></script>
<script type="text/javascript" src="https://raw.githubusercontent.com/Mathapedia/LaTeX2HTML5/master/latex2html5.min.js"></script>
<link rel="stylesheet" href="https://raw.githubusercontent.com/Mathapedia/LaTeX2HTML5/master/css/latex2html5.css" type="text/css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Arbutus+Slab" type="text/css">
</head>
<div id="aa"></div>
<script type="tex/latex">
\begin{center}
\begin{pspicture}(-4,-4)(4,4)
\psplot[algebraic,linewidth=1.5pt]{-3.14}{3.14}{cos(x/2)}
\end{pspicture}
\end{center}
\end{document}
  </script>

  <script type="text/javascript">
  $('body').latex();
  </script>
</html>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download