library-mirrors/dat.gui
1
0
Fork 0
mirror of https://github.com/dataarts/dat.gui.git synced 2024-12-12 04:08:27 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

removed canvas element to be just html

Browse Source
This commit is contained in:
jonobr1 2011-01-25 17:58:52 -07:00
parent fa4df59d0e
commit 7913c0d0b7
3 changed files with 37 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
demo/demo.css
View File

@ -18,7 +18,7 @@ h1 {
font-weight: 800; font-weight: 800;
text-transform: lowercase; text-transform: lowercase;
line-height: 80px; line-height: 80px;
margin: 20px 0 0 0; margin: 20px 0 20px 0;
} }
h1 a:link, h1 a:visited, h1 a:hover, h1 a:active { h1 a:link, h1 a:visited, h1 a:hover, h1 a:active {
@ -31,7 +31,6 @@ h1 img {
height: 45px; height: 45px;
-moz-border-radius: 9px; -moz-border-radius: 9px;
border-radius: 9px; border-radius: 9px;
margin-bottom: 20px;
} }
pre { pre {
@ -57,6 +56,20 @@ a:active {
color: #54396e; color: #54396e;
} }
#columns {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 10px;
}
#columns div {
float: left;
width : auto;
height: 10px;
}
/* SPAN elements with the classes below are added by prettyprint. */ /* SPAN elements with the classes below are added by prettyprint. */
.str { color: #0fa954; } .str { color: #0fa954; }
.kwd { color: #e61d5f; } .kwd { color: #e61d5f; }

30
demo/demo.js
View File

@ -1,30 +0,0 @@
var c, g;
var frameRate = 1000/60;
var width, height;
var checkAsset = 0;
var letterWidth = 50;
function setup() {
c = document.getElementById('helvetica-demo');
g = c.getContext('2d');
width = c.width;
height = c.height;
g.font = "800 80px helvetica, arial, sans-serif";
frameRate = setInterval("draw()", frameRate);
}
function draw() {
g.fillStyle = "#fff";
g.fillRect(0, 0, width, height);
g.fillStyle = "#222";
g.fillText(controllableObject.pageTitle, 0, 80);
}

43
index.html
View File

@ -15,8 +15,7 @@
<script type="text/javascript" src="controllers/controller.number.js"></script> <script type="text/javascript" src="controllers/controller.number.js"></script>
<script type="text/javascript" src="controllers/controller.boolean.js"></script> <script type="text/javascript" src="controllers/controller.boolean.js"></script>
<script type="text/javascript" src="controllers/controller.function.js"></script> <script type="text/javascript" src="controllers/controller.function.js"></script>
<script type="text/javascript" src="demo/swell.js"></script> <!-- <script type="text/javascript" src="demo/demo.js"></script> -->
<script type="text/javascript" src="demo/demo.js"></script>
<script type="text/javascript"> <script type="text/javascript">
var controllableObject = var controllableObject =
{ {
@ -37,18 +36,18 @@
prettyPrint(); prettyPrint();
GUI.start(); GUI.start();
// Creates a number box // Creates a number box
GUI.add(controllableObject, "numberProperty"); GUI.add(controllableObject, "numberProperty");
// Creates a slider (min, max) // Creates a slider (min, max)
GUI.add(controllableObject, "constrainedNum", -100, 100) GUI.add(controllableObject, "constrainedNum", 0, 16);
// Creates a slider with notches // Creates a slider with notches
GUI.add(controllableObject, "notchedNum", 0, 800, 100) GUI.add(controllableObject, "notchedNum", 0, 800, 100);
// Creates a text field // Creates a text field
GUI.add(controllableObject, "pageTitle"); GUI.add(document.getElementById('helvetica-demo'), "innerHTML");
// Creates a checkbox // Creates a checkbox
GUI.add(controllableObject, "booleanProperty"); GUI.add(controllableObject, "booleanProperty");
@ -57,12 +56,12 @@
GUI.add(controllableObject, "functionProperty") GUI.add(controllableObject, "functionProperty")
.setName("Fire a Function"); .setName("Fire a Function");
setup();
}; };
</script> </script>
</head> </head>
<body> <body>
<h1><a href = "http://twitter.com/guidat"><img src = "demo/assets/favicon.gif" border = "0" alt = "GUI-DAT flag" /></a><canvas id = "helvetica-demo" width = "500" height = "100">gui-dat</canvas></h1> <h1><a href = "http://twitter.com/guidat"><img src = "demo/assets/favicon.gif" border = "0" alt = "GUI-DAT flag" /></a><span id = "helvetica-demo">gui-dat</span></h1>
<p> <p>
is a super-light javascript library for making GUI elements. It is inspired by <a href = "http://www.sojamo.de/libraries/controlP5/">controlP5</a>. is a super-light javascript library for making GUI elements. It is inspired by <a href = "http://www.sojamo.de/libraries/controlP5/">controlP5</a>.
</p> </p>
@ -70,20 +69,22 @@
<pre id="demo-pre" class="prettyprint"> <pre id="demo-pre" class="prettyprint">
var controllableObject = var controllableObject =
{ {
numberProperty: 20, numberProperty: 20,
constrainedNum: 0, constrainedNum: 0,
notchedNum: 240, notchedNum: 240,
textProperty: "a string", pageTitle: "gui-dat",
anotherTextProperty: "another string", anotherTextProperty: "another string",
booleanProperty: false, booleanProperty: false,
anotherBooleanProperty: false, anotherBooleanProperty: false,
functionProperty: function() { functionProperty: function() {
alert("I am a function!"); alert("I am a function!");
} }
}; };
window.onload = function() { window.onload = function() {
prettyPrint();
GUI.start(); GUI.start();
// Creates a number box // Creates a number box
@ -91,12 +92,12 @@ window.onload = function() {
// Creates a slider (min, max) // Creates a slider (min, max)
GUI.add(controllableObject, "constrainedNum", -100, 100) GUI.add(controllableObject, "constrainedNum", -100, 100)
// Creates a slider with notches // Creates a slider with notches
GUI.add(controllableObject, "notchedNum", 0, 800, 100) GUI.add(controllableObject, "notchedNum", 0, 800, 100)
// Creates a text field // Creates a text field
GUI.add(controllableObject, "textProperty"); GUI.add(controllableObject, "pageTitle");
// Creates a checkbox // Creates a checkbox
GUI.add(controllableObject, "booleanProperty"); GUI.add(controllableObject, "booleanProperty");
@ -104,11 +105,11 @@ window.onload = function() {
// Creates a button // Creates a button
GUI.add(controllableObject, "functionProperty") GUI.add(controllableObject, "functionProperty")
.setName("Fire a Function"); .setName("Fire a Function");
}; };
</pre> </pre>
<footer> <footer>
By <a href="http://georgemichaelbrower.com/">George Michael Brower</a>, <a href="http://jonobr1.com/">Jono Brandel</a>, and <a href="http://github.com/jonobr1/GUI-DAT">you</a>. By <a href="http://georgemichaelbrower.com/">George Michael Brower</a>, <a href="http://jonobr1.com/">Jono Brandel</a>, and <a href="http://github.com/jonobr1/GUI-DAT">you</a>.
</footer> </footer>
<div id = "columns"></div>
</body> </body>
</html> </html>