ijulia

[tlienart]

• https://stackoverflow.com/questions/43234410/how-can-i-load-external-static-javascript-files-in-ipython-or-jupyter-notebook
• https://github.com/queryverse/VegaLite.jl/blob/2208264fe0bfd38f563f26035dd00a0153bd0c61/src/rendering/render.jl
• https://jupyter-notebook.readthedocs.io/en/stable/examples/Notebook/JavaScript%20Notebook%20Extensions.html
• how to use d3.js without require.js jupyter/notebook#4462

[tlienart]

So require should work but that’s only for Jupyter Notebook

(i.e., not lab)

The simplest thing (where I might start) would be to include a snippet at the start of the JS that you emit

function makegraph() { /* ... */ };
if (document.querySelector("script[src=\"https://cdnjs.cloudflare.com/ajax/libs/jsxgraph/0.99.7/jsxgraphcore.js\"]")) { makegraph(); }
else {
const s = document.createElement("script");
document.head.appendChild(s);
s.onload = () => makegraph();
}

^ I have no idea if that’s the right API but basically the idea is just add the script to the document and register a callback when it’s done loading

In Jupyter Notebook you should just be able to do

require(["https://cdnjs.cloudflare.com/ajax/libs/jsxgraph/0.99.7/jsxgraphcore.js"], (JSXGraph) => { /* ... */ });

[terasakisatoshi]

FYI: I've found (though it's not perfect) the following code works on Jupyter Notebook:

using WebIO
using JSXGraph

function init()
    w = Scope(
        imports=[
                joinpath(dirname(pathof(JSXGraph)), "libs", "jsxgraphcore.js"),
                joinpath(dirname(pathof(JSXGraph)), "libs", "jsxgraph.css"),
        ]
    )
    w
end

init() # run it before creating Board objects

brd = board("brd",xlim=[-15,15], ylim=[-15,15],axis=true)

a = slider("a", [[8, 7], [12, 7], [-3, 0.1, 10]])
b = slider("b", [[8, 6], [12, 6], [-1, 1, 5]])
c = slider("c", [[8, 5], [12, 5], [-10, -5, 2]])
[a,b,c] |> brd

@jsf f(x) = val(a) * x^2 + val(b) * x + val(c)

brd ++ plot(f)
brd.style="width:500px;height:500px;margin:0 auto;"

HTML(JSXGraph.standalone(brd))

Screenshot:

[tlienart]

Hey cool! thanks a lot! I'm struggling a bit to do anything else than Franklin at the moment so I've put this a bit on the side but if you want to help me put some more time in it it'd be great. I'll try to add your suggestion soon :)

[terasakisatoshi]

I came up with another solution based on WebIO.onmount function.

using WebIO # WebIO v0.8.15
using JSXGraph #JSXGraph v0.1.6

function initscope(id="board")
    n = Node(
        :div,
        id=id,
        className = "jxgbox",
        attributes=Dict(
            :style=>"width:500px; height:500px;margin:0 auto;"
        )
    )
    w = Scope(
        imports=[
                joinpath(dirname(pathof(JSXGraph)), "libs", "jsxgraphcore.js"),
                joinpath(dirname(pathof(JSXGraph)), "libs", "jsxgraph.css"),
        ]
    )(n)
end

function to_js4ijulia(brd::JSXGraph.Board)
    # modify script generated by `str(brd)`
    script = str(brd)[begin:end-5] # remove "();"
    script *= " return board;})" # insert " return board;})" at the end of `script`
    return script
end

@WebIO.register_renderable(JSXGraph.Board) do b
    return onmount(initscope(b.name), to_js4ijulia(b))
end

brd = board("board",xlim=[-15,15], ylim=[-15,15],axis=true)

a = slider("a", [[8, 7], [12, 7], [-3, 0.1, 10]])
b = slider("b", [[8, 6], [12, 6], [-1, 1, 5]])
c = slider("c", [[8, 5], [12, 5], [-10, -5, 2]])
[a,b,c] |> brd

@jsf f(x) = val(a) * x^2 + val(b) * x + val(c)

brd ++ plot(f)

brd |> WebIO.render

See also my gists

• using WebIO and JSExpr
• using raw JS

[s-celles]

Hi @tlienart and @terasakisatoshi

v0.5.x renders natively in Pluto now.

I don't use Jupyter / IJulia and haven't much time to test it.

Feel free to have a look

brd = board("board", xlim=(-15, 15), ylim=(-15, 15), axis=true) do brd
  a = slider([8, 7], [12, 7], [-3,   0.1, 10]; name="a")
  b = slider([8, 6], [12, 6], [-1,   1,   5];  name="b")
  c = slider([8, 5], [12, 5], [-10, -5,   2];  name="c")
  push!(brd, a, b, c)
  
  f = @jsf x -> a * x^2 + b * x + c
  push!(brd, functiongraph(f))
end

brd

which works fine.

See live HTML render also https://gist.githack.com/s-celles/1778e19686646e02a60694c60b30aeb2/raw/parabola_demo.html

Mentioned in docs/src/index.md
and the Display & Output page.

Thanks @tlienart and @terasakisatoshi for the original investigation.

Closing now but feel free to reopen if you feel that's necessary.