Quick Reference

A design can have interactive parameters by declaring a special function; getParameterDefinitions().

In applications and browsers, these parameters are presented to users, allowing users to change designs.

This function must return an array of parameter definitions, as show below.

const getParameterDefinitions = () => {
    return [
        { name: 'length', type: 'int', initial: 150, caption: 'Length?' }, 
        { name: 'width', type: 'int', initial: 100, caption: 'Width?' },
    ]
}

The parameters are evaluated and values are passed into the main function. Be sure to declare the main function properly.

const main = (params) => {
  var l = params.length
  var w = params.width
...
}

The parameters are defined as input fields on a single HTML5 form, i.e. the list of parameters. For more information on HTML5 input fields, see some examples at W3 Schools.

Note: Browsers are NOT the same and will treat unsupported parameter types as TEXT.

The parameters accept additional restrictions and assistance. These include 'initial', 'max', 'maxLength', 'min', 'pattern', 'placeholder', 'size', and 'step'.

There is one more special parameter type called 'choice', which defines a list of choices for selection.

const getParameterDefinitions = () => {
  return [
    { name: 'rounded', type: 'choice', caption: 'Rounded edges', values: [0, 1], captions: ['No', 'Yes (slow!)'], initial: 0 }
  ]
}

The list of captions are those shown as a pull down list. The list of values define a value for each caption. And, the chosen value is passed into the main function.