Frame layout and contents

Explanation on the frame layout and contents.

The Frame has two properties: layout and contents.

  • The layout defines different areas in the user interface.
  • The contents defines various entities to be placed on the frame.

The contents are a dictionary of key-value pairs, where the keys may match one of the areas defined in the layout. The contents of a frame can contain various types of entities:

  • Components such as Model and Viewer. These components cannot contain other entities.
  • Panels such as a ControlPanel, a NavPanel, and a TextPanel. These components can contain other entities.
  • Other entities that are not visible in the frame, such as a Model or a DataStore.

The diagram below shows an example of a home page defined using a single frame:

Below is the configuration code for this frame. (Note that some of the code has been omitted.)

kind: Solution
version: v0
  kind: Router
    - frame: home
  # ====== HOME FRAME ======
    kind: Frame
      kind: ColumnLayout
      widths: [auto, 300px]
      areas: [model_viewer, model_params]
        kind: Model
        # more...
        kind: ControlPanel
        controls: {}
        # more...
        kind: Viewer
        # more...

In the example, these work together as follows:

  • The layout defines two named areas, model-viewer and model-params.
  • The contents defines three entities, with the keys gh-model, model-params, and model-viewer.
    • The gh-model defines a Grasshopper model that generates a simple box. This entity has no visual representation in the user interface. So in this case, the key does not appear in the list of areas defined by the layout.
    • The model-params entity is a ControlPanel that contains some sliders for controlling the Grasshopper model, and a text output for showing the volume of the box. This entity is shown in the right-hand column in the user interface.
    • The model-viewer entity is a Viewer for viewing the 3D geometry generated by the Grasshopper model. This entity is shown in the left-hand column in the user interface.

See the layout schema docs for more information.

Row layout

Explanation on how to configure row-based layouts.

Column layout

Explanation on how to configure column-based layouts.

Grid layout

Explanation on how to configure grid-based layouts.

Grid sizes

Explanation on how to define grid sizes.