dat.GUI

dat.GUI

by Paul West

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.1/dat.gui.min.js"></script>

JavaScript

var gui = new dat.GUI();

var guiData = function() {
  this.message = "Happy N7 day!";
  this.system = 0;
  this.Planets = 0;
};

var data = new guiData();

planets = [{
  Mercury: 0,
  Venus: 1,
  Earth: 2,
  Mars: 3,
  Jupiter: 4,
  Saturn: 5,
  Uranus: 6,
  Neptune: 7
}, {
  Ilos: 0,
  Tuchanka: 1,
  Illium: 2,
  Palaven: 3
}];

gui.add(data, 'message', 'Happy N7 day!');
gui.add(data, 'system', {
  Solar: 0,
  others: 1
}).name('Star system').onChange(function(value) {
  updatePlanets(value);
});
gui.add(data, 'Planets', planets[0]).onChange(doSomeStuff);

function updatePlanets(id) {
    var controller = gui.__controllers[2];
    controller.remove();
    gui.add(data, 'Planets', planets[id]).onChange(doSomeStuff);
    
    //back to 0 element
    data.Planets = 0;
    gui.__controllers[2].updateDisplay();
}

function doSomeStuff(value) {
  console.log("stuff:" + value);
}