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;
text-transform: lowercase;
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 {
@ -31,7 +31,6 @@ h1 img {
height: 45px;
-moz-border-radius: 9px;
border-radius: 9px;
margin-bottom: 20px;
}
pre {
@ -57,6 +56,20 @@ a:active {
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. */
.str { color: #0fa954; }
.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);
}

103
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.boolean.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">
var controllableObject =
{
@ -41,6 +40,56 @@
// Creates a number box
GUI.add(controllableObject, "numberProperty");
// Creates a slider (min, max)
GUI.add(controllableObject, "constrainedNum", 0, 16);
// Creates a slider with notches
GUI.add(controllableObject, "notchedNum", 0, 800, 100);
// Creates a text field
GUI.add(document.getElementById('helvetica-demo'), "innerHTML");
// Creates a checkbox
GUI.add(controllableObject, "booleanProperty");
// Creates a button
GUI.add(controllableObject, "functionProperty")
.setName("Fire a Function");
};
</script>
</head>
<body>
<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>
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>
<pre id="demo-pre" class="prettyprint">
var controllableObject =
{
numberProperty: 20,
constrainedNum: 0,
notchedNum: 240,
pageTitle: "gui-dat",
anotherTextProperty: "another string",
booleanProperty: false,
anotherBooleanProperty: false,
functionProperty: function() {
alert("I am a function!");
}
};
window.onload = function() {
prettyPrint();
GUI.start();
// Creates a number box
GUI.add(controllableObject, "numberProperty");
// Creates a slider (min, max)
GUI.add(controllableObject, "constrainedNum", -100, 100)
@ -56,59 +105,11 @@
// Creates a button
GUI.add(controllableObject, "functionProperty")
.setName("Fire a Function");
setup();
};
</script>
</head>
<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>
<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>.
</p>
<pre id="demo-pre" class="prettyprint">
var controllableObject =
{
numberProperty: 20,
constrainedNum: 0,
notchedNum: 240,
textProperty: "a string",
anotherTextProperty: "another string",
booleanProperty: false,
anotherBooleanProperty: false,
functionProperty: function() {
alert("I am a function!");
}
};
window.onload = function() {
GUI.start();
// Creates a number box
GUI.add(controllableObject, "numberProperty");
// Creates a slider (min, max)
GUI.add(controllableObject, "constrainedNum", -100, 100)
// Creates a slider with notches
GUI.add(controllableObject, "notchedNum", 0, 800, 100)
// Creates a text field
GUI.add(controllableObject, "textProperty");
// Creates a checkbox
GUI.add(controllableObject, "booleanProperty");
// Creates a button
GUI.add(controllableObject, "functionProperty")
.setName("Fire a Function");
};
</pre>
<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>.
</footer>
<div id = "columns"></div>
</body>
</html>