How to add n amount of inputs

A how-to guide for adding n number of inputs in the user interface.
Tags:

Introduction

Would you like to generate a parametric number of geometries with different values based on user inputs? Then add n amount of inputs by following these steps.

Prerequisites

  • You have a working project with at least one ControlPanel connected to a Grasshopper model.

1. Add an array control

To have multiple rows of inputs, configure a control with kind: Array in your control panel.

  • Define the control in the array with kind: Group . This group can be repeated n times in the user interface depending on the user inputs.
  • Define the controls in the group.
  • Optionally define a label for your array control.
  • Optionally define the layout of the group.

The configuration should look similar to the example below:

  my-control-panel:
  kind: ControlPanel
  controls:
    box-properties:
      kind: Array
      label: Box properties
      control:
        kind: Group
        controls:
          size:
            kind: NumberInput
            label: Box size
          height:
            kind: NumberInput
            label: Box elevation
          toggle:
            kind: Toggle
            label: Box toggle
            value: true

2. Subscribe your model to the ControlPanel

To run the Model with the values from the ControlPanel:

  • Subscribe the Modelto the ControlPanel.
  • Define the frame and source.
  my-model:
    kind: model
    modelFile: my-grasshopper-file.gh
    subscribe:kind: ControlPanel
    source: my-control-panel
    frame: home-frame

3. Retrieve values from the array in Grasshopper

When the Model subscribes to a ControlPanel with an array, the array control returns inputs in a JSON format. In the example below there are two groups with different height, size and toggle values.

      {
        "height": 5,
        "size": 10,
        "toggle": true
      },
      {
        "height": 15,
        "size": 25,
        "toggle": false
      },
      ...

To run a Grasshopper definition with n number of inputs, prepare the definition to retrieve values from the array.

  • Add a Packhunt Input component with the same name as your Array control.
  • Use the Packunt Item From Json component to retrive the values for the controls in the array group.
  • Use the resulting values in your Grasshopper logic.

💡To test locally, you can add the JSON in a panel and use the JSON From Text and Unpack JSON List components before the Input component as shown in the example below.

The configuration should look similar to the example below: See the image below as an example.

4. (Optional) Save the array value in an EntityDataStore

To store the array value(s) in the EntityDataStore:

  • Define the property with type: Array in the EntityDataStore properties .
  • Define the items in the array with type: Object .
  • Define the properties of the Object.
    • Configure each property with the control names in the ControlPanel array group.
    • Define the type of the property.
  • Define the default values of the object.

The configuration should look similar to the example below:

my-entity-datastore:
	kind: EntityDataStore
	properties:
		box-properties:
			type: Array
			items: 
			  type: Object
			  properties:
			    height:
			      type: Number
			    size:
			      type: Number
			    toggle:
			      type: Boolean
			  default:
				  height: 10
				  size: 5
				  toggle: true

💡You can subscribe your Model to the EntityDataStore to run it with the entity values.

See the image below as an example.

Configuration

See the ControlPanel array configuration docs for more information.