search

SimonDanisch / Bonito.jl

Serving JS to the browser
MIT License
215 stars 31 forks source link

toggle switch widget #86

Open gszep opened 3 years ago

gszep commented 3 years ago

How would I go about implementing a simple toggle switch and bind it to an observable? Like Button or Slider

bjarthur commented 1 year ago

i would like a toggle as well. happy to help develop the code if someone can point me in the right direction.

bjarthur commented 1 year ago

my use case, is to retain the interactivity of this static HTML:

using WGLMakie, Bonito
using Downloads, FileIO
WGLMakie.activate!()

page = Page(offline=true, exportable=true)
app = Bonito.App() do session::Session
    fig = Figure()

    ax = Axis(fig[1, 1])

    toggles = [Toggle(fig, active = active) for active in [true, false]]
    labels = [Label(fig, lift(x -> x ? "$l visible" : "$l invisible", t.active))
        for (t, l) in zip(toggles, ["sine", "cosine"])]

    fig[1, 2] = grid!(hcat(toggles, labels), tellheight = false)

    line1 = lines!(0..10, sin, color = :blue, visible = false)
    line2 = lines!(0..10, cos, color = :red)

    connect!(line1.visible, toggles[1].active)
    connect!(line2.visible, toggles[2].active)

    return Bonito.record_states(session, DOM.div(fig))
end

open("toggle-legend.html", "w") do io
    println(io, "<head></head><body>")
    show(io, MIME"text/html"(), app)
    println(io, "</body></html>")
end

i'd be happy to replace the toggles with checkboxes, but the former is only in Makie and the latter only in Bonito. which is it easier to add?