kind: Solution
version: v0
router:
  kind: Router
  routes:
    - frame: my-home-frame
frames:
  my-home-frame:
    kind: Frame
    layout:
      kind: GridLayout
      widths: [ 50px, auto,1fr,auto,100px,350px ]
      heights:
        - 50px
        - auto
        - 1fr
      areas:
        - [ my-viewer,my-viewer ,my-viewer,my-viewer,my-viewer, my-panel]
        - [ my-viewer,my-viewer ,my-viewer,my-viewer,my-viewer, my-panel]
        - [ my-viewer,my-viewer ,my-viewer,my-viewer,my-viewer, my-panel]
      overlayAreas:
        - ["", "", "","","",""]
        - ["", my-legend-1, "","my-legend-2","",""]
        - ["","" , "","","",""]
    contents:
      my-viewer:
        kind: Viewer
        settings:
          kind: BasicSettings
          size: 10
          shadows: false
        materials:
          custom:
            kind: ColouredMeshMaterial
        subscribe:
          - kind: Model
            frame: my-home-frame
            source: my-model
            assignMaterials:
              my-box-1: custom
              my-box-2: custom
      my-model:
        kind: Model
        modelFile: legend.gh
        subscribe:
          - kind: ControlPanel
            frame: my-home-frame
            source: my-panel
      my-legend-1:
        kind: Legend
        subscribe:
          - frame: my-home-frame
            source: my-model
            legend: my-staggered-legend
            kind: Model
      my-legend-2:
        kind: Legend
        type: Categorical
        colours:
          - [255,0,0]
          - [0,111,255]
          - [132,0,255]
        labels:
          - red box
          - blue box
          - purple box
      my-panel:
        kind: ControlPanel
        controls:
          height:
            kind: Slider
            value: 5
            min: 1
            max: 9
            precision: 0
            label: Box height
          info:
            kind: Text
            text: "* the colours indicate the vertex distance to world origin"