CODEWITHSUNDEEP
javascriptthree.jsdat.gui
user1773603
user1773603

Reputation:

How 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:

enter image description here

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.

Upvotes: 5

Views: 4530

Answers (5)

Billy Chen
Billy Chen

Reputation: 41

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');

Upvotes: 0

jon
jon

Reputation: 1808

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

Upvotes: 1

jnj16180340
jnj16180340

Reputation: 61

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'

Upvotes: 1

Radio
Radio

Reputation: 2853

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;

Upvotes: 11

gaitat
gaitat

Reputation: 12632

When the Start button is pressed, set:

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

Upvotes: 0

Related Questions