Problem using dat.GUI controller library

[aheight]

Hi,
I am having problems attempting to create two folders in the dat.GUI interface for a Javascript program I'm writing. When I run the code below, the two labels for the folders do not show up. Rather I just get a single line "close control" menu heading and when I click it, I get another single line "open control" menu heading. Would should display are the two folder headings, "Display", and "Contours" and options to drop down the menu items in each folder. I was wondering if someone here could look at my code and help me with it? Maybe I may have a problem in my style sheet defining the containers, "moveGUI" and "table2"? I've included my stylesheet also below if someone is interested in looking at my code.

Thanks for reading,

var f1,f2;
 
function loadControlPanel()
    {
           displayController = function() {          /* VarType  |  Display             */
            this.displayBorder = false;
            this.contourNum=9;
            this.theZvalue=0;
            this.theXvalue=0;
            this.theYvalue=0;
            this.lightXvalue=0;
            this.lightYvalue=0;
            this.lightZvalue=0;
            this.lightDirectionColorR=1;
            this.lightDirectionColorG=1;
            this.lightDirectionColorB=1;
            this.ambientR=.4;
            this.ambientG=.4;
            this.ambientB=.4;
            this.shading=true;
            this.wireMesh=true;
         };
         theContourList=function() {
             this.contourNum=1;
         }

          menuText = new displayController();
          contourText=new theContourList();
          gui = new dat.GUI({ autoPlace: false });
          gui.domElement.id = 'table2';
          f1 = gui.addFolder('Display');
          f2 = gui.addFolder('Contours');
   
        
          f1.add(menuText,'contourNum',1,10).step(1);
          f1.add(menuText,'theZvalue',-1,1);
          f1.add(menuText,'theXvalue',-10,10);
          f1.add(menuText,'theYvalue',-10,10);
          f1.add(menuText,'lightXvalue',-50,50);
          f1.add(menuText,'lightYvalue',-50,50);
          f1.add(menuText,'lightZvalue',-50,50);
          f1.add(menuText,'ambientR',0,1);
          f1.add(menuText,'ambientG',0,1);
          f1.add(menuText,'ambientB',0,1);
          f1.add(menuText,'lightDirectionColorR',0,1);
          f1.add(menuText,'lightDirectionColorG',0,1);
          f1.add(menuText,'lightDirectionColorB',0,1);
          f1.add(menuText,'shading');
          f1.add(menuText,'wireMesh');
               
          f2.add(contourText,'contourNum',1,10).step(1);
      
          customContainer = $('.moveGUI').append($(gui.domElement));
    }

<style>
  
    a:link    { color: #00c000 }  /* unvisited links */
a:visited { color: #000c00 }  /* visited links   */
a:hover   { color: #0000c0 }  /* user hovers     */
a:active  { color: #00ccc0 }  /* active links    */
  
  
ul {
    list-style-type: none;
    margin: 0; 
    overflow: visible;
    position: absolute;
    top:0em;
    left: 0em;
    display: table;
 
 
}

#theFunctionDisplay {
    margin: 0; 
    overflow: visible;
    position: absolute;
    bottom:1em;
    left: 1em;
    color: #ffaf50;
}
.dropbtn {
    background-color: #ffAF50;
    color: white;
    padding: 2px;
    font-size: 12px;
   border: 1px solid #000000;
    cursor: pointer;
 
    width:200px;
}

.dropdown {
    position: relative;
    display: inline-block;
  
  }

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #fff9f9;
    min-width: 160px;
    overflow: auto;
    max-height: 465px;
  
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}.dropdown:hover .dropdown-content {
    display: block;
    width: 800px;
}

.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}

#gui { position: absolute;
       top: 3em;
       left: 5em;
       min-width: 160px;
    overflow: auto;
    max-height: 465px;
}

.fName {position: absolute;
        bottom:3em;
        left: 8em;
        background-color: #f9f9f9;
}

.moveGUI{
    position: absolute;
    top: 0em;
    right: 5em;
 
}
#myGraphicsCanvas {
  position:absolute;
  width: 100%;
  height: 100%;
}
</style>

 

[DaveC426913]

A few things that should help:

1] Strip the problem down to barebones (if it isn't already), and write it up in plunkr or jsfiddle. You can add your js plugin(s) and write/run code in real-time. Then we can walk through the code as it processes.

For all we can tell, it might simply be a typo in your HTML markup (not shown), or the buttons could be rendering, but off-screen, due to all those absolute properties.

2] If we can't resolve it, post your question on stack-overflow. The first thing they're going to do is ask you to do is step 1, so you might as well do it anyway.

 

[aheight]

Ok thanks. Will look at jsfiddle. So I remove my code and insert into my Javascript, just the simple dat.GUI code in the tutorial http://workshop.chromeexperiments.com/examples/gui/#1--Basic-Usage It works and it shows a simple single-folder GUI:

function loadControlPanel()
    {
   var FizzyText = function() {
    this.message = 'dat.gui';
    this.speed = 0.8;
    this.displayOutline = false;
    this.explode = function() {var i=0;};
  // Define render logic ...
   };    var text = new FizzyText();
    var gui = new dat.GUI();
    gui.add(text, 'message');
    gui.add(text, 'speed', -5, 5);
    gui.add(text, 'displayOutline');
    gui.add(text, 'explode');

    gui.domElement.id = 'table2';
    customContainer = $('.moveGUI').append($(gui.domElement));
    }

But when I insert the tutorial code for two folders it does not display the two folders and it's size is also not correct; it takes the entire half-screen of the display when it should only take a small corner of the display.

