# GLMakie beginners help: Multiple sliders and an arrow

**URL:** <https://discourse.julialang.org/t/glmakie-beginners-help-multiple-sliders-and-an-arrow/92113>\
**Category:** New to Julia\
**Tags:** plotting, makie, glmakie\
**Created:** [December 25, 2022, 8:44pm UTC](https://discourse.julialang.org/t/glmakie-beginners-help-multiple-sliders-and-an-arrow/92113 "2022-12-25T20:44:15Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![manya](https://avatars.discourse-cdn.com/v4/letter/m/bcef8e/32.png) [@manya](https://discourse.julialang.org/u/manya)\
**Post date:** [December 25, 2022, 8:44pm UTC](https://discourse.julialang.org/t/glmakie-beginners-help-multiple-sliders-and-an-arrow/92113/1 "2022-12-25T20:44:15Z")

</div>

Hi,

I am learning sliders from this tutorial line 18 to 87 [[tutorials/Tutorial02x10.jl at master · julia4ta/tutorials · GitHub](https://github.com/julia4ta/tutorials/blob/master/Series%2002/Tutorial%2002x10/Tutorial02x10.jl)] and trying to edit such that it includes multiple sliders and an arrow from a reference point pointing towards the resultant point on the grid of 2D coordinate plane.

```julia
lsgrid = labelslidergrid!(fig,
    ["scale", "x-reference", "y-reference"], #edited from original
    Ref(LinRange(-10:0.01:10));
    formats = [x -> "$(round(x, digits = 2))"],
    labelkw = Dict([(:fontsize, 30)]),
    sliderkw = Dict([(:linewidth, 24)]),
    valuekw = Dict([(:fontsize, 30)])
)

```

Three sliders are:

```julia
# create listener
scale = lsgrid.sliders[1].value #edited from original

x-reference = lsgrid.sliders[2].value #edited from original

y-reference = lsgrid.sliders[3].value #added 

```

Evaluating (x-result, y-result) as:

```julia
x = -10:0.01:10

m = @lift($scale .* x.^2) #quadratic function #edited from original
line1 = lines!(ax1, x, m, color = :blue, linewidth = 5) #edited from original

#new multi-variable scalar-valued functions
p(x,y,scale) = (x + scale * y-1)^2/(scale^2) #added 
z(x,y,scale) = cbrt(-p(x,y,scale)/2) #added 

#(x-result,y-result) = (x/1+(2*scale)*z ,y+z) #the x and y on the right hand side are (x-reference,y-reference)

```

How to make sliders for the input (x-reference,y-reference) and plot an arrow of scaling from this to (x-result,y-result)?

Any reference/help is appreciated. Thank you!

---

<div class="post-metadata">

**Author:** ![garrek](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/garrek/32/27937_2.png) [@garrek](https://discourse.julialang.org/u/garrek)\
**Post date:** [December 25, 2022, 11:12pm UTC](https://discourse.julialang.org/t/glmakie-beginners-help-multiple-sliders-and-an-arrow/92113/2 "2022-12-25T23:12:12Z")

</div>

That tutorial you are referencing is quite old now. For example, `labelslidergrid!` will be deprecated soon and is replaced with `SliderGrid`. Have you tried the examples from the Makie website?

[https://docs.makie.org/stable/examples/blocks/](https://docs.makie.org/stable/examples/blocks/)

I think what you’ll need to do is use `connect!` to connect an observable to a slider. For example:

```julia
x = Observable(1.0)

sg = SliderGrid(fig[1, 2],
            label = "slider1", range = -10:0.1:10, startvalue = 1)

connect!(x, sg[1])

```

A general problem I see in your code is the dash `-` in `x-reference` and `y-reference`. Julia will not see this as a variable. You should instead use something like `x_ref` or `xref`.

Also, I’ve been making a small collection of GLMakie interactive examples on my GitHub page, in case any of these are useful:

> **[GitHub - garrekstemo/InteractivePlotExamples.jl: Interactive plot examples...](https://github.com/garrekstemo/InteractivePlotExamples.jl)**
>
> Interactive plot examples using GLMakie, the GPU-powered Julia plotting package - GitHub - garrekstemo/InteractivePlotExamples.jl: Interactive plot examples using GLMakie, the GPU-powered Julia plo...

---

<div class="post-metadata">

**Author:** ![fatteneder](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/fatteneder/32/33991_2.png) [@fatteneder](https://discourse.julialang.org/u/fatteneder)\
**Post date:** [December 25, 2022, 11:20pm UTC](https://discourse.julialang.org/t/glmakie-beginners-help-multiple-sliders-and-an-arrow/92113/3 "2022-12-25T23:20:34Z")

</div>

I wasn’t 100% sure what you asked for, but I crafted something anyways (based on the tutorial link you gave above):

```julia
using GLMakie
GLMakie.activate!()

################################################################################
# Sliders
################################################################################

# initialize plot

fig = Figure(resolution = (3840, 2160))

# add axis

ax1 = fig[1, 1] = Axis(fig,
    # borders
    aspect = 1,
    # title
    title = "Sliders Tutorial",
    titlegap = 48, titlesize = 60,
    # x-axis
    xautolimitmargin = (0, 0), xgridwidth = 2, xticklabelsize = 36,
    xticks = LinearTicks(20), xticksize = 18,
    # y-axis
    yautolimitmargin = (0, 0), ygridwidth = 2, yticklabelpad = 14,
    yticklabelsize = 36, yticks = LinearTicks(20), yticksize = 18
)

# darken axes

vlines!(ax1, [0], linewidth = 2)
hlines!(ax1, [0], linewidth = 2)

# create sliders

lsgrid = labelslidergrid!(fig,
    ["scale", "x-reference", "y-reference"], #edited from original
    Ref(LinRange(-10:0.01:10));
    formats = [x -> "$(round(x, digits = 2))"],
    labelkw = Dict([(:textsize, 30)]),
    sliderkw = Dict([(:linewidth, 24)]),
    valuekw = Dict([(:textsize, 30)])
)

# set starting position for slope

set_close_to!(lsgrid.sliders[1], 1.0)

# layout sliders

sl_sublayout = GridLayout(height = 150)
fig[2, 1] = sl_sublayout
fig[2, 1] = lsgrid.layout

# draw a function

x = -10:0.01:10
m = @lift($scale .* x.^2) #quadratic function #edited from original
line1 = lines!(ax1, x, m, color = :blue, linewidth = 5) #edited from original

# create listeners

scale = lsgrid.sliders[1].value #edited from original
xreference = lsgrid.sliders[2].value #edited from original
yreference = lsgrid.sliders[3].value #added 

# xreference, yreference are Float32s
# but for arrows! below we need vectors of Float32s, so we promote them here

# arrow base points
xbase = @lift([$xreference])
ybase = @lift([$yreference])

#new multi-variable scalar-valued functions
p(x,y,scale) = (x + scale * y-1)^2/(scale^2) #added
z(x,y,scale) = cbrt(-p(x,y,scale)/2) #added

# arrow head points
# note: here we also return vectors
xhead = lift(xreference, yreference, scale) do x, y, s
    return [x/1 + 2*s * z(x,y,s)]
end
yhead = lift(xreference, yreference, scale) do x, y, s
    return [y + z(x,y,s)]
end

arrows!(ax1, xbase, ybase, xhead, yhead)

display(fig)

```

The above gives you now the arrow you can control with the sliders. Maybe you need to tune the computation of the end points a bit, because right now it does not seem to make any sense to me 😆

Modifications I made to your code:

- You can’t use `-` in variable names, so I renamed `x-reference` to `xreference`, etc.
- I replaced `:fontsize` with `:textsize`, because that was changed recently, but you might be running an older version of Makie.
- Arrows can be drawn with `arrows`, cf. [arrows - Beautiful Makie](https://beautiful.makie.org/dev/examples/generated/2d/arrows/arrows/?h=arrow). For this to work, one has to pass `Vector{Float32}` (or Observables thereof) to `arrows!`. Hence, I add an extra `lift` for that to promote the `xreference, yreference`. The reason it wants a Vector instead of a single number for each component is that `arrows` is optimized to draw vector fields, see the link above.

Last remark: Next time please provide a minimal working example (MWE) of the code that is already working and others can then use to build on top off.

---

<div class="post-metadata">

**Author:** ![manya](https://avatars.discourse-cdn.com/v4/letter/m/bcef8e/32.png) [@manya](https://discourse.julialang.org/u/manya)\
**Post date:** [December 26, 2022, 5:36am UTC](https://discourse.julialang.org/t/glmakie-beginners-help-multiple-sliders-and-an-arrow/92113/4 "2022-12-26T05:36:20Z")

</div>

Hi Florian and Garrek,

Thanks for your replies and references! I will try to use above hints.

---

<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:** [December 26, 2022, 8:36pm UTC](https://discourse.julialang.org/t/glmakie-beginners-help-multiple-sliders-and-an-arrow/92113/5 "2022-12-26T20:36:27Z")

</div>

It’s `fontsize` everywhere now, not `textsize` 🙂