# Examples of MVC or other UI pattern for Makie

**URL:** <https://discourse.julialang.org/t/examples-of-mvc-or-other-ui-pattern-for-makie/53489>\
**Category:** Visualization\
**Tags:** question, makie, 3d, ui\
**Created:** [January 17, 2021, 4:14pm UTC](https://discourse.julialang.org/t/examples-of-mvc-or-other-ui-pattern-for-makie/53489 "2021-01-17T16:14:38Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![airpmb](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/airpmb/32/7826_2.png) [@airpmb](https://discourse.julialang.org/u/airpmb)\
**Post date:** [January 17, 2021, 4:14pm UTC](https://discourse.julialang.org/t/examples-of-mvc-or-other-ui-pattern-for-makie/53489/1 "2021-01-17T16:14:38Z")

</div>

I’m trying to put together a simple GUI using Makie and the [latest layout awesomeness](https://discourse.julialang.org/t/ann-makie-update-figures-and-integrated-layouts/52800) and realizing that most of the challenge is figuring out how best to implement something like MVC (Model-View-Controller) or whatever its equivalent would be.

Since the MakieLayout stuff is relatively new (and it’s integration into Make/AbstractPlotting even newer) I’m doubtful there’s much out there yet but I’ll still ask: can anyone point to some good examples of an (ideally relatively simple) example of implementing a GUI with MVC (or MVVM or whatever, I’m not wedded to a particular GUI design pattern)?

What I’m trying so far is creating a `UIModel` struct containing the data model and a `UIView` struct with elements that correspond to the UI elements (like `Slider`s and `LScene`s) that I want to maintain in sync with the model:

```julia
mutable struct UIModel
  x::XType
  y::YType
  z::ZType
end

mutable struct UIView
  ui_locked::Bool
  scene::Scene
  someaxis::Axis

  # to hold output of labelslidergrid!(scene, ...) 
  # would prefer to give this a type but since the output is a NamedTuple
  # this is a bit clunky to do:
  slidersgrid

  # same; what's the proper type here? 
  # docs for e.g. mesh!(mesh_object) don't specify return types 
  mesh

  # ...
end

```

Then after constructing the UI elements I create the callbacks:

```julia
on(uiview.slidersgrid.sliders[1].value) do
  if !ui_locked(uiview) # checks if uiview.ui_locked = true
    # sets uiview.ui_locked = true to prevent other UI elements' callbacks
    # from being called and resulting in infinite loops:
    lock_ui_elements!(uiview)

    on_x_updated!(uimodel, x) # do some logic that updates the UIModel instance based on changes in x
    
    # update the parts of the UI stored in the UIView instance using
    # things like set_close_to! for updating sliders,
    # translate! for elements of a 3D scene, etc.:
    update_ui!(uiview, uimodel) 

    unlock_ui_elements!(uiview ) # sets uiview.ui_locked = false 
  end
end

```

Here’s the actual code that I currently have: [Files · master · Patrick Bouffard / SpacecraftVisualization.jl · GitLab](https://gitlab.com/pbouffard/SpacecraftVisualization.jl/-/blob/master/src/voyager.jl)

---

<div class="post-metadata">

**Author:** ![danilo-bc](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/danilo-bc/32/19590_2.png) [@danilo-bc](https://discourse.julialang.org/u/danilo-bc)\
**Post date:** [May 20, 2022, 7:02pm UTC](https://discourse.julialang.org/t/examples-of-mvc-or-other-ui-pattern-for-makie/53489/2 "2022-05-20T19:02:03Z")

</div>

I’m also interested in this topic. I was going to ask for a more concrete idea, but after seeing your example GIF in the README, I’m sure you already know where you’re going.

If I were to implement Model-View-Controller, I’d have a struct for interface between both Model and View to the Controller and functions calls to modify data (model) or to modify the view.

Example: the user moves a couple sliders (in the View), hits some “Apply” button, that sends a Dictionary to the Controller with the deltas, it preparates the appropriate Models to be called. The Models interpret the received Deltas (in a properly organized Dictionary) and return the new data to Controller so it picks the appropriate View.

I’d love to hear someone more experienced provide examples (like git repositories) so we can learn the appropriate Julian way to implement MVC.