function loadControlPanel()
    {
        var FizzyText = function() {
        this.message = 'dat.gui';
        this.speed = 0.8;
        this.displayOutline = false;
        this.explode = function() {var i=0};
        };        var text = new FizzyText();
        var gui = new dat.GUI();

        var f1 = gui.addFolder('Flow Field');
        f1.add(text, 'speed');
        f1.add(text, 'noiseStrength');

        var f2 = gui.addFolder('Letters');
        f2.add(text, 'growthSpeed');
        f2.add(text, 'maxSize');
        f2.add(text, 'message');

        f2.open();
        gui.domElement.id = 'table2';
        customContainer = $('.moveGUI').append($(gui.domElement));
    }

I think I may have a problem with styles but not sure what. Just noticed there is a style sheet that is included in the gitHUB package. Maybe I need to integrate that stylesheet into my code.

 

[aheight]

Just an update:
I was able to run a minimal program I got from GitHub https://github.com/dataarts/dat.gui/blob/master/example.html to at least test the addFolder functionality is working in a simple program and it works fine so I have to conclude my problem is something to do with my code and I suspect my setup with the style sheets or how I'm setting up the display of the various tables in my program. The source dat.gui.min.js I downloaded from GitHub and the example above is similar to what I'd like to have in my code so will work on just trying to get it to work in my code.

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
</head>
<body>
  <script type="text/javascript" src="dat.gui.min.js"></script>
  <script type="text/javascript">
    var obj = {
        message: 'Hello World',
        displayOutline: false,
        maxSize: 6.0,
        speed: 5,
        height: 10,
        noiseStrength: 10.2,
        growthSpeed: 0.2,
        type: 'three',
        explode: function () {
          alert('Bang!');
        },
        color0: "#ffae23", // CSS string
        color1: [ 0, 128, 255 ], // RGB array
        color2: [ 0, 128, 255, 0.3 ], // RGB with alpha
        color3: { h: 350, s: 0.9, v: 0.3 } // Hue, saturation, value
    };
    var gui = new dat.gui.GUI();
    gui.remember(obj);
    gui.add(obj, 'message');
    gui.add(obj, 'displayOutline');
    gui.add(obj, 'explode');
    gui.add(obj, 'maxSize').min(-10).max(10).step(0.25);
    gui.add(obj, 'height').step(5); // Increment amount
    // Choose from accepted values
    gui.add(obj, 'type', [ 'one', 'two', 'three' ] );
    // Choose from named values
    gui.add(obj, 'speed', { Stopped: 0, Slow: 0.1, Fast: 5 } );
    var f1 = gui.addFolder('Colors');
    f1.addColor(obj, 'color0');
    f1.addColor(obj, 'color1');
    f1.addColor(obj, 'color2');
    f1.addColor(obj, 'color3');
    var f2 = gui.addFolder('Another Folder');
    f2.add(obj, 'noiseStrength');
    var f3 = f2.addFolder('Nested Folder');
    f3.add(obj, 'growthSpeed');
  </script>
</body>
</html>

 

[aheight]

I next included my stylesheet code in the minimal program above and noticed it no longer worked so I began removing styles one by one until it started working. I found the style:

ul {
    list-style-type: none;
    margin: 0;  
    overflow: visible;
    position: absolute;
    top:0em;
    left: 0em;
    display: table;
 
}

was the source of the problem. I'm not even sure what that code does but removing it solved the problem. Was wondering if someone more familiar with style sheets could offer an explanation of why that code caused the problem with datGUI folders.

 

[DaveC426913]

Hard to say. There's nothing intrinsically wrong with that rule. But CSS is magic. It combines on funny ways, and, unlike code, it doesn't throw errors when something is incompatible; it just does its best and moves on.

That's why you've got to do it real time.

You can find out though.
Leave the stylesheet in, and comment out one declaration at a time (using /* */) and observe the changes.

What browser are you using? You can open the browser development tools and check/uncheck CSS declarations in real-time, without having to edit/save/refresh.

 

[aheight]

You can find out though.
Leave the stylesheet in, and comment out one declaration at a time (using /* */) and observe the changes.

What browser are you using? You can open the browser development tools and check/uncheck CSS declarations in real-time, without having to edit/save/refresh.

Ok I'm using Chrome and I did what you suggested and found the position: absolute was the problem:

ul {
    list-style-type: none;
    margin: 0;
    overflow: visible;
/*   position: absolute;  */
    top:0em;
    left: 0em;
   display: table;
 
 
}

Maybe I should contact the developer and mention this to them. I do know the ul designator is for unordered list constructs <ul> . . . </ul>

Getting this to work will be a nice addition to my website. Thanks Dave!

 

[DaveC426913]

Does removing the absolute positioning fix it correctly, or does it just make the element appear (i.e. 'good enough')?

I suspect that the absolute is not a mistake, that the mistake is elsewhere.

 

[aheight]

Does removing the absolute positioning fix it correctly, or does it just make the element appear (i.e. 'good enough')?

I suspect that the absolute is not a mistake, that the mistake is elsewhere.

It solves it pretty good and I've started to include folders in the dat GUI in my website. You can see it here if you want: algebraicfunction.com

 

[DaveC426913]

Yep. That definitely fixes the problem (mostly).The menu really should remain inside the border, so that's what the absolute is trying to do. The next element up should be position: relative, so that it child elements know to place themselves inside it. Didn't help though.

I tried a few things, but none of them worked.

If you can live with it, no prob.

If you can't, I'd suggest you double-check against the source code that you haven't missed a line somewhere before contacting the author.