mirror of
https://github.com/dataarts/dat.gui.git
synced 2024-12-12 04:08:27 +00:00
94 lines
2.5 KiB
HTML
94 lines
2.5 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
|
|
<meta charset="utf-8">
|
|
<title>dat-gui kitchen sink</title>
|
|
|
|
<!-- // <script src="../build/dat-gui.js"></script> -->
|
|
|
|
<script src="../../platform/platform.js"></script>
|
|
<link rel="import" href="../dat-gui.html">
|
|
|
|
|
|
<meta name="viewport" content="width=device-width, user-scalable=no">
|
|
|
|
<style type="text/css">
|
|
body {
|
|
background: #aaa;
|
|
}
|
|
</style>
|
|
|
|
</head>
|
|
<body>
|
|
|
|
body content.
|
|
|
|
<script>
|
|
/* globals Gui */
|
|
|
|
var object = {
|
|
"boolean": false,
|
|
"listen4Free": 332,
|
|
"zeroTo1": 0,
|
|
"step": 10,
|
|
"straddleZero": 0,
|
|
"maxIsNegative": -2,
|
|
"hasComment": 0,
|
|
"optionController": 'a'
|
|
};
|
|
|
|
// How do we kill polymer-ready ...
|
|
Gui.ready( function() {
|
|
|
|
var 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.' );
|
|
|
|
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.var( 'anonymousSlider', 0, -1, 1 ).comment( 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam semper dui metus');
|
|
|
|
gui.add( object, 'optionController', { A: 'a', B: 'b', C: 'c'} );
|
|
gui.add( object, 'optionController', [ 'a', 'b', 'c' ] )
|
|
.onChange( function( val ) {
|
|
// console.log( val );
|
|
});
|
|
|
|
|
|
var testElement = document.createElement( 'div' );
|
|
testElement.id = 'test';
|
|
testElement.innerHTML = 'test dock container';
|
|
testElement.style.left = '50%';
|
|
testElement.style.top = '50%';
|
|
testElement.style.position = 'absolute';
|
|
gui.$.dockedContent.appendChild( testElement );
|
|
|
|
} );
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|