# Timer or play button in Bonito app

**URL:** https://discourse.julialang.org/t/timer-or-play-button-in-bonito-app/123926
**Category:** General Usage
**Tags:** plotting, webapps, wglmakie
**Created:** [December 17, 2024, 2:11pm UTC](https://discourse.julialang.org/t/timer-or-play-button-in-bonito-app/123926 "2024-12-17T14:11:46Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![snowgum](https://avatars.discourse-cdn.com/v4/letter/s/ecc23a/32.png) [@snowgum](https://discourse.julialang.org/u/snowgum)
#### Post date: [December 17, 2024, 2:11pm UTC](https://discourse.julialang.org/t/timer-or-play-button-in-bonito-app/123926/1 "2024-12-17T14:11:46Z")

</div>

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`:

```julia
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?

---

<div class="post-metadata">

### Author: ![sdanisch](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/sdanisch/32/1406_2.png) [@sdanisch](https://discourse.julialang.org/u/sdanisch)
#### Post date: [December 17, 2024, 3:58pm UTC](https://discourse.julialang.org/t/timer-or-play-button-in-bonito-app/123926/2 "2024-12-17T15:58:16Z")

</div>

I implemented something like that in NDViewer:

> <https://github.com/MakieOrg/NDViewer.jl/blob/main/src/bonito-widgets.jl#L3>

It also has a fallback for a pure GLMakie app:

> <https://github.com/MakieOrg/NDViewer.jl/blob/main/src/makie-widgets.jl#L2>

---

<div class="post-metadata">

### Author: ![snowgum](https://avatars.discourse-cdn.com/v4/letter/s/ecc23a/32.png) [@snowgum](https://discourse.julialang.org/u/snowgum)
#### Post date: [December 17, 2024, 4:26pm UTC](https://discourse.julialang.org/t/timer-or-play-button-in-bonito-app/123926/3 "2024-12-17T16:26:49Z")

</div>

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:

```julia
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.

---

<div class="post-metadata">

### Author: ![sdanisch](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/sdanisch/32/1406_2.png) [@sdanisch](https://discourse.julialang.org/u/sdanisch)
#### Post date: [December 17, 2024, 5:24pm UTC](https://discourse.julialang.org/t/timer-or-play-button-in-bonito-app/123926/4 "2024-12-17T17:24:45Z")

</div>

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!