Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to change slider value on dat.GUI and how to reset dat.GUI

1) I'm working on a dat.GUI application on which I have 2 sliders. I want to reset one when the other is changed. For example :

 var FizzyText = function() {
   this.slider1 = 0;
   this.slider2 = 0;
};
var gui = new dat.GUI();
var text = new FizzyText();
var slider1 = gui.add(text, 'slider1', 0, 5);
var slider2 = gui.add(text, 'slider2', 0, 5);

slider1.onChange(function(value){
  console.log(value); 
  text.slider2 = 0; // this doesn't work
});

slider2.onChange(function(value){
  console.log(value);
  text.slider1 = 0; // this doesn't work
});

This is just an example but it is very important that the slider is reseted or set to its default value (in FizzyText).

The example above comes from https://workshop.chromeexperiments.com/examples/gui/#9--Updating-the-Display-Automatically where I can't automatically update the slider

2) I want to add a reset button in which all sliders will be reseted. But with the previous answer I'd be able to reset all values

like image 236
Hearner Avatar asked Sep 02 '25 16:09

Hearner


1 Answers

I found the answer : gui.__controllers is and array of controllers. So I just added something like that :

var FizzyText = function () {
    this.slider1 = 0;
    this.slider2 = 0;
};
var gui = new dat.GUI();
var text = new FizzyText();
var slider1 = gui.add(text, 'slider1', 0, 5);
var slider2 = gui.add(text, 'slider2', 0, 5);

/* Here is the update */
var resetSliders = function (name) {
    for (var i = 0; i < gui.__controllers.length; i++) {
        if (!gui.__controllers.property == name)
            gui.__controllers[i].setValue(0);
    }
};

slider1.onChange(function (value) {
    console.log(value);
    resetSliders('slider1');
});

slider2.onChange(function (value) {
    console.log(value);
    resetSliders('slider2');
});
like image 50
Hearner Avatar answered Sep 04 '25 04:09

Hearner