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
router:
  kind: Router
  routes:
    - frame: home
frames:
  # ====== HOME FRAME ======
  home:
    kind: Frame
    layout:
      kind: ColumnLayout
      widths: [auto, 300px]
      areas: [model_viewer, model_params]
    contents:
      gh-model:
        kind: Model
        modelFile: trimbox.gh
        # more...
      model-params:
        kind: ControlPanel
        controls: {}
        # more...
      model-viewer:
        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.