How to lock slider and prevent updating of values with mouse into dat.GUI menu

Question

I try to implement a way to prevent the updating of values with mouse (actually when the three.js animation has started, launched with a click on button).

For the moment, I have the following dat.GUI menu:

Once "start" button is clicked, I would like to prevent user from modifying with mouse the parameters "Rotation x" and "Rotation y".

Here is the concerned part of code for this menu:

// Create GUI
var gui = new dat.GUI({
      autoplace: false, 
      width: 350,
          height: 9 * 32 - 1
});

var params = {
      GreatCircle : '',
      Rotationx : torusRotationInitX,
      Rotationy : torusRotationInitY,
      StartingVector : '',
      ComponentVectorTheta : 15.0,
      ComponentVectorPhi : 15.0,
      CovariantDerivativeVector : '',
      ComponentCovariantDerivativeTheta : 15.0,
      ComponentCovariantDerivativePhi : 15.0
};

// Set parameters for GUI
gui.add(params, 'GreatCircle').name('Great Circle ');
controllerRotationx = gui.add(params, 'Rotationx', 0, 2*Math.PI, 0.001).name('Rotation x ');
controllerRotationy = gui.add(params, 'Rotationy', 0, 2*Math.PI, 0.001).name('Rotation y ');
...

When I click on reset button, I call the following function:

  // Reset Button
  resetButton.onclick = function ResetParameters() {

  ...

  // Reinitialize parameters into gui
  params.Rotationx = torusRotationInitX; 
  params.Rotationy = torusRotationInitY; 

  for (var i in gui.__controllers) {
     gui.__controllers[i].updateDisplay();
  }

render();

}

I don't know if there is an option for controller to lock these sliders which usually change their values. Is it possible?

Update 1

Maybe I could wrapper the dat.GUI menu into a div and make this div not clickable, is it a solution?

Update 2

I tried to apply the method used on Method for disabling a button in dat.gui?

Following this solution, I have added the extension into dat.gui, just after:

dat.controllers.FunctionController = (function (Controller, dom, common) {

...

});

The following added code snippet is:

function blockEvent(event)
{
  event.stopPropagation();
}

Object.defineProperty(dat.controllers.FunctionController.prototype, "disabled", {
  get: function()
  {
    return this.domElement.hasAttribute("disabled");
  },
  set: function(value)
  {
    if (value)
    {
      this.domElement.setAttribute("disabled", "disabled");
      this.domElement.addEventListener("click", blockEvent, true);
    }
    else
    {
      this.domElement.removeAttribute("disabled");
      this.domElement.removeEventListener("click", blockEvent, true);
    }
  },
  enumerable: true
});

Is extension code well located into dat.GUI source?

Then, I set the property "disabled" into my code to prevent user from sliding "controllerRotationx" with mouse (once start button is pressed):

if (animation)
controllerRotationx.__li.disabled = true;

Unfortunately, my method doesn't work : when animation is started, I can still move the slider contained into "controllerRotationx".

I saw that above link (Method for disabling a button in dat.gui?), this was about a button and not for a slider, does it change anything for my case?

I didn't find an explicit controller for the slider.

Radio · Accepted Answer · 2016-08-04T20:32:54.083

11

I would do this. The slider is not a form element, there's nothing to disable in the traditional w3c sense. Luckily we can use pointer-events and disable it properly as if it were a form element using just public dat.gui properties.

var speeder = menu.add(text, 'speed', -5, 5);
speeder.domElement.style.pointerEvents = "none"
speeder.domElement.style.opacity = .5;

edited Aug 04 '16 at 20:32

answered Aug 04 '16 at 20:17

Radio

2,810
1
21
43

score 1 · Answer 2 · answered Mar 28 '17 at 22:25

The solution given by @Radio works pretty well. But, with sliders, the slider is a sibling of the text box's DOM element. We need to disable pointer events on the div which contains all the controls (and which is not exposed directly by dat.gui). So,

var speeder = menu.add(text, 'speed', -5, 5);
// disables the text box
speeder.domElement.style.pointerEvents = "none"
// disables all controller elements related to "speeder"
speeder.domElement.parentElement.style.pointerEvents = 'none'

score 0 · Answer 3 · answered Aug 01 '16 at 14:06

0

When the Start button is pressed, set:

controllerRotationx.__li.setAttribute( "style", "display: none" );

answered Aug 01 '16 at 14:06

gaitat

12,449
4
52
76

thanks but I would like to avoid hidding the __li element (
tag ??) of controllerRotationx. Following your idea, I have tried : controllerRotationx.__li.setAttribute('disabled', 'disabled'); but it doesn't seem to work.

Aug 01 '16 at 22:11

For the `disabled` part look at: http://stackoverflow.com/questions/24461964/method-for-disabling-a-button-in-dat-gui – gaitat Aug 01 '16 at 23:17

@gailat: in your link, this is about a button and not a slider, does it change anything for my case ? – Aug 03 '16 at 06:51

it should not matter. you just need the controller variable; either a button or a slider should work the same. – gaitat Aug 03 '16 at 12:59

@gailat: ok, I realize that " this.domElement.setAttribute("disabled", "disabled");" is not called into code extension, I am still trying to understand why – Aug 03 '16 at 17:44

score 0 · Answer 4 · answered Jun 01 '19 at 22:06

thanks for tips on my side i hack the Common controller so able to chainning.

gui.add(this, '_screenW').disable(true);

  Common.extend(controller,                                   {
    disable: function disable(v) {
      this.domElement.style.pointerEvents = v?"none":"auto";
      this.domElement.style.opacity = v?.5:1;
      return controller;
    },

How to lock slider and prevent updating of values with mouse into dat.GUI menu

Update 1

Update 2

4 Answers4

Linked