# Interaction

Makie offers a sophisticated referencing system to share attributes across the Scene in your plot. This is great for interaction, animations and saving resources – also if the backend decides to put data on the GPU you might even share those in GPU memory.

Interaction and animations in Makie are handled by using Observables. An "observable", called Node in Makie, is a structure that can have its value updated interactively. Interaction, animations and more are done using Nodes and event triggers.

In this page we overview how the Nodes pipeline works, how event-triggering works, and we give an introduction to the existing "atomic" functions for interaction. Examples that use interaction can be found in the Examples/interaction page (see Example Gallery as well).

Have a peek at Animations for some more information once you're done with this.

## Node interaction pipeline

### The Node structure

A Node is a Julia structure that allows its value to be updated interactively. This means that anything that uses a Node could have its behavior updated interactively, as we will showcase in this page.

Let's start by creating a Node:

using Makie, AbstractPlotting
x = Node(0.0) # set up a Node, and give it a default value of 0.0
Observable{Float64} with 0 listeners. Value:
0.0

The value of the x can be changed by setting the empty index, i.e.:

x[] = 3.34;
3.34

Notice that you can access the value of a Node by indexing it with nothing, i.e. x[]. However, we recommend to use the function to_value to get the value of a Node, because to_value is a general function that works with all types instead of only Nodes. E.g.:

to_value(x)
3.34

### Nodes depending on other Nodes

You can create a node depending on another node using lift:

f(a) = a^2
y = lift(a -> f(a), x)
Observable{Float64} with 0 listeners. Value:
11.1556

Now, for every value of the Node x, the derived Node y will hold the value f(x). Updating the value of x will also update the value of y!

For example:

x[] = 10.0
for i in (x, y)
println(to_value(i))
end
10.0
100.0

That is to say, the Node y maps the function f (which is a -> a^2 in this case) on x whenever the Node x is updated, and updates the corresponding value in y. This is the basis of updating Nodes, and is used for updating plots in Makie. Any plot created based on this pipeline system will get updated whenever the nodes it is based on are updated!

Note

For now, lift is just an alias for Observables.map, and Node is just an alias for Observables.Observable. This allows decoupling of the APIs.

#### Shorthand macro for lift

When using lift, it can be tedious to reference each participating Node at least three times, once as an argument to lift, once as an argument to the closure that is the first argument, and at least once inside the closure:

x = Node(rand(100))
y = Node(rand(100))
z = lift((x, y) -> x .+ y, x, y)
Observable{Array{Float64,1}} with 0 listeners. Value:
[1.1646872211897659, 1.0406188896045954, 0.8722864302623714, 0.3161967788787763, 1.2211816172183811, 1.05264153922646, 1.1540515788301338, 1.3416113171277808, 1.4180818504338442, 1.1936832326904072  …  1.8148304739394288, 1.4403683306894064, 1.4861240254364283, 1.0931248457107217, 1.7318011951513095, 1.3909263374653782, 0.7420774222420885, 1.4959624201409316, 1.1945478743549316, 0.9378267622338554]

To circumvent this, you can use the @lift macro. You simply write the operation you want to do with the lifted Nodes and prepend each Node variable with a dollar sign $. The macro will lift every Node variable it finds and wrap the whole expression in a closure. The equivalent to the above statement using @lift is: z = @lift($x .+ $y) Observable{Array{Float64,1}} with 0 listeners. Value: [1.1646872211897659, 1.0406188896045954, 0.8722864302623714, 0.3161967788787763, 1.2211816172183811, 1.05264153922646, 1.1540515788301338, 1.3416113171277808, 1.4180818504338442, 1.1936832326904072 … 1.8148304739394288, 1.4403683306894064, 1.4861240254364283, 1.0931248457107217, 1.7318011951513095, 1.3909263374653782, 0.7420774222420885, 1.4959624201409316, 1.1945478743549316, 0.9378267622338554] This also works with multiline statements and tuple or array indexing: multiline_node = @lift begin a =$x[1:50] .* $y[51:100] b = sum($z)
a .- b
end
Observable{Array{Float64,1}} with 0 listeners. Value:
[-97.4590728769231, -97.38183939472582, -97.6240434770727, -97.80322647485386, -97.6296960283249, -97.51562373136977, -97.51104136354289, -97.59860187401685, -97.60865273094183, -97.47558730846028  …  -97.20851104848691, -97.77506377101929, -97.5516402652058, -97.66780094512728, -97.47389568235378, -97.68378614465563, -97.73964877172344, -97.81817990521387, -97.57206923093145, -97.73553295414168]

