# How to record interactive visualisation with cursor clicking?

**URL:** <https://discourse.julialang.org/t/how-to-record-interactive-visualisation-with-cursor-clicking/93465>\
**Category:** Visualization\
**Tags:** makie, interactivity\
**Created:** [January 24, 2023, 3:44pm UTC](https://discourse.julialang.org/t/how-to-record-interactive-visualisation-with-cursor-clicking/93465 "2023-01-24T15:44:18Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![vladdez](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/vladdez/32/45806_2.png) [@vladdez](https://discourse.julialang.org/u/vladdez)\
**Post date:** [January 24, 2023, 3:44pm UTC](https://discourse.julialang.org/t/how-to-record-interactive-visualisation-with-cursor-clicking/93465/1 "2023-01-24T15:44:18Z")

</div>

I have an interactive topoplot: clicking on a channel marker shows its name. I want to record it so that I can see how I press a marker with the cursor and its name changes. Do you know how to do this?

I tried, but the animation remains frozen.

```julia
let    
    f = Figure(backgroundcolor = RGBf(0.98, 0.98, 0.98))
    data, pos = TopoPlots.example_data()
    N = 1:length(pos)

    positions = Observable(rand(Point2f, 10))
    topo_axis = Axis(f[1, 1], aspect = DataAspect())
    
	xlims!(low = -0.2, high = 1.2)
	ylims!(low = -0.2, high = 1.2)
    cmap = collect(ColorScheme(range(colorant"black", colorant"black", length=2)))
    
    mark_size = repeat([21], 64)
    mark_color = repeat([1], 64)
    labels = ["s$i" for i in 1:size(data, 1)]
    topo = eeg_topoplot!(topo_axis, data[:, 340, 1], labels;
        mark_color, 
        N, 
        positions=pos, 
        interpolation=NullInterpolator(),
        enlarge=1,
        colormap = cmap,
        markersize = mark_size,
        label_text=false
    ) 
    hidedecorations!(current_axis())
    hidespines!(current_axis())

    i = Observable(1)
    str = lift((i, labels) -> "$(labels[i])", i, labels)
    text!(topo_axis, 1, 1, text = str, align = (:center, :center))
    on(events(f).mousebutton, priority = 2) do event
        if event.button == Mouse.left && event.action == Mouse.press
            plt, p = pick(topo_axis)
            i[] = p
        end
    end
    record(f, "test.mp4"; framerate = 10) do io
        for i = 1:100
            sleep(1/fps)
            recordframe!(io)
        end
    end
    f
end

```

 ![image](https://global.discourse-cdn.com/julialang/original/3X/a/2/a2dfcfde87e0c9e84f67a658416b0f5c1b923103.png)

---

<div class="post-metadata">

**Author:** ![ffreyer](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/ffreyer/32/21569_2.png) [@ffreyer](https://discourse.julialang.org/u/ffreyer)\
**Post date:** [January 24, 2023, 4:30pm UTC](https://discourse.julialang.org/t/how-to-record-interactive-visualisation-with-cursor-clicking/93465/2 "2023-01-24T16:30:05Z")

</div>

If you goal is to record a video where specific markers are selected over time I would just trigger `i[] = p` in record. (You also don’t need the sleep then)

For recording a figure you’re interacting with you can try this. It’s more or less what record is doing but with a `display` after `VideoStream` to reopen the window.

```julia
fig, ax, p = scatter(rand(10))
io = VideoStream(fig, format = "mp4", framerate = 10)
display(fig)
for i = 1:100
    sleep(1/10)
    recordframe!(io)
end
save("test.mp4", io)

```

---

<div class="post-metadata">

**Author:** ![vladdez](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/vladdez/32/45806_2.png) [@vladdez](https://discourse.julialang.org/u/vladdez)\
**Post date:** [January 25, 2023, 12:20pm UTC](https://discourse.julialang.org/t/how-to-record-interactive-visualisation-with-cursor-clicking/93465/3 "2023-01-25T12:20:34Z")

</div>

Thank you for trying, but the window did not reopen for me.

---

<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:** [January 25, 2023, 1:34pm UTC](https://discourse.julialang.org/t/how-to-record-interactive-visualisation-with-cursor-clicking/93465/4 "2023-01-25T13:34:56Z")

</div>

Try `VideoStream(...; visible=true)`

---

<div class="post-metadata">

**Author:** ![vladdez](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/vladdez/32/45806_2.png) [@vladdez](https://discourse.julialang.org/u/vladdez)\
**Post date:** [January 25, 2023, 2:10pm UTC](https://discourse.julialang.org/t/how-to-record-interactive-visualisation-with-cursor-clicking/93465/5 "2023-01-25T14:10:19Z")

</div>

> [@sdanisch](#):
>
> ; visible=true

Cool! Thanks, now it works!  
Cursor is not shown, but still great.

---

<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:** [January 25, 2023, 2:13pm UTC](https://discourse.julialang.org/t/how-to-record-interactive-visualisation-with-cursor-clicking/93465/6 "2023-01-25T14:13:23Z")

</div>

At some point I implemented a little scatter plot that went with the mouse and changed size/color when clicked 😉  
Could have a recipe for that… But I actually started using screen2gif quite a bit for recordings, instead of setting up `VideoRecorder` etc 😉

---

<div class="post-metadata">

**Author:** ![vladdez](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/vladdez/32/45806_2.png) [@vladdez](https://discourse.julialang.org/u/vladdez)\
**Post date:** [January 25, 2023, 2:19pm UTC](https://discourse.julialang.org/t/how-to-record-interactive-visualisation-with-cursor-clicking/93465/7 "2023-01-25T14:19:59Z")

</div>

Yeah, screen2gif is great!

---

<div class="post-metadata">

**Author:** ![jules](https://avatars.discourse-cdn.com/v4/letter/j/41988e/32.png) [@jules](https://discourse.julialang.org/u/jules)\
**Post date:** [January 25, 2023, 4:39pm UTC](https://discourse.julialang.org/t/how-to-record-interactive-visualisation-with-cursor-clicking/93465/8 "2023-01-25T16:39:47Z")

</div>

Supposedly ffmpeg can also do screen recordings, never tried that though.