Auto-Generated Controls
The most simple way of using controls is using auto-generated controls. In this case, the JavaScript API builds those default-type control elements that are needed for the current configurator situation by itself. The setup is quite simple: it requires to include the "controls-auto" module and to provide an HTML container element that acts as container for the controls. (Setting up a full configurator including auto-generated controls is explained here.)
Example
<head>
<script src="https://libs.paramate.trinckle.com/paramateConfigurator-latest.js"></script>
<script src="https://libs.paramate.trinckle.com/paramateControlsAuto-latest.js"></script>
...
</head>
<body>
<div id="controls"></div>
...
</body>
The configurator and the controls objects are created in the default way by calling the constructors ( see constructors of configurator and controls). (Note that the controls object needs to be registered in the configurator object.)
Example
<script>
...
var configurator = new Paramate.Configurator({ ... });
var controls = new Paramate.ControlsAuto({
configurator: configurator,
containerElement: document.getElementById('controls')
});
configurator.controls = controls;
...
</script>
This results in a set of default control elements that populate the container. They are updated automatically when the state of the configurator changes.
Styling
The default controls come without any special styling. This can be easily changed by adding CSS styles to the application. All controls are created inside of a div with the class paramateParamContainer. In that element there is the name of the parameter in a div with the class paramateParamName and the parameter input with the class paramateParam. There are some other special elements for some specific parameters, like the button with class paramateParamRaySelect for a ray parameter, or the default button for file parameters.
Special controls
For some parameters it is convenient to use special controls. The behavior of the auto-controls for these can be directed by the style property. Currently the following one is available:
Range input
Often a good way to represent numbers is a range control. To have that automatically created, simply the display attribute of the style property has to be set to "range".
Example
{
style = "display: range"
}
Dropdown input
For numbers representing a list of options it is common to use a dropdown input. To have that automatically created, the display attribute of the style property has to be set to "dropdown". In the parameter the options attribute contains the numbers and the options_texts the displayed text.
Example
{
style = "display: dropdown"
options = [1,2,3]
options_texts = ["beide","männlicher Part", "weiblicher Part"]
}
Note
The other style options (like step or precision) also automatically work here, as documented with the manually generated controls.
Internationalization
It is possible to give the controls object a dictionary object and in this case the texts shown (parameter name, dropdown texts) will be taken from that dictionary. To use the dictionary entries, the language of the controls has to be set as well.
Example
<script>
...
var controls = new Paramate.ControlsAuto({
configurator: configurator,
containerElement: document.getElementById('controls'),
dictionary: { "lengthParam": { "en": "length", "de": "Lange" }, "widthParam": { "en": "width", "de": "Breite" }, ... } }
});
controls.language = 'en';
...
</script>
This dictionary can not only be used to translate texts but to show better readable names than what comes out of the configurator.
To turn off the usage of the dictionary, set a language that is not in the dictionary, or set it to "default".
To update the language of the controls displayed, change the language and update the controls.
Example
<script>
controls.language = 'de';
controls.updateControls();
</script>
Usage Recommendation
While being simple to set up, default controls have the disadvantage that they contain few options to be customized apart from style changes via CSS. Furthermore all auto-generated controls are placed inside a single container element, what may not be the desired form. This makes them a good choice for simple, more technical applications or those in which number and types of the open parameters is not known a priori. They are less appropriate for configurators that should have a more elaborated custom design. For these it is recommended to use manually generated controls or fully user-defined controls instead.
