A Observable Panel containing multiple input field, with individual and grouped firing (feedbacks welcome).

Show and Tell
1

Hi everybody
I’ve realized something that I hope might be of some help to the community.
It is a Panel that groups several input fields in order to group the control of multiple parameters in a single cell. It differs from a form in the following respects:

  • initializes via a descriptor where each control has a name, for example:

      viewof ui = Panel ({
  	
  myFirstPar:  Range ([0, 11], {value: 5, label: "first val"}),
  	mySecondPar: Range ([0, 1000], {value: 5, label: "another val"}),
  	fruit:       Select(['apple','orange','lemon'], {label: "fruit"}),
  	myLastPar:   Toggle ({label: "this is a toggle"})
  })

ui-example
ui-example1056×72 3.29 KB

  • uses @observablehq/inputs fields
  • all values ​​can be extracted simultaneously through the expression ui.asObject which is updated every time a parameter is changed
  • each parameter can be extracted individually by name (eg: ui.myFirstPar). This value updates only when that parameter is changed
  • a subset of parameters can be extracted through the group function (eg: ui.group ('myFirstPar', 'myLastPar')). This function returns an object that is updated only when one of the subset parameters is changed.
  • the read function allows you to read the parameter values ​​immediately (ui.read ())
  • html rendering is automated, some little customization is possible

You can find it, with some examples, at https://observablehq.com/@paoloandrenacci/panel, I would like very much to have some feedback and to know if it has been useful to you.

Thank you for your attention

Paolo

2

Last version contains a “set” function for writing values programmatically (Thank to Tom Larkworthy for the suggestion).
ui.set ('x', 5) will update “x” parameter triggering all updates.
Attention, if the field is a Range with a step attribute, the value entered will be rounded to the step.

3

@paoloandrenacci You might be interested in the discussion for this feature request: