JSXGraph.jl aims to help generate JSXGraph code from Julia code that can then be plugged in a statically served website.
Checkout JSXGraph.jl's official documentation. Of course this website built with Franklin.jl.
Simply to run:
julia> using Pkg; Pkg.add("JSXGraph")
julia> using JSXGraph
O.K. how do I embed the result of JSXGraph.jl ?
Like making delicious curry rice, we need several spices.
JSXGraph.PREAMBLE
According to the index.md of https://github.com/tlienart/JSXGraphWeb, we need inject raw HTML consisted of the output of <script>$(JSXGraph.PREAMBLE)</script>
. Namely, insert the following code before writing your Julia code w.r.t JSXGraph.
```julia:preamble
# Insert secret ingredient. It is not a trade secret since Franklin is OSS.
println(~~~<script>$(JSXGraph.PREAMBLE)</script>~~~)
```
\textoutput{preamble}
_layout/head.html
Copy jsx
directory from https://github.com/tlienart/JSXGraphWeb/tree/master/_libs/jsx. It contains jsxgraph.css
and jsxgraph.js
Create head_jsx.html
under _layout
directory, where head_jsx.html
is same as
<link rel="stylesheet" href="/libs/jsx/jsxgraph.css">
<script src="/libs/jsx/jsxgraphcore.js"></script>
config.md
Create a variable hasjsx
with default value false
: in your config.md
write
@def hasjsx = false
This procedure is same as Working with Plotly.
For more details, See config.md of JSXGraphWeb
Everything happens on a Hello world example. Let's add an object on a board with Hello World
.
```julia
b = board("brd", xlim=[-2,2], ylim=[-2,2])
b ++ point(0, 0, name="Hello World")
```
Is is enough ? Actually NO. We need insert another secret ingredient like:
```julia
println("""~~~$(JSXGraph.standalone(b, preamble=false))~~~""")
```
Therefore, Franklin users should write code like:
```julia
b = board("brd", xlim=[-2,2], ylim=[-2,2])
b ++ point(0, 0, name="hello")
print("""~~~$(JSXGraph.standalone(b, preamble=false))~~~""") # hide
```
This will give:
b = board("brd", xlim=[-2,2], ylim=[-2,2])
b ++ point(0, 0, name="hello")
Congratulations!!!
Example 5.1.1
b = board("b3", xlim=[-12, 12], ylim=[-10,10])
b ++ (
slider("a", [[-11,7],[-5,7],[0,3,6]], name="a"),
slider("b", [[-11,5],[-5,5],[0,2,6]], name="b"),
slider("A", [[1,7],[7,7],[0,3,6]], name="A"),
slider("B", [[1,5],[7,5],[0,3,6]], name="B"),
slider("delta", [[2,-7],[6,-7],[0,0,π]], name="δ")
)
@jsf f1(t) = val(A)*sin(val(a)*t+val(delta))
@jsf f2(t) = val(B)*sin(val(b)*t)
b ++ plot(f1, f2, a=0, b=2π,
strokecolor="#aa2233", strokewidth=3)