View on GitHub

Tech, Games and Whisky

The Sebr's Blog

dat GUI

|

DatGui is a nice library that can be used to embed a property editor in any webapp allowing you to tweaks variables. It can be used to debug an app or to find the right set of settings.

The following tutorial is quite good. It highlights all the features of datGui: folders, supports for lots of variables types (number, text, color…), events and constraints. I like how easy it is to use this library.

The following live example:

Has been created with this code:

<html>
<head>
    <script src="dat.gui.js"></script>
    <script>
        var FizzyText = function () {
            this.message = 'dat.gui';
            this.speed = 0.8;
            this.displayOutline = false;
            this.explode = function () { alert('Boom!'); };

        };

        document.addEventListener("DOMContentLoaded", function (event) {
            window.onload = function () {
                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');
            };
        });
    </script>
</head>
<body>
</body>
</html>

Other nice libraries:

The site hosting datGui is Workshop . CHROMEEXPERIMENTS. They develop other nice tools/libraries. Their most well known is arguably ThreeJs a javascript 3D library.

For those with less depth: TwoJs is a 2D drawing library also developed by ChromeExperiments!