Skip to content

Voila usage

Jump to bottom
Heidsieck edited this page Aug 31, 2021 · 1 revision

The widgets & voila code used in the Strawberry pkg is in the src/application repository. The functions & widgets are grouped in python files for each "page" of the voila application. The "pages" are:

  1. Home
  2. Import MTG
  3. Visualization
  4. Plant scale
  5. Module scale
  6. Node scale

The associated python code is in the "app_XXX.py" file where XXX is the page name. The code is organized as follow: First, the functions to interact with the widgets are defined. These include print functions (change what is printed on a widget), the update functions (to update some widget states and parameters), and the interaction functions (the link between the widgets - usually named "on_change_xx"). Then, the widgets are created. Starting with the smaller widgets (selection boxes, labels, ...), to the bigger widgets (the containers of the page). Each page is composed of one container_main, itself composed of Rows. Rows are the main component of the vuetify template. To compose a page with the grid layout, the page includes some Rows, which can be segmented with Cols (columns), which can be segmented with Rows, .... Until the desired layout is achieved. Finally, the widgets are linked with their interaction functions.

All the common functions for the app are grouped in the misc.py file. The app uses a global variable to point at the MTG loaded. This variable is set in the misc.py file.

Pro & cons of using Voila & vuetify in my humble opinion:

Pro:

  1. Easy to create from the existing python package.
  2. Easy to start the voila app.
  3. Vuetify use a grid system similar to bootstrap, which eases the positioning of the widgets.
  4. The vuetify pkg gives a better-looking aspect to the widgets.

Cons:

  1. Voila has some compatibility issues with some widgets pkg
  2. The voila appearance does not include the whole page. Some spaces on both sides are left empty.
  3. Not much documentation on ipyvuetify (the python wrapper for vuetify).
  4. The code of ipyvuetify to manage a "page" is quite heavy. It requires Rows of Cols of Rows, ...
Clone this wiki locally