dat.GUI - Looking for a way to lock slider and prevent updating of values with mouse into dat.GUI menu

问题

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 ?

Thanks for your help.

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.

if someone could see what's wrong, this would be great.

回答1:

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;

回答2:

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'

回答3:

When the Start button is pressed, set:

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

回答4:

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;
    },

来源：https://stackoverflow.com/questions/38602189/dat-gui-looking-for-a-way-to-lock-slider-and-prevent-updating-of-values-with-m

标签

javascript

three.js

dat.gui