ArtiSynth User Interface Guide

12 Control Panels

Control panels are essentially custom-built property panels that are attached to the root model and let the user interactively set or adjust various properties while the simulation is in progress. Most of the panels that appear with the various ArtiSynth demos are in fact control panels specially created for the demo in question.

The properties controlled by a control panel do not need to come from the same object; instead, they can come from a variety of objects. However, unlike with property panels, it is not possible (at the time of this writing) for a control panel widget to control a property across multiple objects.

The problem of controlling the same property in multiple objects may be addressed in future by the introduction of component groups.

12.1 Creating control panels

To create a control panel, select Edit > Add control panel from the ArtiSynth main menu. This will cause a blank control panel to appear.

To add a widget to this panel, right-click inside the the panel and select Add widget. This will cause a widget creation dialog to appear, as shown in Figure 33.

Figure 33: Widget creation dialog.

The top-most widget in this dialog is a component/property selector. The component section is a selection display identical in function to that described in Section 4.4: the path of the most recently selected component is displayed, and its parent may be selected by clicking on the “up” button at the left. If no component is selected, you will need to select one using the navigation panel or the viewer. Once a component is selected, the combination box on the right will provide a selection of properties that may be selected for the widget. Once a property is selected, other options in the dialog may be used to tune the appearance of the widget:


Enabled for properties with a scalar numeric value. Setting it to true will create a widget with a slider.


Specifies the range for the slider, if one is selected.


The name of the widget in the panel. By default, this is the name of the property.


Font color for the widget name. If null, then the default color is used.


Background color for the widget. If null, then the default background is used.

12.1.1 Composite property widgets

A CompositeProperty is a Property which contains sub-properties. If a composite property is selected, the control panel will create a composite property widget, three of which are shown in Figure 34.

Figure 34: Composite property widgets.

Clicking the set button of a composite property widget will create another panel presenting all the sub-properties. The composite property widget is disabled until this panel is closed.

In some instances, a composite property can be set to null. In such cases, the widget will provide an additional component, which

  • if the current property value is not null, will be a clear button which sets the value to null (second widget, <Figure 34).

  • if the current property value is null, will be a display label indicating this fact (third widget, <Figure 34).

12.1.2 Widgets for sub-properties

It is possible to attach widgets to the sub-properties of a composite property, provided that the composite property has a non-null value.

In particular, when a non-null composite property is selected from the component/property widget, the user has the option of either

  • clicking the Done button and selecting the composite property, which will create a composite property widget as described in the previous section, or

  • selecting one of the composite property’s sub-properties.

When a non-null composite property is selected, the property’s name will move over into the component field of the component/property selector, and the combination box will be cleared and reset to allow the selection of the sub-properties.

Figure 35: Selecting property renderProps (top), then one of it’s subproperties (bottom).

For example, in Figure 35, we first select renderProps, which is a composite property of models/msmod/particle/2, and then (in the lower panel) select the sub-property visible. When renderProps is selected, its name is moved to the component panel, where it appears as


The ‘:’ character is used to separate components from properties in component/property paths

12.2 Editing control panels

An existing control panel can also be edited. Specifically,

  • Individual widgets can be moved, deleted, or have their properties set.

  • Separators can be added between widgets.

  • Global aspects of the control panel itself can be set.

To edit an individual widget, you first select it by left-clicking on it. This will cause it to become highlighted. You can then:

  • Move the widget by dragging it to a different vertical location within the panel;

  • Delete the widget by right-clicking and choosing delete;

  • Set properties of the widget by right-clicking and choosing properties;

To add a separator, select a widget above where you want the separator, right-click and choose add separator.

To set global aspects of the control panel itself, right-click inside the lower-most option pane (the small panel at the bottom and that may, in some cases, contain option buttons such as Close or Done), and choose from the provided menu.

12.3 Live updating

By default, a control panel is set up to update the values of its widgets every time the viewers are rerendered. This allows one to observe property values as they evolve in time.

If you do not want live updating of property values, then you can disable this by clicking on the live update icon , which is located in the lower left of the option panel.