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

admin管理员组

文章数量:1245898

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, mon) {

...

});

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.

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, mon) {

...

});

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.

• javascript
• three.js
• dat.gui

Share Improve this question Follow edited Oct 7, 2021 at 21:39 halfer 20.4k1919 gold badges108108 silver badges201201 bronze badges asked Jul 27, 2016 at 1:11 user1773603user1773603

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 11 +50

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;

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'

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

When the Start button is pressed, set:

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

I found a way to solve this problem and it works in my case.

var params = {
    Rotationx: 0.785,
    get rx() { return this.Rotationx; },
    set rx(val) { /* Do nothing */ }
};

var ctrl = gui.add(params, 'rx', 0, 2 * Math.PI, 0.001).name('Rotation x ');
gui.add({
    clickMeToChangeRotX() {
        params.Rotationx += 0.001;
        ctrl.updateDisplay();
    }
}, 'clickMeToChangeRotX').name('Change rotation x');

本文标签： javascriptHow to lock slider and prevent updating of values with mouse into datGUI menuStack Overflow