Timer or play button in Bonito app

snowgum · December 17, 2024, 2:11pm

I’m using Bonito with WGLMakie to visualise 2D slices of multi-dimensional data in heatmaps. I got a simple slider working together with heatmap (the slider value slices one variable dimension) for a 3D array data:

app = App() do
    N = size(data)[end]
    slice_idx = Slider(1:N)
    slice = map(slice_idx) do idx
        view(data, :, :, idx)
    end
    fig = Figure(size=(800,800))
    ax = Axis(fig[1,1], aspect=1)
    heat = heatmap!(ax, slice,  colorrange=(0, 500))
    return Bonito.DOM.div(slice_idx, fig)
end

I would like to have the option to animate this automatically with the press of a button (ie, the value of the slice_idx changing with time), but could not find examples with a timer option. I’ve seen something similar in PlutoUI: the Clock() button, but how to do this with Bonito and WGLMakie?

sdanisch · December 17, 2024, 3:58pm

I implemented something like that in NDViewer:

github.com

MakieOrg/NDViewer.jl/blob/main/src/bonito-widgets.jl#L3


      
          using Bonito
          
          function PlayButton(slider, range, session)
              button = Bonito.Button("▶"; style=Styles("min-width" => "1rem", "height" => "2rem", "margin" => "0px"))
              not_yet_open = true
              playing = Threads.Atomic{Bool}(false)
              time_per_frame = Threads.Atomic{Float64}(1 / 30)
              task = @async let i = first(range)
                  while true
                      yield()
                      if isopen(session)
                          not_yet_open = false
                      end

It also has a fallback for a pure GLMakie app:

github.com

MakieOrg/NDViewer.jl/blob/main/src/makie-widgets.jl#L2


      
          
          function play_slider(figure, label, range)
              l = Label(figure[1, 1], label, halign=:left)
              button = Makie.Button(figure[1, 2]; label=">")
              slider = Makie.Slider(figure[1, 3]; range=range)
              vl = Makie.Label(figure[1, 4], map(string, slider.value), halign=:right)
              sgrid = figure[1, 5] = GridLayout()
              speed_button = [
                  Makie.Button(sgrid[1, 1]; label="1") => 1,
                  Makie.Button(sgrid[1, 2]; label="10") => 10,
                  Makie.Button(sgrid[1, 3]; label="24") => 24,
                  Makie.Button(sgrid[1, 4]; label="60") => 60,

snowgum · December 17, 2024, 4:26pm

Thank you for the quick answer, this is exactly what I was looking for! And NDViewer looks awesome, has lots of the features I was looking into, so I will play with it for sure.

For completeness, here is your PlaySlider in my simple example from before:

App() do session
    N = size(data)[end]
    slice = Observable(view(data, :, :, 1))
    play = PlaySlider("time", 1:N)
    fig = Figure(size=(800,800))
    ax = Axis(fig[1,1], aspect=1)
    Makie.on_latest(i -> (slice[] = view(data, :, :, i)), session, play.value)
    heat = heatmap!(ax, slice,  colorrange=(0, 500))
    return Bonito.DOM.div(play, fig)
end

I might extend it to make the framerate also an observable, since this is something we often want to control.

sdanisch · December 17, 2024, 5:24pm

Yeah let me know if you want to contribute to NDViewer as well, if you find any improvements
That’d be amazing, I don’t have time for it right now, but maybe next year and I’m happy to merge improvements!