# How to trigger an event after rendering in a Bonito app

**URL:** <https://discourse.julialang.org/t/how-to-trigger-an-event-after-rendering-in-a-bonito-app/117912>\
**Category:** General Usage\
**Tags:** question, plotting, webapps\
**Created:** [August 7, 2024, 9:13am UTC](https://discourse.julialang.org/t/how-to-trigger-an-event-after-rendering-in-a-bonito-app/117912 "2024-08-07T09:13:55Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![gdkrmr](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/gdkrmr/32/2791_2.png) [@gdkrmr](https://discourse.julialang.org/u/gdkrmr)\
**Post date:** [August 7, 2024, 9:13am UTC](https://discourse.julialang.org/t/how-to-trigger-an-event-after-rendering-in-a-bonito-app/117912/1 "2024-08-07T09:13:55Z")

</div>

With this little Bonito app, how can I call `update_cam!` after the plot is rendered on the client?

```julia-repl
julia> App() do session
         button = Button("reset cam")
         fig = Figure()
         ax = LScene(fig[1, 1])
         scatter!(ax, randn(10), randn(10), randn(10))
         on(button.value) do _
           # this should be called after the plot is done rendering:
           update_cam!(ax.scene, Vec3f(1), Vec3f(0), Vec3f(0,0,1))
         end
         return DOM.div(button, fig)
       end

```

I have tried:

```julia
Bonito.on_document_load(session, js"""                             
        __lookup_interpolated('15348605119376789901').notify(true);
""")    

```

but I don’t know how to get the ID of the element.

---

<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:** [August 7, 2024, 9:18am UTC](https://discourse.julialang.org/t/how-to-trigger-an-event-after-rendering-in-a-bonito-app/117912/2 "2024-08-07T09:18:49Z")

</div>

Why do you need to call `update_cam!` after rendering? Does it error if you do it before, or simply not work? Or do you need to update the cam after rendering for another reason?

---

<div class="post-metadata">

**Author:** ![gdkrmr](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/gdkrmr/32/2791_2.png) [@gdkrmr](https://discourse.julialang.org/u/gdkrmr)\
**Post date:** [August 7, 2024, 9:48am UTC](https://discourse.julialang.org/t/how-to-trigger-an-event-after-rendering-in-a-bonito-app/117912/3 "2024-08-07T09:48:50Z")

</div>

I have a 3d plot and there are a couple of issues:

- On my computer the plot doesn’t rotate around the origin after the first load. It is just slightly out of balance and the plot wobbles around when rotating (it is a sphere).
- On a colleague’s computer the z-Axis is not straight any more after a while. I can observe the same behavior for me but very rarely and usually if there is some kind of reload happening while I rotate the plot.

---

<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:** [August 8, 2024, 8:29am UTC](https://discourse.julialang.org/t/how-to-trigger-an-event-after-rendering-in-a-bonito-app/117912/4 "2024-08-08T08:29:13Z")

</div>

I’d do it like this:

```julia
using Bonito, WGLMakie

App() do session
    button = Button("reset cam")
    fig = Figure()
    ax = LScene(fig[1, 1])
    scatter!(ax, randn(10), randn(10), randn(10))
    reset = Observable(false)
    connect!(reset, button.value)
    on(reset) do _
        # this should be called after the plot is done rendering:
        update_cam!(ax.scene, Vec3f(1), Vec3f(0), Vec3f(0, 0, 1))
    end
    js = js"""
        $(fig.scene).then(s=> $(reset).notify(true))
    """
    return DOM.div(button, fig, js)
end

```

You can just interpolate the values/observables into javascript.  
If you interpolate a scene into js, it returns a promise which will get resolved as soon as the scene is fully loaded.

---

<div class="post-metadata">

**Author:** ![gdkrmr](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/gdkrmr/32/2791_2.png) [@gdkrmr](https://discourse.julialang.org/u/gdkrmr)\
**Post date:** [August 18, 2024, 5:40pm UTC](https://discourse.julialang.org/t/how-to-trigger-an-event-after-rendering-in-a-bonito-app/117912/5 "2024-08-18T17:40:12Z")

</div>

Thanks I’ll try it out as soon as I can.

Regarding the rotation issue, I think I know what causes it:

- It is a 3d object with a texture that takes some time to compute and transmit.
- The texture updates.
- During the time the texture updates, the 3d graphic is unresponsive and if you drag it, it looses its center and the z-axis does not point upward any more. The more you drag it during the unresponsive phase, the worse it gets.

---

<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:** [August 19, 2024, 10:15am UTC](https://discourse.julialang.org/t/how-to-trigger-an-event-after-rendering-in-a-bonito-app/117912/6 "2024-08-19T10:15:14Z")

</div>

Oh, that’s an interesting observation.  
Can you open an issue with this?  
I can see how this happens, but we should certainly fix it.

---

<div class="post-metadata">

**Author:** ![gdkrmr](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/gdkrmr/32/2791_2.png) [@gdkrmr](https://discourse.julialang.org/u/gdkrmr)\
**Post date:** [August 26, 2024, 9:54am UTC](https://discourse.julialang.org/t/how-to-trigger-an-event-after-rendering-in-a-bonito-app/117912/7 "2024-08-26T09:54:41Z")

</div>

Opened the issue [1], thanks!

[1] [z-Axis and center of rotation change unintendedly · Issue #4246 · MakieOrg/Makie.jl · GitHub](https://github.com/MakieOrg/Makie.jl/issues/4246)