### Event triggering

Often it is the case that you want an event to be triggered each time a Node has its value updated. This is done using the on-do block from Observables. For example, the following code block "triggers" whenever x's value is changed:

on(x) do val
println("x just got the value \$val")
end
#9 (generic function with 1 method)

As you can see, at we have run this block in Julia, but nothing happened yet. Instead, a function was defined. However, upon doing:

x[] = rand(100);
100-element Array{Float64,1}:
0.43623830438383027
0.7100553684350068
0.04837313286616651
0.7341338562401607
0.55549396216069
0.23363080051267993
0.5983035861758317
0.26602573757340764
0.44403625261583324
0.9783594237567506
⋮
0.009980635631183787
0.20891429274665185
0.5116333007266554
0.8183972464669629
0.22466597252893816
0.22441945986531509
0.4681194237156845
0.08942477254559589
0.809572068873738   

Boom! The event of the on-do block was triggered! We will be using this in the following paragraphs to establish interactivity.

For more info please have a look at Observables.

## Atomic interaction functions

This section overviews some simple and specific functions that make interaction much simpler.

coming soon...

There are three principal plot elements that you can use to make your plot interactive. These are Slider, textslider, and Button.

### Slider

Sliders are quite simple to make. They can be created by a call to the function slider, which usually takes the form:

sl = slider(range::AbstractVector, raw = true, camera = campixel!, start = somevalue)

which makes sl a Scene with only one slider. The slider will go through range, and start at somevalue. range must be a subtype of AbstractVector, meaning an Array{T, 1}, a LinRange, et cetera.

To access the value of the slider as an Observable, we can simply access sl[end][:value], which will return an Observable which will contain the value that the slider is on. You can then use that Observable in a call to lift.

A common way to use sliders is to hbox or vbox them with the Scene which depends on them.

### Button

Buttons are clickable markers that can call a function on click, passing to it the number of clicks so far, on each click. A simple exmaple is as follows:

b1 = button("Test Button")
lift(b1[end].clicks) do clicks
println("Button was clicked!")
end

### Textslider

Textsliders are a special case of sliders, with two key diferences - they automatically hbox a label with the slider, and they return a 2-tuple consisting of the Scene of the slider, and its value as an Observable. Usually, they will be called like so:

sl, ol = textslider(-1:0.01:1, "label", start = 0)

## Interaction using the mouse

A few default Nodes are already implemented in a scene's Events (see them in scene.events), so to use them in your interaction pipeline, you can simply lift them.

For example, for interaction with the mouse cursor, lift the mouseposition signal.

pos = lift(scene.events.mouseposition) do mpos
# do stuff
end

## Interaction using the keyboard

To listen to keyboard events, you can lift scene.events.keyboardbuttons, which returns an enum that can be used with some utility functions to implement a keyboard event handler.

dir = lift(scene.events.keyboardbuttons) do but
global last_dir
ispressed(but, Keyboard.left) && return 1
ispressed(but, Keyboard.up) && return 2
ispressed(but, Keyboard.right) && time[] += 1
ispressed(but, Keyboard.down) && return 0
last_dir
end

<!–TODO make an actual example TODO can we make a keyboard viewer in Makie?–>

record(scene, "test.mp4"; framerate = 10) do io
end
This will sample from the Scene scene for 10 seconds, at a rate of 10 frames per second.