Display floating point with starting values in DAT.GUI

Question

I have a small menu made with dat.gui JavaScript library. I use different lines with some initial values which are displayed (these initial values are modified during the execution of code).

My issue is, for example, that instead of display a value "15", I would like to display "15.0000". I try to used toFixed(4) function but without success.

Here's the raw (without "toFixed(4)" function) code snippet :

var componentThetaInit = 15;
var componentPhiInit = 15;

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

var params = {
StartingVector : '',
 ComponentVectorTheta : componentThetaInit,
 ComponentVectorPhi : componentPhiInit
};

gui.add(params, 'StartingVector').name('Starting Vector :');
controllerComponentVectorTheta = gui.add(params, 'ComponentVectorTheta', minComponentTheta, maxComponentTheta, 0.0001).name('Component θ ');
controllerComponentVectorPhi = gui.add(params, 'ComponentVectorPhi', minComponentPhi, maxComponentPhi, 0.0001).name('Component φ ');

Now I tried :

 var params = {
    StartingVector : '',
     ComponentVectorTheta : componentThetaInit.toFixed(4),
     ComponentVectorPhi : componentPhiInit.toFixed(4)
    };

but this doesn't work. Here's below a capture of what I get ("15" instead of "15.0000") before the execution :

Once the code is running, the 4 floating points are well displayed (because values are no more integers) : this is actually the initial values (before animation) that I would like to be displayed like "15.0000" instead of "15".

The result is the same by declaring :

var componentThetaInit = 15.0000;
var componentPhiInit = 15.0000;

I have also tried :

 ComponentVectorTheta : parseFloat(componentThetaInit.toFixed(4)),
 ComponentVectorPhi : parseFloat(componentPhiInit.toFixed(4))

If anyone could see what's wrong, this would be nice.

Thanks

Answer 1

First, some minor bugs. There were some missing variable declarations. I added:

var minComponentTheta = -10.0;
var maxComponentTheta = 100.0;
var minComponentPhi = -100.0;
var maxComponentPhi = 100.0;

2) The autoplace param (which should be autoPlace, capital P) has nothing to do with decimal places... it appears to be an option to automatically add the UI to the DOM.

None of this actually fixes the issue. It's a problem that starts with javascript. If you put this code in the console you'll see the same problem:

var a = 15.0000;
console.log(a);
// prints 15 and not 15.0000

When a number is an integer, it's an integer. To get around this, you can have your default value have a non integer value like 15.0001.

This probably isn't what you're looking for though. So, if you are up for modifying the code for dat.gui.js you can force it to set the value of the input to the string version of the number value. Find the code that looks like this and copy and paste the code below replacing it. I've simply added a toFixed at the end of the first line in the function. Be aware that when you get the value now, it will be a string and not a number, so to do math with it you'll want to parseFloat() on it before using it.

NumberControllerBox.prototype.updateDisplay = function updateDisplay() {
  this.__input.value = this.__truncationSuspended ? this.getValue() : roundToDecimal(this.getValue(), this.__precision).toFixed(this.__precision);
  return _NumberController.prototype.updateDisplay.call(this);
};

In the unminified JS version, ^ that's on line 2050. I verified this works as you want

Answer 2

Just leave it like this:

ComponentVectorTheta : componentThetaInit.toFixed(4),
ComponentVectorPhi : componentPhiInit.toFixed(4)

Consider this:

a = 15;            // a is an integer now
b = a.toFixed(4);  // b is the string "15.0000"
c = parseFloat(b); // c is a number (internally, probably an integer) 
d = c.toString(2); // d is the string "1111"
e = parseInt(d, 2);// e is an integer again
assert(a === e);   // true