Back to Demos

To control the state of the configurator, either use the configurator UI or the configuration API. This demo shows how to control the configurator state with configuration API.

Current Configuration State

Clara.io demo resources:

Visit Base Scene


var sceneId = '90d92c65-e35b-4203-8f0b-a75fd3664a71';
var api = claraplayer('player');
var option = document.getElementById('options')
option.onchange = changeHandler;

api.sceneIO.fetchAndUse(sceneId);
api.on('loaded', function() {

  // Form1 is the name of the form used to initialise the configurator in this demo
  // check https://clara.io/docs/tutorial-3_Configurators.html for more information about from
  api.configuration.initConfigurator({ form: 'Form1' });
  ['Gray', 'Black', 'Red', 'Blue', 'Green'].forEach( function(color, i){
    option.options[i] = new Option(color, color);
  });
  document.getElementById('baseScene').setAttribute('href', 'https://clara.io/view/' + sceneId);
});

function changeHandler(ev) {
  api.configuration.executeAttribute('Color',ev.target.value);
};

api.on('configurationChange', function(){
  var config = api.configuration.getConfiguration();
  document.getElementById('state').innerHTML = JSON.stringify(config);
});