# How to switch between several layouts in Makie?

**URL:** <https://discourse.julialang.org/t/how-to-switch-between-several-layouts-in-makie/93578>\
**Category:** Visualization\
**Tags:** makie, makielayout\
**Created:** [January 26, 2023, 3:21pm UTC](https://discourse.julialang.org/t/how-to-switch-between-several-layouts-in-makie/93578 "2023-01-26T15:21:28Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![pzabka](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/pzabka/32/46255_2.png) [@pzabka](https://discourse.julialang.org/u/pzabka)\
**Post date:** [January 26, 2023, 3:21pm UTC](https://discourse.julialang.org/t/how-to-switch-between-several-layouts-in-makie/93578/1 "2023-01-26T15:21:28Z")

</div>

Hello,  
I am creating a GUI in Makie, and I would like to be able to change the layout with a menu widget. So far, I can add widgets (GridLaouts) at runtime, but I didn’t find how to hide or replace them. See the mwe below. It should switch between layouts, but it puts one over another instead.

```julia
using GLMakie

items =["buttons", "slider"]
fig = Figure()
fig[1,1] = menu = Menu(fig, options=items)

on(menu.selection) do s
    if s == "buttons"
        fig[2,1] = gl1 = GridLayout()
        gl1[1,1] = Button(fig, label ="button 1")
        gl1[1,2] = Button(fig, label ="button 2")
    else
        fig[2,1] = gl2 = GridLayout()
        gl2[1,1] = Slider(fig, range= 0:1)
    end
end

fig

```

---

<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 26, 2023, 4:29pm UTC](https://discourse.julialang.org/t/how-to-switch-between-several-layouts-in-makie/93578/2 "2023-01-26T16:29:55Z")

</div>

Maybe compare with this recent post, the deletion functionality of Makie is not yet that well figured out:

> [@Removing row from GridLayout](https://discourse.julialang.org/t/removing-row-from-gridlayout/93196/3):
>
> thank you for the quick answer. So as I understand it at this point I can’t fully remove it. I’ll try to think of a walk around solution.

A GridLayout only describes where to put certain elements, and multiple objects can be in the same location, that’s why your approach doesn’t work. It’s not like a matrix where you overwrite things.

---

<div class="post-metadata">

**Author:** ![pzabka](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/pzabka/32/46255_2.png) [@pzabka](https://discourse.julialang.org/u/pzabka)\
**Post date:** [January 27, 2023, 5:52am UTC](https://discourse.julialang.org/t/how-to-switch-between-several-layouts-in-makie/93578/3 "2023-01-27T05:52:01Z")

</div>

Thank you for the answer. I’ll try it later today.  
Isn’t there any possibility of hiding the gridlayout instead of deleting it?

---

<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 27, 2023, 6:53am UTC](https://discourse.julialang.org/t/how-to-switch-between-several-layouts-in-makie/93578/4 "2023-01-27T06:53:42Z")

</div>

The GridLayout is not visible so you can’t hide it, only the objects placed using it. But there’s currently no great way to hide Block objects. What I’ve done once a long time ago was to place an independent GridLayout offscreen and put things in that to “hide” them. In your case you could move gl1 or gl2 there whenever you need the other one. To place a grid outside, use the bbox argument with a negative boundingbox like `bbox = BBox(-200, -100, 0, 100)`

---

<div class="post-metadata">

**Author:** ![pzabka](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/pzabka/32/46255_2.png) [@pzabka](https://discourse.julialang.org/u/pzabka)\
**Post date:** [January 27, 2023, 5:13pm UTC](https://discourse.julialang.org/t/how-to-switch-between-several-layouts-in-makie/93578/5 "2023-01-27T17:13:21Z")

</div>

Thank you, it works this way.

For anyone interested, the working code looks like this:

```julia
using GLMakie

items =["buttons", "slider"]
fig = Figure()
fig[1,1] = menu = Menu(fig, options=items)
hiddenlayout = GridLayout(bbox = BBox(-200, -100, 0, 100))

# firts layout
gl1 = GridLayout()
gl1[1,1] = Button(fig, label ="button 1")
gl1[1,2] = Button(fig, label ="button 2")

# second layout
gl2 = GridLayout()
gl2[1,1] = Slider(fig, range= 0:1)

# initaly show the first one
fig[2,1] = gl1
hiddenlayout[1,1] = gl2

on(menu.selection) do s 
    if s == "buttons"
        fig[2,1] = gl1
        hiddenlayout[1,1] = gl2
    else
        fig[2,1] = gl2
        hiddenlayout[1,1] = gl1
    end
end

fig

```

---

<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 27, 2023, 8:11pm UTC](https://discourse.julialang.org/t/how-to-switch-between-several-layouts-in-makie/93578/6 "2023-01-27T20:11:25Z")

</div>

Glad that you got something to work, I hope this will get more convenient in the future 🙂

---

<div class="post-metadata">

**Author:** ![j-fu](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/j-fu/32/11373_2.png) [@j-fu](https://discourse.julialang.org/u/j-fu)\
**Post date:** [January 27, 2023, 9:51pm UTC](https://discourse.julialang.org/t/how-to-switch-between-several-layouts-in-makie/93578/7 "2023-01-27T21:51:42Z")

</div>

[This](https://github.com/j-fu/GridVisualize.jl/blob/main/src/flippablelayout.jl) is the code which emerged from that 🙂