Examples of MVC or other UI pattern for Makie

Specific Domains Visualization
, , ,
1

I’m trying to put together a simple GUI using Makie and the latest layout awesomeness 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 Sliders and LScenes) that I want to maintain in sync with the model:

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:

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

3 Likes
2

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.