How it Works

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>dat.GUI Example</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.7/dat.gui.min.js"></script>
    <style>
        body {
            margin: 0;
            padding: 20px;
            font-family: Arial, sans-serif;
        }
        #container {
            width: 400px;
            height: 300px;
            background-color: #eee;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <h1>dat.GUI Example</h1>
    <div id="container"></div>
    <p>Adjust the controls to change the box properties.</p>

    <script>
        // Our application state object
        const params = {
            color: '#ff0000',
            width: 200,
            height: 150,
            rotation: 0,
            visible: true,
            message: 'Hello dat.GUI!',
            speed: 0.5,
            reset: function() {
                params.color = '#ff0000';
                params.width = 200;
                params.height = 150;
                params.rotation = 0;
                params.visible = true;
                params.message = 'Hello dat.GUI!';
                params.speed = 0.5;

                // Update the GUI to reflect changes
                gui.updateDisplay();
                updateBox();
            }
        };

        // Create the GUI
        const gui = new dat.GUI({ name: 'My Controls', width: 400 });

        // Add controllers for different types of properties
        gui.addColor(params, 'color').name('Box Color').onChange(updateBox);
        gui.add(params, 'width', 50, 400).name('Width').onChange(updateBox);
        gui.add(params, 'height', 50, 300).name('Height').onChange(updateBox);
        gui.add(params, 'rotation', 0, 360).name('Rotation').onChange(updateBox);
        gui.add(params, 'visible').name('Visible').onChange(updateBox);
        gui.add(params, 'message').name('Text Message').onChange(updateBox);
        gui.add(params, 'speed', 0, 1).name('Animation Speed');

        // Add a button
        gui.add(params, 'reset').name('Reset All');

        // Create a folder for advanced options
        const advanced = gui.addFolder('Advanced');
        advanced.addColor(params, 'color').name('Alt Color Control');
        advanced.add(params, 'width').name('Width (no limits)');
        advanced.open(); // Open the folder by default

        // Get the container element
        const container = document.getElementById('container');

        // Function to update the box based on parameters
        function updateBox() {
            container.innerHTML = '';

            if (!params.visible) return;

            const box = document.createElement('div');
            box.style.width = params.width + 'px';
            box.style.height = params.height + 'px';
            box.style.backgroundColor = params.color;
            box.style.transform = `rotate(${params.rotation}deg)`;
            box.style.display = 'flex';
            box.style.alignItems = 'center';
            box.style.justifyContent = 'center';
            box.style.margin = '0 auto';
            box.style.transition = 'all 0.3s';

            const text = document.createElement('p');
            text.textContent = params.message;
            text.style.color = '#fff';
            text.style.textShadow = '1px 1px 2px #000';

            box.appendChild(text);
            container.appendChild(box);
        }

        // Initial render
        updateBox();
    </script>
</body>
</html>

Dat.GUI Library (Lightweight, Fast, Free - JavaScript Library)

Working Example

Resources & Links