Problem using dat.GUI controller library

  • JavaScript
  • Thread starter aheight
  • Start date
  • Tags
    Controller
In summary, the two folders in the dat.GUI interface for a Javascript program that the author is writing do not show up.
  • #1
aheight
321
109
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,

JavaScript:
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));
    }

JavaScript:
<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>
 
Technology news on Phys.org
  • #2
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.
 
Last edited:
  • Like
Likes aheight
  • #3
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:

JavaScript:
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.
JavaScript:
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.
 
Last edited:
  • #4
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.

JavaScript:
<!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>
 
Last edited:
  • #5
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:
JavaScript:
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.
 
  • #6
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.
 
  • Like
Likes aheight
  • #7
DaveC426913 said:
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:

JavaScript:
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!
 
  • #8
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.
 
  • #9
DaveC426913 said:
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
 
  • #10
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.
 

Related to Problem using dat.GUI controller library

1. What is dat.GUI controller library?

dat.GUI controller library is a JavaScript library that allows you to easily create a graphical user interface (GUI) for manipulating variables in your code. It provides a simple and intuitive way to create sliders, buttons, checkboxes, and other UI elements that can be used to control and update data in your program.

2. How do I use dat.GUI in my project?

To use dat.GUI, you will need to first download and include the library in your project. You can then create a new GUI instance and add controllers to it by specifying the object and property that you want to control. Finally, you can call the .add() method to add the controller to the GUI and start using it to manipulate your data.

3. Can I customize the appearance of dat.GUI controllers?

Yes, dat.GUI controllers can be customized to match the design of your project. You can use the .name(), .onChange(), .min(), .max(), and .step() methods to specify the name, callback function, minimum and maximum values, and step size for your controllers. You can also use CSS to style the controllers further.

4. Is dat.GUI compatible with all browsers?

dat.GUI is compatible with most modern browsers, including Chrome, Firefox, Safari, and Edge. However, it may not work on older browsers or versions that do not support the necessary features, such as ES6 or the HTML5 canvas element. It is always best to check the library's documentation for specific browser compatibility information.

5. Can I use dat.GUI with other libraries or frameworks?

Yes, dat.GUI can be used with other libraries and frameworks, such as Three.js, p5.js, and Processing. However, you may need to make some adjustments to your code to ensure compatibility. Additionally, some libraries may already have their own built-in GUI options, so it is worth checking their documentation before using dat.GUI.

Similar threads

Replies
1
Views
857
  • MATLAB, Maple, Mathematica, LaTeX
Replies
3
Views
331
Back
Top