user37422 user37422 - 4 months ago 35
Javascript Question

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 :

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 ?

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.

Answer

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;
Comments