Running Julia in browser - sharing simulation code that plots live. Possible?

p_f · November 28, 2023, 10:54am

I have some simulation code that runs, constantly plots to a GLMakie window using observables, and lets me use sliders to change parameter values live. I was wondering if it is possible to share this publically on a webpage?

I’m not entirely sure what keywords I should be searching, or even if this is (easily) possible using Julia? If it is possible, would people need a local Julia installation?

I gave it a google and came across some results, but most were at least a few years old so wasn’t sure exactly how reliable they were

Palli · November 28, 2023, 11:39am

It’s actually possible at least two ways:

A.
Here’s a demo for sort of exactly what you need, right:

Note, that compiler still has some limitations, e.g. only works in brand-new web browsers:

This will run Julia in a web browser, just use a web server to serve that code.

[It’s also possible in other ways to have Julia run on the web server and serve you JavaScript, even compiled from Julia, though likely not for exactly as you want, or at least as a drop-in replacement for Makie.]

B.
You can use Pluto notebooks, then you share all the code with the world, it’s at least visible by default, and not precompiled for the web browser. It should support all Julia code, and Makie, but since it’s in a web browser, not the desktop usual version of it rather WGLMakie subproject that likely is good enough and is for all (modern) web browsers:

juliaplots.org/WGLMakie.jl/dev/#Pluto/IJulia

Yes, with this plan B the user would need Julia preinstalled:

Introduction to Computational Thinking [ANN] Arblib.jl

It suggest latest stable, mentioning 1.6.0 but that’s not the latest, I would suggest using 1.94 (or even later, 1.10 is about to be released, rc2 might be ok/better).

I wouldn’t use 1.6.x for anything, I think the docs are just outdated, though (latest) 1.6.x should also work.

Hopefully at some point those approaches will get merged and you can use B. without preinstalling, with help of A. or just A alone for arbitrary Julia code.

p_f · November 28, 2023, 2:17pm

Thank you for all this information! I’ll have a proper read through it all

LeePhillips · November 28, 2023, 5:44pm

An approach using the PlutoSliderServer is demonstrated at ⚡ Pluto.jl ⚡

bjarthur · March 20, 2024, 10:41pm

WGLMakie and Bonito can turn your GLMakie window into a live webpage that can be accessed from anywhere. just combine the concepts given in these two examples:

github.com

SimonDanisch/Bonito.jl/blob/master/examples/wglmakie.jl

using Bonito, WGLMakie
using GeometryBasics
using FileIO
using Bonito: @js_str, onjs, App, Slider
using Bonito.DOM
Bonito.browser_display()

set_theme!(resolution=(1200, 800))

hbox(args...) = DOM.div(args...)
vbox(args...) = DOM.div(args...)

app = App() do
    return hbox(
        vbox(
            scatter(1:4, color=1:4),
            scatter(1:4, color=rand(RGBAf, 4)),
            scatter(1:4, color=rand(RGBf, 4)),
            scatter(1:4, color=:red),
            scatter(1:4)

This file has been truncated. show original

github.com

SimonDanisch/Bonito.jl/blob/master/examples/serve.jl

using Bonito, Observables
using Bonito: @js_str, onjs, Button, TextField, Slider, linkjs, Session, App
using Bonito.DOM
using Hyperscript

app = App() do session::Session
    s1 = Slider(1:100)
    s2 = Slider(1:100)
    b = Button("hi")
    t = TextField("enter your text")
    on(println, s1.value)
    linkjs(session, s1.index, s2.index)
    test = [1,2,3]
    onjs(session, s1.value, js"(v)=> console.log($test)")
    on(t) do text
        println(text)
    end
    return DOM.div(s1, s2, b, t)
end

This file has been truncated. show original

Dale_James_Black · March 21, 2024, 1:58pm

Also check out glassnotebook.io, which was recently announced

Looks like it might pair well with Bonito! Although I haven’t tested it out yet.