dat.gui/examples/index.html

<!doctype html>
<html lang="en">
<head>

    <meta charset="utf-8">
    <title>dat-gui kitchen sink</title>

    <script src="../build/gui.js"></script>
   
    <meta name="viewport" content="width=device-width, user-scalable=no">
    
    <style type="text/css">
    body {
        background: #aaa;
    }
    </style>

</head>
<body>

    body content.

    <script>

    var object = { 
        "boolean": false,
        "listen4Free": 332,
        "zeroTo1": 0,
        "step": 10,
        "straddleZero": 0,
        "maxIsNegative": -2,
        "hasComment": 0
    };

    // How do we kill polymer-ready ... 
    Gui.ready( function() {
        
        gui = new Gui();

        gui.docked = true;

        gui.add( gui, 'docked' );

        var r = gui.add( gui, 'open' );
        gui.add( r.row, 'name' );

        gui.add( object, 'boolean' );
        
        gui.add( object, 'listen4Free' );
        gui.add( object, 'listen4Free' );
        gui.add( object, 'listen4Free', 0, 1000 );

        gui.add( object, 'zeroTo1', 0, 1 );
        
        gui.add( object, 'hasComment' ).comment( 'Hi there.' );

        gui.add( object, 'listen4Free' ).name( 'customName' )

        gui.add( object, 'step', 0, 50, 5 ).comment( 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam semper dui metus, sed aliquet nulla fermentum nec. Sed massa felis, congue nec libero ut, condimentum hendrerit purus. Cras a cursus ante. Integer nec nibh vitae lacus convallis viverra in at urna. Donec hendrerit convallis lacus, nec condimentum neque aliquam ac. Sed suscipit leo vel ligula condimentum scelerisque. Aliquam fermentum sagittis nisi vitae accumsan. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In et dolor eros. Sed vel venenatis odio, quis porta mi. Ut sed commodo velit, in porta ante.' );

        gui.add( object, 'straddleZero', -1, 1, 0.01 ).comment( 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam semper dui metus, sed aliquet nulla fermentum nec.' );

        gui.add( object, 'maxIsNegative', -5, -2 );

        gui.anon( 0, 'anonymousSlider', -1, 1 ).comment( 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam semper dui metus');

        gui.anon( 32, 'beats', 1, 64, 1 ).comment( 'The number of beats in the song.');
        gui.anon( 0, 'loops', -2, 2, 1 ).comment( 'The number of times the gif loops in a cycle.' );
        gui.anon( 0, 'start', -2, 2, 1 ).comment( 'The frame of the gif where the song should start.' );

    } );

    </script>

</body>
</html>
initial polymer import 2014-08-27 00:01:15 +00:00			`<!doctype html>`
			`<html lang="en">`
			`<head>`

			`<meta charset="utf-8">`
			`<title>dat-gui kitchen sink</title>`

built as single js proof of concept 2014-09-02 22:34:12 +00:00			`<script src="../build/gui.js"></script>`

tood 2014-09-03 16:16:11 +00:00			`<meta name="viewport" content="width=device-width, user-scalable=no">`
cross browser woes 2014-09-02 16:00:08 +00:00
initial polymer import 2014-08-27 00:01:15 +00:00			`<style type="text/css">`
			`body {`
			`background: #aaa;`
			`}`
			`</style>`

			`</head>`
			`<body>`

			`body content.`

			`<script>`

			`var object = {`
cross-browser frustration 2014-09-02 17:13:35 +00:00			`"boolean": false,`
initial polymer import 2014-08-27 00:01:15 +00:00			`"listen4Free": 332,`
			`"zeroTo1": 0,`
			`"step": 10,`
			`"straddleZero": 0,`
			`"maxIsNegative": -2,`
			`"hasComment": 0`
			`};`

			`// How do we kill polymer-ready ...`
workflow and gulpfile 2014-09-03 00:00:52 +00:00			`Gui.ready( function() {`
cross browser woes 2014-09-02 16:00:08 +00:00
			`gui = new Gui();`
initial polymer import 2014-08-27 00:01:15 +00:00
			`gui.docked = true;`

			`gui.add( gui, 'docked' );`

cross-browser frustration 2014-09-02 17:13:35 +00:00			`var r = gui.add( gui, 'open' );`
initial polymer import 2014-08-27 00:01:15 +00:00			`gui.add( r.row, 'name' );`

cross-browser frustration 2014-09-02 17:13:35 +00:00			`gui.add( object, 'boolean' );`
initial polymer import 2014-08-27 00:01:15 +00:00
			`gui.add( object, 'listen4Free' );`
			`gui.add( object, 'listen4Free' );`
			`gui.add( object, 'listen4Free', 0, 1000 );`

			`gui.add( object, 'zeroTo1', 0, 1 );`

			`gui.add( object, 'hasComment' ).comment( 'Hi there.' );`

			`gui.add( object, 'listen4Free' ).name( 'customName' )`

			gui.add( object, 'step', 0, 50, 5 ).comment( 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam semper dui metus, sed aliquet nulla fermentum nec. Sed massa felis, congue nec libero ut, condimentum hendrerit purus. Cras a cursus ante. Integer nec nibh vitae lacus convallis viverra in at urna. Donec hendrerit convallis lacus, nec condimentum neque aliquam ac. Sed suscipit leo vel ligula condimentum scelerisque. Aliquam fermentum sagittis nisi vitae accumsan. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In et dolor eros. Sed vel venenatis odio, quis porta mi. Ut sed commodo velit, in porta ante.' );

			`gui.add( object, 'straddleZero', -1, 1, 0.01 ).comment( 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam semper dui metus, sed aliquet nulla fermentum nec.' );`

			`gui.add( object, 'maxIsNegative', -5, -2 );`

			`gui.anon( 0, 'anonymousSlider', -1, 1 ).comment( 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam semper dui metus');`

			`gui.anon( 32, 'beats', 1, 64, 1 ).comment( 'The number of beats in the song.');`
			`gui.anon( 0, 'loops', -2, 2, 1 ).comment( 'The number of times the gif loops in a cycle.' );`
			`gui.anon( 0, 'start', -2, 2, 1 ).comment( 'The frame of the gif where the song should start.' );`

cross browser woes 2014-09-02 16:00:08 +00:00			`} );`
initial polymer import 2014-08-27 00:01:15 +00:00
			`</script>`

			`</body>`
			`</html>`